add a checkbox to displays not recommended devices

app.css

@@ -110,16 +110,30 @@ h1, h2, h3, h4, h5, h6 {
   color: #dc0067;
 }
 
-.firmwareTableLink {
+.firmwareTableLink, .notRecommendedLink, .InfoLink {
+  clear: right;
   float:right;
   color: #337ab7;
   cursor: pointer;
 }
 
-.firmwareTableLink:hover {
+.notRecommendedLink {
+  display: none;
+}
+
+.firmwareTableLink:hover, .notRecommendedLink:hover {
   text-decoration: underline;
 }
 
+.notRecommendedLabel {
+  color: #337ab7;
+}
+
+#wizard #model-pane .notRecommendedCheckbox {
+  width:auto;
+  display: inline;
+}
+
 #wizard .pane-wrapper {
   box-shadow: 0 0.15em 0.5em #ccc;
   margin: 1em 0 3em 0;
@@ -180,7 +194,8 @@ h1, h2, h3, h4, h5, h6 {
   box-shadow: 0 0 0.5em #005ea0 inset;
 }
 
-#wizard #branch-pane .warning-experimental {
+#wizard #branch-pane .warning-experimental,
+#wizard #model-pane .warning-notrecommended {
   display: none;
   margin: 1em 0;
   padding: 1em;
@@ -188,7 +203,8 @@ h1, h2, h3, h4, h5, h6 {
   border: .5em solid #009ee0;
 }
 
-#wizard #branch-pane.show-experimental-warning .warning-experimental {
+#wizard #branch-pane.show-experimental-warning .warning-experimental,
+#wizard #model-pane.show-notrecommended-warning .warning-notrecommended {
   display: block;
 }
 

app.js

