recompile

src/config.js

@@ -12,9 +12,8 @@ const reservedMappings = ["u", "s"];
  * Load mappings, create a table showing them with a "remove" button each
  */
 function renderMappings() {
-    console.log(localStorage.getItem('mappings'));
+    // console.log(localStorage.getItem('mappings'));
     const mappings = new Map(JSON.parse(localStorage.getItem('mappings')) || []);
-    console.log(typeof mappings);
     const tbody = document.querySelector('#mappingTable tbody');
     tbody.innerHTML = ''; // clear table body
     mappings.forEach((directory, key) => {

src/index.html

@@ -36,7 +36,7 @@
     </main>
     <footer>
         <!-- <div class="keydebug">Key: <span id="keydebug"></span></div> -->
-        <div class="statusline">Status: <span id="status"></span></div>
+        <div class="statusline">Status: <span id="status">Loading</span></div>
         <!-- Imgsort 2 by Matthias Quintern -->
     </footer>
 </body>

src/index.js

@@ -5,7 +5,7 @@ const audioExtensions =['mp3', 'ogg', 'wav', 'flac'];
 const mappings = new Map(JSON.parse(localStorage.getItem('mappings')) || []);
 let statusLine = document.getElementById('status');
 // store for when done with sorting TODO display
-let initialContent = document.getElementById('current-file').innerHTML;
+let splash = document.getElementById('current-file').innerHTML;
 
 let history = [];
 
@@ -19,11 +19,10 @@ let history = [];
 function showServerError(fname, status, text) {
     if (status == 500) {
         message = `in ${fname}: server returned ${status}: '${text}'`;
-    else {
+    } else {
         message = `in ${fname}: server returned ${status}`;
-
     }
-    statusLine.innerHTML = message
+    statusLine.textContent = message;
     console.error(message);
 }
 
@@ -143,8 +142,12 @@ function renderCurrentFile() {
     // }
     const currentFileDiv = document.getElementById('current-file');
     currentFileDiv.innerHTML = "";
-    let element = createMediaFileElement(currentFile, true);
-    currentFileDiv.appendChild(element);
+    if (currentFile) {
+        let element = createMediaFileElement(currentFile, true);
+        currentFileDiv.appendChild(element);
+    } else {
+        currentFileDiv.innerHTML = splash;
+    }
 }
 
 
@@ -168,7 +171,12 @@ function preloadNextFile() {
 
 // set the currentFile variable according to currentFileIdx
 function setCurrentFile() {
-    // if none set and
+    // check configuration
+    if (mappings.size == 0) {
+        statusLine.textContent = "No mappings configured - Click 'Configure' first";
+        return;
+    }
+    // if none set and there are files
     if (currentFileIdx == null && fileList.length > 0) {
         currentFileIdx = 0;
     }
@@ -184,6 +192,7 @@ function setCurrentFile() {
     else {
         currentFileIdx = null;
         currentFile = "";
+        statusLine.textContent = "No more files to sort";
     }
     renderCurrentFile();
     renderFileList();
@@ -200,7 +209,7 @@ async function moveFile(directory) {
     const text = await response.text();
     // console.log(text);
     if (response.ok) {
-        statusLine.innerHTML = `Moved '${currentFile}' to '${directory}'`;
+        statusLine.textContent = `Moved '${currentFile}' to '${directory}'`;
         history.push([currentFile, directory]);
         // remove file from list
         fileList.splice(currentFileIdx, 1);
@@ -216,7 +225,7 @@ async function moveFile(directory) {
 
 async function undo() {
     if (!history.length > 0) {
-        statusLine.innerHTML = "Nothing to undo"
+        statusLine.textContent = "Nothing to undo"
         return;
     }
     const [file, directory] = history.pop();
@@ -248,6 +257,7 @@ async function initialize() {
     renderFileList();
     // setCurrentFile();
     preloadNextFile();
+    statusLine.textContent = "Loaded";
 }
 
 // load existing mappings on page load

src/style.css

@@ -183,6 +183,7 @@ button:hover {
   width: 100%;
   height: 300px;
   position: relative;
+  overflow: scroll;
 }
 .current-file .imgsort2 {
   font-size: 3rem;