ednl-liftstatus-web-components 1.8.0 → 1.9.0

package/dist/cjs/ednl-liftstatus-web-components.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["ls-counters.cjs",[[1,"ls-counters"]]],["ls-history.cjs",[[1,"ls-history"]]],["ls-status-history.cjs",[[1,"ls-status-history"]]],["ls-3d-scene_8.cjs",[[1,"ls-3d-scene",{"movementState":[32],"currentStop":[32],"lastPassedStop":[32]}],[1,"ls-status",{"sensorIds":[1,"sensor-ids"]}],[1,"ls-data",{"accessToken":[1,"access-token"]}],[4,"ls-recent-stops",{"chartLoading":[32]}],[1,"ls-status-messages",{"showTitle":[4,"show-title"],"statusMessages":[32],"lastChange":[32],"time":[32]}],[4,"ls-swimlane",{"sensorIds":[1,"sensor-ids"]}],[1,"ls-indicator",{"sensorId":[2,"sensor-id"],"dataLabel":[32],"sensorData":[32]}],[1,"ls-status-item",{"sensorId":[2,"sensor-id"],"sensorData":[32],"timestamp":[32],"time":[32]}]]]], options);
+  return index.bootstrapLazy([["ls-counters.cjs",[[1,"ls-counters"]]],["ls-history.cjs",[[1,"ls-history"]]],["ls-status-history.cjs",[[1,"ls-status-history"]]],["ls-3d-scene_8.cjs",[[1,"ls-3d-scene",{"movementState":[32],"currentStop":[32],"lastPassedStop":[32],"time":[32]}],[1,"ls-status",{"sensorIds":[1,"sensor-ids"]}],[1,"ls-data",{"accessToken":[1,"access-token"]}],[4,"ls-recent-stops",{"chartLoading":[32]}],[1,"ls-status-messages",{"showTitle":[4,"show-title"],"statusMessages":[32],"lastChange":[32],"time":[32]}],[4,"ls-swimlane",{"sensorIds":[1,"sensor-ids"]}],[1,"ls-indicator",{"sensorId":[2,"sensor-id"],"dataLabel":[32],"sensorData":[32]}],[1,"ls-status-item",{"sensorId":[2,"sensor-id"],"sensorData":[32],"timestamp":[32],"time":[32]}]]]], options);
 });

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["ls-counters.cjs",[[1,"ls-counters"]]],["ls-history.cjs",[[1,"ls-history"]]],["ls-status-history.cjs",[[1,"ls-status-history"]]],["ls-3d-scene_8.cjs",[[1,"ls-3d-scene",{"movementState":[32],"currentStop":[32],"lastPassedStop":[32]}],[1,"ls-status",{"sensorIds":[1,"sensor-ids"]}],[1,"ls-data",{"accessToken":[1,"access-token"]}],[4,"ls-recent-stops",{"chartLoading":[32]}],[1,"ls-status-messages",{"showTitle":[4,"show-title"],"statusMessages":[32],"lastChange":[32],"time":[32]}],[4,"ls-swimlane",{"sensorIds":[1,"sensor-ids"]}],[1,"ls-indicator",{"sensorId":[2,"sensor-id"],"dataLabel":[32],"sensorData":[32]}],[1,"ls-status-item",{"sensorId":[2,"sensor-id"],"sensorData":[32],"timestamp":[32],"time":[32]}]]]], options);
+  return index.bootstrapLazy([["ls-counters.cjs",[[1,"ls-counters"]]],["ls-history.cjs",[[1,"ls-history"]]],["ls-status-history.cjs",[[1,"ls-status-history"]]],["ls-3d-scene_8.cjs",[[1,"ls-3d-scene",{"movementState":[32],"currentStop":[32],"lastPassedStop":[32],"time":[32]}],[1,"ls-status",{"sensorIds":[1,"sensor-ids"]}],[1,"ls-data",{"accessToken":[1,"access-token"]}],[4,"ls-recent-stops",{"chartLoading":[32]}],[1,"ls-status-messages",{"showTitle":[4,"show-title"],"statusMessages":[32],"lastChange":[32],"time":[32]}],[4,"ls-swimlane",{"sensorIds":[1,"sensor-ids"]}],[1,"ls-indicator",{"sensorId":[2,"sensor-id"],"dataLabel":[32],"sensorData":[32]}],[1,"ls-status-item",{"sensorId":[2,"sensor-id"],"sensorData":[32],"timestamp":[32],"time":[32]}]]]], options);
   });
 };
 

package/dist/cjs/ls-3d-scene_8.cjs.entry.js

@@ -50745,11 +50745,29 @@ TWEEN.add.bind(TWEEN);
 TWEEN.remove.bind(TWEEN);
 var update = TWEEN.update.bind(TWEEN);
 
