From 44726f433bf6544441d00090f5ef2074661ff1be Mon Sep 17 00:00:00 2001
From: Matthew Frost <m.frost@mattronix.nl>
Date: Sun, 19 Nov 2023 02:30:54 +0100
Subject: [PATCH] simple ui

---
 app/templates/index.html | 171 +++++++++++++++++++++++++++++++++++++++
 app/views.py             |   4 +-
 2 files changed, 173 insertions(+), 2 deletions(-)
 create mode 100644 app/templates/index.html
diff --git a/app/templates/index.html b/app/templates/index.html
new file mode 100644
index 0000000..5abd2b0
--- /dev/null
+++ b/app/templates/index.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Powerbar Control</title>
+  <style>
+    /* Add your custom CSS styles here */
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+    }
+
+    h1 {
+      text-align: center;
+      margin-top: 20px;
+    }
+
+    #powerbars {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      margin-top: 20px;
+    }
+
+    .powerbar {
+      width: 300px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      padding: 10px;
+      margin: 10px;
+    }
+
+    .powerbar h2 {
+      margin: 0;
+      font-size: 18px;
+    }
+
+    .outlets {
+      margin-top: 10px;
+    }
+
+    .outlet {
+      margin-bottom: 10px;
+    }
+
+    .outlet h3 {
+      margin: 0;
+      font-size: 16px;
+    }
+
+    .outlet p {
+      margin: 0;
+      font-size: 14px;
+    }
+
+    .outlet-buttons {
+      margin-top: 10px;
+    }
+
+    .outlet-buttons button {
+      margin-right: 5px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Powerbar Control</h1>
+  <div id="powerbars"></div>
+
+  <script>
+    // Fetch data from the /powerbars endpoint
+    fetch('/powerbars')
+      .then(response => response.json())
+      .then(data => {
+        // Render powerbars
+        renderPowerbars(data);
+      })
+      .catch(error => {
+        console.error('Error:', error);
+      });
+
+    function renderPowerbars(data) {
+      const powerbarsContainer = document.getElementById('powerbars');
+
+      // Loop through each powerbar
+      for (const powerbarKey in data) {
+        const powerbar = data[powerbarKey];
+
+        // Create powerbar container
+        const powerbarContainer = document.createElement('div');
+        powerbarContainer.classList.add('powerbar');
+
+        // Create powerbar title
+        const powerbarTitle = document.createElement('h2');
+        powerbarTitle.textContent = powerbar.name;
+        powerbarContainer.appendChild(powerbarTitle);
+
+        // Create outlets container
+        const outletsContainer = document.createElement('div');
+        outletsContainer.classList.add('outlets');
+
+        // Loop through each outlet
+        for (const outletKey in powerbar.outlets) {
+          const outlet = powerbar.outlets[outletKey];
+
+          // Create outlet container
+          const outletContainer = document.createElement('div');
+          outletContainer.classList.add('outlet');
+
+          // Create outlet name
+          const outletName = document.createElement('h3');
+          outletName.textContent = outlet.name;
+          outletContainer.appendChild(outletName);
+
+          // Create outlet state
+          const outletState = document.createElement('p');
+          outletState.textContent = `State: ${outlet.state}`;
+          outletContainer.appendChild(outletState);
+
+          // Create outlet buttons container
+          const outletButtonsContainer = document.createElement('div');
+          outletButtonsContainer.classList.add('outlet-buttons');
+
+          // Create on button
+          const onButton = document.createElement('button');
+          onButton.textContent = 'On';
+          onButton.addEventListener('click', () => {
+            fetch(outlet.on_url, { method: 'GET' })
+              .then(response => response.json())
+              .then(data => {
+                // Update outlet state
+                outletState.textContent = `State: ${data.state}`;
+              })
+              .catch(error => {
+                console.error('Error:', error);
+              });
+          });
+          outletButtonsContainer.appendChild(onButton);
+
+          // Create off button
+          const offButton = document.createElement('button');
+          offButton.textContent = 'Off';
+          offButton.addEventListener('click', () => {
+            fetch(outlet.off_url, { method: 'GET' })
+              .then(response => response.json())
+              .then(data => {
+                // Update outlet state
+                outletState.textContent = `State: ${data.state}`;
+              })
+              .catch(error => {
+                console.error('Error:', error);
+              });
+          });
+          outletButtonsContainer.appendChild(offButton);
+
+          // Add outlet buttons container to outlet container
+          outletContainer.appendChild(outletButtonsContainer);
+
+          // Add outlet container to outlets container
+          outletsContainer.appendChild(outletContainer);
+        }
+
+        // Add outlets container to powerbar container
+        powerbarContainer.appendChild(outletsContainer);
+
+        // Add powerbar container to powerbars container
+        powerbarsContainer.appendChild(powerbarContainer);
+      }
+    }
+  </script>
+</body>
+</html>
diff --git a/app/views.py b/app/views.py
index fb1ac28..d9c34a5 100644
--- a/app/views.py
+++ b/app/views.py
@@ -23,8 +23,8 @@ def vaild_outlet (powerbar, outlet):
 
 @routes.route('/')
 def home():  
-    print(powerbars)
-    return "hello world"
+    return render_template('index.html')
+
 
 
 @routes.route('/<string:powerbar>/<int:outlet>/<string:action>')
