architwin 1.14.16 → 1.15.0

package/lib/atwinui/components/toolbar/tagListPane.js

@@ -7,24 +7,39 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { SPACE_EVENTS, sortTagOptions } from "../../../types";
+import { SPACE_EVENTS, sortTagOptions, TAG_TYPE } from "../../../types";
 import { batchAddEventListenerByClassName, toggleDisplayPane, batchAddEventListenerByDataAttribute } from "../../events";
 import { convertToCssRgb, getBundleVersion } from "../../../utils";
-import { gotoTag, disposeTag, dispatchSpaceEvent, _tags, getUserAssignedCategories, _mpConfig } from "../../../architwin";
+import { gotoTag, disposeTag, dispatchSpaceEvent, _tags, getUserAssignedCategories, _mpConfig, moveTag, getAtwinSdk } from "../../../architwin";
 import { initFormData, toggleDropdown } from "./tagFormPane";
 import { toggleModal, setModalAction } from "./modal";
+import { initIoTFormData, setIoTFormMode } from './tagIotFormPane';
 import { Notyf } from 'notyf';
 import { _tagCategories } from "../../../architwin";
 import i18n from './i18n';
 import log from 'loglevel';
-// import { e } from "mathjs";
-let notify = new Notyf({ position: { x: 'left', y: 'bottom' } });
+import { cancelMoveTag } from "../../../tag";
+const notify = new Notyf({
+    position: { x: 'left', y: 'bottom' },
+    types: [
+        {
+            type: 'info',
+            background: '#3b82f6',
+            message: 'white',
+            icon: false,
+            duration: 3000,
+        },
+    ],
+});
 let _tagLink;
 let isChevronEventAdded = false;
 let allSubcategories = [];
 let tagSearchTerm = '';
+let iotTags = [];
 export let selectedCategoryFilterId = undefined;
 export let selectedSubCategoryFilterId = undefined;
