ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-20 13:43:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(WIP): dismissible popup, use moar compositionAPI

Browse Source
This commit is contained in:
Mazzella, Jesse D. (ARC-TI)[KBR Wyle Services, LLC] 2024-01-25 17:38:01 -08:00
parent 458b2822c3
commit c24f310126
2 changed files with 28 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/plugins/userIndicator/components/MissionStatusPopup.vue
View File

@ -2,7 +2,7 @@
<div class="control-panel"> <div class="control-panel">
<div class="header"> <div class="header">
<span>CONTROL PANEL</span> <span>CONTROL PANEL</span>
<button class="close-btn">X</button> <button class="close-btn" @click.stop="onDismiss">X</button>
</div> </div>
<div v-for="status in missionStatuses" :key="status" class="status-item"> <div v-for="status in missionStatuses" :key="status" class="status-item">
<label :for="status">{{ status }}</label> <label :for="status">{{ status }}</label>
@ -12,24 +12,6 @@
{{ option.label }} {{ option.label }}
</option> </option>
</select> </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>
</select>
</div>
<div class="status-item">
<label for="driveStatus">Drive Status</label>
<button class="status-btn go">GO</button>
<select id="driveStatus">
<option>- Set Status -</option>
<option value="status1">Status 1</option>
<option value="status2">Status 2</option>
</select>
</div> -->
</div> </div>
</div> </div>
</template> </template>
@ -37,6 +19,7 @@
<script> <script>
export default { export default {
inject: ['openmct'], inject: ['openmct'],
emits: ['dismiss'],
data() { data() {
return { return {
missionStatuses: [], missionStatuses: [],
@ -47,6 +30,10 @@ export default {
this.missionStatuses = await this.openmct.user.status.getPossibleMissionStatuses(); this.missionStatuses = await this.openmct.user.status.getPossibleMissionStatuses();
this.missionStatusOptions = await this.openmct.user.status.getPossibleMissionStatusOptions(); this.missionStatusOptions = await this.openmct.user.status.getPossibleMissionStatusOptions();
}, },
methods: {} methods: {
onDismiss() {
this.$emit('dismiss');
}
}
}; };
</script> </script>

28
src/plugins/userIndicator/components/UserIndicator.vue
View File

@ -22,7 +22,7 @@
<template> <template>
<div <div
ref="userIndicator" ref="userIndicatorRef"
class="c-indicator c-indicator--user icon-person" class="c-indicator c-indicator--user icon-person"
:class="canSetMissionStatus ? 'c-indicator--clickable' : ''" :class="canSetMissionStatus ? 'c-indicator--clickable' : ''"
v-bind="$attrs" v-bind="$attrs"
@ -36,14 +36,17 @@
</span> </span>
</div> </div>
<Teleport to="body"> <Teleport to="body">
<div v-show="isPopupVisible" ref="popup" class="c-user-control-panel" :style="popupStyle"> <div v-show="isPopupVisible" ref="popupRef" class="c-user-control-panel" :style="popupStyle">
<MissionStatusPopup v-show="canSetMissionStatus" /> <MissionStatusPopup v-show="canSetMissionStatus" @dismiss="togglePopup" />
</div> </div>
</Teleport> </Teleport>
</template> </template>
<script> <script>
import { ref } from 'vue';
import ActiveRoleSynchronizer from '../../../api/user/ActiveRoleSynchronizer.js'; import ActiveRoleSynchronizer from '../../../api/user/ActiveRoleSynchronizer.js';
import { useEventListener } from '../../../ui/composables/event.js';
import { useWindowResize } from '../../../ui/composables/resize.js'; import { useWindowResize } from '../../../ui/composables/resize.js';
import MissionStatusPopup from './MissionStatusPopup.vue'; import MissionStatusPopup from './MissionStatusPopup.vue';
@ -56,8 +59,20 @@ export default {
inheritAttrs: false, inheritAttrs: false,
setup() { setup() {
const { windowSize } = useWindowResize(); const { windowSize } = useWindowResize();
const isPopupVisible = ref(false);
const userIndicatorRef = ref(null);
const popupRef = ref(null);
return { windowSize }; // eslint-disable-next-line func-style
const handleOutsideClick = (event) => {
if (isPopupVisible.value && popupRef.value && !popupRef.value.contains(event.target)) {
isPopupVisible.value = false;
}
};
useEventListener(document, 'click', handleOutsideClick);
return { windowSize, isPopupVisible, popupRef, userIndicatorRef };
}, },
data() { data() {
return { return {
@ -67,7 +82,6 @@ export default {
loggedIn: false, loggedIn: false,
inputRoleSelection: undefined, inputRoleSelection: undefined,
roleSelectionDialog: undefined, roleSelectionDialog: undefined,
isPopupVisible: false,
canSetMissionStatus: false canSetMissionStatus: false
}; };
}, },
@ -82,12 +96,12 @@ export default {
if (!this.isPopupVisible) { if (!this.isPopupVisible) {
return { top: 0, left: 0 }; return { top: 0, left: 0 };
} }
const indicator = this.$refs.userIndicator; const indicator = this.userIndicatorRef;
const indicatorRect = indicator.getBoundingClientRect(); const indicatorRect = indicator.getBoundingClientRect();
let top = indicatorRect.bottom; let top = indicatorRect.bottom;
let left = indicatorRect.left; let left = indicatorRect.left;
const popupRect = this.$refs.popup.getBoundingClientRect(); const popupRect = this.popupRef.getBoundingClientRect();
const popupWidth = popupRect.width; const popupWidth = popupRect.width;
const popupHeight = popupRect.height; const popupHeight = popupRect.height;