From dc882b74bf40c8b3779faa2cdbdc6d7d8e23e8ff Mon Sep 17 00:00:00 2001
From: Evgeniy Alekseev <i@arcanis.me>
Date: Wed, 19 Jan 2022 03:04:59 +0300
Subject: [PATCH] move modals to form validation

---
 src/main/resources/html/bis.html   | 46 +++++++++++++++++++-----------
 src/main/resources/html/loot.html  | 22 +++++++-------
 src/main/resources/html/party.html | 21 ++++++--------
 src/main/resources/html/users.html | 23 +++++++--------
 src/main/resources/static/load.js  |  2 +-
 5 files changed, 60 insertions(+), 54 deletions(-)

diff --git a/src/main/resources/html/bis.html b/src/main/resources/html/bis.html
index 595c65c..a57afaf 100644
--- a/src/main/resources/html/bis.html
+++ b/src/main/resources/html/bis.html
@@ -86,7 +86,7 @@
 
     <div id="update-bis-dialog" tabindex="-1" role="dialog" class="modal fade">
         <div class="modal-dialog" role="document">
-            <form class="modal-content">
+            <form class="modal-content" action="javascript:" onsubmit="updateBis()">
                 <div class="modal-header">
                     <div class="btn-group" role="group" aria-label="Update bis">
                         <input id="add-piece-btn" name="update-bis" type="radio" class="btn-check" autocomplete="off" checked>
@@ -102,7 +102,7 @@
                     <div class="form-group row">
                         <label class="col-sm-4 col-form-label" for="player">player</label>
                         <div class="col-sm-8">
-                            <select id="player" name="player" class="form-control" title="player"></select>
+                            <select id="player" name="player" class="form-control" title="player" required></select>
                         </div>
                     </div>
                     <div id="piece-row" class="form-group row">
@@ -120,14 +120,14 @@
                     <div id="bis-link-row" class="form-group row" style="display: none">
                         <label class="col-sm-4 col-form-label" for="bis-link">link</label>
                         <div class="col-sm-8">
-                            <input id="bis-link" name="link" class="form-control" placeholder="link to bis" onkeyup="disableSubmitBisButton()">
+                            <input id="bis-link" name="link" class="form-control" placeholder="link to bis">
                         </div>
                     </div>
 
                     <div class="modal-footer">
                         <button type="button" class="btn btn-danger" data-bs-dismiss="modal">close</button>
-                        <button id="submit-add-bis-btn" type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="addPiece()" disabled>add</button>
-                        <button id="submit-update-bis-btn" type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="setBis()" style="display: none" disabled>set</button>
+                        <button id="submit-add-bis-btn" type="submit" class="btn btn-primary">add</button>
+                        <button id="submit-set-bis-btn" type="submit" class="btn btn-primary" style="display: none">set</button>
                     </div>
                 </div>
             </form>
@@ -171,7 +171,7 @@
         const updateButton = $("#update-btn");
 
         const submitAddBisButton = $("#submit-add-bis-btn");
-        const submitUpdateBisButton = $("#submit-update-bis-btn");
+        const submitSetBisButton = $("#submit-set-bis-btn");
         const updateBisDialog = $("#update-bis-dialog");
 
         const addPieceButton = $("#add-piece-btn");
@@ -208,12 +208,8 @@
                 success: function (_) { reload(); },
                 error: function (jqXHR, _, errorThrown) { requestAlert(jqXHR, errorThrown); },
             });
-        }
-
-        function disableSubmitBisButton() {
-            const nonEmpty = (playerInput.val() !== null);  // well lol
-            submitUpdateBisButton.attr("disabled", !(nonEmpty && linkInput.val()));
-            submitAddBisButton.attr("disabled", !(nonEmpty));
+            updateBisDialog.modal("hide");
+            return true; // action expects boolean result
         }
 
         function hideControls() {
@@ -222,20 +218,24 @@
         }
 
         function hideLinkPart() {
-            disableSubmitBisButton();
             bisLinkRow.hide();
-            submitUpdateBisButton.hide();
+            linkInput.prop("required", false);
+            submitSetBisButton.hide();
             pieceRow.show();
             pieceTypeRow.show();
+            pieceInput.prop("required", true);
+            pieceTypeInput.prop("required", true);
             submitAddBisButton.show();
         }
 
         function hidePiecePart() {
-            disableSubmitBisButton();
             bisLinkRow.show();
-            submitUpdateBisButton.show();
+            linkInput.prop("required", true);
+            submitSetBisButton.show();
             pieceRow.hide();
             pieceTypeRow.hide();
+            pieceInput.prop("required", false);
+            pieceTypeInput.prop("required", false);
             submitAddBisButton.hide();
         }
 
@@ -269,7 +269,6 @@
                         return option;
                     });
                     playerInput.empty().append(options);
-                    disableSubmitBisButton();
                 },
                 error: function (jqXHR, _, errorThrown) { requestAlert(jqXHR, errorThrown); },
             });
@@ -327,6 +326,18 @@
                 success: function (_) { reload(); },
                 error: function (jqXHR, _, errorThrown) { requestAlert(jqXHR, errorThrown); },
             });
