57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
Vue
|
<script setup>
|
||
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||
|
|
import { pendingSubmission as pendingSubmissionFun } from "~/composables/forms/pendingSubmission.js"
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
form: { type: Object, required: true }
|
||
|
|
})
|
||
|
|
|
||
|
|
const pendingSubmission = pendingSubmissionFun(props.form)
|
||
|
|
const startTime = ref(null)
|
||
|
|
const completionTime = ref(parseInt(pendingSubmission.getTimer() ?? null))
|
||
|
|
let timer = null
|
||
|
|
|
||
|
|
watch(() => completionTime.value, () => {
|
||
|
|
if (completionTime.value) {
|
||
|
|
pendingSubmission.setTimer(completionTime.value)
|
||
|
|
}
|
||
|
|
}, { immediate: true })
|
||
|
|
|
||
|
|
const startTimer = () => {
|
||
|
|
if (!startTime.value) {
|
||
|
|
startTime.value = parseInt(pendingSubmission.getTimer() ?? 1)
|
||
|
|
completionTime.value = startTime.value
|
||
|
|
timer = setInterval(() => {
|
||
|
|
completionTime.value += 1
|
||
|
|
}, 1000)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const stopTimer = () => {
|
||
|
|
if (timer) {
|
||
|
|
clearInterval(timer)
|
||
|
|
timer = null
|
||
|
|
startTime.value = null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const resetTimer = () => {
|
||
|
|
stopTimer()
|
||
|
|
completionTime.value = null
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
document.addEventListener('input', startTimer)
|
||
|
|
})
|
||
|
|
|
||
|
|
onUnmounted(() => {
|
||
|
|
document.removeEventListener('input', startTimer)
|
||
|
|
stopTimer()
|
||
|
|
})
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
completionTime,
|
||
|
|
stopTimer,
|
||
|
|
resetTimer
|
||
|
|
})
|
||
|
|
</script>
|