- redmineのチャットについて

#36174 に対応しました。

ABVJE_Launcher_Android/assets/chat/public/css/chat.css

@@ -570,4 +570,16 @@ a.article:hover {
   display: inline-block;
   text-align: left;
   width: 100%;
-}
\ No newline at end of file
+}
+
+.modal-dialog {
+  z-index: 10001;
+}
+
+.modal {
+  z-index: 10101;
+}
+
+.modal-backdrop {
+  z-index:10050;
+}

ABVJE_Launcher_Android/assets/chat/public/js/chat.js

@@ -159,7 +159,16 @@ socket.on('disconnect', function (){
 socket.on('connect_error', function (){
   jQuery('.overlay').addClass('active undismissable');
 //  console.log('connect_error');
-  alert('connect_error');
+  // #36174
+  $("#customAlertTitle").text(getLocalizedString("errorConnect"));
+  $("#customAlertOk").text(getLocalizedString("yesTitle"));
+
+  $('#customAlert').appendTo("body").modal({
+    backdrop: 'static',
+    keyboard: false
+  })
+  .on('click', '#customAlertOk', function(e) {
+  });
   dismissLoadingIndicator();
 });
 
@@ -324,22 +333,33 @@ jQuery('#roomDeleteButton').on('click', function(e){
     // チャットルームの削除アイコンにクリックイベントを与える
     jQuery('.deleteBox').off('click');
     jQuery('.deleteBox').on('click', function(e){
+      // #36174
+      let roomId = jQuery(this).data('roomId');
+      let activeRoom = jQuery(this).data('activeRoom');
+      $("#roomDeleteTitle").text(getLocalizedString("roomDeleteTitle"));
+      $("#roomDelete").text(getLocalizedString("roomDelete"));
+      $("#cancelTitle").text(getLocalizedString("cancelTitle"));
+
       // #36128
-      if (window.confirm('Do you want to delete this room?')) {
+      $('#roomDeleteConfirm').appendTo("body").modal({
+        backdrop: 'static',
+        keyboard: false
+      })
+      .on('click', '#roomDelete', function(e) {
         //loadingIndicatorを表示
         showLoadingIndicator();
         // 現在接続されているチャットルームを離れるとメッセージテップを初期化する
-        if (jQuery(this).data('activeRoom')) {
+        if (activeRoom) {
           jQuery('#messages').html('');
           saveRoomInfo('', '');
         }
         // チャットルームから退場する
-        socket.emit('exitRoom', jQuery(this).data('roomId'));
+        socket.emit('exitRoom', roomId);
 
         // #36129に対応
         let roomListTitle = getLocalizedString("roomListTitle")
         $('.titleRoomName').text(roomListTitle)
-      }
+      });
     });
   }
 });
@@ -736,14 +756,23 @@ jQuery('#chatKeyword').on('keypress', function(event){
 
 // Exit Room
 jQuery('#exitRoom').on('click', function(event){
-  if (window.confirm('Do you want to leave this room?')) {
+  // 36174
+  $("#exitRoomTitle").text(getLocalizedString("exitRoomTitle"));
+  $("#exitRoomOk").text(getLocalizedString("yesTitle"));
+  $("#noExit").text(getLocalizedString("cancelTitle"));
+
+  $('#exitRoomConfirm').appendTo("body").modal({
+    backdrop: 'static',
+    keyboard: false
+  })
+  .on('click', '#exitRoomOk', function(e) {
     //loadingIndicatorを表示
     showLoadingIndicator();
     // チャットルームから退場する
     socket.emit('exitRoom');
     jQuery('#dismiss').click();
     saveRoomInfo('', '');
-  }
+  });
 });
 
 // Side Bar
@@ -1127,7 +1156,21 @@ jQuery('#pills-confirm-tab').on('shown.bs.tab', function (e){
 
 socket.on('showServerError', function (message){
   console.log(message);
-  alert(message);
+  // #36174
+  if (message == 'server error Ocurred') {
+    message = getLocalizedString("serverErrorOccured");
+  } else if (message == 'Room not found') {
+    message = getLocalizedString("errorRoomNotFound");
+  }
+  $("#customAlertTitle").text(message);
+  $("#customAlertOk").text(getLocalizedString("yesTitle"));
+
+  $('#customAlert').appendTo("body").modal({
+    backdrop: 'static',
+    keyboard: false
+  })
+  .on('click', '#customAlertOk', function(e) {
+  });
   dismissLoadingIndicator();
 
   if(message == "Room not found"){
@@ -1149,7 +1192,16 @@ socket.on("retryJoinProcess", () => {
     //webでのsocket connect
     socket.emit('join', params, function (err) {
       if (err) {
-        alert(err);
+        // #36174
+        $("#customAlertTitle").text(err);
+        $("#customAlertOk").text(getLocalizedString("yesTitle"));
+
+        $('#customAlert').appendTo("body").modal({
+          backdrop: 'static',
+          keyboard: false
+        })
+        .on('click', '#customAlertOk', function(e) {
+        });
       } else {
         console.log('No error');
         if(params.roomName != undefined) {
@@ -1246,21 +1298,50 @@ function showConfirmView(isInvite){
         // #36130に対応
         const trimmedRoomName = jQuery('#newRoomName').val().trim()
         if (trimmedRoomName.length == 0) {
-          //ルーム名を入力しなかったら、ルーム名textFieldにfocusを置く
-          jQuery('#newRoomName').focus();
-          alert("Input RoomName");
+          // 36174
+          $("#userSelectionTitle").text(getLocalizedString("inputRoomName"));
+          $("#yesTitle").text(getLocalizedString("yesTitle"));
+
+          $('#confirm').appendTo("body").modal({
+              backdrop: 'static',
+              keyboard: false
+          })
+          .on('click', '#yesTitle', function(e) {
+            //ルーム名を入力しなかったら、ルーム名textFieldにfocusを置く
+            jQuery('#newRoomName').focus();
+          });
+
         } else if(trimmedRoomName.includes(';') || trimmedRoomName.includes('/') || trimmedRoomName.includes('?') || trimmedRoomName.includes(':') || trimmedRoomName.includes("@")
            || trimmedRoomName.includes('&') || trimmedRoomName.includes('=') || trimmedRoomName.includes("+") || trimmedRoomName.includes('$') || trimmedRoomName.includes(",") || trimmedRoomName.includes('-')
            || trimmedRoomName.includes('_') || trimmedRoomName.includes('.') || trimmedRoomName.includes('!') || trimmedRoomName.includes('~') || trimmedRoomName.includes('*') || trimmedRoomName.includes("\'")
            || trimmedRoomName.includes('(') || trimmedRoomName.includes(')') || trimmedRoomName.includes('#') || trimmedRoomName.includes("\\") || trimmedRoomName.includes("\"") || trimmedRoomName.includes("`")) {
           // #36147
-          alert("InvalidSpecialCharacterRoomName")
+          // #36174
+          $("#customAlertTitle").text(getLocalizedString("invalidCharacter"));
+          $("#customAlertOk").text(getLocalizedString("yesTitle"));
+
+          $('#customAlert').appendTo("body").modal({
+            backdrop: 'static',
+            keyboard: false
+          })
+          .on('click', '#customAlertOk', function(e) {
+          });
         } else if (trimmedRoomName.length > 20) {
           // #36142
           var inputText = $('#newRoomName').val().trim(); // #36142 文字列の前又は後の空白文字列を削除
-          alert("Please enter room name less than 20 characters", () => {
+
+          // #36174
+          $("#customAlertTitle").text(getLocalizedString("nameTooLong"));
+          $("#customAlertOk").text(getLocalizedString("yesTitle"));
+
+          $('#customAlert').appendTo("body").modal({
+            backdrop: 'static',
+            keyboard: false
+          })
+          .on('click', '#customAlertOk', function(e) {
             $('#newRoomName').val(inputText.substr(0, $('#newRoomName').prop("maxlength")));
           });
+
         } else {
           //loadingIndicatorを表示
           showLoadingIndicator();
@@ -1287,9 +1368,19 @@ function showConfirmView(isInvite){
   jQuery("#userSelectionDeleteBtn").hide();
 
   jQuery("#userSelectionDeleteBtn").off().on('click', function() {
-    if(window.confirm('Do you want to remove selected members from the list?')) {
+    // #36174
+    $("#customConfirmTitle").text(getLocalizedString("memberDeleteTitle"));
+    $("#customConfirmOk").text(getLocalizedString("roomDelete"));
+    $("#customAlertCancel").text(getLocalizedString("cancelTitle"));
+
+    $('#customConfirm').appendTo("body").modal({
+      backdrop: 'static',
+      keyboard: false
+    })
+    .on('click', '#customConfirmOk', function(e) {
       deleteButtonAction(isInvite);
-    }
+    });
+
   });
 }
 
@@ -1352,7 +1443,17 @@ function getLoginParameter(sid, loginId, shopName, roomId = undefined, roomName
 
   socket.emit('join', globalLoginParameter, function (err) {
     if (err) {
-      alert(err);
+      // #36174
+      $("#customAlertTitle").text(err);
+      $("#customAlertOk").text(getLocalizedString("yesTitle"));
+
+      $('#customAlert').appendTo("body").modal({
+        backdrop: 'static',
+        keyboard: false
+      })
+      .on('click', '#customAlertOk', function(e) {
+      });
+
     } else {
       console.log('No error');
       if (globalLoginParameter.roomName != undefined && globalLoginParameter.roomName != "null") {

ABVJE_Launcher_Android/assets/chat/public/js/language_en.js

@@ -31,5 +31,18 @@ $.lang.en = {
     "everyoneIsHere":"Everyone is in the chat.",
     "people":"people",
     "searchResult":"Results",
-    "searchRoomListEmptyString":"No search results."
+    "searchRoomListEmptyString":"No search results.",
+    "inputRoomName":"Please enter a room name.",
+    "exitRoomTitle":"Do you want to leave this room?",
+    "roomDeleteTitle":"Do you want to delete this room?",
+    "roomDelete":"Delete",
+    "cancelTitle":"No",
+    "yesTitle":"Yes",
+    "invalidCharacter":"The character ;/?:@&=+$,-_.!~*\'()#\\\"` cannot be included in the roomname.",
+    "nameTooLong":"Please enter room name less than 20 characters.",
+    "errorDisconnected":"Disconnected from the server.",
+    "errorConnect":"There was a problem with the network.\n Please check the connection status of the network.",
+    "errorRoomNotFound":"This chat room has already been deleted.",
+    "serverErrorOccured":"App will not be able to communicate with the server. \n After a few moments, please try again.",
+    "memberDeleteTitle":"Do you want to remove selected members from the list?"
 }

ABVJE_Launcher_Android/assets/chat/public/js/language_ja.js

@@ -31,5 +31,18 @@ $.lang.ja = {
     "everyoneIsHere":"招待可能なメンバーがいません。",
     "people":"人",
     "searchResult":"件のトーク",
-    "searchRoomListEmptyString":"検索結果がありません。"
+    "searchRoomListEmptyString":"検索結果がありません。",
+    "inputRoomName":"ルーム名を入力してください。",
+    "exitRoomTitle":"このチャットルームを出ますか？",
+    "roomDeleteTitle":"このチャットルームを削除しますか？",
+    "roomDelete":"削除",
+    "cancelTitle":"いいえ",
+    "yesTitle":"はい",
+    "invalidCharacter":"特殊文字 ;/?:@&=+$,-_.!~*\'()#\\\"` はルーム名に含めることができません。",
+    "nameTooLong":"ルーム名は文字列20字以内に入力してください。",
+    "errorDisconnected":"接続が切れました。",
+    "errorConnect":"ネットワークに問題がありました。\nネットワークの接続状態を確認してください。",
+    "errorRoomNotFound":"既に削除されたチャットルームです。",
+    "serverErrorOccured":"サーバと通信できません。\nしばらく時間をおいて再度操作してください。",
+    "memberDeleteTitle":"選択したメンバーをリストから削除しますか？"
 }

ABVJE_Launcher_Android/assets/chat/public/js/language_ko.js

@@ -31,5 +31,18 @@ $.lang.ko = {
     "everyoneIsHere":"초대가능한 유저가 없습니다.",
     "people":"명",
     "searchResult":"건의 결과",
-    "searchRoomListEmptyString":"검색 결과가 없습니다."
+    "searchRoomListEmptyString":"검색 결과가 없습니다.",
+    "inputRoomName":"방 제목을 입력해 주십시오.",
+    "exitRoomTitle":"이 채팅방을 나가시겠습니까?",
+    "roomDeleteTitle":"이 방을 삭제 하시겠습니까?",
+    "roomDelete":"삭제",
+    "cancelTitle":"아니오",
+    "yesTitle":"예",
+    "invalidCharacter":"특수문자 ;/?:@&=+$,-_.!~*\'()#\\\"` 는 방 제목에 포함될 수 없습니다.",
+    "nameTooLong":"방 제목은 20자 이내로 입력해 주세요.",
+    "errorDisconnected":"서버와 접속이 끊어졌습니다.",
+    "errorConnect":"네트워크에 문제가 발생했습니다.\n네트워크 연결상태를 확인하여 주십시요.",
+    "errorRoomNotFound":"이미 삭제된 채팅룸입니다.",
+    "serverErrorOccured":"서버와 통신할 수 없습니다.\n잠시 후 다시 시도해보시기 바랍니다.",
+    "memberDeleteTitle":"목록에서 선택된 멤버를 삭제하시겠습니까?"
 }

ABVJE_Launcher_Android/assets/chat/public/newstart.html

@@ -25,6 +25,21 @@
         <button class="btn btn-primary roomListIcon" type="button" id="roomDeleteButton">
           <i class="fa fa-trash"></i>
         </button>
+        <!-- Confirm Dialog -->
+        <div id="roomDeleteConfirm" class="modal fade">
+          <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+              <div class="modal-body" id="roomDeleteTitle">
+                Are you sure?
+              </div>
+              <div class="modal-footer">
+                <button type="button" data-dismiss="modal" class="btn btn-primary" id="roomDelete">Delete</button>
+                <button type="button" data-dismiss="modal" class="btn" id="cancelTitle">Cancel</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
       </li>
       <li class="nav-item dropdown roomListIcon">
         <a class="nav-link dropdown-toggle" href="#" id="arrangeRooms" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -76,6 +91,20 @@
           <span id="userSelectionLength" class="badge badge-light"></span>
           <i class="fas fa-check"></i>
         </button>
+        <!-- Alert Dialog -->
+        <div id="confirm" class="modal fade">
+          <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+              <div class="modal-body" id="userSelectionTitle">
+                Are you sure?
+              </div>
+              <div class="modal-footer">
+                <button type="button" data-dismiss="modal" class="btn" id="yesTitle">OK</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
       </li>
     </ul>
   </nav>
@@ -93,6 +122,21 @@
       <a class="btn text-light" role="button" id="exitRoom">
         Exit <i class="fas fa-door-open"></i>
       </a>
+      <!-- Confirm Dialog -->
+      <div id="exitRoomConfirm" class="modal fade">
+        <div class="modal-dialog modal-dialog-centered">
+          <div class="modal-content">
+            <div class="modal-body" id="exitRoomTitle">
+              Are you sure?
+            </div>
+            <div class="modal-footer">
+              <button type="button" data-dismiss="modal" class="btn btn-primary" id="exitRoomOk">Ok</button>
+              <button type="button" data-dismiss="modal" class="btn" id="noExit">Cancel</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
     </footer>
   </nav>
   <!-- Dark Overlay element -->
@@ -103,6 +147,36 @@
       <span class="sr-only">Loading...</span>
     </div>
   </div>
+
+  <!-- Error Alert Dialog -->
+  <div id="customAlert" class="modal fade">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-body" id="customAlertTitle">
+          Are you sure?
+        </div>
+        <div class="modal-footer">
+          <button type="button" data-dismiss="modal" class="btn btn-primary" id="customAlertOk">Ok</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Confirm Dialog -->
+  <div id="customConfirm" class="modal fade">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-body" id="customConfirmTitle">
+          Are you sure?
+        </div>
+        <div class="modal-footer">
+          <button type="button" data-dismiss="modal" class="btn btn-primary" id="customConfirmOk">Ok</button>
+          <button type="button" data-dismiss="modal" class="btn" id="customAlertCancel">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div class="tab-content" id="pills-tabContent">
     <div class="tab-pane fade show active" id="pills-chatlist" role="tabpanel" aria-labelledby="pills-chatlist-tab">
       <div class="inbox_people">