From 745e50508e1499c3982cdc4c4fe8a658d74565be Mon Sep 17 00:00:00 2001
From: "info@pi-farm.de" <pi-farm@noreply.git.pi-farm.de>
Date: Fri, 6 Mar 2026 14:51:40 +0000
Subject: [PATCH] templates/index.html aktualisiert

---
 templates/index.html | 480 +++++++++++++++++++++++++++++++------------
 1 file changed, 349 insertions(+), 131 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index 0663394..bcb7476 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,185 +2,403 @@
 <html lang="de">
 <head>
 <meta charset="UTF-8">
-<title>Node Dashboard</title>
-<script src="https://cdn.tailwindcss.com"></script>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>PiDoBot Dashboard</title>
+
+<link rel="stylesheet" href="/static/gridstack.min.css" />
+<link rel="stylesheet" href="/static/xterm.css" />
 
 <style>
-body{background:#0f172a;color:white}
-.node-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:12px}
-.badge{font-size:10px;padding:2px 6px;border-radius:6px;background:#334155}
-.status-dot{width:8px;height:8px;border-radius:50%}
+body{
+font-family:Arial,Helvetica,sans-serif;
+background:#0f1116;
+color:#e6e6e6;
+margin:0;
+}
+
+header{
+padding:10px 20px;
+background:#1a1d25;
+border-bottom:1px solid #2a2f3a;
+display:flex;
+align-items:center;
+gap:20px;
+}
+
+select,input,button{
+background:#1c212b;
+color:white;
+border:1px solid #333;
+padding:6px;
+border-radius:6px;
+}
+
+button{
+cursor:pointer;
+}
+
+#dashboard{
+padding:10px;
+}
+
+.panel{
+background:#161a22;
+border:1px solid #2c313d;
+border-radius:10px;
+padding:10px;
+height:100%;
+display:flex;
+flex-direction:column;
+}
+
+.panel-title{
+font-weight:bold;
+margin-bottom:6px;
+}
+
+#nodes{
+display:flex;
+flex-wrap:wrap;
+gap:10px;
+}
+
+.node{
+background:#1d2230;
+border:1px solid #2f3647;
+border-radius:8px;
+padding:10px;
+min-width:140px;
+cursor:pointer;
+}
+
+.node small{
+display:block;
+opacity:0.7;
+}
+
+#chat-log{
+flex:1;
+overflow:auto;
+font-size:14px;
+}
+
+.message-user{
+color:#8fd3ff;
+margin-bottom:6px;
+}
+
+.message-ai{
+color:#b6ffb2;
+margin-bottom:10px;
+}
+
+#chat-input-row{
+display:flex;
+gap:6px;
+margin-top:6px;
+}
+
+#chat-input{
+flex:1;
+}
+
+#system-log{
+flex:1;
+overflow:auto;
+font-size:13px;
+font-family:monospace;
+}
+
+.log-entry{
+margin-bottom:3px;
+}
+
+#terminal{
+flex:1;
+}
+
+.grid-stack-item-content{
+height:100%;
+}
 </style>
 </head>
+<body>
 
-<body class="p-6">
+<header>
 
-<div class="flex justify-between mb-6">
-<h1 class="text-xl font-bold">🖥 Node Cluster</h1>
-<button onclick="openAddNode()" class="bg-blue-600 px-3 py-2 rounded text-sm">+ Node</button>
-</div>
+<label>Provider</label>
+<select id="ai-provider">
+<option value="google">Google</option>
+<option value="openai">OpenAI</option>
+<option value="ollama">Ollama</option>
+</select>
 
-<div id="nodes" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-{% for node in nodes %}
+<label>Model</label>
+<select id="ai-model">
+<option>gemini-2.5-flash</option>
+<option>gpt-4o</option>
+<option>llama3</option>
+</select>
 
-<div class="node-card" onclick="editNode({{node.id}})">
+<label>Ollama URL</label>
+<input id="ollama-url" placeholder="http://127.0.0.1:11434/v1" style="width:260px">
 
-<div class="flex justify-between items-center mb-2">
-<div class="font-bold text-sm">{{node.name}}</div>
+<button onclick="saveAISettings()">Save</button>
 
-{% if node.status == 'Online' %}
-<div class="status-dot bg-green-500"></div>
-{% else %}
-<div class="status-dot bg-red-500"></div>
-{% endif %}
-</div>
+<button onclick="addNode()">Add Node</button>
 
-<div class="text-xs text-slate-400 font-mono mb-2">
-{{node.ip}}
-</div>
+<button onclick="refreshNodes()">Refresh</button>
 
-<div class="flex flex-wrap gap-1 mb-2">
+</header>
 
