ednl-liftstatus-web-components
Version:
The EDNL LiftStatus web components
190 lines (189 loc) • 7.63 kB
JavaScript
import { Host, h } from "@stencil/core";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
dayjs.extend(relativeTime);
import "dayjs/locale/nl-be";
dayjs.locale("nl-be");
import { sensorInfo } from "../../utils/sensorInfo";
import { isEmpty } from "lodash-es";
import { getStore } from "../../store";
import statusCodesState from "../../stores/status-codes.store";
export class LsStatusMessages {
constructor() {
/**
* The sensor ID associated with the status messages.
*/
this.sensorId = 513;
// This function processes the raw data from the socket server
this.updateData = (sensorData) => {
var _a, _b, _c, _d, _e;
if (isEmpty(sensorData === null || sensorData === void 0 ? void 0 : sensorData.values[this.sensorId]))
return;
const items = sensorData.values[this.sensorId].split(",");
let result = [];
for (const item of items) {
const parts = item.split(":");
const identifier = parts[0];
const timestamp = dayjs.unix(parseInt(parts[1], 10) / 1000);
const humanReadableTimestamp = timestamp.format("D MMM YYYY H:mm:ss");
const relativeTimestamp = timestamp.fromNow();
const active = parseInt(parts[2], 10);
// The description and severity level are retrieved from the central store
const description = (_b = (_a = statusCodesState[identifier]) === null || _a === void 0 ? void 0 : _a.description) !== null && _b !== void 0 ? _b : identifier;
const severity = (_d = (_c = statusCodesState[identifier]) === null || _c === void 0 ? void 0 : _c.level) !== null && _d !== void 0 ? _d : null;
// Add the item to the results array
if (active === 1 && ((_e = this.severityFilter) === null || _e === void 0 ? void 0 : _e.includes(severity))) {
result.push({
id: identifier,
humanReadableTimestamp,
relativeTimestamp,
description,
severity,
});
}
}
this.lastChange = dayjs(sensorData.updated[this.sensorId]).fromNow();
this.statusMessages = result;
this.sensorData = sensorData;
};
this.isSeverity = (value) => {
return ["", "impact", "informational", "non-impact"].includes(value);
};
this.showTitle = true;
this.severityOptions = ",impact,informational,non-impact";
this.statusMessages = [];
this.lastChange = "";
this.time = Date.now();
this.idKey = undefined;
}
connectedCallback() {
// The timer is used to update the relative timestamps
this.timer = window.setInterval(() => {
// Update the data, so that the relative timestamp gets updated
this.updateData(this.sensorData);
// The timestamp is actually not displayed, but is only used to update the state and rerender the DOM
this.time = Date.now();
}, 20000);
const severityFilterSplit = this.severityOptions
.replace(/\s+/g, "")
.split(",");
const severityFilter = [];
severityFilterSplit.forEach((item) => {
if (this.isSeverity(item) && !severityFilter.includes(item)) {
severityFilter.push(item);
}
});
if (severityFilter.length > 0) {
this.severityFilter = severityFilter;
}
else {
console.group("%cError%c [LsStatusMessages] Incorrect severity filter options supplied", "color: #DC2626; background-color: #FEF2F2; display: inline-block; padding: 0 4px; border-radius: 2px;", "");
console.log("Allowed options: '<empty_string>, impact, informational and non-impact");
console.log("Check https://springtree.github.io/ednl-liftstatus-web-components/#/components/ls-status-messages for more information");
console.groupEnd();
}
}
async componentWillLoad() {
this.store = await getStore(this.idKey);
this.updateData(this.store.state.currentSensorData);
this.store.onChange("currentSensorData", (sensorData) => {
this.updateData(sensorData);
});
this.componentTitle = sensorInfo.getLabel(this.sensorId);
}
render() {
let errorMessage = false;
if (this.store.state.error.type === "Socket") {
errorMessage = "Geen verbinding";
clearInterval(this.timer);
this.timer = null;
}
else if (this.store.state.error.type === "Token") {
errorMessage = this.store.state.error.message;
clearInterval(this.timer);
this.timer = null;
}
return (h(Host, null, h("slot", null), h("div", { class: "ls-status-messages" }, this.showTitle && (h("div", { class: "title" }, this.componentTitle || "Statusmeldingen")), this.lastChange === "" ? (h("div", { class: "messages" }, errorMessage === false ? (h("div", { class: "label" }, "Meldingen laden...")) : (h("div", { class: "label" }, errorMessage)), errorMessage && (h("div", { class: "timestamp" }, "More information in the browser console")))) : (h("div", { class: "messages" }, this.statusMessages.length > 0 ? (this.statusMessages.map((message) => (h("div", { class: "message" }, h("div", { class: "label", title: message.id }, message.description || message.id), h("div", { class: `severity ${message.severity}` }, message.severity || "geen"), h("div", { class: "human-readable-timestamp" }, message.humanReadableTimestamp), h("div", { class: "timestamp relative-timestamp" }, message.relativeTimestamp))))) : (h("dt", { class: "label" }, "Geen actuele statusmeldingen")), this.statusMessages.length === 0 && (h("div", { class: "timestamp" }, "Laatste wijziging: ", this.lastChange)))))));
}
disconnectedCallback() {
window.clearInterval(this.timer);
this.timer = null;
}
static get is() { return "ls-status-messages"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["ls-status-messages.css"]
};
}
static get styleUrls() {
return {
"$": ["ls-status-messages.css"]
};
}
static get properties() {
return {
"showTitle": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "true",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether or not to show the title of the component."
},
"attribute": "show-title",
"reflect": false,
"defaultValue": "true"
},
"severityOptions": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\",impact,informational,non-impact\"",
"resolved": "\",impact,informational,non-impact\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Allows user to filter messages based on severity"
},
"attribute": "severity-options",
"reflect": false,
"defaultValue": "\",impact,informational,non-impact\""
},
"idKey": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The unique key that is used to identify store data."
},
"attribute": "id-key",
"reflect": false
}
};
}
static get states() {
return {
"statusMessages": {},
"lastChange": {},
"time": {}
};
}
}
//# sourceMappingURL=ls-status-messages.js.map