+            updateBisDialog.modal("hide");
+            return true; // action expects boolean result
+        }
+
+        function updateBis() {
+            if (updateBisButton.is(":checked")) {
+                return setBis();
+            }
+            if (addPieceButton.is(":checked")) {
+                return addPiece();
+            }
+            return false; // should not happen
         }
 
         $(function () {
@@ -344,6 +355,7 @@
 
             table.bootstrapTable({});
             reload();
+            reset();
         });
     </script>
 
diff --git a/src/main/resources/html/loot.html b/src/main/resources/html/loot.html
index 95c9af8..78fdaf8 100644
--- a/src/main/resources/html/loot.html
+++ b/src/main/resources/html/loot.html
@@ -88,35 +88,35 @@
 
     <div id="add-loot-dialog" tabindex="-1" role="dialog" class="modal fade">
         <div class="modal-dialog modal-lg" role="document">
-            <div class="modal-content">
+            <form class="modal-content" action="javascript:" onsubmit="addLoot()">
                 <div class="modal-header">
                     <h4 class="modal-title">add looted piece</h4>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                 </div>
 
-                <form class="modal-body">
+                <div class="modal-body">
                     <div class="form-group row">
                         <label class="col-sm-4 col-form-label" for="player">player</label>
                         <div class="col-sm-8">
-                            <select id="player" name="player" class="form-control" title="player"></select>
+                            <select id="player" name="player" class="form-control" title="player" required></select>
                         </div>
                     </div>
                     <div class="form-group row">
                         <label class="col-sm-4 col-form-label" for="piece">piece</label>
                         <div class="col-sm-8">
-                            <select id="piece" name="piece" class="form-control" title="piece"></select>
+                            <select id="piece" name="piece" class="form-control" title="piece" required></select>
                         </div>
                     </div>
                     <div class="form-group row">
                         <label class="col-sm-4 col-form-label" for="piece-type">piece type</label>
                         <div class="col-sm-8">
-                            <select id="piece-type" name="pieceType" class="form-control" title="pieceType"></select>
+                            <select id="piece-type" name="pieceType" class="form-control" title="pieceType" required></select>
                         </div>
                     </div>
                     <div class="form-group row">
                         <label class="col-sm-4 col-form-label" for="job">job</label>
                         <div class="col-sm-8">
-                            <select id="job" name="job" class="form-control" title="job"></select>
+                            <select id="job" name="job" class="form-control" title="job" required></select>
                         </div>
                     </div>
                     <div class="form-group row">
@@ -141,14 +141,14 @@
                         </tr>
                         </thead>
                     </table>
-                </form>
+                </div>
 
                 <div class="modal-footer">
                     <button type="button" class="btn btn-danger" data-bs-dismiss="modal">close</button>
                     <button type="button" class="btn btn-secondary" onclick="suggestLoot()">suggest</button>
-                    <button id="submit-btn" type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="addLoot()" disabled>add</button>
+                    <button type="submit" class="btn btn-primary">add</button>
                 </div>
-            </div>
+            </form>
         </div>
     </div>
 
@@ -189,7 +189,6 @@
         const addButton = $("#add-btn");
         const removeButton = $("#remove-btn");
 
-        const submitLootButton = $("#submit-btn");
         const addLootDialog = $("#add-loot-dialog");
 
         const freeLootInput = $("#free-loot");
@@ -221,6 +220,8 @@
                 success: function (_) { reload(); },
                 error: function (jqXHR, _, errorThrown) { requestAlert(jqXHR, errorThrown); },
             });
+            addLootDialog.modal("hide");
+            return true; // action expects boolean result
         }
 
         function hideControls() {
@@ -260,7 +261,6 @@
                         return option;
                     });
                     playerInput.empty().append(options);
-                    submitLootButton.attr("disabled", options.length === 0);
                 },
                 error: function (jqXHR, _, errorThrown) { requestAlert(jqXHR, errorThrown); },
             });
diff --git a/src/main/resources/html/party.html b/src/main/resources/html/party.html
index eb83f7a..a3c2f73 100644
--- a/src/main/resources/html/party.html
+++ b/src/main/resources/html/party.html
@@ -84,23 +84,23 @@
 
     <div id="add-player-dialog" tabindex="-1" role="dialog" class="modal fade">
         <div class="modal-dialog" role="document">
-            <div class="modal-content">
+            <form class="modal-content" action="javascript:" onsubmit="addPlayer()">
                 <div class="modal-header">
                     <h4 class="modal-title">add new player</h4>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                 </div>
 
-                <form class="modal-body">
+                <div class="modal-body">
                     <div class="form-group row">
                         <label class="col-sm-4 col-form-label" for="nick">player name</label>
                         <div class="col-sm-8">
-                            <input id="nick" name="nick" class="form-control" placeholder="nick" onkeyup="disableAddPlayerForm()">
+                            <input id="nick" name="nick" class="form-control" placeholder="nick" required>
                         </div>
                     </div>
                     <div class="form-group row">
                         <label class="col-sm-4 col-form-label" for="job">player job</label>
                         <div class="col-sm-8">
