architwin 1.12.5 → 1.13.1

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

@@ -0,0 +1,391 @@
+import { IOT_LINKED_SYSTEMS, SPACE_EVENTS } from '../../../types';
+import log from 'loglevel';
+import i18n from './i18n';
+import { dispatchSpaceEvent, _tagIotCategoryTypes, _tagIotDevices } from '../../../architwin';
+import { stringContains } from "../../../utils";
+import { batchAddEventListenerByClassName } from '../../events';
+let selectedIoTCatOption;
+let selectedIoTDeviceOption;
+export let iotTagFormMode = "ADD" /* FORM_MODE.ADD */;
+let tagIotName, iotModelName, iotSerialName, iotMfrName, iotSystemLink;
+let selectedIoTCatId;
+let linkedDevicesArray = [];
+export function renderTagIOTForm() {
+    const element = document.createElement('div');
+    element.classList.add('at_container');
+    element.classList.add('at_w-12');
+    element.classList.add('at_h-full');
+    element.setAttribute('id', 'at-tag-iot-form-pane');
+    element.setAttribute('data-cy', 'at-tag-iot-form-pane');
+    element.innerHTML = `
+    <div class="at_panel_header">
+      <span>${i18n.t('Add IOT Tag')}</span>
+    </div>
+
+    <div class="at_form_container at_scrollable_container at_h-min-70">
+      <label for="">${i18n.t('Linked Systems')}</label>
+        <div class="at_gap_2" style="display: inline-flex">
+          <label class="at_flex at_align_center at_text_xs at_gap_1">
+            <input type="radio" id="at-linked-radio-bemac" name="iot-link-system" checked value=${IOT_LINKED_SYSTEMS.BEMAC} selected />
+              ${i18n.t("BEMAC")}
+          </label>
+          <label class="at_flex at_align_center at_text_xs at_gap_1">
+            <input type="radio" id="at-linked-radio-hanasys" name="iot-link-system" value=${IOT_LINKED_SYSTEMS.HANASYS} />
+              ${i18n.t("HANASYS")}
+          </label>
+          <label class="at_flex at_align_center at_text_xs at_gap_1">
+            <input type="radio" id="at-linked-radio-link" name="iot-link-system" value=${IOT_LINKED_SYSTEMS.URL_LINK} />
+              ${i18n.t("URL Link")}
+          </label>
+        </div>
+
+        <div class="at_field at_flex_column">
+         <label for="">${i18n.t('Category')}</label>
+          <div id="at-iot-category-dropdown" data-cy="at-iot-category-dropdown">
+            <div id="at-iot-cat-filter-dropdown" class="at_dropdown at_flex at_flex_row at_space_between">    
+              <div class="at_dropdown_toggle" id="at-iot-selected-cat" data-cy="at-iot-selected-cat">${i18n.t(selectedIoTCatOption)}</div>
+                  <span class="mdi mdi-chevron-down at_chevron" id="at-iot-cat-filter-chevron" data-cy="at-iot-cat-filter-chevron"></span>
+              </div>
+                    
+              <div style="position:absolute;">
+                <div class="at_dropdown_options" id="at-iot-category-options" data-cy="at-iot-category-options">
+
+                </div>
+              </div>
+
+            </div>
+          </div>
+
+        <div class="at-field at_flex_row at_justify_between">
+            <label for="">${i18n.t('TagName')}</label>
+            <input class="at_field_input at_w-full" type="text" name="tag_name" id="at-iot-name-input" data-cy="at-iot-name-input" placeholder="Sample..." />
+        </div>
+
+        <div class="at-field at_flex_row at_justify_between">
+            <label for="">${i18n.t('Model Name')}</label>
+            <input class="at_field_input at_w-full" type="text" name="model_name" id="at-iot-model-input" data-cy="at-iot-model-input" placeholder="Sample..." />
+        </div>
+
+        <div class="at-field at_flex_row at_justify_between">
+            <label for="">${i18n.t('Serial Number')}</label>
+            <input class="at_field_input at_w-full" type="text" name="serial_name" id="at-iot-serial-input" data-cy="at-iot-serial-input" placeholder="Sample..." />
+        </div>
+
+        <div class="at-field at_flex_row at_justify_between">
+            <label for="">${i18n.t('Manufacturer Site')}</label>
+            <input class="at_field_input at_w-full" type="text" name="manufacturer_site" id="at-iot-manufacturer-input" data-cy="at-iot-manufacturer-input" placeholder="Sample..." />
+        </div>
+
+        <div class="at-field at_flex_row at_justify_between" id="at-iot-system-link-container">
+            <label for="">${i18n.t('System Link')}</label>
+            <input class="at_field_input at_w-full" type="text" name="system_link" id="at-iot-system-link-input" data-cy="at-iot-system-link-input" placeholder="Sample..." />
+        </div>
+
+        <div class="at_button at_ghost" id="at-iot-move-btn" data-cy="at-iot-move-btn" style="top: 4px !important">
+            <label for="" style="bottom: 10px !important" class="at_comment_unsend_container">${i18n.t('MoveTag')}</label>
+            <span class="mdi mdi-map-marker at_icon" style="bottom: 9px !important"></span>
+        </div>
+
+        <div class="at_field at_flex_column" id="at-iot-device-main-container">
+         <label for="">${i18n.t('IoT Devices')}</label>
+          <div id="at-iot-devices-dropdown" data-cy="at-iot-devices-dropdown">
+            <div id="at-setting-map-filter-dropdown" class="at_dropdown at_flex at_flex_row at_space_between">    
+              <div class="at_dropdown_toggle" id="at-iot-selected-device" data-cy="at-iot-selected-device">${i18n.t(selectedIoTDeviceOption)}</div>
+                <span class="mdi mdi-chevron-down at_chevron" id="at-iot-cat-filter-chevron" data-cy="at-iot-cat-filter-chevron"></span>
+              </div>
+                    
+              <div style="position:absolute;">
+                <div class="at_dropdown_options" id="at-iot-device-options" data-cy="at-iot-device-options">
+
+              </div>
+          </div>
+        </div>
+
+        <div class="at_partition_list_container at_h-min-40" id="at-iot-device-list-container" data-cy="at-iot-device-list-container">
+
+            <div class="at_partition_item_container at_scrollable_container" id="at-linked-device-container" data-cy="at-linked-device-container">
+            
+              <div class="at_partition_title" id="at-iot-linked-devices">
+                <div> </div>
+                <label for="">${i18n.t('Linked to Devices')}</label>
+                <div> </div>
+              </div> 
+
+            </div>
+
+        </div>
+
+      </div>
+    </div>
+
+    <div class="at_button_row at_justify_between">
+      <div class="at_button at_ghost" style="margin-top: auto;"  id="at-cancel-iot-tag-form-btn" data-cy="at-cancel-iot-tag-form-btn" target-pane="at-tag-list-pane">
+          <label for="" id="at-cancel-tag-form-btn">${i18n.t('Cancel')}</label>
+      </div>
+
+      <div class="at_button at_ghost" id="at-save-iot-btn" data-cy="at-save-iot-btn">
+          <label for="">${i18n.t('Save')}</label>
+      </div>
+    </div>
+    `;
+    return element;
+}
+function setSelectedIoTCat(payload) {
+    log.info('setSelectedIoTCat()', payload);
+    const selectedOption = document.getElementById('at-iot-selected-cat');
+    selectedOption.innerText = payload;
+}
+function setSelectedIoTDevice(payload) {
+    log.info('setSelectedIoTDevice()', payload);
+    const selectedDevice = document.getElementById('at-iot-selected-device');
+    selectedDevice.innerText = payload;
+}
+function setInputFields() {
+    log.info('setInputFields()');
+    tagIotName = document.getElementById('at-iot-name-input');
+    iotModelName = document.getElementById('at-iot-model-input');
+    iotSerialName = document.getElementById('at-iot-serial-input');
+    iotMfrName = document.getElementById('at-iot-manufacturer-input');
+    iotSystemLink = document.getElementById('at-iot-system-link-input');
+}
+export function setIotCategoryOptions() {
+    log.info('setIotCategoryOptions()');
+    dispatchSpaceEvent(SPACE_EVENTS.GET_IOT_CATEGORIES, { payload: 'hello from library' });
+    renderIotCategoryDropdownOptions('at-iot-category-options', _tagIotCategoryTypes);
+    batchAddEventListenerByClassName('at_iot_cat_option', (event) => {
+        //@ts-ignore
+        const selectedCat = event.target;
+        const dataCy = selectedCat.getAttribute('data-cy');
+        const match = dataCy.match(/^at-iot-category-option-(.+)$/);
+        const selectedId = match ? match[1] : null;
+        selectedIoTCatId = selectedId.toString();
+        setSelectedIoTCat(selectedCat.innerText);
+        log.info('cat id: ', selectedIoTCatId);
+    });
+}
+export function toggleIoTCategoryOptions() {
+    log.info('toggleIoTCategoryOptions');
+    const catDropdown = document.getElementById('at-iot-category-dropdown');
+    const catOptions = document.getElementById('at-iot-category-options');
+    catDropdown.addEventListener('click', () => {
+        catOptions.classList.toggle('open');
+    });
+}
+export function toggleIoTDevicesOptions() {
+    log.info('toggleIoTDevicesOptions()');
+    const devicesDropdown = document.getElementById('at-iot-devices-dropdown');
+    const deviceOptions = document.getElementById('at-iot-device-options');
+    devicesDropdown.addEventListener('click', () => {
+        deviceOptions.classList.toggle('open');
+    });
+}
+export function setSelectedIoTSystemRadio(payload) {
+    log.info('setSelectedIoTSystemRadio()', payload);
+    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';
+    }
+}
+export function clearIoTDropdowns() {
+    log.info('clearIoTDropdowns()');
+    const catDropdown = document.getElementById('at-iot-selected-cat');
+    const devicesDropdown = document.getElementById('at-iot-selected-device');
+    catDropdown.innerText = 'No Selection';
+    devicesDropdown.innerText = 'Select Device';
+}
+// Initializes Form Data, but current this is only Add Mode
+export function initIoTFormData() {
+    log.info('initIoTFormData()');
+    // Add Mode
+    iotTagFormMode = "ADD" /* FORM_MODE.ADD */;
+    log.info('initIoTFormData() Mode: ', iotTagFormMode);
+    if (tagIotName === null || tagIotName == undefined) {
+        log.info('initIoTFormData() tagname check', tagIotName);
+        setInputFields();
+    }
+    tagIotName.value = '';
+    iotModelName.value = '';
+    iotSerialName.value = '';
+    iotMfrName.value = '';
+    iotSystemLink.value = '';
+}
+export function renderIotCategoryDropdownOptions(elementId, items) {
+    const element = document.getElementById(elementId);
+    if (!element) {
+        console.error("Parameter element is undefined");
+        return;
+    }
+    if (!items) {
+        console.error("Parameter items is undefined");
+        return;
+    }
+    const isFilterDropdown = stringContains(elementId, 'filter');
+    //Clear previosly appended children
+    element.innerHTML = ``;
+    const selectedIotCategoryOption = document.getElementById(isFilterDropdown ? 'at-iot-category-filter-dropdown-toggle' : 'at-iot-category-dropdown-toggle');
+    if (selectedIotCategoryOption) {
+        selectedIotCategoryOption.textContent = `${i18n.t('NoSelection')}`;
+        selectedIoTCatOption = undefined;
+    }
+    //Add the no selection option
+    const noSelection = document.createElement('div');
+    noSelection.classList.add('at_option');
+    noSelection.setAttribute('iot-category-uuid', '');
+    noSelection.setAttribute('dropdown-type', 'iotcategory');
+    noSelection.innerHTML = `
+        <span class="mdi mdi-circle-slice-1"></span> ${i18n.t('NoSelection')}
+    `;
+    noSelection.onclick = () => {
+        selectCatOption(noSelection, isFilterDropdown ? 'at-iot-category-filter-dropdown-toggle' : 'at-iot-category-filter-dropdown-toggle');
+    };
+    element.appendChild(noSelection);
+    if (items.length <= 0) {
+        console.log("No items to render");
+        return;
+    }
+    items.forEach(item => {
+        const option = createCatOptionElement(item, 'iotcategory');
+        element.appendChild(option);
+    });
+}
+function createCatOptionElement(item, dropdownType) {
+    console.log("createCatOptionElement()");
+    const option = document.createElement('div');
+    option.style.display = 'flex';
+    option.style.flexDirection = 'row';
+    option.style.justifyContent = 'left';
+    option.style.alignItems = 'center';
+    option.style.gap = '2px';
+    option.classList.add('at_option');
+    option.classList.add('at_iot_cat_option');
+    option.setAttribute('iot-category-uuid', item.uuid);
+    option.setAttribute('dropdown-type', dropdownType);
+    option.setAttribute('data-cy', `at-iot-category-option-${item.uuid}`);
+    if (dropdownType == 'category') {
+        option.innerHTML = `
+            <span class="at_colored-indicator"></span>
+            ${item.name}
+        `;
+        return option;
+    }
+    option.innerHTML = `
+    ${item.json_data.iconURL === 'button.png' || item.json_data.iconURL === undefined ? `
+        <img class="at_avatar_xs" style="display:inline-block" src="https://cdn.jsdelivr.net/npm/architwin@latest/static/images/button.png"/>
+        ` : `
+        <img class="at_avatar_xs" style="display:inline-block" src="${item.json_data.iconURL}"/>
+    `}
+    ${item.name}`;
+    return option;
+}
+function selectCatOption(option, elementId) {
+    log.info('selectCatOption()', option, elementId);
+}
+export function setIotDeviceOptions() {
+    log.info('setIotDeviceOptions()');
+    dispatchSpaceEvent(SPACE_EVENTS.GET_IOT_DEVICES, { payload: 'hello from library' });
+    renderIotDeviceDropdownOptions('at-iot-device-options', _tagIotDevices);
+    batchAddEventListenerByClassName('at_iot_dev_option', (event) => {
+        //@ts-ignore
+        const selectedDev = event.target;
+        setSelectedIoTDevice(selectedDev.innerText);
+    });
+}
+export function renderIotDeviceDropdownOptions(elementId, items) {
+    const element = document.getElementById(elementId);
+    if (!element) {
+        console.error("Parameter element is undefined");
+        return;
+    }
+    if (!items) {
+        console.error("Parameter items is undefined");
+        return;
+    }
+    const isFilterDropdown = stringContains(elementId, 'filter');
+    //Clear previosly appended children
+    element.innerHTML = ``;
+    const selectedIotDeviceOption = document.getElementById(isFilterDropdown ? 'at-iot-device-filter-dropdown-toggle' : 'at-iot-device-dropdown-toggle');
+    if (selectedIotDeviceOption) {
+        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.setAttribute('iot-device-uuid', '');
+    selectDevice.setAttribute('dropdown-type', 'iotdevice');
+    selectDevice.innerHTML = `
+        <span></span> ${i18n.t('SelectDevice')}
+    `;
+    selectDevice.onclick = () => {
+        log.info('@caroline onClick');
+        selectDeviceOption(selectDevice, isFilterDropdown ? 'at-iot-device-filter-dropdown-toggle' : 'at-iot-device-filter-dropdown-toggle');
+    };
+    element.appendChild(selectDevice);
+    if (items.length <= 0) {
+        console.log("No items to render");
+        return;
+    }
+    items.forEach(item => {
+        const option = createDeviceOptionElement(item, 'iotdevice');
+        element.appendChild(option);
+    });
+}
+function selectDeviceOption(option, elementId) {
+    log.info('@caroline selectDeviceOption()', option, elementId);
+}
+function createDeviceOptionElement(item, dropdownType) {
+    console.log("createDeviceOptionElement()", item, dropdownType);
+    const option = document.createElement('div');
+    option.style.display = 'flex';
+    option.style.flexDirection = 'row';
+    option.style.justifyContent = 'left';
+    option.style.alignItems = 'center';
+    option.style.gap = '2px';
+    option.classList.add('at_option');
+    option.classList.add('at_iot_dev_option');
+    option.setAttribute('iot-category-uuid', item.uuid);
+    option.setAttribute('dropdown-type', dropdownType);
+    option.setAttribute('data-cy', `at-iot-category-option-${item.uuid}`);
+    if (dropdownType == 'category') {
+        option.innerHTML = `
+            <span class="at_colored-indicator"></span>
+            ${item.name}
+        `;
+        return option;
+    }
+    option.innerHTML = `
+    <span>${item.name}</span>
+      `;
+    return option;
+}
+export function getIotTagFormData() {
+    if (!tagIotName) {
+        setInputFields();
+    }
+    const formData = {
+        tagName: tagIotName.value,
+        modelName: iotModelName.value,
+        serialName: iotSerialName.value,
+        tagMf: iotMfrName.value,
+        tagCategoryId: selectedIoTCatId,
+        systemLink: iotSystemLink.value
+    };
+    return formData;
+}
+// function renderLinkedDevices(payload) {
+//   log.info('displayLinkedDevices()', payload)
+//   return `
+//   <li class="at_room_tree_child">
+//     <div id="at-linked-device-${payload.uuid}" class="at_flex at_space_between">
+//       <span id="at-linked-device-${payload.uuid}"> ${i18n.t(`${payload.name}`)} </span>
+//     </div>
+//   </li>
+//   `
+// }

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

@@ -0,0 +1,62 @@
+import { FORM_MODE, ITagIOTCategory, TAG_TYPE, DeviceInfo } from '../../../types';
+export declare let iotTagFormMode: FORM_MODE;
+export declare let selectedIoTSystem: string;
+export declare let selectedIotTag: any;
+export declare function renderTagIOTFormPane(): HTMLDivElement;
+export declare function setIotCategoryOptions(): void;
+export declare function toggleIoTCategoryOptions(): void;
+export declare function toggleIoTDevicesOptions(): void;
+/**
+ * Sets Radio Button of the IoT's the Linked System
+ *
+ */
+export declare function setSelectedIoTSystemRadio(payload: string): void;
+/**
+ * Clears dropdowns for both Category and Devices
+ *
+ */
+export declare function clearIoTDropdowns(): void;
+/**
+ * Initializes Form Data
+ * for both Add and Edit Modes
+ *
+ */
+export declare function initIoTFormData(tagId?: string): void;
+export declare function renderIotCategoryDropdownOptions(elementId: string, items: Array<ITagIOTCategory>): void;
+export declare function setIotDeviceOptions(): void;
+export declare function renderIotDeviceDropdownOptions(elementId: string, items: Array<DeviceInfo>): void;
+/**
+ * Gets IoT TagData and used in events.ts
+ *
+ *
+ *
+ */
+export declare function getIotTagFormData(): {
+    name: string;
+    modelName: string;
+    serialNumber: string;
+    tagMf: string;
+    tagCategoryId: string;
+    systemLink?: string;
+    linkedDevices?: DeviceInfo[];
+    iotSystem: string;
+    tag_type: TAG_TYPE;
+};
+/**
+ * Clears all Fields Input Fields including the Linked Devices Table
+ *
+ */
+export declare function clearIotFields(): void;
+/**
+ * Sets the form mode for the IOT form.
+ * - The form mode can be one of the predefined FORM_MODE values (e.g., ADD, EDIT, etc.).
+ *
+ * @param {FORM_MODE} formType - The type of form mode to set.
+ */
+export declare function setIoTFormMode(formType: FORM_MODE): void;
+/**
+ * Gets the current form mode for the IOT form.
+ *
+ * @returns {FORM_MODE} - The current form mode.
+ */
+export declare function getPartitionFormMode(): FORM_MODE;