Rework styling of residency search template

author: Christian Kollmann <christian.kollmann@a-sit.at> 2021-12-07 08:33:36 +0100
committer: Christian Kollmann <christian.kollmann@a-sit.at> 2021-12-07 11:01:13 +0100
commit: 02c69d2a137663f5aeefcb4cfacd1a163e7af5db (patch)
tree: 1aeb1d77bf0cf038dd75f1039da21f70ce6941b8 /connector
parent: 8d2aa68bc18c04c2b03cbdd01f008a89e4c8c1c6 (diff)
download: National_eIDAS_Gateway-02c69d2a137663f5aeefcb4cfacd1a163e7af5db.tar.gz
National_eIDAS_Gateway-02c69d2a137663f5aeefcb4cfacd1a163e7af5db.tar.bz2
National_eIDAS_Gateway-02c69d2a137663f5aeefcb4cfacd1a163e7af5db.zip
6 files changed, 162 insertions, 88 deletions
diff --git a/connector/src/main/resources/properties/messages.properties b/connector/src/main/resources/properties/messages.properties
index 3f662ef9..23dd48c3 100644
--- a/connector/src/main/resources/properties/messages.properties
+++ b/connector/src/main/resources/properties/messages.properties
@@ -116,10 +116,9 @@ gui.residency.search=Search
 gui.residency.clear=Clear
 gui.residency.proceed=Proceed
 gui.residency.updated=Updated your input
-gui.residency.found=Found {0} results
+gui.residency.found=Found {0} results, click on one result to refine your search
 gui.residency.unique=Unique result found, please proceed
 gui.residency.error=Error on Backend Call
-gui.residency.apply=Apply
 gui.residency.input.postleitzahl=Postcode
 gui.residency.input.municipality=Municipality
 gui.residency.input.village=Village
diff --git a/connector/src/main/resources/properties/messages_de.properties b/connector/src/main/resources/properties/messages_de.properties
index c0f3c9a5..26b1b3c6 100644
--- a/connector/src/main/resources/properties/messages_de.properties
+++ b/connector/src/main/resources/properties/messages_de.properties
@@ -117,10 +117,9 @@ gui.residency.search=Suche
 gui.residency.clear=Löschen
 gui.residency.proceed=Fortfahren
 gui.residency.updated=Eingabe aktualisiert
-gui.residency.found={0} Ergebnisse gefunden
+gui.residency.found={0} Ergebnisse gefunden, klicken Sie auf ein Ergebnis um die Suche zu verfeinern
 gui.residency.unique=Eindeutiges Ergebnis gefunden, bitte fortfahren
 gui.residency.error=Fehler bei Addresssuche
-gui.residency.apply=Übernehmen
 gui.residency.input.postleitzahl=PLZ
 gui.residency.input.municipality=Gemeinde
 gui.residency.input.village=Ortschaft
diff --git a/connector/src/main/resources/templates/residency.html b/connector/src/main/resources/templates/residency.html
index 8192a068..7a832aea 100644
--- a/connector/src/main/resources/templates/residency.html
+++ b/connector/src/main/resources/templates/residency.html
@@ -6,8 +6,8 @@
 <head>
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="$contextPath/static/css/css_country.css" th:href="@{/static/css/css_country.css}"/>
-    <script type="text/javascript" src="$contextPath/static/js/jquery-3.6.0.js"
+    <link rel="stylesheet" href="../webcontent/css/css_country.css" th:href="@{/static/css/css_country.css}"/>
+    <script type="text/javascript" src="../webcontent/js/jquery-3.6.0.js"
             th:attr="src=@{/static/js/jquery-3.6.0.min.js}"></script>
     <title th:text="#{gui.residency.title}">Österreichischer Wohnsitz</title>
     <script type="text/javascript" th:inline="javascript">
@@ -23,12 +23,16 @@
                     $("#loading").hide();
                 }
             });
