From 276de15ed20c6959e7e2e2a7369ce0d2fcd532a6 Mon Sep 17 00:00:00 2001
From: CoreNion <coreinion@gmail.com>
Date: Tue, 12 Dec 2023 15:05:20 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=81=E3=83=A3=E3=82=A4=E3=83=A0/=E4=BA=88?=
 =?UTF-8?q?=E9=88=B4=E3=81=AE=E9=B3=B4=E5=8B=95=E7=8A=B6=E6=85=8B=E3=82=92?=
 =?UTF-8?q?=E4=BF=9D=E5=AD=98=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/settings.vue      | 42 ++++++++++++++++++++++++++++++------
 components/timer-setting.vue |  8 -------
 2 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/components/settings.vue b/components/settings.vue
index 236c0c1..bc3b8eb 100644
--- 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
index 1f11033..9ba7f9f 100644
--- 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>
\ No newline at end of file