parent
daaaf28f85
commit
aa935c86f4
@ -1,80 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import axios from 'axios';
|
|
||||||
|
|
||||||
const getAccumulatedSeconds = (newerTime, olderTime) => {
|
|
||||||
return Math.floor((newerTime-olderTime)/1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
categories:[],
|
|
||||||
running: false,
|
|
||||||
startTime:0,
|
|
||||||
savedPreviousSeconds:0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
submit(event){
|
|
||||||
event.preventDefault();
|
|
||||||
console.log(this.description);
|
|
||||||
console.log(this.seconds);
|
|
||||||
console.log(this.comments);
|
|
||||||
console.log(this.practice_category_id);
|
|
||||||
},
|
|
||||||
start(event){
|
|
||||||
this.startTime = Date.now();
|
|
||||||
this.running = true;
|
|
||||||
},
|
|
||||||
stop(event){
|
|
||||||
this.running = false;
|
|
||||||
this.savedPreviousSeconds += getAccumulatedSeconds(Date.now(), this.startTime);
|
|
||||||
},
|
|
||||||
reset(event){
|
|
||||||
this.savedPreviousSeconds = 0;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'categories').then((response)=>{
|
|
||||||
this.categories = response.data
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<details>
|
|
||||||
<summary><h2>Timer</h2></summary>
|
|
||||||
<button :disabled="running" @click="start">Start Timer</button>
|
|
||||||
<button :disabled="!running" @click="stop">Stop Timer</button>
|
|
||||||
<button :disabled="running" @click="reset">Reset</button>
|
|
||||||
<form @submit="submit">
|
|
||||||
<label>Description</label>
|
|
||||||
<input v-model="description" type="text"/>
|
|
||||||
|
|
||||||
<label>Seconds</label>
|
|
||||||
<input v-model="savedPreviousSeconds" type="number"/>
|
|
||||||
|
|
||||||
<label>Comments</label>
|
|
||||||
<textarea v-model="comments"/>
|
|
||||||
|
|
||||||
<label>Practice Category</label>
|
|
||||||
<select v-model="practice_category_id">
|
|
||||||
<option v-for="category in categories" v-bind:value="category.id">
|
|
||||||
{{category.id}}.
|
|
||||||
{{category.instrument}}
|
|
||||||
:
|
|
||||||
{{category.category}}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<input type="Submit"/>
|
|
||||||
</form>
|
|
||||||
</details>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
label, [type="submit"] {
|
|
||||||
display:block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in new issue