add and modify new index page

2025-08-05 18:45:19 +02:00
parent 20912ba17c
commit e1ba6e49a8
8 changed files with 495 additions and 74 deletions
--- a/templates/index.html
+++ b/templates/index.html
@@ -4,27 +4,7 @@
  <meta charset="UTF-8">
  <title>Process Dashboard</title>
  <script src="https://unpkg.com/htmx.org@1.9.5"></script>
-  <style>
-    body {
-      font-family: sans-serif;
-      margin: 2rem;
-    }
-    .top-link {
-      display: block;
-      margin-bottom: 1rem;
-      font-size: 1.2rem;
-    }
-    ul#process-list {
-      list-style: none;
-      padding: 0;
-    }
-    ul#process-list li {
-      background: #f4f4f4;
-      margin: 0.5rem 0;
-      padding: 0.75rem;
-      border-radius: 5px;
-    }
-  </style>
+  
 </head>
 <body>

@@ -35,28 +15,162 @@
    </div>

  <!-- Header -->
-  <h2>Future Processes</h2>
-
-  <!-- Placeholder List for Future Processes -->
-  <ul id="process-list">
-    <li>📌 Process A (placeholder)</li>
-    <li>📌 Process B (placeholder)</li>
-    <li>📌 Process C (placeholder)</li>
-  </ul>
-
-  <!-- Example Button for Future HTMX Action -->
-  <button 
-    hx-get="/get-latest-processes" 
-    hx-target="#process-list" 
-    hx-swap="innerHTML">
-    🔄 Load Latest Processes
-  </button>
+  <h2>Processes</h2>
+<!-- Placeholder List for Future Processes -->
+<ul id="process-list">
+  {{ range .Supervisor.GetProcesses }}
+    <li>
+      <span class="process-name">📦
+        {{ if .Running }}
+          🟢 {{ .Name }}
+        {{ else }}
+          🔴 {{ .Name }}
+        {{ end }}
+      </span>

+      <div class="dropdown">
+        <button class="dot-button">⋮</button>
+        <div class="dropdown-content">
+          <button 
+            hx-post="/start-process"
+            hx-vals='{"name": "{{ .Name }}"}'
+            hx-trigger="click"
+            hx-target="#process-list"
+             hx-swap="innerHTML">
+            ▶️ Start
+          </button>
+          <button 
+            hx-post="/stop-process"
+            hx-vals='{"name": "{{ .Name }}"}'
+            hx-trigger="click"
+            hx-target="#process-list"
+             hx-swap="innerHTML">
+            ⏹️ Stop
+          </button>
+          <button 
+            hx-post="/restart-process"
+            hx-vals='{"name": "{{ .Name }}"}'
+            hx-trigger="click"
+            hx-target="#process-list"
+             hx-swap="innerHTML">
+            🔁 Restart
+          </button>
+        </div>
+      </div>
+    </li>
+  {{ end }}
+</ul>
 </body>
 <style>
+  body {
+    font-family: "Segoe UI", Roboto, sans-serif;
+    margin: 2rem;
+    background-color: #f7f9fb;
+    color: #222;
+  }
+
  .top-link-container {
    text-align: center;
-    margin-bottom: 1rem;
+    margin-bottom: 2rem;
+  }
+
+  .top-link {
+    font-size: 1.2rem;
+    text-decoration: none;
+    color: #4a90e2;
+    font-weight: 500;
+  }
+
+  .top-link:hover {
+    text-decoration: underline;
+  }
+
+  h2 {
+    text-align: center;
+    color: #444;
+    margin-bottom: 1.5rem;
+  }
+
+  ul#process-list {
+    list-style: none;
+    padding: 0;
+    max-width: 600px;
+    margin: 0 auto;
+  }
+
+  ul#process-list li {
+    background: #fff;
+    margin: 0.75rem 0;
+    padding: 1rem 1.25rem;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: box-shadow 0.25s ease;
+  }
+
+  ul#process-list li:hover {
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+  }
+
+  .process-name {
+    font-weight: 600;
+    font-size: 1rem;
+    color: #2c3e50;
+  }
+
+  .dot-button {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: #777;
+    padding: 0 4px;
+    transition: color 0.2s;
+  }
+
+  .dot-button:hover {
+    color: #333;
+  }
+
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 1.8rem;
+    background-color: #fff;
+    min-width: 130px;
+    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
+    border-radius: 6px;
+    overflow: hidden;
+    z-index: 100;
+  }
+
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+
+  .dropdown-content button {
+    width: 100%;
+    padding: 10px 12px;
+    text-align: left;
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 0.95rem;
+    color: #333;
+    transition: background 0.2s, color 0.2s;
+  }
+
+  .dropdown-content button:hover {
+    background-color: #f0f0f0;
+    color: #000;
  }
 </style>
 </html>