From 8121e790956b7b56f09df032856b32c86e5d08cc Mon Sep 17 00:00:00 2001
From: Matthew Huntington <matt.huntington@gmail.com>
Date: Sat, 24 Aug 2024 17:08:59 +0200
Subject: [PATCH] rewrote status component

---
 src/App.vue                                   |  4 +-
 .../mins_left_to_practice_today.vue           | 41 -------------------
 src/components/status.vue                     | 21 ++++++++++
 3 files changed, 23 insertions(+), 43 deletions(-)
 delete mode 100644 src/components/mins_left_to_practice_today.vue
 create mode 100644 src/components/status.vue

diff --git a/src/App.vue b/src/App.vue
index 9661b03..fc2c566 100644
--- a/src/App.vue
+++ b/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">
diff --git a/src/components/mins_left_to_practice_today.vue b/src/components/mins_left_to_practice_today.vue
deleted file mode 100644
index c91ae2e..0000000
--- a/src/components/mins_left_to_practice_today.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/status.vue b/src/components/status.vue
new file mode 100644
index 0000000..afea41f
--- /dev/null
+++ b/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>