architwin 1.14.8 → 1.14.10

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

@@ -11,17 +11,20 @@ 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 { stringContains, generateUUID } from "../../../utils";
 import { batchAddEventListenerByClassName } from '../../events';
+import { toggleModal, setModalAction } from "./modal";
+import { Notyf } from 'notyf';
 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 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'];
+let notify = new Notyf({ position: { x: 'left', y: 'bottom' } });
 export function renderTagIOTFormPane() {
     const element = document.createElement('div');
     element.classList.add('at_container');
@@ -34,7 +37,7 @@ export function renderTagIOTFormPane() {
     </div>
 
     <div class="at_form_container at_scrollable_container at_h-min-70">
-      <label for="">${i18n.t('Linked Systems')}</label>
+      <label for="">${i18n.t('LinkedSystems')}</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 />
@@ -46,7 +49,7 @@ export function renderTagIOTFormPane() {
           </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")}
+              ${i18n.t("URLLink")}
           </label>
         </div>
 
@@ -73,22 +76,22 @@ export function renderTagIOTFormPane() {
         </div>
 
         <div class="at-field at_flex_row at_justify_between">
-            <label for="">${i18n.t('Model Name')}</label>
+            <label for="">${i18n.t('ModelName')}</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>
+            <label for="">${i18n.t('SerialNumber')}</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>
+            <label for="">${i18n.t('ManufacturerSite')}</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>
+            <label for="">${i18n.t('SystemLink')}</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>
 
@@ -98,9 +101,9 @@ export function renderTagIOTFormPane() {
         </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">    
+         <label for="">${i18n.t('IoTDevices')}</label>
+          <div id="at-iot-devices-dropdown" data-cy="at-iot-devices-dropdown" class="at-device-dropdown">
+            <div id="at-iot-devices-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>
@@ -112,17 +115,19 @@ export function renderTagIOTFormPane() {
           </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_iot_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_section at_iot_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 class="at_title" style="padding-left: 20px !important;">
                 <div> </div>
-                <label for="">${i18n.t('Linked IOT Devices')}</label>
+                <label for="">${i18n.t('LinkedIoTDevices')}</label>
                 <div> </div>
               </div>
 
-              <div class="at_linked_device_container" id="at-linked-device-row">
+              <div>
+                <div class="at_body at_linked_device_container" id="at-device-item-container">
+                </div>
               </div>
 
             </div>
@@ -155,19 +160,24 @@ function displayFormTitle() {
     title.innerHTML = '';
     const span = document.createElement('span');
     span.textContent = iotTagFormMode === "ADD" /* FORM_MODE.ADD */
-        ? i18n.t('Add IOT Tag')
-        : i18n.t('Edit IOT Tag');
+        ? i18n.t('AddIoTTag')
+        : i18n.t('EditIoTTag');
     title.appendChild(span);
 }
+// displays selected Category in the dropdown
 function setSelectedIoTCat(payload) {
     log.info('setSelectedIoTCat()', payload);
     const selectedOption = document.getElementById('at-iot-selected-cat');
-    selectedOption.innerText = payload;
+    selectedOption.innerText = i18n.t(payload.name);
 }
+// displays selected Device in the dropdown
 function setSelectedIoTDevice(payload) {
     log.info('setSelectedIoTDevice()', payload);
     const selectedDevice = document.getElementById('at-iot-selected-device');
-    selectedDevice.innerText = payload;
+    selectedDevice.innerText = '';
+    if (payload) {
+        selectedDevice.innerText = payload;
+    }
 }
 function setInputFields() {
     log.info('setInputFields()');
@@ -180,17 +190,37 @@ function setInputFields() {
 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);
-    });
+    if (_tagIotCategoryTypes) {
+        renderIotCategoryDropdownOptions('at-iot-category-options', _tagIotCategoryTypes);
+        batchAddEventListenerByClassName('at_iot_cat_option', (event) => {
+            //@ts-ignore
+            const selectedCat = event.target;
+            const catUUID = selectedCat.getAttribute('iot-category-uuid');
+            const getCatName = _tagIotCategoryTypes.find(cat => cat.uuid === catUUID);
+            if (getCatName) {
+                selectedIoTCat = { uuid: catUUID, name: getCatName.name };
+                setSelectedIoTCat(selectedIoTCat);
+                log.info('cat id: ', selectedIoTCat);
+            }
+        });
+    }
+}
+// gets selected Category and returns the object
+export function getIotCategoryOption() {
+    log.info('getIotCategoryOption()');
+    let foundCat = {};
+    if (linkedDevicesArray.length > 1) {
+        foundCat = _tagIotCategoryTypes.find((cat) => {
+            return i18n.t(cat.name) === 'Multiple';
+        });
+    }
+    else {
+        foundCat = _tagIotCategoryTypes.find((cat) => {
+            return i18n.t(cat.uuid) === selectedIoTCat.uuid;
+        });
+    }
+    log.info('foundCat: ', foundCat);
+    return foundCat;
 }
 export function toggleIoTCategoryOptions() {
     log.info('toggleIoTCategoryOptions');
@@ -250,7 +280,7 @@ export function 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');
+    devicesDropdown.innerText = i18n.t('SelectDevice');
 }
 /**
  * Initializes Form Data
@@ -260,12 +290,14 @@ export function clearIoTDropdowns() {
 export function initIoTFormData(tagId) {
     log.info('initIoTFormData()');
     displayFormTitle();
+    const iotSave = document.getElementById('at-save-iot-btn');
+    iotSave.classList.remove('at_disabled');
     // Add Mode
     if (!tagId) {
-        log.info('initIoTFormData() tagId not Exist: ', iotTagFormMode);
+        clearIoTDropdowns();
+        clearIotFields();
         if (iotTagFormMode == "ADD" /* FORM_MODE.ADD */) {
             if (tagIotName === null || tagIotName == undefined) {
-                log.info('initIoTFormData() tagname check', tagIotName);
                 setInputFields();
             }
             tagIotName.value = '';
@@ -273,11 +305,12 @@ export function initIoTFormData(tagId) {
             iotSerialNumber.value = '';
             iotMfrName.value = '';
             iotSystemLink.value = '';
+            linkedDevicesArray = [];
+            setIotDeviceOptions();
         }
     }
     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) {
@@ -299,23 +332,25 @@ export function initIoTFormData(tagId) {
                     setSelectedIoTSystemRadio(IOT_LINKED_SYSTEMS.BEMAC);
                 }
                 if (iotData.iot_category) {
-                    const cat = _tagIotCategoryTypes.find(cat => cat.name === iotData.iot_category);
+                    log.info('found cat 1: ', i18n.t(iotData.iot_category), iotData.iot_category, _tagIotCategoryTypes);
+                    const cat = _tagIotCategoryTypes.find(cat => i18n.t(cat.name.toLocaleLowerCase()) === iotData.iot_category.toLocaleLowerCase());
                     if (cat) {
-                        setSelectedIoTCat(cat.name);
-                        selectedIoTCatId = cat.name;
+                        log.info('found cat: ', cat);
+                        setSelectedIoTCat({ uuid: cat.uuid, name: cat.name });
+                        selectedIoTCat = { uuid: cat.uuid, name: cat.name };
                     }
                     else {
                         // for the Dummy data from App Side
-                        setSelectedIoTCat(i18n.t('NoSelection'));
+                        setSelectedIoTCat({ uuid: generateUUID(), name: 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) {
+                    setIotDeviceOptions();
                     // renderIotDeviceDropdownOptions('at-iot-device-options', _tagIotDevices)
                     setSelectedIoTDevice(iotData.linked_devices[0].name);
                     linkedDevicesArray = iotData.linked_devices;
-                    log.info("EDIT linkedDevicesArray: ", linkedDevicesArray);
                     renderLinkedDevices(linkedDevicesArray);
                 }
                 else {
@@ -328,7 +363,7 @@ export function initIoTFormData(tagId) {
                 // this is due to selecting the tags created from James
                 log.info('initIoTFormData()', iotData);
                 setSelectedIoTSystemRadio(IOT_LINKED_SYSTEMS.BEMAC);
-                setSelectedIoTCat('No Selection');
+                setSelectedIoTCat({ uuid: generateUUID(), name: i18n.t('NoSelection') });
                 renderIotCategoryDropdownOptions('at-iot-category-options', _tagIotCategoryTypes);
                 renderIotDeviceDropdownOptions('at-iot-device-options', _tagIotDevices);
             }
@@ -370,8 +405,10 @@ export function renderIotCategoryDropdownOptions(elementId, items) {
         return;
     }
     items.forEach((item, index) => {
-        const option = createCatOptionElement(item, 'iotcategory', index);
-        element.appendChild(option);
+        if (item.name != 'Multiple') {
+            const option = createCatOptionElement(item, 'iotcategory', index);
+            element.appendChild(option);
+        }
     });
 }
 function createCatOptionElement(item, dropdownType, index) {
@@ -394,28 +431,33 @@ function createCatOptionElement(item, dropdownType, index) {
     return option;
 }
 function selectCatOption(option, elementId) {
-    log.info('selectCatOption()', option, elementId);
+    dispatchSpaceEvent(SPACE_EVENTS.GET_IOT_CAT_ICON, { payload: option });
 }
+// selects Devices from Arrayat-device-item-container
 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) => {
+    batchAddEventListenerByClassName('at_option', (event) => {
         //@ts-ignore
-        const selectedDev = event.target;
-        const parent = selectedDev.parentElement;
-        log.info('@caroline parent: ', parent);
+        const selectedDev = document.getElementById(event.target.id);
+        const parent = selectedDev.closest('div');
         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);
+        // adds selected device to array
+        const devFound = _tagIotDevices.find(device => device.id === deviceId);
+        if (devFound) {
+            selectedDev.setAttribute('disabled', 'true');
+            setSelectedIoTDevice(selectedDev.innerText);
+            linkedDevicesArray.push(devFound);
+            //hides the selected device in dropdown
+            parent.style.display = 'none'; //hides
+            renderDeviceRow(devFound);
+            selectedDev.setAttribute('disabled', 'false');
+        }
     });
 }
 export function renderIotDeviceDropdownOptions(elementId, items) {
-    log.info("renderIotDeviceDropdownOptions: ", items);
+    log.info("renderIotDeviceDropdownOptions: ");
     const element = document.getElementById(elementId);
     if (!element) {
         console.error("Parameter element is undefined");
@@ -430,19 +472,19 @@ export function renderIotDeviceDropdownOptions(elementId, items) {
     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.textContent = `${i18n.t('SelectDevice')}`;
         selectedIoTDeviceOption = undefined;
     }
     //Add the no selection option
     const selectDevice = document.createElement('div');
-    selectDevice.classList.add('at_iot_dev_option');
+    selectDevice.classList.add('at_option');
     selectDevice.setAttribute('iot-device-uuid', '');
     selectDevice.setAttribute('dropdown-type', 'iotdevice');
     selectDevice.innerHTML = `
-        <span></span> ${i18n.t('Select Device')}
+        <span></span> ${i18n.t('SelectDevice')}
     `;
     selectDevice.onclick = () => {
-        log.info('@caroline onClick');
+        log.info('item selected: ', selectDevice, linkedDevicesArray);
         selectDeviceOption(selectDevice, isFilterDropdown ? 'at-iot-device-filter-dropdown-toggle' : 'at-iot-device-filter-dropdown-toggle');
     };
     element.appendChild(selectDevice);
@@ -466,21 +508,23 @@ function createDeviceOptionElement(item, dropdownType) {
     option.style.justifyContent = 'left';
     option.style.alignItems = 'center';
     option.style.gap = '2px';
+    // option.classList.add('at_option')
     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>
+    <span style="width: 100%; display: block; padding: 4px 8px; cursor: pointer" id="${item.id}">${item.name}</span>
       `;
+    if (selectedIotTag) {
+        const iotTag = selectedIotTag.iot_tag;
+        const hideOption = iotTag.linked_devices.find((dev) => {
+            return dev.id === item.id;
+        });
+        if (hideOption != undefined) {
+            option.style.setProperty('display', 'none', 'important');
+        }
+    }
     return option;
 }
 /**
@@ -499,7 +543,8 @@ export function getIotTagFormData() {
         modelName: iotModelName.value,
         serialNumber: iotSerialNumber.value,
         tagMf: iotMfrName.value,
-        tagCategoryId: selectedIoTCatId,
+        // tagCategoryId: selectedIoTCat.uuid,
+        tagCategoryId: selectedIoTCat.name,
         systemLink: iotSystemLink.value,
         linkedDevices: linkedDevicesArray,
         iotSystem: selectedIoTSystem,
@@ -508,55 +553,78 @@ export function getIotTagFormData() {
     return formData;
 }
 function renderLinkedDevices(linkedDevices) {
-    log.info('renderLinkedDevices()', linkedDevices);
+    log.info('renderLinkedDevices()');
     if (linkedDevices) {
-        const devicesContainer = document.getElementById('at-linked-device-row');
+        // const devicesContainer = document.getElementById('at-device-item-container')
         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');
+    log.info('renderDeviceRow()');
+    const devicesContainer = document.getElementById('at-device-item-container');
     if (payload) {
         const deviceRow = document.createElement('div');
         deviceRow.classList.add('at_flex_row');
-        deviceRow.classList.add('at_partition_item');
+        deviceRow.classList.add('at_item');
         deviceRow.innerHTML = `
-      <div class="at_icon_left">
+      <div class="at_subitem_left">
         <span class="mdi mdi-cube-outline"></span>
       </div>
 
-      <div class="at_partition_name">
+      <div class="at_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 class="at_subitem_right">
+        <span class="mdi mdi-delete-outline at_delete_device_btn" id="at-delete-device-${payload.id}"></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);
+            const selectedDevice = event.target;
             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);
+                toggleModal();
+                setModalAction({
+                    title: `${i18n.t('DeleteDevice')}`,
+                    description: `${i18n.t('ConfirmDeleteDevice')}`,
+                    buttonLabel: `${i18n.t('YesDelete')}`
+                }, () => __awaiter(this, void 0, void 0, function* () {
+                    // gets the device id
+                    const devId = selectedDevice.id.split('at-delete-device-')[1];
+                    // finds the index of the selected device
+                    const findDevice = linkedDevicesArray.findIndex(dev => dev.id === devId);
+                    if (findDevice > -1) {
+                        selectedDevice.setAttribute('disabled', 'true');
+                        const parent = selectedDevice.closest('.at_partition_item');
+                        if (parent) {
+                            // displays delete Device back in Dropdown List
+                            const findHideDev = document.querySelector(`div[iot-device-uuid="${devId}"]`);
+                            const devicesDropdown = document.getElementById('at-iot-selected-device');
+                            if (findHideDev) {
+                                findHideDev.style.display = "block";
+                                parent.style.display = 'none';
+                                linkedDevicesArray.splice(findDevice, 1);
+                            }
+                            if (linkedDevicesArray.length === 0) {
+                                devicesDropdown.innerText = i18n.t('SelectDevice');
+                                setIotDeviceOptions();
+                            }
+                        }
+                        toggleModal(false);
+                        notify.success(`${i18n.t('SuccessDeleteDevice')}`);
+                        selectedDevice.setAttribute('disabled', 'false');
+                    }
+                    else {
+                        toggleModal(false);
+                        notify.error("Tag id not found!");
+                    }
+                }));
             }
         }));
         return;
@@ -573,7 +641,7 @@ export function clearIotFields() {
     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");
+    const deviceContainer = document.getElementById('at-device-item-container');
     tagIotName.innerText = '';
     iotModelName.innerText = '';
     iotSerialNumber.innerText = '';
@@ -582,10 +650,9 @@ export function clearIotFields() {
     linkedDevicesArray = [];
     selectedIoTSystem = '';
     setSelectedIoTSystemRadio(IOT_LINKED_SYSTEMS.BEMAC);
-    if (deviceContainer !== null) {
-        deviceContainer.innerHTML = '';
-    }
+    deviceContainer.innerHTML = '';
     iotTagFormMode = "ADD" /* FORM_MODE.ADD */;
+    selectedIotTag = undefined;
 }
 /**
  * Sets the form mode for the IOT form.

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

@@ -6,3 +6,4 @@ export declare function renderViewingRemoteSpace(): HTMLElement;
  */
 export declare function renderRemoteSpaceViewing(user: ScreenShareUser): void;
 export declare function handleRemoteViewResponsiveChanges(): void;
+export declare function handleScreenShareRemoteEndSessionEvent(): void;

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

@@ -100,3 +100,9 @@ export function handleRemoteViewResponsiveChanges() {
         container.classList.toggle("at_display_flex_end", isMobile);
     }
 }
+export function handleScreenShareRemoteEndSessionEvent() {
+    const element = document.getElementById("at-viewing-remote-space-pane");
+    if (element) {
+        element.style.display = 'none';
+    }
+}

package/lib/atwinui/events.js

@@ -23,14 +23,14 @@ import { isValidUrl, debounce, isElementVisible, extractUUID, showLoader, isVec3
 import log from 'loglevel';
 import * as minimap from '../minimap';
 import { clearActiveThemeCard, getSelectedTheme } from "./components/toolbar/themePane";
-import { getCurrentEditRoomData, displayRoomTree, updatePartitionVisibilityUI, getSelectedPartitionId, updatePolygonVisibilityData, toggleVisibilityState, setFilteredDisplay, updateRoomVisibilityUI } from "./components/toolbar/spacePartition/roomTreePane";
-import { toggleDrawPartitionButton, displayPartitionFormMode, setPartitionFormMode, clearPartitionForm, setPolygonData, getPartitionFormData, getPartitionSavingMode, setPartitionSavingMode, getPartitionFormMode, getNewlyAddedPartition, setCurrentPartitionData, getTempCurrentPolygon, clearTempCurrentPolygon } from "./components/toolbar/spacePartition/roomFormPane";
+import { getCurrentEditRoomData, displayRoomTree, updatePartitionVisibilityUI, getSelectedPartitionId, updatePolygonVisibilityData, toggleVisibilityState, setFilteredDisplay, updateRoomVisibilityUI, highlightSelectedPartitionChild } from "./components/toolbar/spacePartition/roomTreePane";
+import { toggleDrawPartitionButton, displayPartitionFormMode, setPartitionFormMode, clearPartitionForm, setPolygonData, getPartitionFormData, getPartitionSavingMode, setPartitionSavingMode, getPartitionFormMode, getNewlyAddedPartition, setCurrentPartitionData, getCurrentPartitionData, getTempCurrentPolygon, clearTempCurrentPolygon, toggleDrawWindowButton, getDrawingMode } from "./components/toolbar/spacePartition/roomFormPane";
 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 } from './components/toolbar/tagListPane';
 import { renderUserRows } from "./components/toolbar/spaceUserListPane";
-import { handleRemoteViewResponsiveChanges, renderRemoteSpaceViewing } from "./components/toolbar/viewingRemoteSpace";
+import { handleRemoteViewResponsiveChanges, handleScreenShareRemoteEndSessionEvent, renderRemoteSpaceViewing } from "./components/toolbar/viewingRemoteSpace";
 import { PipeList } from "./components/toolbar/pipeListPane";
 import { PipeForm } from "./components/toolbar/pipeFormPane";
 import { unsendComment, timedoutComment, getTheseTagMessages } from './components/toolbar/tagMessagingPane';
@@ -415,6 +415,7 @@ function setupIndividualEventListeners() {
     handleSaveTheme();
     handlePartitionDisplay();
     handleDrawPartition();
+    handleDrawWindow();
     handleSavePartition();
     // handleDeletePartition()
     handleCancelPartition();
@@ -1432,11 +1433,25 @@ function setupSpaceEventSubscriptions() {
     subscribeSpaceEvent(SPACE_EVENTS.DRAW_HISTORY, handleDrawHistory);
     subscribeSpaceEvent(SPACE_EVENTS.FLOOR_IMAGE_UPLOADED, handleCustomMapFloorImageUploaded);
     subscribeSpaceEvent(SPACE_EVENTS.FLOOR_IMAGE_UPLOAD_FAILED, handleCustomMapFloorUploadFailed);
-    subscribeSpaceEvent(SPACE_EVENTS.PATH_UPDATED, handlePathUpdated);
-    subscribeSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_USERS_UPDATE, handleScreenShareUsersUpdated);
+    subscribeSpaceEvent(SPACE_EVENTS.PATH_UPDATED, handlePathUpdated),
+        subscribeSpaceEvent(SPACE_EVENTS.PARTITION_COLLIDER_CLICKED, handlePartitionColiderClickSelected),
+        subscribeSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_USERS_UPDATE, handleScreenShareUsersUpdated);
     subscribeSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_HOST_END_SESSION, handleScreenShareEndSessionEvent);
     subscribeSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_ACCEPT_REQUEST, handleScreenShareAcceptRequest);
     subscribeSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_BACK_USER_LIST_PANE, handleScreenShareBackUserListPane);