+export let isTagPaneActive = true;
+export let currentTagPaneMode = null;
 export let selectedTagSortOption = { by: 'label', order: 'asc' };
 export function renderTagListPane() {
     const element = document.createElement('div');
@@ -35,27 +50,27 @@ export function renderTagListPane() {
     element.setAttribute('data-cy', 'at-tag-list-pane');
     element.innerHTML = `
         <div class="at_panel_header">
-            <span>${i18n.t('Tags')}</span>
+            <span id="at-tag-list-title">${i18n.t('Tags')}</span>
         </div>
-        <div class="at_form_container at_h-min-65 at_tag_list_pane">
-<div class="at_tags_filter_section">
-    <input class="at_field_search_input" type="text" name="search_name" id="at-tag-name-search" data-cy="at-tag-name-search" placeholder=${i18n.t('Search...')}>
-    <span class="mdi mdi-close at_button_search_tag" id="at-clear-search-tag-name" style="display:none"></span>
-    <button class="at_search_button" id="at-search-tag-button">
-        <span class="mdi mdi-magnify"></span>
-    </button>
-    <div class="at_sort_btn_container">
-        <div id="at-tag-sort-icon" class="mdi mdi-filter mdi-24px at_icon_hover">
-            <span id="at-tag-sort-options-tooltip" class="at_custom_tooltip">
-                <p class="at_tag_sort_option at_sort_option_selected" data-sort="Ascending">${i18n.t('Ascending')}</p>
-                <p class="at_tag_sort_option" data-sort="Descending">${i18n.t('Descending')}</p>
-                <p class="at_tag_sort_option" data-sort="Newest">${i18n.t('Newest')}</p>
-                <p class="at_tag_sort_option" data-sort="Oldest">${i18n.t('Oldest')}</p>
-            </span>
-        </div>
-    </div>
-</div>
-            <div class="at_field at_flex_column" style="${_tagCategories ? '' : 'display: none;'}">
+        <div class="at_form_container at_tag_list_pane">
+            <div class="at_tags_filter_section">
+                <input class="at_field_search_input" type="text" name="search_name" id="at-tag-name-search" data-cy="at-tag-name-search" placeholder=${i18n.t('Search...')}>
+                <span class="mdi mdi-close at_button_search_tag" id="at-clear-search-tag-name" style="display:none"></span>
+                <button class="at_search_button" id="at-search-tag-button">
+                    <span class="mdi mdi-magnify"></span>
+                </button>
+                <div class="at_sort_btn_container">
+                    <div id="at-tag-sort-icon" class="mdi mdi-filter mdi-24px at_icon_hover">
+                        <span id="at-tag-sort-options-tooltip" class="at_custom_tooltip">
+                            <p class="at_tag_sort_option at_sort_option_selected" data-sort="Ascending">${i18n.t('Ascending')}</p>
+                            <p class="at_tag_sort_option" data-sort="Descending">${i18n.t('Descending')}</p>
+                            <p class="at_tag_sort_option" data-sort="Newest">${i18n.t('Newest')}</p>
+                            <p class="at_tag_sort_option" data-sort="Oldest">${i18n.t('Oldest')}</p>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="at_field at_flex_column" style="${_tagCategories ? '' : 'display: none;'}" id="at-custom-category-filter-dropdown-container">
                 <label for="">${i18n.t('Category')}</label>
                 <div id="at-custom-category-filter-dropdown" data-cy="at-custom-category-filter-dropdown">
                     <div id="at-category-filter-dropdown" class="at_dropdown at_flex at_flex_row at_space_between">    
@@ -69,7 +84,7 @@ export function renderTagListPane() {
                     </div>
                 </div>
             </div>
-            <div class="at_field at_flex_column" style="${_tagCategories ? '' : 'display: none;'}">
+            <div class="at_field at_flex_column" style="${_tagCategories ? '' : 'display: none;'}" id="at-custom-subcategory-filter-dropdown-container">
                 <label for="">${i18n.t('Subcategory')}</label>
                 <div id="at-custom-subcategory-filter-dropdown" data-cy="at-custom-subcategory-filter-dropdown">
                     <div id="at-subcategory-filter-dropdown" class="at_dropdown at_flex at_flex_row at_space_between">    
@@ -84,7 +99,7 @@ export function renderTagListPane() {
                 </div>
             </div>
         </div>
-        <div class="at_scrollable_container at_h-min-45">
+        <div class="at_scrollable_container at_h-min-45" id="at-tag-list-scrollable-container">
             <table id="at-tag-list-container">
             </table>
         </div>
@@ -128,6 +143,7 @@ export function isTagPartOfCategory(categoryUUID) {
 }
 export function renderTags(tags, showOwnTagsOnly = false) {
     console.log("renderTags", tags);
+    iotTags = tags;
     const tagContainer = document.getElementById('at-tag-list-container');
     // get value from mp config
     const isReadOnly = _mpConfig.restrictionConfig.isTagReadOnly;
@@ -142,14 +158,16 @@ export function renderTags(tags, showOwnTagsOnly = false) {
     }
     tagContainer.innerHTML = ``;
     tags.forEach(tag => {
+        console.log('@caroline render tag checking: ', tag);
         if (showOwnTagsOnly) {
             if (isTagPartOfCategory(tag.category_uuid)) {
-                const row = renderTagRow(tag.json_data, tag.tag_icon_url);
+                const row = renderTagRow(tag.json_data, tag.tag_icon_url, tag.tag_type);
                 tagContainer.appendChild(row);
             }
         }
         else {
-            const row = renderTagRow(tag.json_data, tag.tag_icon_url);
+            console.log('@caroline render tag checking 2: ', tag);
+            const row = renderTagRow(tag.json_data, tag.tag_icon_url, tag.tag_type);
             tagContainer.appendChild(row);
         }
     });
@@ -161,9 +179,17 @@ export function renderTags(tags, showOwnTagsOnly = false) {
         const tag = document.getElementById(event.target.id);
         if (tag) {
             const tagId = tag.getAttribute('tag-id');
+            const el = document.getElementById(`at-edit-tag-${tagId}`);
+            const targetPane = el.getAttribute('target-pane');
             if (tagId && tagId != null) {
-                initFormData(tagId);
-                // setTagCategoriesOption()
+                if (targetPane == 'at-tag-iot-form-pane') {
+                    setIoTFormMode("EDIT" /* FORM_MODE.EDIT */);
+                    initIoTFormData(tagId);
+                }
+                else {
+                    initFormData(tagId);
+                    // setTagCategoriesOption()
+                }
             }
         }
     }));
@@ -230,9 +256,11 @@ export function renderTags(tags, showOwnTagsOnly = false) {
     }));
     batchAddEventListenerByClassName('at_tag_row', (event) => __awaiter(this, void 0, void 0, function* () {
         console.log('Event', event);
-        //@ts-ignore
-        const tagRow = event.target.closest('.at_tag_row');
-        if (tagRow) {
+        const target = event.target;
+        const tagRow = target.closest('.at_tag_row');
+        const targetElementId = target.id;
+        const isTargetRelocateBtn = targetElementId.startsWith('at-relocate-tag') ? true : false;
+        if (tagRow && !isTargetRelocateBtn) {
             const tagId = tagRow.children[1].getAttribute('tag-id');
             if (tagId && tagId != null) {
                 yield gotoTag(tagId);
@@ -254,22 +282,69 @@ export function renderTags(tags, showOwnTagsOnly = false) {
             ]
         });
     }
+    batchAddEventListenerByClassName('at_locate_tag_btn ', (event) => __awaiter(this, void 0, void 0, function* () {
+        log.info("event: IoT Relocate", event);
+        const relocateTagBtn = event.target;
+        const tagId = relocateTagBtn.getAttribute('tag-id');
+        const index = _tags.findIndex(tag => tag.json_data.id == tagId);
+        _tags[index].uuid = _tags[index].id.toString();
+        // Move tag
+        moveTag(tagId, () => {
+            // save edited tag location
+            let payload = { tag: _tags[index] };
+            dispatchSpaceEvent(SPACE_EVENTS.IOT_TAG_SAVED, payload);
+            notify.success(i18n.t("SuccessUpdateTag"));
+            // remove lister right after clicking 'Escape'
+            document.removeEventListener('keydown', handleEscKey);
+        });
+        // notification info to inform the user clicking 'Escape' stops tag relocation
+        notify.open({ type: 'info', message: i18n.t('PressEscCancelRelocation') });
+        // Escape event listener
+        const handleEscKey = (event) => {
+            log.info("event: handleEscKey", event);
+            // remove lister right after clicking 'Escape'
+            document.removeEventListener('keydown', handleEscKey);
+            if (event.key === "Escape") {
+                cancelMoveTag();
+                const sdk = getAtwinSdk();
+                if (sdk !== null) {
+                    sdk.Tag.editPosition(_tags[index].json_data.id, {
+                        anchorPosition: _tags[index].json_data.anchorPosition,
+                        stemVector: Object.assign({}, _tags[index].json_data.stemVector),
+                    });
+                }
+                notify.open({ type: 'info', message: i18n.t('MoveTagCancelled') });
+            }
+        };
+        // Attach it once
+        document.addEventListener('keydown', handleEscKey);
+    }));
     initDropdownEventListeners();
 }
-export function renderTagRow(tag, tagIconUrl) {
+export function renderTagRow(tag, tagIconUrl, tag_type = null) {
+    log.info('@caroline rendertagrow: ', tag);
     const element = document.createElement('tr');
     element.classList.add('at_tag_row'); //this class is not defined and I only use it as an identifier for attaching events
     element.setAttribute('id', `at-tag-row-${tag.id}`);
     element.setAttribute('data-toggle-pane', '');
+    log.info("tag_type", tag_type);
+    log.info("tagIconUrl", tagIconUrl);
     // element.setAttribute('tag-id',tag.json_data.id) 
     // get read only value from mpconfig
     const isTagReadOnly = _mpConfig.restrictionConfig.isTagReadOnly;
     console.log("_isTagReadOnly: ", isTagReadOnly);
     // Displays tag icon with tag color indicator 
     const thisTagIconURL = tagIconUrl === 'button.png' || tagIconUrl === '' || tagIconUrl === undefined ? "https://cdn.jsdelivr.net/npm/architwin@latest/static/images/button.png" : tagIconUrl;
+    let tagIconIndicatorBg = convertToCssRgb(tag.color);
+    let alert_iot_indicator = '';
+    if (tag_type === TAG_TYPE.IOT && tagIconUrl.includes('alert.png')) {
+        element.classList.add('at_bg_red_850');
+        tagIconIndicatorBg = 'hsl(337.56deg 85.62% 30%)';
+        alert_iot_indicator = 'at_border_red_800';
+    }
     element.innerHTML = `
         <td style="padding-top: 5px;">
-            <div class="at_colored-indicator" style="background-color:${convertToCssRgb(tag.color)}">
+            <div class="at_colored-indicator ${alert_iot_indicator}" style="background-color:${tagIconIndicatorBg}">
                 <div class="at_colored-indicator-img" style="background-image: url(${thisTagIconURL});"></div>
             </div>
         </td>
@@ -277,9 +352,10 @@ export function renderTagRow(tag, tagIconUrl) {
             <span>${tag.label}</span>
         </td>
         <td class="at_table_button_row">
-            <span class="mdi mdi-pencil at_edit_tag_btn ${isTagReadOnly ? 'at_disabled' : ''}" id="at-edit-tag-${tag.id}" data-cy="at-edit-tag-${tag.id}" tag-id="${tag.id}" target-pane="at-tag-form-pane"></span>
-            <span class="mdi mdi-content-copy at_copy_tag_btn ${isTagReadOnly ? 'at_disabled' : ''} id="at-edit-tag-${tag.id}""  id="at-copy-tag-${tag.id}" data-cy="at-copy-tag-${tag.id}" tag-id="${tag.id}"></span>
-            <span class="mdi mdi-message at_message_tag_btn" id="at-message-tag-${tag.id}" data-cy="at-message-tag-${tag.id}" tag-id="${tag.id}" target-pane="at-tag-messaging-pane"></span>
+            <span class="mdi mdi-pencil at_edit_tag_btn ${isTagReadOnly ? 'at_disabled' : ''}" id="at-edit-tag-${tag.id}" data-cy="at-edit-tag-${tag.id}" tag-id="${tag.id}" target-pane=${tag_type === TAG_TYPE.IOT ? "at-tag-iot-form-pane" : "at-tag-form-pane"}></span>
+            <span class="mdi mdi-content-copy at_copy_tag_btn ${isTagReadOnly ? 'at_disabled' : ''} id="at-edit-tag-${tag.id}" id="at-copy-tag-${tag.id}" data-cy="at-copy-tag-${tag.id}" tag-id="${tag.id}"></span>
+            <span class="mdi mdi-message at_message_tag_btn ${tag_type === TAG_TYPE.IOT ? 'at_hidden' : ''}" id="at-message-tag-${tag.id}"  data-cy="at-message-tag-${tag.id}" tag-id="${tag.id}" target-pane="at-tag-messaging-pane"></span>
+            <span class="mdi mdi-map-marker at_locate_tag_btn ${tag_type === TAG_TYPE.IOT ? '' : 'at_hidden'}" id="at-relocate-tag-${tag.id}"  data-cy="at-relocate-tag-${tag.id}" tag-id="${tag.id}"></span>
             <span class="mdi mdi-trash-can-outline at_delete_tag_btn ${isTagReadOnly ? 'at_disabled' : ''}"  id="at-delete-tag-${tag.id}" data-cy="at-delete-tag-${tag.id}" tag-id="${tag.id}"></span>
         </td>
     `;
@@ -499,6 +575,18 @@ export function searchClearfield() {
         tagSearchTerm = '';
     }
 }
+export function filterIotTagList(tags) {
+    log.info("filterIotTagList", tags);
+    const iotTags = tags.filter((tag) => tag.tag_type === TAG_TYPE.IOT);
+    log.info("iotTags", iotTags);
+    return iotTags;
+}
+export function setTagPaneActive(value) {
+    isTagPaneActive = value;
+}
+export function setCurrentTagPaneMode(value) {
+    currentTagPaneMode = value;
+}
 export const sortTags = (items, options) => {
     if (!(items === null || items === void 0 ? void 0 : items.length))
         return [];

package/lib/atwinui/events.d.ts

@@ -19,6 +19,7 @@ declare function batchAddEventListenerByClassNames(classNames: Array<string>, ca
 declare function batchAddEventListenerById(ids: Array<string>, callback: EventListener): void;
 declare function setActiveToolbarItem(itemId: string): void;
 declare function toggleDisplayPane(targetId: string): Promise<void>;
+declare function renderTagPaneContent(): Promise<void>;
 declare function toggleActionBar(state: string): void;
 export declare function handleUserLeaveSessionClick(): void;
 declare function setupIndividualEventListeners(): void;
@@ -43,6 +44,7 @@ declare function handleDeletePartition(targetId: string): void;
  * Handles the display logic for showing the custom minimap.
  */
 declare function handleShowCustomMinimap(): void;
+declare function handleDisplayElements(id: string): void;
 declare function handleWindowVisibility(visibilityBtn: HTMLElement, updateStateDB: boolean, fromParentVisibilityState?: boolean): Promise<void>;
 declare function clearActivePane(): void;
-export { activeToolbarItem, activeActionItem, cancelModelPlacementPrompt, isCustomMapControlsVisible, pipeColor, batchAddEventListenerById, batchAddEventListenerByClassName, batchAddEventListenerByClassNames, batchAddEventListenerByDataAttribute, setActiveToolbarItem, toggleDisplayPane, toggleActionBar, setupIndividualEventListeners, setupSpaceEventSubscriptions, handleModelVisibility, handleDeleteModel, handleShowMinimap, handleScrollToView, handleRenderMeetingUI, handleShowCustomMinimap, handlePartitionVisibility, handlePolygonVisibility, handleDeletePartition, handleWindowVisibility, clearActivePane };
+export { activeToolbarItem, activeActionItem, cancelModelPlacementPrompt, isCustomMapControlsVisible, pipeColor, batchAddEventListenerById, batchAddEventListenerByClassName, batchAddEventListenerByClassNames, batchAddEventListenerByDataAttribute, setActiveToolbarItem, toggleDisplayPane, toggleActionBar, setupIndividualEventListeners, setupSpaceEventSubscriptions, handleModelVisibility, handleDeleteModel, handleShowMinimap, handleScrollToView, handleRenderMeetingUI, handleShowCustomMinimap, renderTagPaneContent, handlePartitionVisibility, handlePolygonVisibility, handleDeletePartition, handleDisplayElements, handleWindowVisibility, clearActivePane };