From 4f6a544229d2e25e9ccc68c290fcece949c94cc1 Mon Sep 17 00:00:00 2001
From: Misaki Kasumi <misakikasumi@outlook.com>
Date: Sat, 2 Dec 2023 00:26:08 +0800
Subject: [PATCH] check on first write

---
 src/components/FeatureSlider.vue | 28 ++++++++---------
 src/components/MonitorItem.vue   | 11 ++++---
 src/monitor.ts                   | 52 ++++++++++++++++++++++++--------
 src/style.global.sass            |  8 +++--
 src/style.module.sass            |  9 ++++++
 5 files changed, 75 insertions(+), 33 deletions(-)

diff --git a/src/components/FeatureSlider.vue b/src/components/FeatureSlider.vue
index 312de38..58dbdfd 100644
--- a/src/components/FeatureSlider.vue
+++ b/src/components/FeatureSlider.vue
@@ -17,7 +17,7 @@ export default defineComponent({
             type: String,
             required: true,
         },
-        feature: {
+        featureName: {
             type: String,
             required: true,
         },
@@ -28,23 +28,20 @@ export default defineComponent({
         };
     },
     computed: {
-        featureObject() {
-            return monitorManager.getFeature(this.monitorId, this.feature);
+        feature() {
+            return monitorManager.getFeature(this.monitorId, this.featureName);
         },
         readonly() {
-            return this.featureObject.readonly;
-        },
-        featureValue() {
-            return this.featureObject.value;
+            return this.feature.readonly;
         },
         current() {
-            return this.featureValue.current;
+            return this.feature.value.current;
         },
         maximum() {
-            return this.featureValue.maximum;
+            return this.feature.value.maximum;
         },
         icon() {
-            return (iconMap as { [key: string]: string })[this.feature];
+            return (iconMap as { [key: string]: string })[this.featureName];
         },
     },
     methods: {
@@ -53,10 +50,13 @@ export default defineComponent({
             const target = e.target! as HTMLInputElement;
             if (target.validity.valid) {
                 const value = Number(target.value);
-                monitorManager.updateFeature(this.monitorId, this.feature, value);
+                monitorManager.updateFeature(this.monitorId, this.featureName, value);
             }
         },
         handleWheel(event: Event) {
+            if (this.readonly) {
+                return;
+            }
             const e = event as WheelEvent;
             const target = e.currentTarget! as HTMLInputElement;
             if (e.deltaMode == WheelEvent.DOM_DELTA_PIXEL) {
@@ -64,7 +64,7 @@ export default defineComponent({
                 const current = Number(target.value);
                 monitorManager.updateFeature(
                     this.monitorId,
-                    this.feature,
+                    this.featureName,
                     Math.max(0, Math.min(this.maximum, Math.round(current + offset * 0.01))),
                 );
             }
@@ -74,8 +74,8 @@ export default defineComponent({
 </script>
 
 <template>
-    <label :class="[sheet.flex, sheet.cozyLine]">
-        <span :class="sheet.bigIcon" :aria-label="feature">
+    <label :class="[sheet.flex, sheet.cozyLine, { [sheet.inactive]: readonly }]">
+        <span :class="sheet.bigIcon" :aria-label="featureName">
             {{ icon }}
         </span>
         <input
diff --git a/src/components/MonitorItem.vue b/src/components/MonitorItem.vue
index 50a5f10..21378a2 100644
--- a/src/components/MonitorItem.vue
+++ b/src/components/MonitorItem.vue
@@ -54,7 +54,10 @@ export default defineComponent({
         >
             <div>
                 <span :class="sheet.bigIcon" aria-label="monitor">&#xE7F4;</span>
-                <span :class="sheet.titleFont" style="margin-inline-start: 0.15em">
+                <span
+                    :class="[sheet.titleFont, sheet.selectable]"
+                    style="margin-inline-start: 0.15em"
+                >
                     {{ name }}
                 </span>
             </div>
@@ -68,9 +71,9 @@ export default defineComponent({
             </button>
         </div>
         <ul :class="[sheet.resetSpacing, sheet.verticalFlex, sheet.stretchItems]">
-            <template v-for="{ name: feature, value } in monitor.features" :key="feature">
-                <li v-if="feature != 'powerstate' && value.maximum" :class="sheet.resetSpacing">
-                    <FeatureSlider :monitor-id="monitorId" :feature="feature" />
+            <template v-for="{ name: featureName, value } in monitor.features" :key="feature">
+                <li v-if="featureName != 'powerstate' && value.maximum" :class="sheet.resetSpacing">
+                    <FeatureSlider :monitor-id="monitorId" :feature-name="featureName" />
                 </li>
             </template>
         </ul>
diff --git a/src/monitor.ts b/src/monitor.ts
index 493464f..106438b 100644
--- a/src/monitor.ts
+++ b/src/monitor.ts
@@ -13,6 +13,7 @@ export interface Feature {
     value: Reply;
     syncing: boolean;
     readonly: boolean;
+    written: boolean;
 }
 
 export interface Monitor {
@@ -27,6 +28,8 @@ function timeout(millis: number): Promise<undefined> {
     });
 }
 
+const featureTestTime = 200;
+
 export class Manager {
     readonly monitors: DeepReadonly<Monitor[]> = reactive([]);
     private refreshing: boolean = false;
@@ -64,7 +67,6 @@ export class Manager {
         for (const monitor of monitors) {
             pool.push(
                 (async () => {
-                    const featureTestTime = 200;
                     const featureNames = monitor.features.length
                         ? monitor.features.map((feature) => feature.name)
                         : ["luminance", "contrast", "brightness", "volume", "powerstate"];
@@ -93,6 +95,7 @@ export class Manager {
                                     value,
                                     syncing: false,
                                     readonly: false,
+                                    written: false,
                                 });
                             }
                         } else if (idx != -1) {
@@ -136,8 +139,10 @@ export class Manager {
 
     updateFeature(id: string, name: string, value: number): void {
         const feature = this.getFeature(id, name) as Feature;
-        feature.value.current = value;
-        feature.syncing = true;
+        if (feature.value.current != value) {
+            feature.value.current = value;
+            feature.syncing = true;
+        }
     }
 }
 
@@ -153,15 +158,38 @@ watch(
                     for (const monitor of monitors) {
                         for (const feature of monitor.features) {
                             if (feature.syncing) {
-                                feature.syncing = false;
-                                invoke("set_monitor_feature", {
-                                    id: monitor.id,
-                                    feature: feature.name,
-                                    value: feature.value.current,
-                                }).catch(() => {
-                                    feature.readonly = true;
-                                    monitorManager.refresh();
-                                });
+                                (async () => {
+                                    try {
+                                        feature.syncing = false;
+                                        if (!feature.written) {
+                                            feature.readonly = true;
+                                        }
+                                        await invoke("set_monitor_feature", {
+                                            id: monitor.id,
+                                            feature: feature.name,
+                                            value: feature.value.current,
+                                        });
+                                        if (!feature.written) {
+                                            await timeout(featureTestTime);
+                                            const value = await invoke<Reply>(
+                                                "get_monitor_feature",
+                                                {
+                                                    id: monitor.id,
+                                                    feature: feature.name,
+                                                },
+                                            );
+                                            if (value.current == feature.value.current) {
+                                                feature.written = true;
+                                                feature.readonly = false;
+                                            } else {
+                                                feature.value = value;
+                                            }
+                                        }
+                                    } catch {
+                                        feature.readonly = true;
+                                        monitorManager.refresh();
+                                    }
+                                })();
                             }
                         }
                     }
diff --git a/src/style.global.sass b/src/style.global.sass
index 2f921be..5f4fb84 100644
--- a/src/style.global.sass
+++ b/src/style.global.sass
@@ -1,10 +1,8 @@
 :root
     font-family: "Segoe UI Variable Text", "Segoe UI"
     font-size: 14px
-    color: black
+    color: var(--foreground)
     user-select: none
-    @media screen and (prefers-color-scheme: dark)
-        color: white
     &[data-writing-mode=horizontal-tb]
         writing-mode: horizontal-tb
     &[data-writing-mode=vertical-lr]
@@ -16,3 +14,7 @@ body
     margin-block: 1.2rem
     margin-inline: 1rem
     overflow: hidden
+
+::selection
+    background: var(--accent)
+    color: white
diff --git a/src/style.module.sass b/src/style.module.sass
index 0417b02..75eee42 100644
--- a/src/style.module.sass
+++ b/src/style.module.sass
@@ -109,6 +109,9 @@
     @extend .resetInput
     margin: 0.15rem
 
+    &:disabled
+        pointer-events: none
+
     &::-webkit-slider-thumb
         @extend .resetInput
         box-sizing: content-box
@@ -136,3 +139,9 @@
         background: linear-gradient(to var(--slider-end), var(--slider-thumb-color), var(--slider-thumb-color) var(--slider-value), var(--slider-track-color) var(--slider-value), var(--slider-track-color))
         block-size: 0.3rem
         border-radius: 0.6rem
+
+.selectable
+    user-select: text
+
+.inactive
+    filter: grayscale(0.7) brightness(0.7)