-const ls3dSceneCss = ":host{display:block;font-family:var(--ls-font-family)}.failed-to-load-error{display:flex;justify-content:center;align-items:center;height:500px;width:500px;font-style:italic;color:#dc2626;background-color:#fef2f2;border-radius:2px}.canvas{position:relative;width:500px;height:500px}.current-floor{top:0}.last-passed-floor{bottom:0}";
+var dayjs_min = createCommonjsModule(function (module, exports) {
+!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",f="month",h="quarter",c="year",d="date",$="Invalid Date",l=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},g={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,f),s=n-i<0,u=e.clone().add(r+(s?-1:1),f);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:f,y:c,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:h}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},D="en",v={};v[D]=M;var p=function(t){return t instanceof _},S=function(t,e,n){var r;if(!t)return D;if("string"==typeof t)v[t]&&(r=t),e&&(v[t]=e,r=t);else {var i=t.name;v[i]=t,r=i;}return !n&&r&&(D=r),r||!n&&D},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},O=g;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t);}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match(l);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return O},m.isValid=function(){return !(this.$d.toString()===$)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,h=O.p(t),$=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},l=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,g="set"+(this.$u?"UTC":"");switch(h){case c:return r?$(1,0):$(31,11);case f:return r?$(1,M):$(0,M+1);case o:var D=this.$locale().weekStart||0,v=(y<D?y+7:y)-D;return $(r?m-v:m+(6-v),M);case a:case d:return l(g+"Hours",0);case u:return l(g+"Minutes",1);case s:return l(g+"Seconds",2);case i:return l(g+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),h="set"+(this.$u?"UTC":""),$=(n={},n[a]=h+"Date",n[d]=h+"Date",n[f]=h+"Month",n[c]=h+"FullYear",n[u]=h+"Hours",n[s]=h+"Minutes",n[i]=h+"Seconds",n[r]=h+"Milliseconds",n)[o],l=o===a?this.$D+(e-this.$W):e;if(o===f||o===c){var y=this.clone().set(d,1);y.$d[$](l),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else $&&this.$d[$](l);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,h){var d,$=this;r=Number(r);var l=O.p(h),y=function(t){var e=w($);return O.w(e.date(e.date()+Math.round(t*r)),$)};if(l===f)return this.set(f,this.$M+r);if(l===c)return this.set(c,this.$y+r);if(l===a)return y(1);if(l===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[l]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||$;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,f=n.months,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].substr(0,s)},c=function(t){return O.s(s%12||12,t,"0")},d=n.meridiem||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r},l={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:O.s(a+1,2,"0"),MMM:h(n.monthsShort,a,f,3),MMMM:h(f,a),D:this.$D,DD:O.s(this.$D,2,"0"),d:String(this.$W),dd:h(n.weekdaysMin,this.$W,o,2),ddd:h(n.weekdaysShort,this.$W,o,3),dddd:o[this.$W],H:String(s),HH:O.s(s,2,"0"),h:c(1),hh:c(2),a:d(s,u,!0),A:d(s,u,!1),m:String(u),mm:O.s(u,2,"0"),s:String(this.$s),ss:O.s(this.$s,2,"0"),SSS:O.s(this.$ms,3,"0"),Z:i};return r.replace(y,(function(t,e){return e||l[t]||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,$){var l,y=O.p(d),M=w(r),m=(M.utcOffset()-this.utcOffset())*e,g=this-M,D=O.m(this,M);return D=(l={},l[c]=D/12,l[f]=D,l[h]=D/3,l[o]=(g-m)/6048e5,l[a]=(g-m)/864e5,l[u]=g/n,l[s]=g/e,l[i]=g/t,l)[y]||g,$?D:O.a(D)},m.daysInMonth=function(){return this.endOf(f).$D},m.$locale=function(){return v[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),b=_.prototype;return w.prototype=b,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",f],["$y",c],["$D",d]].forEach((function(t){b[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),w.extend=function(t,e){return t.$i||(t(e,_,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=v[D],w.Ls=v,w.p={},w}));
+});
+
+var relativeTime = createCommonjsModule(function (module, exports) {
+!function(r,e){module.exports=e();}(commonjsGlobal,(function(){return function(r,e,t){r=r||{};var n=e.prototype,o={future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"};function i(r,e,t,o){return n.fromToBase(r,e,t,o)}t.en.relativeTime=o,n.fromToBase=function(e,n,i,d,u){for(var f,a,s,l=i.$locale().relativeTime||o,h=r.thresholds||[{l:"s",r:44,d:"second"},{l:"m",r:89},{l:"mm",r:44,d:"minute"},{l:"h",r:89},{l:"hh",r:21,d:"hour"},{l:"d",r:35},{l:"dd",r:25,d:"day"},{l:"M",r:45},{l:"MM",r:10,d:"month"},{l:"y",r:17},{l:"yy",d:"year"}],m=h.length,c=0;c<m;c+=1){var y=h[c];y.d&&(f=d?t(e).diff(i,y.d,!0):i.diff(e,y.d,!0));var p=(r.rounding||Math.round)(Math.abs(f));if(s=f>0,p<=y.r||!y.r){p<=1&&c>0&&(y=h[c-1]);var v=l[y.l];u&&(p=u(""+p)),a="string"==typeof v?v.replace("%d",p):v(p,n,y.l,s);break}}if(n)return a;var M=s?l.future:l.past;return "function"==typeof M?M(a):M.replace("%s",a)},n.to=function(r,e){return i(r,e,this,!0)},n.from=function(r,e){return i(r,e,this)};var d=function(r){return r.$u?t.utc():t()};n.toNow=function(r){return this.to(d(this),r)},n.fromNow=function(r){return this.from(d(this),r)};}}));
+});
+
+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 n=a(e),d={name:"nl-be",weekdays:"zondag_maandag_dinsdag_woensdag_donderdag_vrijdag_zaterdag".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("_"),weekStart:1,weekdaysShort:"zo._ma._di._wo._do._vr._za.".split("_"),weekdaysMin:"zo_ma_di_wo_do_vr_za".split("_"),ordinal:function(e){return e},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:"één minuut",mm:"%d minuten",h:"één uur",hh:"%d uur",d:"één dag",dd:"%d dagen",M:"één maand",MM:"%d maanden",y:"één jaar",yy:"%d jaar"}};return n.default.locale(d,null,!0),d}));
+});
 
