nach AI vibe coding

2026-02-02 20:49:03 +01:00
parent 6cef59775a
commit 5b3a61b89d
6 changed files with 245 additions and 72 deletions
--- a/public/app.js
+++ b/public/app.js
@@ -1,35 +1,84 @@
+// ==== app.js ====
+
+// Service-Liste
 const services = [
-  {
-    id: "abc",
-    name: "Control GamePad",
-    url: "https://thinkcentre.local:10010/"
-  },
-  {
-    id: "xyz",
-    name: "Guacamole",
-    url: "http://thinkcentre.local:8080/"
-  }
+  { id: "abc", name: "Control GamePad", url: "https://abc.server.schooltech.ch" },
+  { id: "xyz", name: "Guacamole", url: "https://xyz.server.schooltech.ch" }
 ];

+// DOM-Elemente
+const iframe = document.getElementById("service-frame");
+const loginModal = document.getElementById("login-modal");
+const loginBtn = document.getElementById("login-btn");
+const loginSubmit = document.getElementById("login-submit");
+const loginMsg = document.getElementById("login-msg");
 const nav = document.getElementById("services");
-const grid = document.getElementById("service-grid");

-services.forEach(svc => {
-  // Header Button
-  const btn = document.createElement("button");
-  btn.textContent = svc.name;
-  btn.onclick = () => go(svc);
-  nav.appendChild(btn);
+let loggedIn = false;

-  // Card
-  const card = document.createElement("div");
-  card.className = "service-card";
-  card.textContent = svc.name;
-  card.onclick = () => go(svc);
-  grid.appendChild(card);
-});
+// === Login Modal anzeigen ===
+loginBtn.onclick = () => {
+    loginModal.style.display = "block";
+};

-function go(service) {
-  localStorage.setItem("lastService", service.id);
-  window.location.href = service.url;
+// === Login Submit ===
+loginSubmit.onclick = async () => {
+    const user = document.getElementById("username").value;
+    const pass = document.getElementById("password").value;
+
+    try {
+        const res = await fetch("/api/login", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ user, pass })
+        });
+
+        if (res.ok) {
+            loggedIn = true;
+            loginModal.style.display = "none";
+            loginMsg.textContent = "";
+            setupServiceButtons();
+        } else {
+            loginMsg.textContent = "Login fehlgeschlagen";
+        }
+    } catch (e) {
+        loginMsg.textContent = "Fehler: " + e.message;
+    }
+};
+
+// === Service Buttons dynamisch erstellen ===
+function setupServiceButtons() {
+    nav.innerHTML = ""; // clear
+    services.forEach(svc => {
+        const btn = document.createElement("button");
+        btn.textContent = svc.name;
+        btn.onclick = async () => {
+            console.log('Button clicked, opening', svc.id);
+            try{
+                await fetch('/api/event', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ event: 'open', service: svc.id, url: svc.url })
+                });
+            }catch(e){ console.error('Event log failed', e); }
+            openService(svc);
+        };
+        nav.appendChild(btn);
+    });
+}
+
+// === Service in iFrame öffnen ===
+function openService(svc) {
+    iframe.src = svc.url;
+    iframe.style.display = "block";
+    window.scrollTo(0,0);
+}
+
+// Optional: Logout-Funktion
+function logout() {
+    loggedIn = false;
+    iframe.src = "";
+    iframe.style.display = "none";
+    nav.innerHTML = "";
+    loginModal.style.display = "block";
 }