Generalize store quering functions

client/devices-page.js

@@ -2,78 +2,50 @@
 
 import m from "mithril";
 
-import config from "./config";
+import * as config from "./config";
 import filterComponent from "./filter-component";
 import * as filterParser from "../common/filter-parser";
-
-function load(filter, limit) {
-  return new Promise((resolve, reject) => {
-    m
-      .request({
-        url: "/api/devices/",
-        data: { filter: filter, limit: limit }
-      })
-      .then(res => {
-        resolve(res);
-      })
-      .catch(err => {
-        err.message = err.message || "Unknown error";
-        reject(err);
-      });
-  });
-}
-
-function count(filter, limit) {
-  return new Promise((resolve, reject) => {
-    function extract(xhr) {
-      return +xhr.getResponseHeader("x-total-count");
-    }
-    m
-      .request({
-        method: "HEAD",
-        url:
-          "/api/devices/?" +
-          m.buildQueryString({ filter: filter, limit: limit }),
-        extract: extract
-      })
-      .then(res => {
-        resolve(res);
-      })
-      .catch(err => {
-        err.message = err.message || "Unknown error";
-        reject(err);
-      });
-  });
-}
+import Filter from "../common/filter";
+import * as store from "./store";
+import * as components from "./components";
 
 function init(args) {
-  return new Promise((resolve, reject) => {
-    let filter;
-    if (args.filter) filter = filterParser.parse(args.filter);
-
-    Promise.all([count(args.filter), load(args.filter, config.pageSize)])
-      .then(res => {
-        resolve({ filter: filter, total: res[0], devices: res[1] });
-      })
-      .catch(reject);
+  return new Promise(resolve => {
+    let filter = new Filter(args.filter);
+    resolve({ filter: filter });
   });
 }
 
 function renderTable(devices, parameters, total, showMoreCallback) {
   let labels = [];
   for (let param of parameters) labels.push(m("th", param.label));
+  labels.push(m("th"));
 
   let rows = [];
   for (let device of devices)
     rows.push(
       m(
         "tr",
-        parameters.map(p => {
-          if (!device[p.parameter] || !device[p.parameter].value)
-            return m("td.na");
-          if (!device[p.parameter].value[0] === "") return m("td.blank");
-          return m("td", device[p.parameter].value[0]);
-        })
+        parameters
+          .map(p => {
+            const attrs = Object.assign({ device: device }, p);
+            const comp = m(components.get("parameter"), attrs);
+            return m("td", comp);
+          })
+          .concat(
+            m(
+              "td.table-row-links",
+              m(
+                "a",
+                {
+                  href: `#!/devices/${encodeURIComponent(
+                    device["DeviceID.ID"].value[0]
+                  )}`
+                },
+                "Show"
+              )
+            )
+          )
       )
     );
 
@@ -84,7 +56,7 @@ function renderTable(devices, parameters, total, showMoreCallback) {
 
   let tfoot = m(
     "tfoot",
-    m("tr", m("td", { colspan: labels.length }, footerElements))
+    m("tr", m("td", { colspan: labels.length + 1 }, footerElements))
   );
 
   return m("table.table", [
@@ -99,18 +71,8 @@ const component = {
     document.title = "Devices - GenieACS";
 
     function showMore() {
-      const lastDevice = vnode.attrs.devices[vnode.attrs.devices.length - 1];
-      let f = filterParser.and(vnode.attrs.filter, [
-        ">",
-        "DeviceID.ID",
-        lastDevice["DeviceID.ID"].value[0]
-      ]);
-
-      load(filterParser.stringify(f), config.pageSize).then(res => {
-        vnode.attrs.devices = vnode.attrs.devices.concat(res);
-        if (res.length < config.pageSize)
-          vnode.attrs.total = vnode.attrs.devices.length;
-      });
+      vnode.state.showCount = (vnode.state.showCount || 10) + 10;
+      m.redraw();
     }
 
     function onFilterChanged(filter) {
@@ -119,16 +81,23 @@ const component = {
       m.route.set("/devices", params);
     }
 
+    let devs = store.fetch(
+      "devices",
+      vnode.attrs.filter,
+      vnode.state.showCount || 10
+    );
+    let count = store.count("devices", vnode.attrs.filter);
+
     return [
       m("h1", "Listing devices"),
       m(filterComponent, {
-        filter: vnode.attrs.filter,
+        filter: vnode.attrs.filter ? vnode.attrs.filter.ast : null,
         onChange: onFilterChanged
       }),
       renderTable(
-        vnode.attrs.devices,
-        config.index,
-        vnode.attrs.total,
+        devs.value,
+        Object.values(config.get("ui.index")),
+        count.value,
         showMore
       )
     ];