architwin 1.13.7 → 1.13.8

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

@@ -168,6 +168,7 @@ i18n
                 "General Settings": "General Settings",
                 "UploadImage": "Upload Image",
                 "Unsend": "Unsend",
+                "PipesMenu": "Pipes",
                 "Pipes": "Pipes",
                 "SelectPipeType": "Select Pipe Type",
                 "AddPipeType": "Add Pipe Type",
@@ -364,7 +365,8 @@ i18n
                 "Search...": "検索...",
                 "UploadImage": "画像をアップロード",
                 "Unsend": "取り消し",
-                "Pipes": "配管",
+                "PipesMenu": "矢印マーカー",
+                "Pipes": "配管マーカー",
                 "SelectPipeType": "配管種別選択",
                 "AddPipeType": "配管種別を追加",
                 "EditPipeType": "配管種別を編集",
@@ -391,7 +393,7 @@ i18n
                 "PipeCategoryName": "配管種別を入力",
                 "HideShowAllPipes": "全ての配管を表示/非表示",
                 "PipePlaceHolder": "配管種別名を入力",
-                "Pipe": "配管",
+                "Pipe": "矢印マーカー",
                 "Vertex": "頂点"
             }
         }

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

@@ -47,8 +47,8 @@ export function renderMenuBar(iFrame) {
         <div class="at_icon_tooltip" data-cy="at-tooltip-screenshot">${i18n.t('Screenshot')}</div>
     </div>
     <div class="at_sidebar_button_icon" style="display:${isPipeEnabled ? 'block' : 'none'}">
-        <span class="mdi mdi-pipe" id="at-pipe-btn" data-cy="at-pipe-btn" target-pane="at-pipe-list-pane"></span>
-        <div class="at_icon_tooltip" data-cy="at-tooltip-pipe">${i18n.t('Pipes')}</div>
+        <span class="mdi mdi-arrow-decision" id="at-pipe-btn" data-cy="at-pipe-btn" target-pane="at-pipe-list-pane"></span>
+        <div class="at_icon_tooltip" data-cy="at-tooltip-pipe">${i18n.t('PipesMenu')}</div>
     </div>
     <div class="at_sidebar_button_icon" style="display:${isThemeEnabled ? 'block' : 'none'}">
         <span class="mdi mdi-palette" id="at-theme-picker-btn" data-cy="at-theme-picker-btn" target-pane="at-theme-pane"></span>

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

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { _3DXObjects, _pipes, _selectedPipe, _selectedPipeCategory, _undoDrawActions, cancelDraw, dispatchSpaceEvent, disposeModel, enableVerticeControls, getCurrentCameraPose, moveToSweep, redoDrawAction, renderPath, setModelVisibility, setPathLineOptions, setPipeIsDrawingMode, setPipes, startDraw, undoDrawAction } from "../../../architwin";
+import { _3DXObjects, _pathConfig, _pipes, _selectedPipe, _selectedPipeCategory, _undoDrawActions, cancelDraw, dispatchSpaceEvent, disposeModel, enableVerticeControls, getCurrentCameraPose, moveToSweep, redoDrawAction, renderPath, setModelVisibility, setPathLineOptions, setPipeIsDrawingMode, setPipes, startDraw, undoDrawAction } from "../../../architwin";
 import i18n from './i18n';
 import { COLLAPSE, SPACE_EVENTS } from "../../../types";
 import { Collapse } from "./collapse";
@@ -20,7 +20,7 @@ export class PipeForm {
     constructor() {
         this.category = {};
         this.collapse = new Collapse(undefined);
-        this.colorCategory = ['dark-red', 'red', 'amber', 'light-chartreuse', 'chartreuse', 'light-green', 'dark-green', 'sky-blue', 'purple', 'dark-purple'];
+        this.colorCategory = ['blue', 'green', 'gray', 'silver', 'red', 'yellow', 'black', 'brown', 'pink', 'orange'];
     }
     // Render the main form pane
     renderPane() {
@@ -385,7 +385,9 @@ export class PipeForm {
                     }
                 });
                 setPipeIsDrawingMode(true);
-                startDraw();
+                startDraw({
+                    lineTypeComponentConfig: Object.assign(Object.assign({}, _pathConfig.lineTypeComponentConfig), { scrollSpeed: 0.70, radialSegments: 3, radius: 0.11 })
+                });
                 notyf.success(`${i18n.t('DrawingModeIsNowActive')}`);
                 if (_selectedPipe.uuid) {
                     console.log("EDIT PIPE ACTIVE", _selectedPipe.uuid);
@@ -564,6 +566,9 @@ export class PipeForm {
                 uuid: pipe.uuid,
                 fillColor: 'none',
                 textColor: category.color,
+                scrollSpeed: 0.70,
+                radialSegments: 3,
+                radius: 0.11
             });
         });
     }

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