-<span class="badge">{{node.os}}</span>
-<span class="badge">{{node.architecture}}</span>
-
-{% if node.docker_installed %}
-<span class="badge">🐳 Docker</span>
-{% endif %}
-
-<span class="badge">🔐 SSH</span>
-
-{% if node.vnc_available %}
-<span class="badge">🖥 VNC</span>
-{% endif %}
-
-</div>
-
-<div class="flex justify-between">
-
-<button onclick="event.stopPropagation();openTerminal('{{node.ip}}')" class="text-xs bg-slate-700 px-2 py-1 rounded">Terminal</button>
-
-<button onclick="event.stopPropagation();refreshNode({{node.id}})" class="text-xs bg-slate-700 px-2 py-1 rounded">Refresh</button>
-
-<form action="/remove_node/{{node.id}}" method="post" onclick="event.stopPropagation()">
-<button class="text-xs bg-red-600 px-2 py-1 rounded">Delete</button>
-</form>
-
-</div>
-
-</div>
-
-{% endfor %}
-</div>
-
-
-<!-- ADD NODE MODAL -->
-
-<div id="addModal" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center">
-
-<div class="bg-slate-800 p-6 rounded w-96">
-<h2 class="mb-4 font-bold">Node hinzufügen</h2>
-
-<form action="/add_node" method="post" class="space-y-3">
-
-<input name="name" placeholder="Name" class="w-full bg-slate-900 p-2 rounded text-sm" required>
-
-<input name="ip" placeholder="IP" class="w-full bg-slate-900 p-2 rounded text-sm" required>
-
-<input name="user" placeholder="User" class="w-full bg-slate-900 p-2 rounded text-sm" required>
-
-<input name="password" type="password" placeholder="SSH Passwort" class="w-full bg-slate-900 p-2 rounded text-sm" required>
-
-<div class="flex justify-end gap-2 pt-2">
-<button type="button" onclick="closeAddNode()">Abbrechen</button>
-<button class="bg-blue-600 px-3 py-1 rounded">Add</button>
-</div>
-
-</form>
-
-</div>
-
-</div>
-
-
-<!-- EDIT NODE MODAL -->
-
-<div id="editModal" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center">
-
-<div class="bg-slate-800 p-6 rounded w-96">
-<h2 class="mb-4 font-bold">Node bearbeiten</h2>
-
-<form id="editForm" method="post" class="space-y-3">
-
-<input id="edit_name" name="name" class="w-full bg-slate-900 p-2 rounded text-sm">
-<input id="edit_ip" name="ip" class="w-full bg-slate-900 p-2 rounded text-sm">
-<input id="edit_user" name="user" class="w-full bg-slate-900 p-2 rounded text-sm">
-
-<div class="flex justify-end gap-2">
-<button type="button" onclick="closeEdit()">Cancel</button>
-<button class="bg-blue-600 px-3 py-1 rounded">Save</button>
-</div>
-
-</form>
-
-</div>
-
-</div>
+<div id="dashboard" class="grid-stack"></div>
 
+<script src="/static/gridstack-all.js"></script>
+<script src="/static/xterm.js"></script>
+<script src="/static/xterm-addon-fit.js"></script>
 
 <script>
 
