julien/binome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ (timer) add input to select interval duration

Browse Source
This commit is contained in:
Julien Calixte
2020-07-04 00:49:31 +02:00
parent 10f872bb35
commit 264c80f011
1 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/views/Home.vue
View File

@@ -13,6 +13,16 @@
/> />
</section> </section>
<div class="global-time">{{ time }}</div> <div class="global-time">{{ time }}</div>
<div v-if="timeState === 'stopped'">
<label for="interval">Interval: </label>
<input
id="interval"
name="interval"
v-model.number="interval"
type="number"
step="1"
/>
</div>
<div class="actions"> <div class="actions">
<button v-if="timeState === 'stopped'" @click="start">play</button> <button v-if="timeState === 'stopped'" @click="start">play</button>
<button v-if="timeState === 'started'" @click="stop">stop</button> <button v-if="timeState === 'started'" @click="stop">stop</button>
@@ -38,7 +48,6 @@ import DreamMaker from '@/components/DreamMaker.vue'
import { notify } from '@/utils/notification' import { notify } from '@/utils/notification'
type Stopwatch = 'stopped' | 'started' type Stopwatch = 'stopped' | 'started'
const INTERVAL = 120
export default defineComponent({ export default defineComponent({
name: 'Home', name: 'Home',
@@ -47,6 +56,10 @@ export default defineComponent({
}, },
setup() { setup() {
let chilledcow: HTMLVideoElement | null = null let chilledcow: HTMLVideoElement | null = null
const interval = ref(5)
const intervalSeconds = computed(() => {
return interval.value * 60
})
let stopwatchId: number | null = null let stopwatchId: number | null = null
const isProgrammer1Turn = ref(true) const isProgrammer1Turn = ref(true)
let stopWatchSessionId: number | null = null let stopWatchSessionId: number | null = null
@@ -57,7 +70,7 @@ export default defineComponent({
return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}` return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
}) })
const sessionSeconds = ref(INTERVAL) const sessionSeconds = ref(interval.value * 60)
const session = computed(() => { const session = computed(() => {
const m = Math.floor(sessionSeconds.value / 60) const m = Math.floor(sessionSeconds.value / 60)
const s = sessionSeconds.value % 60 const s = sessionSeconds.value % 60
@@ -71,8 +84,8 @@ export default defineComponent({
stopwatchId = setInterval(() => { stopwatchId = setInterval(() => {
seconds.value++ seconds.value++
if (seconds.value % INTERVAL === 0) { if (seconds.value % intervalSeconds.value === 0) {
sessionSeconds.value = INTERVAL sessionSeconds.value = intervalSeconds.value
isProgrammer1Turn.value = !isProgrammer1Turn.value isProgrammer1Turn.value = !isProgrammer1Turn.value
const programmer = isProgrammer1Turn.value const programmer = isProgrammer1Turn.value
@@ -102,7 +115,7 @@ export default defineComponent({
clearInterval(stopWatchSessionId) clearInterval(stopWatchSessionId)
} }
seconds.value = 0 seconds.value = 0
sessionSeconds.value = INTERVAL sessionSeconds.value = intervalSeconds.value
} }
onUnmounted(clear) onUnmounted(clear)
@@ -123,6 +136,7 @@ export default defineComponent({
}) })
return { return {
interval,
start, start,
stop, stop,
timeState, timeState,