From c15e273b56a212929e8da98cf8ddc95fbee488d0 Mon Sep 17 00:00:00 2001 From: Jens Reimann Date: Wed, 20 Jul 2022 18:01:57 +0200 Subject: [PATCH] feat: update the demo to show references --- examples/20_reconcile/recon2.js | 12 +-- examples/30_notifications/index.html | 88 ++++++++++++++----- examples/30_notifications/thing.js | 124 ++++++++++++++++++++------- 3 files changed, 166 insertions(+), 58 deletions(-) diff --git a/examples/20_reconcile/recon2.js b/examples/20_reconcile/recon2.js index 8399319..e731fc6 100644 --- a/examples/20_reconcile/recon2.js +++ b/examples/20_reconcile/recon2.js @@ -78,12 +78,10 @@ function addReference(thing) { const lastUpdate = new Date().toISOString(); sendMerge(thing, { reportedState: { - overTemp: { + "$refs": { lastUpdate, value: { - "$refs": { - [me]: {}, - } + [me]: {}, } } } @@ -95,12 +93,10 @@ function removeReference(thing) { const lastUpdate = new Date().toISOString(); sendMerge(thing, { reportedState: { - overTemp: { + "$refs": { lastUpdate, value: { - "$refs": { - [me]: null, - } + [me]: null, } } } diff --git a/examples/30_notifications/index.html b/examples/30_notifications/index.html index 4c5749e..53a6d79 100644 --- a/examples/30_notifications/index.html +++ b/examples/30_notifications/index.html @@ -15,6 +15,15 @@ .card.text-white .card-header code { color: bisque !important; } + +.drogue-ref-group > li { + list-style: none; +} + +a.drogue-thing-ref { + cursor: pointer; +} + @@ -41,17 +50,35 @@
+ +
+
+
+ overTempGroup +
+
    +
  • +
    Devices
    +
    +
    • +
+
+ +
+
+
+
-
+
- foo + Nothing selected
    -
  • +
  • Temperature
    • -
  • +
  • Humidity
    • @@ -78,26 +105,47 @@ diff --git a/examples/30_notifications/thing.js b/examples/30_notifications/thing.js index b274a3a..216b1d3 100644 --- a/examples/30_notifications/thing.js +++ b/examples/30_notifications/thing.js @@ -74,6 +74,10 @@ class Thing { socket.close(); } + dispose() { + this.#disconnect(); + } + #reconnect() { // if we had a socket and are not already connecting if (this.#socket && !this.#connecting) { @@ -94,7 +98,8 @@ class Thing { } #unsubscribe(handle) { - this.#subscriptions.delete(handle); + let result = this.#subscriptions.delete(handle); + console.debug("Removed: ${result}") } #notifyAll(event) { @@ -117,7 +122,7 @@ class ThingSubscription { this.#callback(event); } - destroy() { + dispose() { if (this.#destroyer !== undefined) { this.#destroyer(); this.#destroyer = undefined; @@ -137,6 +142,7 @@ class ThingCard { showTimestamps: false, labelsToCardStyle: (labels) => {}, labelsToPropertyStyle: (labels, propertyName) => {}, + refClicked: (ref) => {}, }, ...options }; this.connected = false; @@ -147,8 +153,10 @@ class ThingCard { }) } - destroy() { - this.#subscription.destroy(); + dispose() { + if (this.#subscription !== undefined) { + this.#subscription.dispose(); + } } #setState(event) { @@ -173,6 +181,11 @@ class ThingCard { } #render() { + if (this.#card === undefined) { + console.debug("Invalid card target for", this.thing) + return; + } + const labels = this.state?.metadata?.labels || {}; if (this.connected) { @@ -218,43 +231,94 @@ class ThingCard { element = $(element); const name = element.data("drogue-thing-reported-state"); const value = this.state.reportedState?.[name]; - const unit = element.find("[data-drogue-thing-render-unit]").data("drogue-thing-render-unit"); - const lastUpdate = makeDate(value?.lastUpdate); + const renderValue = element.find("[data-drogue-thing-render-value]"); + if (renderValue.length) { + + const unit = element.find("[data-drogue-thing-render-unit]").data("drogue-thing-render-unit"); + const lastUpdate = makeDate(value?.lastUpdate); + + let classes = "list-group-item d-flex "; + if (value !== undefined) { + const style = this.options.labelsToPropertyStyle(labels, name); + switch (style) { + case "error": { + classes += "list-group-item-danger"; + break; + } + case "warning": { + classes += "list-group-item-warning"; + break; + } + } + } else { + classes += "list-group-item-secondary"; + } + + element.attr('class', classes); - let classes = "list-group-item d-flex "; - if (value !== undefined) { - const style = this.options.labelsToPropertyStyle(labels, name); - switch (style) { - case "error": { - classes += "list-group-item-danger"; - break; + let content; + if (value !== undefined) { + content = $(`${value?.value}`); + if (unit !== undefined) { + content.append(unit); } - case "warning": { - classes += "list-group-item-warning"; - break; + if (this.options.showTimestamps) { + content.append($(`(${lastUpdate?.toISOString()})`)) } + } else { + content = $(`unknown`); } - } else { - classes += "list-group-item-secondary"; - } - element.attr('class', classes); + renderValue.html(content); + } - let content; - if (value !== undefined) { - content = $(`${value?.value}`); - if (unit !== undefined) { - content.append(unit); + const renderRefs = element.find("[data-drogue-thing-render-refs]"); + if (renderRefs.length) { + const lastUpdate = makeDate(value?.lastUpdate); + + let classes = "list-group-item d-flex "; + if (value !== undefined) { + const style = this.options.labelsToPropertyStyle(labels, name); + switch (style) { + case "error": { + classes += "list-group-item-danger"; + break; + } + case "warning": { + classes += "list-group-item-warning"; + break; + } + } + } else { + classes += "list-group-item-secondary"; } - if (this.options.showTimestamps) { - content.append($(`(${lastUpdate?.toISOString()})`)) + + element.attr('class', classes); + + let content; + if (value?.value) { + content = $(`
      `); + for (const [ref, v] of Object.entries(value?.value)) { + const link = $(`${ref}`); + link.on("click", ()=> { + console.debug("Clicked: ", ref); + this.options.refClicked(ref); + }); + const item = $(`
    • `); + item.append(link); + content.append(item); + } + if (this.options.showTimestamps) { + content.append($(`(${lastUpdate?.toISOString()})`)) + } + } else { + content = $(`none`); } - } else { - content = $(`unknown`); + + renderRefs.html(content); } - element.find("[data-drogue-thing-render-value]").html(content); }); }