@dizmo/dcs-client-library 4.1.2 → 4.2.1

package/README.md

@@ -12,7 +12,7 @@ npm i @dizmo/dcs-client-library
 ## Usage
 The modules for the different data types are separated and can be individually imported
 ```js
-import { templates, items, allocations, dcs, config, events, analytics, language, needs, packages, translations } from '@dizmo/dcs-client-library'
+import { templates, items, allocations, dcs, config, events, analytics, language, needs, packages, translations, components } from '@dizmo/dcs-client-library'
 
 // Most functions throw errors, so they can be caught when they are called
 try {
@@ -26,42 +26,46 @@ The modules all have separate documentation files to keep this main README short
 
 ### Templates Module
 Contains all template-related functions of the DCS.
-Documentation can be found [here](./documentation/templates/templates.md).
+Documentation can be found [here](./docs/public/templates/templates.md).
 ### Items Module
 Contains all item-related functions of the DCS.
-Documentation can be found [here](./documentation/items/items.md).
+Documentation can be found [here](./docs/public/items/items.md).
 ### Allocations Module
 Contains all allocation-related functions of the DCS.
-Documentation can be found [here](./documentation/allocations/allocations.md).
+Documentation can be found [here](./docs/public/allocations/allocations.md).
 ### DCS Module
 Contains all company and system-related functions of the DCS.
-Documentation can be found [here](./documentation/dcs/dcs.md).
+Documentation can be found [here](./docs/public/dcs/dcs.md).
 ### Analytics Module
 Contains the analytics functionality to process database data.
-Documentation can be found [here](./documentation/analytics/analytics.md).
+Documentation can be found [here](./docs/public/analytics/analytics.md).
 ### Config Module
 Contains library configuration functions.
-Documentation can be found [here](./documentation/config/config.md).
+Documentation can be found [here](./docs/public/config/config.md).
 ### Language Module
 Contains all language and translation related functions.
-Documentation can be found [here](./documentation/language/language.md).
+Documentation can be found [here](./docs/public/language/language.md).
 
 ### Events Module
 Contains the function that informs the client on database updates.
-Documentation can be found [here](./documentation/events/events.md).
+Documentation can be found [here](./docs/public/events/events.md).
 
 ### Needs Module
 Contains functions for creating and managing needs (requirements/demands).
-Documentation can be found [here](./documentation/needs/needs.md).
+Documentation can be found [here](./docs/public/needs/needs.md).
 
 ### Packages Module
 Contains functions for creating and managing allocation packages (reusable allocation templates).
-Documentation can be found [here](./documentation/packages/packages.md).
+Documentation can be found [here](./docs/public/packages/packages.md).
 
 ### Translations Module
 Contains DeepL translation API integration for translating text content.
-Documentation can be found [here](./documentation/translations/translations.md).
+Documentation can be found [here](./docs/public/translations/translations.md).
+
+### Components Module
+Contains shared web components (`<item-element>` and `<allocation-element>`) for displaying items and allocations.
+Documentation can be found [here](./docs/public/components/components.md).
 
 ### Data Structures
 Common data structures used across modules.
-Documentation can be found [here](./documentation/datastructures/datastructures.md).
+Documentation can be found [here](./docs/public/datastructures/datastructures.md).

package/dist/components/allocationElement.d.ts

@@ -0,0 +1 @@
+import "./itemElement";

package/dist/components/allocationElement.js

@@ -0,0 +1,214 @@
+// Composite component that displays item-elements with additional information.
+// Three modes:
+// - Package: 1 itemElement + startOffset/duration info
+// - Allocation: 2 itemElements + from/to/name info
+// - CompactAllocation: 1 itemElement + from/to/name info
+import { language } from "../modules/language";
+import { HumanizeDurationLanguage, HumanizeDuration, } from "humanize-duration-ts";
+import { AllocationMode } from "../types/types";
+import "./itemElement";
+class AllocationElement extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+    }
+    connectedCallback() {
+        const mode = this.getAttribute("mode") || AllocationMode.Allocation;
+        if (!this.shadowRoot) {
+            console.error("ShadowRoot is not attached.");
+            return;
+        }
+        if (mode === AllocationMode.Package) {
+            this.renderPackageMode();
+        }
+        else {
+            this.renderAllocationMode(mode === AllocationMode.CompactAllocation);
+        }
+    }
+    getItemAttrs(suffix = "") {
+        return {
+            template: this.getAttribute(`template${suffix}`),
+            firstline: this.getAttribute(`firstline${suffix}`),
+            secondline: this.getAttribute(`secondline${suffix}`),
+            imgUrl: this.getAttribute(`imgUrl${suffix}`),
+            iconUrl: this.getAttribute(`iconUrl${suffix}`),
+            itemId: this.getAttribute(`itemId${suffix}`),
+            color: this.getAttribute(`color${suffix}`),
+        };
+    }
+    buildItemElement(attrs, dataAttrs = {}, leafType = "resource") {
+        const dataAttrStr = Object.entries(dataAttrs)
+            .map(([key, val]) => `data-${key}="${val}"`)
+            .join(" ");
+        return `
+      <item-element
+        itemType="${leafType}"
+        template="${attrs.template}"
+        firstline="${attrs.firstline}"
+        secondline="${attrs.secondline}"
+        imgUrl="${attrs.imgUrl}"
+        iconUrl="${attrs.iconUrl}"
+        itemId="${attrs.itemId}"
+        color="${attrs.color}"
+        ${dataAttrStr}
+      ></item-element>
+    `;
+    }
+    buildInfoRows(rows) {
+        return rows
+            .map((row) => `
+      <div class="info-row">
+        <div class="info-label">${row.label}</div>
+        <div>${row.value}</div>
+      </div>
+    `)
+            .join("");
+    }
+    getAllocationInfo() {
+        return {
+            allocationId: this.getAttribute("allocationId"),
+            from: this.getAttribute("from"),
+            to: this.getAttribute("to"),
+            name: this.getAttribute("name"),
+        };
+    }
+    buildAllocationInfoSection(from, to, name) {
+        const nameDiv = name && name !== "undefined"
+            ? `<div class="alloc-name">${name}</div>`
+            : "";
+        const infoRows = this.buildInfoRows([
+            {
+                label: language.translateString("js_from"),
+                value: from ? getReadableTime(parseInt(from)) : "",
+            },
+            {
+                label: language.translateString("js_to"),
+                value: to ? getReadableTime(parseInt(to)) : "",
+            },
+        ]);
+        return `${nameDiv}<div class="info-section">${infoRows}</div>`;
+    }
+    renderAllocationMode(compact = false) {
+        const { allocationId, from, to, name } = this.getAllocationInfo();
+        const dataAttrs = { "allocation-id": allocationId, from, to };
+        const items = compact
+            ? this.buildItemElement(this.getItemAttrs(), dataAttrs, this.getAttribute("leafType") || "resource")
+            : this.buildItemElement(this.getItemAttrs("1"), dataAttrs, this.getAttribute("leafType1") || "resource") +
+                this.buildItemElement(this.getItemAttrs("2"), dataAttrs, this.getAttribute("leafType2") || "resource");
+        this.shadowRoot.innerHTML = `
+      <style>${this.getStyles()}</style>
+      <div class="container">
+        ${items}
+        ${this.buildAllocationInfoSection(from, to, name)}
+      </div>
+    `;
+        this.attachJumpToAllocationHandlers();
+    }
+    attachJumpToAllocationHandlers() {
+        const items = this.shadowRoot?.querySelectorAll("item-element");
+        items?.forEach((item) => {
+            item.addEventListener("click", () => {
+                const { allocationId, from, to } = this.getAllocationInfo();
+                const template = item.getAttribute("template");
+                this.dispatchEvent(new CustomEvent("jump-to-allocation", {
+                    detail: { allocationId, template, from, to },
+                    bubbles: true,
+                    composed: true,
+                }));
+            });
+        });
+    }
+    renderPackageMode() {
+        const LANG = language.getUILanguage();
+        const langService = new HumanizeDurationLanguage();
+        const humanizer = new HumanizeDuration(langService);
+        const item = this.getItemAttrs();
+        const startOffset = this.getAttribute("startOffset");
+        const duration = this.getAttribute("duration");
+        const infoRows = this.buildInfoRows([
+            {
+                label: language.translateString("js_start"),
+                value: item.template
+                    ? formatStartOffset(startOffset, humanizer, LANG)
+                    : "",
+            },
+            {
+                label: language.translateString("js_duration"),
+                value: item.template ? formatDuration(duration, humanizer, LANG) : "",
+            },
+        ]);
+        this.shadowRoot.innerHTML = `
+      <style>${this.getStyles()}</style>
+      <div class="container">
+        ${this.buildItemElement(item)}
+        <div class="info-section">${infoRows}</div>
+      </div>
+    `;
+    }
+    getStyles() {
+        return `
+      .container {
+        min-height: 40px;
+        border-radius: 4px;
+        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.522815);
+        margin-bottom: 10px;
+        padding: 5px;
+        transition: transform 0.2s ease-in;
+        position: relative;
+        overflow: hidden;
+        background-color: var(--current-color);
+      }
+      .alloc-name {
+        padding: 4px;
+        font-size: 14px;
+        font-weight: bold;
+      }
+      .info-section {
+        margin-top: 4px;
+        padding: 4px;
+        padding-bottom: 0px;
+        font-size: 14px;
+      }
+      .info-row {
+        display: flex;
+        flex-direction: row;
+      }
+      .info-label {
+        width: 80px;
+        font-weight: bold;
+      }
+    `;
+    }
+}
+const getReadableTime = (timestamp) => {
+    const date = new Date(timestamp);
+    return date.toLocaleString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+    });
+};
+const formatStartOffset = (startOffset, humanizer, lang) => {
+    if (!startOffset)
+        return "";
+    const offset = parseInt(startOffset);
+    if (offset === 0) {
+        return language.translateString("js_at-start");
+    }
+    return ("+" +
+        humanizer.humanize(offset, {
+            language: lang,
+            units: ["w", "d", "h", "m", "s"],
+        }));
+};
+const formatDuration = (duration, humanizer, lang) => {
+    if (!duration)
+        return "";
+    return humanizer.humanize(parseInt(duration), {
+        language: lang,
+        units: ["w", "d", "h", "m", "s"],
+    });
+};
+customElements.define("allocation-element", AllocationElement);

package/dist/components/itemElement.d.ts

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

package/dist/components/itemElement.js

@@ -0,0 +1,170 @@
+// Shared web component that can display resource, package, need, and event items.
+import { ItemType } from "../types/types";
+class ItemElement extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+    }
+    attachOpenItemClickHandler() {
+        const button = this.shadowRoot?.querySelector("#open-item-btn");
+        if (button) {
+            const itemType = this.getAttribute("itemType") || ItemType.Resource;
+            const itemId = this.getAttribute("itemId");
+            const template = this.getAttribute("template");
+            const color = this.getAttribute("color");
+            button.addEventListener("click", (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                this.dispatchEvent(new CustomEvent("open-item", {
+                    detail: { itemId, template, color, itemType },
+                    bubbles: true,
+                    composed: true,
+                }));
+            });
+        }
+    }
+    connectedCallback() {
+        const itemType = this.getAttribute("itemType") || ItemType.Resource;
+        const template = this.getAttribute("template");
+        const firstline = this.getAttribute("firstline");
+        const secondline = this.getAttribute("secondline");
+        const imgUrl = this.getAttribute("imgUrl");
+        const iconUrl = this.getAttribute("iconUrl");
+        const itemId = this.getAttribute("itemId");
+        const color = this.getAttribute("color");
+        // Only resources show left image
+        const showLeftImage = itemType === ItemType.Resource && (imgUrl || iconUrl);
+        // Resources and needs show secondline, events show formatted date
+        const displaySecondLine = itemType === ItemType.Need && secondline
+            ? `${secondline} Need`
+            : secondline;
+        const showSecondLine = (itemType === ItemType.Resource || itemType === ItemType.Need) &&
+            displaySecondLine;
+        const showEventDate = itemType === ItemType.Event && secondline;
+        // Format date for events
+        const formattedDate = showEventDate ? formatDateToLocale(secondline) : null;
+        if (!this.shadowRoot) {
+            console.error("ShadowRoot is not attached.");
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>
+        .item {
+          display: flex;
+          min-height: 40px;
+          border-radius: 4px;
+          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.522815);
+          margin-bottom: 5px;
+          align-items: center;
+          padding: 0 5px;
+          transition: transform 0.2s ease-in;
+          position: relative;
+          overflow: hidden;
+        }
+        .item_image {
+          width: 30px;
+          height: 30px;
+          overflow: hidden;
+          border-radius: 50%;
+          flex-shrink: 0;
+          margin-right: 6px;
+        }
+        .item_image img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+        .item_title {
+          font-size: 14px;
+          line-height: 14px;
+          white-space: nowrap;
+          width: calc(100% - 64px);
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .item_title.no-image {
+          margin-left: 6px;
+        }
+        .item_first, .item_second {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .item_button {
+          width: 30px;
+          height: 30px;
+          padding: unset;
+          background-repeat: no-repeat;
+          background-position: center;
+          min-width: 30px;
+          position: absolute;
+          right: 5px;
+          background-color: var(--current-color);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-radius: 4px;
+          border: 1px solid var(--dizmo-font-color);
+          box-shadow: 0 3px 10px rgba(0,0,0,.16);
+        }
+        .item_button-image {
+          pointer-events: none;
+        }
+        .not-invert {
+          filter: invert(0);
+        }
+        .invert {
+          filter: invert(1);
+        }
+      </style>
+      <div class="item">
+        ${showLeftImage
+            ? `
+        <div class="item_image">
+          <img class="item_button-image" loading="lazy" src="${imgUrl || iconUrl}" />
+        </div>
+        `
+            : ""}
+        <div class="item_title${showLeftImage ? "" : " no-image"}">
+          <div class="item_first">${firstline}</div>
+          ${showSecondLine ? `<div class="item_second">${displaySecondLine}</div>` : ""}
+          ${showEventDate ? `<div class="item_second">${formattedDate}</div>` : ""}
+        </div>
+        <button class="item_button not-invert" id="open-item-btn" itemid="${itemId}"
+          template="${template}" icolor="${color}"${color ? ` style="background-color: ${color} !important"` : ""}>
+          <img class="item_button-image${invertIcon(color)}" loading="lazy" src="${iconUrl}" />
+        </button>
+      </div>
+    `;
+        this.attachOpenItemClickHandler();
+    }
+}
+const formatDateToLocale = (dateString) => {
+    try {
+        const date = new Date(dateString);
+        if (isNaN(date.getTime())) {
+            return dateString;
+        }
+        return date.toLocaleDateString(undefined, {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+        });
+    }
+    catch {
+        return dateString;
+    }
+};
+const invertIcon = (backgroundColor) => {
+    if (!backgroundColor ||
+        backgroundColor === "transparent" ||
+        backgroundColor === "" ||
+        backgroundColor === "#00000000") {
+        return "";
+    }
+    return dizmo.getAdaptiveColor("#ffffff", "#000000", {
+        color: backgroundColor,
+    }) === "#000000"
+        ? " not-invert"
+        : " invert";
+};
+customElements.define("item-element", ItemElement);

