Skip to content

Commit 469a6a9

Browse files
nunorcnunorc
committed
Experimental mcs ui compact mode
1 parent e6a4fc9 commit 469a6a9

File tree

12 files changed

+589
-1708
lines changed

12 files changed

+589
-1708
lines changed

‎sim-ops-mcs/src/components/app/Sidebar.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,30 @@ import SidebarNav from '@/components/app/SidebarNav.vue';
66
77
const appSidebarMenu = useAppSidebarMenuStore();
88
const appOption = useAppOptionStore();
9+
const compact = getCompact();
910
1011
function appSidebarMobileToggled() {
1112
appOption.appSidebarMobileToggled = !appOption.appSidebarMobileToggled;
1213
}
1314
15+
function getCompact() {
16+
let compact = false;
17+
18+
const value = sessionStorage.getItem('compact');
19+
if (value !== null) {
20+
compact = JSON.parse(value);
21+
}
22+
23+
return compact;
24+
}
25+
26+
function toggleCompact() {
27+
let compact = getCompact();
28+
29+
sessionStorage.setItem('compact', JSON.stringify(!compact));
30+
window.location.reload();
31+
}
32+
1433
onMounted(() => {
1534
var handleSidebarMenuToggle = function(menus) {
1635
menus.map(function(menu) {
@@ -69,6 +88,14 @@ onMounted(() => {
6988
<sidebar-nav v-if="menu.text" v-bind:menu="menu"></sidebar-nav>
7089
</template>
7190
</template>
91+
92+
<div class="menu-header">Options</div>
93+
<div class="menu-divider"></div>
94+
<div class="form-check form-switch mb-2 d-flex" style="margin-left: 20px;">
95+
<input @click="toggleCompact" class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" :checked="compact" style="cursor: pointer;">
96+
<label class="form-check-label ps-2 menu-link" for="flexSwitchCheckDefault" style="color: #ffffff80; cursor: pointer;"> Compact Mode</label>
97+
</div>
98+
7299
</div>
73100
</perfect-scrollbar>
74101
</div>

‎sim-ops-mcs/src/router/index.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ const router = createRouter({
2525
{ path: '/history', component: () => import('../views/History.vue') },
2626
// other
2727
{ path: '/about', component: () => import('../views/About.vue') },
28-
{ path: '/helper', component: () => import('../views/Helper.vue') },
2928
{ path: '/:pathMatch(.*)*', component: () => import('../views/PageError.vue') }
3029
],
3130
});

‎sim-ops-mcs/src/stores/app-option.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ export const useAppOptionStore = defineStore({
2222
appFooterFixed: false,
2323
appThemePanelToggled: false,
2424
soAPI: getEnv('SO_API', '/api'),
25-
soAuth: false
25+
soAuth: false,
26+
soCompact: false
2627
}
2728
}
2829
});

‎sim-ops-mcs/src/views/AOCS.vue‎

Lines changed: 81 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,8 @@ export default {
8888
}
8989
},
9090
mounted() {
91+
this.compact = JSON.parse(sessionStorage.getItem('compact')) || false;
92+
9193
this.mqtt_status = this.$mqtt.status();
9294
9395
// subscribe to spacecraft topic to get state updates
@@ -120,25 +122,21 @@ export default {
120122
</script>
121123
<template>
122124

123-
<!-- BEGIN page-header -->
124125
<h1 class="page-header">
125126
<span v-if="loading" class="spinner-border text-secondary app-fs-small" role="status"><span class="visually-hidden">Loading...</span></span>
126-
AOCS <small>Attitude and Orbit Control System</small>
127+
AOCS <small class="d-none d-md-inline">Attitude and Orbit Control System</small>
127128
<small class="float-end">
128-
<!-- <span class="badge rounded-0 bg-secondary">Last Update</span>
129-
<span class="badge rounded-0 bg-dark" style="margin-right: 10px;">{{ dt.replace('T', ' ').replace('Z','') }} UTC</span> -->
130129
<span class="badge rounded-0 bg-secondary">MQTT</span>
131130
<span class="badge rounded-0" :class="{ 'bg-success': mqtt_status === 'connected', 'bg-danger': mqtt_status !== 'connected' }">{{ mqtt_status }}</span>
132-
<span class="badge rounded-0 bg-secondary ms-2">D/L State</span>
131+
<span class="badge rounded-0 bg-secondary ms-1">D/L State</span>
133132
<span v-if="status_dl" class="badge rounded-0 text-uppercase" :class="{ 'text-bg-danger': status_dl==='NO_RF', 'text-bg-warning': status_dl==='PLL_LOCK' || status_dl==='PSK_LOCK' || status_dl==='BIT_LOCK', 'text-bg-success': status_dl==='FRAME_LOCK' }">{{ status_dl }}</span>
134133
<span v-else class="badge rounded-0 bg-dark">_</span>
135134
</small>
136135
</h1>
137136
<hr class="mb-4">
138-
<!-- END page-header -->
139137

140-
<div class="row" v-if="renderComponent">
141-
<div class="col-xl-2 col-lg-2">
138+
<div class="row" v-if="renderComponent && !compact">
139+
<div class="col-sm-2">
142140
<card class="mb-3">
143141
<card-header class="card-header fw-bold small text-center p-1">AOCS Chain</card-header>
144142
<card-body class="p-2 mx-2">
@@ -147,7 +145,7 @@ export default {
147145
</card-body>
148146
</card>
149147
</div>
150-
<div class="col-xl-2 col-lg-2">
148+
<div class="col-sm-2">
151149
<card class="mb-3">
152150
<card-header class="card-header fw-bold small text-center p-1">AOCS Mode</card-header>
153151
<card-body class="p-2 mx-2">
@@ -156,7 +154,7 @@ export default {
156154
</card-body>
157155
</card>
158156
</div>
159-
<div class="col-xl-2 col-lg-2">
157+
<div class="col-sm-2">
160158
<card class="mb-3">
161159
<card-header class="card-header fw-bold small text-center p-1">AOCS Valid</card-header>
162160
<card-body class="p-2 mx-2">
@@ -167,7 +165,7 @@ export default {
167165
</div>
168166
</div>
169167

170-
<div class="row" v-if="renderComponent">
168+
<div class="row" v-if="renderComponent && !compact">
171169
<div class="col-xl-2 col-lg-2">
172170
<card class="mb-3">
173171
<card-header class="card-header fw-bold small text-center p-1">Rotation X</card-header>
@@ -209,7 +207,7 @@ export default {
209207
</div>
210208
</div>
211209

212-
<div class="row" v-if="renderComponent">
210+
<div class="row" v-if="renderComponent && !compact">
213211
<div class="col-xl-2 col-lg-2">
214212
<card class="mb-3">
215213
<card-header class="card-header fw-bold small text-center p-1">Rate X</card-header>
@@ -251,7 +249,7 @@ export default {
251249
</div>
252250
</div>
253251

254-
<div class="row" v-if="renderComponent">
252+
<div class="row" v-if="renderComponent && !compact">
255253
<div class="col-xl-2 col-lg-2">
256254
<card class="mb-3">
257255
<card-header class="card-header fw-bold small text-center p-1">Sun Angle</card-header>
@@ -280,6 +278,74 @@ export default {
280278
</div>
281279
</div>
282280

281+
<div class="row" v-if="renderComponent && compact">
282+
<div class="col-sm-4">
283+
<card class="mb-3">
284+
<card-body class="">
285+
<table class="table text-nowrap mb-0">
286+
<tbody>
287+
<tr>
288+
<td class="app-w-col">AOCS Chain</td>
289+
<td v-if="state"><div class="app-badge rounded-0 text-uppercase bg-dark">{{ state.aocs_chain }}</div></td>
290+
<td v-else>_</td>
291+
</tr>
292+
<tr>
293+
<td>AOCS Mode</td>
294+
<td v-if="state"><div class="app-badge rounded-0 text-uppercase bg-dark">{{ state.aocs_mode }}</div></td>
295+
<td v-else>_</td>
296+
</tr>
297+
<tr>
298+
<td>AOCS Valid</td>
299+
<td v-if="state"><div class="app-badge rounded-0 text-uppercase bg-dark">{{ state.aocs_valid }}</div></td>
300+
<td v-else>_</td>
301+
</tr>
302+
<tr>
303+
<td>Rotation X</td>
304+
<td v-if="state"><div class="app-badge rounded-0 text-uppercase bg-dark">{{ state.aocs_rotation[0].toFixed(3) }}°</div></td>
305+
<td v-else>_</td>
306+
</tr>
307+
<tr>
308+
<td>Rotation Y</td>
309+
<td v-if="state"><div class="app-badge rounded-0 text-uppercase bg-dark">{{ state.aocs_rotation[1].toFixed(3) }}°</div></td>
310+
<td v-else>_</td>
311+
</tr>
312+
<tr>
313+
<td>Rotation Z</td>
314+
<td v-if="state"><div class="app-badge rounded-0 text-uppercase bg-dark">{{ state.aocs_rotation[2].toFixed(3) }}°</div></td>
315+
<td v-else>_</td>
316+
</tr>
317+
<tr>
318+
<td>Rate X</td>
319+
<td v-if="state"><div class="app-badge rounded-0 text-uppercase bg-dark">{{ state.aocs_rates[0].toFixed(3) }}</div></td>
320+
<td v-else>_</td>
321+
</tr>
322+
<tr>
323+
<td>Rate Y</td>
324+
<td v-if="state"><div class="app-badge rounded-0 text-uppercase bg-dark">{{ state.aocs_rates[1].toFixed(3) }}</div></td>
325+
<td v-else>_</td>
326+
</tr>
327+
<tr>
328+
<td>Rate Z</td>
329+
<td v-if="state"><div class="app-badge rounded-0 text-uppercase bg-dark">{{ state.aocs_rates[2].toFixed(3) }}</div></td>
330+
<td v-else>_</td>
331+
</tr>
332+
<tr>
333+
<td>Sun Angle</td>
334+
<td v-if="state"><div class="app-badge rounded-0 text-uppercase bg-dark">{{ state.aocs_sun_angle.toFixed(3) }}°</div></td>
335+
<td v-else>_</td>
336+
</tr>
337+
<tr>
338+
<td>Nadir Angle</td>
339+
<td v-if="state"><div class="app-badge rounded-0 text-uppercase bg-dark">{{ state.aocs_nadir_angle.toFixed(3) }}°</div></td>
340+
<td v-else>_</td>
341+
</tr>
342+
</tbody>
343+
</table>
344+
</card-body>
345+
</card>
346+
</div>
347+
</div>
348+
283349
<div class="row mt-3" v-if="renderComponent">
284350
<div class="col">
285351
<span class="badge rounded-0 bg-secondary">Last Update</span>
@@ -290,6 +356,8 @@ export default {
290356
</template>
291357

292358
<style>
359+
.app-w-col { width: 70%; }
360+
.app-badge { font-size: 0.7rem; font-weight: 600; text-align: center; padding: 2px; }
293361
.app-w-100 { width: 100%; }
294362
.app-w-80 { width: 86px; height: 60px; }
295363
.app-fs-small { font-size: small; }

‎sim-ops-mcs/src/views/DHS.vue‎

Lines changed: 68 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@ export default {
5757
}
5858
},
5959
mounted() {
60+
this.compact = JSON.parse(sessionStorage.getItem('compact')) || false;
61+
6062
this.mqtt_status = this.$mqtt.status();
6163
6264
// subscribe to ground station topic to get state updates
@@ -87,24 +89,20 @@ export default {
8789
</script>
8890
<template>
8991

90-
<!-- BEGIN page-header -->
9192
<h1 class="page-header">
9293
<span v-if="loading" class="spinner-border text-secondary app-fs-small" role="status"><span class="visually-hidden">Loading...</span></span>
93-
DHS <small>Data Handling Subsystem</small>
94+
DHS <small class="d-none d-md-inline">Data Handling Subsystem</small>
9495
<small class="float-end">
95-
<!-- <span class="badge rounded-0 bg-secondary">Last Update</span>
96-
<span class="badge rounded-0 bg-dark" style="margin-right: 10px;">{{ dt.replace('T', ' ').replace('Z','') }} UTC</span> -->
9796
<span class="badge rounded-0 bg-secondary">MQTT</span>
9897
<span class="badge rounded-0" :class="{ 'bg-success': mqtt_status === 'connected', 'bg-danger': mqtt_status !== 'connected' }">{{ mqtt_status }}</span>
99-
<span class="badge rounded-0 bg-secondary ms-2">D/L State</span>
98+
<span class="badge rounded-0 bg-secondary ms-1">D/L State</span>
10099
<span v-if="status_dl" class="badge rounded-0 text-uppercase" :class="{ 'text-bg-danger': status_dl==='NO_RF', 'text-bg-warning': status_dl==='PLL_LOCK' || status_dl==='PSK_LOCK' || status_dl==='BIT_LOCK', 'text-bg-success': status_dl==='FRAME_LOCK' }">{{ status_dl }}</span>
101100
<span v-else class="badge rounded-0 bg-dark">_</span>
102101
</small>
103102
</h1>
104103
<hr class="mb-4">
105-
<!-- END page-header -->
106104

107-
<div class="row" v-if="renderComponent">
105+
<div class="row" v-if="renderComponent && !compact">
108106
<div class="col-xl-6 col-lg-6">
109107
<div class="row">
110108
<div class="col-xl-4 col-lg-4">
@@ -198,6 +196,67 @@ export default {
198196
</div>
199197
</div>
200198

199+
<div class="row" v-if="renderComponent && compact">
200+
<div class="col-sm-4">
201+
<card class="mb-3">
202+
<card-body class="">
203+
<table class="table text-nowrap mb-0">
204+
<tbody>
205+
<tr>
206+
<td class="app-w-col">DHS Chain</td>
207+
<td v-if="state"><div class="app-badge rounded-0 app-w-100 text-uppercase bg-dark">{{ state.pts_chain }}</div></td>
208+
<td v-else>_</td>
209+
</tr>
210+
<tr>
211+
<td>OBSW Mode</td>
212+
<td v-if="state"><div class="badge rounded-0 app-w-100 text-uppercase" :class="{ 'bg-theme': state.dhs_obsw_mode === 'nominal', 'bg-danger': state.dhs_obsw_mode !== 'nominal'}">{{ state.dhs_obsw_mode }}</div></td>
213+
<td v-else>_</td>
214+
</tr>
215+
<tr>
216+
<td>Memory Dump</td>
217+
<td v-if="state"><div class="badge rounded-0 app-w-100 text-uppercase" :class="{ 'bg-theme': state.dhs_mem_dump_enabled, 'bg-danger': !state.dhs_mem_dump_enabled }">{{ state.dhs_mem_dump_enabled ? 'Enabled' : 'Disabled' }}</div></td>
218+
<td v-else>_</td>
219+
</tr>
220+
<tr>
221+
<td>Memory Usage</td>
222+
<td v-if="state"><div class="app-badge rounded-0 app-w-100 text-uppercase bg-dark">{{ state.dhs_memory.toFixed(2) }}%</div></td>
223+
<td v-else>_</td>
224+
</tr>
225+
<tr>
226+
<td>TM Counter</td>
227+
<td v-if="state"><div class="app-badge rounded-0 app-w-100 text-uppercase bg-dark">{{ state.dhs_tm_counter }}</div></td>
228+
<td v-else>_</td>
229+
</tr>
230+
<tr>
231+
<td>TC Counter</td>
232+
<td v-if="state"><div class="app-badge rounded-0 app-w-100 text-uppercase bg-dark">{{ state.dhs_tc_counter }}</div></td>
233+
<td v-else>_</td>
234+
</tr>
235+
</tbody>
236+
</table>
237+
</card-body>
238+
</card>
239+
</div>
240+
241+
<div class="col-sm-4">
242+
<card class="mb-3">
243+
<card-header>Scheduled Time Tagged Files</card-header>
244+
<card-body class="mb-1">
245+
<table class="table table-sm table-striped table-borderless mb-2px small text-nowrap">
246+
<tbody v-if="state">
247+
<tr v-if="state && state.dhs_uploaded.length > 0" v-for="row in state.dhs_uploaded">
248+
<td>{{ row }}</td>
249+
</tr>
250+
<tr v-if="state && state.dhs_uploaded.length === 0">
251+
<td>None</td>
252+
</tr>
253+
</tbody>
254+
</table>
255+
</card-body>
256+
</card>
257+
</div>
258+
</div>
259+
201260
<div class="row" v-if="renderComponent">
202261
<div class="col-xl-6 col-lg-6">
203262
<card class="mb-3">
@@ -242,6 +301,8 @@ export default {
242301
</template>
243302

244303
<style>
304+
.app-w-col { width: 70%; }
305+
.app-badge { font-size: 0.7rem; font-weight: 600; text-align: center; padding: 2px; }
245306
.app-w-100 { width: 100%; }
246307
.app-w-80 { width: 86px; height: 60px; }
247308
.app-fs-small { font-size: small; }

0 commit comments

Comments
 (0)