Add filtering for Bangle.js 1 and 2

core

@@ -1 +1 @@
-Subproject commit 0fd608f085deff9b39f2db3559ecc88edb232aba
+Subproject commit bc5b1284f41b0fcfdd264e1e2f12872e0b18c479

css/main.css

@@ -23,6 +23,9 @@
 .filter-nav {
   display: inline-block;
 }
+.device-nav {
+  display: inline-block;
+}
 .sort-nav {
   float: right;
 }

index.html

@@ -60,6 +60,17 @@
 
     <div class="container apploader-tab" id="librarycontainer">
       <div>
+        <div class="dropdown devicetype-nav">
+          <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
+            <span>All apps</span><i class="icon icon-caret"></i>
+          </a>
+          <!-- menu component -->
+          <ul class="menu">
+            <li class="menu-item"><a>All apps</a></li>
+            <li class="menu-item"><a dt="BANGLEJS">Bangle.js 1</a></li>
+            <li class="menu-item"><a dt="BANGLEJS2">Bangle.js 2</a></li>
+          </ul>
+        </div>
         <div class="filter-nav">
           <label class="chip active" filterid="">Default</label>
           <label class="chip" filterid="clock">Clocks</label>

loader.js

@@ -14,6 +14,10 @@ if (window.location.host=="banglejs.com") {
 var RECOMMENDED_VERSION = "2v10";
 // could check http://www.espruino.com/json/BANGLEJS.json for this
 
+// We're only interested in Bangles
+DEVICEINFO = DEVICEINFO.filter(x=>x.id.startsWith("BANGLEJS"));
+
+// Set up source code URL
 (function() {
   let username = "espruino";
   let githubMatch = window.location.href.match(/\/(\w+)\.github\.io/);
@@ -21,6 +25,7 @@ var RECOMMENDED_VERSION = "2v10";
   Const.APP_SOURCECODE_URL = `https://github.com/${username}/BangleApps/tree/master/apps`;
 })();
 
+// When a device is found, filter the apps accordingly
 function onFoundDeviceInfo(deviceId, deviceVersion) {
   if (deviceId != "BANGLEJS" && deviceId != "BANGLEJS2") {
     showToast(`You're using ${deviceId}, not a Bangle.js. Did you want <a href="https://espruino.com/apps">espruino.com/apps</a> instead?` ,"warning", 20000);
@@ -33,4 +38,110 @@ function onFoundDeviceInfo(deviceId, deviceVersion) {
   if (deviceId == "BANGLEJS2") {
     Const.MESSAGE_RELOAD = 'Hold button\nto reload';
   }
+
+  // check against features shown?
+  filterAppsForDevice(deviceId);
+  /* if we'd saved a device ID but this device is different, ensure
+  we ask again next time */
+  var savedDeviceId = getSavedDeviceId();
+  if (savedDeviceId!==undefined && savedDeviceId!=deviceId)
+    setSavedDeviceId(undefined);
 }
+
+var originalAppJSON = undefined;
+function filterAppsForDevice(deviceId) {
+  if (originalAppJSON===undefined)
+    originalAppJSON = appJSON;
+
+  var device = DEVICEINFO.find(d=>d.id==deviceId);
+  // set the device dropdown
+  document.querySelector(".devicetype-nav span").innerText = device ? device.name : "All apps";
+
+  if (!device) {
+    if (deviceId!==undefined)
+      showToast(`Device ID ${deviceId} not recognised. Some apps may not work`, "warning");
+    appJSON = originalAppJSON;
+  } else {
+    // Now filter apps
+    appJSON = originalAppJSON.filter(app => {
+      var supported = ["BANGLEJS"];
+      if (!app.supports) {
+        console.log(`App ${app.id} doesn't include a 'supports' field - ignoring`);
+        return false;
+      }
+      if (app.supports.includes(deviceId)) return true;
+      //console.log(`Dropping ${app.id} because ${deviceId} is not in supported list ${app.supports.join(",")}`);
+      return false;
+    });
+  }
+  refreshLibrary();
+}
+
+// If 'remember' was checked in the window below, this is the device
+function getSavedDeviceId() {
+  let deviceId = localStorage.getItem("deviceId");
+  if (("string"==typeof deviceId) && DEVICEINFO.find(d=>d.id == deviceId))
+    return deviceId;
+  return undefined;
+}
+
+function setSavedDeviceId(deviceId) {
+  localStorage.setItem("deviceId", deviceId);
+}
+
+// At boot, show a window to choose which type of device you have...
+window.addEventListener('load', (event) => {
+  let deviceId = getSavedDeviceId()
+  if (deviceId !== undefined)
+    return filterAppsForDevice(deviceId);
+
+  var html = `<div class="columns">
+    ${DEVICEINFO.map(d=>`
+    <div class="column col-6 col-xs-6">
+      <div class="card devicechooser" deviceid="${d.id}" style="cursor:pointer">
+        <div class="card-header">
+          <div class="card-title h5">${d.name}</div>
+          <!--<div class="card-subtitle text-gray">...</div>-->
+        </div>
+        <div class="card-image">
+          <img src="${d.img}" alt="${d.name}" width="256" height="256" class="img-responsive">
+        </div>
+      </div>
+    </div>`).join("\n")}
+  </div><div class="columns">
+    <div class="column col-12">
+    <div class="form-group">
+      <label class="form-switch">
+        <input type="checkbox" id="remember_device">
+        <i class="form-icon"></i> Don't ask again
+      </label>
+    </div>
+    </div>
+  </div>`;
+  showPrompt("Which Bangle.js?",html,{},false);
+  htmlToArray(document.querySelectorAll(".devicechooser")).forEach(button => {
+    button.addEventListener("click",event => {
+      let rememberDevice = document.getElementById("remember_device").checked;
+
+      let button = event.currentTarget;
+      let deviceId = button.getAttribute("deviceid");
+      hidePrompt();
+      console.log("Chosen device", deviceId);
+      setSavedDeviceId(rememberDevice ? deviceId : undefined);
+      filterAppsForDevice(deviceId);
+    });
+  });
+});
+
+// Hook onto device chooser dropdown
+window.addEventListener('load', (event) => {
+  htmlToArray(document.querySelectorAll(".devicetype-nav .menu-item")).forEach(button => {
+    button.addEventListener("click", event => {
+      var a = event.target;
+      var deviceId = a.getAttribute("dt")||undefined;
+      filterAppsForDevice(deviceId); // also sets the device dropdown
+      setSavedDeviceId(undefined); // ask at startup next time
+      document.querySelector(".devicetype-nav span").innerText = a.innerText;
+    });
+  });
+});