package/dist/index.d.ts

@@ -9,3 +9,4 @@ export { events } from "./modules/events";
 export { needs } from "./modules/needs";
 export { packages } from "./modules/packages";
 export { translations } from "./modules/translations";
+export { components } from "./modules/components";

package/dist/index.js

@@ -13,3 +13,4 @@ export { events } from "./modules/events";
 export { needs } from "./modules/needs";
 export { packages } from "./modules/packages";
 export { translations } from "./modules/translations";
+export { components } from "./modules/components";

package/dist/modules/components.d.ts

@@ -0,0 +1,7 @@
+import "../components/itemElement";
+import "../components/allocationElement";
+import { ItemType, AllocationMode } from "../types/types";
+export declare const components: {
+    ItemType: typeof ItemType;
+    AllocationMode: typeof AllocationMode;
+};

package/dist/modules/components.js

@@ -0,0 +1,8 @@
+// Side-effect imports register the custom elements
+import "../components/itemElement";
+import "../components/allocationElement";
+import { ItemType, AllocationMode } from "../types/types";
+export const components = {
+    ItemType,
+    AllocationMode,
+};

package/dist/types/types.d.ts

@@ -589,3 +589,14 @@ export type FileInfoResult = {
     blobURL: string | undefined;
     previewURL: string;
 };
