devices: add buttons to switch between Q and R devices

Author: Vachounet

js/app.js

@@ -1,32 +1,28 @@
 import Router from './router.js'
 
 var navLinks = document.querySelectorAll(".nav-link");
-let currentRouter = Router.routes[window.location.hash];
-currentRouter.displayView();
+handleRoute(window.location.hash)
 
-if (window.location.hash) {
-	manageActiveLink(window.location.hash)
+window.onpopstate = () => {
+	handleRoute(window.location.hash)
+	window.history.pushState(
+		{},
+		destination,
+		window.location.origin + window.location.hash
+	)
 }
 
-navLinks.forEach(link => {
-	let destination = link.href
-	if (destination) {
-		link.onclick = function () {
-			manageActiveLink(destination)
-			let currentRouter = Router.routes[destination];
-			window.history.pushState(
-				{},
-				destination,
-				window.location.origin + destination
-			)
-			currentRouter.displayView()
-		}
-	}
-});
+function handleRoute(destination) {
+	manageActiveLink(destination)
+	let currentRouter = Object.keys(Router.routes)
+		.filter(route =>
+			route !== "" && destination.includes(route))
 
-window.onpopstate = () => {
-	let currentRouter = Router.routes[window.location.hash];
-	currentRouter.displayView();
+	if (destination.includes('/')) {
+		Router.routes[currentRouter].displayView(destination)
+	} else {
+		Router.routes[currentRouter].displayView()
+	}
 }
 
 function manageActiveLink(hash) {

views/devices/devices.html

@@ -1,4 +1,13 @@
-<div class="col-lg-10 mx-auto">
-  <div class="row" id="device-list">
+<div class="col-lg-12">
+  <div class="row justify-content-center">
+    <div class="col-lg-2 col-md-3 col-sm-6">
+      <a href="#devices/android-10" id="android-10" class="btn btn-light">Android Q (10)</a>
+    </div>
+    <div class="col-lg-2 col-md-3 col-sm-6">
+      <a href="#devices/android-11" id="android-11" class="btn btn-light">Android R (11)</a>
+    </div>
+  </div>
+  <div class="row justify-content-center" id="device-list">
+
   </div>
 </div>

views/devices/devices.js

@@ -3,13 +3,14 @@ import { siteURL, container, showSpinner } from '../../js/const.js'
 var devicesList = []
 const gerritURL = 'https://gerrit.omnirom.org'
 const rawURL = 'https://raw.githubusercontent.com/omnirom/'
+var currentVersion = 'android-11'
 
 class DevicesView {
 
-  async loadGithubRepos(branch) {
+  async loadGithubRepos() {
     try {
       let response = await axios
-        .get(gerritURL + "/projects/?b=" + branch + "&p=android_device", {
+        .get(gerritURL + "/projects/?b=" + currentVersion + "&p=android_device", {
         });
 
       let magic = ")]}'";
@@ -24,7 +25,7 @@ class DevicesView {
   }
 
   async loadDevice(devices) {
-    var requests = Object.keys(devices).map(repo => axios.get(rawURL + repo + "/android-10/meta/config.json"));
+    var requests = Object.keys(devices).map(repo => axios.get(rawURL + repo + "/" + currentVersion + "/meta/config.json"));
     await Promise.allSettled(requests).then(results => {
       results.forEach(result => {
         if (result.value) {
@@ -61,8 +62,8 @@ class DevicesView {
 
     devicesList.forEach(device => {
       const card = `
-      <div class="card device-card" style="width: 18rem;">
-          <img src="${device['image']}" class="card-img-top" width="250" alt="${device['model']}" >
+      <div class="card device-card col-lg-3 col-md-4 col-sm-5">
+          <img src="${device['image']}" class="card-img-top" alt="${device['model']}" >
           <div class="card-body">
             <h5 class="card-title">${device['model']}</h5>
             <p class="card-text">${device['make']}<br>${device['state']}</p>
@@ -73,26 +74,32 @@ class DevicesView {
       devicesContainer.innerHTML += card
     })
 
+    let activeButton = tempObject.querySelector('#' + currentVersion)
+    activeButton.classList.add("btn-dark");
+
     container.innerHTML = tempObject.innerHTML
   }
 
-  async displayView() {
+  async displayView(hash) {
     try {
-      if (devicesList.length === 0) {
-        showSpinner(true);
-        let d = {};
-        d['model'] = "All Devices";
-        d['make'] = "All Manufactures";
-        d['state'] = "official";
-        d['pageUrl'] = "https://dl.omnirom.org/";
-        d['image'] = "/images/default_phone_omni.png";
-        d['changelog'] = gerritURL + "/q/status:merged+android_device"
-        devicesList.push(d)
-        await this.loadGithubRepos('android-10');
-      } else {
-        this.showDevices()
+      if (hash) {
+        let androidVersion = hash.split("/")[1]
+        if (androidVersion !== currentVersion) {
+          currentVersion = androidVersion
+        }
       }
 
+      devicesList = []
+      showSpinner(true);
+      let d = {};
+      d['model'] = "All Devices";
+      d['make'] = "All Manufactures";
+      d['state'] = "official";
+      d['pageUrl'] = "https://dl.omnirom.org/";
+      d['image'] = "/images/default_phone_omni.png";
+      d['changelog'] = gerritURL + "/q/status:merged+android_device"
+      devicesList.push(d)
+      await this.loadGithubRepos();
     } catch (error) {
       console.log("display device view error: " + error);
     }