ednl-liftstatus-web-components/dist/components/ls-status-item2.js

The EDNL LiftStatus web components

import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { c as createCommonjsModule, d as dayjs_min, a as commonjsGlobal, i as isEmpty, g as getStore } from './store.js';
import { r as relativeTime } from './relativeTime.js';
import { s as sensorInfo } from './sensorInfo.js';
import { i as includes } from './includes.js';

createCommonjsModule(function (module, exports) {
!function(e,a){module.exports=a(dayjs_min);}(commonjsGlobal,(function(e){function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=a(e),n={name:"nl",weekdays:"zondag_maandag_dinsdag_woensdag_donderdag_vrijdag_zaterdag".split("_"),weekdaysShort:"zo._ma._di._wo._do._vr._za.".split("_"),weekdaysMin:"zo_ma_di_wo_do_vr_za".split("_"),months:"januari_februari_maart_april_mei_juni_juli_augustus_september_oktober_november_december".split("_"),monthsShort:"jan_feb_mrt_apr_mei_jun_jul_aug_sep_okt_nov_dec".split("_"),ordinal:function(e){return "["+e+(1===e||8===e||e>=20?"ste":"de")+"]"},weekStart:1,yearStart:4,formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"DD-MM-YYYY",LL:"D MMMM YYYY",LLL:"D MMMM YYYY HH:mm",LLLL:"dddd D MMMM YYYY HH:mm"},relativeTime:{future:"over %s",past:"%s geleden",s:"een paar seconden",m:"een minuut",mm:"%d minuten",h:"een uur",hh:"%d uur",d:"een dag",dd:"%d dagen",M:"een maand",MM:"%d maanden",y:"een jaar",yy:"%d jaar"}};return d.default.locale(n,null,!0),n}));
});

const lsStatusItemCss = ":host{display:block;font-family:var(--ls-font-family);color:var(--ls-font-primary-color)}.ls-status-item{padding-bottom:var(--ls-text-base);margin:0}.ls-status-item .label{font-size:var(--ls-text-base);line-height:var(--ls-line-base);margin:0}.ls-status-item .value{font-size:var(--ls-text-2xl);line-height:var(--ls-line-2xl);font-weight:600;margin:0}.ls-status-item .timestamp{font-size:var(--ls-text-sm);line-height:var(--ls-line-sm);color:var(--ls-gray-600);margin:0}";

dayjs_min.extend(relativeTime);
dayjs_min.locale("nl");
const LsStatusItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    /**
     * Specifies the IDs and labels of the sensors that are to be displayed.
     */
    this.allowedIds = "500,501,502,503,514,515,590";
    // Split the string into an array and use typecasting to convert into numbers
    this.sensorsArray = this.allowedIds.split(",").map(Number);
    this.updateData = (sensorData) => {
      // Reset timer to prevent unnecessary updates
      this.clearTimer();
      this.setTimer();
      // If sensorData is empty, we don't need to update the data
      if (isEmpty(sensorData))
        return;
      // The sensor values of 501 and 514 and 515 are zero based, but we need to show them one based
      if (includes([501, 514, 515], this.sensorId) &&
        !isNaN(parseInt(sensorData.values[this.sensorId], 10))) {
        this.sensorData = sensorData.values[this.sensorId] + 1;
      }
      else {
        this.sensorData = sensorData.values[this.sensorId];
      }
      // Calculate relative timestamp
      this.timestamp = dayjs_min(sensorData.updated[this.sensorId]).fromNow();
    };
    this.sensorId = undefined;
    this.idKey = undefined;
    this.sensorData = undefined;
    this.timestamp = undefined;
  }
  /**
   * Handles a change of the sensor ID
   */
  watchPropHandler() {
    this.disconnectedCallback();
    this.componentWillLoad();
  }
  setTimer() {
    // Used to update relative timestamps
    this.timer = window.setInterval(() => {
      this.updateData(this.store.state.currentSensorData);
    }, 20000);
  }
  clearTimer() {
    window.clearInterval(this.timer);
    this.timer = null;
  }
  connectedCallback() {
    this.setTimer();
  }
  async componentWillLoad() {
    this.store = await getStore(this.idKey);
    if (!this.sensorsArray.includes(this.sensorId)) {
      this.dataLabel = "Sensor ID onbekend";
      this.sensorData = "Geldige opties:";
      this.timestamp = this.sensorsArray.join(", ");
      this.clearTimer();
      return;
    }
    // If timer is cleared we need to start it again
    if (this.timer === null) {
      this.setTimer();
    }
    this.dataLabel = sensorInfo.getLabel(this.sensorId);
    this.updateData(this.store.state.currentSensorData);
    this.store.onChange("currentSensorData", (sensorData) => {
      this.updateData(sensorData);
    });
  }
  render() {
    let errorMessage = false;
    if (!isEmpty(this.store.state.error.message)) {
      errorMessage = this.store.state.error.message;
      this.clearTimer();
    }
    return (h(Host, null, h("slot", null), h("dl", { class: "ls-status-item" }, h("dt", { class: "label" }, this.dataLabel || `Sensor #${this.sensorId || " not specified"}`), h("dd", { class: "value" }, errorMessage === false
      ? sensorInfo.getValue(this.sensorData) || "-"
      : errorMessage), h("dd", { class: "timestamp" }, errorMessage === false
      ? this.timestamp
      : "More information in the browser console"))));
  }
  disconnectedCallback() {
    this.clearTimer();
  }
  static get watchers() { return {
    "sensorId": ["watchPropHandler"]
  }; }
  static get style() { return lsStatusItemCss; }
}, [1, "ls-status-item", {
    "sensorId": [2, "sensor-id"],
    "idKey": [1, "id-key"],
    "sensorData": [32],
    "timestamp": [32]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["ls-status-item"];
  components.forEach(tagName => { switch (tagName) {
    case "ls-status-item":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, LsStatusItem);
      }
      break;
  } });
}

export { LsStatusItem as L, defineCustomElement as d };

//# sourceMappingURL=ls-status-item2.js.map