+export declare enum ItemType {
+    Resource = "resource",
+    Package = "package",
+    Need = "need",
+    Event = "event"
+}
+export declare enum AllocationMode {
+    Package = "package",
+    Allocation = "allocation",
+    CompactAllocation = "compact-allocation"
+}

package/dist/types/types.js

@@ -1 +1,13 @@
-export {};
+export var ItemType;
+(function (ItemType) {
+    ItemType["Resource"] = "resource";
+    ItemType["Package"] = "package";
+    ItemType["Need"] = "need";
+    ItemType["Event"] = "event";
+})(ItemType || (ItemType = {}));
+export var AllocationMode;
+(function (AllocationMode) {
+    AllocationMode["Package"] = "package";
+    AllocationMode["Allocation"] = "allocation";
+    AllocationMode["CompactAllocation"] = "compact-allocation";
+})(AllocationMode || (AllocationMode = {}));

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@dizmo/dcs-client-library",
-  "version": "4.1.2",
+  "version": "4.2.1",
   "description": "A library that allows connection and management of dcs",
   "source": "source/index.ts",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": ["dist"], 
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "test": "mocha source/test/**/*.js",
     "build": "tsc",
@@ -15,10 +17,12 @@
   "license": "ISC",
   "devDependencies": {
     "@dizmo/dizmo.js": "^1.4.77",
+    "@dizmo/docs": "git+ssh://git@git.dizmo.com:dizmo/docs.git#semver:^999.0",
     "prettier": "3.1.0",
     "typescript": "^5.7.3"
   },
   "dependencies": {
-    "deepl-node": "^1.19.0"
+    "deepl-node": "^1.19.0",
+    "humanize-duration-ts": "^2.1.1"
   }
 }