architwin 1.13.2 → 1.13.3

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

@@ -37,7 +37,7 @@ export class PipeList {
         </div>
         <div class="at_form_container ">
             <div class="at_field at_flex_column" style="${_pipeCategories ? '' : 'display: none;'}">
-                <label for="">${i18n.t('Category')}</label>
+                <label for="">${i18n.t('SelectPipeType')}</label>
                 <div  id="at-custom-pipe-category-dropdown" data-cy="at-custom-pipe-category-dropdown">
                     <div id="at-pipe-category-dropdown" class="at_dropdown at_flex at_flex_row at_space_between">    
                         <div class="at_dropdown_toggle" id="at-pipe-category-dropdown-toggle" data-cy="at-pipe-category-dropdown-toggle">${i18n.t('NoSelection')}</div>

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

@@ -0,0 +1,18 @@
+import { ScreenShareRequest, ScreenShareSessionUser, ScreenShareUser } from '../../../types';
+export declare function renderScreenSharePane(): HTMLElement;
+export declare function renderUsersList(users: ScreenShareUser[]): void;
+export declare function renderOnlineUserRow(user: ScreenShareUser): HTMLTableRowElement;
+export declare function renderOfflineUserRow(user: ScreenShareUser): HTMLTableRowElement;
+export declare function handleClickEventUserRow(): void;
+export declare function renderSharingSpaceDetail(user: ScreenShareSessionUser): void;
+export declare function handleClickEventBackToUserListLink(): void;
+export declare function renderScreenShareRequestModal(request: ScreenShareRequest): void;
+export declare function handleInputEventSelectPointerSettings(): void;
+export declare function handleClickEventEndSessionBtn(): void;
+export declare function handleScreenShareUsersUpdated(payload: {
+    screen_share_users: ScreenShareUser[];
+    space_data: Record<string, any>;
+}): void;
+export declare function handleScreenShareEndSessionEvent(): void;
+export declare function handleScreenShareBackUserListPane(): void;
+export declare function handleScreenShareAcceptRequest(payload: ScreenShareRequest): void;

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

@@ -0,0 +1,362 @@
+import { _currentSpace, dispatchSpaceEvent } from '../../../architwin';
+import { SPACE_EVENTS } from '../../../types';
+import i18n from './i18n';
+let _spaceData = null;
+let _currentUser = { id: 'host_user', name: 'host_user', onlineStatus: 'online' };
+let _screenShareUsers = [];
+let _screenShareUser;
+let _screenShareSessionUsers = [];
+let _screenShareSessionUser;
+let _screenShareSession;
+let _screenShareUsersSortSettings = { onlineFirst: true };
+let _onDisplayComponent;
+export function renderScreenSharePane() {
+    const element = document.createElement('div');
+    element.classList.add('at_container', 'at_w-13', 'at_h-full');
+    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 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>
+                </div>
+                <div id="at-user-list-container" class="at_disable_hover_users_list at_scrollable_container">
+                    <table id="at-user-list-table">
+                    </table>
+                </div>
+                <button type="button" id="at-screen-share-end-session-btn" class="at_screen_share_end_session_btn"
+                style="display:none;">
+                    ${i18n.t('EndSession')}
+                </button>
+            </div>
+        </div>
+    `;
+    return element;
+}
+export function renderUsersList(users) {
+    _onDisplayComponent = 'USER_LIST';
+    _screenShareUsers = sortUsersByStatus(users);
+    const usersListContainer = document.getElementById("at-user-list-table");
+    if (!usersListContainer) {
+        console.error("usersListContainer does not exist in DOM");
+        return;
+    }
+    if (users.length <= 0) {
+        console.log("No tags to load");
+        usersListContainer.innerHTML = ``;
+        return;
+    }
+    usersListContainer.innerHTML = '';
+    users.forEach(user => {
+        const row = user.onlineStatus !== 'offline' ? renderOnlineUserRow(user) : renderOfflineUserRow(user);
+        usersListContainer.appendChild(row);
+    });
+    handleClickEventUserRow();
+    handleClickEventEndSessionBtn();
+}
+export function renderOnlineUserRow(user) {
+    const element = document.createElement("tr");
+    element.setAttribute('id', `at-user-row-${user.id}`);
+    element.dataset.id = user.id;
+    element.classList.add(...['at_online_user_row', 'at_flex', 'at_items_center', 'at_justify_between']);
+    const iconOrSharingText = user.onlineStatus === 'in_session'
+        ? `
+        <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">
+                <div class="at_users_online_indicator"></div>
+                <span class="at_no_hover_text_online_user at_font_size_14px">${user.name}</span>
+            </div>
+        </td>
+        <td>
+            ${iconOrSharingText}
+        </td>
+    `;
+    return element;
+}
+export function renderOfflineUserRow(user) {
+    const element = document.createElement("tr");
+    element.setAttribute('id', `at-user-row-${user.id}`);
+    element.dataset.id = user.id;
+    element.classList.add(...['at_offline_user_row', 'at_flex', 'at_items_center', 'at_justify_between']);
+    element.innerHTML = `
+        <td id="at_user_row_${user.id}">
+            <div class="at_flex at_flex_row at_items_center">
+                <div class="at_users_ofline_indicator"></div>
+                <span class="at_no_hover_text_offline_user at_font_size_14px at_offline_user_name_text">${user.name}</span>
+            </div>
+        </td>
+    `;
+    return element;
+}
+export function handleClickEventUserRow() {
+    const table = document.getElementById('at-user-list-table');
+    if (table) {
+        table.addEventListener('click', (event) => {
+            const target = event.target;
+            const row = target.closest('tr');
+            if (row && table.contains(row)) {
+                const id = row.dataset.id;
+                const user = _screenShareUsers.find(u => u.id === id);
+                _screenShareUser = user;
+                if (user.onlineStatus === 'offline')
+                    return;
+                if (user.onlineStatus === 'in_session') {
+                    const usersPaneContent = document.getElementById('at-screen-share-pane-content');
+                    usersPaneContent.innerHTML = '';
+                    const sessionUser = {
+                        id: user.id,
+                        name: user.name,
+                        role: 'guest',
+                        session: _screenShareSession
+                    };
+                    renderSharingSpaceDetail(sessionUser);
+                }
+                else {
+                    const nowEpochSeconds = Math.floor(Date.now() / 1000);
+                    const screenShareInvitation = {
+                        user: user,
+                        requestBy: _currentUser,
+                        requestedAt: nowEpochSeconds,
+                        status: 'pending'
+                    };
+                    dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_REQUEST, screenShareInvitation);
+                    // renderScreenShareRequestModal(screenShareInvitation) // moved it to front end
+                }
+            }
+        });
+    }
+}
+export function renderSharingSpaceDetail(user) {
+    console.log('*** _screenShareSession: ', _screenShareSession);
+    _onDisplayComponent = 'SPACE_SHARING_DETAILS';
+    _screenShareSessionUser = user;
+    const usersPaneContent = document.getElementById('at-screen-share-pane-content');
+    const element = document.createElement('div');
+    element.setAttribute('id', 'at-sharing-space-details');
+    element.innerHTML = `
+        <div class="at_flex at_justify_start">
+            <span class="at_bolder at_text_base at_capitalize">${i18n.t('SharingSpace')}</span>
+        </div>
+        <div class="at_flex at_flex_column at_gap_half_rem">
+            <div class="at_screen_share_guest_card at_flex at_flex_row at_justify_between at_items_center">
+                <div class="at_flex at_flex_column at_justify_start">
+                    <p class="at_bolder at_text_base">${user.name}</p>
+                    <span class="at_subtitle_text">Your are sharing <span class="at_bolder">${_currentSpace === null || _currentSpace === void 0 ? void 0 : _currentSpace.name}</span> to this person</span>
+                </div>
+                <div class="at_users_online_indicator"></div>
+            </div>
+            <div class="at_bolder at_text_base">Pointer</div>
+            <div class="at_flex at_flex_column at_justify_start">
+                <div class="at_screen_share_pointer_choices">
+                    <select id="at_select_screen_share_pointer" name="at_screen_share_pointer">
+                        <option value="on" ${(_screenShareSession === null || _screenShareSession === void 0 ? void 0 : _screenShareSession.isPointerEnabled) ? 'selected' : ''}>${i18n.t('On')}</option>
+                        <option value="off" ${!(_screenShareSession === null || _screenShareSession === void 0 ? void 0 : _screenShareSession.isPointerEnabled) ? 'selected' : ''}>${i18n.t('Off')}</option>
+                    </select>
+                </div>
+            </div>
+            <div class="at_flex at_flex_column at_justify_center at_items_center">
+                <div id="at-back-user-list-link" class="at_back_user_list_link">
+                    <span class="mdi mdi-arrow-left"></span>
+                    <p> ${i18n.t('BackToUserList')}</p>
+                </div>
+                <button type="button" id="at-screen-share-end-session-btn" class="at_screen_share_end_session_btn">
+                    ${i18n.t('EndSession')}
+                </button>
+            </div>
+        </div>
+    `;
+    usersPaneContent.appendChild(element);
+    handleClickEventBackToUserListLink();
+    handleInputEventSelectPointerSettings();
+    handleClickEventEndSessionBtn();
+}
+export function handleClickEventBackToUserListLink() {
+    const link = document.getElementById('at-back-user-list-link');
+    if (link) {
+        link.addEventListener('click', () => {
+            recreateUserListContainer();
+            renderUsersList(_screenShareUsers);
+        });
+    }
+}
+function recreateUserListContainer() {
+    _onDisplayComponent = 'USER_LIST';
+    const usersPaneContent = document.getElementById('at-screen-share-pane-content');
+    usersPaneContent.innerHTML = '';
+    usersPaneContent.classList.add('at_form_container');
+    const endSessionBtnVisibility = _screenShareSession ? 'block' : 'none';
+    usersPaneContent.innerHTML = `
+        <div class="at_flex at_justify_start">
+            <span class="at_bolder at_text_base">${i18n.t('Users')}</span>
+        </div>
+        <div id="at-user-list-container" class="at_disable_hover_users_list at_scrollable_container">
+            <table id="at-user-list-table">
+            </table>
+        </div>
+        <button type="button" id="at-screen-share-end-session-btn" class="at_screen_share_end_session_btn"
+        style="display:${endSessionBtnVisibility};">
+            ${i18n.t('End Session')}
+        </button>
+    `;
+}
+export function renderScreenShareRequestModal(request) {
+    _onDisplayComponent = 'SCREEN_SHARE_REQUEST_MODAL';
+    const element = document.createElement('dialog');
+    element.setAttribute('id', 'at-screen-share-request-modal');
+    element.classList.add('at_screen_share_request_modal');
+    element.innerHTML = `
+        <div class="at_screen_share_request_modal_content at_flex at_flex_column at_justify_center at_items_center">
+            <div class="at_screen_share_icon mdi mdi-monitor-multiple"></div>
+            <h1 class="at_screen_share_request_message">${i18n.t('ScreenShareRequestModalMessage')}</h1>
+            <p class="at_screen_share_request_sub_message"> ${i18n.t('ScreenShareRequestModalSubMessage')} <strong>${request.user.name}</strong></p>
+            <button type="button" id="at-screen-share-request-btn"  class="at_screen_share_cancel_request_btn">${i18n.t('CancelRequest')}</button>
+        </div>
+    `;
+    // disabled modal dismiss via Esc key
+    function blockEscapeKey(e) {
+        if (e.key === 'Escape' && element.open) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+    element.addEventListener('keydown', blockEscapeKey);
+    element.addEventListener('cancel', (event) => {
+        event.preventDefault();
+    });
+    handleScreenShareCancelRequest(element, request);
+    document.body.appendChild(element);
+    element.showModal();
+}
+function handleScreenShareCancelRequest(dialogElement, request) {
+    var _a;
+    if (dialogElement) {
+        (_a = dialogElement.querySelector('#at-screen-share-request-btn')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
+            const cancelRequest = Object.assign(Object.assign({}, request), { status: 'canceled' });
+            dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_CANCEL_REQUEST, cancelRequest);
+            dialogElement.close();
+            dialogElement.remove();
+            _onDisplayComponent = 'USER_LIST';
+        });
+    }
+}
+export function handleInputEventSelectPointerSettings() {
+    const select = document.getElementById('at_select_screen_share_pointer');
+    if (select) {
+        select.addEventListener('input', (event) => {
+            const target = event.target;
+            const isPointerEnabled = target.value === 'on';
+            _screenShareSession = Object.assign(Object.assign({}, _screenShareSession), { isPointerEnabled });
+            dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_POINTER_UPDATE, _screenShareSession);
+        });
+    }
+}
+export function handleClickEventEndSessionBtn() {
+    const button = document.getElementById('at-screen-share-end-session-btn');
+    if (button) {
+        button.addEventListener('click', () => {
+            // internal logic end session
+            removeScreenShareSessionData();
+            recreateUserListContainer();
+            renderUsersList(_screenShareUsers);
+            dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_END_SESSION, handleScreenShareEndSessionEvent);
+        });
+    }
+}
+export function handleScreenShareUsersUpdated(payload) {
+    _spaceData = payload.space_data;
+    renderUsersList(payload.screen_share_users);
+}
+export function handleScreenShareEndSessionEvent() {
+    _screenShareSessionUsers = [];
+    _screenShareSession = {};
+    renderUsersList(_screenShareUsers);
+}
+export function handleScreenShareBackUserListPane() {
+    recreateUserListContainer();
+    renderUsersList(_screenShareUsers);
+    const btn = document.getElementById('at-screen-share-end-session-btn');
+    if (btn) {
+        btn.style.display = 'none';
+    }
+}
+export function handleScreenShareAcceptRequest(payload) {
+    const dialog = document.getElementById('at-screen-share-request-modal');
+    if (payload.status !== 'accepted') {
+        return;
+    }
+    // start screen share session
+    _screenShareSession = {
+        id: _spaceData.space_id,
+        spaceId: _spaceData.space_id,
+        host: _currentUser,
+        isPointerEnabled: false,
+        participantCount: 1
+    };
+    // close dialog
+    if (dialog) {
+        dialog.close();
+        dialog.remove();
+    }
+    // update screen share user list
+    const invitedUser = Object.assign(Object.assign({}, payload.user), { onlineStatus: 'in_session' });
+    const filteredUsers = _screenShareUsers.filter(u => u.id !== invitedUser.id);
+    const screenShareSessionUser = {
+        id: invitedUser.id,
+        name: invitedUser.name,
+        role: 'guest',
+        session: _screenShareSession
+    };
+    _screenShareUsers = [...filteredUsers, invitedUser];
+    _screenShareSessionUsers = [..._screenShareSessionUsers, screenShareSessionUser];
+    renderUsersList(_screenShareUsers);
+    showEndSessionBtn();
+}
+function sortUsersByStatus(users) {
+    function getStatusPriority(status) {
+        switch (status) {
+            case 'in_session': return 0;
+            case 'online': return 1;
+            case 'offline': return 2;
+            default: return 999;
+        }
+    }
+    return users.sort((a, b) => getStatusPriority(a.onlineStatus) - getStatusPriority(b.onlineStatus));
+}
+function showEndSessionBtn() {
+    const btn = document.getElementById('at-screen-share-end-session-btn');
+    if (btn) {
+        btn.style.display = 'block';
+    }
+}
+function removeScreenShareSessionData() {
+    const screenShareSessionUserIds = _screenShareSessionUsers.map(u => u.id);
+    const updateUsersData = _screenShareUsers.map(user => {
+        if (screenShareSessionUserIds.includes(user.id)) {
+            return Object.assign(Object.assign({}, user), { onlineStatus: 'online' });
+        }
+        return user;
+    });
+    _screenShareSessionUser = null;
+    _screenShareSession = null;
+    _screenShareSessionUsers = [];
+    _screenShareUsers = updateUsersData;
+}
+const updateScreenSharePointer = (isOn) => {
+    const select = document.getElementById('at_select_screen_share_pointer');
+    if (!select) {
+        console.log('Screen share pointer select element not found');
+        return;
+    }
+    select.selectedIndex = isOn ? 0 : 1;
+};

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

@@ -1,3 +1,3 @@
-import { ISpaceUser } from "../../../types";
+import { ScreenShareUser } from "../../../types";
 export declare function renderSpaceUserListPane(): HTMLElement;
-export declare function renderUserRows(userList: ISpaceUser[]): void;
+export declare function renderUserRows(userList: ScreenShareUser[]): void;

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

@@ -55,7 +55,7 @@ export function renderUserRows(userList) {
         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';
         const nameEl = document.createElement('span');
@@ -69,10 +69,10 @@ export function renderUserRows(userList) {
         divider.style.height = '1px';
         // Right: share button styled like `at_button at_ghost`
         const shareBtn = document.createElement('div');
-        shareBtn.id = `at-user-screen-share-btn-${user.uuid}`;
-        shareBtn.setAttribute('data-cy', `at-user-screen-share-btn-${user.uuid}`);
+        shareBtn.id = `at-user-screen-share-btn-${user.id}`;
+        shareBtn.setAttribute('data-cy', `at-user-screen-share-btn-${user.id}`);
         shareBtn.setAttribute('target-pane', 'at-viewing-remote-space-pane');
-        if (user.isSharing) {
+        if (user.onlineStatus == 'in_session') {
             const nowSharingText = document.createElement('span');
             nowSharingText.textContent = 'Now Sharing';
             nowSharingText.className = 'at_text_xs at_text_gray';

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

@@ -4,6 +4,7 @@ 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;
 /**