@@ -99,7 +99,7 @@ export class PipeList {
                 }).map(pipe => `
                         <div class="at_locate_area_container at_flex at_justify_end at_gap_2" id="at-collapsible-${COLLAPSE.LIST}-${pipe.uuid}" data-uuid="${pipe.uuid}" data-type="${COLLAPSE.LIST}">
                             <div id="at-locate-area-${COLLAPSE.LIST}-${pipe.uuid}" data-uuid="${pipe.uuid}" data-type="${COLLAPSE.LIST}">
-                            <span>${pipe.name}</span>
+                            <span>${pipe.name.split(' ')[0] === 'Pipe' ? i18n.t('Pipe') + ' ' + pipe.name.split(' ')[1] : pipe.name}</span>
                             <span class="mdi mdi-trash-can-outline at-pipe-filter-chevron" id="at-delete-btn-${COLLAPSE.LIST}-${pipe.uuid}" data-cy="at-pipe-delete-btn" data-type="${COLLAPSE.LIST}" data-uuid="${pipe.uuid}"></span>
                             <span class="mdi mdi-eye at-pipe-filter-chevron" id="at-view-btn-${COLLAPSE.LIST}-${pipe.uuid}" data-cy="at-pipe-view-btn" data-uuid="${pipe.uuid}" data-type="${COLLAPSE.LIST}"></span>
                             </div>
@@ -327,7 +327,10 @@ export class PipeList {
                     renderPath(_pipe.vertices, {
                         uuid: pipe.uuid,
                         textColor: _categories.color,
-                        fillColor: 'none'
+                        fillColor: 'none',
+                        scrollSpeed: 0.70,
+                        radialSegments: 3,
+                        radius: 0.11
                     });
                 }
             });

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

@@ -17,3 +17,4 @@ export declare function handleScreenShareUsersUpdated(payload: {
 export declare function handleScreenShareEndSessionEvent(): void;
 export declare function handleScreenShareBackUserListPane(): void;
 export declare function handleScreenShareAcceptRequest(payload: ScreenShareRequest): void;
+export declare function removeScreenShareSessionData(): void;

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

@@ -16,7 +16,7 @@ export function renderScreenSharePane() {
     element.setAttribute('id', 'at-screen-share-pane');
     element.setAttribute('data-cy', 'at-screen-share-pane');
     element.innerHTML = `
-        <div id="at-users-pane" class="at_flex at_flex_column">
+        <div class="at_flex at_flex_column">
             <div id="at-screen-share-pane-content" class="at_form_container">
                 <div class="at_flex at_justify_start">
                     <span class="at_bolder at_text_base">${i18n.t('Users')}</span>
@@ -63,14 +63,26 @@ export function renderOnlineUserRow(user) {
     const iconOrSharingText = user.onlineStatus === 'in_session'
         ? `
         <div class="at_flex at_items_center at_justify_center">
-            <p>Now Sharing</p>
+            <p>In Session</p>
         </div>    
     `
-        : `
-        <div class="at_user_screen_sharing_state at_flex at_items_center at_justify_center">
-            <div class="mdi mdi-monitor-share"></div>
-        </div>
-    `;
+        : user.onlineStatus === 'pending'
+            ? `
+            <div class="at_flex at_items_center at_justify_center">
+                <p>Pending</p>
+            </div>
+        `
+            : user.onlineStatus === 'sharing'
+                ? `
+            <div class="at_flex at_items_center at_justify_center">
+                <p>Now Sharing</p>
+            </div>
+        `
+                : `
+            <div class="at_user_screen_sharing_state at_flex at_items_center at_justify_center">
+                <div class="mdi mdi-monitor-share"></div>
+            </div>
+        `;
     element.innerHTML = `
         <td id="at_user_row_${user.id}">
             <div class="at_flex at_flex_row at_items_center">
@@ -111,7 +123,14 @@ export function handleClickEventUserRow() {
                 _screenShareUser = user;
                 if (user.onlineStatus === 'offline')
                     return;
+                if (user.onlineStatus === 'sharing')
+                    return;
+                if (user.onlineStatus === 'pending')
+                    return;
                 if (user.onlineStatus === 'in_session') {
+                    if (!_screenShareSession) {
+                        return;
+                    }
                     const usersPaneContent = document.getElementById('at-screen-share-pane-content');
                     usersPaneContent.innerHTML = '';
                     const sessionUser = {
@@ -123,6 +142,9 @@ export function handleClickEventUserRow() {
                     renderSharingSpaceDetail(sessionUser);
                 }
                 else {
+                    if (_screenShareSession) {
+                        return;
+                    }
                     const nowEpochSeconds = Math.floor(Date.now() / 1000);
                     const screenShareInvitation = {
                         user: user,
@@ -138,7 +160,6 @@ export function handleClickEventUserRow() {
     }
 }
 export function renderSharingSpaceDetail(user) {
-    console.log('*** _screenShareSession: ', _screenShareSession);
     _onDisplayComponent = 'SPACE_SHARING_DETAILS';
     _screenShareSessionUser = user;
     const usersPaneContent = document.getElementById('at-screen-share-pane-content');
@@ -339,7 +360,7 @@ function showEndSessionBtn() {
         btn.style.display = 'block';
     }
 }
-function removeScreenShareSessionData() {
+export function removeScreenShareSessionData() {
     const screenShareSessionUserIds = _screenShareSessionUsers.map(u => u.id);
     const updateUsersData = _screenShareUsers.map(user => {
         if (screenShareSessionUserIds.includes(user.id)) {

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

@@ -1,6 +1,6 @@
 import { _tagCategories, _tags, getMpTags } from "../../../architwin";
 import { convertToCssRgb, stringContains } from "../../../utils";
-import { renderTags, setSelectedCategoryFilter, setSelectedSubcategoryFilter, filterTagList, getAllSubcategories, selectedCategoryFilterId } from './tagListPane';
+import { renderTags, setSelectedCategoryFilter, setSelectedSubcategoryFilter, filterTagList, getAllSubcategories, selectedCategoryFilterId, sortTags, selectedTagSortOption } from './tagListPane';
 import i18n from './i18n';
 let mode = 'adding';
 let tagNameInput, tagDescriptionInput, tagEmbedInput, tagCategoryDropdown, tagSubcategoryDropdown;
@@ -283,7 +283,8 @@ function selectOption(option, elementId, skipToggle = false) {
             setSelectedSubcategoryFilter(undefined); //reset selected subcategory
             const tags = getMpTags();
             const filteredTags = filterTagList(tags);
-            renderTags(filteredTags);
+            const sortedTags = sortTags(filteredTags, { by: 'label', order: 'asc' });
+            renderTags(sortedTags);
         }
         else if (categoryType == 'subcategory' && isFilterDropdown == false) {
             selectedSubCategoryId = categoryUUID;
@@ -292,6 +293,7 @@ function selectOption(option, elementId, skipToggle = false) {
             setSelectedSubcategoryFilter(categoryUUID);
             const tags = getMpTags();
             const filteredTags = filterTagList(tags);
+            const sortedTags = sortTags(filteredTags, { by: 'label', order: 'asc' });
             renderTags(filteredTags);
         }
         //Populate subcategory dropdown
@@ -341,7 +343,8 @@ function selectOption(option, elementId, skipToggle = false) {
         }
         const tags = getMpTags();
         const filteredTags = filterTagList(tags);
-        renderTags(filteredTags ? filteredTags : tags);
+        const sortedTags = sortTags(filteredTags ? filteredTags : tags, selectedTagSortOption);
+        renderTags(sortedTags);
     }
     let toggleId = '';
     if (elementId === 'at-category-dropdown-toggle') {

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

@@ -4,7 +4,6 @@ export declare let selectedIoTSystem: string;
 export declare let selectedIotTag: any;
 export declare function renderTagIOTFormPane(): HTMLDivElement;
 export declare function setIotCategoryOptions(): void;
-export declare function getIotCategoryOption(): ITagIOTCategory;
 export declare function toggleIoTCategoryOptions(): void;
 export declare function toggleIoTDevicesOptions(): void;
 /**

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, generateUUID } from "../../../utils";
+import { stringContains } 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 selectedIoTCat;
+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() {
@@ -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" class="at-device-dropdown">
-            <div id="at-iot-devices-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">
+            <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>
@@ -122,9 +122,7 @@ export function renderTagIOTFormPane() {
                 <div> </div>
               </div>
 
-              <div>
-                <div class="at_linked_device_container" id="at-device-item-container">
-                </div>
+              <div class="at_linked_device_container" id="at-linked-device-row">
               </div>
 
             </div>
@@ -157,24 +155,19 @@ function displayFormTitle() {
     title.innerHTML = '';
     const span = document.createElement('span');
     span.textContent = iotTagFormMode === "ADD" /* FORM_MODE.ADD */
-        ? i18n.t('AddIoTTag')
-        : i18n.t('EditIoTTag');
+        ? i18n.t('Add IOT Tag')
+        : i18n.t('Edit IOT Tag');
     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.name;
+    selectedOption.innerText = payload;
 }
-// displays selected Device in the dropdown
 function setSelectedIoTDevice(payload) {
     log.info('setSelectedIoTDevice()', payload);
     const selectedDevice = document.getElementById('at-iot-selected-device');
-    selectedDevice.innerText = '';
-    if (payload) {
-        selectedDevice.innerText = payload;
-    }
+    selectedDevice.innerText = payload;
 }
 function setInputFields() {
     log.info('setInputFields()');
@@ -187,34 +180,17 @@ 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) => {
-            //@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;
+    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');
@@ -284,14 +260,12 @@ 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) {
-        clearIoTDropdowns();
-        clearIotFields();
+        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 = '';
@@ -299,12 +273,11 @@ 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) {
@@ -326,23 +299,23 @@ export function initIoTFormData(tagId) {
                     setSelectedIoTSystemRadio(IOT_LINKED_SYSTEMS.BEMAC);
                 }
                 if (iotData.iot_category) {
-                    const cat = _tagIotCategoryTypes.find(cat => cat.name.toLocaleLowerCase() === iotData.iot_category.toLocaleLowerCase());
+                    const cat = _tagIotCategoryTypes.find(cat => cat.name === iotData.iot_category);
                     if (cat) {
-                        setSelectedIoTCat({ uuid: cat.uuid, name: cat.name });
-                        selectedIoTCat = { uuid: cat.uuid, name: cat.name };
+                        setSelectedIoTCat(cat.name);
+                        selectedIoTCatId = cat.name;
                     }
                     else {
                         // for the Dummy data from App Side
-                        setSelectedIoTCat({ uuid: generateUUID(), name: i18n.t('NoSelection') });
+                        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) {
-                    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 {
@@ -355,7 +328,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({ uuid: generateUUID(), name: i18n.t('NoSelection') });
+                setSelectedIoTCat('No Selection');
                 renderIotCategoryDropdownOptions('at-iot-category-options', _tagIotCategoryTypes);
                 renderIotDeviceDropdownOptions('at-iot-device-options', _tagIotDevices);
             }
@@ -397,10 +370,8 @@ export function renderIotCategoryDropdownOptions(elementId, items) {
         return;
     }
     items.forEach((item, index) => {
-        if (item.name != 'Multiple') {
-            const option = createCatOptionElement(item, 'iotcategory', index);
-            element.appendChild(option);
-        }
+        const option = createCatOptionElement(item, 'iotcategory', index);
+        element.appendChild(option);
     });
 }
 function createCatOptionElement(item, dropdownType, index) {
@@ -423,33 +394,28 @@ function createCatOptionElement(item, dropdownType, index) {
     return option;
 }
 function selectCatOption(option, elementId) {
-    dispatchSpaceEvent(SPACE_EVENTS.GET_IOT_CAT_ICON, { payload: option });
+    log.info('selectCatOption()', option, elementId);
 }
-// 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 = document.getElementById(event.target.id);
-        const parent = selectedDev.closest('div');
+        const selectedDev = event.target;
+        const parent = selectedDev.parentElement;
+        log.info('@caroline parent: ', parent);
         const deviceId = parent.getAttribute('iot-device-uuid');
-        // 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');
-        }
+        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: ");
+    log.info("renderIotDeviceDropdownOptions: ", items);
     const element = document.getElementById(elementId);
     if (!element) {
         console.error("Parameter element is undefined");
@@ -476,7 +442,7 @@ export function renderIotDeviceDropdownOptions(elementId, items) {
         <span></span> ${i18n.t('Select Device')}
     `;
     selectDevice.onclick = () => {
-        log.info('item selected: ', selectDevice, linkedDevicesArray);
+        log.info('@caroline onClick');
         selectDeviceOption(selectDevice, isFilterDropdown ? 'at-iot-device-filter-dropdown-toggle' : 'at-iot-device-filter-dropdown-toggle');
     };
     element.appendChild(selectDevice);
@@ -505,18 +471,16 @@ 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 style="width: 100%" id="${item.id}">${item.name}</span>
+    <span>${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;
 }
 /**
@@ -535,8 +499,7 @@ export function getIotTagFormData() {
         modelName: iotModelName.value,
         serialNumber: iotSerialNumber.value,
         tagMf: iotMfrName.value,
-        // tagCategoryId: selectedIoTCat.uuid,
-        tagCategoryId: selectedIoTCat.name,
+        tagCategoryId: selectedIoTCatId,
         systemLink: iotSystemLink.value,
         linkedDevices: linkedDevicesArray,
         iotSystem: selectedIoTSystem,
@@ -545,19 +508,21 @@ export function getIotTagFormData() {
     return formData;
 }
 function renderLinkedDevices(linkedDevices) {
-    log.info('renderLinkedDevices()');
+    log.info('renderLinkedDevices()', linkedDevices);
     if (linkedDevices) {
-        const devicesContainer = document.getElementById('at-device-item-container');
+        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()');
-    const devicesContainer = document.getElementById('at-device-item-container');
+    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');
@@ -573,37 +538,25 @@ 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.id}"></span>
+        <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 = event.target;
+            const selectedDevice = document.getElementById(event.target.id);
             if (selectedDevice) {
-                // 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');
-                }
+                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;
@@ -620,7 +573,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('at-device-item-container');
+    const deviceContainer = document.getElementById("linked-devices-container");
     tagIotName.innerText = '';
     iotModelName.innerText = '';
     iotSerialNumber.innerText = '';
@@ -629,9 +582,10 @@ export function clearIotFields() {
     linkedDevicesArray = [];
     selectedIoTSystem = '';
     setSelectedIoTSystemRadio(IOT_LINKED_SYSTEMS.BEMAC);
-    deviceContainer.innerHTML = '';
+    if (deviceContainer !== null) {
+        deviceContainer.innerHTML = '';
+    }
     iotTagFormMode = "ADD" /* FORM_MODE.ADD */;
-    selectedIotTag = undefined;
 }
 /**
  * Sets the form mode for the IOT form.