From d28bdf14ecb76e8297aabaa404e313720ed76372 Mon Sep 17 00:00:00 2001
From: Steven Tracey <steven@nevets.tech>
Date: Mon, 5 Jun 2023 16:15:33 -0400
Subject: [PATCH] WEBSCOKETS

---
 index.html           | 27 ++++++++-------
 install/index.html   |  4 ++-
 script.js            | 23 +++++++------
 stylesheet.css       |  1 +
 websocket.js         | 20 +++++++++++
 websocket/index.html | 82 ++++++++++++++++++++++++++++++++++++++++++++
 6 files changed, 132 insertions(+), 25 deletions(-)
 create mode 100644 websocket.js
 create mode 100644 websocket/index.html

diff --git a/index.html b/index.html
index 8daaebd..b38fbd8 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
     <script>
         document.addEventListener('DOMContentLoaded', function () {
             const inputs = Array.from(
-                document.querySelectorAll('input[name=extension], input[name=cellNumber], input[name=directLine]')
+                document.querySelectorAll('input[name=extension], input[name=cellNumber], input[name=directNumber]')
             );
             const inputListener = e => {
                 inputs.filter(i => i !== e.target).forEach(i => (i.required = !e.target.value.length));
@@ -49,21 +49,26 @@
         <ul>
             <li><a class="active" href="#">Home</a></li>
             <li><a href="install/">Install</a></li>
+            <li><a href="websocket/">WebSocket</a></li>
             <li class="float-right"><a href="javascript:getCardToEdit()">Edit Card</a></li>
         </ul>
     </nav>
 
-    <main class="page contact-page">
+    <main>
         <section class="portfolio-block contact">
             <div class="container">
                 <h1 class="text-center mt mb h1">Signature Card Creator</h1>
                 <div class="card">
-                    <a id="card" href="#" style="display: none">
-                        <img class="card" id="cardImg" alt="card"/>
+                    <a id="card" href="#">
+                        <img class="hidden" id="cardImg" alt="card"/>
                     </a>
                 </div>
                 <label for="card" class="text-center"></label>
                 <div class="form-group mt">
+                    <div class="form-group">
+                        <label for="location">Location:</label>
+                        <select class="form-control" id="location" name="location"></select>
+                    </div>
                     <div class="form-group">
                         <label for="full_name">Full Name &amp; Credentials</label>
                         <input type="text" class="form-control" id="full_name" name="full_name" maxlength="36" required="">
@@ -77,16 +82,12 @@
                         <input type="email" class="form-control" id="email" name="email" required="">
                     </div>
                     <div class="form-group">
-                        <label for="location">Location:</label>
-                        <select class="form-control" id="location" name="location"></select>
+                        <input type="checkbox" id="directNumberCheckbox" onclick="handleCheckbox()">
+                        <label for="directNumberCheckbox">Direct Line</label>
                     </div>
-                    <div class="form-group">
-                        <input type="checkbox" id="directLineCheckbox" onclick="handleCheckbox()">
-                        <label for="directLineCheckbox">Direct Line</label>
-                    </div>
-                    <div class="form-group" id="directLineInput" style="display:none">
-                        <label for="directLine">Direct Line:</label>
-                        <input type="text" class="form-control" id="directLine" name="directLine" maxlength="15" required="">
+                    <div class="form-group" id="directNumberInput" style="display:none">
+                        <label for="directNumber">Direct Line:</label>
+                        <input type="text" class="form-control" id="directNumber" name="directNumber" maxlength="15" required="">
                     </div>
                     <div class="form-group" id="extensionInput">
                         <label for="extension">Extension</label>
diff --git a/install/index.html b/install/index.html
index 6a2ed34..d347c07 100644
--- a/install/index.html
+++ b/install/index.html
@@ -4,7 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" href="../stylesheet.css">
-  <link rel="stylesheet" href="../darkmode.css">
+  <link rel="stylesheet" href="../darkmode.css">'
+  <link rel="icon" href="../favicon.ico">
   <title>Install Card</title>
   <script>document.documentElement.dataset.theme = localStorage.getItem('theme') || 'light';</script>
 </head>
@@ -37,6 +38,7 @@
     <ul>
       <li><a href="../">Home</a></li>
       <li><a class="active" href="#">Install</a></li>
+      <li><a href="../websocket/">WebSocket</a></li>
     </ul>
   </nav>
 
diff --git a/script.js b/script.js
index 4467bf4..34a410d 100644
--- a/script.js
+++ b/script.js
@@ -1,4 +1,5 @@
-let backendUrl = "https://signature.caiu.org"
+//let backendUrl = "https://signature.caiu.org"
+let backendUrl = "http://localhost:8080"
 let locations = JSON.parse("{}");
 const locationSelector = document.getElementById("location");
 
@@ -26,15 +27,15 @@ document.getElementById("uploadDiv").addEventListener("drop", dropHandler, false
 
 function handleCheckbox() {
     const extensionInput = document.getElementById("extensionInput");
-    const directLineInput = document.getElementById("directLineInput");
-    if (document.getElementById("directLineCheckbox").checked) {
+    const directNumberInput = document.getElementById("directNumberInput");
+    if (document.getElementById("directNumberCheckbox").checked) {
         extensionInput.style.display = "none";
-        directLineInput.style.display = "block";
+        directNumberInput.style.display = "block";
         document.getElementById("extension").value = "";
     } else {
         extensionInput.style.display = "block";
-        directLineInput.style.display = "none";
-        document.getElementById("directLine").value = "";
+        directNumberInput.style.display = "none";
+        document.getElementById("directNumber").value = "";
     }
 }
 
@@ -65,7 +66,7 @@ function clearForm() {
     document.getElementById("title").value = "";
     document.getElementById("email").value = "";
     document.getElementById("extension").value = "";
-    document.getElementById("directLine").value = "";
+    document.getElementById("directNumber").value = "";
     document.getElementById("cellNumber").value = "";
     document.getElementById("existingFile").value = ""
 }
@@ -91,7 +92,7 @@ function submitForm() {
         "\"email\":\"" + document.getElementById("email").value + "\"," +
         "\"locationId\":\"" + document.getElementById("location").value + "\"," +
         "\"extension\":\"" + document.getElementById("extension").value + "\"," +
-        "\"directNumber\":\"" + document.getElementById("directLine").value + "\"," +
+        "\"directNumber\":\"" + document.getElementById("directNumber").value + "\"," +
         "\"cellNumber\":\"" + document.getElementById("cellNumber").value + "\"," +
         "\"size\":" + document.querySelector('input[name = outlookVer]:checked').value +
         "}";
@@ -199,9 +200,9 @@ function loadFromExistingCard() {
         document.getElementById("email").value = json.Email;
         document.getElementById("location").value = json.Location;
         if (json.Extension === "") {
-            let directLineCheckbox = document.getElementById("directLineCheckbox");
-            if (directLineCheckbox.value === "on") {
-                document.getElementById("directLine").value = json.DirectNumber;
+            let directNumberCheckbox = document.getElementById("directNumberCheckbox");
+            if (directNumberCheckbox.value === "on") {
+                document.getElementById("directNumber").value = json.DirectNumber;
             }
         } else {
             document.getElementById("extension").value = json.Extension;
diff --git a/stylesheet.css b/stylesheet.css
index 501d38e..def1892 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -298,6 +298,7 @@ input[type="checkbox"], input[type="radio"] {
 .card {
   margin: auto;
   width: 24em;
+  border: solid 2px var(--theme-gray)
 }
 
 .fade {
diff --git a/websocket.js b/websocket.js
new file mode 100644
index 0000000..17b62e7
--- /dev/null
+++ b/websocket.js
@@ -0,0 +1,20 @@
+let liveGenWS = new WebSocket("ws://localhost:8080/backend/generate/live");
+
+liveGenWS.addEventListener("open", (e) => {
+    console.log("Websocket connection opened");
+}, false);
+liveGenWS.addEventListener("message", (e) => {
+    console.log(e.data);
+}, false);
+
+let location = document.getElementById("location");
+let name = document.getElementById("full_name");
+let title = document.getElementById("title");
+let email = document.getElementById("email");
+let extension = document.getElementById("extension");
+let directNumber = document.getElementById("directNumber");
+let cellNumber = document.getElementById("cellNumber");
+
+location.addEventListener("selectionchange", (e) => {
+    liveGenWS.send("")
+}, false);
diff --git a/websocket/index.html b/websocket/index.html
new file mode 100644
index 0000000..c0b65ea
--- /dev/null
+++ b/websocket/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="stylesheet" href="../stylesheet.css">
+    <link rel="stylesheet" href="../darkmode.css">
+    <link rel="icon" href="../favicon.ico">
+    <title>Websocket</title>
+    <script>document.documentElement.dataset.theme = localStorage.getItem('theme') || 'light';</script>
+</head>
+<body>
+
+    <header>
+        <a class="navbar-brand" href="https://www.caiu.org">
+            <img class="logo" src="../logo.png" alt="CAIU Logo">
+        </a>
+        <div style="margin-right: 0.5em;">
+            <label for="theme" class="theme">
+            <span class="toggle-wrap">
+              <input id="theme" class="toggle" type="checkbox" role="switch" name="theme" value="dark">
+              <span class="icon">
+                <span class="icon-part"></span>
+                <span class="icon-part"></span>
+                <span class="icon-part"></span>
+                <span class="icon-part"></span>
+                <span class="icon-part"></span>
+                <span class="icon-part"></span>
+                <span class="icon-part"></span>
+                <span class="icon-part"></span>
+                <span class="icon-part"></span>
+              </span>
+            </span>
+            </label>
+        </div>
+    </header>
+    <nav class="navbar">
+        <ul>
+            <li><a href="../">Home</a></li>
+            <li><a href="../install/">Install</a></li>
+            <li><a class="active" href="#">WebSocket</a></li>
+        </ul>
+    </nav>
+
+    <main>
+        <div class="container">
+            <div class="mt mb">
+                <label for="code">Code to Execute:</label>
+                <textarea id="code" rows="8" cols="120"></textarea>
+                <button id="execCode" class="btn btn-primary">Execute</button>
+            </div>
+            <div class="mt mb">
+                <label for="output">Output:</label>
+                <textarea id="output" rows="8" cols="120" readonly></textarea>
+                <button id="clearOutput" class="btn btn-primary">Clear</button>
+            </div>
+        </div>
+    </main>
+
+    <footer>Made by the best intern!</footer>
+    <script src="../darkmode.js"></script>
+    <script src="../websocket.js"></script>
+    <script>
+        (()=>{
+            const console_log = window.console.log;
+            window.console.log = function(...args){
+                console_log(...args);
+                let textarea = document.getElementById('output');
+                if(!textarea) return;
+                args.forEach(arg=>textarea.value += `${JSON.stringify(arg)}\n`);
+            }
+        })();
+
+        document.getElementById("execCode").addEventListener("click", (e) => {
+            eval(document.getElementById("code").value);
+        }, false);
+        document.getElementById("clearOutput").addEventListener("click", (e) => {
+            document.getElementById("output").value = "";
+        }, false);
+    </script>
+</body>
+</html>
\ No newline at end of file