better time formatting in status section

src/components/mins_left_to_practice_today.vue

@@ -1,28 +1,28 @@
 <script lang="ts">
 	import axios from 'axios';
+	import { getHours, getMinutes, createTimeObj, getAccumulatedSeconds, formatSeconds } from '../libs/time.js'
 
 	export default {
 		data() {
 			return {
-				time_left:0,
-				mins_practiced_today:0,
-				to_get_ahead:0
+				seconds_left_to_practice_today:0,
+				seconds_practiced_today:0,
+				seconds_left_to_get_ahead:0
 			}
 		},
 		methods: {
 			setTimes(response){
-				this.time_left= response.data.time_left;
-				this.mins_practiced_today = response.data.mins_practiced_today;
-				
-				const today = new Date()
-				this.to_get_ahead = this.time_left + (today.getMonth()+1)*150 + today.getDate()*5 
+				this.seconds_left_to_practice_today = response.data.seconds_left_to_practice_today
+				this.seconds_practiced_today = response.data.seconds_practiced
+				this.seconds_left_to_get_ahead = response.data.seconds_left_to_get_ahead
 			},
 			refresh(){
-				axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'mins-left-to-practice-today').then(this.setTimes)
-			}
+				axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'status').then(this.setTimes)
+			},
+			formatSeconds
 		},
 		mounted() {
-			axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'mins-left-to-practice-today').then(this.setTimes)
+			axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'status').then(this.setTimes)
 		}
 	}
 </script>
@@ -30,11 +30,11 @@
 <template>
 	<h2 @click="refresh">Time Summary</h2>
 	<h3>Mins Left to Practice Today</h3>
-	{{time_left.toFixed(4)}}
+	{{formatSeconds(seconds_left_to_practice_today,true)}}
 	<h3>To Get Ahead</h3>
-	{{to_get_ahead.toFixed(4)}}
+	{{formatSeconds(seconds_left_to_get_ahead,true)}}
 	<h3>Mins Practiced Today</h3>
-	{{mins_practiced_today.toFixed(4)}}
+	{{formatSeconds(seconds_practiced_today,true)}}
 </template>
 
 <style scoped>

src/components/timer.vue

@@ -1,30 +1,6 @@
 <script lang="ts">
 	import axios from 'axios';
-
-	const getHours = (seconds) => {
-		return Math.floor( seconds / 60 / 60 );
-	}
-
-	const getMinutes = (seconds) => {
-		return Math.floor( seconds / 60 );
-	}
-
-	const createTimeObj = (seconds) => {
-		const hours = getHours(seconds)
-		let remainingSeconds = seconds - hours * 60 * 60
-		const minutes = getMinutes(remainingSeconds)
-		remainingSeconds -= minutes * 60
-		return { hours, minutes, seconds: remainingSeconds }
-	}
-
-	const getAccumulatedSeconds = (newerTime, olderTime) => {
-		return Math.floor((newerTime-olderTime)/1000);
-	}
-
-	const formatSeconds = (total) => {
-		const timeObj = createTimeObj(total)
-		return `${timeObj.hours*60 + timeObj.minutes}:${timeObj.seconds.toString().padStart(2,'0')}`;
-	}
+	import { getHours, getMinutes, createTimeObj, getAccumulatedSeconds, formatSeconds } from '../libs/time.js'
 
 	export default {
 		props: ['currentWorkingCategoryID'],
@@ -48,9 +24,7 @@
 			}
 		},
 		methods: {
-			formatTime(seconds){
-				return formatSeconds(seconds)
-			},
+			formatSeconds,
 			submit(event){
 				event.preventDefault();
 				const reqBody = {
@@ -188,7 +162,7 @@
 	<h2>Timer</h2>
 	<div :class="{running:running, micThresholdExceeded:micThresholdExceeded}">
 		<em>
-			{{formatTime(totalSeconds)}}
+			{{formatSeconds(totalSeconds, true)}}
 		</em>
 		Mic Threshold (current level: {{Math.round(micLevel)}}):
 		<input type="number" @change="activateMic" v-model="micThreshold"/>

src/libs/time.js

@@ -0,0 +1,30 @@
+const getHours = (seconds) => {
+	return Math.floor( seconds / 60 / 60 );
+}
+
+const getMinutes = (seconds) => {
+	return Math.floor( seconds / 60 );
+}
+
+const createTimeObj = (seconds) => {
+	const hours = getHours(seconds)
+	let remainingSeconds = seconds - hours * 60 * 60
+	const minutes = getMinutes(remainingSeconds)
+	remainingSeconds -= minutes * 60
+	return { hours, minutes, seconds: remainingSeconds }
+}
+
+const getAccumulatedSeconds = (newerTime, olderTime) => {
+	return Math.floor((newerTime-olderTime)/1000);
+}
+
+const formatSeconds = (total, includeHours = false) => {
+	const timeObj = createTimeObj(total)
+	if(includeHours) {
+		return `${timeObj.hours}:${timeObj.minutes.toString().padStart(2,'0')}:${timeObj.seconds.toString().padStart(2,'0')}`;
+	} else {
+		return `${timeObj.hours*60 + timeObj.minutes}:${timeObj.seconds.toString().padStart(2,'0')}`;
+	}
+}
+
+export { getHours, getMinutes, createTimeObj, getAccumulatedSeconds, formatSeconds }