mirror of
https://github.com/Sebclem/hassio-nextcloud-backup.git
synced 2024-09-11 16:29:07 +02:00
🔨 Add alerts
This commit is contained in:
parent
d508a8460d
commit
2eadfc9778
@ -22,7 +22,7 @@
|
||||
"roboto-fontface": "*",
|
||||
"uuid": "^9.0.0",
|
||||
"vue": "^3.2.45",
|
||||
"vuetify": "3.1.1",
|
||||
"vuetify": "3.1.3",
|
||||
"webfontloader": "^1.6.28"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
@ -27,7 +27,7 @@ specifiers:
|
||||
vite-plugin-vuetify: ^1.0.1
|
||||
vue: ^3.2.45
|
||||
vue-tsc: 1.0.7
|
||||
vuetify: 3.1.1
|
||||
vuetify: 3.1.3
|
||||
webfontloader: ^1.6.28
|
||||
|
||||
dependencies:
|
||||
@ -42,7 +42,7 @@ dependencies:
|
||||
roboto-fontface: 0.10.0
|
||||
uuid: 9.0.0
|
||||
vue: 3.2.45
|
||||
vuetify: 3.1.1_ihnv4ujwy6q3qcyepcitbzrajy
|
||||
vuetify: 3.1.3_ihnv4ujwy6q3qcyepcitbzrajy
|
||||
webfontloader: 1.6.28
|
||||
|
||||
devDependencies:
|
||||
@ -59,7 +59,7 @@ devDependencies:
|
||||
prettier: 2.8.2
|
||||
typescript: 4.7.4
|
||||
vite: 3.2.5_@types+node@16.18.11
|
||||
vite-plugin-vuetify: 1.0.1_mc6ujyzexjrcgjeph6am73m5wu
|
||||
vite-plugin-vuetify: 1.0.1_bps52lyiebopdablgncd5xv5m4
|
||||
vue-tsc: 1.0.7_typescript@4.7.4
|
||||
|
||||
packages:
|
||||
@ -497,7 +497,7 @@ packages:
|
||||
'@types/node': 16.18.11
|
||||
dev: true
|
||||
|
||||
/@vuetify/loader-shared/1.7.0_vue@3.2.45+vuetify@3.1.1:
|
||||
/@vuetify/loader-shared/1.7.0_vue@3.2.45+vuetify@3.1.3:
|
||||
resolution: {integrity: sha512-Db4K67wMhduDsbvdRBYkrYuomti+j0E/1vlz1lnDng5F9LYYBcXa60qypIazVGI6GX/CuY1vshN6XGtGQI4FKg==}
|
||||
peerDependencies:
|
||||
vue: ^3.0.0
|
||||
@ -506,7 +506,7 @@ packages:
|
||||
find-cache-dir: 3.3.2
|
||||
upath: 2.0.1
|
||||
vue: 3.2.45
|
||||
vuetify: 3.1.1_ihnv4ujwy6q3qcyepcitbzrajy
|
||||
vuetify: 3.1.3_ihnv4ujwy6q3qcyepcitbzrajy
|
||||
|
||||
/acorn-jsx/5.3.2_acorn@8.8.1:
|
||||
resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
|
||||
@ -2260,18 +2260,18 @@ packages:
|
||||
spdx-expression-parse: 3.0.1
|
||||
dev: true
|
||||
|
||||
/vite-plugin-vuetify/1.0.1_mc6ujyzexjrcgjeph6am73m5wu:
|
||||
/vite-plugin-vuetify/1.0.1_bps52lyiebopdablgncd5xv5m4:
|
||||
resolution: {integrity: sha512-/xHsIDuHxq7f6fDqCBYxNascLhDi+X8dV3RzTwmo4mGPrSnGq9pHv8wJsXBIQIT3nY8s16V0lmd6sXMjm0F8wg==}
|
||||
engines: {node: '>=12'}
|
||||
peerDependencies:
|
||||
vite: ^2.7.0 || ^3.0.0 || ^4.0.0
|
||||
vuetify: ^3.0.0-beta.4
|
||||
dependencies:
|
||||
'@vuetify/loader-shared': 1.7.0_vue@3.2.45+vuetify@3.1.1
|
||||
'@vuetify/loader-shared': 1.7.0_vue@3.2.45+vuetify@3.1.3
|
||||
debug: 4.3.4
|
||||
upath: 2.0.1
|
||||
vite: 3.2.5_@types+node@16.18.11
|
||||
vuetify: 3.1.1_ihnv4ujwy6q3qcyepcitbzrajy
|
||||
vuetify: 3.1.3_ihnv4ujwy6q3qcyepcitbzrajy
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
- vue
|
||||
@ -2369,8 +2369,8 @@ packages:
|
||||
'@vue/server-renderer': 3.2.45_vue@3.2.45
|
||||
'@vue/shared': 3.2.45
|
||||
|
||||
/vuetify/3.1.1_ihnv4ujwy6q3qcyepcitbzrajy:
|
||||
resolution: {integrity: sha512-BkfRQZ406xQORpgrcUjuPaT/woO96ef/+2zHCfL3an+CrUhjG/sIAptEybHruq3xwFM0uJibDFqGiridsXc99w==}
|
||||
/vuetify/3.1.3_ihnv4ujwy6q3qcyepcitbzrajy:
|
||||
resolution: {integrity: sha512-QE/yXvHKDnlK9sjjMoZy9cAovNabpI97xg9RD+mAEDgSUaZNCX/jy7Qn0bP1DjJNeAsR2oAlcO0C2WhrsYe9kw==}
|
||||
engines: {node: ^12.20 || >=14.13}
|
||||
peerDependencies:
|
||||
vite-plugin-vuetify: ^1.0.0-alpha.12
|
||||
@ -2385,7 +2385,7 @@ packages:
|
||||
webpack-plugin-vuetify:
|
||||
optional: true
|
||||
dependencies:
|
||||
vite-plugin-vuetify: 1.0.1_mc6ujyzexjrcgjeph6am73m5wu
|
||||
vite-plugin-vuetify: 1.0.1_bps52lyiebopdablgncd5xv5m4
|
||||
vue: 3.2.45
|
||||
|
||||
/webfontloader/1.6.28:
|
||||
|
@ -3,7 +3,8 @@
|
||||
<navbar-component></navbar-component>
|
||||
<message-bar></message-bar>
|
||||
<webdav-settings-menu></webdav-settings-menu>
|
||||
<BackupConfigMenu></BackupConfigMenu>
|
||||
<backup-config-menu></backup-config-menu>
|
||||
<alert-manager></alert-manager>
|
||||
<v-main class="mx-12">
|
||||
<v-row>
|
||||
<v-col cols="6" offset="6">
|
||||
@ -15,11 +16,12 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import NavbarComponent from "./components/NavbarComponent.vue";
|
||||
import MessageBar from "./components/MessageBar.vue";
|
||||
import WebdavSettingsMenu from "./components/settings/WebdavConfigMenu.vue";
|
||||
import AlertManager from "./components/AlertManager.vue";
|
||||
import CloudList from "./components/cloud/CloudList.vue";
|
||||
import MessageBar from "./components/MessageBar.vue";
|
||||
import NavbarComponent from "./components/NavbarComponent.vue";
|
||||
import BackupConfigMenu from "./components/settings/BackupConfigMenu.vue";
|
||||
import WebdavSettingsMenu from "./components/settings/WebdavConfigMenu.vue";
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
56
nextcloud_backup/frontend/src/components/AlertManager.vue
Normal file
56
nextcloud_backup/frontend/src/components/AlertManager.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<v-fade-transition>
|
||||
<div id="alertContainer" v-if="alertVisible">
|
||||
<v-slide-x-transition group tag="div">
|
||||
<v-alert
|
||||
v-for="alert of alertList"
|
||||
v-bind:key="alert.id"
|
||||
elevation="24"
|
||||
:type="alert.type"
|
||||
border="start"
|
||||
class="mb-2"
|
||||
>
|
||||
<v-row dense>
|
||||
<v-col>
|
||||
{{ alert.message }}
|
||||
</v-col>
|
||||
<v-col cols="2">
|
||||
<v-btn
|
||||
class="d-inline"
|
||||
size="30"
|
||||
variant="text"
|
||||
rounded
|
||||
icon="$close"
|
||||
@click="alertStore.remove(alert.id)"
|
||||
></v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-progress-linear
|
||||
:max="alertStore.timeOutValue"
|
||||
:model-value="alert.timeOut"
|
||||
></v-progress-linear>
|
||||
</v-alert>
|
||||
</v-slide-x-transition>
|
||||
</div>
|
||||
</v-fade-transition>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useAlertStore } from "@/stores/alert";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { computed } from "vue";
|
||||
|
||||
const alertStore = useAlertStore();
|
||||
|
||||
const { alertList } = storeToRefs(alertStore);
|
||||
|
||||
const alertVisible = computed(() => alertList.value.length > 0);
|
||||
</script>
|
||||
<style>
|
||||
#alertContainer {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
right: 20px;
|
||||
z-index: 99999;
|
||||
}
|
||||
</style>
|
@ -12,7 +12,7 @@
|
||||
<v-card-text>
|
||||
<backup-config-form
|
||||
ref="form"
|
||||
@fail="saving = false"
|
||||
@fail="fail"
|
||||
@success="saved"
|
||||
@loaded="loading = false"
|
||||
@loading="loading = true"
|
||||
@ -39,6 +39,9 @@ import { useDialogStatusStore } from "@/stores/dialogStatus";
|
||||
import { computed, ref } from "vue";
|
||||
import { useMenuSize } from "@/composable/menuSize";
|
||||
import BackupConfigForm from "./BackupConfigForm.vue";
|
||||
import { useAlertStore } from "@/stores/alert";
|
||||
|
||||
const alertStore = useAlertStore();
|
||||
|
||||
const dialogStatusStore = useDialogStatusStore();
|
||||
const form = ref<InstanceType<typeof BackupConfigForm> | null>(null);
|
||||
@ -55,8 +58,14 @@ function save() {
|
||||
form.value?.save();
|
||||
}
|
||||
|
||||
function saved() {
|
||||
dialogStatusStore.webdav = false;
|
||||
function fail() {
|
||||
saving.value = false;
|
||||
alertStore.add("error", "Fail to save backup settings !");
|
||||
}
|
||||
|
||||
function saved() {
|
||||
dialogStatusStore.backup = false;
|
||||
saving.value = false;
|
||||
alertStore.add("success", "Backup settings saved !");
|
||||
}
|
||||
</script>
|
||||
|
@ -12,7 +12,7 @@
|
||||
<v-card-text>
|
||||
<webdav-settings-form
|
||||
ref="form"
|
||||
@fail="saving = false"
|
||||
@fail="fail"
|
||||
@success="saved"
|
||||
@loaded="loading = false"
|
||||
@loading="loading = true"
|
||||
@ -36,10 +36,13 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useMenuSize } from "@/composable/menuSize";
|
||||
import { useAlertStore } from "@/stores/alert";
|
||||
import { useDialogStatusStore } from "@/stores/dialogStatus";
|
||||
import { computed, ref } from "vue";
|
||||
import WebdavSettingsForm from "./WebdavConfigForm.vue";
|
||||
|
||||
const alertStore = useAlertStore();
|
||||
|
||||
const dialogStatusStore = useDialogStatusStore();
|
||||
const form = ref<InstanceType<typeof WebdavSettingsForm> | null>(null);
|
||||
const { width, isFullScreen } = useMenuSize();
|
||||
@ -55,8 +58,14 @@ function save() {
|
||||
form.value?.save();
|
||||
}
|
||||
|
||||
function fail() {
|
||||
saving.value = false;
|
||||
alertStore.add("error", "Fail to save cloud settings !");
|
||||
}
|
||||
|
||||
function saved() {
|
||||
dialogStatusStore.webdav = false;
|
||||
saving.value = false;
|
||||
alertStore.add("success", "Cloud settings saved !");
|
||||
}
|
||||
</script>
|
||||
|
42
nextcloud_backup/frontend/src/stores/alert.ts
Normal file
42
nextcloud_backup/frontend/src/stores/alert.ts
Normal file
@ -0,0 +1,42 @@
|
||||
import type { Alert } from "@/types/alert";
|
||||
import { defineStore } from "pinia";
|
||||
import { ref, type Ref } from "vue";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
|
||||
export const useAlertStore = defineStore("alert", () => {
|
||||
const alertList = ref([]) as Ref<Alert[]>;
|
||||
const timeOutValue = ref(100);
|
||||
|
||||
function add(
|
||||
type: "error" | "success" | "warning" | "info",
|
||||
message: string
|
||||
) {
|
||||
const alert: Alert = {
|
||||
id: uuidv4(),
|
||||
timeOut: ref(timeOutValue.value),
|
||||
interval: setInterval(() => {
|
||||
timeout(alert);
|
||||
}, 50),
|
||||
type: type,
|
||||
message: message,
|
||||
};
|
||||
alertList.value.push(alert);
|
||||
}
|
||||
|
||||
function timeout(alert: Alert) {
|
||||
if (alert.timeOut.value <= 0) {
|
||||
remove(alert.id!);
|
||||
} else {
|
||||
alert.timeOut.value--;
|
||||
}
|
||||
}
|
||||
|
||||
function remove(id: string) {
|
||||
const alertToRemove = alertList.value.find((value) => value.id == id);
|
||||
if (alertToRemove) {
|
||||
clearInterval(alertToRemove.interval);
|
||||
}
|
||||
alertList.value = alertList.value.filter((value) => value.id != id);
|
||||
}
|
||||
return { alertList, timeOutValue, add, remove };
|
||||
});
|
9
nextcloud_backup/frontend/src/types/alert.ts
Normal file
9
nextcloud_backup/frontend/src/types/alert.ts
Normal file
@ -0,0 +1,9 @@
|
||||
import type { Ref } from "vue";
|
||||
|
||||
export interface Alert {
|
||||
id: string;
|
||||
type: "error" | "success" | "warning" | "info";
|
||||
message: string;
|
||||
timeOut: Ref<number>;
|
||||
interval: number;
|
||||
}
|
Loading…
Reference in New Issue
Block a user