Initial commit
This commit is contained in:
Mindboost
298
pages/settings/timersettings.vue
Normal file
298
pages/settings/timersettings.vue
Normal file
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-lg-9 col-md-11 col-sm-12 col-xl-8">
|
||||
<h1 class="h3 fw-bold text-center py-3">
|
||||
Timer Settings
|
||||
</h1>
|
||||
<div class="timer__settings">
|
||||
<!-- Timer Settings -->
|
||||
<v-list class="px-2 px-md-16">
|
||||
<!-- Work Time -->
|
||||
<div class="slider">
|
||||
<input
|
||||
id="gain-control"
|
||||
v-model="timer().settings.timer.work"
|
||||
type="range"
|
||||
min="5"
|
||||
max="60"
|
||||
step="5"
|
||||
data-toggle="tooltip"
|
||||
data-placement="top"
|
||||
:title="tooltipTitle"
|
||||
@wheel.prevent="changeVolumeOnWheel"
|
||||
>
|
||||
<span
|
||||
class="slider-progress-bar"
|
||||
:style="{ width: `${volume * 100}%` }"
|
||||
/>
|
||||
</div>
|
||||
<!-- <v-list-item title="Work Sessions">
|
||||
<v-slider
|
||||
v-model="settings.timer.work"
|
||||
min="5"
|
||||
max="60"
|
||||
step="5"
|
||||
show-ticks
|
||||
thumb-label
|
||||
:color="timer().getCurrentColor"
|
||||
class="w-100"
|
||||
:ticks="sliderTicks.workTimer"
|
||||
:rules="rules.workRules"
|
||||
>
|
||||
<template #append>
|
||||
<v-text-field
|
||||
v-model="settings.timer.work"
|
||||
hide-details
|
||||
single-line
|
||||
density="compact"
|
||||
type="number"
|
||||
style="width: 70px"
|
||||
min="5"
|
||||
max="60"
|
||||
/>
|
||||
</template>
|
||||
</v-slider> -->
|
||||
<!-- </v-list-item> -->
|
||||
<!-- Breaks Sessions -->
|
||||
<v-list-item
|
||||
v-for="value, i in ['short-break', 'long-break']"
|
||||
:key="i"
|
||||
:title="timer().settings.timer[value].text"
|
||||
>
|
||||
<v-slider
|
||||
v-model="settings.timer[value]"
|
||||
min="0"
|
||||
max="60"
|
||||
step="5"
|
||||
show-ticks
|
||||
thumb-label
|
||||
:color="timer().getCurrentColor"
|
||||
class="w-100"
|
||||
:ticks="sliderTicks.breakTimers"
|
||||
:rules="rules.breakRules"
|
||||
>
|
||||
<template #append>
|
||||
<v-text-field
|
||||
v-model="settings.timer[value]"
|
||||
hide-details
|
||||
single-line
|
||||
density="compact"
|
||||
type="number"
|
||||
style="width: 70px"
|
||||
min="0"
|
||||
max="60"
|
||||
/>
|
||||
</template>
|
||||
</v-slider>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item
|
||||
title="Max Sessions"
|
||||
subtitle="The number of work sessions before a long break"
|
||||
>
|
||||
<v-slider
|
||||
v-model="settings.maxSessions"
|
||||
min="1"
|
||||
max="10"
|
||||
step="1"
|
||||
show-ticks
|
||||
thumb-label
|
||||
:color="timer().getCurrentColor"
|
||||
class="w-100"
|
||||
:ticks="sliderTicks.maxSessions"
|
||||
:rules="rules.maxSessionsRules"
|
||||
>
|
||||
<template #append>
|
||||
<v-text-field
|
||||
v-model="settings.maxSessions"
|
||||
hide-details
|
||||
single-line
|
||||
density="compact"
|
||||
type="number"
|
||||
style="width: 70px"
|
||||
min="1"
|
||||
max="10"
|
||||
/>
|
||||
</template>
|
||||
</v-slider>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-checkbox
|
||||
v-model="timer().settings.autoStart"
|
||||
:color="timer().getCurrentColor"
|
||||
label="Auto Start Sessions"
|
||||
true-icon="mdi-timer-play-outline"
|
||||
false-icon="mdi-timer-play-outline"
|
||||
/>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<!-- General Settings -->
|
||||
<v-list-subheader>General Settings</v-list-subheader>
|
||||
<v-list-item>
|
||||
<v-checkbox
|
||||
v-model="settings.notificationsEnabled"
|
||||
:color="timer().getCurrentColor"
|
||||
label="Notifications"
|
||||
true-icon="mdi-bell"
|
||||
false-icon="mdi-bell-off"
|
||||
/>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-checkbox
|
||||
v-model="timer().playSessionEndSound"
|
||||
:color="timer().getCurrentColor"
|
||||
label="Sounds"
|
||||
true-icon="mdi-volume-high"
|
||||
false-icon="mdi-volume-off"
|
||||
/>
|
||||
</v-list-item>
|
||||
<!-- <v-list-item>
|
||||
<v-checkbox
|
||||
v-model="app().showThemeToggle"
|
||||
:color="timer().getCurrentColor"
|
||||
label="Show Theme Toggle"
|
||||
true-icon="mdi-theme-light-dark"
|
||||
false-icon="mdi-theme-light-dark"
|
||||
/>
|
||||
</v-list-item> -->
|
||||
</v-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { useTimerStore as timer } from '~~/stores/timer'
|
||||
|
||||
export default {
|
||||
name: 'TimerSettings',
|
||||
setup () {
|
||||
const { t } = useI18n()
|
||||
const localePath = useLocalePath()
|
||||
|
||||
const sliderTicks = reactive({
|
||||
workTimer: {
|
||||
5: '5',
|
||||
60: '60'
|
||||
},
|
||||
breakTimers: {
|
||||
0: '0',
|
||||
60: '60'
|
||||
},
|
||||
maxSessions: {
|
||||
1: '1',
|
||||
10: '10'
|
||||
}
|
||||
})
|
||||
// only the settings that need validation
|
||||
const settings = reactive({
|
||||
timer: {
|
||||
work: 25,
|
||||
'short-break': 5,
|
||||
'long-break': 15
|
||||
},
|
||||
maxSessions: 4,
|
||||
notificationsEnabled: false
|
||||
})
|
||||
const state = reactive({
|
||||
dialog: false,
|
||||
snackbar: false
|
||||
})
|
||||
|
||||
// rules for validating inputs
|
||||
const rules = reactive({
|
||||
workRules: [
|
||||
(value) => {
|
||||
if (value >= 5 && value <= 60) { return true }
|
||||
|
||||
if (value <= 0) { return "Are you kidding me? if you don't wanna work then just go find something better to do than playing with my settings." }
|
||||
if (value < 5) { return 'Do you want to work for less than 5 mins?! You can do better.' }
|
||||
return "Don't be so hard on yourself, work for an hour or less before taking a break."
|
||||
}
|
||||
],
|
||||
breakRules: [
|
||||
(value) => {
|
||||
if (value >= 0 && value <= 60) { return true }
|
||||
|
||||
if (value < 0) { return 'How tf would you take a negative break time you moron?' }
|
||||
return "That's too much time for a break, stop wasting your time."
|
||||
}
|
||||
],
|
||||
maxSessionsRules: [
|
||||
(value) => {
|
||||
if (value >= 1) { return true }
|
||||
|
||||
return "Max sessions can't be less than one!"
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// save settings to localstorage
|
||||
const saveSettings = () => {
|
||||
saveNotification()
|
||||
|
||||
// validate user inputs before saving
|
||||
if (rules.workRules[0](settings.timer.work) === true) {
|
||||
timer().settings.timer.work.time = settings.timer.work
|
||||
}
|
||||
if (rules.breakRules[0](settings.timer['short-break']) === true) {
|
||||
timer().settings.timer['short-break'].time = settings.timer['short-break']
|
||||
}
|
||||
if (rules.breakRules[0](settings.timer['long-break']) === true) {
|
||||
timer().settings.timer['long-break'].time = settings.timer['long-break']
|
||||
}
|
||||
if (rules.maxSessionsRules[0](settings.maxSessions) === true) {
|
||||
timer().settings.maxSessions = settings.maxSessions
|
||||
}
|
||||
|
||||
storeSettings()
|
||||
|
||||
state.dialog = false
|
||||
state.snackbar = true
|
||||
}
|
||||
return { t, localePath }
|
||||
}
|
||||
}
|
||||
|
||||
// watch(
|
||||
// () => state.dialog,
|
||||
// (dialog) => {
|
||||
// if (!dialog) { // if dialog is closed
|
||||
// saveSettings()
|
||||
// } else {
|
||||
// // retrieve settings from state when dialog is opened
|
||||
// // settings.notificationsEnabled = timer().showNotification
|
||||
// settings.maxSessions = timer().settings.maxSessions
|
||||
// for (const session of Object.keys(settings.timer)) {
|
||||
// settings.timer[session] = timer().settings.timer[session].time
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// )
|
||||
|
||||
// get notification permission from the browser
|
||||
// const saveNotification = () => {
|
||||
// const { isSupported, show } = useWebNotification({
|
||||
// title: 'Notifications enabled.'
|
||||
// })
|
||||
// if (isSupported.value) {
|
||||
// if (!timer().showNotification && settings.notificationsEnabled) { show() }
|
||||
// } else {
|
||||
// useNuxtApp().$logger.error('Your browser does not support notifications.')
|
||||
// }
|
||||
// timer().showNotification = settings.notificationsEnabled
|
||||
// }
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.dialog-bottom-transition-enter-active,
|
||||
.dialog-bottom-transition-leave-active {
|
||||
transition: transform .1s ease-in-out;
|
||||
}
|
||||
.v-footer {
|
||||
row-gap: 0.4rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user