-function openAddNode(){
+let grid
+let term
+let fitAddon
+let terminalSocket
+let chatSocket
 
- document.getElementById("addModal").classList.remove("hidden")
+function initGrid(){
+
+grid = GridStack.init({
+float:true,
+cellHeight:120,
+margin:8
+})
+
+createPanels()
+}
+
+function createPanels(){
+
+addWidget("nodesPanel",0,0,4,2,`<div class="panel">
+<div class="panel-title">Nodes</div>
+<div id="nodes"></div>
+</div>`)
+
+addWidget("terminalPanel",0,2,4,3,`<div class="panel">
+<div class="panel-title">Terminal</div>
+<div id="terminal"></div>
+</div>`)
+
+addWidget("chatPanel",4,0,4,3,`<div class="panel">
+<div class="panel-title">AI Chat</div>
+<div id="chat-log"></div>
+<div id="chat-input-row">
+<input id="chat-input" placeholder="Ask the AI...">
+<button onclick="sendChat()">Send</button>
+</div>
+</div>`)
+
+addWidget("logPanel",4,3,4,2,`<div class="panel">
+<div class="panel-title">System Log</div>
+<div id="system-log"></div>
+</div>`)
+
+setTimeout(initTerminal,200)
+connectChat()
+loadNodes()
+}
+
+function addWidget(id,x,y,w,h,content){
+
+grid.addWidget({
+id:id,
+x:x,
+y:y,
+w:w,
+h:h,
+content:content
+})
 
 }
 
-function closeAddNode(){
+function initTerminal(){
 
- document.getElementById("addModal").classList.add("hidden")
+term = new Terminal({
+fontSize:14,
+theme:{background:"#161a22"}
+})
+
+fitAddon = new FitAddon.FitAddon()
+term.loadAddon(fitAddon)
+
+term.open(document.getElementById("terminal"))
+fitAddon.fit()
+
+terminalSocket = new WebSocket(`ws://${location.host}/ws/terminal`)
+
+terminalSocket.onmessage = e=>term.write(e.data)
+
+term.onData(data=>{
+terminalSocket.send(data)
+})
+}
+
+function connectChat(){
+
+chatSocket = new WebSocket(`ws://${location.host}/ws/chat`)
+
+chatSocket.onmessage = e=>{
+addChat("ai",e.data)
+log("AI: "+e.data)
+}
 
 }
 
+function sendChat(){
 
-async function refreshNode(id){
+let input=document.getElementById("chat-input")
+let msg=input.value.trim()
 
- const r = await fetch(`/refresh_status/${id}`)
- const data = await r.json()
+if(!msg) return
 
- location.reload()
+addChat("user",msg)
+chatSocket.send(msg)
+
+input.value=""
 
 }
 
+function addChat(type,text){
 
-async function editNode(id){
+let log=document.getElementById("chat-log")
 
- const r = await fetch(`/node/${id}`)
- const node = await r.json()
+let div=document.createElement("div")
 
- document.getElementById("edit_name").value = node.name
- document.getElementById("edit_ip").value = node.ip
- document.getElementById("edit_user").value = node.user
+if(type=="user"){
+div.className="message-user"
+div.innerText="You: "+text
+}
+else{
+div.className="message-ai"
+div.innerText="AI: "+text
+}
 
- document.getElementById("editForm").action = `/update_node/${id}`
+log.appendChild(div)
+log.scrollTop=log.scrollHeight
+}
 
- document.getElementById("editModal").classList.remove("hidden")
+function log(text){
+
+let el=document.getElementById("system-log")
+
+let div=document.createElement("div")
+div.className="log-entry"
+
+let time=new Date().toLocaleTimeString()
+
+div.innerText=`[${time}] ${text}`
+
+el.appendChild(div)
+el.scrollTop=el.scrollHeight
 
 }
 
-function closeEdit(){
+async function loadNodes(){
 
- document.getElementById("editModal").classList.add("hidden")
+let res = await fetch("/nodes")
+let nodes = await res.json()
+
+renderNodes(nodes)
 
 }
 
+function renderNodes(nodes){
 
-function openTerminal(ip){
+let container=document.getElementById("nodes")
+container.innerHTML=""
 
- window.open(`/terminal/${ip}`)
+nodes.forEach(n=>{
+
+let div=document.createElement("div")
+
+div.className="node"
+
+div.innerHTML=`
+<b>${n.name}</b>
+<small>${n.ip}</small>
+<small>${n.os || "unknown"}</small>
+<small>${n.arch || ""}</small>
+`
+
+
+div.onclick=()=>editNode(n)
+
+container.appendChild(div)
+
+})
 
 }
 
+function refreshNodes(){
+loadNodes()
+log("Nodes refreshed")
+}
+
+function addNode(){
+
+let name=prompt("Node Name")
+let ip=prompt("IP Address")
+let user=prompt("User")
+
+fetch("/nodes",{
+method:"POST",
+headers:{"Content-Type":"application/json"},
+body:JSON.stringify({name,ip,user})
+}).then(()=>{
+log("Node added: "+name)
+loadNodes()
+})
+
+}
+
+function editNode(node){
+
+let name=prompt("Name",node.name)
+let ip=prompt("IP",node.ip)
+let user=prompt("User",node.user)
+
+fetch(`/nodes/${node.id}`,{
+method:"PUT",
+headers:{"Content-Type":"application/json"},
+body:JSON.stringify({name,ip,user})
+}).then(()=>{
+log("Node updated: "+name)
+loadNodes()
+})
+
+}
+
+function saveAISettings(){
+
+let provider=document.getElementById("ai-provider").value
+let model=document.getElementById("ai-model").value
+let ollama=document.getElementById("ollama-url").value
+
+fetch("/ai/settings",{
+method:"POST",
+headers:{"Content-Type":"application/json"},
+body:JSON.stringify({provider,model,ollama})
+})
+
+log("AI settings saved")
+
+}
+
+setInterval(()=>{
+refreshNodes()
+},60000)
+
+window.onload=initGrid
+
 </script>
 
 </body>
