Skip to content

Commit

Permalink
feat: update the demo to show references
Browse files Browse the repository at this point in the history
  • Loading branch information
@ctron
ctron committed Aug 17, 2022
1 parent 1e8e87d commit c15e273
Show file tree
Hide file tree
Showing 3 changed files with 166 additions and 58 deletions.
12 changes: 4 additions & 8 deletions examples/20_reconcile/recon2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,12 +78,10 @@ function addReference(thing) {
const lastUpdate = new Date().toISOString();
sendMerge(thing, {
reportedState: {
overTemp: {
"$refs": {
lastUpdate,
value: {
"$refs": {
[me]: {},
}
[me]: {},
}
}
}
Expand All @@ -95,12 +93,10 @@ function removeReference(thing) {
const lastUpdate = new Date().toISOString();
sendMerge(thing, {
reportedState: {
overTemp: {
"$refs": {
lastUpdate,
value: {
"$refs": {
[me]: null,
}
[me]: null,
}
}
}
Expand Down
88 changes: 68 additions & 20 deletions examples/30_notifications/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

</style>
</head>
<body>
Expand All @@ -41,17 +50,35 @@
<main>
<div class="container-fluid pt-3">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">

<div class="col">
<div class="card" id="thing-overTempGroup">
<div class="card-header">
<code>overTempGroup</code> <span class="drogue-thing-flags"></span>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex" data-drogue-thing-reported-state="$refs">
<div class="col-6 fw-bold">Devices</div>
<div class="col-6" data-drogue-thing-render-refs></div>
</li>
</ul>
<div class="card-footer">
<small class="drogue-thing-sub-state text-muted"></small>
</div>
</div>
</div>

<div class="col">
<div class="card" id="thing-foo">
<div class="card" id="selected-thing">
<div class="card-header">
<code>foo</code> <span class="drogue-thing-flags"></span>
<span class="drogue-device-name"><i>Nothing selected</i></span> <span class="drogue-thing-flags"></span>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex" data-drogue-thing-reported-state="temperature">
<li class="list-group-item d-flex" data-drogue-thing-reported-state="temp">
<div class="col-6 fw-bold">Temperature</div>
<div class="col-6" data-drogue-thing-render-unit="°C" data-drogue-thing-render-value></div>
</li>
<li class="list-group-item d-flex" data-drogue-thing-reported-state="humidity">
<li class="list-group-item d-flex" data-drogue-thing-reported-state="hum">
<div class="col-6 fw-bold">Humidity</div>
<div class="col-6" data-drogue-thing-render-unit="%" data-drogue-thing-render-value></div>
</li>
Expand All @@ -78,26 +105,47 @@
<script src="thing.js"></script>

<script>

const api = new Api("http://localhost:8080", "default");
new ThingCard(new Thing(api, "foo"), $('#thing-foo'), {
showTimestamps: false,
labelsToCardStyle: (labels) => {
if ("overTemp" in labels) {
return "error";
}
if ("highTemp" in labels) {
return "warning";
}
},
labelsToPropertyStyle: (labels, name) => {
if ("overTemp" in labels && name === "temperature") {
return "error";
}
if ("highTemp" in labels && name === "temperature") {
return "warning";
let selectedThing = null;

function showThing(thing) {
let card = $('#selected-thing');
card.find('.card-header .drogue-device-name').html($(`<code>${thing}</code>`));

if (selectedThing) {
selectedThing.dispose();
selectedThing.thing.dispose();
selectedThing = null;
}

selectedThing = new ThingCard(new Thing(api, thing), card, {
showTimestamps: false,
labelsToCardStyle: (labels) => {
if ("overTemp" in labels) {
return "error";
}
if ("highTemp" in labels) {
return "warning";
}
},
labelsToPropertyStyle: (labels, name) => {
if ("overTemp" in labels && name === "temperature") {
return "error";
}
if ("highTemp" in labels && name === "temperature") {
return "warning";
}
}
});
}

new ThingCard(new Thing(api, "overTempGroup"), $('#thing-overTempGroup'), {
refClicked: (ref) => {
showThing(ref);
}
});

</script>

</body>
Expand Down
124 changes: 94 additions & 30 deletions examples/30_notifications/thing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -94,7 +98,8 @@ class Thing {
}

#unsubscribe(handle) {
this.#subscriptions.delete(handle);
let result = this.#subscriptions.delete(handle);
console.debug("Removed: ${result}")
}

#notifyAll(event) {
Expand All @@ -117,7 +122,7 @@ class ThingSubscription {
this.#callback(event);
}

destroy() {
dispose() {
if (this.#destroyer !== undefined) {
this.#destroyer();
this.#destroyer = undefined;
Expand All @@ -137,6 +142,7 @@ class ThingCard {
showTimestamps: false,
labelsToCardStyle: (labels) => {},
labelsToPropertyStyle: (labels, propertyName) => {},
refClicked: (ref) => {},
}, ...options
};
this.connected = false;
Expand All @@ -147,8 +153,10 @@ class ThingCard {
})
}

destroy() {
this.#subscription.destroy();
dispose() {
if (this.#subscription !== undefined) {
this.#subscription.dispose();
}
}

#setState(event) {
Expand All @@ -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) {
Expand Down Expand Up @@ -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 = $(`<span>${value?.value}</span>`);
if (unit !== undefined) {
content.append(unit);
}
case "warning": {
classes += "list-group-item-warning";
break;
if (this.options.showTimestamps) {
content.append($(`<small class="text-muted">(${lastUpdate?.toISOString()})</small>`))
}
} else {
content = $(`<i>unknown</i>`);
}
} else {
classes += "list-group-item-secondary";
}

element.attr('class', classes);
renderValue.html(content);
}

let content;
if (value !== undefined) {
content = $(`<span>${value?.value}</span>`);
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($(`<small class="text-muted">(${lastUpdate?.toISOString()})</small>`))

element.attr('class', classes);

let content;
if (value?.value) {
content = $(`<ul class="drogue-ref-group">`);
for (const [ref, v] of Object.entries(value?.value)) {
const link = $(`<a class="drogue-thing-ref">${ref}</a>`);
link.on("click", ()=> {
console.debug("Clicked: ", ref);
this.options.refClicked(ref);
});
const item = $(`<li></li>`);
item.append(link);
content.append(item);
}
if (this.options.showTimestamps) {
content.append($(`<small class="text-muted">(${lastUpdate?.toISOString()})</small>`))
}
} else {
content = $(`<i>none</i>`);
}
} else {
content = $(`<i>unknown</i>`);

renderRefs.html(content);
}

element.find("[data-drogue-thing-render-value]").html(content);

});
}
Expand Down

0 comments on commit c15e273

Please sign in to comment.