From 408a393f1d2b41b06dda540d8a41b71f57de10af Mon Sep 17 00:00:00 2001
From: Matthew Frost <m.frost@mattronix.nl>
Date: Sun, 19 Nov 2023 17:06:40 +0100
Subject: [PATCH] powerbar.ti

---
 app/templates/index copy.html | 293 +++++++++++++++++++++
 app/templates/index.html      | 479 ++++++++++++++--------------------
 app/views.py                  |  13 +-
 3 files changed, 508 insertions(+), 277 deletions(-)
 create mode 100644 app/templates/index copy.html
diff --git a/app/templates/index copy.html b/app/templates/index copy.html
new file mode 100644
index 0000000..cdc73d8
--- /dev/null
+++ b/app/templates/index copy.html	
@@ -0,0 +1,293 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Powerbar.ti</title>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+  <style>
+    /* Add your custom CSS styles here */
+    body {
+      font-family: 'Roboto', sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f5f5f5;
+    }
+
+    h1 {
+      text-align: center;
+      margin-top: 20px;
+      color: #333;
+    }
+
+    #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;
+      background-color: #fff;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    }
+
+    .powerbar h2 {
+      margin: 0;
+      font-size: 18px;
+      color: #333;
+    }
+
+    .outlets {
+      margin-top: 10px;
+    }
+
+    .outlet {
+      margin-bottom: 10px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 10px;
+    }
+
+    .outlet h3 {
+      margin: 0;
+      font-size: 16px;
+      color: #333;
+    }
+
+    .outlet p {
+      margin: 0;
+      font-size: 14px;
+      color: #666;
+    }
+
+    .outlet-buttons {
+      margin-top: 10px;
+    }
+
+    .outlet-buttons button {
+      margin-right: 5px;
+      padding: 5px 10px;
+      border-radius: 3px;
+      font-size: 14px;
+      cursor: pointer;
+    }
+
+    .outlet-buttons button.on {
+      background-color: #4CAF50;
+      color: white;
+    }
+
+    .outlet-buttons button.off {
+      background-color: #f44336;
+      color: white;
+    }
+
+    .search-container {
+      margin-top: 20px;
+      text-align: center;
+    }
+
+    .search-container input {
+      padding: 5px;
+      width: 200px;
+      border-radius: 3px;
+      font-size: 14px;
+    }
+
+    .filter-container {
+      margin-top: 10px;
+      text-align: center;
+    }
+
+    .filter-container select {
+      padding: 5px;
+      border-radius: 3px;
+      font-size: 14px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Powerbar.ti (0.1.4)</h1>
+  <div class="search-container">
+    <div class="container">
+      <input type="text" id="searchInput" placeholder="Search outlet...">
+    </div>
+  </div>
+  <div class="filter-container">
+    <select id="stateFilter">
+      <option value="">All</option>
+      <option value="on">On</option>
+      <option value="off">Off</option>
+    </select>
+  </div>
+  <div id="powerbars"></div>
+
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+  <script>
+    // Fetch data from the /powerbars endpoint
+    function fetchPowerbars() {
+      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');
+      powerbarsContainer.innerHTML = ''; // Clear existing 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', 'card');
+
+        // Create powerbar title
+        const powerbarTitle = document.createElement('h2');
+        powerbarTitle.classList.add('card-title');
+        powerbarTitle.textContent = powerbar.name;
+        powerbarContainer.appendChild(powerbarTitle);
+
+        // Create outlets container
+        const outletsContainer = document.createElement('div');
+        outletsContainer.classList.add('outlets', 'card-content');
+
+        // 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.classList.add('outlet-name');
+          outletName.textContent = outlet.name;
+          outletContainer.appendChild(outletName);
+
+          // Create outlet state
+          const outletState = document.createElement('p');
+          outletState.classList.add('outlet-state');
+          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.classList.add('btn', 'btn-small', 'waves-effect', 'waves-light', '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.classList.add('btn', 'btn-small', 'waves-effect', 'waves-light', '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);
+      }
+    }
+
+    // Search outlet
+    const searchInput = document.getElementById('searchInput');
+    searchInput.value = localStorage.getItem('searchValue') || ''; // Set the value from localStorage if available
+    searchInput.addEventListener('input', () => {
+      const searchValue = searchInput.value.toLowerCase();
+      const outlets = document.getElementsByClassName('outlet');
+
+      for (let i = 0; i < outlets.length; i++) {
+        const outlet = outlets[i];
+        const outletName = outlet.getElementsByClassName('outlet-name')[0].textContent.toLowerCase();
+
+        if (outletName.includes(searchValue)) {
+          outlet.style.display = 'block';
+        } else {
+          outlet.style.display = 'none';
+        }
+      }
+
+      localStorage.setItem('searchValue', searchValue); // Store the value in localStorage
+    });
+
+    // Filter outlets by state
+    const stateFilter = document.getElementById('stateFilter');
+    stateFilter.value = localStorage.getItem('filterValue') || ''; // Set the value from localStorage if available
+    stateFilter.addEventListener('change', () => {
+      const filterValue = stateFilter.value;
+      const outlets = document.getElementsByClassName('outlet');
+
+      for (let i = 0; i < outlets.length; i++) {
+        const outlet = outlets[i];
+        const outletState = outlet.getElementsByClassName('outlet-state')[0].textContent.toLowerCase();
+
+        if (filterValue === '' || outletState.includes(filterValue)) {
+          outlet.style.display = 'block';
+        } else {
+          outlet.style.display = 'none';
+        }
+      }
+
+      localStorage.setItem('filterValue', filterValue); // Store the value in localStorage
+    });
+
+    // Refresh powerbars and their states
+    function refreshPowerbars() {
+      fetchPowerbars();
+    }
+
+    // Initial fetch and render
+    fetchPowerbars();
+
+  </script>
+</body>
+</html>
diff --git a/app/templates/index.html b/app/templates/index.html
index cdc73d8..049f5e0 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -1,293 +1,220 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-  <title>Powerbar.ti</title>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-  <style>
-    /* Add your custom CSS styles here */
-    body {
-      font-family: 'Roboto', sans-serif;
-      margin: 0;
-      padding: 0;
-      background-color: #f5f5f5;
-    }
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>powerbar.ti</title>
+  
+  <!-- Bootstrap CSS -->
+<!-- Font Awesome -->
+<link
+  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
+  rel="stylesheet"
+/>
+<!-- Google Fonts -->
+<link
+  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+  rel="stylesheet"
+/>
+<!-- MDB -->
+<link
+  href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.2/mdb.min.css"
+  rel="stylesheet"
+/>
 
