rewrote status component

src/App.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 	import Summary from './components/summary.vue'
-	import MinsLeftToPracticeToday from './components/mins_left_to_practice_today.vue'
 	import ShowCategory from './components/show_category.vue'
 	import Songs from './components/songs.vue'
 	import Timer from './components/timer.vue'
+	import Status from './components/status.vue'
 </script>
 <script lang="ts">
 	export default {
@@ -23,7 +23,7 @@
 <template>
 	<main>
 		<section id="timer">
-			<MinsLeftToPracticeToday/>
+			<Status />
 			<Timer :currentWorkingCategoryID="currentWorkingCategoryID"/>
 		</section>
 		<section id="summary">

src/components/mins_left_to_practice_today.vue

@@ -1,41 +0,0 @@
-<script lang="ts">
-	import axios from 'axios';
-	import { getHours, getMinutes, createTimeObj, getAccumulatedSeconds, formatSeconds } from '../libs/time.js'
-
-	export default {
-		data() {
-			return {
-				seconds_left_to_practice_today:0,
-				seconds_practiced_today:0,
-				seconds_left_to_get_ahead:0
-			}
-		},
-		methods: {
-			setTimes(response){
-				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+'status').then(this.setTimes)
-			},
-			formatSeconds
-		},
-		mounted() {
-			axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'status').then(this.setTimes)
-		}
-	}
-</script>
-
-<template>
-	<h2 @click="refresh">Time Summary</h2>
-	<h3>Time Left to Practice Today</h3>
-	{{formatSeconds(seconds_left_to_practice_today)}}
-	<h3>Extra Time to Accumulate</h3>
-	{{formatSeconds(seconds_left_to_get_ahead)}}
-	<h3>Time Practiced Today</h3>
-	{{formatSeconds(seconds_practiced_today)}}
-</template>
-
-<style scoped>
-</style>

src/components/status.vue

@@ -0,0 +1,21 @@
+<script setup>
+	import { formatSeconds } from '../libs/time.js'
+	import { onMounted, ref } from 'vue'
+
+	let practiceStatus = ref({})
+	const loadData = async () => {
+		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'status')
+		let data = await response.json()
+		practiceStatus.value = data
+	}
+	onMounted(loadData)
+</script>
+<template>
+	<h2 @click="loadData">Practice Status</h2>
+	<h3>Time Left to Practice Today</h3>
+	{{formatSeconds(practiceStatus.seconds_left_to_practice_today)}}
+	<h3>Extra Time to Accumulate</h3>
+	{{formatSeconds(practiceStatus.seconds_left_to_get_ahead)}}
+	<h3>Time Practiced Today</h3>
+	{{formatSeconds(practiceStatus.seconds_practiced)}}
+</template>