+            $("#inputForm input[type='text']").keyup(function (event) {
+                if (event.keyCode === 13) {
+                    $("#buttonSearch").click();
+                }
+            });
         });
 
         function search() {
             let updatedText = /*[[#{gui.residency.updated}]]*/ 'Updated text';
             let errorText = /*[[#{gui.residency.error}]]*/ 'Error';
-            let applyText = /*[[#{gui.residency.apply}]]*/ 'Apply';
             let foundText = /*[[#{gui.residency.found}]]*/ 'Found {0}';
             let uniqueText = /*[[#{gui.residency.unique}]]*/ 'Unique';
             let invalidInputText = /*[[#{gui.residency.header.inputinvalid}]]*/ 'Invalid';
@@ -42,7 +46,7 @@
                 url: "http://localhost:8080/ms_connector/residency/search",
                 data: $("#inputForm").serialize()
             }).done(function (data, textStatus, jqXHR) {
-                if (data["resultCount"] == 1) {
+                if (data["resultCount"] === 1) {
                     $("#textResult").show().text(uniqueText);
                     $("#tableResult tbody").empty();
                     $("#tableResult").hide();
@@ -59,23 +63,23 @@
                 $.each(data.results, function (i, output) {
                     $("#tableResult tbody")
                         .append($("<tr>")
-                            .append($("<td>").text(output["postleitzahl"] !== null ? output["postleitzahl"] : ""))
+                            .append($("<td>").text(output["postleitzahl"] !== null ? output["postleitzahl"] : "").css("text-align", "right"))
                             .append($("<td>").text(output["municipality"] !== null ? output["municipality"] : ""))
                             .append($("<td>").text(output["village"] !== null ? output["village"] : ""))
                             .append($("<td>").text(output["street"] !== null ? output["street"] : ""))
-                            .append($("<td>").text(output["number"] !== null ? output["number"] : ""))
-                            .append($("<td>").text(applyText).attr("href", "#").click(function () {
-                                $("#inputForm #inputPostleitzahl").val($(this).parent().children("td:nth-child(1)").text());
-                                $("#inputForm #inputMunicipality").val($(this).parent().children("td:nth-child(2)").text());
-                                $("#inputForm #inputVillage").val($(this).parent().children("td:nth-child(3)").text());
-                                $("#inputForm #inputStreet").val($(this).parent().children("td:nth-child(4)").text());
-                                $("#inputForm #inputNumber").val($(this).parent().children("td:nth-child(5)").text());
+                            .append($("<td>").text(output["number"] !== null ? output["number"] : "").css("text-align", "right"))
+                            .css("cursor", "pointer").click(function () {
+                                $("#inputForm #inputPostleitzahl").val($(this).children("td:nth-child(1)").text());
+                                $("#inputForm #inputMunicipality").val($(this).children("td:nth-child(2)").text());
+                                $("#inputForm #inputVillage").val($(this).children("td:nth-child(3)").text());
+                                $("#inputForm #inputStreet").val($(this).children("td:nth-child(4)").text());
+                                $("#inputForm #inputNumber").val($(this).children("td:nth-child(5)").text());
                                 $("#textResult").show().text(updatedText);
                                 search();
-                            }))
+                            })
                         );
                 })
-                if (data.results.length == 0) {
+                if (data.results.length === 0) {
                     $("#tableResult").hide();
                 }
             }).fail(function (jqXHR, textStatus, errorThrown) {
@@ -93,9 +97,46 @@
         }
     </script>
     <style>
-        td {
+        #residency label {
+            width: 10em;
+            display: inline-block;
+            margin-bottom: 0.5em;
+        }
+
+        #residency input {
+            width: 15em;
+            display: inline-block;
+            margin-bottom: 0.5em;
+        }
+
+        #result {
+            margin-bottom: 4em;
+        }
+
+        button {
             padding: 0.5em;
             margin: 0.5em;
+            width: 8em;
+        }
+
+        .block {
+            width: 100%;
+        }
+
+        #tableResult td, #tableResult th {
+            padding: 1em 0.5em;
+        }
+
+        #tableResult a {
+            text-decoration: underline;
+        }
+
+        #tableResult {
+            border-collapse: collapse;
+        }
+
+        #tableResult tr {
+            border-bottom: 1px solid black;
         }
     </style>
 </head>
