anchor update

package-lock.json

@@ -108,6 +108,11 @@
         "color-convert": "^2.0.1"
       }
     },
+    "any-base": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/any-base/-/any-base-1.1.0.tgz",
+      "integrity": "sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg=="
+    },
     "anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -1677,6 +1682,15 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "short-uuid": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/short-uuid/-/short-uuid-4.2.2.tgz",
+      "integrity": "sha512-IE7hDSGV2U/VZoCsjctKX6l5t5ak2jE0+aeGJi3KtvjIUNuZVmHVYUjNBhmo369FIWGDtaieRaO8A83Lvwfpqw==",
+      "requires": {
+        "any-base": "^1.1.0",
+        "uuid": "^8.3.2"
+      }
+    },
     "signal-exit": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.6.tgz",

package.json

@@ -19,6 +19,7 @@
     "moment-timezone": "^0.5.34",
     "nextcloud-node-client": "^1.8.2",
     "point-of-view": "^5.0.0",
+    "short-uuid": "^4.2.2",
     "socket.io": "~2.3.0",
     "uuid": "^8.3.2"
   },
@@ -36,5 +37,8 @@
   ],
   "devDependencies": {
     "nodemon": "^2.0.15"
+  },
+  "volta": {
+    "node": "14.19.3"
   }
 }

server.js

@@ -27,6 +27,9 @@ const {
   v4: uuidv4,
 } = require('uuid');
 
+//short-uuid
+const short = require('short-uuid');
+
 //moment
 const moment = require("moment-timezone");
 
@@ -73,6 +76,7 @@ fastify.get("/", async function (request, reply) {
         group: fields.group,
         title: fields.title,
         comment: fields.comment,
+        anchor: fields.anchor
       });
     }
   }
@@ -111,6 +115,7 @@ fastify.get("/list", async function (request, reply) {
         group: fields.group,
         title: fields.title,
         comment: fields.comment,
+        anchor: fields.anchor
       });
     }
   }
@@ -121,6 +126,17 @@ fastify.get("/list", async function (request, reply) {
   reply.send(folders);
 });
 
+//get '/short'
+fastify.get("/short", function (request, reply) {
+
+  let shorts = [];
+  for (var idx = 0; idx < 100; idx++) {
+    shorts.push(short.generate());
+  }
+
+  reply.send(shorts);
+});
+
 //get '/uploads/:foldername/:filename'
 fastify.get("/uploads/:foldername/:filename", async function (request, reply) {
 
@@ -171,6 +187,7 @@ fastify.get("/fields", async function (request, reply) {
         group: fields.group,
         title: fields.title,
         comment: fields.comment,
+        anchor: fields.anchor
       });
     }
   }
@@ -241,7 +258,8 @@ fastify.post("/", async function (request, reply) {
     group: audiofile.fields.group.value,
     title: audiofile.fields.title.value,
     comment: audiofile.fields.comment.value,
-    pass: audiofile.fields.pass.value
+    pass: audiofile.fields.pass.value,
+    anchor: short.generate()
   })));
   const image = await folder.createFile("pixels.png", await fs.readFile(pixelfile.filepath));
   //
@@ -356,6 +374,7 @@ io.on("connection", function(socket) {
         group: fields.group,
         title: fields.title,
         comment: fields.comment,
+        anchor: fields.anchor
       });
     }
 

src/pages/parade.html

@@ -209,7 +209,7 @@
           {{#each list}}
         <div class="items" foldername="{{this.foldername}}">
           <details>
-            <summary><a class="anchor" id="{{this.foldername}}"></a><img class="drawing" src="/uploads/{{this.foldername}}/pixels.png" /></summary>
+            <summary><a class="anchor" id="{{this.anchor}}"></a><img class="drawing" src="/uploads/{{this.foldername}}/pixels.png" /></summary>
             <audio class="sound" preload="none" controls>
               <source src="/uploads/{{this.foldername}}/audio.mp3" type="audio/mpeg">
             </audio>
@@ -247,7 +247,7 @@
           t = t + `
           <div class="items" foldername="${item.foldername}">
             <details>
-              <summary><a class="anchor" id="${item.foldername}"></a><img class="drawing" src="/uploads/${item.foldername}/pixels.png" /></summary>
+              <summary><a class="anchor" id="${item.anchor}"></a><img class="drawing" src="/uploads/${item.foldername}/pixels.png" /></summary>
               <audio class="sound" preload="none" controls>
                 <source src="/uploads/${item.foldername}/audio.mp3" type="audio/mpeg">
               </audio>