architwin 1.12.4 → 1.13.0

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

@@ -0,0 +1,606 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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 { stringContains } from "../../../utils";
+import { batchAddEventListenerByClassName } from '../../events';
+let selectedIoTCatOption;
+let selectedIoTDeviceOption;
+export let iotTagFormMode = "ADD" /* FORM_MODE.ADD */;
+export let selectedIoTSystem = '';
+export let selectedIotTag = undefined;
+let tagIotName, iotModelName, iotSerialNumber, iotMfrName, iotSystemLink;
+let selectedIoTCatId;
+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'];
+export function renderTagIOTFormPane() {
+    const element = document.createElement('div');
+    element.classList.add('at_container');
+    element.classList.add('at_w-12');
+    element.classList.add('at_h-full');
+    element.setAttribute('id', 'at-tag-iot-form-pane');
+    element.setAttribute('data-cy', 'at-tag-iot-form-pane');
+    element.innerHTML = `
+    <div class="at_panel_header" id="at-iot-form-title">
+    </div>
+
+    <div class="at_form_container at_scrollable_container at_h-min-70">
+      <label for="">${i18n.t('Linked Systems')}</label>
+        <div class="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("URL Link")}
+          </label>
+        </div>
+
+        <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">
+
+                </div>
+              </div>
+
+            </div>
+          </div>
+
+        <div class="at-field at_flex_row at_justify_between">
+            <label for="">${i18n.t('TagName')}</label>
+            <input class="at_field_input at_w-full" type="text" name="tag_name" id="at-iot-name-input" data-cy="at-iot-name-input" />
+        </div>
+
+        <div class="at-field at_flex_row at_justify_between">
+            <label for="">${i18n.t('Model Name')}</label>
+            <input class="at_field_input at_w-full" type="text" name="model_name" id="at-iot-model-input" data-cy="at-iot-model-input" />
+        </div>
+
+        <div class="at-field at_flex_row at_justify_between">
+            <label for="">${i18n.t('Serial Number')}</label>
+            <input class="at_field_input at_w-full" type="text" name="serial_name" id="at-iot-serial-input" data-cy="at-iot-serial-input" />
+        </div>
+
+        <div class="at-field at_flex_row at_justify_between">
+            <label for="">${i18n.t('Manufacturer Site')}</label>
+            <input class="at_field_input at_w-full" type="text" name="manufacturer_site" id="at-iot-manufacturer-input" data-cy="at-iot-manufacturer-input" />
+        </div>
+
+        <div class="at-field at_flex_row at_justify_between" id="at-iot-system-link-container" style="display: none">
+            <label for="">${i18n.t('System Link')}</label>
+            <input class="at_field_input at_w-full" type="text" name="system_link" id="at-iot-system-link-input" data-cy="at-iot-system-link-input" />
+        </div>
+
+        <div class="at_button at_ghost" id="at-iot-move-btn" data-cy="at-iot-move-btn" style="top: 4px !important">
+            <label for="" style="bottom: 10px !important" class="at_comment_unsend_container">${i18n.t('MoveTag')}</label>
+            <span class="mdi mdi-map-marker at_icon" style="bottom: 9px !important"></span>
+        </div>
+
+        <div class="at_field at_flex_column" id="at-iot-device-main-container">
+         <label for="">${i18n.t('IOT Devices')}</label>
+          <div id="at-iot-devices-dropdown" data-cy="at-iot-devices-dropdown">
+            <div id="at-setting-map-filter-dropdown" class="at_dropdown at_flex at_flex_row at_space_between">    
+              <div class="at_dropdown_toggle" id="at-iot-selected-device" data-cy="at-iot-selected-device">${i18n.t(selectedIoTDeviceOption)}</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-device-options" data-cy="at-iot-device-options">
+
+              </div>
+          </div>
+        </div>
+
+        <div class="at_partition_list_container at_h-min-40" id="at-iot-device-list-container" data-cy="at-iot-device-list-container">
+
+            <div class="at_partition_item_container at_scrollable_container" id="at-linked-device-container" data-cy="at-linked-device-container">
+            
+              <div class="at_partition_title" style="padding-left: 20px !important;">
+                <div> </div>
+                <label for="">${i18n.t('Linked IOT Devices')}</label>
+                <div> </div>
+              </div>
+
+              <div class="at_linked_device_container" id="at-linked-device-row">
+              </div>
+
+            </div>
+
+        </div>
+
+      </div>
+    </div>
+
+    <div class="at_button_row at_justify_between">
+      <div class="at_button at_ghost at_comment_unsend_container" style="margin-top: auto;"  id="at-cancel-iot-tag-form-btn" data-cy="at-cancel-iot-tag-form-btn" target-pane="at-tag-list-pane">
+          <label for="" id="at-cancel-tag-form-btn" class="at_comment_unsend_container">${i18n.t('Cancel')}</label>
+          <span class="mdi mdi-close-circle-outline at_comment_unsend_container" id="at-cancel-tag-form-btn"></span>
+      </div>
+
+      <div class="at_button at_ghost at_comment_unsend_container" id="at-save-iot-btn" data-cy="at-save-iot-btn">
+          <label for="" class="at_comment_unsend_container">${i18n.t('Save')}</label>
+          <span class="mdi mdi-plus-circle-outline at_comment_unsend_container"></span>
+      </div>
+    </div>
+    `;
+    return element;
+}
+/**
+ * Updates the form title based on the current form mode.
+ * Displays "Add IOT Tag" or "Edit IOT Tag" accordingly.
+ */
+function displayFormTitle() {
+    const title = document.getElementById('at-iot-form-title');
+    title.innerHTML = '';
+    const span = document.createElement('span');
+    span.textContent = iotTagFormMode === "ADD" /* FORM_MODE.ADD */
+        ? i18n.t('Add IOT Tag')
+        : i18n.t('Edit IOT Tag');
+    title.appendChild(span);
+}
+function setSelectedIoTCat(payload) {
+    log.info('setSelectedIoTCat()', payload);
+    const selectedOption = document.getElementById('at-iot-selected-cat');
+    selectedOption.innerText = payload;
+}
+function setSelectedIoTDevice(payload) {
+    log.info('setSelectedIoTDevice()', payload);
+    const selectedDevice = document.getElementById('at-iot-selected-device');
+    selectedDevice.innerText = payload;
+}
+function setInputFields() {
+    log.info('setInputFields()');
+    tagIotName = document.getElementById('at-iot-name-input');
+    iotModelName = document.getElementById('at-iot-model-input');
+    iotSerialNumber = document.getElementById('at-iot-serial-input');
+    iotMfrName = document.getElementById('at-iot-manufacturer-input');
+    iotSystemLink = document.getElementById('at-iot-system-link-input');
+}
+export function setIotCategoryOptions() {
+    log.info('setIotCategoryOptions()');
+    dispatchSpaceEvent(SPACE_EVENTS.GET_IOT_CATEGORIES, { payload: 'hello from library' });
+    renderIotCategoryDropdownOptions('at-iot-category-options', _tagIotCategoryTypes);
+    batchAddEventListenerByClassName('at_iot_cat_option', (event) => {
+        //@ts-ignore
+        const selectedCat = event.target;
+        const dataCy = selectedCat.getAttribute('data-cy');
+        const match = dataCy.match(/^at-iot-category-option-(.+)$/);
+        const selectedId = match ? match[1] : null;
+        selectedIoTCatId = selectedCat.innerText; // this is set to inner text as uuid for category changes due to dummy data
+        setSelectedIoTCat(selectedCat.innerText);
+        log.info('cat id: ', selectedIoTCatId);
+    });
+}
+export function toggleIoTCategoryOptions() {
+    log.info('toggleIoTCategoryOptions');
+    const catDropdown = document.getElementById('at-iot-category-dropdown');
+    const catOptions = document.getElementById('at-iot-category-options');
+    catDropdown.addEventListener('click', () => {
+        catOptions.classList.toggle('open');
+    });
+}
+export function toggleIoTDevicesOptions() {
+    log.info('toggleIoTDevicesOptions()');
+    const devicesDropdown = document.getElementById('at-iot-devices-dropdown');
+    const deviceOptions = document.getElementById('at-iot-device-options');
+    devicesDropdown.addEventListener('click', () => {
+        deviceOptions.classList.toggle('open');
+    });
+}
+/**
+ * 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';
+    }
+}
+/**
+ * Clears dropdowns for both Category and Devices
+ *
+ */
+export function clearIoTDropdowns() {
+    log.info('clearIoTDropdowns()');
+    const catDropdown = document.getElementById('at-iot-selected-cat');
+    const devicesDropdown = document.getElementById('at-iot-selected-device');
+    catDropdown.innerText = i18n.t('NoSelection');
+    devicesDropdown.innerText = i18n.t('Select Device');
+}
+/**
+ * Initializes Form Data
+ * for both Add and Edit Modes
+ *
+ */
+export function initIoTFormData(tagId) {
+    log.info('initIoTFormData()');
+    displayFormTitle();
+    // Add Mode
+    if (!tagId) {
+        log.info('initIoTFormData() tagId not Exist: ', iotTagFormMode);
+        if (iotTagFormMode == "ADD" /* FORM_MODE.ADD */) {
+            if (tagIotName === null || tagIotName == undefined) {
+                log.info('initIoTFormData() tagname check', tagIotName);
+                setInputFields();
+            }
+            tagIotName.value = '';
+            iotModelName.value = '';
+            iotSerialNumber.value = '';
+            iotMfrName.value = '';
+            iotSystemLink.value = '';
+        }
+    }
+    else {
+        const foundTag = _tags.find(tag => tag.json_data.id === tagId);
+        log.info('initIoTFormData() foundTag: ', foundTag, _tags);
+        if (foundTag) {
+            selectedIotTag = foundTag;
+            if (tagIotName === null || tagIotName == undefined) {
+                setInputFields();
+            }
+            tagIotName.value = foundTag.tag_name ? foundTag.tag_name : foundTag.json_data.label;
+            // const iotData = foundTag.json_data as SpaceMetadata
+            const iotData = foundTag.iot_tag;
+            //@ts-ignore
+            if (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);
+                }
+                else {
+                    setSelectedIoTSystemRadio(IOT_LINKED_SYSTEMS.BEMAC);
+                }
+                if (iotData.iot_category) {
+                    const cat = _tagIotCategoryTypes.find(cat => cat.name === iotData.iot_category);
+                    if (cat) {
+                        setSelectedIoTCat(cat.name);
+                        selectedIoTCatId = cat.name;
+                    }
+                    else {
+                        // for the Dummy data from App Side
+                        setSelectedIoTCat(i18n.t('NoSelection'));
+                        renderIotCategoryDropdownOptions('at-iot-category-options', _tagIotCategoryTypes);
+                    }
+                }
+                log.info("iotData.linked_devices: ", iotData.linked_devices);
+                if (iotData.linked_devices && iotData.linked_devices.length > 0) {
+                    // renderIotDeviceDropdownOptions('at-iot-device-options', _tagIotDevices)
+                    setSelectedIoTDevice(iotData.linked_devices[0].name);
+                    linkedDevicesArray = iotData.linked_devices;
+                    log.info("EDIT linkedDevicesArray: ", linkedDevicesArray);
+                    renderLinkedDevices(linkedDevicesArray);
+                }
+                else {
+                    // log.info("@caroline NO linked devices")DeviceInfo
+                    // for the Dummy data from App Side
+                    // renderIotDeviceDropdownOptions('at-iot-device-options', _tagIotDevices)
+                }
+            }
+            else {
+                // this is due to selecting the tags created from James
+                log.info('initIoTFormData()', iotData);
+                setSelectedIoTSystemRadio(IOT_LINKED_SYSTEMS.BEMAC);
+                setSelectedIoTCat('No Selection');
+                renderIotCategoryDropdownOptions('at-iot-category-options', _tagIotCategoryTypes);
+                renderIotDeviceDropdownOptions('at-iot-device-options', _tagIotDevices);
+            }
+        }
+    }
+}
+export function renderIotCategoryDropdownOptions(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');
+    //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')}`;
+        selectedIoTCatOption = undefined;
+    }
+    //Add the no selection option
+    const noSelection = document.createElement('div');
+    noSelection.classList.add('at_option');
+    noSelection.setAttribute('iot-category-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) => {
+        const option = createCatOptionElement(item, 'iotcategory', index);
+        element.appendChild(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_option');
+    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)}
+      `;
+    return option;
+}
+function selectCatOption(option, elementId) {
+    log.info('selectCatOption()', option, elementId);
+}
+export function setIotDeviceOptions() {
+    log.info('setIotDeviceOptions()');
+    dispatchSpaceEvent(SPACE_EVENTS.GET_IOT_DEVICES, { payload: 'hello from library' });
+    renderIotDeviceDropdownOptions('at-iot-device-options', _tagIotDevices);
+    batchAddEventListenerByClassName('at_iot_dev_option', (event) => {
+        //@ts-ignore
+        const selectedDev = event.target;
+        const parent = selectedDev.parentElement;
+        log.info('@caroline parent: ', parent);
+        const deviceId = parent.getAttribute('iot-device-uuid');
+        log.info('@caroline deviceId: ', deviceId);
+        const device = _tagIotDevices.find(device => device.id == deviceId);
+        log.info("device", device);
+        setSelectedIoTDevice(selectedDev.innerText);
+        linkedDevicesArray.push(device);
+        renderLinkedDevices(linkedDevicesArray);
+    });
+}
+export function renderIotDeviceDropdownOptions(elementId, items) {
+    log.info("renderIotDeviceDropdownOptions: ", 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');
+    //Clear previosly appended children
+    element.innerHTML = ``;
+    const selectedIotDeviceOption = document.getElementById(isFilterDropdown ? 'at-iot-device-filter-dropdown-toggle' : 'at-iot-device-dropdown-toggle');
+    if (selectedIotDeviceOption) {
+        selectedIotDeviceOption.textContent = `${i18n.t('Select Device')}`;
+        selectedIoTDeviceOption = undefined;
+    }
+    //Add the no selection option
+    const selectDevice = document.createElement('div');
+    selectDevice.classList.add('at_iot_dev_option');
+    selectDevice.setAttribute('iot-device-uuid', '');
+    selectDevice.setAttribute('dropdown-type', 'iotdevice');
+    selectDevice.innerHTML = `
+        <span></span> ${i18n.t('Select Device')}
+    `;
+    selectDevice.onclick = () => {
+        log.info('@caroline onClick');
+        selectDeviceOption(selectDevice, isFilterDropdown ? 'at-iot-device-filter-dropdown-toggle' : 'at-iot-device-filter-dropdown-toggle');
+    };
+    element.appendChild(selectDevice);
+    if (items.length <= 0) {
+        console.log("No items to render");
+        return;
+    }
+    items.forEach(item => {
+        const option = createDeviceOptionElement(item, 'iotdevice');
+        element.appendChild(option);
+    });
+}
+function selectDeviceOption(option, elementId) {
+    log.info('selectDeviceOption()');
+}
+function createDeviceOptionElement(item, dropdownType) {
+    console.log("createDeviceOptionElement()", item, dropdownType);
+    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_dev_option');
+    option.setAttribute('iot-device-uuid', item.id);
+    option.setAttribute('dropdown-type', dropdownType);
+    option.setAttribute('data-cy', `at-iot-category-option-${item.id}`);
+    if (dropdownType == 'category') {
+        option.innerHTML = `
+            <span class="at_colored-indicator"></span>
+            ${item.name}
+        `;
+        return option;
+    }
+    option.innerHTML = `
+    <span>${item.name}</span>
+      `;
+    return option;
+}
+/**
+ * Gets IoT TagData and used in events.ts
+ *
+ *
+ *
+ */
+export function getIotTagFormData() {
+    log.info('getIotTagFormData()');
+    if (!tagIotName) {
+        setInputFields();
+    }
+    const formData = {
+        name: tagIotName.value,
+        modelName: iotModelName.value,
+        serialNumber: iotSerialNumber.value,
+        tagMf: iotMfrName.value,
+        tagCategoryId: selectedIoTCatId,
+        systemLink: iotSystemLink.value,
+        linkedDevices: linkedDevicesArray,
+        iotSystem: selectedIoTSystem,
+        tag_type: TAG_TYPE.IOT
+    };
+    return formData;
+}
+function renderLinkedDevices(linkedDevices) {
+    log.info('renderLinkedDevices()', linkedDevices);
+    if (linkedDevices) {
+        const devicesContainer = document.getElementById('at-linked-device-row');
+        if (linkedDevices.length > 0) {
+            devicesContainer.innerHTML = ``;
+            linkedDevices.forEach(device => {
+                log.info("@caroline device: ", device);
+                renderDeviceRow(device);
+            });
+        }
+    }
+}
+function renderDeviceRow(payload) {
+    log.info('renderDeviceRow()', payload);
+    const devicesContainer = document.getElementById('at-linked-device-row');
+    if (payload) {
+        const deviceRow = document.createElement('div');
+        deviceRow.classList.add('at_flex_row');
+        deviceRow.classList.add('at_partition_item');
+        deviceRow.innerHTML = `
+      <div class="at_icon_left">
+        <span class="mdi mdi-cube-outline"></span>
+      </div>
+
+      <div class="at_partition_name">
+        <div></div>
+        <label for="">${payload.name}</label>
+        <div></div>
+      </div>
+      <div class="at_icon_right">
+        <span class="mdi mdi-delete-outline at_delete_device_btn" id="at-delete-device-${payload.uuid}"></span>
+      </div>
+    `;
+        devicesContainer.appendChild(deviceRow);
+        batchAddEventListenerByClassName('at_delete_device_btn', (event) => __awaiter(this, void 0, void 0, function* () {
+            log.info('deleteSelectedLinkedDevice is clicked', event);
+            //@ts-ignore
+            const selectedDevice = document.getElementById(event.target.id);
+            if (selectedDevice) {
+                log.info('deleteSelectedLinkedDevice', selectedDevice);
+                // will be tested when using live data
+                // const devId = extractUUID(selectedDevice.id)
+                const devId = selectedDevice.id.split('at-delete-partition-')[1];
+                const findDevice = linkedDevicesArray.findIndex(dev => dev.id == devId);
+                log.info('deleteSelectedLinkedDevice found device', findDevice, devId);
+                linkedDevicesArray.splice(findDevice, 1);
+                const parent = selectedDevice.closest('.at_partition_item');
+                parent.style.display = 'none';
+                log.info('deleteSelectedLinkedDevice parent', parent);
+            }
+        }));
+        return;
+    }
+}
+/**
+ * Clears all Fields Input Fields including the Linked Devices Table
+ *
+ */
+export function clearIotFields() {
+    log.info('clearIotFields()');
+    tagIotName = document.getElementById('at-iot-name-input');
+    iotModelName = document.getElementById('at-iot-model-input');
+    iotSerialNumber = document.getElementById('at-iot-serial-input');
+    iotMfrName = document.getElementById('at-iot-manufacturer-input');
+    iotSystemLink = document.getElementById('at-iot-system-link-input');
+    const deviceContainer = document.getElementById("linked-devices-container");
+    tagIotName.innerText = '';
+    iotModelName.innerText = '';
+    iotSerialNumber.innerText = '';
+    iotMfrName.innerText = '';
+    iotSystemLink.innerText = '';
+    linkedDevicesArray = [];
+    selectedIoTSystem = '';
+    setSelectedIoTSystemRadio(IOT_LINKED_SYSTEMS.BEMAC);
+    if (deviceContainer !== null) {
+        deviceContainer.innerHTML = '';
+    }
+    iotTagFormMode = "ADD" /* FORM_MODE.ADD */;
+}
+/**
+ * Sets the form mode for the IOT form.
+ * - The form mode can be one of the predefined FORM_MODE values (e.g., ADD, EDIT, etc.).
+ *
+ * @param {FORM_MODE} formType - The type of form mode to set.
+ */
+export function setIoTFormMode(formType) {
+    iotTagFormMode = formType;
+}
+/**
+ * Gets the current form mode for the IOT form.
+ *
+ * @returns {FORM_MODE} - The current form mode.
+ */
+export function getPartitionFormMode() {
+    return iotTagFormMode;
+}

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

@@ -15,3 +15,7 @@ export declare function getTagMessageText(): string;
 export declare function clearTagMessageInput(): void;
 export declare function createTagMessage(): TagMessage;
 export declare function setTagMessagingDetails(tagId: string): void;
+export declare function unsendComment(payload: any): void;
+export declare function timedoutComment(payload: Array<TagMessage>): void;
+export declare function checkTimeoutDifference(createdDateInput: Date, mode: string): boolean;
+export declare function getTheseTagMessages(payload: Array<TagMessage>): TagMessage[];