@@ -135,7 +176,8 @@
     <div id="residency">
         <form id="inputForm" method="post" action="$contextPath$submitEndpoint"
               th:attr="action=@{${submitEndpoint}}">
-            <div th:text="#{gui.residency.header.help}">Please enter a postcode, municipality or village first</div>
+            <div><p th:text="#{gui.residency.header.help}">Please enter a postcode, municipality or village first</p>
+            </div>
             <div>
                 <label for="inputPostleitzahl" th:text="#{gui.residency.input.postleitzahl}">Postleitzahl</label>
                 <input type="text" id="inputPostleitzahl" name="postleitzahl" value=""/>
@@ -156,38 +198,42 @@
                 <label for="inputNumber" th:text="#{gui.residency.input.number}">Number</label>
                 <input type="text" id="inputNumber" name="number" value=""/>
             </div>
-            <div>
-                <button type="button" class="block" onclick="search()" th:attr="value=#{gui.residency.search}">Search
+            <div class="block">
+                <button type="button" id="buttonSearch" onclick="search()" th:text="#{gui.residency.search}">
+                    Search
                 </button>
-            </div>
-            <div>
-                <button type="button" class="block" onclick="clearInput()" th:attr="value=#{gui.residency.clear}">Clear
+                <button type="button" id="buttonClear" onclick="clearInput()" th:text="#{gui.residency.clear}">
+                    Clear
                 </button>
-            </div>
-            <div>
-                <button type="button" class="block" th:attr="value=#{gui.residency.proceed}">Proceed</button>
-            </div>
-            <div>
-                <img id="loading" src="$contextPath/static/img/ajax-loader.gif"
-                     th:attr="src=@{/static/img/ajax-loader.gif}"/>
+                <button type="button" id="buttonProceed" th:text="#{gui.residency.proceed}">Proceed</button>
             </div>
             <input type="hidden" name="pendingid" value="$pendingid" th:attr="value=${pendingid}"/>
         </form>
     </div>
 
+    <form method="post" action="$contextPath$submitEndpoint" th:attr="action=@{${submitEndpoint}}">
+        <button type="submit" value="Abbrechen/Cancel" th:text="#{gui.residency.cancel}">Cancel</button>
+        <input type="hidden" name="stopAuthProcess" value="true">
+        <input type="hidden" name="pendingid" value="$pendingid" th:attr="value=${pendingid}">
+    </form>
+
+    <div>
+        <img id="loading" src="$contextPath/static/img/ajax-loader.gif"
+             th:attr="src=@{/static/img/ajax-loader.gif}" style="display: none"/>
+    </div>
+
     <div id="result">
         <div>
-            <p><span id="textResult"></span></p>
+            <p><span id="textResult" style="display: none"></span></p>
         </div>
-        <table id="tableResult">
+        <table id="tableResult" style="display: none">
             <thead>
             <tr>
-                <th th:text="#{gui.residency.input.postleitzahl}">Postleitzahl</th>
+                <th th:text="#{gui.residency.input.postleitzahl}" style="text-align: right">Postcode</th>
                 <th th:text="#{gui.residency.input.municipality}">Municipality</th>
                 <th th:text="#{gui.residency.input.village}">Village</th>
                 <th th:text="#{gui.residency.input.street}">Street</th>
-                <th th:text="#{gui.residency.input.number}">Number</th>
-                <th th:text="#{gui.residency.apply}">Apply</th>
+                <th th:text="#{gui.residency.input.number}" style="text-align: right">Number</th>
             </tr>
             </thead>
             <tbody>
@@ -196,13 +242,6 @@
         </table>
     </div>
 
-    <form class="block" method="post" action="$contextPath$submitEndpoint" th:attr="action=@{${submitEndpoint}}">
-        <input type="submit" class="btn btn-outline-primary btn-block" value="Abbrechen/Cancel"
-               th:attr="value=#{gui.residency.cancel}">
-        <input type="hidden" name="stopAuthProcess" value="true">
-        <input type="hidden" name="pendingid" value="$pendingid" th:attr="value=${pendingid}">
-    </form>
-
 </div>
 <footer>
     <div class="copyright">&copy; BUNDESMINISTERIUM FÜR INNERES</div>
