Use runes and save config in localStorage
This commit is contained in:
parent
013089da11
commit
2603c57018
|
|
@ -1,48 +1,54 @@
|
|||
<script lang="ts">
|
||||
import { onDestroy, onMount } from "svelte"
|
||||
import { writable } from "svelte/store"
|
||||
import type { Writable } from "svelte/store"
|
||||
import { browser } from "$app/environment"
|
||||
|
||||
const BREAK_INTERVAL_STORE: Writable<number> = writable(20)
|
||||
const MINI_BREAK_DURATION_STORE: Writable<number> = writable(20)
|
||||
const LONG_BREAK_DURATION_STORE: Writable<number> = writable(5)
|
||||
const SOUND_ENABLED: Writable<boolean> = writable(true)
|
||||
const NOTIFICATIONS_ENABLED: Writable<boolean> = writable(true)
|
||||
let BREAK_INTERVAL_STORE = $state(browser ? (localStorage.getItem('breakInterval') || 20) : 20)
|
||||
let MINI_BREAK_DURATION_STORE = $state(browser ? (localStorage.getItem('miniBreakDuration') || 20) : 20)
|
||||
let LONG_BREAK_DURATION_STORE = $state(browser ? (localStorage.getItem('longBreakDuration') || 5) : 5)
|
||||
let SOUND_ENABLED = $state(browser ? ((localStorage.getItem('soundEnabled') || 'true') === 'true') : true)
|
||||
let NOTIFICATIONS_ENABLED = $state(browser ? ((localStorage.getItem('notificationsEnabled') || 'true') === 'true') : true)
|
||||
|
||||
let BREAK_INTERVAL: number
|
||||
let MINI_BREAK_DURATION: number
|
||||
let LONG_BREAK_DURATION: number
|
||||
let SOUND_ENABLED_STATE: boolean
|
||||
let NOTIFICATIONS_ENABLED_STATE: boolean
|
||||
|
||||
let timer: number | null = null
|
||||
|
||||
const state: Writable<string> = writable("Ready")
|
||||
const timeLeftDisplay: Writable<string> = writable("")
|
||||
const timeLeft: Writable<number> = writable($BREAK_INTERVAL_STORE)
|
||||
let timerState = $state("Ready")
|
||||
let timeLeftDisplay = $state("")
|
||||
let timeLeft = $state(BREAK_INTERVAL_STORE)
|
||||
|
||||
BREAK_INTERVAL_STORE.subscribe((value) => {
|
||||
BREAK_INTERVAL = value * 60 * 1000
|
||||
timeLeft.set(BREAK_INTERVAL)
|
||||
timeLeftDisplay.set(formatTime(BREAK_INTERVAL))
|
||||
$effect(() => {
|
||||
BREAK_INTERVAL = BREAK_INTERVAL_STORE * 60 * 1000
|
||||
timeLeft = BREAK_INTERVAL
|
||||
timeLeftDisplay = formatTime(BREAK_INTERVAL)
|
||||
localStorage.setItem("breakInterval", BREAK_INTERVAL_STORE)
|
||||
})
|
||||
|
||||
$effect(() => {
|
||||
MINI_BREAK_DURATION = MINI_BREAK_DURATION_STORE * 1000
|
||||
localStorage.setItem('miniBreakDuration', MINI_BREAK_DURATION_STORE)
|
||||
})
|
||||
|
||||
$effect(() => {
|
||||
LONG_BREAK_DURATION = LONG_BREAK_DURATION_STORE * 60 * 1000
|
||||
localStorage.setItem('longBreakDuration', LONG_BREAK_DURATION_STORE)
|
||||
})
|
||||
|
||||
$effect(() => {
|
||||
localStorage.setItem('soundEnabled', SOUND_ENABLED)
|
||||
})
|
||||
|
||||
$effect(() => {
|
||||
localStorage.setItem('notificationsEnabled', NOTIFICATIONS_ENABLED)
|
||||
})
|
||||
MINI_BREAK_DURATION_STORE.subscribe(
|
||||
(value) => (MINI_BREAK_DURATION = value * 1000)
|
||||
)
|
||||
LONG_BREAK_DURATION_STORE.subscribe(
|
||||
(value) => (LONG_BREAK_DURATION = value * 60 * 1000)
|
||||
)
|
||||
SOUND_ENABLED.subscribe((value) => (SOUND_ENABLED_STATE = value))
|
||||
NOTIFICATIONS_ENABLED.subscribe(
|
||||
(value) => (NOTIFICATIONS_ENABLED_STATE = value)
|
||||
)
|
||||
|
||||
let miniBreakCount = 0
|
||||
|
||||
let audio: HTMLAudioElement | null = null
|
||||
|
||||
const playSound = () => {
|
||||
if (SOUND_ENABLED_STATE && audio) {
|
||||
if (SOUND_ENABLED && audio) {
|
||||
audio.pause()
|
||||
audio.src = "/sounds/Bells.mp3"
|
||||
audio.volume = 0.4
|
||||
|
|
@ -51,7 +57,7 @@
|
|||
}
|
||||
|
||||
const showNotification = (title: string, options: NotificationOptions) => {
|
||||
if (NOTIFICATIONS_ENABLED_STATE) {
|
||||
if (NOTIFICATIONS_ENABLED) {
|
||||
if (Notification.permission === "granted") {
|
||||
new Notification(title, options)
|
||||
} else if (Notification.permission !== "denied") {
|
||||
|
|
@ -68,39 +74,42 @@
|
|||
if (timer) clearInterval(timer)
|
||||
|
||||
timer = setInterval(() => {
|
||||
timeLeft.update((currentTimeLeft) => {
|
||||
const newTimeLeft = currentTimeLeft - 1000
|
||||
if (newTimeLeft <= 0) {
|
||||
if ($state !== "Ready") {
|
||||
state.set("Ready")
|
||||
miniBreakCount++
|
||||
timeLeftDisplay.set(formatTime(BREAK_INTERVAL))
|
||||
showNotification("Ready", { body: "Continue working!" })
|
||||
playSound()
|
||||
return BREAK_INTERVAL
|
||||
}
|
||||
if (miniBreakCount === 3) {
|
||||
state.set("Long Break")
|
||||
miniBreakCount = 0
|
||||
timeLeftDisplay.set(formatTime(LONG_BREAK_DURATION))
|
||||
showNotification("Long Break", {
|
||||
body: `Take a ${LONG_BREAK_DURATION / (60 * 1000)}-second break now!`,
|
||||
})
|
||||
playSound()
|
||||
return LONG_BREAK_DURATION
|
||||
} else {
|
||||
state.set("Mini Break")
|
||||
timeLeftDisplay.set(formatTime(MINI_BREAK_DURATION))
|
||||
showNotification("Mini Break", {
|
||||
body: `Take a ${MINI_BREAK_DURATION / 1000}-second break now!`,
|
||||
})
|
||||
playSound()
|
||||
return MINI_BREAK_DURATION
|
||||
}
|
||||
const newTimeLeft = timeLeft - 1000
|
||||
if (newTimeLeft <= 0) {
|
||||
console.log(timerState)
|
||||
if (timerState !== "Ready") {
|
||||
timerState = "Ready"
|
||||
miniBreakCount++
|
||||
timeLeftDisplay = formatTime(BREAK_INTERVAL)
|
||||
showNotification("Ready", { body: "Continue working!" })
|
||||
playSound()
|
||||
timeLeft = BREAK_INTERVAL
|
||||
return
|
||||
}
|
||||
timeLeftDisplay.set(formatTime(newTimeLeft))
|
||||
return newTimeLeft
|
||||
})
|
||||
if (miniBreakCount === 3) {
|
||||
timerState = "Long Break"
|
||||
miniBreakCount = 0
|
||||
timeLeftDisplay = formatTime(LONG_BREAK_DURATION)
|
||||
showNotification("Long Break", {
|
||||
body: `Take a ${LONG_BREAK_DURATION / (60 * 1000)}-second break now!`,
|
||||
})
|
||||
playSound()
|
||||
timeLeft = LONG_BREAK_DURATION
|
||||
return
|
||||
} else {
|
||||
timerState = "Mini Break"
|
||||
timeLeftDisplay = formatTime(MINI_BREAK_DURATION)
|
||||
showNotification("Mini Break", {
|
||||
body: `Take a ${MINI_BREAK_DURATION / 1000}-second break now!`,
|
||||
})
|
||||
playSound()
|
||||
timeLeft = MINI_BREAK_DURATION
|
||||
return
|
||||
}
|
||||
}
|
||||
timeLeftDisplay = formatTime(newTimeLeft)
|
||||
timeLeft = newTimeLeft
|
||||
console.log(timeLeft)
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
|
|
@ -115,12 +124,12 @@
|
|||
})
|
||||
|
||||
const skipBreak = () => {
|
||||
if ($state === "Ready") {
|
||||
if (timerState === "Ready") {
|
||||
return
|
||||
}
|
||||
state.set("Ready")
|
||||
timeLeft.set(BREAK_INTERVAL)
|
||||
timeLeftDisplay.set(formatTime(BREAK_INTERVAL))
|
||||
timerState = "Ready"
|
||||
timeLeft = BREAK_INTERVAL
|
||||
timeLeftDisplay = formatTime(BREAK_INTERVAL)
|
||||
}
|
||||
|
||||
function formatTime(milliseconds: number) {
|
||||
|
|
@ -133,59 +142,64 @@
|
|||
</script>
|
||||
|
||||
<main>
|
||||
|
||||
{#if !browser}
|
||||
<div class="loading-spinner"/>
|
||||
{:else}
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="settings">
|
||||
<h1>Prevent CVS</h1>
|
||||
|
||||
<div class="setting">
|
||||
<label for="break-interval"
|
||||
>Break interval: {BREAK_INTERVAL / (60 * 1000)} minutes</label
|
||||
>Break interval: {BREAK_INTERVAL_STORE} minutes</label
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="60"
|
||||
step="1"
|
||||
bind:value={$BREAK_INTERVAL_STORE}
|
||||
bind:value={BREAK_INTERVAL_STORE}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="setting">
|
||||
<label for="mini-break-duration"
|
||||
>Mini break duration: {MINI_BREAK_DURATION / 1000} seconds</label
|
||||
>Mini break duration: {MINI_BREAK_DURATION_STORE} seconds</label
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
min="5"
|
||||
max="60"
|
||||
step="1"
|
||||
bind:value={$MINI_BREAK_DURATION_STORE}
|
||||
bind:value={MINI_BREAK_DURATION_STORE}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="setting">
|
||||
<label for="long-break-duration"
|
||||
>Long break duration: {LONG_BREAK_DURATION / (60 * 1000)} minutes</label
|
||||
>Long break duration: {LONG_BREAK_DURATION_STORE} minutes</label
|
||||
>
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="30"
|
||||
step="1"
|
||||
bind:value={$LONG_BREAK_DURATION_STORE}
|
||||
bind:value={LONG_BREAK_DURATION_STORE}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="setting">
|
||||
<label>
|
||||
<input type="checkbox" bind:checked={$SOUND_ENABLED} />
|
||||
<input type="checkbox" bind:checked={SOUND_ENABLED} />
|
||||
Sound
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="setting">
|
||||
<label>
|
||||
<input type="checkbox" bind:checked={$NOTIFICATIONS_ENABLED} />
|
||||
<input type="checkbox" bind:checked={NOTIFICATIONS_ENABLED} />
|
||||
Notifications
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -193,18 +207,22 @@
|
|||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h1>Prevent CVS</h1>
|
||||
|
||||
<div class="timer">
|
||||
{#if $state !== "Ready"}
|
||||
{#if timerState !== "Ready"}
|
||||
<div class="timer-content">
|
||||
<p class="state">{$state}</p>
|
||||
<p>Time left until end of break: {$timeLeftDisplay}</p>
|
||||
<p class="state">{timerState}</p>
|
||||
<p>Time left until end of break: {timeLeftDisplay}</p>
|
||||
<button on:click={skipBreak}>Skip break</button>
|
||||
</div>
|
||||
{:else}
|
||||
<p>Time left until break: {$timeLeftDisplay}</p>
|
||||
<p>Time left until break: {timeLeftDisplay}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
<style lang="postcss">
|
||||
|
|
@ -255,4 +273,26 @@
|
|||
.state {
|
||||
@apply text-2xl font-semibold text-red-500;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
border: 4px solid rgba(0, 0, 0, 0.1);
|
||||
border-left-color: #3498db;
|
||||
border-radius: 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
animation: spin 1s linear infinite;
|
||||
@apply max-w-xl;
|
||||
@apply mx-auto;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue