Skip to content

Commit

Permalink
webapp: Introduce Modal component
Browse files Browse the repository at this point in the history
Less duplicated code
  • Loading branch information
tbnobody committed Jan 19, 2024
1 parent 5d63f64 commit 6b31a4d
Show file tree
Hide file tree
Showing 8 changed files with 310 additions and 439 deletions.
52 changes: 52 additions & 0 deletions webapp/src/components/Modal.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<template>
<div class="modal" :id="modalId" tabindex="-1">
<div class="modal-dialog" :class="[small ? '' : 'modal-lg']">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ title }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="getCloseText"
@click="close"></button>
</div>
<div class="modal-body">
<div class="text-center" v-if="loading">
<div class="spinner-border" role="status">
<span class="visually-hidden">{{ $t('home.Loading') }}</span>
</div>
</div>
<slot v-else>
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
</slot>
<button type="button" class="btn btn-secondary" @click="close" data-bs-dismiss="modal">{{
getCloseText }}</button>
</div>
</div>
</div>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {
'modalId': { type: String, required: true },
'title': { type: String, required: true },
'closeText': { type: String, required: false, default: '' },
'small': Boolean,
'loading': Boolean,
},
computed: {
getCloseText() {
return this.closeText == '' ? this.$t('base.Close') : this.closeText;
}
},
methods: {
close() {
this.$emit('close');
},
},
});
</script>
4 changes: 2 additions & 2 deletions webapp/src/locales/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"Save": "Speichern",
"Refreshing": "Aktualisieren",
"Pull": "Zum Aktualisieren nach unten ziehen",
"Release": "Loslassen zum Aktualisieren"
"Release": "Loslassen zum Aktualisieren",
"Close": "Schließen"
},
"localeswitcher": {
"Dark": "Dunkel",
Expand Down Expand Up @@ -116,7 +117,6 @@
"UnreadMessages": "Ungelesene Meldungen",
"Loading": "@:base.Loading",
"EventLog": "Ereignisanzeige",
"Close": "Schließen",
"InverterInfo": "Wechselrichter-Informationen",
"LimitSettings": "Limit-Einstellungen",
"LastLimitSetStatus": "Letzter Übertragungsstatus:",
Expand Down
4 changes: 2 additions & 2 deletions webapp/src/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"Save": "Save",
"Refreshing": "Refreshing",
"Pull": "Pull down to refresh",
"Release": "Release to refresh"
"Release": "Release to refresh",
"Close": "Close"
},
"localeswitcher": {
"Dark": "Dark",
Expand Down Expand Up @@ -116,7 +117,6 @@
"UnreadMessages": "unread messages",
"Loading": "@:base.Loading",
"EventLog": "Event Log",
"Close": "Close",
"InverterInfo": "Inverter Info",
"LimitSettings": "Limit Settings",
"LastLimitSetStatus": "Last Limit Set Status:",
Expand Down
4 changes: 2 additions & 2 deletions webapp/src/locales/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
"Save": "Sauvegarder",
"Refreshing": "Refreshing",
"Pull": "Pull down to refresh",
"Release": "Release to refresh"
"Release": "Release to refresh",
"Close": "Fermer"
},
"localeswitcher": {
"Dark": "Sombre",
Expand Down Expand Up @@ -116,7 +117,6 @@
"UnreadMessages": "messages non lus",
"Loading": "@:base.Loading",
"EventLog": "Journal des événements",
"Close": "Fermer",
"InverterInfo": "Informations sur l'onduleur",
"LimitSettings": "Paramètres de la limite",
"LastLimitSetStatus": "Statut de la dernière limite fixée",
Expand Down
32 changes: 11 additions & 21 deletions webapp/src/views/ConfigAdminView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -88,32 +88,21 @@
</CardElement>
</BasePage>

<div class="modal" id="factoryReset" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ $t('configadmin.FactoryReset') }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
{{ $t('configadmin.ResetMsg') }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" @click="onFactoryResetCancel"
data-bs-dismiss="modal">{{ $t('configadmin.Cancel') }}</button>
<button type="button" class="btn btn-danger" @click="onFactoryResetPerform">
{{ $t('configadmin.ResetConfirm') }}
</button>
</div>
</div>
</div>
</div>
<Modal modalId="factoryReset" small :title="$t('configadmin.FactoryReset')" :closeText="$t('configadmin.Cancel')">
{{ $t('configadmin.ResetMsg') }}
<template #footer>
<button type="button" class="btn btn-danger" @click="onFactoryResetPerform">
{{ $t('configadmin.ResetConfirm') }}
</button>
</template>
</Modal>
</template>

<script lang="ts">
import BasePage from '@/components/BasePage.vue';
import BootstrapAlert from "@/components/BootstrapAlert.vue";
import CardElement from '@/components/CardElement.vue';
import Modal from '@/components/Modal.vue';
import type { ConfigFileList } from '@/types/Config';
import { authHeader, handleResponse } from '@/utils/authentication';
import * as bootstrap from 'bootstrap';
Expand All @@ -129,6 +118,7 @@ export default defineComponent({
BasePage,
BootstrapAlert,
CardElement,
Modal,
BIconArrowLeft,
BIconCheckCircle,
BIconExclamationCircleFill,
Expand Down Expand Up @@ -252,4 +242,4 @@ export default defineComponent({
},
},
});
</script>
</script>
Loading

0 comments on commit 6b31a4d

Please sign in to comment.