From 10f1194abd7c0a0e15f03c93a85938a01a5c1dab Mon Sep 17 00:00:00 2001
From: Sacha Bron <me@sachabron.ch>
Date: Sun, 18 Aug 2024 02:26:57 +0200
Subject: [PATCH 1/9] Hotfix dev mode

---
 client/.env.development    | 1 +
 client/src/axios-common.ts | 5 ++++-
 client/src/ws.ts           | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/.env.development b/client/.env.development
index e69de29..89c6524 100644
--- a/client/.env.development
+++ b/client/.env.development
@@ -0,0 +1 @@
+VITE_ORBITAL_SERVER_URL=http://localhost:3000
\ No newline at end of file
diff --git a/client/src/axios-common.ts b/client/src/axios-common.ts
index 51a6d40..3eb58b5 100644
--- a/client/src/axios-common.ts
+++ b/client/src/axios-common.ts
@@ -1,7 +1,10 @@
 import { Axios } from "axios";
 
+console.log(import.meta.env.DEV);
+console.log(import.meta.env.VITE_ORBITAL_SERVER_URL);
+
 export const axiosInstance = new Axios({
-  baseURL: window.location.href ?? "",
+  baseURL: import.meta.env.DEV ? import.meta.env.VITE_ORBITAL_SERVER_URL ?? "" : window.location.href,
   transformRequest: (data) => JSON.stringify(data),
   headers: {
     "Content-Type": "application/json",
diff --git a/client/src/ws.ts b/client/src/ws.ts
index de7c261..b5d73a1 100644
--- a/client/src/ws.ts
+++ b/client/src/ws.ts
@@ -25,7 +25,7 @@ export const WebSocketHandler = {
       }
 
       console.log("Starting connection to WebSocket Server");
-      const wsUrl = new URL(window.location.href);
+      const wsUrl = import.meta.env.DEV ? new URL(import.meta.env.SERVER_URL) : new URL(window.location.href);
 
       // const wsProtocol = window.location.protocol === "https:" ? "wss://" : "ws://";
       // export const ws = new WebSocket(wsProtocol + location.host + "/");

From b3971f134f945db08c42b74671b09b25f021997d Mon Sep 17 00:00:00 2001
From: Sacha Bron <me@sachabron.ch>
Date: Sun, 18 Aug 2024 03:08:06 +0200
Subject: [PATCH 2/9] Sync lamp info

---
 client/src/views/LampPage.vue | 14 ++++++++++++++
 server/lamp/index.ts          |  4 ++++
 2 files changed, 18 insertions(+)

diff --git a/client/src/views/LampPage.vue b/client/src/views/LampPage.vue
index af23705..0590442 100644
--- a/client/src/views/LampPage.vue
+++ b/client/src/views/LampPage.vue
@@ -93,8 +93,22 @@ onMounted(() => {
   axiosInstance.get("/lamp/brightness")
     .then(res => JSON.parse(res.data))
     .then(data => brightness.value = data.brightness);
+
+  refreshAnimationAndCharacteristics();
 });
 
+function refreshAnimationAndCharacteristics() {
+  axiosInstance.get(`/lamp/animation`)
+    .then(res => {
+      return JSON.parse(res.data);
+    })
+    .then(data => {
+      console.log(data);
+      currentConfig.selectedAnimation = data.animation.name;
+      onNewAnimation();
+    })
+}
+
 function onSmartColorUpdate(smartColor: SmartColor, i: number) {
   characteristics.array[i].value = smartColor;
   onChange();
diff --git a/server/lamp/index.ts b/server/lamp/index.ts
index 7c02b7d..0cab217 100644
--- a/server/lamp/index.ts
+++ b/server/lamp/index.ts
@@ -136,6 +136,10 @@ export function initLamp() {
     res.send("OK");
   });
 
+  lamp.get("/animation", (req, res) => {
+    res.send({ animation: animationStore[currentAnimation] });
+  });
+
   lamp.post("/animation", (req, res) => {
     const animation: string = req.body.animation;
 

From ed4bb04a3d7c90eb42cd5b6075af9480180900f5 Mon Sep 17 00:00:00 2001
From: Sacha Bron <me@sachabron.ch>
Date: Mon, 19 Aug 2024 00:15:31 +0200
Subject: [PATCH 3/9] Fix root location

---
 client/src/axios-common.ts | 2 +-
 client/src/ws.ts           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/axios-common.ts b/client/src/axios-common.ts
index 3eb58b5..87d4ae2 100644
--- a/client/src/axios-common.ts
+++ b/client/src/axios-common.ts
@@ -4,7 +4,7 @@ console.log(import.meta.env.DEV);
 console.log(import.meta.env.VITE_ORBITAL_SERVER_URL);
 
 export const axiosInstance = new Axios({
-  baseURL: import.meta.env.DEV ? import.meta.env.VITE_ORBITAL_SERVER_URL ?? "" : window.location.href,
+  baseURL: import.meta.env.DEV ? import.meta.env.VITE_ORBITAL_SERVER_URL ?? "" : window.location.origin,
   transformRequest: (data) => JSON.stringify(data),
   headers: {
     "Content-Type": "application/json",
diff --git a/client/src/ws.ts b/client/src/ws.ts
index b5d73a1..f0bcb74 100644
--- a/client/src/ws.ts
+++ b/client/src/ws.ts
@@ -25,7 +25,7 @@ export const WebSocketHandler = {
       }
 
       console.log("Starting connection to WebSocket Server");
-      const wsUrl = import.meta.env.DEV ? new URL(import.meta.env.SERVER_URL) : new URL(window.location.href);
+      const wsUrl = import.meta.env.DEV ? new URL(import.meta.env.SERVER_URL) : new URL(window.location.origin);
 
       // const wsProtocol = window.location.protocol === "https:" ? "wss://" : "ws://";
       // export const ws = new WebSocket(wsProtocol + location.host + "/");

From 6d7727fe93c4c7450a24ca6869c14040f9d60118 Mon Sep 17 00:00:00 2001
From: Sacha Bron <me@sachabron.ch>
Date: Mon, 19 Aug 2024 01:00:00 +0200
Subject: [PATCH 4/9] Sync color picker and other characteristics

---
 .../components/shared/SmartColorPicker.vue    | 20 +++++++++-
 client/src/views/LampPage.vue                 | 39 +++++++++++--------
 package-lock.json                             | 10 ++---
 tsconfig.json                                 |  3 +-
 4 files changed, 48 insertions(+), 24 deletions(-)

diff --git a/client/src/components/shared/SmartColorPicker.vue b/client/src/components/shared/SmartColorPicker.vue
index 3a62b6c..6d309d0 100644
--- a/client/src/components/shared/SmartColorPicker.vue
+++ b/client/src/components/shared/SmartColorPicker.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { Color } from "../../../../server/color";
 import type { SmartColor } from "../../../../server/types/SmartColor";
 
@@ -71,6 +71,24 @@ function onFormUpdate() {
 
   emit("smartColorUpdate", emitSmartColor);
 }
+
+function onSmartColorChange(newColor: SmartColor) {
+  selectedType.value = newColor.type;
+
+  if (newColor.type === "static") {
+    selectedColor.value = Color.toHex(newColor.color);
+  } else if (newColor.type === "gradient") {
+    selectedColorFrom.value = Color.toHex(newColor.parameters.colorFrom);
+    selectedColorTo.value = Color.toHex(newColor.parameters.colorTo);
+  } else {
+    selectedColor.value = "#000000";
+    selectedColorFrom.value = "#000000";
+    selectedColorTo.value = "#000000";
+  }
+}
+
+watch(() => props.smartColor, onSmartColorChange);
+
 </script>
 
 <style scoped>
diff --git a/client/src/views/LampPage.vue b/client/src/views/LampPage.vue
index 0590442..cf6538d 100644
--- a/client/src/views/LampPage.vue
+++ b/client/src/views/LampPage.vue
@@ -29,7 +29,6 @@
           class="input"
           v-if="option.type === 'number'"
           v-model="characteristics.array[i].value"
-          @change="onChange"
           type="number"
           :min="option.min"
           :max="option.max"
@@ -39,7 +38,6 @@
           class="input"
           v-if="option.type === 'select'"
           v-model="characteristics.array[i].value"
-          @change="onChange"
         >
           <option
             v-for="opt in option.options"
@@ -50,6 +48,12 @@
           </option>
         </select>
       </template>
+      <DynamicButton color="yellow" variant="normal" @click="refreshAnimationAndCharacteristics">
+        Refresh
+      </DynamicButton>
+      <DynamicButton color="green" variant="normal" @click="applyAnimation">
+        Apply
+      </DynamicButton>
       <label>Brightness</label>
       <vue-slider
         v-model="brightness"
@@ -65,6 +69,7 @@
 </template>
 
 <script setup lang="ts">
+import DynamicButton from "../components/shared/DynamicButton.vue";
 import VueSlider from "vue-slider-component";
 import "vue-slider-component/theme/antd.css";
 import SmartColorPicker from "../components/shared/SmartColorPicker.vue";
@@ -103,7 +108,6 @@ function refreshAnimationAndCharacteristics() {
       return JSON.parse(res.data);
     })
     .then(data => {
-      console.log(data);
       currentConfig.selectedAnimation = data.animation.name;
       onNewAnimation();
     })
@@ -111,11 +115,6 @@ function refreshAnimationAndCharacteristics() {
 
 function onSmartColorUpdate(smartColor: SmartColor, i: number) {
   characteristics.array[i].value = smartColor;
-  onChange();
-}
-
-function onChange() {
-  axiosInstance.post("/lamp/characteristics", characteristics.array);
 }
 
 function onNewAnimation() {
@@ -126,21 +125,31 @@ function onNewAnimation() {
     })
     .then(data => {
       options.array = data.options;
-      characteristics.array = options.array.map(o => {
+      characteristics.array.splice(0, characteristics.array.length);
+      for (let i = 0; i < options.array.length; i++) {
+        const o = options.array[i];
         switch (o.type) {
           case "number":
-            return { type: "number", value: o.currentCharacteristicValue };
+            characteristics.array.push({ type: o.type, value: o.currentCharacteristicValue });
+            break;
           case "select":
-            return { type: "select", value: o.currentCharacteristicValue };
+            characteristics.array.push({ type: o.type, value: o.currentCharacteristicValue });
+            break;
           case "color":
-            return { type: "color", value: o.currentCharacteristicValue };
+            console.log(i, { type: o.type, value: o.currentCharacteristicValue });
+            characteristics.array.push({ type: o.type, value: o.currentCharacteristicValue });
+            break;
         }
-      });
+      }
     });
+}
 
+function applyAnimation() {
   axiosInstance.post("/lamp/animation", {
     animation: currentConfig.selectedAnimation,
   });
+
+  axiosInstance.post("/lamp/characteristics", characteristics.array);
 }
 
 function onBrightnessChange(brightness: number) {
@@ -189,10 +198,6 @@ input[type="number"] {
   max-width: max-content;
 }
 
-.brightness-slider {
-  
-}
-
 label {
   font-size: calc(5 * var(--unit));
 }
diff --git a/package-lock.json b/package-lock.json
index a8e7413..a7db3ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,7 +45,7 @@
         "nodemon": "^2.0.12",
         "prettier": "^2.8.0",
         "ts-jest": "^27.0.4",
-        "typescript": "^4.3.5"
+        "typescript": "^5.5.4"
       },
       "engines": {
         "node": ">=10.21.0 <11"
@@ -12006,16 +12006,16 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
-      "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
+      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
     "node_modules/unbox-primitive": {
diff --git a/tsconfig.json b/tsconfig.json
index ca550ed..33ccfe2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,7 +7,8 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "declaration": true,
-    "downlevelIteration": true
+    "downlevelIteration": true,
+    "noFallthroughCasesInSwitch": true,
   },
   "exclude": [
     "public",

From 6ff04296c06c2b12fe61735c365e3381a7d9e826 Mon Sep 17 00:00:00 2001
From: Sacha Bron <me@sachabron.ch>
Date: Mon, 19 Aug 2024 01:16:01 +0200
Subject: [PATCH 5/9] Add condition to avoid a crash

---
 server/lamp/index.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/server/lamp/index.ts b/server/lamp/index.ts
index 0cab217..eec8bc0 100644
--- a/server/lamp/index.ts
+++ b/server/lamp/index.ts
@@ -92,8 +92,10 @@ export function initLamp() {
       // We set the default value to the current one to sync clients
       if (currentCharacteristics[animationName]) {
         for (let i = 0; i < options.length; i++) {
-          options[i].currentCharacteristicValue =
-            currentCharacteristics[animationName][i].value;
+          if (typeof currentCharacteristics[animationName][i]?.value !== "undefined") {
+            options[i].currentCharacteristicValue =
+              currentCharacteristics[animationName][i].value;
+          }
         }
       } else {
         options.forEach((option) => {

From 5dea030c3f9f4ebb9a8055bee02203dfa03343cc Mon Sep 17 00:00:00 2001
From: Sacha Bron <me@sachabron.ch>
Date: Mon, 19 Aug 2024 01:19:13 +0200
Subject: [PATCH 6/9] Add brightness to sync

---
 client/src/views/LampPage.vue | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/client/src/views/LampPage.vue b/client/src/views/LampPage.vue
index cf6538d..3c1b94b 100644
--- a/client/src/views/LampPage.vue
+++ b/client/src/views/LampPage.vue
@@ -48,12 +48,6 @@
           </option>
         </select>
       </template>
-      <DynamicButton color="yellow" variant="normal" @click="refreshAnimationAndCharacteristics">
-        Refresh
-      </DynamicButton>
-      <DynamicButton color="green" variant="normal" @click="applyAnimation">
-        Apply
-      </DynamicButton>
       <label>Brightness</label>
       <vue-slider
         v-model="brightness"
@@ -64,6 +58,12 @@
         :lazy="true"
         :marks="[0, 50, 100]"
       />
+      <DynamicButton color="yellow" variant="normal" @click="refreshABC">
+        Refresh
+      </DynamicButton>
+      <DynamicButton color="green" variant="normal" @click="applyAnimation">
+        Apply
+      </DynamicButton>
     </div>
   </div>
 </template>
@@ -95,14 +95,15 @@ onMounted(() => {
       currentConfig.animationOptions = data.animationNames;
     });
 
+  refreshABC();
+});
+
+// Animations, Brightness, Characteristics
+function refreshABC() {
   axiosInstance.get("/lamp/brightness")
     .then(res => JSON.parse(res.data))
     .then(data => brightness.value = data.brightness);
 
-  refreshAnimationAndCharacteristics();
-});
-
-function refreshAnimationAndCharacteristics() {
   axiosInstance.get(`/lamp/animation`)
     .then(res => {
       return JSON.parse(res.data);

From 3324d243a7bcda5c6dc55330f4fcffab69ff5eb4 Mon Sep 17 00:00:00 2001
From: Sacha Bron <me@sachabron.ch>
Date: Mon, 19 Aug 2024 01:22:16 +0200
Subject: [PATCH 7/9] TS version === 4.3.5

---
 package-lock.json | 10 +++++-----
 package.json      |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a7db3ac..33dc004 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,7 +45,7 @@
         "nodemon": "^2.0.12",
         "prettier": "^2.8.0",
         "ts-jest": "^27.0.4",
-        "typescript": "^5.5.4"
+        "typescript": "4.3.5"
       },
       "engines": {
         "node": ">=10.21.0 <11"
@@ -12006,16 +12006,16 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
-      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
+      "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/unbox-primitive": {
diff --git a/package.json b/package.json
index 220b6a1..1dbb959 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "nodemon": "^2.0.12",
     "prettier": "^2.8.0",
     "ts-jest": "^27.0.4",
-    "typescript": "^4.3.5"
+    "typescript": "4.3.5"
   },
   "dependencies": {
     "@types/color-convert": "^2.0.0",

From 71c1c289ae818ae0f09e7dd33f88394343060025 Mon Sep 17 00:00:00 2001
From: Sacha Bron <me@sachabron.ch>
Date: Mon, 19 Aug 2024 01:41:56 +0200
Subject: [PATCH 8/9] remove console log

---
 client/src/views/LampPage.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/views/LampPage.vue b/client/src/views/LampPage.vue
index 3c1b94b..68f0316 100644
--- a/client/src/views/LampPage.vue
+++ b/client/src/views/LampPage.vue
@@ -137,7 +137,6 @@ function onNewAnimation() {
             characteristics.array.push({ type: o.type, value: o.currentCharacteristicValue });
             break;
           case "color":
-            console.log(i, { type: o.type, value: o.currentCharacteristicValue });
             characteristics.array.push({ type: o.type, value: o.currentCharacteristicValue });
             break;
         }

From 8b386722b56f9db5d13478ba85dc0daa0cad6afb Mon Sep 17 00:00:00 2001
From: Sacha Bron <me@sachabron.ch>
Date: Mon, 19 Aug 2024 01:55:25 +0200
Subject: [PATCH 9/9] Fix concurrency issue when posting characteristics and
 animation name

---
 client/src/views/LampPage.vue |  7 +++----
 server/lamp/index.ts          | 12 ++++++++----
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/client/src/views/LampPage.vue b/client/src/views/LampPage.vue
index 68f0316..50dd749 100644
--- a/client/src/views/LampPage.vue
+++ b/client/src/views/LampPage.vue
@@ -145,11 +145,10 @@ function onNewAnimation() {
 }
 
 function applyAnimation() {
-  axiosInstance.post("/lamp/animation", {
-    animation: currentConfig.selectedAnimation,
+  axiosInstance.post("/lamp/characteristics", {
+    characteristics: characteristics.array,
+    animation: currentConfig.selectedAnimation
   });
-
-  axiosInstance.post("/lamp/characteristics", characteristics.array);
 }
 
 function onBrightnessChange(brightness: number) {
diff --git a/server/lamp/index.ts b/server/lamp/index.ts
index eec8bc0..db01efc 100644
--- a/server/lamp/index.ts
+++ b/server/lamp/index.ts
@@ -117,7 +117,7 @@ export function initLamp() {
   });
 
   lamp.post("/characteristics", (req, res) => {
-    const characteristics: Characteristic[] = req.body;
+    const { characteristics, animation }: { characteristics: Characteristic[], animation: string } = req.body;
     characteristics.forEach((c) => {
       if (c.type === "color") {
         if (c.value.type === "static") {
@@ -132,10 +132,11 @@ export function initLamp() {
         }
       }
     });
-    currentCharacteristics[currentAnimation] = characteristics;
+
+    currentCharacteristics[animation] = characteristics;
 
     startLamp();
-    res.send("OK");
+    changeAnimation(animation, res);
   });
 
   lamp.get("/animation", (req, res) => {
@@ -144,7 +145,10 @@ export function initLamp() {
 
   lamp.post("/animation", (req, res) => {
     const animation: string = req.body.animation;
+    changeAnimation(animation, res);
+  });
 
+  function changeAnimation(animation: string, res: express.Response) {
     if (animation.toLowerCase() === "off") {
       lampShouldStop = true;
       res.send("OK");
@@ -159,7 +163,7 @@ export function initLamp() {
     currentAnimation = animation;
     startLamp();
     res.send("OK");
-  });
+  }
 
   lamp.get("/brightness", (req, res) => {
     res.send({ brightness: display.brightness });