architwin 1.17.0 → 1.17.1

package/lib/atwinui/components/toolbar/tagIotFormPane.d.ts

@@ -11,7 +11,7 @@ export declare function toggleIoTDevicesOptions(): void;
  * Sets Radio Button of the IoT's the Linked System
  *
  */
-export declare function setSelectedIoTSystemRadio(payload: string): void;
+export declare function setSelectedIoTSystem(payload: string): void;
 /**
  * Clears dropdowns for both Category and Devices
  *
@@ -43,6 +43,8 @@ export declare function getIotTagFormData(): {
     iotSystem: string;
     tag_type: TAG_TYPE;
 };
+export declare function initIoTLinkedSystemOptions(): void;
+export declare function selectIoTLinkedSystemOptions(): void;
 /**
  * Clears all Fields Input Fields including the Linked Devices Table
  *

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

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { IOT_LINKED_SYSTEMS, SPACE_EVENTS, TAG_TYPE } from '../../../types';
 import log from 'loglevel';
 import i18n from './i18n';
-import { dispatchSpaceEvent, _tagIotCategoryTypes, _tagIotDevices, _tags } from '../../../architwin';
+import { dispatchSpaceEvent, _tagIotCategoryTypes, _tagIotDevices, _tags, _iotLinkedSyatemOptions } from '../../../architwin';
 import { stringContains, generateUUID } from "../../../utils";
 import { batchAddEventListenerByClassName } from '../../events';
 import { toggleModal, setModalAction } from "./modal";
@@ -18,12 +18,13 @@ import { Notyf } from 'notyf';
 let selectedIoTCatOption;
 let selectedIoTDeviceOption;
 export let iotTagFormMode = "ADD" /* FORM_MODE.ADD */;
-export let selectedIoTSystem = '';
+export let selectedIoTSystem = IOT_LINKED_SYSTEMS.BEMAC;
 export let selectedIotTag = undefined;
 let tagIotName, iotModelName, iotSerialNumber, iotMfrName, iotSystemLink;
 let selectedIoTCat;
 let linkedDevicesArray = [];
 let iotCategoryIconList = ['mdi-power', 'mdi-thermometer', 'mdi-water-percent', 'mdi-gauge', 'mdi-leak', 'mdi-water', 'mdi-lightbulb-on', 'mdi-gas-cylinder', 'mdi-flask', 'mdi-meter-electric', 'mdi-information-symbol', 'mdi-sine-wave', 'mdi-camera', 'mdi-dots-horizontal'];
