Merge pull request #13 from cdsl-research/future/v2

cdsl-research · Jun 17, 2022 · 55cd00d · 55cd00d
2 parents bbc03c1 + cd1ad27
commit 55cd00d
Show file tree

Hide file tree

Showing 6 changed files with 212 additions and 176 deletions.
diff --git a/dashboard/static/create.js b/dashboard/static/create.js
@@ -0,0 +1,89 @@
+  const setLoading = (is_display) => {
+    if (is_display) {
+      document.getElementById("commit").classList.add("loading");
+    } else {
+      document.getElementById("commit").classList.remove("loading");
+    }
+  };
+
+  const setMsgbox = (message, is_success) => {
+    if (message) {
+      document.getElementById("msgbox").style.display = "block";
+      document.getElementById("status").innerHTML = message;
+      document.getElementById('msgbox').classList.remove(is_success ? "toast-error" : "toast-success");
+      document.getElementById('msgbox').classList.add(is_success ? "toast-success" : "toast-error");
+    } else {
+      document.getElementById("msgbox").style.display = "none";
+      document.getElementById("status").innerHTML = "";
+    }
+  };
+
+  const setSpec = (cpu, ram, storage) => {
+    document.getElementById("cpu_cores").value = cpu;
+    document.getElementById("ram_mb").value = ram;
+    document.getElementById("storage_gb").value = storage;
+  };
+
+  const createMachine = () => {
+    setLoading(true);
+
+    const url = '/v1/machine';
+    const params = ["name", "cpu_cores", "ram_mb", "storage_gb", "esxi_nodename", "comment"];
+    const payloads = {};
+    params.forEach(param => {
+      payloads[param] = document.getElementById(param).value;
+    });
+    // console.log(payloads);
+
+    fetch(url, {
+      method: 'POST',
+      body: JSON.stringify(payloads), // data can be `string` or {object}!
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+    .then(response => {
+      if (!response.ok) {
+        console.error("status code:", response.status);
+        throw new Error(response.statusText);
+      } 
+      return response.json();
+    })
+    .then(data => {
+      if (data === undefined) {
+	return;
+      }
+      console.log('Success:', data);
+      setMsgbox('Success: ' + data['message'], true);
+      setLoading(false);
+    })
+    .catch(error => {
+      console.error(error);
+      setMsgbox("Failed: " + error, false);
+      setLoading(false);
+    });
+  };
+
+  const commitButton = document.getElementById('commit');
+  commitButton.addEventListener("click", createMachine, false);
+
+  const closeButton = document.getElementById('close');
+  closeButton.addEventListener("click", () => {
+    setMsgbox(false);
+  }, false);
+
+  document.getElementById('microButton').addEventListener("click", () => {
+    setSpec(1, 512, 30);
+  }, false);
+
+  document.getElementById('smallButton').addEventListener("click", () => {
+    setSpec(1, 1024, 30);
+  }, false);
+
+  document.getElementById('mediumButton').addEventListener("click", () => {
+    setSpec(2, 2048, 50);
+  }, false);
+
+  document.getElementById('largeButton').addEventListener("click", () => {
+    setSpec(4, 4096, 70);
+  }, false);
diff --git a/dashboard/static/detail.js b/dashboard/static/detail.js
@@ -0,0 +1,44 @@
+// Press power action button
+const powerActions = document.querySelectorAll('.power-action');
+powerActions.forEach((target) => {
+  target.addEventListener("click", (e) => {
+    const powerStatus = e.target.name;
+    setPower(powerStatus);
+  })
+});
+
+// Close button on top message box
+const closeTopMessage = document.getElementById("close-top-message-box");
+closeTopMessage.addEventListener("click", () => {
+  const topMessageBox = document.getElementById("top-message-box");
+  topMessageBox.style.display = "none";
+});
+
+// Change navigation
+const menuItems = document.querySelectorAll(".menu-item");
+menuItems.forEach((target) => {
+  target.addEventListener("click", (e) => {
+    resetActiveItem();
+    e.target.classList.add("active");
+    changeSubPage(e.target);
+  })
+});
+
+// Change sub pages
+const changeSubPage = (targetPage) => {
+  const subPages = document.querySelectorAll(".sub-page");
+  subPages.forEach((target) => {
+    if (targetPage.name === target.attributes.name.nodeValue) {
+      target.classList.remove("invisible");
+    } else {
+      target.classList.add("invisible");
+    }
+  })
+};
+
+// Reset navigation select
+const resetActiveItem = () => {
+  menuItems.forEach((target) => {
+    target.classList.remove("active")
+  });
+};
diff --git a/dashboard/templates/_footer.html b/dashboard/templates/_footer.html
@@ -1,6 +1,7 @@
+<footer>
+  <p>ECoMan is published on <a href="https://github.com/cdsl-research/ecoman">GitHub</a>.</p>
+</footer>
+
 </div>
 </body>
-
-<p>ECoMan is published on <a href="https://github.com/cdsl-research/ecoman">GitHub</a>.</p>
-
-</html>
+</html>
diff --git a/dashboard/templates/_header.html b/dashboard/templates/_header.html
@@ -16,7 +16,9 @@
         <a href="/nodes" class="btn btn-link">ESXi Nodes</a>
         <a href="/create" class="btn btn-link">Create Machine</a>
       </section>
+      <!-- 
       <section class="navbar-section">
         <span>Logined as <i>Guest</i></span>
       </section>
-    </header>
+      -->
+    </header>
diff --git a/dashboard/templates/create.html b/dashboard/templates/create.html
@@ -92,6 +92,7 @@
     </div>
   </form>
 </main>
+
 <style>
   #form-container {
     max-width: 600px;
@@ -103,86 +104,6 @@
   }
 </style>
 
-<script>
-  const setLoading = (is_display) => {
-    if (is_display) {
-      document.getElementById("commit").classList.add("loading");
-    } else {
-      document.getElementById("commit").classList.remove("loading");
-    }
-  };
-
-  const setMsgbox = (message, is_success) => {
-    if (message) {
-      document.getElementById("msgbox").style.display = "block";
-      document.getElementById("status").innerHTML = message;
-      document.getElementById('msgbox').classList.remove(is_success ? "toast-error" : "toast-success");
-      document.getElementById('msgbox').classList.add(is_success ? "toast-success" : "toast-error");
-    } else {
-      document.getElementById("msgbox").style.display = "none";
-      document.getElementById("status").innerHTML = "";
-    }
-  };
-
-  const setSpec = (cpu, ram, storage) => {
-    document.getElementById("cpu_cores").value = cpu;
-    document.getElementById("ram_mb").value = ram;
-    document.getElementById("storage_gb").value = storage;
-  };
-
-  const createMachine = () => {
-    setLoading(true);
-
-    const url = '/v1/machine';
-    const params = ["name", "cpu_cores", "ram_mb", "storage_gb", "esxi_nodename", "comment"];
-    const payloads = {};
-    params.forEach(param => {
-      payloads[param] = document.getElementById(param).value;
-    });
-    // console.log(payloads);
-
-    fetch(url, {
-      method: 'POST',
-      body: JSON.stringify(payloads), // data can be `string` or {object}!
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    }).then(res => res.json())
-      .then(response => {
-        console.log('Success:', JSON.stringify(response));
-        setMsgbox('Success: ' + response['message'], true);
-        setLoading(false);
-      })
-      .catch(error => {
-        console.error('Error:', error)
-        setMsgbox("Fail: " + error, false);
-        setLoading(false);
-      });
-  };
-
-  const commitButton = document.getElementById('commit');
-  commitButton.addEventListener("click", createMachine, false);
-
-  const closeButton = document.getElementById('close');
-  closeButton.addEventListener("click", () => {
-    setMsgbox(false);
-  }, false);
-
-  document.getElementById('microButton').addEventListener("click", () => {
-    setSpec(1, 512, 30);
-  }, false);
-
-  document.getElementById('smallButton').addEventListener("click", () => {
-    setSpec(1, 1024, 30);
-  }, false);
-
-  document.getElementById('mediumButton').addEventListener("click", () => {
-    setSpec(2, 2048, 50);
-  }, false);
-
-  document.getElementById('largeButton').addEventListener("click", () => {
-    setSpec(4, 4096, 70);
-  }, false);
-</script>
+<script src="/static/create.js"></script>
 
-{% include "_footer.html" %}
+{% include "_footer.html" %}