templates/index.html aktualisiert

templates/index.html

@@ -88,9 +88,10 @@
             gap: 8px;
             border-left: 1px solid #475569;
             padding-left: 12px;
+            flex: 1;
         }
 
-        #ollama-url { width: 200px; }
+        #ollama-url { width: 100%; min-width: 200px; }
         .toolbar-controls select, .toolbar-controls input {
             height: 32px; background: #0f172a; color: white;
             border: 1px solid #475569; border-radius: 4px; padding: 0 8px; font-size: 12px;
@@ -142,13 +143,18 @@
                 {% for node in nodes %}
                 <div class="p-3 bg-slate-800 rounded border border-slate-700 relative group" id="node-card-{{ node.id }}">
                     <div class="flex justify-between items-start">
-                        <div class="text-sm font-bold">{{ node.name }}</div>
+                        <div class="text-sm font-bold" id="node-name-{{ node.id }}">{{ node.name }}</div>
+                        <div class="flex gap-2">
+                            <button onclick="editNode({{ node.id }}, '{{ node.name }}', '{{ node.ip }}')" class="text-slate-500 hover:text-sky-400 text-xs">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
+                            </button>
                             <form action="/remove_node/{{ node.id }}" method="post" onsubmit="return confirm('Entfernen?')">
                                 <button type="submit" class="text-slate-500 hover:text-red-500 text-xs">✕</button>
                             </form>
                         </div>
+                    </div>
                     <div class="text-[10px] text-slate-500 font-mono flex justify-between items-center mb-1">
-                        {{ node.ip }}
+                        <span id="node-ip-{{ node.id }}">{{ node.ip }}</span>
                         <button onclick="refreshNodeStatus({{ node.id }})" class="hover:text-blue-400">🔄</button>
                     </div>
                     <div class="flex gap-1 mb-2">
@@ -212,6 +218,27 @@
         </div>
     </div>
 
+    <div id="edit-node-modal" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-[2000]">
+        <div class="bg-slate-800 p-6 rounded-lg border border-slate-600 w-96">
+            <h3 class="text-lg font-bold mb-4">Node bearbeiten</h3>
+            <input type="hidden" id="edit-node-id">
+            <div class="space-y-4">
+                <div>
+                    <label class="text-xs text-slate-400">Anzeigename</label>
+                    <input type="text" id="edit-node-name" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm text-white">
+                </div>
+                <div>
+                    <label class="text-xs text-slate-400">IP Adresse</label>
+                    <input type="text" id="edit-node-ip" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm text-white">
+                </div>
+                <div class="flex justify-end gap-2 pt-2">
+                    <button type="button" onclick="closeEditNode()" class="px-4 py-2 text-sm text-slate-400">Abbrechen</button>
+                    <button type="button" onclick="updateNode()" class="bg-sky-600 px-4 py-2 text-sm rounded font-bold">Speichern</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script>
         let currentSettings = {};
         let termDataDisposable = null;
@@ -234,7 +261,35 @@
         window.addNode = () => document.getElementById('add-node-modal').classList.remove('hidden');
         window.closeAddNode = () => document.getElementById('add-node-modal').classList.add('hidden');
 
-        // 3. ERWEITERTER REFRESH (Aktualisiert OS & Arch)
+        // EDIT LOGIK
+        window.editNode = (id, name, ip) => {
+            document.getElementById('edit-node-id').value = id;
+            document.getElementById('edit-node-name').value = name;
+            document.getElementById('edit-node-ip').value = ip;
+            document.getElementById('edit-node-modal').classList.remove('hidden');
+        };
+        window.closeEditNode = () => document.getElementById('edit-node-modal').classList.add('hidden');
+
+        window.updateNode = async function() {
+            const id = document.getElementById('edit-node-id').value;
+            const name = document.getElementById('edit-node-name').value;
+            const ip = document.getElementById('edit-node-ip').value;
+
+            try {
+                const res = await fetch(`/api/node/${id}`, {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ name, ip })
+                });
+                if(res.ok) {
+                    document.getElementById(`node-name-${id}`).textContent = name;
+                    document.getElementById(`node-ip-${id}`).textContent = ip;
+                    closeEditNode();
+                }
+            } catch (e) { alert("Fehler beim Speichern"); }
+        };
+
+        // 3. ERWEITERTER REFRESH
         window.refreshNodeStatus = async function(nodeId) {
             const badge = document.getElementById(`badge-${nodeId}`);
             const led = document.getElementById(`led-${nodeId}`);
@@ -289,7 +344,6 @@
             modelSelect.innerHTML = '<option>Lade...</option>';
 
             try {
-                // URL Parameter nur aufbauen, wenn nötig
                 let queryUrl = `/api/models?provider=${provider}`;
                 if (provider === "ollama") {
                     queryUrl += `&url=${encodeURIComponent(ollamaUrl)}`;
@@ -305,9 +359,7 @@
                         opt.value = opt.textContent = m;
                         modelSelect.appendChild(opt);
                     });
-                    const savedModel = currentSettings[`${provider}_model`] || (provider === 'nvidia' ? currentSettings['nvidia_model'] : null);
+                    
-                    if (isInitialLoad && savedModel) modelSelect.value = savedModel;
-                    // Sicherer Zugriff auf die Einstellungen
                     if (isInitialLoad && currentSettings) {
                         const savedModel = currentSettings[`${provider}_model`];
                         if (savedModel) modelSelect.value = savedModel;
@@ -341,8 +393,7 @@
                 margin: 10, 
                 float: true, 
                 handle: '.widget-header',
-                resizable: { handles: 'all' },
+                resizable: { handles: 'all' }
-                alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
             });
 
             const savedLayout = localStorage.getItem('pi-orch-layout-v2');
@@ -389,6 +440,5 @@
             loadSettings();
         });
     </script>
-
 </body>
 </html>