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 · e8e4db7 · e8e4db7
1 parent 530fef5
commit e8e4db7
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 94 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/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;
@@ -82,3 +66,8 @@ body.dark-theme {
 .submit-button, .cancel-button {
     margin: 0 5px; /* Adds 5px margin on both sides of each button */
 }
+
+.error-message {
+    color: red;
+    margin-top: 10px;
+}
diff --git a/rose/server/web/settings/settings-form.js b/rose/server/web/settings/settings-form.js
@@ -0,0 +1,82 @@
+class SettingsForm extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        this.render();
+        this.loadDrivers();
+        this.shadowRoot.querySelector('#submit-button').addEventListener('click', this.sendDrivers.bind(this));
+        this.shadowRoot.querySelector('#cancel-button').addEventListener('click', this.cancelSetting.bind(this));
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <link rel="stylesheet" href="./settings-form.css">
+            <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>
+        `;
+    }
+
+    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);