From dd28dc1c9943c735c8842f16a8c1425d1f5290f3 Mon Sep 17 00:00:00 2001
From: schrom01 <schrom01@students.zhaw.ch>
Date: Thu, 17 Aug 2023 22:35:34 +0200
Subject: [PATCH] created Frontend Page

---
 index.php | 95 ++++++++++++++++++++++++++++++++-----------------------
 1 file changed, 55 insertions(+), 40 deletions(-)

diff --git a/index.php b/index.php
index 498ba19..5f2fd33 100644
--- a/index.php
+++ b/index.php
@@ -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>