Merge from master

HE-Arc · Oct 30, 2019 · 148d9a7 · 148d9a7
2 parents 1c171d8 + 3976be4
commit 148d9a7
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
 # PWA Playlist Generator
 
 Generate Progressive Web Apps to share your music !
+
+[Demo](https://he-arc.github.io/pwa-playlist-generator/app)
diff --git a/app/css/materialize.min.css b/app/css/materialize.min.css
diff --git a/app/index.html b/app/index.html
@@ -4,25 +4,86 @@
         <meta charset="utf-8">
         <title>PWA Playlist Generator</title>
         <link rel="manifest" href="manifest.json">
+
+        <!-- STYLES -->
+        <link rel="stylesheet" href="css/materialize.min.css">
+
     </head>
     <body>
-        <h1>PWA Playlist Generator</h1>
-        <label for="title">Title</label>
-        <input id="input-title" name="title" type="text" value="Undefined Title">
-        <label for="dir">Directory</label>
-        <input id="input-dir" name="dir" type="file" webkitdirectory>
-        <label for="icon">Icon</label>
-        <input id="input-icon" name="icon" type="file" accept="image/x-png">
-        <img id="uploaded-icon">
-        <button id="btn-generate-html">Generate HTML</button>
+        <div class="container">
+            <div class="center">
+                <h1>PWA Playlist Generator</h1>
+
+                <section id="pwa-generator">
+
+                    <form id="form-pwa-generator">
+
+                        <div class="input-field col s12">
+                            <input id="input-pwa-title" type="text">
+                            <label for="input-pwa-title">Title</label>
+                        </div>
+
+                        <div class="file-field input-field">
+                            <div class="btn">
+                                <span>Root folder</span>
+                                <input id="input-pwa-root-folder" type="file" webkitdirectory>
+                            </div>
+                            <div class="file-path-wrapper">
+                                <input class="file-path validate" type="text">
+                            </div>
+                        </div>
+
+                        <div class="file-field input-field">
+                            <div class="btn">
+                                <span>Icon</span>
+                                <input id="input-pwa-icon" type="file" accept="image/x-png">
+                            </div>
+                            <div class="file-path-wrapper">
+                                <input class="file-path validate" type="text">
+                            </div>
+                        </div>
+
+                        <button id="btn-pwa-generate" class="btn btn-large waves-effect waves-light">Generate PWA</button>
+
+                    </form>
+
+                </section>
+
+                <section id="section-about">
+
+                    <h2>About</h2>
+
+                    <p>This application is an ongoing project. It is not guaranteed to be fully functional. Features will be added as soon as their are developed.</p>
+                    <p><a href="https://github.com/HE-Arc/pwa-playlist-generator" target="_blank">Visit this project Github</a></p>
+
+                </section>
+
+                <section id="section-what">
+
+                    <h2>What is it ?</h2>
+
+                    <p>This application allows you to generate your own website to host and share your music. The generated application is a Progressive Web App (<a href="https://developers.google.com/web/progressive-web-apps/" target="_blank">more info here</a>).</p>
+                    <p>To generate your PWA, fill the inputs and then click the GENERATE PWA button.</p>
+                    <p>Title : your application title</p>
+                    <p>Root folder : the root folder containing your audio files</p>
+                    <p>Icon : your application icon</p>
+                    <p>Download the generated zip file.</p>
+
+                </section>
+
+            </div>
+        </div>
 
         <ul id="audio-files"></ul>
 
         <a href="#" id="dl" hidden></a>
 
-        <script src="jszip.js"></script>
-        <script src="template.js"></script>
-        <script src="app.js"></script>
+        <!-- SCRIPTS -->
+
+        <script src="js/materialize.min.js"></script>
+        <script src="js/jszip.js"></script>
+        <script src="js/template.js"></script>
+        <script src="js/app.js"></script>
         <script src="pwa.js"></script>
 
     </body>

diff --git a/app/app.js → app/js/app.js b/app/app.js → app/js/app.js
@@ -1,17 +1,17 @@
 
-let title = 'Undefined Title';
+let title = 'PWA Playlist Generator';
 let audioFiles = [];
 let audioTree = '';
 let iconImg = '';
 
-// Title input
-document.querySelector('input#input-title').addEventListener('input', (evt) =>
+// Title input on input event
+document.querySelector('input#input-pwa-title').addEventListener('input', (evt) =>
 {
     title = evt.target.value;
 });
 
-// Directory input
-document.querySelector('input#input-dir').addEventListener('change', (evt) =>
+// Root folder input on change event
+document.querySelector('input#input-pwa-root-folder').addEventListener('change', (evt) =>
 {
     let files = evt.target.files;
 
@@ -22,28 +22,26 @@ document.querySelector('input#input-dir').addEventListener('change', (evt) =>
         if (files[i].type.includes('audio'))
         {
             let filename = files[i].name;
-            let filepath = files[i].webkitRelativePath;
-            let filedir = filepath.split('/').slice(0, -1).join('/');
 
             audioFiles.push(files[i]);
 
-            audioTree += '<li><a href="audio/' + filepath + '" class="audio-src">' + filename + '</a><a href="audio/' + filepath + '" class="cache-audio">Download</a></li>';
+            audioTree += '<li><a href="audio/' + filename + '" class="audio-src">' + filename + '</a><a href="audio/' + filename + '" class="cache-audio">Download</a></li>';
         }
     }
 
     document.querySelector('#audio-files').innerHTML = audioTree;
 });
 
-// Icon input
-document.querySelector('input#input-icon').addEventListener('change', (evt) =>
+// 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]);
+    //let img = document.querySelector('#uploaded-icon');
+    //img.src = URL.createObjectURL(evt.target.files[0]);
 });
 
 // Click on the Generate HTML button
-document.querySelector('#btn-generate-html').addEventListener('click', (evt) =>
+document.querySelector('#btn-pwa-generate').addEventListener('click', (evt) =>
 {
     const dataHtml = {
         title: title,

diff --git a/app/jszip.js → app/js/jszip.js b/app/jszip.js → app/js/jszip.js
diff --git a/app/js/materialize.min.js b/app/js/materialize.min.js
diff --git a/app/template.js → app/js/template.js b/app/template.js → app/js/template.js