+    subscribeSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_TERMINATED, handleScreenShareRemoteEndSessionEvent);
+}
+function handlePartitionColiderClickSelected(payload) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const partitionId = payload.collider.name.split('_')[0];
+        if ((activePane === null || activePane === void 0 ? void 0 : activePane.getAttribute('id')) !== 'at-room-tree-pane') {
+            yield toggleDisplayPane('at-room-creation-btn');
+        }
+        else {
+            yield new Promise(resolve => requestAnimationFrame(resolve));
+        }
+        highlightSelectedPartitionChild(partitionId, payload.collider.name);
+    });
 }
 function handleDragEnd(payload) {
     console.log("handleDragEnd payload", payload);
@@ -1513,9 +1528,14 @@ function handleDrawHistory(payload) {
 function handleVertexPlace(payload) {
     console.log("handleVertexPlace ==>", payload);
     if (isToolbarFeatureEnabled('roomCreation')) {
+        log.info("getDrawingMode()", getDrawingMode());
+        if (getDrawingMode() === 'window') {
+        }
+        if (getDrawingMode() === 'partition') {
+            // setCurrentPartitionData()
+        }
         const undoBtn = document.getElementById('at-draw-undo-btn');
         undoBtn.classList.remove('at_disabled');
-        setCurrentPartitionData();
         const redoBtn = document.getElementById('at-draw-redo-btn');
         redoBtn.classList.add('at_disabled');
     }
@@ -2019,6 +2039,18 @@ function handleDrawPartition() {
         toggleDrawPartitionButton();
     });
 }
+function handleDrawWindow() {
+    log.info("__@ handleDrawWindow()");
+    const addDoorButton = document.getElementById('at-add-window-door-btn');
+    addDoorButton.addEventListener('click', () => {
+        toggleDrawWindowButton();
+    });
+}
+function handleSaveWindow() {
+    log.info("handleSaveWindow()");
+    const currentPartitionData = getCurrentPartitionData();
+    dispatchSpaceEvent(SPACE_EVENTS.PARTITION_EDITED, { data: currentPartitionData });
+}
 function handleSavePartition() {
     log.info("__@ handleSavePartition()");
     const saveRoomBtn = document.getElementById('at-save-room-btn');