Merge branch 'main' of https://gitea.artisan.al/mahuntington/practice-tracker-frontend

Reviewed-on: #1

public/app.css

@@ -21,10 +21,20 @@ td,th {
 	border:1px solid black;
 	padding:1em;
 }
+td ul {
+	padding-inline-start:0;
+	margin:0;
+}
+
+td li {
+	padding-bottom:1em;
+}
+
 th {
 	background:lightgrey;
 	color:black;
 }
+
 tbody tr:nth-child(even) td{
 	background:#eeeeee;
 	color:black;
@@ -57,7 +67,7 @@ main > section {
 	overflow:auto;
 }
 
-@media (min-width: 900px){
+@media (min-width: 1400px){
 
 	nav {
 		display:none;

src/components/show_category.vue

@@ -4,6 +4,7 @@
 	import { onMounted, ref, watch, defineProps } from 'vue'
 	import {
 		description,
+		comments,
 		currentWorkingCategory,
 		currentWorkingInstrument
 	} from '../libs/state.js'
@@ -14,13 +15,29 @@
 		description.value = event.target.innerText
 	}
 
+	const copyComments = (event) => {
+		comments.value = event.target.innerText
+	}
+
+	onMounted(()=>{
+		loadCategory()
+		window.addEventListener('keydown', (event)=>{
+			if(event.ctrlKey === true){
+				if(event.key === 'l') {
+					description.value = categorySessions.value[0].description
+				} else if (event.key === 'm') {
+					comments.value = categorySessions.value[0].comments
+				}
+			}
+		})
+	})
+
+
 	const loadCategory = async () => {
 		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'show-category/'+currentWorkingCategory.value.id)
 		categorySessions.value = await response.json()
 	}
 
-	onMounted(loadCategory)
-
 	watch(currentWorkingCategory, loadCategory)
 	defineExpose({loadCategory})
 </script>
@@ -32,16 +49,16 @@
 		<thead>
 			<tr>
 				<th>description</th>
-				<th>duration</th>
-				<th>songs</th>
 				<th>comments</th>
+				<th>songs</th>
+				<th>duration</th>
 				<th>created at</th>
 			</tr>
 		</thead>
 		<tbody>
 			<tr v-for="session in categorySessions">
 				<td @click="copy">{{session.description}}</td>
-				<td @click="copy">{{formatSeconds(session.seconds)}}</td>
+				<td @click="copyComments">{{session.comments}}</td>
 				<td>
 					<ul>
 						<li v-for="song in session.songs">
@@ -51,7 +68,7 @@
 						</li>
 					</ul>
 				</td>
-				<td @click="copy">{{session.comments}}</td>
+				<td>{{formatSeconds(session.seconds)}}</td>
 				<td>{{new Date(session.created_at).toLocaleString("en-US")}}</td>
 			</tr>
 		</tbody>

src/components/songs.vue

@@ -11,11 +11,14 @@
 	const copy = (title) => {
 		navigator.clipboard.writeText(title);
 	}
-	const paste = (song) => {
+	const link = (song) => {
 		if(copiedSongs.value.findIndex(copiedSong=>copiedSong.id === song.id) === -1){
 			copiedSongs.value.push(song)
 		}
 	}
+	const unlink = (song) => {
+		copiedSongs.value = copiedSongs.value.filter(currSong => currSong.id !== song.id)
+	}
 </script>
 <template>
 	<h2>Songs</h2>
@@ -25,6 +28,8 @@
 				<th>id</th>
 				<th>title</th>
 				<th>notes</th>
+				<th>lyrics</th>
+				<th>original</th>
 			</tr>
 		</thead>
 		<tbody>
@@ -35,10 +40,16 @@
 						{{song.title}}
 					</a>
 					<br/>
-					<button @click="copy(song.title)">Copy</button>
-					<button @click="paste(song)">Paste</button>
+					<button @click="link(song)" v-if="copiedSongs.findIndex(currSong => currSong.id === song.id) === -1">Link</button>
+					<button @click="unlink(song)" v-if="copiedSongs.findIndex(currSong => currSong.id === song.id) !== -1">X</button>
 				</td>
 				<td>{{song.notes}}</td>
+				<td>
+					<a v-if="song.lyrics_link" target="lyrics" v-bind:href="song.lyrics_link">lyrics</a>
+				</td>
+				<td>
+					<a v-if="song.original_link" target="original" v-bind:href="song.original_link">original</a>
+				</td>
 			</tr>
 		</tbody>
 	</table>

src/components/timer.vue

@@ -36,16 +36,14 @@
 		copiedSongs,
 		currentWorkingCategory,
 		currentWorkingInstrument,
-		description
+		description,
+		comments
 	} from '../libs/state.js'
 
-	const removeSong = (song) => {
-		copiedSongs.value = copiedSongs.value.filter(curr => curr.id !== song.id)
-	}
-
 	export default {
 		data() {
 			return {
+				submitting:false,
 				startTime:0,
 				savedPreviousSeconds:0,
 				totalSeconds:0,
@@ -68,6 +66,11 @@
 			formatSeconds,
 			submit(event){
 				event.preventDefault();
+				if(this.submitting){
+					return
+				} else {
+					this.submitting = true
+				}
 				const reqBody = {
 					description:description.value,
 					seconds: this.totalSeconds,
@@ -78,8 +81,8 @@
 					reqBody.songs = copiedSongs.value
 				}
 
-				if(this.comments){
-					reqBody.comments = this.comments
+				if(comments.value){
+					reqBody.comments = comments.value
 				}
 
 				axios.post(
@@ -90,13 +93,16 @@
 					copiedSongs.value = []
 					this.totalSeconds = 0;
 					this.savedPreviousSeconds = 0;
-					this.comments = null;
+					comments.value = null;
 					this.secondsToSubtract = 0;
 					this.manualHours = 0
 					this.manualMinutes = 0
 					this.manualSeconds = 0
 					window.localStorage.setItem('lastTotalSeconds', this.totalSeconds);
 					this.$emit('loggedTime', reqBody)
+					this.submitting = false
+				},()=>{
+					this.submitting = false
 				});
 
 			},
@@ -230,7 +236,11 @@
 
 		<label>Songs</label>
 		<ul v-if="copiedSongs.length > 0">
-			<li @click="removeSong(song)" v-for="song in copiedSongs">{{song.title}}</li>
+			<li v-for="song in copiedSongs">
+				<a v-bind:href="'#/songs/' + song.id">
+					{{song.title}}
+				</a>
+			</li>
 		</ul>
 
 		<label>Seconds</label>
@@ -238,7 +248,7 @@
 
 		<label>Practice Category</label>
 		<CategoryChooser />
-		<input type="submit"/>
+		<input :disabled="submitting" type="submit"/>
 
 		<label>Comments</label>
 		<textarea v-model="comments"/>

src/libs/state.js

@@ -4,4 +4,5 @@ export const currentWorkingCategory = ref(null)
 export const currentWorkingInstrument = ref(null)
 export const instruments = ref([])
 export const categories = ref([])
-export const description = ref('')
+export const description = ref(null)
+export const comments = ref(null)