@dizmo/dcs-client-library 4.2.0 → 4.2.2

package/dist/components/allocationElement.js

@@ -140,7 +140,7 @@ class AllocationElement extends HTMLElement {
         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>
     `;

package/dist/components/itemElement.js

@@ -1,5 +1,8 @@
 // Shared web component that can display resource, package, need, and event items.
 import { ItemType } from "../types/types";
+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();
@@ -35,8 +38,11 @@ class ItemElement extends HTMLElement {
         // 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) &&
-            secondline;
+            displaySecondLine;
         const showEventDate = itemType === ItemType.Event && secondline;
         // Format date for events
         const formattedDate = showEventDate ? formatDateToLocale(secondline) : null;
@@ -79,6 +85,9 @@ class ItemElement extends HTMLElement {
           overflow: hidden;
           text-overflow: ellipsis;
         }
+        .item_title.no-image {
+          margin-left: 6px;
+        }
         .item_first, .item_second {
           overflow: hidden;
           text-overflow: ellipsis;
@@ -109,6 +118,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
@@ -118,14 +144,15 @@ class ItemElement extends HTMLElement {
         </div>
         `
             : ""}
-        <div class="item_title">
+        <div class="item_title${showLeftImage ? "" : " no-image"}">
           <div class="item_first">${firstline}</div>
-          ${showSecondLine ? `<div class="item_second">${secondline}</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}" />
+          <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>
     `;
@@ -148,6 +175,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.0",
+  "version": "4.2.2",
   "description": "A library that allows connection and management of dcs",
   "source": "source/index.ts",
   "main": "dist/index.js",