From 2fcb17e2a46181ab8f7c2a716ea3c1e4d4b23a3c Mon Sep 17 00:00:00 2001 From: Moritz Warning Date: Wed, 29 Jan 2020 15:09:09 +0100 Subject: [PATCH] add help text and more configuration options --- README.md | 4 ++- www/config.js | 6 +++- www/index.css | 17 +++++------ www/index.html | 10 ++++++- www/index.js | 78 ++++++++++++++++++++++++++++---------------------- 5 files changed, 70 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index efe2c1e..36d4115 100644 --- 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 9726290..0fe1339 100644 --- 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 2e34971..a873426 100644 --- 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 af34ead..7ec4e6e 100644 --- a/www/index.html +++ b/www/index.html @@ -43,12 +43,20 @@

Downloads

- SYSUPGRADE FACTORY + SYSUPGRADE KERNEL ROOTFS TFTP
+ +
+ Factory images are for flashing routers with OpenWrt for the first time using the vendors web interface. + Sysupgrade images are for flashing routers that already run OpenWrt. The image can be applied using the web interface or the console. + Linux kernel as a separate image. + Root file system as a separate image. + Image that can be applied using the tftp meachnism of the boot loader +
diff --git a/www/index.js b/www/index.js index 295e444..c033eba 100644 --- 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'; } } -- 2.30.2