Skip to content

Commit ad03aa8

Browse files
patrickelectricpatrickelectric
committed
core: frontend: components: Add global warning component
Signed-off-by: Patrick José Pereira <patrickelectric@gmail.com>
1 parent e88a8a4 commit ad03aa8

File tree

3 files changed

+169
-64
lines changed

3 files changed

+169
-64
lines changed

‎core/frontend/src/components/app/SettingsMenu.vue‎

Lines changed: 17 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -158,36 +158,12 @@
158158
</v-card>
159159
</v-card>
160160
</v-dialog>
161-
<v-dialog
161+
<WarningDialog
162162
v-model="show_reset_warning"
163-
width="fit-content"
164-
@click:outside="show_reset_warning = false"
165-
@keydown.esc="show_reset_warning = false"
166-
>
167-
<v-sheet
168-
color="warning"
169-
outlined
170-
>
171-
<v-card variant="outlined">
172-
<v-card-title class="align-center">
173-
WARNING
174-
</v-card-title>
175-
<v-card-text class="reset-warning-text">
176-
Resetting will restore BlueOS services to their default configurations.
177-
This action cannot be undone. Proceed?
178-
</v-card-text>
179-
<v-card-actions>
180-
<v-btn color="primary" @click="show_reset_warning = false">
181-
Cancel
182-
</v-btn>
183-
<v-spacer />
184-
<v-btn color="warning" @click="reset_settings(); show_reset_warning = false">
185-
Yes, reset settings
186-
</v-btn>
187-
</v-card-actions>
188-
</v-card>
189-
</v-sheet>
190-
</v-dialog>
163+
:message="resetWarningMessage"
164+
confirm-label="Yes, reset settings"
165+
@confirm="onConfirmResetSettings"
166+
/>
191167
<v-dialog
192168
width="380"
193169
:value="show_reset_dialog"
@@ -206,6 +182,7 @@
206182
import Vue from 'vue'
207183
208184
import SpinningLogo from '@/components/common/SpinningLogo.vue'
185+
import WarningDialog from '@/components/common/WarningDialog.vue'
209186
import filebrowser from '@/libs/filebrowser'
210187
import Notifier from '@/libs/notifier'
211188
import bag from '@/store/bag'
@@ -222,6 +199,7 @@ export default Vue.extend({
222199
name: 'SettingsMenu',
223200
components: {
224201
SpinningLogo,
202+
WarningDialog,
225203
},
226204
data() {
227205
return {
@@ -247,6 +225,12 @@ export default Vue.extend({
247225
has_operation_error(): boolean {
248226
return this.operation_error !== undefined
249227
},
228+
resetWarningMessage(): string {
229+
return (
230+
'Resetting will restore BlueOS services to their default configurations.\n'
231+
+ 'This action cannot be undone. Proceed?'
232+
)
233+
},
250234
},
251235
watch: {
252236
show_dialog: {
@@ -320,6 +304,10 @@ export default Vue.extend({
320304
confirm_reset_settings(): void {
321305
this.show_reset_warning = true
322306
},
307+
onConfirmResetSettings(): void {
308+
this.show_reset_warning = false
309+
this.reset_settings()
310+
},
323311
async reset_settings(): Promise<void> {
324312
this.prepare_operation('Resetting settings...')
325313
@@ -444,7 +432,4 @@ export default Vue.extend({
444432
backdrop-filter: blur(2px);
445433
z-index: 9999 !important;
446434
}
447-
.reset-warning-text {
448-
max-width: 30rem;
449-
}
450435
</style>

‎core/frontend/src/components/common/WarningDialog.vue‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<template>
2+
<v-dialog
3+
:value="value"
4+
:width="width"
5+
:persistent="persistent"
6+
@input="emitInput"
7+
@click:outside="handleOutsideClick"
8+
@keydown.esc="handleEsc"
9+
>
10+
<v-sheet
11+
color="warning"
12+
outlined
13+
>
14+
<v-card variant="outlined">
15+
<v-card-title class="align-center">
16+
<span class="warning-title">
17+
<span
18+
class="warning-emoji"
19+
aria-label="warning"
20+
role="img"
21+
>⚠️</span>
22+
{{ title }}
23+
</span>
24+
</v-card-title>
25+
<v-card-text :class="['warning-text', textClass]">
26+
{{ message }}
27+
</v-card-text>
28+
<v-card-actions>
29+
<v-btn :color="cancelColor" @click="close">
30+
{{ cancelLabel }}
31+
</v-btn>
32+
<v-spacer />
33+
<v-btn :color="confirmColor" @click="confirmAndMaybeClose">
34+
{{ confirmLabel }}
35+
</v-btn>
36+
</v-card-actions>
37+
</v-card>
38+
</v-sheet>
39+
</v-dialog>
40+
</template>
41+
42+
<script lang="ts">
43+
import Vue, { PropType } from 'vue'
44+
45+
export default Vue.extend({
46+
name: 'WarningDialog',
47+
props: {
48+
value: {
49+
type: Boolean,
50+
required: true,
51+
},
52+
title: {
53+
type: String,
54+
default: 'WARNING',
55+
},
56+
message: {
57+
type: String,
58+
required: true,
59+
},
60+
confirmLabel: {
61+
type: String,
62+
required: true,
63+
},
64+
cancelLabel: {
65+
type: String,
66+
default: 'Cancel',
67+
},
68+
confirmColor: {
69+
type: String as PropType<string>,
70+
default: 'warning',
71+
},
72+
cancelColor: {
73+
type: String as PropType<string>,
74+
default: 'primary',
75+
},
76+
width: {
77+
type: [String, Number] as PropType<string | number>,
78+
default: 'fit-content',
79+
},
80+
persistent: {
81+
type: Boolean,
82+
default: false,
83+
},
84+
closeOnOutside: {
85+
type: Boolean,
86+
default: true,
87+
},
88+
closeOnEsc: {
89+
type: Boolean,
90+
default: true,
91+
},
92+
closeOnConfirm: {
93+
type: Boolean,
94+
default: true,
95+
},
96+
textClass: {
97+
type: String,
98+
default: '',
99+
},
100+
},
101+
methods: {
102+
emitInput(state: boolean) {
103+
this.$emit('input', state)
104+
},
105+
close() {
106+
this.emitInput(false)
107+
},
108+
handleOutsideClick() {
109+
if (this.closeOnOutside && !this.persistent) {
110+
this.close()
111+
}
112+
},
113+
handleEsc() {
114+
if (this.closeOnEsc && !this.persistent) {
115+
this.close()
116+
}
117+
},
118+
confirmAndMaybeClose() {
119+
this.$emit('confirm')
120+
if (this.closeOnConfirm) {
121+
this.close()
122+
}
123+
},
124+
},
125+
})
126+
</script>
127+
128+
<style scoped>
129+
.warning-title {
130+
display: inline-flex;
131+
align-items: center;
132+
gap: 0.35rem;
133+
}
134+
135+
.warning-emoji {
136+
font-size: 1.2rem;
137+
}
138+
139+
.warning-text {
140+
max-width: 30rem;
141+
}
142+
</style>

‎core/frontend/src/components/vehiclesetup/overview/ParamSets.vue‎

Lines changed: 10 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -69,39 +69,12 @@
6969
</v-card-actions>
7070
</v-card>
7171

72-
<v-dialog
72+
<WarningDialog
7373
v-model="show_warning"
74-
width="fit-content"
75-
persistent
76-
>
77-
<v-sheet
78-
color="warning"
79-
outlined
80-
>
81-
<v-card
82-
variant="outlined"
83-
>
84-
<v-card-title class="align-center">
85-
WARNING
86-
</v-card-title>
87-
<v-card-text
88-
style="max-width: 30rem;"
89-
>
90-
You will lose ALL your parameters, vehicle setup, and calibrations.
91-
Are you sure you want to reset?
92-
</v-card-text>
93-
<v-card-actions>
94-
<v-btn align="end" color="primary" @click="show_warning = false">
95-
Cancel
96-
</v-btn>
97-
<v-spacer />
98-
<v-btn color="warning" @click="wipe()">
99-
Yes, reset them
100-
</v-btn>
101-
</v-card-actions>
102-
</v-card>
103-
</v-sheet>
104-
</v-dialog>
74+
:message="warningMessage"
75+
confirm-label="Yes, reset them"
76+
@confirm="wipe"
77+
/>
10578
</v-row>
10679
</template>
10780

@@ -111,6 +84,7 @@ import Vue from 'vue'
11184
11285
import * as AutopilotManager from '@/components/autopilot/AutopilotManagerUpdater'
11386
import { fetchCurrentBoard } from '@/components/autopilot/AutopilotManagerUpdater'
87+
import WarningDialog from '@/components/common/WarningDialog.vue'
11488
import ParameterLoader from '@/components/parameter-editor/ParameterLoader.vue'
11589
import mavlink2rest from '@/libs/MAVLink2Rest'
11690
import {
@@ -130,6 +104,7 @@ export default Vue.extend({
130104
name: 'ParamSets',
131105
components: {
132106
ParameterLoader,
107+
WarningDialog,
133108
},
134109
data: () => ({
135110
all_param_sets: {} as Dictionary<Dictionary<number>>,
@@ -177,6 +152,9 @@ export default Vue.extend({
177152
...fw_params,
178153
}
179154
},
155+
warningMessage(): string {
156+
return 'You will lose ALL your parameters, vehicle setup, and calibrations. Are you sure you want to reset?'
157+
},
180158
},
181159
mounted() {
182160
fetchCurrentBoard()

0 commit comments

Comments
 (0)