add help text and more configuration options

diff --git a/README.md b/README.md
index efe2c1e1b928bcc9e2dddec9a52d3ecdf9b4aab2..36d41159633201b1cb135ead824da08ef98f9b36 100644 (file)
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Yet Another Firmware Selector
 
-A simple OpenWrt firmware selector using autocompletion.
+A simple OpenWrt firmware selector using autocompletion. Uses plain HTML/JavaScript.
 
 ![image](screenshot.png)
 
@@ -11,6 +11,8 @@ Run:
 * Start webserver (e.g. `python3 -m http.server`)
 * Go to `http://localhost:8000`
 
+Configure with [config.js](www/config.js).
+
 ## Update Database
 
 OpenWrt master has a feature to create json files. The included python script can merge all these files for a new data.json file: `./collect.py bin/ bin2/ > data.json`

diff --git a/www/config.js b/www/config.js
index 9726290599590419f3fe564faa7798378b047766..0fe133938314c34861b05fff8c5322aa66c32ab9 100644 (file)
--- a/www/config.js
+++ b/www/config.js
@@ -2,6 +2,10 @@
 var config = {
   // Default language, see i18n.js
   language: 'en',
-
+  // Show help text for images
+  showHelp: false,
+  // Download link template (you can use %target, %release, %commit, %file)
+  downloadLink: 'https://downloads.openwrt.org/snapshots/targets/%target/%file',
+  // File to get data from
   data: 'data.json'
 };

diff --git a/www/index.css b/www/index.css
index 2e3497163b6153f5ed44a40fad567a8edf1f61cb..a87342674e4beddc067b34ce3d1911c7487d0195 100644 (file)
--- a/www/index.css
+++ b/www/index.css
@@ -78,7 +78,7 @@ h6 {
   letter-spacing: 0.0075em;
 }
 
-header div {
+header > div {
   padding-left: 24px;
   padding-right: 24px;
   min-height: 64px;
@@ -95,9 +95,9 @@ header div {
   padding-right: 32px;
   width: 100%;
   box-sizing: border-box;
-  margin-left: auto;
-  margin-right: auto;
   margin-top: 30px;
+  margin-right: auto;
+  margin-left: auto;
   margin-bottom: 100px;
 }
 
@@ -150,18 +150,19 @@ header div {
   background-color: #3F51B5;
 }
 
-.download-link span {
+.download-link > span {
   width: 30px;
   margin-right: 15px;
   margin-top: -2px;
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z' fill='%23fff'%3E%3C/path%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
 }
 
-#images {
-  line-height: 1.5;
-}
-
 #images div div :first-child {
   width: 5em;
   display: inline-block;
+  line-height: 1.4;
+}
+
+#images > div {
+  padding-top: 20px;
 }

diff --git a/www/index.html b/www/index.html
index af34eadc89be3a02d8f3f99662e8f079925a796f..7ec4e6ea412746bc65ee42710c61483e8d8f700f 100644 (file)
--- a/www/index.html
+++ b/www/index.html
@@ -43,12 +43,20 @@
 
                <div>
                        <h3 class="tr-downloads">Downloads</h3>
-                       <a id="sysupgrade-image" class="download-link" href="#"><span></span>SYSUPGRADE</a>
                        <a id="factory-image" class="download-link" href="#"><span></span>FACTORY</a>
+                       <a id="sysupgrade-image" class="download-link" href="#"><span></span>SYSUPGRADE</a>
                        <a id="kernel-image" class="download-link" href="#"><span></span>KERNEL</a>
                        <a id="rootfs-image" class="download-link" href="#"><span></span>ROOTFS</a>
                        <a id="tftp-image" class="download-link" href="#"><span></span>TFTP</a>
                </div>
+
+               <div>
+                       <span id="factory-help" class="tr-factory-help">Factory images are for flashing routers with OpenWrt for the first time using the vendors web interface.</span>
+                       <span id="sysupgrade-help" class="tr-sysupgrade-help">Sysupgrade images are for flashing routers that already run OpenWrt. The image can be applied using the web interface or the console.</span>
+                       <span id="kernel-help" class="tr-kernel-help">Linux kernel as a separate image.</span>
+                       <span id="rootfs-help" class="tr-rootfs-help">Root file system as a separate image.</span>
+                       <span id="tftp-help" class="tr-tftp-help">Image that can be applied using the tftp meachnism of the boot loader</span>
+               </div>
        </div>
 </div>
 

diff --git a/www/index.js b/www/index.js
index 295e4444ab8544ec1d1dd37cbe425cc64be2ddfa..c033ebaf1ddb25d8120b69c8ec764ba4e7806e8c 100644 (file)
--- a/www/index.js
+++ b/www/index.js
@@ -173,50 +173,60 @@ function extractImageType(name) {
 }
 
 function updateImages(model, target, release, commit, images) {
+  var types = ['sysupgrade', 'factory', 'rootfs', 'kernel', 'tftp'];
+
+  function hideLinks() {
+    types.forEach(function(type) {
+      $(type + '-image').style.display = 'none';
+    });
+  }
+
+  function hideHelps() {
+    types.forEach(function(type) {
+      $(type + '-help').style.display = 'none';
+    });
+  }
+
+  function showLink(type, path) {
+    var e = $(type + '-image');
+    e.href = path;
+    e.style.display = 'inline-flex';
+    if (config.showHelp) {
+      e.onmouseover = function() {
+        hideHelps();
+        $(type + '-help').style.display = 'block';
+      };
+    }
+  }
+
+  hideLinks();
+  hideHelps();
+
   if (model && target && release && commit && images) {
+    // fill out build info
     $('image-model').innerText = model;
     $('image-target').innerText = target;
     $('image-release').innerText = release;
     $('image-commit').innerText = commit;
 
+    // show links to images
     for(var i in images) {
-      var filename = images[i];
-      var path = "https://" + target + "/" + filename;
-      var type = extractImageType(filename);
-
-      if (type == "sysupgrade") {
-        $("sysupgrade-image").href = path;
-        $("sysupgrade-image").style.display = "inline-flex";
-      }
-
-      if (type == "factory") {
-        $("factory-image").href = path;
-        $("factory-image").style.display = "inline-flex";
-      }
-
-      if (type == "tftp") {
-        $("tftp-image").href = path;
-        $("tftp-image").style.display = "inline-flex";
-      }
-
-      if (type == "kernel") {
-        $("kernel-image").href = path;
-        $("kernel-image").style.display = "inline-flex";
-      }
-
-      if (type == "rootfs") {
-        $("rootfs-image").href = path;
-        $("rootfs-image").style.display = "inline-flex";
+      var file = images[i];
+      var path = config.downloadLink
+        .replace('%target', target)
+        .replace('%release', release)
+        .replace('%file', file)
+        .replace('%commit', commit);
+      var type = extractImageType(file);
+
+      if (types.includes(type)) {
+        showLink(type, path);
       }
     }
-    $("images").style.display = 'block';
+
+    $('images').style.display = 'block';
   } else {
-    $("images").style.display = 'none';
-    $("sysupgrade-image").style.display = "none";
-    $("factory-image").style.display = "none";
-    $("tftp-image").style.display = "none";
-    $("kernel-image").style.display = "none";
-    $("rootfs-image").style.display = "none";
+    $('images').style.display = 'none';
   }
 }