show number of tag usage

src/common/Types.ts

@@ -60,6 +60,7 @@ export interface Tag {
   id: number
   slug: string
   title: string
+  total: number
 }
 
 interface GameRng {

src/frontend/views/NewGame.vue

@@ -15,7 +15,12 @@ in jigsawpuzzles.io
     <div>
       <label v-if="tags.length > 0">
         Tags:
-        <span class="bit" v-for="(t,idx) in tags" :key="idx" @click="toggleTag(t)" :class="{on: filters.tags.includes(t.slug)}">{{t.title}}</span>
+        <span
+          class="bit"
+          v-for="(t,idx) in relevantTags"
+          :key="idx"
+          @click="toggleTag(t)"
+          :class="{on: filters.tags.includes(t.slug)}">{{t.title}} ({{t.total}})</span>
         <!-- <select v-model="filters.tags" @change="filtersChanged">
           <option value="">All</option>
           <option v-for="(c, idx) in tags" :key="idx" :value="c.slug">{{c.title}}</option>
@@ -97,6 +102,11 @@ export default defineComponent({
   async created() {
     await this.loadImages()
   },
+  computed: {
+    relevantTags (): Tag[] {
+      return this.tags.filter((tag: Tag) => tag.total > 0)
+    },
+  },
   methods: {
     autocompleteTags (input: string, exclude: string[]): string[] {
       return this.tags

src/server/Images.ts

@@ -72,15 +72,29 @@ async function getExifOrientation(imagePath: string): Promise<number> {
   })
 }
 
+const getAllTags = (db: Db): Tag[] => {
+  const query = `
+select c.id, c.slug, c.title, count(*) as total from categories c
+inner join image_x_category ixc on c.id = ixc.category_id
+group by c.id order by total desc;`
+  return db._getMany(query).map(row => ({
+    id: parseInt(row.id, 10) || 0,
+    slug: row.slug,
+    title: row.title,
+    total: parseInt(row.total, 10) || 0,
+  }))
+}
+
 const getTags = (db: Db, imageId: number): Tag[] => {
   const query = `
 select * from categories c
 inner join image_x_category ixc on c.id = ixc.category_id
 where ixc.image_id = ?`
   return db._getMany(query, [imageId]).map(row => ({
-    id: parseInt(row.number, 10) || 0,
+    id: parseInt(row.id, 10) || 0,
     slug: row.slug,
     title: row.title,
+    total: 0,
   }))
 }
 
@@ -207,6 +221,7 @@ export default {
   allImagesFromDisk,
   imageFromDb,
   allImagesFromDb,
+  getAllTags,
   resizeImage,
   getDimensions,
 }

src/server/main.ts

@@ -101,7 +101,7 @@ app.get('/api/newgame-data', (req, res): void => {
   const tagSlugs: string[] = q.tags ? q.tags.split(',') : []
   res.send({
     images: Images.allImagesFromDb(db, tagSlugs, q.sort),
-    tags: db.getMany('categories', {}, [{ title: 1 }]),
+    tags: Images.getAllTags(db),
   })
 })