diff --git a/connector/src/test/resources/config/properties/messages.properties b/connector/src/test/resources/config/properties/messages.properties
index 3f662ef9..23dd48c3 100644
--- a/connector/src/test/resources/config/properties/messages.properties
+++ b/connector/src/test/resources/config/properties/messages.properties
@@ -116,10 +116,9 @@ gui.residency.search=Search
 gui.residency.clear=Clear
 gui.residency.proceed=Proceed
 gui.residency.updated=Updated your input
-gui.residency.found=Found {0} results
+gui.residency.found=Found {0} results, click on one result to refine your search
 gui.residency.unique=Unique result found, please proceed
 gui.residency.error=Error on Backend Call
-gui.residency.apply=Apply
 gui.residency.input.postleitzahl=Postcode
 gui.residency.input.municipality=Municipality
 gui.residency.input.village=Village
diff --git a/connector/src/test/resources/config/properties/messages_de.properties b/connector/src/test/resources/config/properties/messages_de.properties
index c0f3c9a5..26b1b3c6 100644
--- a/connector/src/test/resources/config/properties/messages_de.properties
+++ b/connector/src/test/resources/config/properties/messages_de.properties
@@ -117,10 +117,9 @@ gui.residency.search=Suche
 gui.residency.clear=Löschen
 gui.residency.proceed=Fortfahren
 gui.residency.updated=Eingabe aktualisiert
-gui.residency.found={0} Ergebnisse gefunden
+gui.residency.found={0} Ergebnisse gefunden, klicken Sie auf ein Ergebnis um die Suche zu verfeinern
 gui.residency.unique=Eindeutiges Ergebnis gefunden, bitte fortfahren
 gui.residency.error=Fehler bei Addresssuche
-gui.residency.apply=Übernehmen
 gui.residency.input.postleitzahl=PLZ
 gui.residency.input.municipality=Gemeinde
 gui.residency.input.village=Ortschaft
diff --git a/connector/src/test/resources/config/templates/residency.html b/connector/src/test/resources/config/templates/residency.html
index 44cf17a4..79c620ea 100644
--- a/connector/src/test/resources/config/templates/residency.html
+++ b/connector/src/test/resources/config/templates/residency.html
@@ -6,8 +6,8 @@
 <head>
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="$contextPath/static/css/css_country.css" th:href="@{/static/css/css_country.css}"/>
-    <script type="text/javascript" src="$contextPath/static/js/jquery-3.6.0.js"
+    <link rel="stylesheet" href="../webcontent/css/css_country.css" th:href="@{/static/css/css_country.css}"/>
+    <script type="text/javascript" src="../webcontent/js/jquery-3.6.0.js"
             th:attr="src=@{/static/js/jquery-3.6.0.js}"></script>
     <title th:text="#{gui.residency.title}">Österreichischer Wohnsitz</title>
     <script type="text/javascript" th:inline="javascript">
@@ -23,12 +23,16 @@
                     $("#loading").hide();
                 }
             });
