show number of tag usage

build/public/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   
   <title>🧩 jigsaw.hyottoko.club</title>
-<script type="module" crossorigin src="/assets/index.a4bac37f.js"></script>
+<script type="module" crossorigin src="/assets/index.e2df6757.js"></script>
   <link rel="modulepreload" href="/assets/vendor.684f7bc8.js">
   <link rel="stylesheet" href="/assets/index.6748df9f.css">
 </head>

build/server/main.js

@@ -1315,15 +1315,28 @@ async function getExifOrientation(imagePath) {
         });
     });
 }
+const getAllTags = (db) => {
+    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, imageId) => {
     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,
     }));
 };
 const imageFromDb = (db, imageId) => {
@@ -1432,6 +1445,7 @@ var Images = {
     allImagesFromDisk,
     imageFromDb,
     allImagesFromDb,
+    getAllTags,
     resizeImage,
     getDimensions,
 };
@@ -2008,7 +2022,7 @@ app.get('/api/newgame-data', (req, res) => {
     const tagSlugs = q.tags ? q.tags.split(',') : [];
     res.send({
         images: Images.allImagesFromDb(db, tagSlugs, q.sort),
-        tags: db.getMany('categories', {}, [{ title: 1 }]),
+        tags: Images.getAllTags(db),
     });
 });
 app.get('/api/index-data', (req, res) => {

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),
   })
 })