ednl-liftstatus-web-components 1.0.0

package/dist/collection/collection-manifest.json

@@ -0,0 +1,19 @@
+{
+  "entries": [
+    "./components/ls-3d-scene/ls-3d-scene.js",
+    "./components/ls-counters/ls-counters.js",
+    "./components/ls-data/ls-data.js",
+    "./components/ls-history/ls-history.js",
+    "./components/ls-status/ls-status.js",
+    "./components/ls-status-history/ls-status-history.js",
+    "./components/ls-status-item/ls-status-item.js",
+    "./components/ls-swimlane/ls-swimlane.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.8.1",
+    "typescriptVersion": "4.2.3"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  font-family: var(--ls-font-family);
+}

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

@@ -0,0 +1,17 @@
+import { Component, Host, h } from "@stencil/core";
+export class Ls3dScene {
+  render() {
+    return (h(Host, null,
+      h("fieldset", null,
+        h("legend", null, "ls-3d-scene")),
+      h("slot", null)));
+  }
+  static get is() { return "ls-3d-scene"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ls-3d-scene.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ls-3d-scene.css"]
+  }; }
+}

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

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  font-family: var(--ls-font-family);
+}

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

@@ -0,0 +1,17 @@
+import { Component, Host, h } from '@stencil/core';
+export class LsCounters {
+  render() {
+    return (h(Host, null,
+      h("fieldset", null,
+        h("legend", null, "ls-counters")),
+      h("slot", null)));
+  }
+  static get is() { return "ls-counters"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ls-counters.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ls-counters.css"]
+  }; }
+}

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

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  font-family: var(--ls-font-family);
+}

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

@@ -0,0 +1,51 @@
+import { Component, Host, h, State } from "@stencil/core";
+import PubSub from "pubsub-js";
+import io, { Socket } from "socket.io-client";
+export class LsData {
+  componentWillLoad() {
+    const socket = io("https://api.liftstatus.nl/", {
+      transports: ["websocket"],
+      path: "/liftstatus/socket.io",
+      reconnectionAttempts: 5,
+      query: {
+        access_token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJvcmciOiJFRE5MIiwib2lkIjoibGlmdHN0YXR1cy1taS0zMTkwMSIsIm90eXBlIjoiZXh0IiwiY21kcyI6dHJ1ZSwiaWF0IjoxNjMzNjg1MTI3LCJleHAiOjE2MzM3NzE1MjcsImF1ZCI6ImVkbmwtbGlmdHN0YXR1cy1hcGkiLCJpc3MiOiJFRE5MIiwic3ViIjoiNTY1In0.q6SZQ1H1n23MwxJZnorVZ16gnVYefpknYKba9hqsZfI",
+      },
+    });
+    socket.emit("getSensorData", {}, (_error, data) => {
+      this.data = data;
+      PubSub.publish("LS-DATA", this.data);
+    });
+    socket.on("connect", () => {
+      this.socketID = socket.id;
+    });
+    socket.emit("listen", {});
+    socket.on("module", (data) => {
+      const dataData = data["message"]["data"];
+      const dataKey = Object.keys(dataData)[0];
+      const dataValue = Object.values(dataData)[0];
+      this.data.values[dataKey] = dataValue;
+      PubSub.publish("LS-DATA", this.data);
+    });
+  }
+  render() {
+    return (h(Host, null,
+      h("fieldset", null,
+        h("legend", null, "ls-data")),
+      h("slot", null)));
+  }
+  disconnectedCallback() {
+    Socket.close();
+  }
+  static get is() { return "ls-data"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ls-data.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ls-data.css"]
+  }; }
+  static get states() { return {
+    "data": {},
+    "socketID": {}
+  }; }
+}

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

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  font-family: var(--ls-font-family);
+}

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

@@ -0,0 +1,17 @@
+import { Component, Host, h } from '@stencil/core';
+export class LsHistory {
+  render() {
+    return (h(Host, null,
+      h("fieldset", null,
+        h("legend", null, "ls-history")),
+      h("slot", null)));
+  }
+  static get is() { return "ls-history"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ls-history.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ls-history.css"]
+  }; }
+}

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

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  font-family: var(--ls-font-family);
+}

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

@@ -0,0 +1,24 @@
+import { Component, Host, h } from "@stencil/core";
+export class LsStatus {
+  render() {
+    return (h(Host, null,
+      h("fieldset", null,
+        h("legend", null, "ls-status"),
+        h("ls-status-item", { "sensor-id": "500", "data-label": "Status lift" }),
+        h("ls-status-item", { "sensor-id": "501", "data-label": "Current stop" }),
+        h("ls-status-item", { "sensor-id": "502", "data-label": "Front door" }),
+        h("ls-status-item", { "sensor-id": "503", "data-label": "Rear door" }),
+        h("ls-status-item", { "sensor-id": "513", "data-label": "Status" }),
+        h("ls-status-item", { "sensor-id": "514", "data-label": "Last passed stopping point" }),
+        h("ls-status-item", { "sensor-id": "515", "data-label": "Current stop" })),
+      h("slot", null)));
+  }
+  static get is() { return "ls-status"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ls-status.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ls-status.css"]
+  }; }
+}

