anchor

public/default.css

@@ -5,6 +5,13 @@
     word-break: keep-all;
 }
 
+a.anchor {
+    display: block;
+    position: relative;
+    top: -20vh;
+    visibility: hidden;
+}
+
 body {
     position: absolute;
     top: 0;

server.js

@@ -54,7 +54,35 @@ var io = require("socket.io")(fastify.server, {
 
 //get '/'
 fastify.get("/", async function (request, reply) {
-  reply.view("/src/pages/parade.html", {});
+  //get list
+  let list = await fs.readdir(process.env.userdata);
+  list.reverse();
+
+  // console.log(list);
+
+  let folders = [];
+  for (const item of list) {
+    let json = await fs.readFile(process.env.userdata + item + '/fields.json')
+    .catch((err) => {
+      console.error(err);
+    });
+    if (json != undefined) {
+      var fields = JSON.parse(json.toString('utf8'));
+      folders.push({
+        foldername: item,
+        group: fields.group,
+        title: fields.title,
+        comment: fields.comment,
+      });
+    }
+  }
+
+  // console.log(folders);
+
+  //
+  reply.view("/src/pages/parade.html", {
+    list: folders
+  });
 });
 
 //get '/en/'
@@ -97,11 +125,7 @@ fastify.get("/list", async function (request, reply) {
 fastify.get("/uploads/:foldername/:filename", async function (request, reply) {
 
   //get file & send
-<<<<<<< HEAD
-  var file = await fs.readFile('/media/storage/public/sound-parade/' + request.params.foldername + '/' + request.params.filename);
-=======
   var file = await fs.readFile(process.env.userdata + request.params.foldername + '/' + request.params.filename);
->>>>>>> ac763a7 (parameters)
 
   reply.send(file);
 });

src/pages/parade.html

@@ -206,6 +206,23 @@
           you can hear the sound corresponding to the shape and check the information about the sound.</p>
       </section>
       <section id="list">
+        {{#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>
+            <audio class="sound" preload="none" controls>
+              <source src="/uploads/{{this.foldername}}/audio.mp3" type="audio/mpeg">
+            </audio>
+            <ul class="soundinfo"><hr>
+              <li>유형 | <div class="group">{{this.group}}</div></li><hr>
+              <li>제목 | <div class="title">{{this.title}}</div></li><hr>
+              <li>묘사 | <div class="comment">{{this.comment}}</div></li><hr>
+            </ul>
+            <button class="preview" type="button" onclick="javascript:window.open('/preview/{{this.foldername}}', '_blank');">미리보기</button>
+            <button class="delete" type="button" onclick="del(this)">삭제</button>
+          </details>
+        </div>
+        {{/each}}
       </section>
     </div><!-- div class="notice" -->
   </div><!-- div class="entry" -->
@@ -230,7 +247,7 @@
           t = t + `
           <div class="items" foldername="${item.foldername}">
             <details>
-              <summary><img class="drawing" src="/uploads/${item.foldername}/pixels.png" /></summary>
+              <summary><a class="anchor" id="${item.foldername}"></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>
@@ -419,7 +436,12 @@
       // --> use custom looper.
 
       //**ENTRY
-      list_reload();
+      // list_reload();
+
+      //go to the anchor
+      console.log(window.location.hash.substring(1));
+      let elmnt = document.getElementById(window.location.hash.substring(1));
+      elmnt.scrollIntoView(true);
 
       var cnv = createCanvas(cols * unit + 2, rows * unit + 2);
       cnv.parent("p5");