chore: add search info

fix: info content
fix: id column sticky

src/App.vue

@@ -205,10 +205,12 @@
 
 	async function viewInfo(){
 		const dbtemp = await gameService.getDBInfo();
-		const size = formatBytes(dbtemp.size);
-		const newdate = new Date(dbtemp.mtime).toISOString().split('T');
-		const date = `${newdate[0]} ${newdate[1].split('.')[0]}`;
-		dbData.value = {size, date};
+		if(dbtemp) {
+			const size = formatBytes(dbtemp.size);
+			const newdate = new Date(dbtemp.mtime).toISOString().split('T');
+			const date = `${newdate[0]} ${newdate[1].split('.')[0]}`;
+			dbData.value = {size, date};
+		};
 		openInfoDialog.value = true;
 	}
 
@@ -320,19 +322,26 @@
 
 			<q-dialog v-model="openInfoDialog">
 				<q-card style="width: 50vw" class="q-pb-none">
-					<q-card-section class="row items-center q-pt-none">
-						<p class="q-mt-md">Games before 23rd April 2016 5:00 PM UTC are anonymized and won't appear when searching with player name</p>
-						<p>
+					<q-card-section class="column q-pt-none">
+						<p class="q-mt-md">Games before 23rd April 2016 5:00 PM UTC are anonymized and won't appear when searching by player name.</p>
+						<p class="q-mt-md">
 							Please don't scrape this site. You can directly download the database here: <br>
 							<a href="/games_anon.db.gz">Games Database</a>
-							(~{{dbData.size}}) (updated on {{dbData.date}}) <br>
-							note that the notation is in play tak server format.
+							<span v-if="dbData.size && dbData.date">(~{{dbData.size}}) (updated on {{dbData.date}})</span> <br>
+							<i>Database download link is updated everyday at 5:00 PM UTC</i> <br>
+							You can also use the Playtak API to get the games. Check out the github for help: <a href="https://github.com/USTakAssociation/playtak-api" target="_blank">Play Tak API</a> <br>
+							<i>note: game notation is in play tak server format.</i>
 						</p>
-						<p>
-							The link above will be updated with latest database every day at 5:00 PM UTC.
+						<h5 class="q-mt-md" style="margin: 0;">Search Notes:</h5>
+						<p class="q-mt-md">In the game ID field you can search by:
+							<ul>
+								<li>Single ID e.g. 10</li>
+								<li>Range of ID's e.g. 10-100</li>
+								<li>Comma delimited e.g. 10,20,30</li>
+							</ul>
 						</p>
 						<p>
-							In the player name search fields you can do a partial search with % at the start, end, or both. ie %ame or nam% or %am%
+							In the player name search fields you can do a partial search with % at the start, end, or both. e.g. %ame or nam% or %am%
 						</p>
 					</q-card-section>
 				</q-card>

src/components/Table.vue

@@ -16,7 +16,7 @@
 	}>()
 	
 	const columns: any= [
-		{ name: "id", label: "ID", field: "id", align: "left" },
+		{ name: "id", label: "ID", field: "id", align: "left", headerClasses: "id" },
 		{ name: "size", label: "Size", field: "size", align: "left" },
 		{ name: "rules", label: "Rules", field: "rules", align: "left" },
 		{ name: "clock", label: "Clock", field: "", align: "left" },
@@ -42,7 +42,7 @@
 		LocalStorage.getItem("visibleColumns") ||
 		['id', 'date', 'size', 'rules', 'clock', 'type', 'white', 'black', 'result', 'notation', 'review']
 	);
-	watch(visibleColumns, (value) => LocalStorage.set("visibleColumns", value));
+	watch(visibleColumns, (value: any) => LocalStorage.set("visibleColumns", value));
 
 	function formatDate(date: number){
 		let newDate = new Date(date).toISOString().split('T');
@@ -152,7 +152,7 @@
 
 		<template v-slot:body="props">
 			<q-tr :props="props">
-				<q-td key="id" :props="props">
+				<q-td key="id" :props="props" style="position: sticky; left: 0; background-color: var(--q-dark); z-index: 1;">
 					{{ props.row.id }}
 				</q-td>
 				<q-td key="size" :props="props">
@@ -238,4 +238,9 @@
 .sticky-header thead tr:first-child th {
 	top: 0;
 }
+.sticky-header thead tr .id{
+	position: sticky;
+	z-index: 2;
+	left: 0;
+}
 </style>

src/services/game.service.ts

@@ -44,6 +44,7 @@ export class GameService {
 			return await result.json();
 		} catch (error) {
 			console.error(error);
+			return null;
 		}
 	}
 }