adapt frontend

frontend/src/components/TrainGrid.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Train as TrainType } from '@/lib/db'
-import { getBlobURL } from '@/lib/paths'
+import { getBlobURL, gifFileName } from '@/lib/paths'
 import RelativeTime from '@/components/RelativeTime.vue'
 import FavoriteIcon from '@/components/FavoriteIcon.vue'
 
@@ -19,7 +19,7 @@ defineProps<{
         >
           <v-card>
             <v-img
-              :src="getBlobURL(train.gif_file_path)"
+              :src="getBlobURL(gifFileName(train.start_ts))"
               class="align-end"
               gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
               height="200px"

frontend/src/components/TrainListItem.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Train } from '@/lib/db'
-import { getBlobThumbURL } from '@/lib/paths'
+import { getBlobThumbURL, imgFileName } from '@/lib/paths'
 import { DateTime } from 'luxon'
 import { useDisplay } from 'vuetify'
 import RelativeTime from '@/components/RelativeTime.vue'
@@ -49,7 +49,7 @@ const { mdAndUp } = useDisplay()
       <v-sheet
         class="ma-1 train-preview"
         :style="`background-image: url(${getBlobThumbURL(
-          train.image_file_path
+          imgFileName(train.start_ts)
         )}); background-position-x: ${train.speed_px_s > 0 ? 'right' : 'left'}`"
       >
       </v-sheet>

frontend/src/lib/db.ts

@@ -28,19 +28,17 @@ export async function loadDB(): Promise<SqlJs.Database> {
 export interface Train {
   id: number
   start_ts: DateTime
-  end_ts: DateTime
   n_frames: number
   length_px: number
   speed_px_s: number
   accel_px_s_2: number
   px_per_m: number
-  image_file_path: string
-  gif_file_path: string
-  uploaded_at?: DateTime
+  uploaded: boolean
+  cleaned_up: boolean
 }
 
 function convertValue(colname: string, value: any): any {
-  if (value !== null && ['start_ts', 'end_ts', 'uploaded_at'].indexOf(colname) != -1) {
+  if (value !== null && ['start_ts'].indexOf(colname) != -1) {
     return DateTime.fromSQL(value, { setZone: true })
   }
   return value
@@ -92,7 +90,7 @@ export function getTrains(
   // Muahahah.
   const query = `
     SELECT *
-    FROM trains
+    FROM trains_v2
     WHERE ${whereStr}
     ORDER BY ${orderByStr}
     LIMIT ${limit} OFFSET ${offset}`
@@ -101,8 +99,8 @@ export function getTrains(
 
   const result = db.exec(query)
 
-  const filteredCount = db.exec(`SELECT COUNT(*) FROM trains WHERE ${whereStr}`)
-  const totalCount = db.exec(`SELECT COUNT(*) FROM trains`)
+  const filteredCount = db.exec(`SELECT COUNT(*) FROM trains_v2 WHERE ${whereStr}`)
+  const totalCount = db.exec(`SELECT COUNT(*) FROM trains_v2`)
 
   return {
     trains: convertTrains(result),
@@ -114,7 +112,7 @@ export function getTrains(
 export function getTrain(db: SqlJs.Database, id: number): Train | undefined {
   const query = `
   SELECT *
-  FROM trains
+  FROM trains_v2
   WHERE id = ${id}`
 
   console.log(query.trim())

frontend/src/lib/paths.ts

@@ -1,5 +1,24 @@
+import type { DateTime } from 'luxon'
+
 const blobsBaseURL = import.meta.env.VITE_BLOBS_URL
 
+// This matches time.Format() with '20060102_150405.999_Z07:00' from Go.
+function formatFileTs(ts: DateTime): string {
+  const base = ts.toFormat('yyyyMMdd_HHmmss')
+  const frac = ts.toFormat('SSS').replace(/0*$/, '')
+  const zone = ts.toFormat('ZZ').replace('+00:00', 'Z')
+
+  return `${base}.${frac}_${zone}`
+}
+
+export function imgFileName(ts: DateTime): string {
+  return `train_${formatFileTs(ts)}.jpg`
+}
+
+export function gifFileName(ts: DateTime): string {
+  return `train_${formatFileTs(ts)}.gif`
+}
+
 export function getBlobURL(blobName: string): string {
   return blobsBaseURL.trimRight('/') + '/' + blobName
 }

frontend/src/lib/stats.ts

@@ -6,7 +6,7 @@ export const avgLengthM = (db: SqlJs.Database): number =>
     db,
     `SELECT
       SUM(ABS(length_px / px_per_m)) / COUNT(*)
-    FROM trains;`
+    FROM trains_v2;`
   ) as number
 
 export const histCountPerDayOfWeek = (db: SqlJs.Database): number[][] =>
@@ -15,7 +15,7 @@ export const histCountPerDayOfWeek = (db: SqlJs.Database): number[][] =>
       -- have to shift by 1, because SQLite thinks 0 = Sunday
       (CAST(strftime('%w', start_ts) AS INT) + 6) % 7 AS dow,
       COUNT(*)
