public/app.css

@@ -21,20 +21,10 @@ 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;
@@ -67,7 +57,7 @@ main > section {
 	overflow:auto;
 }
 
-@media (min-width: 1400px){
+@media (min-width: 900px){
 
 	nav {
 		display:none;

src/components/show_category.vue

@@ -4,7 +4,6 @@
 	import { onMounted, ref, watch, defineProps } from 'vue'
 	import {
 		description,
-		comments,
 		currentWorkingCategory,
 		currentWorkingInstrument
 	} from '../libs/state.js'
@@ -15,29 +14,13 @@
 		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>
@@ -49,16 +32,16 @@
 		<thead>
 			<tr>
 				<th>description</th>
-				<th>comments</th>
-				<th>songs</th>
 				<th>duration</th>
+				<th>songs</th>
+				<th>comments</th>
 				<th>created at</th>
 			</tr>
 		</thead>
 		<tbody>
 			<tr v-for="session in categorySessions">
 				<td @click="copy">{{session.description}}</td>
-				<td @click="copyComments">{{session.comments}}</td>
+				<td @click="copy">{{formatSeconds(session.seconds)}}</td>
 				<td>
 					<ul>
 						<li v-for="song in session.songs">
@@ -68,7 +51,7 @@
 						</li>
 					</ul>
 				</td>
-				<td>{{formatSeconds(session.seconds)}}</td>
+				<td @click="copy">{{session.comments}}</td>
 				<td>{{new Date(session.created_at).toLocaleString("en-US")}}</td>
 			</tr>
 		</tbody>

src/components/songs.vue

@@ -11,14 +11,11 @@
 	const copy = (title) => {
 		navigator.clipboard.writeText(title);
 	}
-	const link = (song) => {
+	const paste = (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>
@@ -28,8 +25,6 @@
 				<th>id</th>
 				<th>title</th>
 				<th>notes</th>
-				<th>lyrics</th>
-				<th>original</th>
 			</tr>
 		</thead>
 		<tbody>
@@ -40,16 +35,10 @@
 						{{song.title}}
 					</a>
 					<br/>
-					<button @click="link(song)" v-if="copiedSongs.findIndex(currSong => currSong.id === song.id) === -1">Link</button>
+					<button @click="copy(song.title)">Copy</button>
-					<button @click="unlink(song)" v-if="copiedSongs.findIndex(currSong => currSong.id === song.id) !== -1">X</button>
+					<button @click="paste(song)">Paste</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,14 +36,16 @@
 		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,
@@ -66,11 +68,6 @@
 			formatSeconds,
 			submit(event){
 				event.preventDefault();
-				if(this.submitting){
-					return
-				} else {
-					this.submitting = true
-				}
 				const reqBody = {
 					description:description.value,
 					seconds: this.totalSeconds,
@@ -81,8 +78,8 @@
 					reqBody.songs = copiedSongs.value
 				}
 
-				if(comments.value){
+				if(this.comments){
-					reqBody.comments = comments.value
+					reqBody.comments = this.comments
 				}
 
 				axios.post(
@@ -93,16 +90,13 @@
 					copiedSongs.value = []
 					this.totalSeconds = 0;
 					this.savedPreviousSeconds = 0;
-					comments.value = null;
+					this.comments = 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
 				});
 
 			},
@@ -236,11 +230,7 @@
 
 		<label>Songs</label>
 		<ul v-if="copiedSongs.length > 0">
-			<li v-for="song in copiedSongs">
+			<li @click="removeSong(song)" v-for="song in copiedSongs">{{song.title}}</li>
-				<a v-bind:href="'#/songs/' + song.id">
-					{{song.title}}
-				</a>
-			</li>
 		</ul>
 
 		<label>Seconds</label>
@@ -248,7 +238,7 @@
 
 		<label>Practice Category</label>
 		<CategoryChooser />
-		<input :disabled="submitting" type="submit"/>
+		<input type="submit"/>
 
 		<label>Comments</label>
 		<textarea v-model="comments"/>

src/libs/state.js

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