+const ls3dSceneCss = ":host{display:block;font-family:var(--ls-font-family)}.failed-to-load-error{display:flex;justify-content:center;align-items:center;height:500px;width:500px;font-style:italic;color:#dc2626;background-color:#fef2f2;border-radius:2px}.canvas{position:relative;width:500px;height:500px}.current-floor{top:0}.last-passed-floor{bottom:0}.last-update{position:absolute;bottom:0.5rem;right:0;font-size:var(--ls-text-xs);line-height:var(--ls-line-xs);color:var(--ls-gray-600);background-color:var(--ls-gray-100);padding:0.25rem 0.5rem;border-radius:20px}";
+
+dayjs_min.extend(relativeTime);
+dayjs_min.locale("nl-be");
 let Ls3dScene = class {
   constructor(hostRef) {
     index$5.registerInstance(this, hostRef);
+    /**
+     * The timer is used to update the relative timestamps.
+     */
+    this.time = Date.now();
     this.animateTheFloor = true;
     this.backDoorLeft = new Object3D();
     this.backDoorRight = new Object3D();
@@ -50921,8 +50939,8 @@ let Ls3dScene = class {
       this.renderer.setSize(500, 500);
       this.renderer.setClearColor(0xffffff, 0.5);
       // On reload: replace the current scene, instead of creating a new one
-      if (this.canvas.children.length > 2) {
-        this.canvas.replaceChild(this.renderer.domElement, this.canvas.children[2]);
+      if (this.canvas.children.length > 3) {
+        this.canvas.replaceChild(this.renderer.domElement, this.canvas.children[3]);
       }
       else {
         this.canvas.appendChild(this.renderer.domElement);
@@ -51194,6 +51212,13 @@ let Ls3dScene = class {
     };
     this.processSensorUpdate = (_msg, data) => {
       let sensorData = data.values;
+      let lastUpdate = 0;
+      let sensors = [500, 501, 502, 503, 514, 515];
+      sensors.forEach((value) => {
+        console.log(data.updated[value]);
+        lastUpdate = dayjs_min(data.updated[value]).isAfter(dayjs_min(lastUpdate)) ? data.updated[value] : lastUpdate;
+      });
+      this.lastUpdate = lastUpdate;
       for (let sensorId in sensorData) {
         // Elevator state (movement)
         switch (sensorId) {
@@ -51258,10 +51283,18 @@ let Ls3dScene = class {
       }
     };
   }
+  connectedCallback() {
+    // The timer is used to update the relative timestamps
+    this.timer = window.setInterval(() => {
+      // The timestamp is actually not displayed, but is only used to update the state and rerender the DOM
+      this.time = Date.now();
+    }, 20000);
+  }
   disconnectedCallback() {
     pubsub.unsubscribe(this.token);
     pubsub.unsubscribe(this.token2);
     this.scene.dispose();
+    window.clearInterval(this.timer);
   }
   componentWillLoad() {
     this.token = pubsub.subscribe("LS-DATA", this.processSensorUpdate);
@@ -51277,7 +51310,7 @@ let Ls3dScene = class {
   render() {
     return (index$5.h(index$5.Host, null, index$5.h("div", { class: "canvas", ref: (el) => {
         this.canvas = el;
-      } }, index$5.h("ls-indicator", { class: "current-floor", "sensor-id": "515" }), index$5.h("ls-indicator", { class: "last-passed-floor", "sensor-id": "514" })), index$5.h("slot", null)));
+      } }, index$5.h("ls-indicator", { class: "current-floor", "sensor-id": "515" }), index$5.h("ls-indicator", { class: "last-passed-floor", "sensor-id": "514" }), index$5.h("div", { class: "last-update" }, dayjs_min(this.lastUpdate).fromNow())), index$5.h("slot", null)));
   }
   static get assetsDirs() { return ["assets"]; }
 };
@@ -61050,10 +61083,6 @@ exports.Manager = manager;
 exports.Socket = socket;
 });
 
