use separate files for web component css and template

Signed-off-by: yzamir <kobi.zamir@gmail.com>
RedHat-Israel · Sep 12, 2023 · ece9687 · ece9687
1 parent e8e4db7
commit ece9687
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 22 deletions.
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
@@ -1,37 +1,49 @@
+// Load the HTML template for the web component
+async function loadTemplate(path) {
+    try {
+        const response = await fetch(path);
+        return await response.text();
+    } catch (error) {
+        console.error('Error loading template:', error);
+    }
+}
+
+// Load the CSS and create a Constructible Stylesheet
+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);
+    }
+}
+
+// Load both the template and stylesheet concurrently
+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.render();
+        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));
     }
 
-    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;