package/dist/collection/components/ls-status-history/ls-status-history.css

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  font-family: var(--ls-font-family);
+}

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

@@ -0,0 +1,17 @@
+import { Component, Host, h } from "@stencil/core";
+export class LsStatusHistory {
+  render() {
+    return (h(Host, null,
+      h("fieldset", null,
+        h("legend", null, "ls-status-history")),
+      h("slot", null)));
+  }
+  static get is() { return "ls-status-history"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ls-status-history.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ls-status-history.css"]
+  }; }
+}

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

@@ -0,0 +1,19 @@
+:host {
+  display: block;
+  font-family: var(--ls-font-family);
+  color: var(--ls-font-primary-color);
+}
+
+div.ls-label {
+  text-transform: uppercase;
+  letter-spacing: 0.05rem;
+  font-weight: 600;
+  color: #71717A;
+}
+
+div.ls-value {
+  font-size: 2rem;
+  margin-top: -0.5rem;
+  padding-bottom: 1rem;
+  height: 2.75rem;
+}

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

@@ -0,0 +1,68 @@
+import { Component, Host, h, Prop, State } from "@stencil/core";
+import PubSub from "pubsub-js";
+export class LsStatusItem {
+  constructor() {
+    this.updateData = (_msg, data) => {
+      this.sensorData = data["values"][this.sensorId];
+    };
+  }
+  componentWillLoad() {
+    this.token = PubSub.subscribe("LS-DATA", this.updateData);
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "ls-label" }, this.dataLabel || "Sensor data"),
+      h("div", { class: "ls-value" }, this.sensorData || "-"),
+      h("slot", null)));
+  }
+  disconnectedCallback() {
+    PubSub.unsubscribe(this.token);
+  }
+  static get is() { return "ls-status-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ls-status-item.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ls-status-item.css"]
+  }; }
+  static get properties() { return {
+    "sensorId": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The ID of the sensor item that is to be displayed.\nThis ID can be found in the supplied document."
+      },
+      "attribute": "sensor-id",
+      "reflect": false
+    },
+    "dataLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "(Optional)\nThe label for the data that is to be displayed."
+      },
+      "attribute": "data-label",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "sensorData": {}
+  }; }
+}

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

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  font-family: var(--ls-font-family);
+}

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

@@ -0,0 +1,17 @@
+import { Component, Host, h } from "@stencil/core";
+export class LsSwimlane {
+  render() {
+    return (h(Host, null,
+      h("fieldset", null,
+        h("legend", null, "ls-swimlane")),
+      h("slot", null)));
+  }
+  static get is() { return "ls-swimlane"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ls-swimlane.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ls-swimlane.css"]
+  }; }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+  return (first || '') + (middle !== '' ? ` ${middle}` : '') + (last !== '' ? ` ${last}` : '');
+}

package/dist/custom-elements/index.d.ts

@@ -0,0 +1,87 @@
+/* EdnlLiftstatusWebComponents custom elements bundle */
+
+import type { Components, JSX } from "../types/components";
+
+interface Ls3dScene extends Components.Ls3dScene, HTMLElement {}
+export const Ls3dScene: {
+  prototype: Ls3dScene;
+  new (): Ls3dScene;
+};
+
+interface LsCounters extends Components.LsCounters, HTMLElement {}
+export const LsCounters: {
+  prototype: LsCounters;
+  new (): LsCounters;
+};
+
+interface LsData extends Components.LsData, HTMLElement {}
+export const LsData: {
+  prototype: LsData;
+  new (): LsData;
+};
+
+interface LsHistory extends Components.LsHistory, HTMLElement {}
+export const LsHistory: {
+  prototype: LsHistory;
+  new (): LsHistory;
+};
+
+interface LsStatus extends Components.LsStatus, HTMLElement {}
+export const LsStatus: {
+  prototype: LsStatus;
+  new (): LsStatus;
+};
+
+interface LsStatusHistory extends Components.LsStatusHistory, HTMLElement {}
+export const LsStatusHistory: {
+  prototype: LsStatusHistory;
+  new (): LsStatusHistory;
+};
+
+interface LsStatusItem extends Components.LsStatusItem, HTMLElement {}
+export const LsStatusItem: {
+  prototype: LsStatusItem;
+  new (): LsStatusItem;
+};
+
+interface LsSwimlane extends Components.LsSwimlane, HTMLElement {}
+export const LsSwimlane: {
+  prototype: LsSwimlane;
+  new (): LsSwimlane;
+};
+
+/**
+ * Utility to define all custom elements within this package using the tag name provided in the component's source. 
+ * When defining each custom element, it will also check it's safe to define by:
+ *
+ * 1. Ensuring the "customElements" registry is available in the global context (window).
+ * 2. The component tag name is not already defined.
+ *
+ * Use the standard [customElements.define()](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) 
+ * method instead to define custom elements individually, or to provide a different tag name.
+ */
+export declare const defineCustomElements: (opts?: any) => void;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  ce?: (eventName: string, opts?: any) => CustomEvent;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
+export * from '../types';