-                            <select id="job" name="job" class="form-control" title="job"></select>
+                            <select id="job" name="job" class="form-control" title="job" required></select>
                         </div>
                     </div>
                     <div class="form-group row">
@@ -115,13 +115,13 @@
                             <input id="priority" name="priority" type="number" class="form-control" value="0">
                         </div>
                     </div>
-                </form>
+                </div>
 
                 <div class="modal-footer">
                     <button type="button" class="btn btn-danger" data-bs-dismiss="modal">close</button>
-                    <button id="submit-player-btn" type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="addPlayer()" disabled>add</button>
+                    <button type="submit" class="btn btn-primary">add</button>
                 </div>
-            </div>
+            </form>
         </div>
     </div>
 
@@ -162,7 +162,6 @@
         const removeButton = $("#remove-btn");
 
         const addPlayerDialog = $("#add-player-dialog");
-        const submitPlayerButton = $("#submit-player-btn");
 
         const jobInput = $("#job");
         const linkInput = $("#link");
@@ -187,6 +186,8 @@
                 success: function (_) { reload(); },
                 error: function (jqXHR, _, errorThrown) { requestAlert(jqXHR, errorThrown); },
             });
+            addPlayerDialog.modal("hide");
+            return true; // action expects boolean result
         }
 
         function bisLinkFormatter(link, row) {
@@ -197,10 +198,6 @@
             }
         }
 
-        function disableAddPlayerForm() {
-            submitPlayerButton.attr("disabled", !nickInput.val());
-        }
-
         function hideControls() {
             addButton.attr("hidden", isReadOnly);
             removeButton.attr("hidden", isReadOnly);
diff --git a/src/main/resources/html/users.html b/src/main/resources/html/users.html
index cd6b71f..51ca374 100644
--- a/src/main/resources/html/users.html
+++ b/src/main/resources/html/users.html
@@ -84,38 +84,38 @@
 
     <div id="add-user-dialog" tabindex="-1" role="dialog" class="modal fade">
         <div class="modal-dialog" role="document">
-            <div class="modal-content">
+            <form class="modal-content" action="javascript:" onsubmit="addUser()">
                 <div class="modal-header">
                     <h4 class="modal-title">add new user</h4>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                 </div>
 
-                <form class="modal-body">
+                <div class="modal-body">
                     <div class="form-group row">
                         <label class="col-sm-4 col-form-label" for="username">login</label>
                         <div class="col-sm-8">
-                            <input id="username" name="username" class="form-control" placeholder="username" onkeyup="disableAddUserForm()">
+                            <input id="username" name="username" class="form-control" placeholder="username" required>
                         </div>
                     </div>
                     <div class="form-group row">
                         <label class="col-sm-4 col-form-label" for="password">password</label>
                         <div class="col-sm-8">
-                            <input id="password" name="password" type="password" class="form-control" placeholder="password" onkeyup="disableAddUserForm()">
+                            <input id="password" name="password" type="password" class="form-control" placeholder="password" required>
                         </div>
                     </div>
                     <div class="form-group row">
                         <label class="col-sm-4 col-form-label" for="permission">permission</label>
                         <div class="col-sm-8">
-                            <select id="permission" name="permission" class="form-control" title="permission"></select>
+                            <select id="permission" name="permission" class="form-control" title="permission" required></select>
                         </div>
                     </div>
-                </form>
+                </div>
 
                 <div class="modal-footer">
                     <button type="button" class="btn btn-danger" data-bs-dismiss="modal">close</button>
-                    <button id="submit-btn" type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="addUser()" disabled>add</button>
+                    <button type="submit" class="btn btn-primary">add</button>
                 </div>
-            </div>
+            </form>
         </div>
     </div>
 
@@ -156,7 +156,6 @@
         const removeButton = $("#remove-btn");
 
         const addUserDialog = $("#add-user-dialog");
-        const submitUserButton = $("#submit-btn");
 
         const usernameInput = $("#username");
         const passwordInput = $("#password");
@@ -176,10 +175,8 @@
                 success: function (_) { reload(); },
                 error: function (jqXHR, _, errorThrown) { requestAlert(jqXHR, errorThrown); },
             });
-        }
-
-        function disableAddUserForm() {
-            submitUserButton.attr("disabled", !(usernameInput.val() && passwordInput.val()));
+            addUserDialog.modal("hide");
+            return true; // action expects boolean result
         }
 
         function hideControls() {
diff --git a/src/main/resources/static/load.js b/src/main/resources/static/load.js
index 264148f..24ab85e 100644
--- a/src/main/resources/static/load.js
+++ b/src/main/resources/static/load.js
@@ -37,7 +37,7 @@ function loadTypes(url, selector) {
 }
 
 function setupFormClear(dialog, reset) {
-    dialog.on("shown.bs.modal", function () {
+    dialog.on("hide.bs.modal", function () {
         $(this).find("form").trigger("reset");
         $(this).find("table").bootstrapTable("removeAll");
         if (reset) {