-var dayjs_min = createCommonjsModule(function (module, exports) {
-!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",f="month",h="quarter",c="year",d="date",$="Invalid Date",l=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},g={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,f),s=n-i<0,u=e.clone().add(r+(s?-1:1),f);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:f,y:c,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:h}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},D="en",v={};v[D]=M;var p=function(t){return t instanceof _},S=function(t,e,n){var r;if(!t)return D;if("string"==typeof t)v[t]&&(r=t),e&&(v[t]=e,r=t);else {var i=t.name;v[i]=t,r=i;}return !n&&r&&(D=r),r||!n&&D},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},O=g;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t);}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match(l);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return O},m.isValid=function(){return !(this.$d.toString()===$)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,h=O.p(t),$=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},l=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,g="set"+(this.$u?"UTC":"");switch(h){case c:return r?$(1,0):$(31,11);case f:return r?$(1,M):$(0,M+1);case o:var D=this.$locale().weekStart||0,v=(y<D?y+7:y)-D;return $(r?m-v:m+(6-v),M);case a:case d:return l(g+"Hours",0);case u:return l(g+"Minutes",1);case s:return l(g+"Seconds",2);case i:return l(g+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),h="set"+(this.$u?"UTC":""),$=(n={},n[a]=h+"Date",n[d]=h+"Date",n[f]=h+"Month",n[c]=h+"FullYear",n[u]=h+"Hours",n[s]=h+"Minutes",n[i]=h+"Seconds",n[r]=h+"Milliseconds",n)[o],l=o===a?this.$D+(e-this.$W):e;if(o===f||o===c){var y=this.clone().set(d,1);y.$d[$](l),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else $&&this.$d[$](l);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,h){var d,$=this;r=Number(r);var l=O.p(h),y=function(t){var e=w($);return O.w(e.date(e.date()+Math.round(t*r)),$)};if(l===f)return this.set(f,this.$M+r);if(l===c)return this.set(c,this.$y+r);if(l===a)return y(1);if(l===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[l]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||$;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,f=n.months,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].substr(0,s)},c=function(t){return O.s(s%12||12,t,"0")},d=n.meridiem||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r},l={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:O.s(a+1,2,"0"),MMM:h(n.monthsShort,a,f,3),MMMM:h(f,a),D:this.$D,DD:O.s(this.$D,2,"0"),d:String(this.$W),dd:h(n.weekdaysMin,this.$W,o,2),ddd:h(n.weekdaysShort,this.$W,o,3),dddd:o[this.$W],H:String(s),HH:O.s(s,2,"0"),h:c(1),hh:c(2),a:d(s,u,!0),A:d(s,u,!1),m:String(u),mm:O.s(u,2,"0"),s:String(this.$s),ss:O.s(this.$s,2,"0"),SSS:O.s(this.$ms,3,"0"),Z:i};return r.replace(y,(function(t,e){return e||l[t]||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,$){var l,y=O.p(d),M=w(r),m=(M.utcOffset()-this.utcOffset())*e,g=this-M,D=O.m(this,M);return D=(l={},l[c]=D/12,l[f]=D,l[h]=D/3,l[o]=(g-m)/6048e5,l[a]=(g-m)/864e5,l[u]=g/n,l[s]=g/e,l[i]=g/t,l)[y]||g,$?D:O.a(D)},m.daysInMonth=function(){return this.endOf(f).$D},m.$locale=function(){return v[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),b=_.prototype;return w.prototype=b,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",f],["$y",c],["$D",d]].forEach((function(t){b[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),w.extend=function(t,e){return t.$i||(t(e,_,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=v[D],w.Ls=v,w.p={},w}));
-});
-
 /** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof global$1 == 'object' && global$1 && global$1.Object === Object && global$1;
 
@@ -65658,6 +65687,7 @@ let LsData = class {
           headers: { Authorization: `Bearer ${accessToken}` },
           searchParams: { from: fromTS },
           throwHttpErrors: true,
+          timeout: 60000,
         })
           .json();
         const start = response.rows[0].start;
@@ -65690,6 +65720,7 @@ let LsData = class {
             sensors: sensorList,
           },
           throwHttpErrors: true,
+          timeout: 60000,
         })
           .json();
         // Publish to subscribers
@@ -65774,7 +65805,7 @@ let LsData = class {
     };
   }
   disconnectedCallback() {
-    lib.Socket.close();
+    lib.Socket.close(); // TODO: this is not a function
     this.socketId = null;
   }
   render() {
@@ -75285,7 +75316,7 @@ const i18n = {
   },
 };
 
-const lsIndicatorCss = ":host{display:block;font-family:var(--ls-font-family);width:150px;height:96px;position:absolute}:host :nth-child(3){font-family:\"Digital\";font-size:5rem;line-height:80px;width:75px;letter-spacing:0.05rem;position:absolute;bottom:0;opacity:0.1;color:var(--ls-accent-color)}:host :nth-child(4){font-family:\"Digital\";font-size:5rem;line-height:80px;width:75px;text-align:right;letter-spacing:0.05rem;position:absolute;left:0;bottom:0;color:var(--ls-accent-color)}";
+const lsIndicatorCss = ":host{display:block;font-family:var(--ls-font-family);width:150px;height:96px;position:absolute}.label{font-size:var(--ls-text-base);line-height:var(--ls-line-base)}.backdrop,.indicator{font-family:\"Digital\";font-size:5rem;line-height:80px;width:75px;letter-spacing:0.05rem;position:absolute;bottom:0;color:var(--ls-accent-color)}.backdrop{opacity:0.1}.indicator{text-align:right;left:0}";
 
 let LsIndicator = class {
   constructor(hostRef) {
@@ -75303,13 +75334,12 @@ let LsIndicator = class {
     this.dataLabel = i18n.__(this.sensorId);
   }
   render() {
-    if (this.sensorId == null) {
+    if (this.sensorId === null) {
       console.group("%cError%c [LsIndicator] No sensor ID supplied", "color: #DC2626; background-color: #FEF2F2; display: inline-block; padding: 0 4px; border-radius: 2px;", "");
       console.log(`Add the ID to the LsIndicator component like so: %c<ls-indicator sensor-id="yourId"></ls-indicator>%c`, "color:#27272A; background-color: #E4E4E7; display: inline-block; padding: 0 4px; border-radius: 2px;", "");
       console.groupEnd();
-      return (index$5.h(index$5.Host, null, index$5.h("div", null, "No ID supplied"), index$5.h("div", null, "00"), index$5.h("div", null)));
     }
-    return (index$5.h(index$5.Host, null, index$5.h("div", null, this.dataLabel), index$5.h("div", null, "00"), index$5.h("div", null, this.sensorData || "")));
+    return (index$5.h(index$5.Host, null, index$5.h("div", { class: "label" }, this.sensorId === null ? "No ID supplied" : this.dataLabel), index$5.h("div", { class: "backdrop" }, "00"), index$5.h("div", { class: "indicator" }, this.sensorData || "")));
   }
 };
 LsIndicator.style = lsIndicatorCss;
@@ -95399,7 +95429,7 @@ const d3 = /*#__PURE__*/Object.freeze({
 	ZoomTransform: Transform
 });
 
-const lsRecentStopsCss = ":host{font-family:var(--ls-font-family)}.chart{min-height:200px;min-width:100%}.path{fill:none;stroke:var(--ls-primary-color);stroke-width:3px}.line{stroke:#e4e4e7;stroke-width:1;shape-rendering:crispEdges}.line:first-child{stroke:#71717a}.stop{fill:var(--ls-primary-color);stroke:none}.fake{fill:transparent;stroke:none}.passed{fill:#fff;stroke:var(--ls-primary-color);stroke-width:1px}.overlay{fill:none;stroke:none;pointer-events:all}.loading{width:100%;display:flex;justify-content:center;height:100px;align-items:center}.focusLine{fill:none;stroke:var(--ls-accent-color);stroke-width:1px}.focusCircle{fill:var(--ls-secondary-color)}.focus_text_container rect{fill:rgba(0, 0, 0, 0.1)}.focus_text_container text{fill:var(--ls-font-primary-color);font-family:var(--ls-font-family)}.axis{font-family:var(--ls-font-family)}.axis path,.axis line{fill:none;stroke:#71717a;stroke-width:1;shape-rendering:crispEdges}.disconnected svg{display:none}.disconnected::after{content:\"Disconnected\";position:absolute;width:100%;padding-top:50px;box-sizing:border-box;height:100%;font-size:2.5rem;color:#71717a;text-transform:uppercase;left:0;top:0;text-align:center;border:1px solid #71717a;background-color:rgba(255, 255, 255, 1)}";
+const lsRecentStopsCss = ":host{font-family:var(--ls-font-family)}.chart{min-height:200px;min-width:100%}.path{fill:none;stroke:var(--ls-primary-color);stroke-width:3px}.line{stroke:#e4e4e7;stroke-width:1;shape-rendering:crispEdges}.line:first-child{stroke:#71717a}.stop{fill:var(--ls-primary-color);stroke:none}.fake{fill:transparent;stroke:none}.passed{fill:#fff;stroke:var(--ls-primary-color);stroke-width:1px}.overlay{fill:none;stroke:none;pointer-events:all}.loading{font-size:var(--ls-text-base);line-height:var(--ls-line-base);font-family:var(--ls-font-family);color:var(--ls-font-primary-color);width:100%;display:flex;justify-content:center;height:100px;align-items:center}.focusLine{fill:none;stroke:var(--ls-accent-color);stroke-width:1px}.focusCircle{fill:var(--ls-secondary-color)}.focus_text_container rect{fill:rgba(0, 0, 0, 0.1)}.focus_text_container text{fill:var(--ls-font-primary-color);font-family:var(--ls-font-family)}.axis{font-family:var(--ls-font-family)}.axis path,.axis line{fill:none;stroke:#71717a;stroke-width:1;shape-rendering:crispEdges}.disconnected svg{display:none}.disconnected::after{content:\"Disconnected\";position:absolute;width:100%;padding-top:50px;box-sizing:border-box;height:100%;font-size:2.5rem;color:#71717a;text-transform:uppercase;left:0;top:0;text-align:center;border:1px solid #71717a;background-color:rgba(255, 255, 255, 1)}";
 
 let LsRecentStops = class {
   constructor(hostRef) {
@@ -95761,14 +95791,6 @@ let LsStatus = class {
 };
 LsStatus.style = lsStatusCss;
 
-var relativeTime = createCommonjsModule(function (module, exports) {
-!function(r,e){module.exports=e();}(commonjsGlobal,(function(){return function(r,e,t){r=r||{};var n=e.prototype,o={future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"};function i(r,e,t,o){return n.fromToBase(r,e,t,o)}t.en.relativeTime=o,n.fromToBase=function(e,n,i,d,u){for(var f,a,s,l=i.$locale().relativeTime||o,h=r.thresholds||[{l:"s",r:44,d:"second"},{l:"m",r:89},{l:"mm",r:44,d:"minute"},{l:"h",r:89},{l:"hh",r:21,d:"hour"},{l:"d",r:35},{l:"dd",r:25,d:"day"},{l:"M",r:45},{l:"MM",r:10,d:"month"},{l:"y",r:17},{l:"yy",d:"year"}],m=h.length,c=0;c<m;c+=1){var y=h[c];y.d&&(f=d?t(e).diff(i,y.d,!0):i.diff(e,y.d,!0));var p=(r.rounding||Math.round)(Math.abs(f));if(s=f>0,p<=y.r||!y.r){p<=1&&c>0&&(y=h[c-1]);var v=l[y.l];u&&(p=u(""+p)),a="string"==typeof v?v.replace("%d",p):v(p,n,y.l,s);break}}if(n)return a;var M=s?l.future:l.past;return "function"==typeof M?M(a):M.replace("%s",a)},n.to=function(r,e){return i(r,e,this,!0)},n.from=function(r,e){return i(r,e,this)};var d=function(r){return r.$u?t.utc():t()};n.toNow=function(r){return this.to(d(this),r)},n.fromNow=function(r){return this.from(d(this),r)};}}));
-});
-
-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 n=a(e),d={name:"nl-be",weekdays:"zondag_maandag_dinsdag_woensdag_donderdag_vrijdag_zaterdag".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("_"),weekStart:1,weekdaysShort:"zo._ma._di._wo._do._vr._za.".split("_"),weekdaysMin:"zo_ma_di_wo_do_vr_za".split("_"),ordinal:function(e){return e},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:"één minuut",mm:"%d minuten",h:"één uur",hh:"%d uur",d:"één dag",dd:"%d dagen",M:"één maand",MM:"%d maanden",y:"één jaar",yy:"%d jaar"}};return n.default.locale(d,null,!0),d}));
-});
-
 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);
@@ -95784,15 +95806,12 @@ let LsStatusItem = class {
       if (isEmpty(data))
         return;
       this.sensorData = data.values[this.sensorId];
-      this.timestamp = dayjs_min(data.updated[this.sensorId]).fromNow();
-      this.sensorDataObject = data;
+      this.timestamp = dayjs_min(data.updated[this.sensorId]);
     };
   }
   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("undefined", this.sensorDataObject);
       // The timestamp is actually not displayed, but is only used to update the state and rerender the DOM
       this.time = Date.now();
     }, 20000);
