{"id":9,"date":"2025-07-16T09:42:48","date_gmt":"2025-07-16T09:42:48","guid":{"rendered":"http:\/\/diokpcg.cluster100.hosting.ovh.net\/?page_id=9"},"modified":"2025-07-25T09:31:16","modified_gmt":"2025-07-25T09:31:16","slug":"9-2","status":"publish","type":"page","link":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/9-2\/","title":{"rendered":"Fahrzeug\u00fcbersicht Reservefahrzeuge"},"content":{"rendered":"\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0);color:#30b103\" class=\"has-inline-color\">gr\u00fcn<\/mark><\/strong> = verf\u00fcgbar \/ <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-accent-1-color\">gelb<\/mark><\/strong> = vor Einsatz pr\u00fcfen \/ <strong><mark style=\"background-color:rgba(0, 0, 0, 0);color:#f20c0c\" class=\"has-inline-color\">rot<\/mark><\/strong>= nicht e.B. <\/p>\n\n\n<style>\n  .wachen-container {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    margin: 20px 0;\n    justify-content: center;\n  }\n  .wache {\n    background: #fff;\n    border: 1px solid #ddd;\n    border-radius: 8px;\n    box-shadow: 0 1px 4px rgba(0,0,0,0.1);\n    padding: 15px;\n    width: auto;\n    min-width: 280px;\n  }\n  .wache h2 {\n    margin: 0 0 10px;\n    font-size: 18px;\n    text-align: center;\n    color: #333;\n  }\n  .fahrzeug {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 12px;\n    padding: 8px;\n    border: 1px solid #eee;\n    border-radius: 6px;\n    background: #fafafa;\n  }\n  .kennz { flex: 1; font-weight: bold; }\n  .status-ampel { display: flex; gap: 6px; }\n  .ampel {\n    width: 18px; height: 18px;\n    border-radius: 50%; border: 1px solid #999;\n    opacity: 0.3; cursor: pointer;\n  }\n  .ampel.active { opacity: 1; }\n  .gruen { background-color: green; }\n  .gelb { background-color: gold; }\n  .rot  { background-color: red; }\n\n  .field-group {\n    display: flex; flex-direction: column;\n    align-items: flex-start;\n    font-size: 10px; color: #555;\n    margin-right: 8px;\n  }\n  .field-group label { margin-bottom: 2px; }\n  .field-group select,\n  .field-group input {\n    font-size: 12px; padding: 4px;\n    border-radius: 4px; border: 1px solid #ccc;\n  }\n\n  .row-save {\n    background: #28a745;\n    color: #fff;\n    border: none;\n    border-radius: 4px;\n    padding: 6px 10px;\n    font-size: 14px;\n    cursor: pointer;\n    opacity: 0.5;\n  }\n  .row-save.enabled { opacity: 1; }\n\n  .ladehinweis {\n    text-align: center; margin-top: 10px;\n    color: #666; font-style: italic;\n  }\n<\/style>\n\n<div class=\"wachen-container\" id=\"wachenContainer\"><\/div>\n<div class=\"ladehinweis\" id=\"ladeStatus\">\u23f3 Lade Daten\u2026<\/div>\n\n<script>\n  const ajaxUrl = 'https:\/\/rettungstormarn.wenk-hh.de\/wp-admin\/admin-ajax.php';\n  const wachen = [], fahrzeuge = [];\n\n  \/\/ Speichert nur ein Fahrzeug\n  function saveRow(id) {\n    const f = fahrzeuge.find(x => x.id === id);\n    if (!f) return;\n    const payload = JSON.stringify({ fahrzeuge: [f] });\n    const xhr = new XMLHttpRequest();\n    xhr.open('POST', ajaxUrl + '?action=rd_save_fahrzeug', true);\n    xhr.setRequestHeader('Content-Type','application\/json;charset=UTF-8');\n    xhr.onload = () => {\n      if (xhr.status >= 200 && xhr.status < 300) {\n        const res = JSON.parse(xhr.responseText);\n        if (res.success) {\n          \/\/ Button zur\u00fccksetzen\n          const btn = document.querySelector(`.row-save[data-id=\"${id}\"]`);\n          btn.classList.remove('enabled');\n          btn.disabled = true;\n          \/\/ Zeitstempel aktualisieren (lokal)\n          f.timestamp = new Date().toLocaleDateString('de-DE')\n                       + ' ' + new Date().toLocaleTimeString('de-DE');\n          render();\n          alert('\u2705 \u00c4nderung gespeichert');\n        } else {\n          alert('\u274c Fehler: ' + res.data);\n        }\n      } else {\n        alert('\u274c Serverfehler: ' + xhr.status);\n      }\n    };\n    xhr.onerror = () => alert('\u274c Netzwerkfehler beim Speichern');\n    xhr.send(payload);\n  }\n\n  function render() {\n    const cont = document.getElementById('wachenContainer');\n    cont.innerHTML = '';\n\n    wachen.forEach(w => {\n      const card = document.createElement('div');\n      card.className = 'wache';\n      card.innerHTML = `<h2>${w.name}<\/h2>`;\n\n      fahrzeuge.filter(f => f.wacheId === w.id.toString())\n        .forEach(f => {\n          const row = document.createElement('div');\n          row.className = 'fahrzeug';\n\n          \/\/ Kennzeichen\n          const kenn = document.createElement('span');\n          kenn.className = 'kennz';\n          kenn.textContent = f.kennzeichen;\n          row.appendChild(kenn);\n\n          \/\/ Ampel\n          const ampDiv = document.createElement('div');\n          ampDiv.className = 'status-ampel';\n          ['gruen','gelb','rot'].forEach(c => {\n            const dot = document.createElement('div');\n            dot.className = `ampel ${c}` + (f.status===c ? ' active' : '');\n            dot.dataset.id = f.id; dot.dataset.status = c;\n            dot.addEventListener('click', () => changeField(f.id, 'status', c));\n            ampDiv.appendChild(dot);\n          });\n          row.appendChild(ampDiv);\n\n          \/\/ Standort\n          const locG = document.createElement('div');\n          locG.className = 'field-group';\n          locG.innerHTML = '<label>Standort<\/label>';\n          const sel = document.createElement('select');\n          sel.dataset.id = f.id;\n          wachen.forEach(wx => {\n            const opt = document.createElement('option');\n            opt.value = wx.id; opt.textContent = wx.name;\n            if (wx.id.toString() === f.wacheId) opt.selected = true;\n            sel.appendChild(opt);\n          });\n          sel.addEventListener('change', e => changeField(f.id, 'wacheId', e.target.value));\n          locG.appendChild(sel);\n          row.appendChild(locG);\n\n          \/\/ Letzter Check\n          const chkG = document.createElement('div');\n          chkG.className = 'field-group';\n          chkG.innerHTML = '<label>letzter Check<\/label>';\n          const inp = document.createElement('input');\n          inp.type = 'date'; inp.value = f.letzterCheck || '';\n          inp.addEventListener('change', e => changeField(f.id, 'letzterCheck', e.target.value));\n          chkG.appendChild(inp);\n          row.appendChild(chkG);\n\n          \/\/ Letzte \u00c4nderung\n          const tsG = document.createElement('div');\n          tsG.className = 'field-group';\n          tsG.innerHTML = `<label>letzte \u00c4nderung<\/label>\n                           <span class=\"timestamp\">${f.timestamp||''}<\/span>`;\n          row.appendChild(tsG);\n\n          \/\/ Inline Save-Button\n          const btn = document.createElement('button');\n          btn.className = 'row-save';\n          btn.dataset.id = f.id;\n          btn.textContent = '\ud83d\udcbe';\n          btn.disabled = true;\n          btn.addEventListener('click', () => saveRow(f.id));\n          row.appendChild(btn);\n\n          card.appendChild(row);\n        });\n\n      cont.appendChild(card);\n    });\n  }\n\n  \/\/ Feldwert \u00e4ndern und Save-Button aktivieren\n  function changeField(id, field, value) {\n    const f = fahrzeuge.find(x => x.id === id);\n    if (!f) return;\n    f[field] = value;\n    \/\/ Timestamp \u00e4ndern nur bei Status\n    if (field === 'status') {\n      f.timestamp = new Date().toLocaleDateString('de-DE')\n                   + ' ' + new Date().toLocaleTimeString('de-DE');\n    }\n    const btn = document.querySelector(`.row-save[data-id=\"${id}\"]`);\n    btn.disabled = false;\n    btn.classList.add('enabled');\n  }\n\n  function loadFromServer() {\n    statusDiv.textContent = '\u23f3 Lade Daten\u2026';\n    const xhr = new XMLHttpRequest();\n    xhr.open('GET', ajaxUrl + '?action=rd_load_data', true);\n    xhr.onload = () => {\n      if (xhr.status >= 200 && xhr.status < 300) {\n        const data = JSON.parse(xhr.responseText);\n        wachen.splice(0, wachen.length, ...data.wachen);\n        fahrzeuge.splice(0, fahrzeuge.length,\n          ...data.fahrzeuge.map(f => ({\n            id: f.fahrzeug_id,\n            kennzeichen: f.kennzeichen,\n            wacheId: f.wache_id.toString(),\n            status: f.status,\n            timestamp: f.timestamp\n              ? new Date(f.timestamp).toLocaleString('de-DE') : '',\n            letzterCheck: f.letzter_check || ''\n          }))\n        );\n        statusDiv.textContent = '';\n        render();\n      } else {\n        statusDiv.textContent = '\u274c Ladefehler: ' + xhr.status;\n      }\n    };\n    xhr.onerror = () => statusDiv.textContent = '\u274c Netzwerkfehler';\n    xhr.send();\n  }\n\n  \/\/ Initial\n  saveBtn = document.getElementById('saveButton');\n  statusDiv = document.getElementById('ladeStatus');\n  loadFromServer();\n<\/script>\n\n\n","protected":false},"excerpt":{"rendered":"<p>gr\u00fcn = verf\u00fcgbar \/ gelb = vor Einsatz pr\u00fcfen \/ rot= nicht e.B.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":7,"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":23,"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/23"}],"wp:attachment":[{"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}