architwin 1.17.1 → 1.17.3

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

@@ -70,7 +70,7 @@ export function renderObjectCard(payload, objectComponent) {
             </div>
             <div>            
                 <div class="at_button_icon" style="display:inline-block">
-                    <span class="mdi ${isObjectVisible ? 'mdi-eye-off' : 'mdi-eye'}  at_model_visibility_btn" id="at-visibility-model-${payload.id}-btn" data-cy="at-visibility-model-${payload.id}-btn" card-id="${payload.id}"></span>
+                    <span class="mdi ${isObjectVisible ? 'mdi-eye' : 'mdi-eye-off'}  at_model_visibility_btn" id="at-visibility-model-${payload.id}-btn" data-cy="at-visibility-model-${payload.id}-btn" card-id="${payload.id}"></span>
                 </div>
                 <div class="at_button_icon" style="display:inline-block">
                     <span class="mdi mdi-delete-outline at_model_delete_btn" id="at-delete-model-${payload.id}-btn" data-cy="at-delete-model-${payload.id}-btn" card-id="${payload.id}"></span>

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

@@ -173,6 +173,7 @@ i18n
                 "BEMAC": "BEMAC",
                 "HANASYS": "HANASYS",
                 "URLLink": "URL Link",
+                "i-MTEC": "i-MTEC",
                 "ModelName": "Model Name",
                 "SerialNumber": "Serial Number",
                 "ManufacturerSite": "Manufacturer Site",
@@ -193,6 +194,14 @@ i18n
                 "Frequency": "Frequency",
                 "Camera": "Camera",
                 "Others": "Others",
+                "Outlet": "Outlet",
+                "Amp": "Amp",
+                "RPM": "RPM",
+                "Level": "Level",
+                "Alert": "Alert",
+                "Status": "Status",
+                "Selection": "Selection",
+                "Monitor": "Monitor",
                 "DeleteDevice": "Delete Device",
                 "ConfirmDeleteDevice": "Are you sure you want to delete this device? This action cannot be reversed",
                 "SuccessDeleteDevice": "Successfully deleted device",
@@ -453,6 +462,8 @@ i18n
                 "BEMAC": "BEMAC",
                 "HANASYS": "HANASYS",
                 "URLLink": "URLリンク",
+                "URL Link": "URLリンク",
+                "i-MTEC": "i-MTEC",
                 "ModelName": "機器名",
                 "SerialNumber": "シリアルナンバー",
                 "ManufacturerSite": "メーカーURL",
@@ -461,7 +472,7 @@ i18n
                 "SystemLink": "システムリンク",
                 "LinkedIoTDevices": "設定済みIoT",
                 "EditIoTTag": "IoTタグ編集",
-                "Power": "電力",
+                "Power": "発停",
                 "Temperature": "温度",
                 "Humidity": "湿度",
                 "Pressure": "圧力",
@@ -474,6 +485,14 @@ i18n
                 "Frequency": "周波数",
                 "Camera": "カメラ",
                 "Others": "その他",
+                "Outlet": "出力",
+                "Amp": "電流値",
+                "RPM": "回転数",
+                "Level": "レベル",
+                "Alert": "警報",
+                "Status": "状態",
+                "Selection": "選択",
+                "Monitor": "モニタ",
                 "DeleteDevice": "デバイス削除",
                 "ConfirmDeleteDevice": "この操作は元に戻せません。このデバイスを削除しますか?",
                 "SuccessDeleteDevice": "デバイスを削除しました",

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

@@ -44,7 +44,7 @@ export declare function getIotTagFormData(): {
     tag_type: TAG_TYPE;
 };
 export declare function initIoTLinkedSystemOptions(): void;
-export declare function selectIoTLinkedSystemOptions(): void;
+export declare function toggleIoTLinkedSystemOptions(): void;
 /**
  * Clears all Fields Input Fields including the Linked Devices Table
  *

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

@@ -41,11 +41,14 @@ export function renderTagIOTFormPane() {
       <div class="at_field at_flex_column">
 
         <label>${i18n.t('LinkedSystems')}</label>
-
-        <div id="at-iot-linked-system-listbox" class="at_listbox" data-cy="at-iot-linked-system-listbox">
-          <ul class="at_listbox_options" role="listbox" aria-label="Linked Systems">
-           
-          </ul>
+        <div id="at-iot-linked-system-dropdown" data-cy="at-iot-linked-system-dropdown">
+          <div id="at-iot-linked-system-filter-dropdown" class="at_dropdown at_flex at_flex_row at_space_between">    
+            <div class="at_dropdown_toggle" id="at-iot-selected-linked-system" data-cy="at-iot-selected-linked-system">${i18n.t('NoSelection')}</div>
+            <span class="mdi mdi-chevron-down at_chevron" id="at-iot-linked-system-filter-chevron" data-cy="at-iot-linked-system-filter-chevron"></span>
+          </div>
+          <div style="position:absolute;">
+            <div class="at_dropdown_options" id="at-iot-linked-system-options" data-cy="at-iot-linked-system-options"></div>
+          </div>
         </div>
 
         <label for="">${i18n.t('Category')}</label>
@@ -58,72 +61,65 @@ export function renderTagIOTFormPane() {
             <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" />
+          <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('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" />
+          <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('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" />
+          <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('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" />
+          <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('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" />
+          <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>
 
         <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>
+          <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('IoTDevices')}</label>
+          <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>
                     
               <div style="position:absolute;">
                 <div class="at_dropdown_options" id="at-iot-device-options" data-cy="at-iot-device-options">
 
+                </div>
               </div>
+            </div>
           </div>
-        </div>
-
-        <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_iot_list_container at_h-min-40" id="at-iot-device-list-container" data-cy="at-iot-device-list-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_title" style="padding-left: 20px !important;">
                 <div> </div>
                 <label for="">${i18n.t('LinkedIoTDevices')}</label>
                 <div> </div>
               </div>
-
               <div>
                 <div class="at_body at_linked_device_container" id="at-device-item-container">
                 </div>
               </div>
-
             </div>
-
+          </div>
         </div>
-
       </div>
     </div>
 
@@ -234,18 +230,22 @@ export function toggleIoTDevicesOptions() {
 export function setSelectedIoTSystem(payload) {
     log.info('setSelectedIoTSystem()', payload);
     selectedIoTSystem = payload;
-    const options = document.querySelectorAll('.at_listbox_option');
-    options.forEach(option => {
-        log.info("option.getAttribute('data-value') == selectedIoTSystem", option.getAttribute('data-value'), selectedIoTSystem);
-        if (option.getAttribute('data-value') == selectedIoTSystem) {
-            log.info("selected");
-            option.classList.add('is-selected');
-        }
-        else {
-            log.info("unselected");
-            option.classList.remove('is-selected');
-        }
-    });
+    // Update dropdown toggle text
+    const selectedToggle = document.getElementById('at-iot-selected-linked-system');
+    if (selectedToggle) {
+        selectedToggle.textContent = payload ? i18n.t(payload) : i18n.t('NoSelection');
+    }
+    const linkedDeviceContainer = document.getElementById('at-iot-device-main-container');
+    const systemLinkContainer = document.getElementById('at-iot-system-link-container');
+    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
@@ -306,7 +306,7 @@ export function initIoTFormData(tagId) {
                     setSelectedIoTSystem(iotData.linked_system);
                 }
                 else {
-                    setSelectedIoTSystem(IOT_LINKED_SYSTEMS.BEMAC);
+                    setSelectedIoTSystem('');
                 }
                 if (iotData.iot_category) {
                     log.info('found cat 1: ', i18n.t(iotData.iot_category), iotData.iot_category, _tagIotCategoryTypes);
@@ -339,7 +339,7 @@ export function initIoTFormData(tagId) {
             else {
                 // this is due to selecting the tags created from James
                 log.info('initIoTFormData()', iotData);
-                setSelectedIoTSystem(IOT_LINKED_SYSTEMS.BEMAC);
+                setSelectedIoTSystem('');
                 setSelectedIoTCat({ uuid: generateUUID(), name: i18n.t('NoSelection') });
                 renderIotCategoryDropdownOptions('at-iot-category-options', _tagIotCategoryTypes);
                 renderIotDeviceDropdownOptions('at-iot-device-options', _tagIotDevices);
@@ -531,7 +531,7 @@ export function getIotTagFormData() {
         tagMf: iotMfrName.value,
         // tagCategoryId: selectedIoTCat.uuid,
         tagCategoryId: selectedIoTCat ? selectedIoTCat.name : undefined,
-        systemLink: selectedIoTSystem,
+        systemLink: iotSystemLink.value,
         linkedDevices: linkedDevicesArray,
         iotSystem: selectedIoTSystem,
         tag_type: TAG_TYPE.IOT
@@ -564,7 +564,7 @@ function renderDeviceRow(payload) {
 
       <div class="at_name">
         <div></div>
-        <label for="">${payload.name}</label>
+        <span for="">${payload.name}</span>
         <div></div>
       </div>
       <div class="at_subitem_right">
@@ -646,35 +646,58 @@ function deleteDeviceRow(deviceId) {
     }
 }
 export function initIoTLinkedSystemOptions() {
-    dispatchSpaceEvent(SPACE_EVENTS.GET_IOT_LINKED_SYSTEM_OPTIONS, { payload: 'hello from library' });
-    const listbox = document.querySelector('#at-iot-linked-system-listbox .at_listbox_options');
-    iotLinkedSystemOptions = _iotLinkedSyatemOptions;
-    log.info("_iotLinkedSyatemOptions", _iotLinkedSyatemOptions);
-    log.info("iotLinkedSystemOptions", iotLinkedSystemOptions);
-    listbox.innerHTML = iotLinkedSystemOptions
-        .map((option, index) => `
-      <li
-        class="at_listbox_option ${index === 0 ? 'is-selected' : ''}"
-        role="option"
-        data-value="${option}"
-        tabindex="0"
-      >
-        ${option}
-      </li>
-    `)
-        .join('');
+    const element = document.getElementById('at-iot-linked-system-options');
+    if (!element) {
+        console.error('Linked system options container not found');
+        return;
+    }
+    // Clear previous options
+    element.innerHTML = ``;
+    const selectedToggle = document.getElementById('at-iot-selected-linked-system');
+    if (selectedToggle) {
+        selectedToggle.textContent = i18n.t('NoSelection');
+    }
+    /* ---------- NO SELECTION OPTION ---------- */
+    const noSelection = document.createElement('div');
+    noSelection.classList.add('at_option');
+    noSelection.setAttribute('dropdown-type', 'iot-linkedsystem');
+    noSelection.setAttribute('data-value', '');
+    noSelection.innerHTML = `
+    <span class="mdi mdi-circle-slice-1"></span>
+    ${i18n.t('NoSelection')}
+  `;
+    noSelection.onclick = () => {
+        if (selectedToggle) {
+            setSelectedIoTSystem('');
+        }
+    };
+    element.appendChild(noSelection);
+    /* ---------- LINKED SYSTEM OPTIONS ---------- */
+    if (!_iotLinkedSyatemOptions || _iotLinkedSyatemOptions.length === 0) {
+        console.log('No linked systems to render');
+        return;
+    }
+    _iotLinkedSyatemOptions.forEach((option) => {
+        const opt = document.createElement('div');
+        opt.classList.add('at_option');
+        opt.setAttribute('dropdown-type', 'iot-linkedsystem');
+        opt.setAttribute('data-value', option);
+        opt.textContent = i18n.t(option);
+        opt.onclick = () => {
+            if (selectedToggle) {
+                setSelectedIoTSystem(option);
+                selectedIoTSystem = option;
+            }
+        };
+        element.appendChild(opt);
+    });
 }