@@ -95806,7 +95825,7 @@ let LsStatusItem = class {
       ? i18n.__(this.sensorData)
       : i18n.__(this.sensorData) === 0
         ? i18n.__(this.sensorData)
-        : "-"), index$5.h("dd", { class: "timestamp" }, this.timestamp))));
+        : "-"), index$5.h("dd", { class: "timestamp" }, dayjs_min(this.timestamp).fromNow()))));
   }
   disconnectedCallback() {
     // Cleanup token and clear timer
@@ -96405,8 +96424,7 @@ let LsSwimlane = class {
         .attr("height", 12);
       this.xAxisScale.domain([theLimit.toDate(), now]);
       // update the axis the D3.js way
-      //
-      chart.select(".main.axis.time").call(() => this.xAxis);
+      chart.select(".main.axis.time").call(this.xAxis);
     };
     /**
      * Initial sensor values

package/dist/collection/components/ls-3d-scene/ls-3d-scene.css

@@ -28,3 +28,15 @@
 .last-passed-floor {
   bottom: 0;
 }
+
+.last-update {
+  position: absolute;
+  bottom: 0.5rem;
+  right: 0;
+  font-size: var(--ls-text-xs);
+  line-height: var(--ls-line-xs);
+  color: var(--ls-gray-600);
+  background-color: var(--ls-gray-100);
+  padding: 0.25rem 0.5rem;
+  border-radius: 20px;
+}

package/dist/collection/components/ls-3d-scene/ls-3d-scene.js

@@ -3,8 +3,17 @@ import PubSub from "pubsub-js";
 import * as THREE from "three";
 import { ColladaLoader } from "three/examples/jsm/loaders/ColladaLoader";
 import * as TWEEN from "@tweenjs/tween.js";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+dayjs.extend(relativeTime);
+import "dayjs/locale/nl-be";
+dayjs.locale("nl-be");
 export class Ls3dScene {
   constructor() {
+    /**
+     * The timer is used to update the relative timestamps.
+     */
+    this.time = Date.now();
     this.animateTheFloor = true;
     this.backDoorLeft = new THREE.Object3D();
     this.backDoorRight = new THREE.Object3D();
@@ -176,8 +185,8 @@ export class Ls3dScene {
       this.renderer.setSize(500, 500);
       this.renderer.setClearColor(0xffffff, 0.5);
       // On reload: replace the current scene, instead of creating a new one
-      if (this.canvas.children.length > 2) {
-        this.canvas.replaceChild(this.renderer.domElement, this.canvas.children[2]);
+      if (this.canvas.children.length > 3) {
+        this.canvas.replaceChild(this.renderer.domElement, this.canvas.children[3]);
       }
       else {
         this.canvas.appendChild(this.renderer.domElement);
@@ -449,6 +458,13 @@ export class Ls3dScene {
     };
     this.processSensorUpdate = (_msg, data) => {
       let sensorData = data.values;
+      let lastUpdate = 0;
+      let sensors = [500, 501, 502, 503, 514, 515];
+      sensors.forEach((value) => {
+        console.log(data.updated[value]);
+        lastUpdate = dayjs(data.updated[value]).isAfter(dayjs(lastUpdate)) ? data.updated[value] : lastUpdate;
+      });
+      this.lastUpdate = lastUpdate;
       for (let sensorId in sensorData) {
         // Elevator state (movement)
         switch (sensorId) {
@@ -513,10 +529,18 @@ export class Ls3dScene {
       }
     };
   }
+  connectedCallback() {
+    // The timer is used to update the relative timestamps
+    this.timer = window.setInterval(() => {
+      // The timestamp is actually not displayed, but is only used to update the state and rerender the DOM
+      this.time = Date.now();
+    }, 20000);
+  }
   disconnectedCallback() {
     PubSub.unsubscribe(this.token);
     PubSub.unsubscribe(this.token2);
     this.scene.dispose();
+    window.clearInterval(this.timer);
   }
   componentWillLoad() {
     this.token = PubSub.subscribe("LS-DATA", this.processSensorUpdate);
@@ -535,7 +559,8 @@ export class Ls3dScene {
           this.canvas = el;
         } },
         h("ls-indicator", { class: "current-floor", "sensor-id": "515" }),
-        h("ls-indicator", { class: "last-passed-floor", "sensor-id": "514" })),
+        h("ls-indicator", { class: "last-passed-floor", "sensor-id": "514" }),
+        h("div", { class: "last-update" }, dayjs(this.lastUpdate).fromNow())),
       h("slot", null)));
   }
   static get is() { return "ls-3d-scene"; }
