Added selection dialog to overlays and implemented for operator status

src/api/overlays/OverlayAPI.js

@@ -1,6 +1,7 @@
 import Overlay from './Overlay';
 import Dialog from './Dialog';
 import ProgressDialog from './ProgressDialog';
+import Selection from './Selection';
 
 /**
  * The OverlayAPI is responsible for pre-pending templates to
@@ -132,6 +133,13 @@ class OverlayAPI {
         return progressDialog;
     }
 
+    selection(options) {
+        let selection = new Selection(options);
+        this.showOverlay(selection);
+
+        return selection;
+    }
+
 }
 
 export default OverlayAPI;

src/api/overlays/Selection.js

@@ -0,0 +1,38 @@
+import SelectionComponent from './components/SelectionComponent.vue';
+import Overlay from './Overlay';
+import Vue from 'vue';
+
+class Selection extends Overlay {
+    constructor({iconClass, title, message, selectionOptions, onChange, currentSelection, ...options}) {
+
+        let component = new Vue({
+            components: {
+                SelectionComponent: SelectionComponent
+            },
+            provide: {
+                iconClass,
+                title,
+                message,
+                selectionOptions,
+                onChange,
+                currentSelection
+            },
+            template: '<selection-component></selection-component>'
+        }).$mount();
+
+        super({
+            element: component.$el,
+            size: 'fit',
+            dismissable: false,
+            onChange,
+            currentSelection,
+            ...options
+        });
+
+        this.once('destroy', () => {
+            component.$destroy();
+        });
+    }
+}
+
+export default Selection;

src/api/overlays/components/SelectionComponent.vue

@@ -0,0 +1,45 @@
+<template>
+<div class="c-message">
+    <!--Uses flex-row -->
+    <div
+        class="c-message__icon"
+        :class="['u-icon-bg-color-' + iconClass]"
+    ></div>
+    <div class="c-message__text">
+        <!-- Uses flex-column -->
+        <div
+            v-if="title"
+            class="c-message__title"
+        >
+            {{ title }}
+        </div>
+
+        <div
+            v-if="message"
+            class="c-message__action-text"
+        >
+            {{ message }}
+        </div>
+        <select
+            @change="onChange"
+        >
+            <option
+                v-for="option in selectionOptions"
+                :key="option.key"
+                :value="option.key"
+                :selected="option.key===currentSelection"
+            >
+                {{ option.name }}
+            </option>
+        </select>
+
+        <slot></slot>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    inject: ['iconClass', 'title', 'message', 'selectionOptions', 'currentSelection', 'onChange']
+};
+</script>

src/plugins/operatorStatus/operatorStatus/OperatorStatus.vue

@@ -58,7 +58,7 @@
 
 <script>
 const DEFAULT_POLL_QUESTION = 'NO POLL QUESTION';
-
+const BROADCAST_CHANNEL_NAME = 'USER_ROLE';
 export default {
     inject: ['openmct', 'indicator', 'configuration'],
     props: {
@@ -73,8 +73,9 @@ export default {
     },
     data() {
         return {
-            allRoles: [],
+            allRoles: [{ key: 'FLIGHT', name: 'Flight'}, {key: 'CAPCOM', name: 'CAPCOM'}, { key: 'GUIDO', name: 'GUIDO' }],
             role: '--',
+            selectedRole: '',
             pollQuestionUpdated: '--',
             currentPollQuestion: DEFAULT_POLL_QUESTION,
             selectedStatus: undefined,
@@ -93,21 +94,66 @@ export default {
     beforeDestroy() {
         this.openmct.user.status.off('statusChange', this.setStatus);
         this.openmct.user.status.off('pollQuestionChange', this.setPollQuestion);
+        this.unsubscribeToRole();
     },
     async mounted() {
         this.unsubscribe = [];
         await this.fetchUser();
-        await this.findFirstApplicableRole();
+        this.fetchOrPromptForRole();
         this.fetchPossibleStatusesForUser();
         this.fetchCurrentPoll();
         this.fetchMyStatus();
         this.subscribeToMyStatus();
         this.subscribeToPollQuestion();
+        this.createRoleChannel();
     },
     methods: {
-        async findFirstApplicableRole() {
+
+        async fetchOrPromptForRole() {
+            const UserAPI = this.openmct.user;
+            const activeRole = UserAPI.getActiveRole();
+            console.log('fetchOrPromptRole', activeRole)
+            if (!activeRole) {
+                // trigger role selection modal
+                this.promptForRoleSelection();
+            }
+
+            this.selectedRole = activeRole;
+
             this.role = await this.openmct.user.status.getStatusRoleForCurrentUser();
+
         },
+        promptForRoleSelection() {
+            console.log('allRoles', this.allRoles)
+            const selectionOptions = this.allRoles;
+            const dialog = this.openmct.overlays.selection({
+                selectionOptions,
+                iconClass: 'info',
+                title: 'Select Role',
+                message: 'Please select your role for operator status.',
+                currentSelection: this.selectedRole,
+                onChange: (event) => {
+                    console.log('updateRole', event.target.value)
+                    this.role = event.target.value;
+                },
+                buttons: [
+                    {
+                        label: 'Select',
+                        emphasis: true,
+                        callback: () => {
+                            this.setRole(this.role);
+                            dialog.dismiss();
+                        }
+                    }
+                ]
+            });
+        },
+        setRole(role) {
+            this.openmct.user.setActiveRole(role);
+            // update other tabs through broadcast channel
+            this.broadcastNewRole(role);
+        },
+
         async fetchUser() {
             this.user = await this.openmct.user.getCurrentUser();
         },
@@ -182,6 +228,26 @@ export default {
                 return status;
             }
         },
+        createRoleChannel() {
+            this.roleChannel = new BroadcastChannel(BROADCAST_CHANNEL_NAME);
+            this.roleChannel.onmessage = (({data}) => {
+                const role = data;
+                this.openmct.user.setActiveRole(role);
+            });
+            this.roleChannel.onmessageerror = event => console.log(event);
+        },
+        unsubscribeToRole() {
+            this.roleChannel.close();
+        },
+        broadcastNewRole(role) {
+            // channel closed if name is no longer available
+            if (!this.roleChannel.name) {
+                return false;
+            }
+
+            this.roleChannel.postMessage(role);
+
+        },
         noop() {}
     }
 };