Merge branch 'dev' into live

WEBROOT/services/vergabe.php

@@ -3,8 +3,8 @@ include_once __DIR__ . '/../controller/DatabaseController.php';
 include_once __DIR__ . '/../controller/RoutesController.php';
 
 $conn = db_connect();
-$view = $_GET['view'] ?? 'show'; 
-$selectedService = $_GET['service'] ?? null; 
+$view = $_GET['view'] ?? 'show';
+$selectedService = $_GET['service'] ?? null;
 
 // --- LOGIK: Überstunden-Eintrag (Abbau) speichern ---
 if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['add_entry'])) {
@@ -14,10 +14,10 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['add_entry'])) {
     $rueckgabe = $_POST['rueckgabe'];
 
     DatabaseInsert(
-        "Vergabe", 
-        "WAS, WER, WANN, RUECKGABE", 
-        $was, 
-        $wer, 
+        "Vergabe",
+        "WAS, WER, WANN, RUECKGABE",
+        $was,
+        $wer,
         $wann,
         $rueckgabe
     );
@@ -35,10 +35,16 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['delete_entry'])) {
     exit;
 }
 
-$entries = DatabaseShow(
-    "Vergabe"
-);
+$entries = DatabaseShow("Vergabe");
 
+$existingWas = [];
+$existingWer = [];
+foreach ($entries as $entry) {
+    if (!empty($entry['WAS'])) $existingWas[$entry['WAS']] = true;
+    if (!empty($entry['WER'])) $existingWer[$entry['WER']] = true;
+}
+$existingWas = array_keys($existingWas);
+$existingWer = array_keys($existingWer);
 ?>
 
 <div class="arbeitsberichte-wrapper">
@@ -55,14 +61,16 @@ $entries = DatabaseShow(
                 <input type="date" name="rueckgabe" value="<?= date('Y-m-d') ?>" required>
             </div>
 
-            <div class="form-group">
+            <div class="form-group autocomplete-wrapper">
                 <label>An wen</label>
-                <input type="text" name="wer" placeholder="Name eingeben" required>
+                <input type="text" name="wer" id="wer-input" placeholder="Name eingeben" required autocomplete="off">
+                <div class="autocomplete-suggestions" id="wer-suggestions"></div>
             </div>
 
-            <div class="form-group">
+            <div class="form-group autocomplete-wrapper">
                 <label>Was</label>
-                <input type="text" name="was" placeholder="Gegenstand eingeben" required>
+                <input type="text" name="was" id="was-input" placeholder="Gegenstand eingeben" required autocomplete="off">
+                <div class="autocomplete-suggestions" id="was-suggestions"></div>
             </div>
 
             <button type="submit" name="add_entry" class="btn-submit-vergabe">
@@ -73,7 +81,7 @@ $entries = DatabaseShow(
     </div>
     <div class="table-container" style="margin-top: 30px;">
         <h3>Aktuelle Vergaben</h3>
-        
+
         <?php if (!empty($entries)): ?>
             <table class="db-table mobile-responsive-table">
                 <thead>
@@ -108,4 +116,94 @@ $entries = DatabaseShow(
             <p>Keine Einträge vorhanden.</p>
         <?php endif; ?>
     </div>
-</div>
+</div>
+
+<script>
+    function setupAutocomplete(inputId, suggestionsId, data) {
+        const input = document.getElementById(inputId);
+        const box = document.getElementById(suggestionsId);
+        let items = [];
+        let activeIndex = -1;
+
+        function render(list) {
+            box.innerHTML = '';
+            items = list;
+            activeIndex = -1;
+            if (list.length === 0) {
+                box.style.display = 'none';
+                return;
+            }
+            list.forEach((val, i) => {
+                const div = document.createElement('div');
+                div.textContent = val;
+                div.addEventListener('mousedown', (e) => {
+                    e.preventDefault();
+                    selectItem(i);
+                });
+                box.appendChild(div);
+            });
+            box.style.display = 'block';
+        }
+
+        function updateActive() {
+            [...box.children].forEach((el, i) => {
+                el.classList.toggle('active', i === activeIndex);
+            });
+            if (activeIndex >= 0) {
+                box.children[activeIndex].scrollIntoView({
+                    block: 'nearest'
+                });
+            }
+        }
+
+        function selectItem(i) {
+            if (items[i] !== undefined) {
+                input.value = items[i];
+            }
+            box.style.display = 'none';
+            activeIndex = -1;
+        }
+
+        input.addEventListener('input', () => {
+            const val = input.value.toLowerCase();
+            if (val.length === 0) {
+                box.style.display = 'none';
+                return;
+            }
+            const filtered = data.filter(d => d.toLowerCase().includes(val));
+            render(filtered);
+        });
+
+        input.addEventListener('keydown', (e) => {
+            if (box.style.display !== 'block') return;
+
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                activeIndex = Math.min(activeIndex + 1, items.length - 1);
+                updateActive();
+            } else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                activeIndex = Math.max(activeIndex - 1, 0);
+                updateActive();
+            } else if (e.key === 'Tab' || e.key === 'Enter') {
+                if (activeIndex >= 0) {
+                    e.preventDefault();
+                    selectItem(activeIndex);
+                } else {
+                    box.style.display = 'none';
+                }
+            } else if (e.key === 'Escape') {
+                box.style.display = 'none';
+            }
+        });
+
+        document.addEventListener('click', (e) => {
+            if (e.target !== input) {
+                box.style.display = 'none';
+            }
+        });
+    }
+
+    setupAutocomplete('was-input', 'was-suggestions', <?= json_encode($existingWas) ?>);
+    setupAutocomplete('wer-input', 'wer-suggestions', <?= json_encode($existingWer) ?>);
+</script>

WEBROOT/style.css

@@ -1401,4 +1401,39 @@ body.dark-mode .berichte-form input:focus {
         margin: 15px;
         padding: 20px;
     }
+}
+
+.autocomplete-wrapper {
+    position: relative;
+}
+
+.autocomplete-suggestions {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: var(--card-bg);
+    color: var(--text);
+    border: 1px solid var(--input-border);
+    border-top: none;
+    max-height: 180px;
+    overflow-y: auto;
+    z-index: 1000;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.autocomplete-suggestions div {
+    padding: 8px 10px;
+    cursor: pointer;
+}
+
+.autocomplete-suggestions div:hover,
+.autocomplete-suggestions div.active {
+    background: rgba(0, 123, 255, 0.15);
+}
+
+body.dark-mode .autocomplete-suggestions div:hover,
+body.dark-mode .autocomplete-suggestions div.active {
+    background: rgba(0, 123, 255, 0.25);
 }