first commit

2023-08-04 19:23:47 +02:00
commit aa51255715
4 changed files with 163 additions and 0 deletions
--- a/templates/index.html
+++ b/templates/index.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{{title}}</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+  <style>
+  </style>
+</head>
+
+<body>
+  <h1>{{title}}</h1>
+  <div class="container-fluid">
+    <div class="row row-cols-auto bg-dark">
+      {% for container in containers %}
+      <div class="col-6 col-sm-4 col-md-4 col-lg-3 col-xxl-2 bg-light">
+        <div class="square-item">
+          <div class="square-content" onclick="openModalForContainer('{{container.id}}')">
+            <!-- Content for the square item -->
+            <div class="d-flex justify-content-between">
+
+              <img height="60" width="60"
+                src="https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/nginx.svg" alt="">
+              <div class="form-check form-switch form-check-reverse">
+                <input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse"
+                  onclick="toggleContainer('{{container.id}}', '{{container.status}}', this, event);" {% if
+                  container.status=="running" %} checked {% endif %}>
+                <label class="form-check-label" for="flexSwitchCheckReverse">isRunning</label>
+              </div>
+            </div>
+            <h4 class="text-nowrap">{{container.attrs['Config']['Labels']['com.docker.compose.project']}}</h4>
+            <h5 class="text-truncate">{{container.name}}</h5>
+            {% for port in container.attrs['NetworkSettings']['Ports'] %}
+            <a href="//127.0.0.1:{{ port.split(" /")[0] }}">{{ port.split("/")[0] }}</a>
+            {%endfor%}
+          </div>
+        </div>
+      </div>
+      {%endfor%}
+    </div>
+  </div>
+
+  <!-- Modal -->
+  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="spinner-border" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
+    crossorigin="anonymous"></script>
+  <script>
+    async function toggleContainer(container_id, status, control, control_event) {
+      //control_event.preventDefault();
+      control_event.stopPropagation();
+
+      console.log(control);
+      control.disabled = true;
+
+      route = (status == 'running' ? 'stop' : 'start')
+      method = (status == 'running' ? 'DELETE' : 'POST')
+
+
+      const xhttp = new XMLHttpRequest();
+
+      xhttp.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+          console.log(this.responseText)
+          control.checked = (this.responseText == 'running' ? true : false);
+        }
+        control.disabled = false;
+      };
+
+      xhttp.open(method, '/api/' + container_id + '/' + route, true);
+      xhttp.send();
+
+      await new Promise(r => setTimeout(() => r(), 1000));
+      window.location.reload();
+    }
+
+    function openModalForContainer(container_id) {
+      const myModal = new bootstrap.Modal('#exampleModal')
+      myModal.show()
+
+      const xhttp = new XMLHttpRequest();
+      xhttp.onload = function () {
+        document.getElementById('exampleModal').getElementsByClassName('modal-content')[0].innerHTML = this.responseText;
+      }
+      xhttp.open("GET", "/parts/modal/container/" + container_id, true);
+      xhttp.send();
+    }
+  </script>
+</body>
+
+</html>