Updated stores to have last http_status and configured the left sideb…

…ar not to show the controller selection if the controllersStore http_status is 404 (thus the controller does not support the /hosts api)

src/layouts/RgbwwLayout.vue

@@ -79,6 +79,7 @@
         bordered
       >
         <q-select
+          v-if="controllers.status === storeStatus.READY"
           v-model="controllers.currentController"
           filled
           :options="controllers.data"

src/services/initializeStores.js

@@ -24,7 +24,7 @@ export default async function initializeStores() {
     webSocket.connect(url);
 
     try {
-      await controllers.fetchData();
+      //await controllers.fetchData();
       await colorStore.fetchData();
       await configStore.fetchData();
       await infoStore.fetchData();

src/stores/colorDataStore.js

@@ -12,6 +12,7 @@ export const colorDataStore = defineStore({
       hsv: { h: 0, s: 0, v: 0, ct: 0 },
     },
     status: storeStatus.LOADING,
+    http_response_status: null,
     change_by: "load",
   }),
   actions: {

src/stores/configDataStore.js

@@ -7,6 +7,7 @@ export const configDataStore = defineStore({
   id: "configDataStore",
   state: () => ({
     status: storeStatus.LOADING,
+    http_response_status: null,
     data: {
       color: {
         color_mode: 0,

src/stores/controllersStore.js

@@ -8,6 +8,7 @@ export const controllersStore = defineStore({
   state: () => ({
     status: storeStatus.LOADING,
     currentController: localhost,
+    http_response_status: null,
     data: [localhost],
   }),
 
@@ -28,11 +29,11 @@ export const controllersStore = defineStore({
             };
           }); // Removing leading and trailing whitespaces from the IP address
         this.status = storeStatus.READY;
-        console.log("hosts data fetched: ", JSON.stringify(this.data));
+        console.log("controllers data fetched: ", JSON.stringify(this.data));
       } catch (error) {
         this.status = storeStatus.ERROR;
         this.error = error;
-        console.error("Error fetching hosts data:", error);
+        console.error("Error fetching controllers data:", error);
       }
     },
 

src/stores/infoDataStore.js

@@ -7,6 +7,7 @@ export const infoDataStore = defineStore({
   state: () => ({
     data: null,
     status: storeStatus.LOADING,
+    http_response_status: null,
   }),
   actions: {
     async fetchData() {

src/stores/presetDataStore.js

@@ -11,6 +11,7 @@ export const presetDataStore = defineStore({
       presets: [],
     },
     status: storeStatus.LOADING,
+    http_response_status: null,
   }),
 
   actions: {

src/stores/storeConstants.js

@@ -2,7 +2,7 @@ export const localhost = {
   hostname: "localhost",
   ip_address:
     process.env.NODE_ENV === "development"
-      ? "led-so1.fritz.box"
+      ? "192.168.29.101"
       : window.location.hostname,
 };
 

src/stores/storeHelpers.js

@@ -1,10 +1,5 @@
 import { controllersStore } from "./controllersStore";
-import {
-  // maxRetries,
-  retryDelay,
-  // localhost,
-  // storeStatus,
-} from "./storeConstants";
+import { retryDelay } from "./storeConstants";
 
 export function safeStringify(obj) {
   const cache = new Set();
@@ -26,12 +21,15 @@ export async function fetchApi(endpoint, retryCount = 0) {
   const maxRetries = 10;
   let error = null;
   let jsonData = null;
+  let status = null;
 
   try {
     console.log(endpoint, " start fetching data");
     const response = await fetch(
       `http://${controllers.currentController["ip_address"]}/${endpoint}`,
     );
+    status = response.status;
+
     if (response.status === 429 && retryCount < maxRetries) {
       // Too many requests, retry after a delay
       console.log("429 error", response.status, response.statusText);
@@ -46,11 +44,19 @@ export async function fetchApi(endpoint, retryCount = 0) {
           retryDelay * 2 ** retryCount,
         ),
       );
+    } else if (response.status === 404) {
+      // this endpoint does not exist, bail out without retry
+      console.log("404 error", response.status, response.statusText);
+      return {
+        jsonData,
+        error: { status: response.status, statusText: response.statusText },
+        status,
+      };
     }
     jsonData = await response.json();
     console.log(endpoint, " data fetched: ", JSON.stringify(jsonData));
   } catch (err) {
-    console.error("Error fetching color data:", err);
+    console.error("Error fetching data:", err);
     error = err;
     if (retryCount < maxRetries) {
       return new Promise((resolve) =>
@@ -62,5 +68,5 @@ export async function fetchApi(endpoint, retryCount = 0) {
     }
   }
 
-  return { jsonData, error };
+  return { jsonData, error, status };
 }