style

2024-12-30 16:04:37 +01:00
parent f38b0c69d9
commit 83cd0b722b
5 changed files with 124 additions and 4 deletions
--- a/src/templates/index
+++ b/src/templates/index
@@ -77,6 +77,11 @@
        .paused {
            color: #ffa500;
        }
+        .speed-limit {
+            font-size: 1em;
+            color: #a0a0a0;
+            margin-top: 10px;
+        }
        @media (max-width: 600px) {
            body {
                padding: 10px;
@@ -107,6 +112,39 @@
        #clear-completed:hover {
            background-color: #d32f2f;
        }
+        /* New CSS for speed limit form */
+        .settings-section {
+            margin-top: 30px;
+        }
+        .speed-limit-form {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+        .speed-limit-form .form-group {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .speed-limit-form input[type="number"],
+        .speed-limit-form select,
+        .speed-limit-form button {
+            background-color: #2d2d2d;
+            color: #d4d4d4;
+            border: 1px solid #444;
+            padding: 8px 12px;
+            border-radius: 4px;
+        }
+        .speed-limit-form button {
+            cursor: pointer;
+            background-color: #4CAF50;
+            color: white;
+        }
+        .speed-limit-form button:hover {
+            background-color: #45a049;
+        }
    </style>
 </head>
 <body>
@@ -135,6 +173,24 @@
        {{end}}
    </ul>
    <button id="clear-completed" onclick="clearCompleted()">Clear Completed Jobs</button>
+    
+    <div class="settings-section">
+        <h2>Settings</h2>
+        <form id="speed-limit-form" class="speed-limit-form" onsubmit="updateSpeedLimit(event)">
+            <div class="form-group">
+                <label for="speedLimitValue">Global Speed Limit:</label>
+                <input type="number" id="speedLimitValue" name="speedLimitValue" min="0" step="0.01" required>
+                <select id="speedLimitUnit" name="speedLimitUnit">
+                    <option value="GBps">GBps</option>
+                    <option value="MBps" selected>MBps</option>
+                    <option value="KBps">KBps</option>
+                </select>
+                <button type="button" onclick="updateSpeedLimit(event)">Set Speed Limit</button>
+            </div>
+            <p class="speed-limit">Current Speed Limit: <span id="currentSpeedLimit">{{if .GlobalSpeedLimit}}{{.GlobalSpeedLimit}}{{else}}unlimited{{end}}</span></p>
+        </form>
+    </div>
+
    <script>
        function clearCompleted() {
            fetch('/clear-completed', { method: 'POST' })
@@ -147,6 +203,28 @@
                    }
                });
        }
+        function updateSpeedLimit(event) {
+            event.preventDefault();
+
+            const speedLimitValue = document.getElementById('speedLimitValue').value;
+            const speedLimitUnit = document.getElementById('speedLimitUnit').value;
+            const speedLimit = speedLimitValue === "0" ? "unlimited" : speedLimitValue + speedLimitUnit;
+
+            fetch('/set-speed-limit', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ speedLimit }),
+            }).then(response => {
+                if (response.ok) {
+                    alert('Speed limit updated successfully');
+                    document.getElementById('currentSpeedLimit').textContent = speedLimit;
+                } else {
+                    alert('Failed to update speed limit');
+                }
+            });
+        }
    </script>
 </body>
 </html>