From f8523cff95710f7e1ffcd681801e6d676c1a45e3 Mon Sep 17 00:00:00 2001
From: Quentin Vallat <quentin.vallat@he-arc.ch>
Date: Tue, 5 Nov 2019 13:09:02 +0100
Subject: [PATCH] HTML tree structure + audio files and folders in zip #2

---
 app/index.html     | 14 ++++++---
 app/js/app.js      | 74 ++++++++++++++++++++++++++++++----------------
 app/js/template.js |  6 ++--
 3 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/app/index.html b/app/index.html
index 81578bf..24aceba 100644
--- a/app/index.html
+++ b/app/index.html
@@ -49,6 +49,16 @@ <h1>PWA Playlist Generator</h1>
 
                 </section>
 
+            </div>
+
+            <div id="audio-tree"></div>
+
+            <img id="uploaded-icon" src="">
+
+            <a href="#" id="dl" hidden></a>
+
+            <div class="center">
+
                 <section id="section-about">
 
                     <h2>About</h2>
@@ -74,10 +84,6 @@ <h2>What is it ?</h2>
             </div>
         </div>
 
-        <ul id="audio-files"></ul>
-
-        <a href="#" id="dl" hidden></a>
-
         <!-- SCRIPTS -->
 
         <script src="js/materialize.min.js"></script>
diff --git a/app/js/app.js b/app/js/app.js
index 9f50639..709a407 100644
--- a/app/js/app.js
+++ b/app/js/app.js
@@ -2,10 +2,11 @@
 'use strict';
 
 let title = 'PWA Playlist Generator';
-let audioFiles = [];
 let audioTree = '';
 let iconImg = '';
 
+let zipBuilder = new JSZip();
+
 // Title input on input event
 document.querySelector('input#input-pwa-title').addEventListener('input', (evt) =>
 {
@@ -16,26 +17,31 @@ document.querySelector('input#input-pwa-title').addEventListener('input', (evt)
 document.querySelector('input#input-pwa-root-folder').addEventListener('change', (evt) =>
 {
     let files = evt.target.files;
+    // Builds a tree structure with the uploaded files
     let filesTree = buildFilesTree(files);
 
-    console.log(filesTree);
-
-    //audioTree += '<li><a href="audio/' + filename + '" class="audio-src">' + filename + '</a><a href="audio/' + filename + '" class="cache-audio">Download</a></li>';
+    // Builds the HTML tree based on the tree structure
+    audioTree = folderRecursiveBuild(filesTree);
 
-    //document.querySelector('#audio-files').innerHTML = audioTree;
+    // Displays the HTML tree structure
+    document.querySelector('#audio-tree').innerHTML = audioTree;
 });
 
 // Icon input on change event
 document.querySelector('input#input-pwa-icon').addEventListener('change', (evt) =>
 {
     iconImg = evt.target.files[0];
-    //let img = document.querySelector('#uploaded-icon');
-    //img.src = URL.createObjectURL(evt.target.files[0]);
+
+    // Displays the uploaded icon
+    let uploadedIcon = document.querySelector('#uploaded-icon');
+    uploadedIcon.src = URL.createObjectURL(evt.target.files[0]);
 });
 
 // Click on the Generate HTML button
 document.querySelector('#btn-pwa-generate').addEventListener('click', (evt) =>
 {
+    evt.preventDefault();
+
     const dataHtml = {
         title: title,
         audioTree: audioTree,
@@ -89,6 +95,33 @@ function buildFilesTree(filesList)
     return filesTree;
 }
 
+//
+function folderRecursiveBuild(currentFolder, parentFolder=zipBuilder)
+{
+   let htmlTree = '';
+
+    for (let [k, v] of currentFolder)
+    {
+        // Audio file
+        //FIXME: to improve ; cannot have a folder with a .
+        if (k.includes('.'))
+        {
+            parentFolder.file(v.name, v);
+
+            htmlTree += '<li><a href="' + v.webkitRelativePath + '" class="audio-src">' + v.name + '</a><a href="' + v.webkitRelativePath + '" class="cache-audio">Download</a></li>';
+        }
+        // Folder
+        else
+        {
+            htmlTree += '<ul><li>' + k + '</li>';
+            htmlTree += folderRecursiveBuild(v, parentFolder.folder(k));
+            htmlTree += '</ul>';
+        }
+    }
+
+    return htmlTree;
+}
+
 // Generates the PWA in a zip file
 function generateZip(dataHtml, dataManifest)
 {
@@ -99,35 +132,26 @@ function generateZip(dataHtml, dataManifest)
     let serviceWorkerJs = template_service_worker();
     let manifest = template_manifest(dataManifest);
 
-    // zip file (root)
-    let zip = new JSZip();
-    zip.file('index.html', html);
+    // index
+    zipBuilder.file('index.html', html);
 
     // css folder
-    let css = zip.folder('css');
+    let css = zipBuilder.folder('css');
     css.file('app.css', appCss);
 
     // js folder
-    let js = zip.folder('js');
+    let js = zipBuilder.folder('js');
     js.file('app.js', appJs);
 
     // PWA files
-    zip.file('manifest.json', manifest);
-    zip.file('icon.png', iconImg, {base64: true});
+    zipBuilder.file('manifest.json', manifest);
+    zipBuilder.file('icon.png', iconImg, {base64: true});
     //FIXME: Keep it that way ? Or in js dir with relative path ?
-    zip.file('service-worker.js', serviceWorkerJs);
-    zip.file('pwa.js', pwaJs);
-
-    // Audio folder
-    let audio = zip.folder('audio');
-    // Audio files
-    for (let i = 0; i < audioFiles.length; i++)
-    {
-        audio.file(audioFiles[i].name, audioFiles[i]);
-    }
+    zipBuilder.file('service-worker.js', serviceWorkerJs);
+    zipBuilder.file('pwa.js', pwaJs);
 
     // Generates the zip file
-    zip.generateAsync({
+    zipBuilder.generateAsync({
         type: 'blob'
     })
     .then((content) =>
diff --git a/app/js/template.js b/app/js/template.js
index 18d30dc..62484eb 100644
--- a/app/js/template.js
+++ b/app/js/template.js
@@ -13,7 +13,7 @@ function template_html(data)
         <body>
             <div class="container">
                 <h1 class="main-title">${data.title}</h1>
-                <ul id="listing">${data.audioTree}</ul>
+                <div id="audio-tree">${data.audioTree}</div>
                 <audio id="audio-player" controls>
                     <source src="">
                     Your browser does not support the audio element.
@@ -40,10 +40,10 @@ a,
 a:visited {
     color: #ad0000;
 }
-#listing a {
+#audio-tree a {
     display: inline-block;
 }
-#listing a.cache-audio {
+#audio-tree a.cache-audio {
     margin-left: 10px;
 }
     `;