basic app

app/templates/index.html

@@ -162,11 +162,37 @@ input:checked + .slider:before {
 
       </div>
       {% endfor %}
+
+      {% if all_groups %}
+      <div class="col-md-4">
+        <div class="col-md-12">
+          <div class="card" style="margin:10px 0">
+              <div class="card-header"><h2>Groups</h2></div>
+              {% for group in all_groups %}
+              <li class="list-group-item">
+                <div class="row">
+                <div class="col-md-7">{{group.name}}</div>
+                <div class="col-md-5">
+                  <div class="btn-group" role="group" aria-label="Powerbar Controls">
+                    <button class="btn btn-success" onclick="getUrl('/{{group.powerbar}}/groups/{{group.name}}/off')">Off</button>
+                    <button class="btn btn-primary" onclick="getUrl('/{{group.powerbar}}/groups/{{group.name}}/on')">On</button>
+                  </div>
+                </div>
+              </div>
+              <hr>
+              </li>
+            {% endfor %}
+          </div>
+        </div>
+      {% endif %}
+
     </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>
@@ -174,18 +200,32 @@ input:checked + .slider:before {
   <script type="text/javascript" src="node_modules/mdbootstrap/js/mdb.min.js"></script>
   
   <script>
-    function toggleOutlet(on_url, off_url, checked) {
+    function getUrl(url) {
-      const url = checked ? on_url : off_url;
+      return fetch(url)
-      fetch(url)
         .then(response => {
           if (response.ok) {
-            console.log('Outlet toggled successfully');
+            console.log('GET request successful');
+            return response.json(); // Return the response as JSON
           } else {
-            console.error('Failed to toggle outlet');
+            console.error('Failed to make GET request');
           }
         })
+        .then(data => {
+          // Handle the response data
+          console.log('Response data:', data);
+          location.reload(); // Refresh the page
+        })
         .catch(error => {
-          console.error('An error occurred while toggling outlet:', error);
+          console.error('An error occurred while making GET request:', error);
+        });
+    }
+
+    function toggleOutlet(on_url, off_url, checked) {
+      const url = checked ? on_url : off_url;
+      getUrl(url)
+        .then(data => {
+          // Handle the response data
+          console.log('Response data:', data);
         });
     }
   </script>

app/views.py

@@ -37,6 +37,8 @@ def home():
             powerbars[powerbar]['outlets'][outlet]['state'] = powerbars[powerbar]['outlets'][outlet].get('state', 'unknown')
 
         for group in powerbars[powerbar]['groups']:
+            
+            group["powerbar"] = powerbar
             all_groups.append(group)