-    h1 {
-      text-align: center;
-      margin-top: 20px;
-      color: #333;
-    }
-
-    #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;
-      background-color: #fff;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    }
-
-    .powerbar h2 {
-      margin: 0;
-      font-size: 18px;
-      color: #333;
-    }
-
-    .outlets {
-      margin-top: 10px;
-    }
-
-    .outlet {
-      margin-bottom: 10px;
-      border-bottom: 1px solid #ccc;
-      padding-bottom: 10px;
-    }
-
-    .outlet h3 {
-      margin: 0;
-      font-size: 16px;
-      color: #333;
-    }
-
-    .outlet p {
-      margin: 0;
-      font-size: 14px;
-      color: #666;
-    }
-
-    .outlet-buttons {
-      margin-top: 10px;
-    }
-
-    .outlet-buttons button {
-      margin-right: 5px;
-      padding: 5px 10px;
-      border-radius: 3px;
-      font-size: 14px;
-      cursor: pointer;
-    }
-
-    .outlet-buttons button.on {
-      background-color: #4CAF50;
-      color: white;
-    }
-
-    .outlet-buttons button.off {
-      background-color: #f44336;
-      color: white;
-    }
-
-    .search-container {
-      margin-top: 20px;
-      text-align: center;
-    }
-
-    .search-container input {
-      padding: 5px;
-      width: 200px;
-      border-radius: 3px;
-      font-size: 14px;
-    }
-
-    .filter-container {
-      margin-top: 10px;
-      text-align: center;
-    }
-
-    .filter-container select {
-      padding: 5px;
-      border-radius: 3px;
-      font-size: 14px;
-    }
-  </style>
 </head>
