Webseite überarbeitet und Telegram Bot funktion hinzugefügt #1
@@ -2,185 +2,403 @@
|
|||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Node Dashboard</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<title>PiDoBot Dashboard</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/static/gridstack.min.css" />
|
||||||
|
<link rel="stylesheet" href="/static/xterm.css" />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body{background:#0f172a;color:white}
|
body{
|
||||||
.node-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:12px}
|
font-family:Arial,Helvetica,sans-serif;
|
||||||
.badge{font-size:10px;padding:2px 6px;border-radius:6px;background:#334155}
|
background:#0f1116;
|
||||||
.status-dot{width:8px;height:8px;border-radius:50%}
|
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>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
<body class="p-6">
|
<header>
|
||||||
|
|
||||||
<div class="flex justify-between mb-6">
|
<label>Provider</label>
|
||||||
<h1 class="text-xl font-bold">🖥 Node Cluster</h1>
|
<select id="ai-provider">
|
||||||
<button onclick="openAddNode()" class="bg-blue-600 px-3 py-2 rounded text-sm">+ Node</button>
|
<option value="google">Google</option>
|
||||||
</div>
|
<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">
|
<label>Model</label>
|
||||||
{% for node in nodes %}
|
<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">
|
<button onclick="saveAISettings()">Save</button>
|
||||||
<div class="font-bold text-sm">{{node.name}}</div>
|
|
||||||
|
|
||||||
{% if node.status == 'Online' %}
|
<button onclick="addNode()">Add Node</button>
|
||||||
<div class="status-dot bg-green-500"></div>
|
|
||||||
{% else %}
|
|
||||||
<div class="status-dot bg-red-500"></div>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-xs text-slate-400 font-mono mb-2">
|
<button onclick="refreshNodes()">Refresh</button>
|
||||||
{{node.ip}}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-wrap gap-1 mb-2">
|
</header>
|
||||||
|
|
||||||
<span class="badge">{{node.os}}</span>
|
<div id="dashboard" class="grid-stack"></div>
|
||||||
<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>
|
|
||||||
|
|
||||||
|
<script src="/static/gridstack-all.js"></script>
|
||||||
|
<script src="/static/xterm.js"></script>
|
||||||
|
<script src="/static/xterm-addon-fit.js"></script>
|
||||||
|
|
||||||
<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}`)
|
if(!msg) return
|
||||||
const data = await r.json()
|
|
||||||
|
|
||||||
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}`)
|
let div=document.createElement("div")
|
||||||
const node = await r.json()
|
|
||||||
|
|
||||||
document.getElementById("edit_name").value = node.name
|
if(type=="user"){
|
||||||
document.getElementById("edit_ip").value = node.ip
|
div.className="message-user"
|
||||||
document.getElementById("edit_user").value = node.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>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Reference in New Issue
Block a user