-    FROM trains
+    FROM trains_v2
     GROUP BY dow
     ORDER BY dow;`)[0].values as number[][]
 
@@ -34,7 +34,7 @@ export const histHourOfDay = (db: SqlJs.Database): number[][] =>
   SELECT
     CAST(strftime('%H', start_ts) AS INT) AS hod,
     COUNT(*)
-  FROM trains
+  FROM trains_v2
   GROUP BY hod
   ORDER BY hod;`)[0].values as number[][]
 
@@ -44,7 +44,7 @@ export const histSpeedKPH = (db: SqlJs.Database, binSz: number = 10): number[][]
   WITH speed_rounded AS (
     SELECT
       CAST(ABS(speed_px_s / px_per_m * 3.6)/${binSz} AS INTEGER) * ${binSz} AS speed_rounded
-    FROM trains
+    FROM trains_v2
   )
   SELECT
     speed_rounded,

frontend/src/views/CleanupView.vue

@@ -20,10 +20,10 @@ watch(
 </script>
 
 <template>
-  sqlite3 data/db.sqlite3
+  sqlite3 trainbot/data/db.sqlite3
   <br />
 
-  DELETE FROM trains
+  DELETE FROM trains_v2
   <br />
   WHERE id IN ({{ Array.from(favs.favorites).join(', ') }});
 </template>

frontend/src/views/TrainDetailView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { inject, computed, defineProps } from 'vue'
+import { inject, computed } from 'vue'
 import { dbKey, getTrain, queryOne } from '@/lib/db'
-import { getBlobURL } from '@/lib/paths'
+import { getBlobURL, imgFileName, gifFileName } from '@/lib/paths'
 import type SqlJs from 'sql.js'
 import { useRouter } from 'vue-router'
 import RelativeTime from '@/components/RelativeTime.vue'
@@ -26,13 +26,13 @@ const train = computed(() => {
 
 const nextId = computed(
   () =>
-    queryOne(db, `SELECT id FROM trains WHERE id > ${id.value} ORDER BY id ASC LIMIT 1`) as
+    queryOne(db, `SELECT id FROM trains_v2 WHERE id > ${id.value} ORDER BY id ASC LIMIT 1`) as
       | number
       | undefined
 )
 const prevId = computed(
   () =>
-    queryOne(db, `SELECT id FROM trains WHERE id < ${id.value} ORDER BY id DESC LIMIT 1`) as
+    queryOne(db, `SELECT id FROM trains_v2 WHERE id < ${id.value} ORDER BY id DESC LIMIT 1`) as
       | number
       | undefined
 )
@@ -80,14 +80,6 @@ const prevId = computed(
             <td>Start timestamp</td>
             <td>{{ train.start_ts.toSQL() }} (<RelativeTime :ts="train.start_ts" />)</td>
           </tr>
-          <tr>
-            <td>End timestamp</td>
-            <td>{{ train.end_ts.toSQL() }}</td>
-          </tr>
-          <tr v-if="train.uploaded_at">
-            <td>Upload timestamp</td>
-            <td>{{ train.uploaded_at.toSQL() }}</td>
-          </tr>
           <tr>
             <td>Direction</td>
             <td>{{ train.speed_px_s > 0 ? 'Right' : 'Left' }}</td>
@@ -117,15 +109,15 @@ const prevId = computed(
     <v-divider class="mx-4 mb-1"></v-divider>
     <v-card-title>Image</v-card-title>
 
-    <a :href="getBlobURL(train?.image_file_path)" target="_blank">
-      <v-img cover :src="getBlobURL(train?.image_file_path)"></v-img>
+    <a :href="getBlobURL(imgFileName(train.start_ts))" target="_blank">
+      <v-img cover :src="getBlobURL(imgFileName(train.start_ts))"></v-img>
     </a>
 
     <v-divider class="mx-4 mb-1"></v-divider>
     <v-card-title>GIF</v-card-title>
 
-    <a :href="getBlobURL(train?.gif_file_path)" target="_blank">
-      <v-img width="10em" :src="getBlobURL(train?.gif_file_path)"></v-img>
+    <a :href="getBlobURL(gifFileName(train.start_ts))" target="_blank">
+      <v-img width="10em" :src="getBlobURL(gifFileName(train.start_ts))"></v-img>
     </a>
   </v-card>
 </template>

frontend/src/views/TrainStatsView.vue

@@ -27,15 +27,15 @@ const widthPx = 200
         <tbody>
           <tr>
             <td>Number of trains</td>
-            <td>{{ queryOne(db, 'SELECT COUNT(*) FROM trains;') }}</td>
+            <td>{{ queryOne(db, 'SELECT COUNT(*) FROM trains_v2;') }}</td>
           </tr>
           <tr>
             <td>Going right</td>
-            <td>{{ queryOne(db, 'SELECT COUNT(*) FROM trains WHERE speed_px_s > 0;') }}</td>
+            <td>{{ queryOne(db, 'SELECT COUNT(*) FROM trains_v2 WHERE speed_px_s > 0;') }}</td>
           </tr>
           <tr>
             <td>Going left</td>
-            <td>{{ queryOne(db, 'SELECT COUNT(*) FROM trains WHERE speed_px_s < 0;') }}</td>
+            <td>{{ queryOne(db, 'SELECT COUNT(*) FROM trains_v2 WHERE speed_px_s < 0;') }}</td>
           </tr>
           <tr>
             <td>Average length</td>