チャイム/予鈴の鳴動状態を保存する

CoreNion · Dec 12, 2023 · 276de15 · 276de15
1 parent 40de488
commit 276de15
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 14 deletions.
diff --git a/components/settings.vue b/components/settings.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { isChimeEnabled } from '~/composables/states';
+
 const colorMode = useColorMode();
 
 // センサーのソース
@@ -10,10 +12,38 @@ const preChimeSourceState = preChimeSource();
 // タイマーのアラート音源
 const timerAlertSourceState = timerAlertSource();
 
-// チャイムの有効/無効
-const isChimeEnabledState = isChimeEnabled();
-// 予鈴の有効/無効
-const isPreChimeEnabledState = isPreChimeEnabled();
+const chimeComputed = computed<boolean>(
+  {
+    get() {
+      if (process.client) {
+        return JSON.parse(localStorage.getItem('isChimeEnabled') ?? 'false');
+      } else {
+        return false;
+      }
+    },
+    set(value) {
+      if (typeof localStorage !== 'undefined')
+        localStorage.setItem('isChimeEnabled', JSON.stringify(value));
+      isChimeEnabled().value = value;
+    }
+  }
+);
+const preChimeComputed = computed<boolean>(
+  {
+    get() {
+      if (typeof localStorage !== 'undefined') {
+        return JSON.parse(localStorage.getItem('isPreChimeEnabled') ?? 'false');
+      } else {
+        return false;
+      }
+    },
+    set(value) {
+      if (typeof localStorage !== 'undefined')
+        localStorage.setItem('isPreChimeEnabled', JSON.stringify(value));
+      isPreChimeEnabled().value = value;
+    }
+  }
+);
 
 const alertFileNameState = useState('alertFileName', () => 'デフォルトの音声');
 const chimeFileNameState = useState('chimeFileName', () => 'デフォルトの音声');
@@ -150,11 +180,11 @@ onMounted(() => {
 
         <label class="label cursor-pointer mt-4">
           <span class="label-text">チャイム鳴動状態</span>
-          <input type="checkbox" class="toggle toggle-secondary" v-model="isChimeEnabledState" />
+          <input type="checkbox" class="toggle toggle-secondary" v-model="chimeComputed" />
         </label>
         <label class="label cursor-pointer mt-4">
           <span class="label-text">予鈴鳴動状態</span>
-          <input type="checkbox" class="toggle toggle-secondary" v-model="isPreChimeEnabledState" />
+          <input type="checkbox" class="toggle toggle-secondary" v-model="preChimeComputed" />
         </label>
       </p>
     </div>

diff --git a/components/timer-setting.vue b/components/timer-setting.vue
@@ -11,9 +11,6 @@ const intervalState = interval();
 const isTimerActiveState = isTimerActive();
 const timerState = timer();
 
-// チャイムの有効/無効
-const isChimeEnabledState = isChimeEnabled();
-
 // タイマー設定用時間 (h:m:s)
 const timerSettingState: Ref<number[]> = useState('timerSetting', () => [0, 0, 0]);
 
@@ -119,11 +116,6 @@ function duration2ArrayTime(duration: duration.Duration) {
           "スタート" }}</button>
         <button class="btn btn-neutral" @click="resetTimer()">clear</button>
       </div>
-
-      <label class="label cursor-pointer">
-        <span class="label-text">チャイム機能</span>
-        <input type="checkbox" class="toggle toggle-secondary" v-model="isChimeEnabledState" />
-      </label>
     </div>
   </div>
 </template>