+            $("#inputForm input[type='text']").keyup(function (event) {
+                if (event.keyCode === 13) {
+                    $("#buttonSearch").click();
+                }
+            });
         });
 
         function search() {
             let updatedText = /*[[#{gui.residency.updated}]]*/ 'Updated text';
             let errorText = /*[[#{gui.residency.error}]]*/ 'Error';
-            let applyText = /*[[#{gui.residency.apply}]]*/ 'Apply';
             let foundText = /*[[#{gui.residency.found}]]*/ 'Found {0}';
             let uniqueText = /*[[#{gui.residency.unique}]]*/ 'Unique';
             let invalidInputText = /*[[#{gui.residency.header.inputinvalid}]]*/ 'Invalid';
@@ -42,7 +46,7 @@
                 url: "http://localhost:8080/ms_connector/residency/search",
                 data: $("#inputForm").serialize()
             }).done(function (data, textStatus, jqXHR) {
-                if (data["resultCount"] == 1) {
+                if (data["resultCount"] === 1) {
                     $("#textResult").show().text(uniqueText);
                     $("#tableResult tbody").empty();
                     $("#tableResult").hide();
@@ -59,23 +63,23 @@
                 $.each(data.results, function (i, output) {
                     $("#tableResult tbody")
                         .append($("<tr>")
-                            .append($("<td>").text(output["postleitzahl"] !== null ? output["postleitzahl"] : ""))
+                            .append($("<td>").text(output["postleitzahl"] !== null ? output["postleitzahl"] : "").css("text-align", "right"))
                             .append($("<td>").text(output["municipality"] !== null ? output["municipality"] : ""))
                             .append($("<td>").text(output["village"] !== null ? output["village"] : ""))
                             .append($("<td>").text(output["street"] !== null ? output["street"] : ""))
-                            .append($("<td>").text(output["number"] !== null ? output["number"] : ""))
-                            .append($("<td>").text(applyText).attr("href", "#").click(function () {
-                                $("#inputForm #inputPostleitzahl").val($(this).parent().children("td:nth-child(1)").text());
-                                $("#inputForm #inputMunicipality").val($(this).parent().children("td:nth-child(2)").text());
-                                $("#inputForm #inputVillage").val($(this).parent().children("td:nth-child(3)").text());
-                                $("#inputForm #inputStreet").val($(this).parent().children("td:nth-child(4)").text());
-                                $("#inputForm #inputNumber").val($(this).parent().children("td:nth-child(5)").text());
+                            .append($("<td>").text(output["number"] !== null ? output["number"] : "").css("text-align", "right"))
+                            .css("cursor", "pointer").click(function () {
+                                $("#inputForm #inputPostleitzahl").val($(this).children("td:nth-child(1)").text());
+                                $("#inputForm #inputMunicipality").val($(this).children("td:nth-child(2)").text());
+                                $("#inputForm #inputVillage").val($(this).children("td:nth-child(3)").text());
+                                $("#inputForm #inputStreet").val($(this).children("td:nth-child(4)").text());
+                                $("#inputForm #inputNumber").val($(this).children("td:nth-child(5)").text());
                                 $("#textResult").show().text(updatedText);
                                 search();
-                            }))
+                            })
                         );
                 })
-                if (data.results.length == 0) {
+                if (data.results.length === 0) {
                     $("#tableResult").hide();
                 }
             }).fail(function (jqXHR, textStatus, errorThrown) {
@@ -93,9 +97,46 @@
         }
     </script>
     <style>
-        td {
+        #residency label {
+            width: 10em;
+            display: inline-block;
+            margin-bottom: 0.5em;
+        }
+
+        #residency input {
+            width: 15em;
+            display: inline-block;
+            margin-bottom: 0.5em;
+        }
+
+        #result {
+            margin-bottom: 4em;
+        }
+
+        button {
             padding: 0.5em;
             margin: 0.5em;
+            width: 8em;
+        }
+
+        .block {
+            width: 100%;
+        }
+
+        #tableResult td, #tableResult th {
+            padding: 1em 0.5em;
+        }
+
+        #tableResult a {
+            text-decoration: underline;
+        }
+
+        #tableResult {
+            border-collapse: collapse;
+        }
+
+        #tableResult tr {
+            border-bottom: 1px solid black;
         }
     </style>
 </head>
@@ -135,7 +176,8 @@
     <div id="residency">
         <form id="inputForm" method="post" action="$contextPath$submitEndpoint"
               th:attr="action=@{${submitEndpoint}}">
-            <div th:text="#{gui.residency.header.help}">Please enter a postcode, municipality or village first</div>
+            <div><p th:text="#{gui.residency.header.help}">Please enter a postcode, municipality or village first</p>
+            </div>
             <div>
                 <label for="inputPostleitzahl" th:text="#{gui.residency.input.postleitzahl}">Postleitzahl</label>
                 <input type="text" id="inputPostleitzahl" name="postleitzahl" value=""/>
@@ -156,38 +198,42 @@
                 <label for="inputNumber" th:text="#{gui.residency.input.number}">Number</label>
                 <input type="text" id="inputNumber" name="number" value=""/>
             </div>
