feat(WIP): can display mission statuses now

src/api/user/StatusAPI.js

@@ -131,18 +131,18 @@ export default class StatusAPI extends EventEmitter {
   }
 
   /**
-   * Fetch the list of possible mission status roles
-   * @returns {Promise<MissionStatusRole[]>}
+   * Fetch the list of possible mission status options
+   * @returns {Promise<MissionStatusOption[]>} the current mission status
    */
-  async getPossibleMissionStatusRoles() {
+  async getPossibleMissionStatuses() {
     const provider = this.#userAPI.getProvider();
 
-    if (provider.getPossibleMissionStatusRoles) {
-      const possibleRoles = await provider.getPossibleMissionStatusRoles();
+    if (provider.getPossibleMissionStatuses) {
+      const possibleStatuses = await provider.getPossibleMissionStatuses();
 
-      return possibleRoles;
+      return possibleStatuses;
     } else {
-      this.#userAPI.error('User provider does not support mission status roles');
+      this.#userAPI.error('User provider does not support mission statuses');
     }
   }
 

src/plugins/operatorStatus/operatorStatus/OperatorStatus.vue

@@ -20,11 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div
-    :style="position"
-    class="c-status-poll-panel c-status-poll-panel--operator"
-    @click.stop="noop"
-  >
+  <div :style="position" class="c-status-poll-panel c-status-poll-panel--operator" @click.stop>
     <div class="c-status-poll-panel__section c-status-poll-panel__top">
       <div class="c-status-poll-panel__title">Status Poll</div>
       <div class="c-status-poll-panel__user-role icon-person">{{ role }}</div>
@@ -191,8 +187,7 @@ export default {
       } else {
         return status;
       }
-    },
-    noop() {}
+    }
   }
 };
 </script>

src/plugins/userIndicator/components/MissionStatusPopup.vue

@@ -4,14 +4,21 @@
       <span>CONTROL PANEL</span>
       <button class="close-btn">X</button>
     </div>
-    <div class="status-item">
+    <div v-for="status in missionStatuses" :key="status" class="status-item">
+      <label :for="status">{{ status }}</label>
+      <button class="status-btn go">GO</button>
+      <select :id="status.label">
+        <option v-for="option in missionStatusOptions" :key="option.key">
+          {{ option.label }}
+        </option>
+      </select>
+      <!-- <div class="status-item">
       <label for="commandingStatus">Commanding Status</label>
       <button class="status-btn go">GO</button>
       <select id="commandingStatus">
         <option>- Set Status -</option>
         <option value="status1">Status 1</option>
         <option value="status2">Status 2</option>
-        <!-- Add more status options here -->
       </select>
     </div>
     <div class="status-item">
@@ -21,22 +28,25 @@
         <option>- Set Status -</option>
         <option value="status1">Status 1</option>
         <option value="status2">Status 2</option>
-        <!-- Add more status options here -->
       </select>
+    </div> -->
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'ControlPanel',
+  inject: ['openmct'],
   data() {
     return {
-      // Define your data properties here
+      missionStatuses: [],
+      missionStatusOptions: []
     };
   },
-  methods: {
-    // Define your component methods here
-  }
+  async created() {
+    this.missionStatuses = await this.openmct.user.status.getPossibleMissionStatuses();
+    this.missionStatusOptions = await this.openmct.user.status.getPossibleMissionStatusOptions();
+  },
+  methods: {}
 };
 </script>

src/plugins/userIndicator/components/UserIndicator.vue

@@ -23,7 +23,8 @@
 <template>
   <div
     ref="userIndicator"
-    class="c-indicator c-indicator--user icon-person c-indicator--clickable"
+    class="c-indicator c-indicator--user icon-person"
+    :class="canSetMissionStatus ? 'c-indicator--clickable' : ''"
     v-bind="$attrs"
     @click.stop="togglePopup"
   >
@@ -36,7 +37,7 @@
   </div>
   <Teleport to="body">
     <div v-if="isPopupVisible" class="c-user-control-panel">
-      <MissionStatusPopup />
+      <MissionStatusPopup v-if="canSetMissionStatus" />
     </div>
   </Teleport>
 </template>
@@ -60,7 +61,8 @@ export default {
       loggedIn: false,
       inputRoleSelection: undefined,
       roleSelectionDialog: undefined,
-      isPopupVisible: false
+      isPopupVisible: false,
+      canSetMissionStatus: false
     };
   },
   computed: {
@@ -107,6 +109,7 @@ export default {
   methods: {
     async getUserInfo() {
       const user = await this.openmct.user.getCurrentUser();
+      this.canSetMissionStatus = await this.openmct.user.status.canSetMissionStatus();
       this.userName = user.getName();
       this.role = this.openmct.user.getActiveRole();
       this.loggedIn = this.openmct.user.isLoggedIn();