From 53c301a220e59df08aea0d1425d0aa16d699258c Mon Sep 17 00:00:00 2001
From: yzamir <kobi.zamir@gmail.com>
Date: Tue, 12 Sep 2023 18:48:19 +0300
Subject: [PATCH] Update settings page

  - use module
  - use web component to render the form

Signed-off-by: yzamir <kobi.zamir@gmail.com>
---
 rose/server/web/settings-form.css | 73 +++++++++++++++++++++++++++
 rose/server/web/settings-form.js  | 82 +++++++++++++++++++++++++++++++
 rose/server/web/settings.css      | 65 ------------------------
 rose/server/web/settings.html     | 68 ++-----------------------
 4 files changed, 159 insertions(+), 129 deletions(-)
 create mode 100644 rose/server/web/settings-form.css
 create mode 100644 rose/server/web/settings-form.js

diff --git a/rose/server/web/settings-form.css b/rose/server/web/settings-form.css
new file mode 100644
index 00000000..6328694c
--- /dev/null
+++ b/rose/server/web/settings-form.css
@@ -0,0 +1,73 @@
+.form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.form-group {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 15px;
+}
+
+.label {
+    font-size: 1.2em;
+}
+
+.input-field {
+    flex-grow: 1;
+    margin-left: 10px;
+    padding: 10px;
+    font-size: 1em;
+    border-radius: 5px;
+    border: 1px solid #34495e;
+    background-color: #ecf0f1;
+    color: #2c3e50;
+}
+
+.submit-button {
+    background-color: #3498db;
+    color: #ecf0f1;
+    font-size: 1.2em;
+    padding: 15px 30px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.submit-button:hover {
+    background-color: #2980b9;
+}
+
+.cancel-button {
+    background-color: #e74c3c; /* Red color for cancel */
+    color: #fff;
+    font-size: 1.2em;
+    padding: 15px 30px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.cancel-button:hover {
+    background-color: #c0392b; /* Darker shade on hover */
+}
+
+.form-group {
+    display: flex;
+    justify-content: center; /* Adjust as needed; this will space the two buttons evenly apart */
+}
+
+/* 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 */
+}
+
+.error-message {
+    color: red;
+    margin-top: 10px;
+}
diff --git a/rose/server/web/settings-form.js b/rose/server/web/settings-form.js
new file mode 100644
index 00000000..015ff011
--- /dev/null
+++ b/rose/server/web/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);
diff --git a/rose/server/web/settings.css b/rose/server/web/settings.css
index 403933d7..60024806 100644
--- a/rose/server/web/settings.css
+++ b/rose/server/web/settings.css
@@ -16,69 +16,4 @@ body.dark-theme {
 
 .form {
     width: 60%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.form-group {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 15px;
-}
-
-.label {
-    font-size: 1.2em;
-}
-
-.input-field {
-    flex-grow: 1;
-    margin-left: 10px;
-    padding: 10px;
-    font-size: 1em;
-    border-radius: 5px;
-    border: 1px solid #34495e;
-    background-color: #ecf0f1;
-    color: #2c3e50;
-}
-
-.submit-button {
-    background-color: #3498db;
-    color: #ecf0f1;
-    font-size: 1.2em;
-    padding: 15px 30px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.submit-button:hover {
-    background-color: #2980b9;
-}
-
-.cancel-button {
-    background-color: #e74c3c; /* Red color for cancel */
-    color: #fff;
-    font-size: 1.2em;
-    padding: 15px 30px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.cancel-button:hover {
-    background-color: #c0392b; /* Darker shade on hover */
-}
-
-.form-group {
-    display: flex;
-    justify-content: center; /* Adjust as needed; this will space the two buttons evenly apart */
-}
-
-/* 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 */
 }
diff --git a/rose/server/web/settings.html b/rose/server/web/settings.html
index 0aac0c75..9a5c8b3d 100644
--- a/rose/server/web/settings.html
+++ b/rose/server/web/settings.html
@@ -5,72 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Set Drivers</title>
     <link rel="stylesheet" href="settings.css">
-    <script>
-        function loadDrivers() {
-            // Fetch data from the server
-            fetch('/admin', {
-                method: 'POST'
-            })
-            .then(response => response.json())
-            .then(data => {
-                // Check if the drivers field exists and has at least 2 entries
-                if (data.drivers && data.drivers.length > 0) {
-                    document.getElementById('driver1').value = data.drivers[0] ?? "";
-                    document.getElementById('driver2').value = data.drivers[1] ?? "";
-                }
-            })
-            .catch(error => {
-                console.error('Error:', error);
-            });
-        }
-
-        function cancelSetting() {
-            window.location.href = "index.html";
-        }
-
-        function sendDrivers(event) {
-            // Prevent the form from submitting in the traditional way
-            event.preventDefault();
-
-            const driver1 = document.getElementById('driver1').value;
-            const driver2 = document.getElementById('driver2').value;
-            const formattedData = `drivers=${driver1},${driver2}`;
-
-            // Send the formatted data to the server using an AJAX POST request
-            fetch(`/admin?${formattedData}`, {
-                method: 'POST'
-            })
-            .then(response => {
-                if(response.ok) {
-                    // If the POST request was successful, redirect to index.html
-                    window.location.href = "index.html";
-                } else {
-                    console.error('Error:', response.statusText);
-                }
-            })
-            .catch(error => {
-                console.error('Error:', error);
-            });
-        }
-
-        document.addEventListener('DOMContentLoaded', loadDrivers);
-    </script>
 </head>
 <body class="dark-theme">
     <h2 class="heading">Set Game Drivers</h2>
-    <form onsubmit="sendDrivers(event)" class="form">
-        <div class="form-group">
-            <label for="driver1" class="label">Driver 1:</label>
-            <input type="text" id="driver1" name="driver1" placeholder="http://127.0.0.1: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="submit" class="submit-button">Send</button>
-            <button type="button" class="cancel-button" onclick="cancelSetting()">Cancel</button>
-        </div>
-    </form>
+    <settings-form class="form" />
+
+    <script type="module" src="./settings-form.js"></script>
 </body>
+
 </html>