[Front] Remove auto refresh and add refresh button

This commit is contained in:
SebClem 2024-04-18 10:48:42 +02:00
parent 16c76b80e1
commit 1b9d9d7aad
Signed by: sebclem
GPG Key ID: 5A4308F6A359EA50
2 changed files with 50 additions and 21 deletions

View File

@ -1,7 +1,20 @@
<template> <template>
<div> <div>
<v-card elevation="10" class="mt-10" border> <v-card elevation="10" border>
<v-row align="center" justify="center">
<v-col offset="2">
<v-card-title class="text-center"> Cloud </v-card-title> <v-card-title class="text-center"> Cloud </v-card-title>
</v-col>
<v-col cols="2">
<v-btn
class="float-right mr-2"
icon="mdi-refresh"
variant="text"
@click="refreshBackup"
:loading="loading"
></v-btn>
</v-col>
</v-row>
<v-divider></v-divider> <v-divider></v-divider>
<v-card-text> <v-card-text>
<v-row> <v-row>
@ -81,12 +94,22 @@ const deleteDialog = ref<InstanceType<typeof CloudDeleteDialog> | null>(null);
const deleteItem = ref<WebdavBackup | null>(null); const deleteItem = ref<WebdavBackup | null>(null);
const autoBackups = ref<WebdavBackup[]>([]); const autoBackups = ref<WebdavBackup[]>([]);
const manualBackups = ref<WebdavBackup[]>([]); const manualBackups = ref<WebdavBackup[]>([]);
const loading = ref<boolean>(true);
function refreshBackup() { function refreshBackup() {
getAutoBackupList().then((value) => { loading.value = true;
getAutoBackupList()
.then((value) => {
autoBackups.value = value; autoBackups.value = value;
}); return getManualBackupList();
getManualBackupList().then((value) => { })
.then((value) => {
manualBackups.value = value; manualBackups.value = value;
loading.value = false;
})
.catch(() => {
loading.value = false;
}); });
} }
@ -95,10 +118,5 @@ function deleteBackup(item: WebdavBackup) {
deleteDialog.value?.open(item); deleteDialog.value?.open(item);
} }
refreshBackup(); refreshBackup();
defineExpose({ refreshBackup });
const interval = setInterval(refreshBackup, 2000);
onBeforeUnmount(() => {
clearInterval(interval);
});
</script> </script>

View File

@ -1,7 +1,20 @@
<template> <template>
<div> <div>
<v-card elevation="10" class="mt-10" border> <v-card elevation="10" border>
<v-row align="center" justify="center">
<v-col offset="2">
<v-card-title class="text-center"> Home Assistant </v-card-title> <v-card-title class="text-center"> Home Assistant </v-card-title>
</v-col>
<v-col cols="2">
<v-btn
class="float-right mr-2"
icon="mdi-refresh"
variant="text"
@click="refreshBackup"
:loading="loading"
></v-btn>
</v-col>
</v-row>
<v-divider></v-divider> <v-divider></v-divider>
<v-card-text> <v-card-text>
<v-row> <v-row>
@ -43,19 +56,17 @@ import { getBackups } from "@/services/homeAssistantService";
import HaListItem from "./HaListItem.vue"; import HaListItem from "./HaListItem.vue";
const backups = ref<BackupModel[]>([]); const backups = ref<BackupModel[]>([]);
const loading = ref<boolean>(true);
function refreshBackup() { function refreshBackup() {
loading.value = true;
getBackups().then((value) => { getBackups().then((value) => {
backups.value = value; backups.value = value;
loading.value = false;
}); });
} }
refreshBackup(); refreshBackup();
const interval = setInterval(refreshBackup, 2000);
onBeforeUnmount(() => {
clearInterval(interval);
});
// TODO Manage delete // TODO Manage delete
</script> </script>