From 6fff1b53525348d531c96b45c920a8ce72288f60 Mon Sep 17 00:00:00 2001
From: Christian Kollmann <christian.kollmann@a-sit.at>
Date: Thu, 2 Dec 2021 15:03:09 +0100
Subject: Display all results to user after residency search

---
 basicConfig/properties/messages.properties    |   7 ++
 basicConfig/properties/messages_de.properties |   9 +-
 basicConfig/templates/residency.html          | 122 ++++++++++++++++++++++----
 basicConfig/webcontent/img/ajax-loader.gif    | Bin 0 -> 673 bytes
 4 files changed, 120 insertions(+), 18 deletions(-)
 create mode 100644 basicConfig/webcontent/img/ajax-loader.gif

(limited to 'basicConfig')

diff --git a/basicConfig/properties/messages.properties b/basicConfig/properties/messages.properties
index 51a5f27a..76ce5b16 100644
--- a/basicConfig/properties/messages.properties
+++ b/basicConfig/properties/messages.properties
@@ -119,11 +119,18 @@ gui.residency.header1=Federal Ministry of Internal Affairs
 gui.residency.header2=Austrian Central eIDAS Node
 gui.residency.header3=Operated by Federal Ministry of Internal Affairs
 gui.residency.header.selection=Search for your Austrian Residency
+gui.residency.header.help=You can search for the address that you have been registered at in the past. Please enter a \
+  Municipality or Village first to start the search.
+gui.residency.header.inputinvalid=Be sure to enter a value for Municipality or Village
 gui.residency.cancel=Cancel
 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.unique=Unique result found, please proceed
 gui.residency.error=Error on Backend Call
+gui.residency.apply=Apply
 gui.residency.input.municipality=Municipality
 gui.residency.input.village=Village
 gui.residency.input.street=Street
diff --git a/basicConfig/properties/messages_de.properties b/basicConfig/properties/messages_de.properties
index c2d1edba..bca258ee 100644
--- a/basicConfig/properties/messages_de.properties
+++ b/basicConfig/properties/messages_de.properties
@@ -118,11 +118,18 @@ gui.residency.header1=Bundesministerium für Inneres
 gui.residency.header2=Zentraler eIDAS Knoten der Republik Österreich
 gui.residency.header3=Betrieben durch das Bundesministerium für Inneres
 gui.residency.header.selection=Suche nach Österreichischem Wohnsitz
+gui.residency.header.help=Hier können Sie nach einem Wohnsitze in Österreich suchen. Bitte geben Sie zuerst eine \
+  Gemeinde oder Ortschaft ein um die Suche zu starten.
+gui.residency.header.inputinvalid=Bitte geben Sie einen Wert für Gemeinde oder Ortschaft ein
 gui.residency.cancel=Abbrechen
 gui.residency.search=Suche
-gui.residency.proceed=Weiter
+gui.residency.clear=Löschen
+gui.residency.proceed=Fortfahren
 gui.residency.updated=Eingabe aktualisiert
+gui.residency.found={0} Ergebnisse gefunden
+gui.residency.unique=Eindeutiges Ergebnis gefunden, bitte fortfahren
 gui.residency.error=Fehler bei Addresssuche
+gui.residency.apply=Übernehmen
 gui.residency.input.municipality=Gemeinde
 gui.residency.input.village=Ortschaft
 gui.residency.input.street=Straße
diff --git a/basicConfig/templates/residency.html b/basicConfig/templates/residency.html
index 3c3c05d7..9dc1153d 100644
--- a/basicConfig/templates/residency.html
+++ b/basicConfig/templates/residency.html
@@ -12,24 +12,86 @@
           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">
+    $(document).ready(function () {
+      $("#textResult").hide();
+      $("#tableResult").hide();
+      $("#loading").hide();
+      $.ajaxSetup({
+        beforeSend: function () {
+          $("#loading").show();
+        },
+        complete: function () {
+          $("#loading").hide();
+        }
+      });
+    });
+
     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';
