@dizmo/dcs-client-library 4.2.1 → 4.2.3

package/dist/components/allocationElement.js

@@ -6,6 +6,7 @@
 import { language } from "../modules/language";
 import { HumanizeDurationLanguage, HumanizeDuration, } from "humanize-duration-ts";
 import { AllocationMode } from "../types/types";
+import { t } from "./componentTranslations";
 import "./itemElement";
 class AllocationElement extends HTMLElement {
     constructor() {
@@ -78,11 +79,11 @@ class AllocationElement extends HTMLElement {
             : "";
         const infoRows = this.buildInfoRows([
             {
-                label: language.translateString("js_from"),
+                label: t("js_from"),
                 value: from ? getReadableTime(parseInt(from)) : "",
             },
             {
-                label: language.translateString("js_to"),
+                label: t("js_to"),
                 value: to ? getReadableTime(parseInt(to)) : "",
             },
         ]);
@@ -127,20 +128,20 @@ class AllocationElement extends HTMLElement {
         const duration = this.getAttribute("duration");
         const infoRows = this.buildInfoRows([
             {
-                label: language.translateString("js_start"),
+                label: t("js_start"),
                 value: item.template
                     ? formatStartOffset(startOffset, humanizer, LANG)
                     : "",
             },
             {
-                label: language.translateString("js_duration"),
+                label: t("js_duration"),
                 value: item.template ? formatDuration(duration, humanizer, LANG) : "",
             },
         ]);
         this.shadowRoot.innerHTML = `
       <style>${this.getStyles()}</style>
       <div class="container">
-        ${this.buildItemElement(item)}
+        ${this.buildItemElement(item, {}, this.getAttribute("leafType") || "resource")}
         <div class="info-section">${infoRows}</div>
       </div>
     `;
@@ -172,6 +173,7 @@ class AllocationElement extends HTMLElement {
       .info-row {
         display: flex;
         flex-direction: row;
+        justify-content: space-between;
       }
       .info-label {
         width: 80px;
@@ -195,7 +197,7 @@ const formatStartOffset = (startOffset, humanizer, lang) => {
         return "";
     const offset = parseInt(startOffset);
     if (offset === 0) {
-        return language.translateString("js_at-start");
+        return t("js_at-start");
     }
     return ("+" +
         humanizer.humanize(offset, {

package/dist/components/componentTranslations.d.ts

@@ -0,0 +1 @@
+export declare function t(key: string): string;

package/dist/components/componentTranslations.js

@@ -0,0 +1,48 @@
+import { getMostSuitedLanguage } from "../helper/language.js";
+const translations = {
+    en: {
+        js_from: "From",
+        js_to: "To",
+        js_start: "Start",
+        js_duration: "Duration",
+        "js_at-start": "At start",
+        need_suffix: "Need",
+    },
+    de: {
+        js_from: "Von",
+        js_to: "Bis",
+        js_start: "Start",
+        js_duration: "Dauer",
+        "js_at-start": "Am Anfang",
+        need_suffix: "Bedarf",
+    },
+    fr: {
+        js_from: "De",
+        js_to: "À",
+        js_start: "Début",
+        js_duration: "Durée",
+        "js_at-start": "Au début",
+        need_suffix: "Besoin",
+    },
+    it: {
+        js_from: "Da",
+        js_to: "A",
+        js_start: "Inizio",
+        js_duration: "Durata",
+        "js_at-start": "All'inizio",
+        need_suffix: "Fabbisogno",
+    },
+    es: {
+        js_from: "De",
+        js_to: "A",
+        js_start: "Inicio",
+        js_duration: "Duración",
+        "js_at-start": "Al inicio",
+        need_suffix: "Necesidad",
+    },
+};
+const supportedLanguages = Object.keys(translations);
+export function t(key) {
+    const lang = getMostSuitedLanguage(supportedLanguages, "en");
+    return translations[lang]?.[key] ?? translations["en"][key] ?? key;
+}

package/dist/components/itemElement.js

@@ -1,5 +1,9 @@
 // Shared web component that can display resource, package, need, and event items.
 import { ItemType } from "../types/types";
+import { t } from "./componentTranslations";
+const packageIconLight = `data:image/svg+xml,${encodeURIComponent('<svg width="27.5" height="27.5" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="m4.42,22.06l0,-6.22l3.11,0l0,6.22l-3.11,0zm5.18,-6.22l0,-5.18l3.11,0l0,5.18l-3.11,0zm5.18,-5.18l0,-5.18l3.11,0l0,5.18l-3.11,0zm5.18,11.41l0,-16.59l3.11,0l0,16.59l-3.11,0z" fill="#424142" transform="rotate(-90.2178 13.7484 13.7683)"/></svg>')}`;
+const packageIconDark = `data:image/svg+xml,${encodeURIComponent('<svg width="27.5" height="27.5" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"><path d="m4.42,22.06l0,-6.22l3.11,0l0,6.22l-3.11,0zm5.18,-6.22l0,-5.18l3.11,0l0,5.18l-3.11,0zm5.18,-5.18l0,-5.18l3.11,0l0,5.18l-3.11,0zm5.18,11.41l0,-16.59l3.11,0l0,16.59l-3.11,0z" fill="#ffffff" transform="rotate(-90.2178 13.7484 13.7683)"/></svg>')}`;
+const needBadgeIcon = `data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M477.28-240q21.96 0 37.3-15.34 15.33-15.33 15.33-37.32 0-21.99-15.33-37.18-15.34-15.18-37.3-15.18-21.95 0-37.29 15.18-15.34 15.19-15.34 37.18 0 21.99 15.34 37.32Q455.33-240 477.28-240ZM483.28-646.98q23.07 0 40.15 14.91 17.07 14.91 17.07 37.27 0 20.8-12.66 37.08-12.67 16.29-28.71 30.33-23 20-40.62 44.24-17.62 24.24-17.62 54.24 0 14.81 11.15 24.86Q463.2-394 478.07-394q15.93 0 27.15-10.6 11.21-10.6 15.17-26.31 4.48-20.05 17.64-35.71 13.17-15.66 28.45-29.95 23-21.76 39.02-48.11 16.02-26.36 16.02-58.12 0-51.48-41.14-84.58t-95.9-33.1q-38.96 0-73.82 16.48-34.86 16.48-53.81 49.96-7.48 12.71-4.76 27.16 2.73 14.45 14.71 21.95 14.72 8.71 30.8 5.35 16.07-3.35 27.03-17.83 10.52-14.05 26.09-21.81 15.58-7.76 32.56-7.76Z"/></svg>')}`;
 class ItemElement extends HTMLElement {
     constructor() {
         super();
@@ -36,7 +40,7 @@ class ItemElement extends HTMLElement {
         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} ${t("need_suffix")}`
             : secondline;
         const showSecondLine = (itemType === ItemType.Resource || itemType === ItemType.Need) &&
             displaySecondLine;
@@ -115,6 +119,23 @@ class ItemElement extends HTMLElement {
         .invert {
           filter: invert(1);
         }
+        .need-badge {
+          position: absolute;
+          bottom: -3px;
+          right: -3px;
+          width: 16px;
+          height: 16px;
+          border-radius: 50%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          pointer-events: none;
+          overflow: hidden;
+        }
+        .need-badge img {
+          width: 100%;
+          height: 100%;
+        }
       </style>
       <div class="item">
         ${showLeftImage
@@ -131,7 +152,8 @@ class ItemElement extends HTMLElement {
         </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}" />
+          <img class="item_button-image${iconUrl ? invertIcon(color) : ""}" loading="lazy" src="${iconUrl || getDefaultIcon(itemType, color)}" />
+          ${itemType === ItemType.Need ? `<div class="need-badge" style="background-color: ${isIconInverted(color) ? "#ffffff" : "#000000"};"><img src="${needBadgeIcon}" style="${isIconInverted(color) ? "" : "filter: invert(1);"}"></div>` : ""}
         </button>
       </div>
     `;
@@ -154,6 +176,14 @@ const formatDateToLocale = (dateString) => {
         return dateString;
     }
 };
+const getDefaultIcon = (itemType, color) => {
+    if (itemType === ItemType.Package) {
+        const isInverted = invertIcon(color) === " invert";
+        return isInverted ? packageIconDark : packageIconLight;
+    }
+    return "";
+};
+const isIconInverted = (color) => invertIcon(color) === " invert";
 const invertIcon = (backgroundColor) => {
     if (!backgroundColor ||
         backgroundColor === "transparent" ||

package/dist/types/types.d.ts

@@ -220,7 +220,7 @@ export type FullPackageAlloc = {
     startOffset: number;
     duration: number;
     leafId: string;
-    leafData: ItemResult | null;
+    leafData: ItemResult | NeedResult | null;
 };
 export type ItemResult = {
     labels: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dizmo/dcs-client-library",
-  "version": "4.2.1",
+  "version": "4.2.3",
   "description": "A library that allows connection and management of dcs",
   "source": "source/index.ts",
   "main": "dist/index.js",