From 94afc45b40c9efd22c1e85ba5976006ef1f230f4 Mon Sep 17 00:00:00 2001
From: Emerson Felipe <emersonfelipe.2003@gmail.com>
Date: Tue, 15 Oct 2024 14:46:20 +0000
Subject: [PATCH] Add more styling to Proxmox Cluster cards on homepage

---
 netbox_proxbox/main.py                        | 11 +--
 .../templates/netbox_proxbox/home.html        | 67 +++++++------------
 2 files changed, 31 insertions(+), 47 deletions(-)

diff --git a/netbox_proxbox/main.py b/netbox_proxbox/main.py
index e4a3afe..9b9ae83 100755
--- a/netbox_proxbox/main.py
+++ b/netbox_proxbox/main.py
@@ -106,12 +106,15 @@ async def websocket_endpoint(
     
     from netbox_proxbox.backend.routes.proxbox.clusters import get_nodes, get_virtual_machines
     
-    await get_nodes(nb=nb, pxs=pxs, websocket=websocket)
-    await get_virtual_machines(nb=nb, pxs=pxs, websocket=websocket)
-    
     while True:
         data = await websocket.receive_text()
-        await websocket.send_text(f"Message text was: {data}")
+        
+        if data == "Start":
+            await get_nodes(nb=nb, pxs=pxs, websocket=websocket)
+            await get_virtual_machines(nb=nb, pxs=pxs, websocket=websocket)
+        
+        
+        #await websocket.send_text(f"Message text was: {data}")
         
         
 
diff --git a/netbox_proxbox/templates/netbox_proxbox/home.html b/netbox_proxbox/templates/netbox_proxbox/home.html
index aef7be5..1e9afff 100755
--- a/netbox_proxbox/templates/netbox_proxbox/home.html
+++ b/netbox_proxbox/templates/netbox_proxbox/home.html
@@ -3,15 +3,7 @@
 
 {% block content %}
     <h1>Log Messages</h1>
-    <!--
-        <form action="" onsubmit="sendMessage(event)">
-            <input type="text" id="messageText" autocomplete="off"/>
-            <button>Send</button>
-        </form>
-    -->
-    
-    <!-- <div style="position: fixed; background-color: white; overflow: auto; border: 5px solid transparent; box-sizing: border-box; border-radius: 1rem; height: 200px; width: 100%;"> -->
-    
+
     <div>
         <div style='overflow-y: auto; width: 100%; height: 400px;' id="scrollable-div">
             <div class="card" style="flex-direction: cloumn; overflow-y: auto">
@@ -26,10 +18,6 @@ <h1>Log Messages</h1>
             fastapi_endpoint = `http://${uvicorn_host}:${uvicorn_port}`
             websocket_endpoint = `ws://${uvicorn_host}:${uvicorn_port}/ws`
 
-
-            console.log(fastapi_endpoint)
-            console.log(websocket_endpoint)
-
             var ws = new WebSocket(websocket_endpoint);
             ws.onmessage = function(event) {
 
@@ -37,44 +25,35 @@ <h1>Log Messages</h1>
                 var message = document.createElement('li')
 
                 message.style.lineHeight = '170%'
-                //var breakLine = document.createElement('br')
-                
-                message.innerHTML = event.data
 
-                // var content = document.createTextNode(event.data)
-                // message.appendChild(content)
+                message.innerHTML = event.data
                 messages.appendChild(message)
 
                 var test = document.getElementById('scrollable-div')
                 test.scrollTop = test.scrollHeight
 
             };
+
+
             function sendMessage(event) {
-                var input = document.getElementById("messageText")
-                ws.send(input.value)
-                input.value = ''
+                // Send Websocket Message
+
+                ws.send("Start")
+                //input.value = ''
                 event.preventDefault()
             }
 
-            //function getProxmoxVersion() {
-
-            //console.log(domain)
 
             function getBody () {
                 body = document.getElementsByTagName("body")
                 body = body[0]
 
-                let arrai = Array.from(document.getElementsByTagName("tr"))
-                console.log("arrai0", arrai)
-
                 body.onload = getVersion
-                console.log("body", body)
 
             }
             
             getBody()
 
-
             async function getVersion() {
             
                 let elemento = document.getElementsByClassName("proxmox_version")
@@ -83,13 +62,10 @@ <h1>Log Messages</h1>
 
                     let td = item.getElementsByTagName("td")
                     let th = item.getElementsByTagName("th")
-
-                    console.log(th[0], th[0].textContent, th[0].innerHTML)
                     
                     if (td[0].id) {
                         let tdID = td[0].id
                         
-                        
                         const version_endpoint = `${fastapi_endpoint}/proxmox/version?source=netbox&list_all=false&plugin_name=netbox_proxbox&domain=${tdID}`
                         const cluster_endpoint = `${fastapi_endpoint}/proxmox/sessions?source=netbox&list_all=false&plugin_name=netbox_proxbox&domain=${tdID}`
                         const endpoints = [version_endpoint, cluster_endpoint]
@@ -109,28 +85,27 @@ <h1>Log Messages</h1>
                         for (let value in apiResponses[0]) {
 
                             if (th[0].textContent === 'Proxmox Version') {
-                                td[0].textContent = `${apiResponses[0][value].version}`
+                                td[0].innerHTML = `<span class='badge text-bg-grey' title='Proxmox Version'><strong><i class='mdi mdi-tag'></i></strong> ${apiResponses[0][value].version}</span>`
                             }
                             if (th[0].textContent === 'Proxmox RepoID') {
-                                td[0].textContent = `${apiResponses[0][value].repoid}`
+                                td[0].innerHTML = `<span class='badge text-bg-grey' title='Proxmox RepoID'>${apiResponses[0][value].repoid}</span>`
                             }
                         }
 
                         for (let value in apiResponses[1]) {
 
                             if (th[0].textContent === 'Proxmox Cluster Name') {
-                                td[0].textContent = `${apiResponses[1].name}`
+                                td[0].innerHTML = `<strong>${apiResponses[1].name}</strong>`
                             }
 
                             if (th[0].textContent === 'Proxmox Cluster Mode') {
 
                                 let mode = apiResponses[1].mode
-                                if ( mode === "standalone" ) { mode = "Standalone" }
-                                if ( mode === "cluster" ) { mode = "Cluster" } 
-                                td[0].textContent = `${mode}`
+                                if ( mode === "standalone" ) { mode = "<span class='badge text-bg-blue' title='Standalone Mode'><strong><i class='mdi mdi-server'></i></strong> Standalone (Single Node)</span>" }
+                                if ( mode === "cluster" ) { mode = "<span class='badge text-bg-green' title='Cluster Mode'><strong><i class='mdi mdi-server'></i></strong> Cluster (Multiple Nodes)</span>" } 
+                                td[0].innerHTML = `${mode}`
                             }
                         }
-
                     }
                 }
             }
@@ -138,13 +113,19 @@ <h1>Log Messages</h1>
 
         <div class="row mb-3">
                 
-
             <hr>
             {# Full Update Button#}
             <div style="margin-bottom: 15px;" class="d-flex justify-content-center noprint">
-                {% if perms.netbox_proxbox.add_proxmoxvm %}
-                <a href="{% url 'plugins:netbox_proxbox:proxmoxvm_full_update' %}" target="_blank" class="btn btn-primary">Proxmox Full Update (probably not working on v4.0)</a>
-                {% endif %}
+
+                <form action="" onsubmit="sendMessage(event)">
+                    {% if perms.netbox_proxbox.add_proxmoxvm %}
+                        <button class="btn btn-primary">
+                            Proxmox Full Update (probably not working on v4.0)
+                            <!-- <a href="{% url 'plugins:netbox_proxbox:proxmoxvm_full_update' %}" target="_blank" class="btn btn-primary"></a> -->}
+                        </button>
+                    {% endif %}
+                    
+                </form>
             </div>
             <div style="margin-bottom: 15px;" class="d-flex justify-content-center noprint">
                 {% if perms.netbox_proxbox.add_proxmoxvm %}