-export function selectIoTLinkedSystemOptions() {
-    log.info("selectIoTLinkedSystemOptions");
-    const options = document.querySelectorAll('.at_listbox_option');
-    options.forEach(option => {
-        option.addEventListener('click', () => {
-            log.info("option", option);
-            options.forEach(o => o.classList.remove('is-selected'));
-            option.classList.add('is-selected');
-            selectedIoTSystem = option.getAttribute('data-value');
-            log.info("selectedLinkedSystem", selectedIoTSystem);
-        });
+export function toggleIoTLinkedSystemOptions() {
+    log.info('toggleIoTCategoryOptions');
+    const linkedSystemDropdown = document.getElementById('at-iot-linked-system-dropdown');
+    const linkedSystemOptions = document.getElementById('at-iot-linked-system-options');
+    linkedSystemDropdown.addEventListener('click', () => {
+        linkedSystemOptions.classList.toggle('open');
     });
 }
 /**
@@ -697,7 +720,7 @@ export function clearIotFields() {
     linkedDevicesArray = [];
     selectedIoTSystem = '';
     selectedIoTCat = undefined;
-    setSelectedIoTSystem(IOT_LINKED_SYSTEMS.BEMAC);
+    setSelectedIoTSystem('');
     deviceContainer.innerHTML = '';
     iotTagFormMode = "ADD" /* FORM_MODE.ADD */;
     selectedIotTag = undefined;

package/lib/atwinui/events.js

@@ -37,7 +37,7 @@ import { PipeList } from "./components/toolbar/pipeListPane";
 import { PipeForm } from "./components/toolbar/pipeFormPane";
 // import { EditPipeForm, initPipeFormPane, pipeFormData, setPipeFormMode } from "./components/toolbar/pipeFormPane";
 // import { initPipeData } from "./components/toolbar/addPipePane";
-import { toggleIoTCategoryOptions, toggleIoTDevicesOptions, clearIoTDropdowns, initIoTFormData, setIotCategoryOptions, getIotTagFormData, iotTagFormMode, selectedIotTag, clearIotFields, getIotCategoryOption, selectIoTLinkedSystemOptions, initIoTLinkedSystemOptions } from './components/toolbar/tagIotFormPane';
+import { toggleIoTCategoryOptions, toggleIoTDevicesOptions, clearIoTDropdowns, initIoTFormData, setIotCategoryOptions, getIotTagFormData, iotTagFormMode, selectedIotTag, clearIotFields, getIotCategoryOption, initIoTLinkedSystemOptions, toggleIoTLinkedSystemOptions } from './components/toolbar/tagIotFormPane';
 import { getTheseTagMessages, timedoutComment, unsendComment } from "./components/toolbar/tagMessagingPane";
 import { handleScreenShareResponsiveChanges, handleScreenShareAcceptRequest, handleScreenShareBackUserListPane, handleScreenShareEndSessionEvent, handleScreenShareUsersUpdated, renderScreenShareLeaveConfirmationModal } from "./components/toolbar/screenSharePane";
 const pipeList = new PipeList();
@@ -1330,13 +1330,13 @@ function handleModelVisibility(objId) {
                 //@ts-ignore
                 if (target.component.mesh.visible) {
                     setModelVisibility(targetId, false);
-                    setVisibilityBtn.classList.remove('mdi-eye-off');
-                    setVisibilityBtn.classList.add('mdi-eye');
+                    setVisibilityBtn.classList.add('mdi-eye-off');
+                    setVisibilityBtn.classList.remove('mdi-eye');
                 }
                 else {
                     setModelVisibility(targetId, true);
-                    setVisibilityBtn.classList.remove('mdi-eye');
-                    setVisibilityBtn.classList.add('mdi-eye-off');
+                    setVisibilityBtn.classList.add('mdi-eye');
+                    setVisibilityBtn.classList.remove('mdi-eye-off');
                 }
                 yield goToModel(targetId);
             }
@@ -3445,13 +3445,13 @@ function handleCloseActiveMinimap() {
 }
 function handleIoTOptions() {
     const iotCateogryDropdown = document.getElementById('at-iot-cat-filter-dropdown');
-    const iotLinkedSystemListbox = document.getElementById('at-iot-linked-system-listbox');
+    const iotLinkedSystemDropdown = document.getElementById('at-iot-linked-system-dropdown');
     if (iotCateogryDropdown) {
         toggleIoTCategoryOptions();
     }
-    if (iotLinkedSystemListbox) {
+    if (iotLinkedSystemDropdown) {
         initIoTLinkedSystemOptions();
-        selectIoTLinkedSystemOptions();
+        toggleIoTLinkedSystemOptions();
     }
 }
 function handleIoTDeviceDropdown() {

package/lib/types.d.ts

@@ -1454,7 +1454,7 @@ export declare enum MAP_OPTIONS {
 export declare enum IOT_LINKED_SYSTEMS {
     BEMAC = "BEMAC",
     HANASYS = "HANASYS",
-    URL_LINK = "URLLink",
+    URL_LINK = "URL Link",
     I_MTEC = "i-MTEC"
 }
 export interface ITagIOTCategory {

package/lib/types.js

@@ -198,7 +198,7 @@ export var IOT_LINKED_SYSTEMS;
 (function (IOT_LINKED_SYSTEMS) {
     IOT_LINKED_SYSTEMS["BEMAC"] = "BEMAC";
     IOT_LINKED_SYSTEMS["HANASYS"] = "HANASYS";
-    IOT_LINKED_SYSTEMS["URL_LINK"] = "URLLink";
+    IOT_LINKED_SYSTEMS["URL_LINK"] = "URL Link";
     IOT_LINKED_SYSTEMS["I_MTEC"] = "i-MTEC";
 })(IOT_LINKED_SYSTEMS || (IOT_LINKED_SYSTEMS = {}));
 export var TAG_TYPE;

package/package.json

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

package/static/atwinui.css

@@ -2980,4 +2980,11 @@ span.at_partition_name_text.toggle.selectable.selected {
 
 .at_linked_systems_options_contianer input {
     cursor: pointer;
+}
+
+.at_name span {
+  flex: 1;
+  min-width: 0;
+  white-space: normal !important;
+  word-break: break-all !important;
 }