-            <div>
-                <button type="button" class="block" onclick="search()" th:attr="value=#{gui.residency.search}">Search
+            <div class="block">
+                <button type="button" id="buttonSearch" onclick="search()" th:text="#{gui.residency.search}">
+                    Search
                 </button>
-            </div>
-            <div>
-                <button type="button" class="block" onclick="clearInput()" th:attr="value=#{gui.residency.clear}">Clear
+                <button type="button" id="buttonClear" onclick="clearInput()" th:text="#{gui.residency.clear}">
+                    Clear
                 </button>
-            </div>
-            <div>
-                <button type="button" class="block" th:attr="value=#{gui.residency.proceed}">Proceed</button>
-            </div>
-            <div>
-                <img id="loading" src="$contextPath/static/img/ajax-loader.gif"
-                     th:attr="src=@{/static/img/ajax-loader.gif}"/>
+                <button type="button" id="buttonProceed" th:text="#{gui.residency.proceed}">Proceed</button>
             </div>
             <input type="hidden" name="pendingid" value="$pendingid" th:attr="value=${pendingid}"/>
         </form>
     </div>
 
+    <form method="post" action="$contextPath$submitEndpoint" th:attr="action=@{${submitEndpoint}}">
+        <button type="submit" value="Abbrechen/Cancel" th:text="#{gui.residency.cancel}">Cancel</button>
+        <input type="hidden" name="stopAuthProcess" value="true">
+        <input type="hidden" name="pendingid" value="$pendingid" th:attr="value=${pendingid}">
+    </form>
+
+    <div>
+        <img id="loading" src="$contextPath/static/img/ajax-loader.gif"
+             th:attr="src=@{/static/img/ajax-loader.gif}" style="display: none"/>
+    </div>
+
     <div id="result">
         <div>
-            <p><span id="textResult"></span></p>
+            <p><span id="textResult" style="display: none"></span></p>
         </div>
-        <table id="tableResult">
+        <table id="tableResult" style="display: none">
             <thead>
             <tr>
-                <th th:text="#{gui.residency.input.postleitzahl}">Postleitzahl</th>
+                <th th:text="#{gui.residency.input.postleitzahl}" style="text-align: right">Postcode</th>
                 <th th:text="#{gui.residency.input.municipality}">Municipality</th>
                 <th th:text="#{gui.residency.input.village}">Village</th>
                 <th th:text="#{gui.residency.input.street}">Street</th>
-                <th th:text="#{gui.residency.input.number}">Number</th>
-                <th th:text="#{gui.residency.apply}">Apply</th>
+                <th th:text="#{gui.residency.input.number}" style="text-align: right">Number</th>
             </tr>
             </thead>
             <tbody>
@@ -196,13 +242,6 @@
         </table>
     </div>
 
-    <form class="block" method="post" action="$contextPath$submitEndpoint" th:attr="action=@{${submitEndpoint}}">
-        <input type="submit" class="btn btn-outline-primary btn-block" value="Abbrechen/Cancel"
-               th:attr="value=#{gui.residency.cancel}">
-        <input type="hidden" name="stopAuthProcess" value="true">
-        <input type="hidden" name="pendingid" value="$pendingid" th:attr="value=${pendingid}">
-    </form>
-
 </div>
 <footer>
     <div class="copyright">&copy; BUNDESMINISTERIUM FÜR INNERES</div>
author	Christian Kollmann <christian.kollmann@a-sit.at>	2021-12-07 08:33:36 +0100
committer	Christian Kollmann <christian.kollmann@a-sit.at>	2021-12-07 11:01:13 +0100
commit	02c69d2a137663f5aeefcb4cfacd1a163e7af5db (patch)
tree	1aeb1d77bf0cf038dd75f1039da21f70ce6941b8 /connector
parent	8d2aa68bc18c04c2b03cbdd01f008a89e4c8c1c6 (diff)
download	National_eIDAS_Gateway-02c69d2a137663f5aeefcb4cfacd1a163e7af5db.tar.gz National_eIDAS_Gateway-02c69d2a137663f5aeefcb4cfacd1a163e7af5db.tar.bz2 National_eIDAS_Gateway-02c69d2a137663f5aeefcb4cfacd1a163e7af5db.zip