modularized all cards in ColorSettings

pljakobs · Dec 15, 2024 · 979ed3f · 979ed3f
1 parent 2091905
commit 979ed3f
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 8 deletions.
diff --git a/src/components/ColorModelCard.vue b/src/components/ColorModelCard.vue
@@ -8,6 +8,7 @@
           label="Color Model"
           style="width: 200px"
           dropdown-icon="img:icons/arrow_drop_down.svg"
+          @update:model-value="emitColorModel"
         >
           <template #dropdown-icon>
             <img
@@ -45,7 +46,8 @@ export default {
     MyCard,
     ColorSlider,
   },
-  setup() {
+  emits: ["update:colorModel"],
+  setup(props, { emit }) {
     const configData = configDataStore();
 
     const colorModel = ref("");
@@ -108,17 +110,18 @@ export default {
       configData.updateData(model, value);
     };
 
-    const updateColorModel = (newColorModel) => {
+    const emitColorModel = (newColorModel) => {
       const modelIndex = colorOptions.value.indexOf(newColorModel);
-      configData.updateData("color.color_mode", modelIndex);
+      configData.updateData("color.outputmode", modelIndex);
       colorModel.value = newColorModel; // Ensure the ref is updated
+      emit("update:colorModel", modelIndex);
     };
 
     watch(colorModel, (newColorModel, oldColorModel) => {
       console.log(
         `Selected color model changed from ${oldColorModel} to ${newColorModel}`,
       );
-      updateColorModel(newColorModel);
+      emitColorModel(newColorModel);
     });
 
     // Initialize values from configDataStore when the component is mounted
@@ -143,7 +146,7 @@ export default {
       colorSliders,
       getColorSliderValue,
       updateColorSlider,
-      updateColorModel,
+      emitColorModel,
     };
   },
 };

diff --git a/src/components/WhiteBalanceCard.vue b/src/components/WhiteBalanceCard.vue
@@ -1,6 +1,7 @@
 <template>
   <MyCard icon="img:icons/exposure_outlined.svg" title="White balance">
     <q-card-section>
+      select color temperature
       <ColorSlider
         v-for="colorTemperature in colorTemperatures"
         :key="colorTemperature.label"

diff --git a/src/pages/ColorSettings.vue b/src/pages/ColorSettings.vue
@@ -1,7 +1,7 @@
 <template>
   <TransitionModeCard />
-  <ColorModelCard />
-  <WhiteBalanceCard v-if="colorMode.value === 3" />
+  <ColorModelCard @update:color-model="handleColorModelUpdate" />
+  <WhiteBalanceCard v-if="colorMode === 3" />
 </template>
 
 <script>
@@ -22,26 +22,42 @@ export default {
 
     const colorMode = ref(configData.data.color.color_mode || 0);
 
+    const handleColorModelUpdate = (newColorModel) => {
+      console.log(
+        "handleColorModelUpdate triggered: colorModel changed to ",
+        newColorModel,
+      );
+      colorMode.value = newColorModel;
+    };
+
     watch(
       () => configData.data.color.color_mode,
       (newMode) => {
         console.log("Watcher triggered: colorMode changed to ", newMode);
         colorMode.value = newMode;
+        console.log(
+          "%cChanged colorMode: " + colorMode.value,
+          "color: red; font-weight: bold;",
+        );
       },
       { deep: true },
     );
 
     onMounted(() => {
       // Initialize color mode
       colorMode.value = configData.data.color.color_mode || 0;
-      console.log("Mounted ColorSettings with colorMode:", colorMode.value);
+      console.log(
+        "%cMounted ColorSettings with colorMode: " + colorMode.value,
+        "color: green; font-weight: bold;",
+      );
     });
 
     return {
       colorMode,
       TransitionModeCard,
       ColorModelCard,
       WhiteBalanceCard,
+      handleColorModelUpdate,
     };
   },
 };

diff --git a/src/stores/configDataStore.js b/src/stores/configDataStore.js
@@ -7,6 +7,13 @@ export const configDataStore = defineStore({
   id: "configDataStore",
   state: () => ({
     status: storeStatus.LOADING,
+    data: {
+      color: {
+        color_mode: 0,
+        // other properties...
+      },
+      // other properties...
+    },
   }),
   actions: {
     async fetchData() {
@@ -37,6 +44,8 @@ export const configDataStore = defineStore({
         currentObject = currentObject[fieldParts[i]];
       }
 
+      currentObject[fieldParts[fieldParts.length - 1]] = value;
+
       const minimalUpdate = {};
       let tempObject = minimalUpdate;
       currentObject = this.data;