@@ -550,6 +575,7 @@ export class Ls3dScene {
   static get states() { return {
     "movementState": {},
     "currentStop": {},
-    "lastPassedStop": {}
+    "lastPassedStop": {},
+    "time": {}
   }; }
 }

package/dist/collection/components/ls-data/ls-data.js

@@ -55,6 +55,7 @@ export class LsData {
           headers: { Authorization: `Bearer ${accessToken}` },
           searchParams: { from: fromTS },
           throwHttpErrors: true,
+          timeout: 60000,
         })
           .json();
         const start = response.rows[0].start;
@@ -87,6 +88,7 @@ export class LsData {
             sensors: sensorList,
           },
           throwHttpErrors: true,
+          timeout: 60000,
         })
           .json();
         // Publish to subscribers
@@ -171,7 +173,7 @@ export class LsData {
     };
   }
   disconnectedCallback() {
-    Socket.close();
+    Socket.close(); // TODO: this is not a function
     this.socketId = null;
   }
   render() {

package/dist/collection/components/ls-indicator/ls-indicator.css

@@ -6,7 +6,12 @@
   position: absolute;
 }
 
-:host :nth-child(3){
+.label{
+  font-size: var(--ls-text-base);
+  line-height: var(--ls-line-base);
+}
+
+.backdrop, .indicator{
   font-family: "Digital";
   font-size: 5rem;
   line-height: 80px;
@@ -14,19 +19,14 @@
   letter-spacing: 0.05rem;
   position: absolute;
   bottom: 0;
-  opacity: 0.1;
   color: var(--ls-accent-color);
 }
 
-:host :nth-child(4) {
-  font-family: "Digital";
-  font-size: 5rem;
-  line-height: 80px;
-  width: 75px;
+.backdrop{
+  opacity: 0.1;
+}
+
+.indicator {
   text-align: right;
-  letter-spacing: 0.05rem;
-  position: absolute;
   left: 0;
-  bottom: 0;
-  color: var(--ls-accent-color);
 }

package/dist/collection/components/ls-indicator/ls-indicator.js

@@ -16,19 +16,15 @@ export class LsIndicator {
     this.dataLabel = i18n.__(this.sensorId);
   }
   render() {
-    if (this.sensorId == null) {
+    if (this.sensorId === null) {
       console.group("%cError%c [LsIndicator] No sensor ID supplied", "color: #DC2626; background-color: #FEF2F2; display: inline-block; padding: 0 4px; border-radius: 2px;", "");
       console.log(`Add the ID to the LsIndicator component like so: %c<ls-indicator sensor-id="yourId"></ls-indicator>%c`, "color:#27272A; background-color: #E4E4E7; display: inline-block; padding: 0 4px; border-radius: 2px;", "");
       console.groupEnd();
-      return (h(Host, null,
-        h("div", null, "No ID supplied"),
-        h("div", null, "00"),
-        h("div", null)));
     }
     return (h(Host, null,
-      h("div", null, this.dataLabel),
-      h("div", null, "00"),
-      h("div", null, this.sensorData || "")));
+      h("div", { class: "label" }, this.sensorId === null ? "No ID supplied" : this.dataLabel),
+      h("div", { class: "backdrop" }, "00"),
+      h("div", { class: "indicator" }, this.sensorData || "")));
   }
   static get is() { return "ls-indicator"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ls-recent-stops/ls-recent-stops.css

@@ -46,6 +46,10 @@
 }
 
 .loading {
+  font-size: var(--ls-text-base);
+  line-height: var(--ls-line-base);
+  font-family: var(--ls-font-family);
+  color: var(--ls-font-primary-color);
   width: 100%;
   display: flex;
   justify-content: center;

package/dist/collection/components/ls-status-item/ls-status-item.js

@@ -17,15 +17,12 @@ export class LsStatusItem {
       if (isEmpty(data))
         return;
       this.sensorData = data.values[this.sensorId];
-      this.timestamp = dayjs(data.updated[this.sensorId]).fromNow();
-      this.sensorDataObject = data;
+      this.timestamp = dayjs(data.updated[this.sensorId]);
     };
   }
   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("undefined", this.sensorDataObject);
       // The timestamp is actually not displayed, but is only used to update the state and rerender the DOM
       this.time = Date.now();
     }, 20000);
@@ -44,7 +41,7 @@ export class LsStatusItem {
           : i18n.__(this.sensorData) === 0
             ? i18n.__(this.sensorData)
             : "-"),
-        h("dd", { class: "timestamp" }, this.timestamp))));
+        h("dd", { class: "timestamp" }, dayjs(this.timestamp).fromNow()))));
   }
   disconnectedCallback() {
     // Cleanup token and clear timer

package/dist/collection/components/ls-swimlane/ls-swimlane.js

@@ -503,8 +503,7 @@ export class LsSwimlane {
         .attr("height", 12);
       this.xAxisScale.domain([theLimit.toDate(), now]);
       // update the axis the D3.js way
-      //
-      chart.select(".main.axis.time").call(() => this.xAxis);
+      chart.select(".main.axis.time").call(this.xAxis);
     };
     /**
      * Initial sensor values