writing settings works

Author: freasy

.nvmrc

@@ -1 +1 @@
-v20.10.0
+v20.11.1

app.vue

@@ -7,19 +7,6 @@
     <div v-else>
       No WebSerial
     </div>
-    <footer class="absolute bottom-0 w-full bg-gray-800">
-      <div class="grid grid-cols-3 leading-loose">
-        <div class="text-center">
-          AM32 Configurator
-        </div>
-        <div class="text-center">
-          powered by Nuxt and Netlify
-        </div>
-        <div class="text-center">
-          v0.0.1
-        </div>
-      </div>
-    </footer>
     <UNotifications />
   </div>
 </template>

bun.lockb

@@ -40,7 +40,7 @@
             <UButton size="xs" @click="connectToEsc">
               <UIcon name="i-material-symbols-find-in-page-outline" />
             </UButton>
-            <UButton color="blue" size="xs" :disabled="!isAnySettingsDirty">
+            <UButton color="blue" size="xs" :disabled="!isAnySettingsDirty" @click="writeConfig">
               <UIcon name="i-material-symbols-save" />
             </UButton>
           </div>
@@ -233,6 +233,17 @@ const connectToEsc = async () => {
     }
 };
 
+const writeConfig = async () => {
+    if (!serialStore.isFourWay) {
+        throw new Error('No 4way connection found');
+    }
+
+    for (let i = 0; i < escStore.count; ++i) {
+        const result = await FourWay.getInstance().writeSettings(i, escStore.escInfo[i]);
+        console.log(result);
+    }
+};
+
 const disconnectFromDevice = async () => {
     if (serialStore.deviceHandles.port) {
         if (serialStore.isFourWay) {

components/SerialDevice.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="relative">
+  <div class="relative" :class="{
+    'before:content-[\'\'] before:absolute before:inset-0 blur-[2px]': isDisabled
+  }">
     <UFormGroup>
       <template #label>
         <div class="flex items-center gap-1 mb-1">

components/SettingField.vue

@@ -6,11 +6,11 @@
     <div class="flex">
       <div v-if="switches.length > 0" class="p-4">
         <div v-for="{ field, name } of switches" :key="field">
-          <UCheckbox :label="name" :value="model(field).value" @update:model-value="model(field).value = $event" />
+          <UCheckbox :label="name" v-model="model(field).value"/>
         </div>
       </div>
       <div class="flex-grow grid gap-4 p-4" :class="`grid-cols-${cols}`">
-        <slot />
+        <slot></slot>
       </div>
     </div>
   </div>
@@ -41,7 +41,8 @@ withDefaults(defineProps<SettingFieldGroupProps>(), {
 
 const model = (field: EepromLayoutKeys) => computed({
     get: () => {
-        return escStore.escInfo[0].settings[field];
+        console.log(field, escStore.escInfo[0].settings[field] === 1);
+        return escStore.escInfo[0].settings[field] === 1;
     },
     set: (_val) => {
         emits('change', {

components/SettingFieldGroup.vue

@@ -1,24 +1,43 @@
 <template>
-  <div class="grid grid-cols-12 text-white ">
-    <div class="col-span-2 flex justify-center items-center">
-      <svgo-logo-full class="text-white text-[150px]" />
-    </div>
-    <div class="col-span-8 h-[200px] max-h-[200px]">
-      <div class="h-full font-bold text-3xl text-red-800 flex flex-col">
-        <div v-if="logStore.entries.length === 0">
-          AlkaMotors
+  <DashboardLayout>
+    <UDashboardPanel>
+      <UDashboardNavbar class="grid grid-cols-12 text-white ">
+        <div class="col-span-2 flex justify-center items-center">
+          <svgo-logo-full class="text-white text-[150px]" />
         </div>
+        <div class="col-span-8 h-[200px] max-h-[200px]">
+          <div class="h-full font-bold text-3xl text-red-800 flex flex-col">
+            <div v-if="logStore.entries.length === 0">
+              AlkaMotors
+            </div>
 
-        <Log v-else class="h-full overflow-auto" />
-      </div>
-    </div>
-    <div v-if="serialStore.hasSerial" class="col-span-2">
-      <SerialDevice />
-    </div>
-  </div>
-  <div class="h-full">
+            <Log v-else class="h-full overflow-auto" />
+          </div>
+        </div>
+        <div v-if="serialStore.hasSerial" class="col-span-2">
+          <SerialDevice />
+        </div>
+      </UDashboardNavbar>
+      <UFooter class="bg-gray-800">
+        <template #left>
+          <div class="text-center">
+            AM32 Configurator
+          </div>
+        </template>
+        <template>
+          <div class="text-center">
+            powered by Nuxt and Netlify
+          </div>
+        </template>
+        <template #right>
+          <div class="text-center">
+            v0.0.1
+          </div>
+        </template>
+      </UFooter>
+    </UDashboardPanel>
     <slot />
-  </div>
+  </DashboardLayout>
 </template>
 <script setup lang="ts">
 const serialStore = useSerialStore();