+      if (!$("#inputForm #inputMunicipality").val().trim() && !$("#inputForm #inputVillage").val().trim()) {
+        $("#textResult").show().text(invalidInputText);
+        return;
+      }
       $.ajax({
         type: "POST",
         url: "http://localhost:8080/ms_connector/residency/search",
         data: $("#inputForm").serialize()
       }).done(function (data, textStatus, jqXHR) {
-        $("#inputMunicipality").val(data["municipality"]);
-        $("#inputVillage").val(data["village"]);
-        $("#inputStreet").val(data["street"]);
-        $("#inputNumber").val(data["number"]);
-        $("#textInfo").text(updatedText);
+        if (data["resultCount"] == 1) {
+          $("#textResult").show().text(uniqueText);
+          $("#tableResult tbody").empty();
+          $("#tableResult").hide();
+          $("#inputForm #inputMunicipality").val(data["results"][0]["municipality"]);
+          $("#inputForm #inputVillage").val(data["results"][0]["village"]);
+          $("#inputForm #inputStreet").val(data["results"][0]["street"]);
+          $("#inputForm #inputNumber").val(data["results"][0]["number"]);
+          return;
+        }
+        $("#textResult").show().text(foundText.replace("{0}", data["resultCount"]));
+        $("#tableResult").show();
+        $("#tableResult tbody").empty();
+        $.each(data.results, function (i, output) {
+          $("#tableResult tbody")
+                  .append($("<tr>")
+                          .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 #inputMunicipality").val($(this).parent().children("td:nth-child(1)").text());
+                            $("#inputForm #inputVillage").val($(this).parent().children("td:nth-child(2)").text());
+                            $("#inputForm #inputStreet").val($(this).parent().children("td:nth-child(3)").text());
+                            $("#inputForm #inputNumber").val($(this).parent().children("td:nth-child(4)").text());
+                            $("#textResult").show().text(updatedText);
+                            search();
+                          }))
+                  );
+        })
       }).fail(function (jqXHR, textStatus, errorThrown) {
-        $("#textInfo").text(errorText);
+        $("#textResult").show().text(errorText);
       })
     }
+
+    function clearInput() {
+      $("#inputForm #inputMunicipality").val("");
+      $("#inputForm #inputVillage").val("");
+      $("#inputForm #inputStreet").val("");
+      $("#inputForm #inputNumber").val("");
+      $("#textResult").hide();
+      $("#tableResult").hide();
+    }
   </script>
+  <style>
+    td {
+      padding: 0.5em;
+      margin: 0.5em;
+    }
+  </style>
 </head>
 
 <body>
@@ -41,38 +103,64 @@
   <h2 th:text="#{gui.residency.header.selection}">Search your Austrian Residency</h2>
 
   <div id="residency">
-    <div>
-      <p><span id="textInfo">Infotext</span></p>
-    </div>
     <form id="inputForm" method="post" action="$contextPath$submitEndpoint"
           th:attr="action=@{${submitEndpoint}}">
+      <div th:text="#{gui.residency.header.help}">Please enter a Municipality or Village first</div>
       <div>
-        <label for="inputMunicipality">Municipality</label>
-        <input type="text" id="inputMunicipality" name="municipality" value="Municipality"/>
+        <label for="inputMunicipality" th:text="#{gui.residency.input.municipality}">Municipality</label>
+        <input type="text" id="inputMunicipality" name="municipality" value=""/>
       </div>
       <div>
-        <label for="inputVillage">Village</label>
-        <input type="text" id="inputVillage" name="village" value="Village"/>
+        <label for="inputVillage" th:text="#{gui.residency.input.village}">Village</label>
+        <input type="text" id="inputVillage" name="village" value=""/>
       </div>
       <div>
-        <label for="inputStreet">Street</label>
-        <input type="text" id="inputStreet" name="street" value="Street"/>
+        <label for="inputStreet" th:text="#{gui.residency.input.street}">Street</label>
+        <input type="text" id="inputStreet" name="street" value=""/>
       </div>
       <div>
-        <label for="inputNumber">Number</label>
-        <input type="text" id="inputNumber" name="number" value="Number"/>
+        <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
         </button>
       </div>
+      <div>
+        <button type="button" class="block" onclick="clearInput()" th:attr="value=#{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}" />
+      </div>
       <input type="hidden" name="pendingid" value="$pendingid" th:attr="value=${pendingid}"/>
     </form>
   </div>
 
+  <div id="result">
+    <div>
+      <p><span id="textResult"></span></p>
+    </div>
+    <table id="tableResult">
+      <thead>
+      <tr>
+        <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>
+      </tr>
+      </thead>
+      <tbody>
+
+      </tbody>
+    </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}">
diff --git a/basicConfig/webcontent/img/ajax-loader.gif b/basicConfig/webcontent/img/ajax-loader.gif
new file mode 100644
index 00000000..f2a1bc0c
Binary files /dev/null and b/basicConfig/webcontent/img/ajax-loader.gif differ
-- 
cgit v1.2.3