aboutsummaryrefslogtreecommitdiff
path: root/connector/src/main
diff options
context:
space:
mode:
authorChristian Kollmann <christian.kollmann@a-sit.at>2021-12-07 08:33:36 +0100
committerChristian Kollmann <christian.kollmann@a-sit.at>2021-12-07 11:01:13 +0100
commit02c69d2a137663f5aeefcb4cfacd1a163e7af5db (patch)
tree1aeb1d77bf0cf038dd75f1039da21f70ce6941b8 /connector/src/main
parent8d2aa68bc18c04c2b03cbdd01f008a89e4c8c1c6 (diff)
downloadNational_eIDAS_Gateway-02c69d2a137663f5aeefcb4cfacd1a163e7af5db.tar.gz
National_eIDAS_Gateway-02c69d2a137663f5aeefcb4cfacd1a163e7af5db.tar.bz2
National_eIDAS_Gateway-02c69d2a137663f5aeefcb4cfacd1a163e7af5db.zip
Rework styling of residency search template
Diffstat (limited to 'connector/src/main')
-rw-r--r--connector/src/main/resources/properties/messages.properties3
-rw-r--r--connector/src/main/resources/properties/messages_de.properties3
-rw-r--r--connector/src/main/resources/templates/residency.html119
3 files changed, 81 insertions, 44 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>
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-14 03:44:13 +0000