+<style>
+
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {display:none;}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input.default:checked + .slider {
+  background-color: #444;
+}
+input.primary:checked + .slider {
+  background-color: #2196F3;
+}
+input.success:checked + .slider {
+  background-color: #8bc34a;
+}
+input.info:checked + .slider {
+  background-color: #3de0f5;
+}
+input.warning:checked + .slider {
+  background-color: #FFC107;
+}
+input.danger:checked + .slider {
+  background-color: #f44336;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+</style>
+
+
 <body>
-  <h1>Powerbar.ti (0.1.4)</h1>
-  <div class="search-container">
-    <div class="container">
-      <input type="text" id="searchInput" placeholder="Search outlet...">
+
+  <div class="container">
+    <h1 class="mt-3">powerbar.ti (0.0.5)</h1>
+    <hr>
+  </div>
+
+  <div class="mt-4 container">
+    <div class="card">
+    <div class="input-group">
+      <div class="form-outline">
+        <input type="search" id="searchInput" class="form-control" ,placehholder="Search Outlet"/>
+        <label class="form-label" for="form1">Search</label>
+      </div>
+      <button type="button" class="btn btn-primary">
+        <i class="fas fa-search"></i>
+      </button>
     </div>
   </div>
-  <div class="filter-container">
-    <select id="stateFilter">
-      <option value="">All</option>
-      <option value="on">On</option>
-      <option value="off">Off</option>
-    </select>
   </div>
-  <div id="powerbars"></div>
 
-  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+
+  <div class="container">
+    <div class="row">
+
+      {% for powerbar in powerbars.items() %}
+      <div class="col-md-4">
+        <div class="col-md-12">
+          <div class="card" style="margin:10px 0">
+                    <!-- Default panel contents -->
+                    <div class="card-header"><h2>{{powerbar[1].name}}</h2></div>
+                
+                    <!-- List group -->
+                    <ul class="list-group list-group-flush">
+                      {% for outlet in powerbar[1].outlets.items() %}
+                    
+                        <li class="list-group-item">
+                          <div class="row">
+                          <div class="col-md-8">{{outlet[1].name}}</div>
+                          <div class="col-md-4">
+                          <label class="switch">
+                           {% if outlet[1].state == "on" %}
+                            <input type="checkbox" class="default" id="{{powerbar[0]}}-{{outlet[0]}}" onchange="toggleOutlet('/{{powerbar[0]}}/{{outlet[0]}}/on', '/{{powerbar[0]}}/{{outlet[0]}}/off', this.checked)" checked>
+                            {% else %} 
+                            <input type="checkbox" class="default" id="{{powerbar[0]}}-{{outlet[0]}}" onchange="toggleOutlet('/{{powerbar[0]}}/{{outlet[0]}}/on', '/{{powerbar[0]}}/{{outlet[0]}}/off', this.checked)">
+                            {% endif %}
+                            <span class="slider"></span> 
+                          </label>
+                          </div>
+                        </div>
+                        </li>
+                      {% endfor %}
+                    </ul>
+
+                    </ul>
+                </div> 
+          </div>
+
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+
+
+
+  <!-- Bootstrap JS -->
+  <script type="text/javascript" src="node_modules/mdbootstrap/js/jquery.min.js"></script>
+  <script type="text/javascript" src="node_modules/mdbootstrap/js/popper.min.js"></script>
+  <script type="text/javascript" src="node_modules/mdbootstrap/js/bootstrap.min.js"></script>
+  <script type="text/javascript" src="node_modules/mdbootstrap/js/mdb.min.js"></script>
+  
   <script>
-    // Fetch data from the /powerbars endpoint
-    function fetchPowerbars() {
-      fetch('/powerbars')
-        .then(response => response.json())
-        .then(data => {
-          // Render powerbars
-          renderPowerbars(data);
+    function toggleOutlet(on_url, off_url, checked) {
+      const url = checked ? on_url : off_url;
+      fetch(url)
+        .then(response => {
+          if (response.ok) {
+            console.log('Outlet toggled successfully');
+          } else {
+            console.error('Failed to toggle outlet');
+          }
         })
         .catch(error => {
-          console.error('Error:', error);
+          console.error('An error occurred while toggling outlet:', error);
         });
     }
-
-    function renderPowerbars(data) {
-      const powerbarsContainer = document.getElementById('powerbars');
-      powerbarsContainer.innerHTML = ''; // Clear existing 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', 'card');
-
-        // Create powerbar title
-        const powerbarTitle = document.createElement('h2');
-        powerbarTitle.classList.add('card-title');
-        powerbarTitle.textContent = powerbar.name;
-        powerbarContainer.appendChild(powerbarTitle);
-
-        // Create outlets container
-        const outletsContainer = document.createElement('div');
-        outletsContainer.classList.add('outlets', 'card-content');
-
-        // 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.classList.add('outlet-name');
-          outletName.textContent = outlet.name;
-          outletContainer.appendChild(outletName);
-
-          // Create outlet state
-          const outletState = document.createElement('p');
-          outletState.classList.add('outlet-state');
-          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.classList.add('btn', 'btn-small', 'waves-effect', 'waves-light', '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.classList.add('btn', 'btn-small', 'waves-effect', 'waves-light', '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);
-      }
-    }
-
-    // Search outlet
-    const searchInput = document.getElementById('searchInput');
-    searchInput.value = localStorage.getItem('searchValue') || ''; // Set the value from localStorage if available
-    searchInput.addEventListener('input', () => {
-      const searchValue = searchInput.value.toLowerCase();
-      const outlets = document.getElementsByClassName('outlet');
-
-      for (let i = 0; i < outlets.length; i++) {
-        const outlet = outlets[i];
-        const outletName = outlet.getElementsByClassName('outlet-name')[0].textContent.toLowerCase();
-
-        if (outletName.includes(searchValue)) {
-          outlet.style.display = 'block';
-        } else {
-          outlet.style.display = 'none';
-        }
-      }
-
-      localStorage.setItem('searchValue', searchValue); // Store the value in localStorage
-    });
-
-    // Filter outlets by state
-    const stateFilter = document.getElementById('stateFilter');
-    stateFilter.value = localStorage.getItem('filterValue') || ''; // Set the value from localStorage if available
-    stateFilter.addEventListener('change', () => {
-      const filterValue = stateFilter.value;
-      const outlets = document.getElementsByClassName('outlet');
-
-      for (let i = 0; i < outlets.length; i++) {
-        const outlet = outlets[i];
-        const outletState = outlet.getElementsByClassName('outlet-state')[0].textContent.toLowerCase();
-
-        if (filterValue === '' || outletState.includes(filterValue)) {
-          outlet.style.display = 'block';
-        } else {
-          outlet.style.display = 'none';
-        }
-      }
-
-      localStorage.setItem('filterValue', filterValue); // Store the value in localStorage
-    });
-
-    // Refresh powerbars and their states
-    function refreshPowerbars() {
-      fetchPowerbars();
-    }
-
-    // Initial fetch and render
-    fetchPowerbars();
-
   </script>
+
 </body>
 </html>
+<!-- Add an input field for search -->
+
+<script>
+  function search() {
+    // Get the input value
+    const searchValue = document.getElementById('searchInput').value.toLowerCase();
+
+    // Get all the list items
+    const listItems = document.querySelectorAll('li');
+
+    // Loop through each list item
+    listItems.forEach(item => {
+      const itemText = item.textContent.toLowerCase();
+
+      // Check if the item text contains the search value
+      if (itemText.includes(searchValue)) {
+        item.style.display = 'block'; // Show the item
+      } else {
+        item.style.display = 'none'; // Hide the item
+      }
+    });
+  }
+
+  // Add event listener to the search input
+  document.getElementById('searchInput').addEventListener('input', search);
+</script>
diff --git a/app/views.py b/app/views.py
index 508cbe5..96cb984 100644
--- a/app/views.py
+++ b/app/views.py
@@ -29,7 +29,18 @@ def vaild_outlet (powerbar, outlet):
 
 @routes.route('/')
 def home():  
-    return render_template('index.html')
+
+    all_groups = []
+
+    for powerbar in powerbars:
+        for outlet in powerbars[powerbar]['outlets']:
+            powerbars[powerbar]['outlets'][outlet]['state'] = powerbars[powerbar]['outlets'][outlet].get('state', 'unknown')
+
+        for group in powerbars[powerbar]['groups']:
+            all_groups.append(group)
+
+
+    return render_template('index.html', powerbars=powerbars, all_groups=all_groups)
 
 
 
