Silias-Public
/
Zefix_search
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

created Frontend Page

This commit is contained in:
schrom01 2023-08-17 22:35:34 +02:00
parent c206ea3250
commit dd28dc1c99
1 changed files with 55 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
index.php
View File

@ -18,28 +18,11 @@
border-bottom: 1px solid #ddd;
}
#sitzInput:focus {outline: 3px solid #ddd;}
#sitzInput {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
.button-small {
font-size: 0.7rem;
padding: 0% 1%;
}
.dropdown a:hover {background-color: #ddd;}
@ -69,17 +52,59 @@
<form action="submit.php" method="post">
<label for="firmenname">Firmenname:</label>
<p>* kann als Platzhalter verwendet werden</p>
<input type="text" id="firmenname" name="firmenname"><br><br>
<label for="kanton">Kanton:</label>
<div id="kantonauswahl" class="scrollWindow">
<div id="kantonauswahl" class="scrollWindow" onclick="filterFunction()">
</div><br><br>
<label for="sitz">Sitz (Postleitzahl / Gemeinde):</label><br>
<label for="sitz">Sitz (Postleitzahl / Ort):</label><br>
<div class="dropdown">
<div id="gemeindeDropdown" class="dropdown-content">
<input type="text" placeholder="Postleitzahl / Ort" id="sitzInput" onkeyup="filterFunction()" onchange="filterFunction()" name="sitzfilter" autocomplete="off">
<table style="width: 100%">
<td>
<input type="text" placeholder="suchen (PLZ oder Ort)" id="sitzInput" onkeyup="filterFunction()" onchange="filterFunction()" name="sitzfilter" autocomplete="off">
</td>
<td>
<button type="button" class="button-small" onclick="gefundeneGemeindenAuswählen()">Alle Ergebnise auswählen</button>
<button type="button" class="button-small" onclick="ausgewählteGemeindenLöschen()">Auswahl löschen</button>
<button type="button" class="button-small" onclick="alleGemeindenAnzeigen()">Alle anzeigen</button>
<button type="button" class="button-small" onclick="nurAusgewählteGemeindenAnzeigen()">Nur ausgewählte anzeigen</button>
</td>
</table>
<script>
function alleGemeindenAnzeigen() {
sitzInput.value = ""
filterFunction()
}
function nurAusgewählteGemeindenAnzeigen() {
sitzInput.value = "(nur ausgewählte)"
filterFunction()
}
function ausgewählteGemeindenLöschen() {
sitzauswahl.querySelectorAll('input[type="checkbox"]').forEach(function(checkbox) {
checkbox.checked = false;
})
filterFunction()
}
function gefundeneGemeindenAuswählen() {
sitzauswahl.querySelectorAll('input[type="checkbox"]').forEach(function(checkbox) {
if(checkbox.parentNode.parentNode.style.display !== "none")
checkbox.checked = true;
})
filterFunction()
}
</script>
<div id="sitzauswahl" class="scrollWindow">
</div>
@ -123,7 +148,7 @@
<input type="checkbox" id="phonetischeSuche" name="phonetischeSuche">
<label for="phonetischeSuche">Phonetische Suche</label><br><br>
<input type="submit" value="Suchergebnisse herunterladen">
<input type="submit" value="Suchergebnisse exportieren">
</form>
<script>
@ -227,24 +252,14 @@
const sitzInput = document.getElementById('sitzInput');
const sitzauswahl = document.getElementById('sitzauswahl');
sitzauswahl.style.display = 'none';
sitzInput.addEventListener('focus', () => {
const gemeindedropdown = document.getElementById('gemeindeDropdown');
sitzauswahl.style.display = 'block';
gemeindedropdown.addEventListener('focusin', () => {
console.log("focusin")
sitzauswahl.style.display = 'block';
});
sitzInput.addEventListener('blur', () => {
setTimeout(() => {
sitzauswahl.style.display = 'none';
}, 100); // 1000 milliseconds = 1 second
});
// sitzauswahl.addEventListener('click', function(event) {
// setTimeout(() => {
// sitzInput.focus();
// sitzauswahl.style.display = 'block';
// console.log("exec")
// }, 150)
// })
</script>