+let iotLinkedSystemOptions = ['BEMAC', 'HANASYS', 'Url Link', 'i-MTEC'];
 let notify = new Notyf({ position: { x: 'left', y: 'bottom' } });
 export function renderTagIOTFormPane() {
     const element = document.createElement('div');
@@ -37,38 +38,27 @@ export function renderTagIOTFormPane() {
     </div>
 
     <div class="at_form_container at_scrollable_container at_h-min-70">
-      <label for="">${i18n.t('LinkedSystems')}</label>
-      <div class="at_linked_systems_options_contianer at_gap_2" style="display: inline-flex">
-        <label class="at_flex at_align_center at_text_xs at_gap_1">
-          <input type="radio" id="at-linked-radio-bemac" name="iot-link-system" checked value=${IOT_LINKED_SYSTEMS.BEMAC} selected />
-            ${i18n.t("BEMAC")}
-        </label>
-        <label class="at_flex at_align_center at_text_xs at_gap_1">
-          <input type="radio" id="at-linked-radio-hanasys" name="iot-link-system" value=${IOT_LINKED_SYSTEMS.HANASYS} />
-            ${i18n.t("HANASYS")}
-        </label>
-        <label class="at_flex at_align_center at_text_xs at_gap_1">
-          <input type="radio" id="at-linked-radio-link" name="iot-link-system" value=${IOT_LINKED_SYSTEMS.URL_LINK} />
-            ${i18n.t("URLLink")}
-        </label>
-      </div>
+      <div class="at_field at_flex_column">
 
-        <div class="at_field at_flex_column">
-         <label for="">${i18n.t('Category')}</label>
-          <div id="at-iot-category-dropdown" data-cy="at-iot-category-dropdown">
-            <div id="at-iot-cat-filter-dropdown" class="at_dropdown at_flex at_flex_row at_space_between">    
-              <div class="at_dropdown_toggle" id="at-iot-selected-cat" data-cy="at-iot-selected-cat">${i18n.t(selectedIoTCatOption)}</div>
-                  <span class="mdi mdi-chevron-down at_chevron" id="at-iot-cat-filter-chevron" data-cy="at-iot-cat-filter-chevron"></span>
-              </div>
-                    
-              <div style="position:absolute;">
-                <div class="at_dropdown_options" id="at-iot-category-options" data-cy="at-iot-category-options">
+        <label>${i18n.t('LinkedSystems')}</label>
 
-                </div>
-              </div>
+        <div id="at-iot-linked-system-listbox" class="at_listbox" data-cy="at-iot-linked-system-listbox">
+          <ul class="at_listbox_options" role="listbox" aria-label="Linked Systems">
+           
+          </ul>
+        </div>
 
-            </div>
+        <label for="">${i18n.t('Category')}</label>
+        <div id="at-iot-category-dropdown" data-cy="at-iot-category-dropdown">
+          <div id="at-iot-cat-filter-dropdown" class="at_dropdown at_flex at_flex_row at_space_between">    
+            <div class="at_dropdown_toggle" id="at-iot-selected-cat" data-cy="at-iot-selected-cat">${i18n.t(selectedIoTCatOption)}</div>
+            <span class="mdi mdi-chevron-down at_chevron" id="at-iot-cat-filter-chevron" data-cy="at-iot-cat-filter-chevron"></span>
+          </div>
+          <div style="position:absolute;">
+            <div class="at_dropdown_options" id="at-iot-category-options" data-cy="at-iot-category-options"></div>
           </div>
+        </div>
+        </div>
 
         <div class="at-field at_flex_row at_justify_between">
             <label for="">${i18n.t('TagName')}</label>
@@ -189,7 +179,6 @@ function setInputFields() {
 }
 export function setIotCategoryOptions() {
     log.info('setIotCategoryOptions()');
-    dispatchSpaceEvent(SPACE_EVENTS.GET_IOT_CATEGORIES, { payload: 'hello from library' });
     if (_tagIotCategoryTypes) {
         renderIotCategoryDropdownOptions('at-iot-category-options', _tagIotCategoryTypes);
         batchAddEventListenerByClassName('at_iot_cat_option', (event) => {
@@ -242,34 +231,21 @@ export function toggleIoTDevicesOptions() {
  * Sets Radio Button of the IoT's the Linked System
  *
  */
-export function setSelectedIoTSystemRadio(payload) {
-    log.info('setSelectedIoTSystemRadio()');
-    const linkedDeviceContainer = document.getElementById('at-iot-device-main-container');
-    const systemLinkContainer = document.getElementById('at-iot-system-link-container');
-    let targetId = '';
-    if (payload == IOT_LINKED_SYSTEMS.BEMAC) {
-        targetId = 'at-linked-radio-bemac';
-    }
-    else if (payload == IOT_LINKED_SYSTEMS.HANASYS) {
-        targetId = 'at-linked-radio-hanasys';
-    }
-    else if (payload == IOT_LINKED_SYSTEMS.URL_LINK) {
-        targetId = 'at-linked-radio-link';
-    }
-    const linkedRadio = document.getElementById(targetId);
-    if (linkedRadio) {
-        selectedIoTSystem = payload;
-        linkedRadio.checked = true;
-    }
-    if (payload === IOT_LINKED_SYSTEMS.URL_LINK) {
-        log.info('payload == IOT_LINKED_SYSTEMS.URL_LINK', payload, IOT_LINKED_SYSTEMS.URL_LINK);
-        linkedDeviceContainer.style.display = 'none';
-        systemLinkContainer.style.display = 'block';
-    }
-    else {
-        linkedDeviceContainer.style.display = 'block';
-        systemLinkContainer.style.display = 'none';
-    }
+export function setSelectedIoTSystem(payload) {
+    log.info('setSelectedIoTSystem()', payload);
+    selectedIoTSystem = payload;
+    const options = document.querySelectorAll('.at_listbox_option');
+    options.forEach(option => {
+        log.info("option.getAttribute('data-value') == selectedIoTSystem", option.getAttribute('data-value'), selectedIoTSystem);
+        if (option.getAttribute('data-value') == selectedIoTSystem) {
+            log.info("selected");
+            option.classList.add('is-selected');
+        }
+        else {
+            log.info("unselected");
+            option.classList.remove('is-selected');
+        }
+    });
 }
 /**
  * Clears dropdowns for both Category and Devices
@@ -321,15 +297,16 @@ export function initIoTFormData(tagId) {
             const iotData = foundTag.iot_tag;
             //@ts-ignore
             if (iotData) {
+                log.info("iotData", iotData);
                 iotModelName.value = iotData.model_name;
                 iotSerialNumber.value = iotData.serial_number;
                 iotMfrName.value = iotData.manufacturer_site;
                 iotSystemLink.value = iotData.system_link;
                 if (iotData.linked_system) {
-                    setSelectedIoTSystemRadio(iotData.linked_system);
+                    setSelectedIoTSystem(iotData.linked_system);
                 }
                 else {
-                    setSelectedIoTSystemRadio(IOT_LINKED_SYSTEMS.BEMAC);
+                    setSelectedIoTSystem(IOT_LINKED_SYSTEMS.BEMAC);
                 }
                 if (iotData.iot_category) {
                     log.info('found cat 1: ', i18n.t(iotData.iot_category), iotData.iot_category, _tagIotCategoryTypes);
@@ -362,7 +339,7 @@ export function initIoTFormData(tagId) {
             else {
                 // this is due to selecting the tags created from James
                 log.info('initIoTFormData()', iotData);
-                setSelectedIoTSystemRadio(IOT_LINKED_SYSTEMS.BEMAC);
+                setSelectedIoTSystem(IOT_LINKED_SYSTEMS.BEMAC);
                 setSelectedIoTCat({ uuid: generateUUID(), name: i18n.t('NoSelection') });
                 renderIotCategoryDropdownOptions('at-iot-category-options', _tagIotCategoryTypes);
                 renderIotDeviceDropdownOptions('at-iot-device-options', _tagIotDevices);
@@ -424,9 +401,18 @@ function createCatOptionElement(item, dropdownType, index) {
     option.setAttribute('iot-category-uuid', item.uuid);
     option.setAttribute('dropdown-type', dropdownType);
     option.setAttribute('data-cy', `at-iot-category-option-${item.uuid}`);
+    // option.innerHTML = `
+    //     <span id="at-device-${item.name}" class="mdi ${iotCategoryIconList[index]}"></span>
+    //     ${i18n.t(item.name)}
+    // `
     option.innerHTML = `
-          <span id="at-device-${item.name}" class="mdi ${iotCategoryIconList[index]}"></span>
-          ${i18n.t(item.name)}
+        <img 
+          id="at-device-${item.name}" 
+          src="data:image/png;base64,${item.json_data.iconBase64}" 
+          alt="${item.name}" 
+          style="width: 1.2em; height: 1.2em; vertical-align: middle; margin-right: 0.3em;"
+        />
+        ${i18n.t(item.name)}
       `;
     return option;
 }
@@ -545,7 +531,7 @@ export function getIotTagFormData() {
         tagMf: iotMfrName.value,
         // tagCategoryId: selectedIoTCat.uuid,
         tagCategoryId: selectedIoTCat ? selectedIoTCat.name : undefined,
-        systemLink: iotSystemLink.value,
+        systemLink: selectedIoTSystem,
         linkedDevices: linkedDevicesArray,
         iotSystem: selectedIoTSystem,
         tag_type: TAG_TYPE.IOT
@@ -659,6 +645,38 @@ function deleteDeviceRow(deviceId) {
         }
     }
 }
+export function initIoTLinkedSystemOptions() {
+    dispatchSpaceEvent(SPACE_EVENTS.GET_IOT_LINKED_SYSTEM_OPTIONS, { payload: 'hello from library' });
+    const listbox = document.querySelector('#at-iot-linked-system-listbox .at_listbox_options');
+    iotLinkedSystemOptions = _iotLinkedSyatemOptions;
+    log.info("_iotLinkedSyatemOptions", _iotLinkedSyatemOptions);
+    log.info("iotLinkedSystemOptions", iotLinkedSystemOptions);
+    listbox.innerHTML = iotLinkedSystemOptions
+        .map((option, index) => `
+      <li
+        class="at_listbox_option ${index === 0 ? 'is-selected' : ''}"
+        role="option"
+        data-value="${option}"
+        tabindex="0"
+      >
+        ${option}
+      </li>
+    `)
+        .join('');
+}
+export function selectIoTLinkedSystemOptions() {
+    log.info("selectIoTLinkedSystemOptions");
+    const options = document.querySelectorAll('.at_listbox_option');
+    options.forEach(option => {
+        option.addEventListener('click', () => {
+            log.info("option", option);
+            options.forEach(o => o.classList.remove('is-selected'));
+            option.classList.add('is-selected');
+            selectedIoTSystem = option.getAttribute('data-value');
+            log.info("selectedLinkedSystem", selectedIoTSystem);
+        });
+    });
+}
 /**
  * Clears all Fields Input Fields including the Linked Devices Table
  *
@@ -679,7 +697,7 @@ export function clearIotFields() {
     linkedDevicesArray = [];
     selectedIoTSystem = '';
     selectedIoTCat = undefined;
-    setSelectedIoTSystemRadio(IOT_LINKED_SYSTEMS.BEMAC);
+    setSelectedIoTSystem(IOT_LINKED_SYSTEMS.BEMAC);
     deviceContainer.innerHTML = '';
     iotTagFormMode = "ADD" /* FORM_MODE.ADD */;
     selectedIotTag = undefined;

package/lib/atwinui/components/toolbar/tagListPane.d.ts

@@ -1,4 +1,4 @@
-import { ITag, ITagCategory, SortConfig, TAG_TYPE } from "../../../types";
+import { ITag, ITagCategory, SortConfig, TAG_TYPE, ITagIOTCategory } from "../../../types";
 import { MpSdk } from "../../../../bundle/sdk";
 export declare const tagVisibility: Record<TAG_TYPE, Record<string, boolean>>;
 export declare let selectedCategoryFilterId: any;
@@ -31,3 +31,7 @@ export declare function saveTagVisibilityToStorage(tagVisibility: Record<TAG_TYP
 export declare function initializeTagVisibility(): void;
 export declare function updateShowAllButton(): void;
 export declare function clearTagVisibilityStorage(): void;
+export declare function setIotCategoryFilterOptions(): void;
+export declare function filterIotTagByCategory(tags: ITag[]): void;
+export declare function setSelectedIoTCategoryFilter(payload: ITagIOTCategory): void;
+export declare function renderIotCategoryDropdownFilterOptions(elementId: string, items: Array<ITagIOTCategory>): void;

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

@@ -9,8 +9,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 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, moveTag, getAtwinSdk, toggleVisibilityTag } from "../../../architwin";
+import { convertToCssRgb, getBundleVersion, stringContains } from "../../../utils";
+import { gotoTag, disposeTag, dispatchSpaceEvent, _tags, getUserAssignedCategories, _mpConfig, moveTag, getAtwinSdk, toggleVisibilityTag, _tagIotCategoryTypes } from "../../../architwin";
 import { initFormData, toggleDropdown } from "./tagFormPane";
 import { toggleModal, setModalAction } from "./modal";
 import { initIoTFormData, setIoTFormMode } from './tagIotFormPane';
@@ -34,12 +34,14 @@ const notify = new Notyf({
 let _tagLink;
 let isChevronEventAdded = false;
 let allSubcategories = [];
+let selectedIoTCategoryFilterOption;
+let selectedIoTCategoryFilter;
+let iotTags = [];
 let tagSearchTerm = '';
 export const tagVisibility = {
     [TAG_TYPE.MP]: {},
     [TAG_TYPE.IOT]: {}
 };
-let iotTags = [];
 export let selectedCategoryFilterId = undefined;
 export let selectedSubCategoryFilterId = undefined;
 export let isTagPaneActive = true;
@@ -89,7 +91,7 @@ export function renderTagListPane() {
                 </button>
 
             </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-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">    
@@ -117,6 +119,19 @@ export function renderTagListPane() {
                     </div>
                 </div>
             </div>
+
+            <div class="at_field at_flex_column" id="at-custom-iot-category-filter-dropdown-container">
+                <label for="">${i18n.t('Category')}</label>
+                <div id="at-custom-iot-category-filter-dropdown" data-cy="at-custom-iot-category-filterdropdown">
+                <div id="at-custom-iot-cat-filter-dropdown" class="at_dropdown at_flex at_flex_row at_space_between">    
+                    <div class="at_dropdown_toggle" id="at-custom-iot-selected-filter-category" data-cy="at-custom-iot-selected-filter-category">${i18n.t('NoSelection')}</div>
+                    <span class="mdi mdi-chevron-down at_chevron" id="at-iot-category-filter-chevron" data-cy="at-iot-category-filter-chevron"></span>
+                </div>
+                <div style="position:absolute;">
+                    <div class="at_dropdown_options" id="at-iot-category-filter-options" data-cy="at-iot-category-filter-options"></div>
+                </div>
+                </div>
+            </div>
         </div>
         <div class="at_form_container at_scrollable_container at_h-min-45" id="at-tag-list-scrollable-container">
             <table id="at-tag-list-container">
@@ -596,6 +611,7 @@ export function setSelectedSubcategoryFilter(subcategoryId) {
 function initDropdownEventListeners() {
     const categoryChevron = document.getElementById('at-category-filter-dropdown');
     const subcategoryChevron = document.getElementById('at-subcategory-filter-dropdown');
+    const iotCategoryChevron = document.getElementById('at-custom-iot-cat-filter-dropdown');
     if (categoryChevron) {
         if (isChevronEventAdded == false) {
             categoryChevron.addEventListener('click', () => {
@@ -616,6 +632,16 @@ function initDropdownEventListeners() {
             console.log("Click event already attached to subcategory chevron");
         }
     }
+    if (iotCategoryChevron) {
+        if (isChevronEventAdded == false) {
+            iotCategoryChevron.addEventListener('click', () => {
+                toggleDropdown('at-iot-category-filter-options');
+            });
+        }
+        else {
+            console.log("Click event already attached to subcategory chevron");
+        }
+    }
     isChevronEventAdded = true;
 }
 export function getSearchTagTerm() {
@@ -825,3 +851,115 @@ export function clearTagVisibilityStorage() {
         log.info('No tag in storage found');
     }
 }
+export function setIotCategoryFilterOptions() {
+    log.info('setIotCategoryOptions()');
+    if (_tagIotCategoryTypes) {
+        renderIotCategoryDropdownFilterOptions('at-iot-category-filter-options', _tagIotCategoryTypes);
+        batchAddEventListenerByClassName('at_iot_cat_filter_option', (event) => {
+            log.info("category filter clicked");
+            //@ts-ignore
+            const selectedCat = event.target;
+            const catUUID = selectedCat.getAttribute('iot-category-filter-uuid');
+            const iotTags = _tags.filter(tag => tag.tag_type == TAG_TYPE.IOT);
+            if (catUUID == '') {
+                // no selection selected
+                selectedIoTCategoryFilter = { uuid: '', name: 'NoSelection' };
+                setSelectedIoTCategoryFilter(selectedIoTCategoryFilter);
+                renderTags(iotTags);
+            }
+            const getCatName = _tagIotCategoryTypes.find(cat => cat.uuid === catUUID);
+            if (getCatName) {
+                selectedIoTCategoryFilter = { uuid: catUUID, name: getCatName.name };
+                setSelectedIoTCategoryFilter(selectedIoTCategoryFilter);
+                log.info('cat id: ', selectedIoTCategoryFilter);
+                filterIotTagByCategory(iotTags);
+            }
+            toggleDropdown('at-iot-category-filter-options');
+        });
+    }
+}
+export function filterIotTagByCategory(tags) {
+    log.info("selectedIoTCategoryFilter", selectedIoTCategoryFilter, _tags);
+    const filteredTags = tags.filter(tag => tag.iot_tag.iot_category == selectedIoTCategoryFilter.name);
+    renderTags(filteredTags);
+}
+// displays selected Category in the dropdown
+export function setSelectedIoTCategoryFilter(payload) {
+    log.info('setSelectedIoTCat()', payload);
+    const selectedOption = document.getElementById('at-custom-iot-selected-filter-category');
+    selectedOption.innerText = i18n.t(payload.name);
+}
+export function renderIotCategoryDropdownFilterOptions(elementId, items) {
+    const element = document.getElementById(elementId);
+    if (!element) {
+        console.error("Parameter element is undefined");
+        return;
+    }
+    if (!items) {
+        console.error("Parameter items is undefined");
+        return;
+    }
+    const isFilterDropdown = stringContains(elementId, 'filter');
+    log.info("isFilterDropdown", isFilterDropdown);
+    //Clear previosly appended children
+    element.innerHTML = ``;
+    const selectedIotCategoryOption = document.getElementById(isFilterDropdown ? 'at-iot-category-filter-dropdown-toggle' : 'at-iot-category-dropdown-toggle');
+    if (selectedIotCategoryOption) {
+        selectedIotCategoryOption.textContent = `${i18n.t('NoSelection')}`;
+        selectedIoTCategoryFilterOption = undefined;
+    }
+    //Add the no selection option
+    const noSelection = document.createElement('div');
+    noSelection.classList.add('at_option');
+    noSelection.classList.add('at_iot_cat_filter_option');
+    noSelection.setAttribute('iot-category-filter-uuid', '');
+    noSelection.setAttribute('dropdown-type', 'iotcategory');
+    noSelection.innerHTML = `
+        <span class="mdi mdi-circle-slice-1"></span> ${i18n.t('NoSelection')}
+    `;
+    noSelection.onclick = () => {
+        selectCatOption(noSelection, isFilterDropdown ? 'at-iot-category-filter-dropdown-toggle' : 'at-iot-category-filter-dropdown-toggle');
+    };
+    element.appendChild(noSelection);
+    if (items.length <= 0) {
+        console.log("No items to render");
+        return;
+    }
+    items.forEach((item, index) => {
+        if (item.name != 'Multiple') {
+            const option = createCatOptionElement(item, 'iotcategoryfilter', index);
+            element.appendChild(option);
+        }
+    });
+}
+function selectCatOption(option, elementId) {
+    dispatchSpaceEvent(SPACE_EVENTS.GET_IOT_CAT_ICON, { payload: option });
+}
+function createCatOptionElement(item, dropdownType, index) {
+    console.log("createCatOptionElement()", item, index);
+    const option = document.createElement('div');
+    option.style.display = 'flex';
+    option.style.flexDirection = 'row';
+    option.style.justifyContent = 'left';
+    option.style.alignItems = 'center';
+    option.style.gap = '2px';
+    option.classList.add('at_option');
+    option.classList.add('at_iot_cat_filter_option');
+    option.setAttribute('iot-category-filter-uuid', item.uuid);
+    option.setAttribute('dropdown-type', dropdownType);
+    option.setAttribute('data-cy', `at-iot-category-filter-option-${item.uuid}`);
+    // option.innerHTML = `
+    //     <span id="at-device-${item.name}" class="mdi ${iotCategoryIconList[index]}"></span>
+    //     ${i18n.t(item.name)}
+    // `
+    option.innerHTML = `
+        <img 
+          id="at-device-${item.name}" 
+          src="data:image/png;base64,${item.json_data.iconBase64}" 
+          alt="${item.name}" 
+          style="width: 1.2em; height: 1.2em; vertical-align: middle; margin-right: 0.3em;"
+        />
+        ${i18n.t(item.name)}
+      `;
+    return option;
+}

package/lib/atwinui/events.js

@@ -30,14 +30,14 @@ import { toggleDrawPartitionButton, displayPartitionFormMode, setPartitionFormMo
 import { actionSettingsSelectOption, getTempCoordinateSystem, getTempMeasurementUnit, getTempRotationUnit, setCoordinateSystem, setMeasurementUnit, setRotationUnit, initSettingsValues, setTempCoordinateSystem, setTempMeasurementUnit, setTempRotationUnit, toggleActionSettingsDropdown, toggleCalibrateBasepoint, setScaleFactor, getTempScaleFactor, setTempScaleFactor, setBasepoint, getTempBasepoint, setTempBasepoint, getBasepoint, toggleActionSettings, getBasepointObjectPayload, displayConvertedCoordinates, getCoordinateSystem, getScaleFactor, getMeasurementUnit, getRotationUnit, setBasepointObjectPayload } from "./components/toolbar/actionSettingsPane";
 import { getBasepointCalibrateBpCoordinateValues, getBasepointCalibrateMpCoordinateValues, initBsepointCalibratePane, toggleBasepointCalibratePane } from "./components/toolbar/basepointCalibratePane";
 import { toggleGeneralMapOptions, initGeneralSelectedMap, getSelectedMapOption } from './components/toolbar/generalSettingsMenuPane';
-import { searchTagList, setSearchTagTerm, searchClearfield, getSearchTagTerm, sortTags, updateSelectedTagSortOption, resetSelectedTagSortOption, filterIotTagList, setTagPaneActive, isTagPaneActive, setCurrentTagPaneMode, currentTagPaneMode, selectedTagSortOption, tagVisibility, updateShowAllButton, saveTagVisibilityToStorage, initializeTagVisibility } from './components/toolbar/tagListPane';
+import { searchTagList, setSearchTagTerm, searchClearfield, getSearchTagTerm, sortTags, updateSelectedTagSortOption, resetSelectedTagSortOption, filterIotTagList, setTagPaneActive, isTagPaneActive, setCurrentTagPaneMode, currentTagPaneMode, selectedTagSortOption, tagVisibility, updateShowAllButton, saveTagVisibilityToStorage, initializeTagVisibility, setIotCategoryFilterOptions } from './components/toolbar/tagListPane';
 import { renderUserRows } from "./components/toolbar/spaceUserListPane";
 import { handleRemoteViewResponsiveChanges, renderRemoteSpaceViewing } from "./components/toolbar/viewingRemoteSpace";
 import { PipeList } from "./components/toolbar/pipeListPane";
 import { PipeForm } from "./components/toolbar/pipeFormPane";
 // import { EditPipeForm, initPipeFormPane, pipeFormData, setPipeFormMode } from "./components/toolbar/pipeFormPane";
 // import { initPipeData } from "./components/toolbar/addPipePane";
-import { toggleIoTCategoryOptions, toggleIoTDevicesOptions, setSelectedIoTSystemRadio, clearIoTDropdowns, initIoTFormData, setIotCategoryOptions, getIotTagFormData, iotTagFormMode, selectedIotTag, clearIotFields, getIotCategoryOption } from './components/toolbar/tagIotFormPane';
+import { toggleIoTCategoryOptions, toggleIoTDevicesOptions, clearIoTDropdowns, initIoTFormData, setIotCategoryOptions, getIotTagFormData, iotTagFormMode, selectedIotTag, clearIotFields, getIotCategoryOption, selectIoTLinkedSystemOptions, initIoTLinkedSystemOptions } from './components/toolbar/tagIotFormPane';
 import { getTheseTagMessages, timedoutComment, unsendComment } from "./components/toolbar/tagMessagingPane";
 import { handleScreenShareResponsiveChanges, handleScreenShareAcceptRequest, handleScreenShareBackUserListPane, handleScreenShareEndSessionEvent, handleScreenShareUsersUpdated, renderScreenShareLeaveConfirmationModal } from "./components/toolbar/screenSharePane";
 const pipeList = new PipeList();
@@ -225,20 +225,11 @@ function toggleDisplayPane(targetId) {
                 }
                 if (paneId === 'at-tag-list-pane') {
                     renderTagPaneContent();
-                    setIotCategoryOptions();
-                    // clearTagFilterDropdown()
+                    setIotCategoryFilterOptions();
                     const tags = getMpTags();
-                    // if(selectedCategoryFilterId || selectedSubCategoryFilterId){
-                    //     const filteredTags = filterTagList(tags)
-                    //     const sortedTags = sortTags(filteredTags, {by: 'label', order: 'asc'})
-                    //     renderTags(sortedTags)
-                    // }else if (tags.length > 0) {
-                    //     const sortedTags = sortTags(tags, {by: 'label', order: 'asc'})
-                    //     renderTags(sortedTags,true)
-                    // }
                     //Render the category dropdown elements if tagCategories is populated
                     if (_tagCategories && _tagCategories.length > 0) {
-                        log.info("Has categories");
+                        log.info("_tagCategories");
                         renderCategoryDropdownOptions('at-category-filter-options', _tagCategories, 'at-category-filter-dropdown-toggle');
                     }
                     // for search
@@ -521,9 +512,8 @@ function setupIndividualEventListeners() {
     handleCloseCustomMinimap();
     handleCustomMapControls();
     handleCloseActiveMinimap();
-    handleIoTCategoryDropdown();
+    handleIoTOptions();
     handleIoTDeviceDropdown();
-    handleSelectedIoTLinkedSystem();
     handlePlaceIotTag();
     handleIotFormClose();
     handleIotFormSave();
@@ -3453,11 +3443,16 @@ function handleCloseActiveMinimap() {
         });
     }
 }
-function handleIoTCategoryDropdown() {
+function handleIoTOptions() {
     const iotCateogryDropdown = document.getElementById('at-iot-cat-filter-dropdown');
+    const iotLinkedSystemListbox = document.getElementById('at-iot-linked-system-listbox');
     if (iotCateogryDropdown) {
         toggleIoTCategoryOptions();
     }
+    if (iotLinkedSystemListbox) {
+        initIoTLinkedSystemOptions();
+        selectIoTLinkedSystemOptions();
+    }
 }
 function handleIoTDeviceDropdown() {
     const iotDeviceDropdown = document.getElementById('at-iot-cat-filter-dropdown');
@@ -3465,16 +3460,6 @@ function handleIoTDeviceDropdown() {
         toggleIoTDevicesOptions();
     }
 }
-function handleSelectedIoTLinkedSystem() {
-    document.querySelectorAll('input[name="iot-link-system"]').forEach(input => {
-        input.addEventListener('change', (event) => {
-            const target = event.target;
-            if (target.value) {
-                setSelectedIoTSystemRadio(target.value);
-            }
-        });
-    });
-}
 function handlePlaceIotTag() {
     log.info('handlePlaceIotTag()');
     const moveIotTag = document.getElementById('at-iot-move-btn');
@@ -3648,6 +3633,8 @@ function handleDisplayElements(id) {
             // hide dropdown sub/categories
             handleHideElement('at-custom-category-filter-dropdown-container');
             handleHideElement('at-custom-subcategory-filter-dropdown-container');
+            handleHideElement('at-custom-category-filter-dropdown-container');
+            handleDisplayElement('at-custom-iot-category-filter-dropdown-container');
             break;
         case 'at-expand-btn':
             // changep ane height
@@ -3662,6 +3649,8 @@ function handleDisplayElements(id) {
                 `;
             handleDisplayElement('at-custom-category-filter-dropdown-container');
             handleDisplayElement('at-custom-subcategory-filter-dropdown-container');
+            handleDisplayElement('at-custom-category-filter-dropdown-container');
+            handleHideElement('at-custom-iot-category-filter-dropdown-container');
             break;
         default:
             break;
@@ -3705,13 +3694,17 @@ function handleIotFormSave() {
     if (iotSave) {
         iotSave.addEventListener('click', (event) => __awaiter(this, void 0, void 0, function* () {
             var _a, _b;
-            log.info('@caroline saving iot');
+            log.info('Saving iot');
             let iotTagFormPayload = getIotTagFormData();
             const selectedCat = getIotCategoryOption();
             log.info('@caroline iotTagFormPayload: ', iotTagFormPayload, iotTagFormMode);
             iotSave.classList.add('at_disabled');
             if (iotTagFormPayload && iotTagFormMode == "ADD" /* FORM_MODE.ADD */) {
                 log.info('@caroline saving IOT, Add Mode');
+                if (!currentTag) {
+                    notyf.error(`${i18n.t('NoTagSave')}`);
+                    iotSave.classList.remove('at_disabled');
+                }
                 currentTag.json_data.label = iotTagFormPayload.name;
                 log.info('@caroline current Tag: ', currentTag);
                 if (!currentTag.iot_tag) {
@@ -3925,9 +3918,10 @@ function handleWindowVisibility(visibilityBtn, updateStateDB, fromParentVisibili
                 }
                 else {
                     const polygonJson = JSON.parse(thisPartition.polygon_json);
-                    const wall = polygonJson.walls.find(item => item.uuid === wallId) || null;
+                    const wall = polygonJson.walls.find(w => w.uuid === wallId) || null;
                     const windows = (wall === null || wall === void 0 ? void 0 : wall.windows) || null;
-                    windows === null || windows === void 0 ? void 0 : windows.forEach(w => w.options.is_visible = isVisible);
+                    const targetWindow = windows === null || windows === void 0 ? void 0 : windows.find(w => w.index.toString() === windowIndex);
+                    targetWindow.options.is_visible = isVisible;
                     const payload = {
                         uuid: thisPartition.uuid,
                         space_uuid: thisPartition.space_uuid,

package/lib/atwinui/index.js

@@ -14,6 +14,7 @@ import { SPACE_EVENTS } from '../types';
 import { dispatchSpaceEvent } from '../architwin';
 import log from 'loglevel';
 import { toggleBasepointCalibratePane } from './components/toolbar/basepointCalibratePane';
+import { setSelectedIoTCategoryFilter } from './components/toolbar/tagListPane';
 // let menuBar:HTMLElement,
 //     actionBar:HTMLElement,
 //     objectListPane:HTMLElement,
@@ -76,6 +77,7 @@ function initToolbarUI(payload) {
             //@ts-expect-error
             if (event.target.id === 'at-tag-iot-btn') {
                 handleDisplayElements('at-tag-iot-btn');
+                setSelectedIoTCategoryFilter({ uuid: '', name: 'NoSelection' });
             }
             //@ts-ignore
             yield toggleDisplayPane(event.target.id);

package/lib/types.d.ts

@@ -61,6 +61,15 @@ export interface ITagCategory {
     };
     subcategories: Array<ITagCategory>;
 }
+export interface IotCategoryType {
+    name: string;
+    uuid: string;
+    json_data?: {
+        icon: string;
+        iconURL: string;
+        iconBase64: string;
+    };
+}
 export interface ITagColor {
     name: COLOR;
     rgb: {
@@ -769,6 +778,7 @@ export declare enum SPACE_EVENTS {
     SPACE_METADATA_RETRIEVED = "SPACE_METADATA_RETRIEVED",
     GET_IOT_CATEGORIES = "GET_IOT_CATEGORIES",
     GET_IOT_DEVICES = "GET_IOT_DEVICES",
+    GET_IOT_LINKED_SYSTEM_OPTIONS = "GET_IOT_LINKED_SYSTEM_OPTIONS",
     IOT_TAG_SAVED = "IOT_TAG_SAVED",
     TAG_SANDBOX_REGISTERED = "TAG_SANDBOX_REGISTERED",
     GET_IOT_TAG_ICON = "GET_IOT_TAG_ICON",
@@ -1444,7 +1454,8 @@ export declare enum MAP_OPTIONS {
 export declare enum IOT_LINKED_SYSTEMS {
     BEMAC = "BEMAC",
     HANASYS = "HANASYS",
-    URL_LINK = "URLLink"
+    URL_LINK = "URLLink",
+    I_MTEC = "i-MTEC"
 }
 export interface ITagIOTCategory {
     name: string;