architwin 1.13.2 → 1.13.3

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

@@ -11,7 +11,7 @@ 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';
 let selectedIoTCatOption;
 let selectedIoTDeviceOption;
@@ -19,7 +19,7 @@ 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'];
 export function renderTagIOTFormPane() {
@@ -99,8 +99,8 @@ export function renderTagIOTFormPane() {
 
         <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 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>
@@ -122,7 +122,9 @@ export function renderTagIOTFormPane() {
                 <div> </div>
               </div>
 
-              <div class="at_linked_device_container" id="at-linked-device-row">
+              <div>
+                <div class="at_linked_device_container" id="at-device-item-container">
+                </div>
               </div>
 
             </div>
@@ -155,19 +157,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 = 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 +187,34 @@ 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');
+            selectedIoTCat = { uuid: catUUID, name: selectedCat.innerText };
+            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');
@@ -260,12 +284,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 +299,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 +326,23 @@ export function initIoTFormData(tagId) {
                     setSelectedIoTSystemRadio(IOT_LINKED_SYSTEMS.BEMAC);
                 }
                 if (iotData.iot_category) {
-                    const cat = _tagIotCategoryTypes.find(cat => cat.name === iotData.iot_category);
+                    const cat = _tagIotCategoryTypes.find(cat => cat.name.toLocaleLowerCase() === iotData.iot_category.toLocaleLowerCase());
                     if (cat) {
-                        setSelectedIoTCat(cat.name);
-                        selectedIoTCatId = cat.name;
+                        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 +355,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 +397,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 +423,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) => {
         //@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");
@@ -442,7 +476,7 @@ export function renderIotDeviceDropdownOptions(elementId, items) {
         <span></span> ${i18n.t('Select Device')}
     `;
     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);
@@ -471,16 +505,18 @@ function createDeviceOptionElement(item, dropdownType) {
     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%" 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 +535,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,21 +545,19 @@ 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');
@@ -538,25 +573,37 @@ function renderDeviceRow(payload) {
         <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>
+        <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);
+                // 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('Select Device');
+                            setIotDeviceOptions();
+                        }
+                    }
+                    selectedDevice.setAttribute('disabled', 'false');
+                }
             }
         }));
         return;
@@ -573,7 +620,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 +629,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

@@ -1,7 +1,7 @@
-import { ISpaceUser } from "../../../types";
+import { ScreenShareUser } from "../../../types";
 export declare function renderViewingRemoteSpace(): HTMLElement;
 /**
  * Render the viewing remote space panel for the user sharing their screen.
  * @param user The user who is currently sharing their screen
  */
-export declare function renderRemoteSpaceViewing(user: ISpaceUser): void;
+export declare function renderRemoteSpaceViewing(user: ScreenShareUser): void;

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

@@ -35,6 +35,7 @@ export function renderRemoteSpaceViewing(user) {
     if (!container && !maincontainer)
         return;
     maincontainer.style.display = 'block';
+    maincontainer.style.zIndex = '2';
     container.innerHTML = '';
     // === Main Card ===
     const card = document.createElement('div');
@@ -61,7 +62,7 @@ export function renderRemoteSpaceViewing(user) {
     circle.style.width = '15px';
     circle.style.height = '15px';
     circle.style.borderRadius = '50%';
-    circle.style.backgroundColor = user.isActive ? '#22c55e' : '#ffffff';
+    circle.style.backgroundColor = user.onlineStatus == 'online' || user.onlineStatus == 'in_session' ? '#22c55e' : '#ffffff';
     circle.style.border = '1px solid #ccc';
     circle.style.marginRight = '10px';
     // Combine into card

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "architwin",
-  "version": "1.13.2",
+  "version": "1.13.3",
   "description": "ArchiTwin Library for Matterport",
   "main": "./lib/architwin.js",
   "types": "./lib/architwin.d.ts",