@@ -104,7 +104,8 @@ var firmwarewizard = function() {
 
   var wizard = parseWizardObject();
   app.currentVersions = {};
-  var images = {};
+  var availableImages = {};
+  var images = availableImages;
   var vendormodels_reverse;
 
   var typeNames = {
@@ -145,6 +146,14 @@ var firmwarewizard = function() {
   if ("enabled_device_categories" in config) {
     enabled_device_categories = config.enabled_device_categories;
   }
+  if (config.recommended_toggle) {
+    enabled_device_categories = ['recommended'];
+    show_inline('.notRecommendedLink');
+
+    if (config.recommended_info_link) {
+      $('#notrecommendedinfo').innerHTML = '<p><a href="' + config.recommended_info_link + '" target="_new">Mehr Informationen</a>';
+    }
+  }
 
   function buildVendorModelsReverse() {
     var vendormodels_reverse = {};
@@ -188,6 +197,21 @@ var firmwarewizard = function() {
     return wizard;
   }
 
+  function setFilteredImages() {
+    images = {};
+    for (var vendor in availableImages) {
+      images[vendor] = {};
+      for (var model in availableImages[vendor]) {
+        for (var device in availableImages[vendor][model]) {
+          console.log(availableImages[vendor][model][device].category)
+          if (enabled_device_categories.indexOf(availableImages[vendor][model][device].category) > -1) {
+            addArray(images[vendor], model, availableImages[vendor][model][device]);
+          }
+        }
+      }
+    }
+  }
+
   window.onpopstate = function(event) {
     if (event.state === null) return;
     wizard = parseWizardObject(event.state);
@@ -231,6 +255,10 @@ var firmwarewizard = function() {
       scrollDown();
     });
 
+    $('#wizard .notRecommendedLink').addEventListener('click', function(e) {
+      toggleClass($('#model-pane'), 'show-notrecommended-warning');
+    });
+
     $('#wizard .firmwareTableLink').addEventListener('click', function(e) {
       firmwarewizard.showFirmwareTable();
     });
@@ -239,6 +267,17 @@ var firmwarewizard = function() {
       firmwarewizard.hideFirmwareTable();
     });
 
+    $('#notrecommendedselect').addEventListener('change', function(e) {
+      if (this.checked) {
+        enabled_device_categories = config.enabled_device_categories;
+      } else if ("enabled_device_categories" in config) {
+        enabled_device_categories = ['recommended'];
+      }
+      setFilteredImages();
+      updateHTML(wizard);
+      updateFirmwareTable();
+    });
+
     vendormodels_reverse = buildVendorModelsReverse();
 
     loadDirectories(function() {
@@ -251,7 +290,7 @@ var firmwarewizard = function() {
         var model = fullModelList[m][MODEL_MODEL];
         previews.appendChild(createPicturePreview(vendor, model, searchstring));
       }
-
+      setFilteredImages();
       updateHTML(wizard);
       show_block('.manualSelection');
       updateFirmwareTable();
@@ -370,11 +409,6 @@ var firmwarewizard = function() {
       return;
     }
 
-    if (enabled_device_categories.indexOf(device.category) == -1) {
-      // the category is not in the list of enabled categories
-      return;
-    }
-
     var strippedFilename = filename;
     strippedFilename = strippedFilename.replace(config.community_prefix, '-');
 
@@ -450,18 +484,19 @@ var firmwarewizard = function() {
     // collect branch versions
     app.currentVersions[branch] = version;
 
-    if (!(device.vendor in images)) {
-      images[device.vendor] = {};
+    if (!(device.vendor in availableImages)) {
+      availableImages[device.vendor] = {};
     }
 
-    addArray(images[device.vendor], device.model, {
+    addArray(availableImages[device.vendor], device.model, {
       'revision': revision,
       'branch': branch,
       'type': type,
       'version': version,
       'location': location,
       'size': size,
-      'preview': preview+".jpg"
+      'preview': preview+".jpg",
+      'category': device.category
     });
   }
 
@@ -674,7 +709,7 @@ var firmwarewizard = function() {
       var model = modelList[f][MODEL_MODEL];
 
       for(p = 0; p < previews.length; p++) {
-        if (previews[p].getAttribute('data-searchstring') == searchstring) {
+        if (previews[p].getAttribute('data-model') == model) {
           previews[p].style.display = 'inline-block';
           if (modelList.length == 1) {
             setClass(previews[p], 'selected', true);

config_template.js

@@ -20,6 +20,12 @@ var config = {
   vendormodels: vendormodels,
   // set enabled categories of devices (see devices.js)
   enabled_device_categories: ["recommended"],
+  // Display a checkbox that allows to display not recommended devices.
+  // This only make sense if enabled_device_categories also contains not
+  // recommended devices.
+  recommended_toggle: false,
+  // Optional link to an info page about no longer recommended devices
+  recommended_info_link: null,
   // community prefix of the firmware images
   community_prefix: 'gluon-ffda-',
   // firmware version regex

index.html

@@ -18,8 +18,27 @@
       <img src="./router.png" >
       <div class="pane-wrapper">
         <div id="model-pane" class="pane">
+          <span class="notRecommendedLink">Nicht empfohlene Geräte anzeigen</span>
           <span class="firmwareTableLink">Tabelle anzeigen</span>
           <h1>Schritt 1: Wähle Dein Routermodell</h1>
+          <div class="warning-notrecommended">
+            <p>
+              <b>Vorsicht!</b> Nicht ohne Grund siehst Du in der Voreinstellung
+              nur die empfohlenen Geräte. Diese sind gut getestet und haben
+              ausreichend Leistung um Dir und den Freifunk Benutzer auf absehbare
+              Zeit Spaß machen.
+            </p>
+            <p>
+              Wir wollen niemanden zwingen ausschließlich diese Geräte zu
+              verwenden, bitten Dich aber, dass Du Dich vorab gründlich
+              informierst, bevor Du nicht empfohlene Geräte verwendest,
+              damit Du selbst abwägen kannst, ob Du wirklich die Nachteile in
+              Kauf nehmen willst.
+            </p>
+            <div id="notrecommendedinfo"></div>
+            <input type="checkbox" id="notrecommendedselect" class="notRecommendedCheckbox" value="notRecommended" />
+            <label class="notRecommendedLabel" for="notrecommendedselect">Nicht empfohlene Geräte trotzdem anzeigen</label>
+          </div>
           <p>Erst mit der Freifunk-Firmware wird dein Router zu einem Teil des
              Freifunk-Netzes. Sie ist fertig vorkonfiguriert, um Kontakt mit
              benachbarten Freifunk-Knoten aufzunehmen, ein offenes und ohne