Update settings page

- use module - use web component to render the form Signed-off-by: yzamir <kobi.zamir@gmail.com>
RedHat-Israel · Sep 12, 2023 · f4b422c · f4b422c
1 parent 530fef5
commit f4b422c
Show file tree

Hide file tree

Showing 8 changed files with 153 additions and 99 deletions.
diff --git a/rose/server/web/index.html b/rose/server/web/index.html
@@ -9,7 +9,7 @@
 
   <body>
     <div id="content">
-      <a href="settings.html" id="settings-link">Settings</a>
+      <a href="settings/index.html" id="settings-link">Settings</a>
       <a href="#" id="info-btn">Info</a>
 
       <div id="info-panel" class="hidden">

diff --git a/rose/server/web/settings.html b/rose/server/web/settings.html
diff --git a/rose/server/web/settings/componentUtils.js b/rose/server/web/settings/componentUtils.js
@@ -0,0 +1,22 @@
+export async function loadTemplate(path) {
+    try {
+        const response = await fetch(path);
+        return await response.text();
+    } catch (error) {
+        console.error('Error loading template:', error);
+    }
+}
+
+export async function loadStylesheet(path) {
+    try {
+        const response = await fetch(path);
+        const cssText = await response.text();
+
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(cssText);
+
+        return sheet;
+    } catch (error) {
+        console.error('Error loading stylesheet:', error);
+    }
+}
diff --git a/rose/server/web/settings/index.css b/rose/server/web/settings/index.css
@@ -0,0 +1,19 @@
+body.dark-theme {
+    background-color: #2c3e50;
+    font-family: 'Sans-serif';
+    color: #ecf0f1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+.heading {
+    font-size: 2em;
+    margin-bottom: 20px;
+}
+
+.form {
+    width: 60%;
+}
diff --git a/rose/server/web/settings/index.html b/rose/server/web/settings/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Set Drivers</title>
+    <link rel="stylesheet" href="./index.css">
+</head>
+<body class="dark-theme">
+    <h2 class="heading">Set Game Drivers</h2>
+    <settings-form class="form" />
+
+    <script type="module" src="./settings-form.js"></script>
+</body>
+
+</html>
diff --git a/rose/server/web/settings.css → rose/server/web/settings/settings-form.css b/rose/server/web/settings.css → rose/server/web/settings/settings-form.css
@@ -1,21 +1,5 @@
-body.dark-theme {
-    background-color: #2c3e50;
-    font-family: 'Sans-serif';
-    color: #ecf0f1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-}
-
-.heading {
-    font-size: 2em;
-    margin-bottom: 20px;
-}
-
 .form {
-    width: 60%;
+    width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -59,7 +43,7 @@ body.dark-theme {
 }
 
 .cancel-button {
-    background-color: #e74c3c; /* Red color for cancel */
+    background-color: #e74c3c;
     color: #fff;
     font-size: 1.2em;
     padding: 15px 30px;
@@ -70,15 +54,19 @@ body.dark-theme {
 }
 
 .cancel-button:hover {
-    background-color: #c0392b; /* Darker shade on hover */
+    background-color: #c0392b;
 }
 
 .form-group {
     display: flex;
-    justify-content: center; /* Adjust as needed; this will space the two buttons evenly apart */
+    justify-content: center;
 }
 
-/* Assuming you want some spacing between the two buttons */
 .submit-button, .cancel-button {
-    margin: 0 5px; /* Adds 5px margin on both sides of each button */
+    margin: 0 5px;
+}
+
+.error-message {
+    color: red;
+    margin-top: 10px;
 }
diff --git a/rose/server/web/settings/settings-form.html b/rose/server/web/settings/settings-form.html
@@ -0,0 +1,15 @@
+<form class="form">
+    <div class="form-group">
+        <label for="driver1" class="label">Driver 1:</label>
+        <input type="text" id="driver1" name="driver1" placeholder="http://driver.student.svc.cluster.local:8081" class="input-field">
+    </div>
+    <div class="form-group">
+        <label for="driver2" class="label">Driver 2:</label>
+        <input type="text" id="driver2" name="driver2" class="input-field">
+    </div>
+    <div class="form-group">
+        <button type="button" id="submit-button" class="submit-button">Send</button>
+        <button type="button" id="cancel-button" class="cancel-button">Cancel</button>
+    </div>
+</form>
+<div class="error-message" id="error-message"></div>
diff --git a/rose/server/web/settings/settings-form.js b/rose/server/web/settings/settings-form.js
@@ -0,0 +1,70 @@
+import { loadTemplate, loadStylesheet } from './componentUtils.js';
+
+const [innerHTML, sheet] = await Promise.all([
+    loadTemplate('./settings-form.html'),
+    loadStylesheet('./settings-form.css')
+]);
+
+class SettingsForm extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        this.shadowRoot.innerHTML = innerHTML;
+        this.shadowRoot.adoptedStyleSheets = [sheet];
+
+        this.loadDrivers();
+        this.shadowRoot.querySelector('#submit-button').addEventListener('click', this.sendDrivers.bind(this));
+        this.shadowRoot.querySelector('#cancel-button').addEventListener('click', this.cancelSetting.bind(this));
+    }
+
+    displayError(message) {
+        const errorMessageElement = this.shadowRoot.getElementById('error-message');
+        errorMessageElement.textContent = message;
+    }
+
+    async loadDrivers() {
+        try {
+            const response = await fetch('/admin', { method: 'POST' });
+            const data = await response.json();
+
+            if (data.drivers && data.drivers.length > 0) {
+                this.shadowRoot.getElementById('driver1').value = data.drivers[0] ?? "";
+                this.shadowRoot.getElementById('driver2').value = data.drivers[1] ?? "";
+            }
+        } catch (error) {
+            this.displayError('Error loading drivers: ' + error.message);
+        }
+    }
+
+    async sendDrivers(event) {
+        event.preventDefault();
+
+        const driver1 = this.shadowRoot.getElementById('driver1').value;
+        const driver2 = this.shadowRoot.getElementById('driver2').value;
+
+        const params = new URLSearchParams();
+        params.append('drivers', `${driver1},${driver2}`);
+
+        try {
+            const response = await fetch(`/admin?${params}`, { method: 'POST' });
+
+            if (response.ok) {
+                window.location.href = "/index.html";
+            } else {
+                this.displayError('Error sending drivers: ' + response.statusText);
+            }
+        } catch (error) {
+            this.displayError('Error sending drivers: ' + error.message);
+        }   
+    }
+
+    cancelSetting(event) {
+        event.preventDefault();
+        window.location.href = "/index.html";
+    }
+}
+
+customElements.define('settings-form', SettingsForm);