5252 </div>
5353 <button
5454 class="d-inline-block mt-15"
55- :class="isEnabled ? 'stop' : 'start'"
55+ :class="[ isEnabled ? 'stop' : 'start', isDisabled ? 'disabled' : ''] "
5656 @click="changeStatus()"
5757 >
5858 <img v-if="isEnabled" class="ml-5" src="../assets/icons/stop.svg" height="20" />
@@ -68,7 +68,7 @@ export default {
6868</script>
6969
7070<script lang="ts" setup>
71- import { onMounted, ref } from 'vue';
71+ import { Ref, computed, onMounted, ref } from 'vue';
7272import { convertHHMMToSeconds, convertSecondsToHHMM } from '../utils/converter';
7373import { useI18n } from 'vue-i18n';
7474import { injecStorage } from '../storage/inject-storage';
@@ -105,6 +105,9 @@ const isEnabled = ref<boolean>();
105105const audioAfterWork = ref<PomodoroSounds>();
106106const audioAfterRest = ref<PomodoroSounds>();
107107const audioAfterFinished = ref<PomodoroSounds>();
108+ const isDisabled = computed(
109+ () => frequency.value <= 0 || timeIsEmpty(workTime) || timeIsEmpty(restTime),
110+ );
108111
109112onMounted(async () => {
110113 isEnabled.value = await settingsStorage.getValue(
@@ -144,6 +147,10 @@ onMounted(async () => {
144147 );
145148});
146149
150+ function timeIsEmpty(time: Ref<Time | undefined>) {
151+ return time.value == undefined || (time.value.hours == 0 && time.value.minutes == 0);
152+ }
153+
147154async function changeStatus() {
148155 await settingsStorage.saveValue(StorageParams.IS_POMODORO_ENABLED, !isEnabled.value);
149156 await settingsStorage.saveValue(
0 commit comments