mirror of
https://github.com/Sebclem/hassio-nextcloud-backup.git
synced 2024-11-09 02:52:58 +01:00
🔨 Show detail in cloud list view
This commit is contained in:
parent
a178ef246d
commit
07235fda1d
@ -139,7 +139,7 @@ function parseXmlBackupData(body: string) {
|
|||||||
backups.push({
|
backups.push({
|
||||||
id: id,
|
id: id,
|
||||||
lastEdit: lastEdit,
|
lastEdit: lastEdit,
|
||||||
size: propstat["d:prop"]["d:getcontentlenght"],
|
size: propstat["d:prop"]["d:getcontentlength"],
|
||||||
name: name,
|
name: name,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -17,6 +17,7 @@
|
|||||||
"ky": "^0.31.4",
|
"ky": "^0.31.4",
|
||||||
"luxon": "^3.0.4",
|
"luxon": "^3.0.4",
|
||||||
"pinia": "^2.0.23",
|
"pinia": "^2.0.23",
|
||||||
|
"pretty-bytes": "^6.0.0",
|
||||||
"roboto-fontface": "*",
|
"roboto-fontface": "*",
|
||||||
"vue": "^3.2.40",
|
"vue": "^3.2.40",
|
||||||
"vuetify": "3.0.0-beta.15",
|
"vuetify": "3.0.0-beta.15",
|
||||||
|
@ -18,6 +18,7 @@ specifiers:
|
|||||||
npm-run-all: ^4.1.5
|
npm-run-all: ^4.1.5
|
||||||
pinia: ^2.0.23
|
pinia: ^2.0.23
|
||||||
prettier: ^2.7.1
|
prettier: ^2.7.1
|
||||||
|
pretty-bytes: ^6.0.0
|
||||||
roboto-fontface: '*'
|
roboto-fontface: '*'
|
||||||
typescript: ~4.7.4
|
typescript: ~4.7.4
|
||||||
vite: ^3.1.7
|
vite: ^3.1.7
|
||||||
@ -34,6 +35,7 @@ dependencies:
|
|||||||
ky: 0.31.4
|
ky: 0.31.4
|
||||||
luxon: 3.0.4
|
luxon: 3.0.4
|
||||||
pinia: 2.0.23_rg374xhldfcyvjtaj3qktyfz5y
|
pinia: 2.0.23_rg374xhldfcyvjtaj3qktyfz5y
|
||||||
|
pretty-bytes: 6.0.0
|
||||||
roboto-fontface: 0.10.0
|
roboto-fontface: 0.10.0
|
||||||
vue: 3.2.40
|
vue: 3.2.40
|
||||||
vuetify: 3.0.0-beta.15_vdkwhj2kz5kpysy3rwb432nm3y
|
vuetify: 3.0.0-beta.15_vdkwhj2kz5kpysy3rwb432nm3y
|
||||||
@ -1841,6 +1843,11 @@ packages:
|
|||||||
hasBin: true
|
hasBin: true
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/pretty-bytes/6.0.0:
|
||||||
|
resolution: {integrity: sha512-6UqkYefdogmzqAZWzJ7laYeJnaXDy2/J+ZqiiMtS7t7OfpXWTlaeGMwX8U6EFvPV/YWWEKRkS8hKS4k60WHTOg==}
|
||||||
|
engines: {node: ^14.13.1 || >=16.0.0}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/punycode/2.1.1:
|
/punycode/2.1.1:
|
||||||
resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
|
resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
|
||||||
engines: {node: '>=6'}
|
engines: {node: '>=6'}
|
||||||
|
@ -31,18 +31,23 @@
|
|||||||
@click="show[index] = show[index] ? false : true"
|
@click="show[index] = show[index] ? false : true"
|
||||||
size="small"
|
size="small"
|
||||||
>
|
>
|
||||||
<v-icon>mdi-information</v-icon>
|
<v-icon>
|
||||||
|
{{ show[index] ? "mdi-chevron-up" : "mdi-information" }}
|
||||||
|
</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
|
<v-scroll-x-transition>
|
||||||
<v-btn
|
<v-btn
|
||||||
color="success"
|
color="success"
|
||||||
variant="text"
|
variant="text"
|
||||||
@click="markReaded(item.id)"
|
@click="markReaded(item.id)"
|
||||||
icon
|
icon
|
||||||
v-if="!item.viewed"
|
v-show="!item.viewed"
|
||||||
size="small"
|
size="small"
|
||||||
>
|
>
|
||||||
<v-icon>mdi-check</v-icon>
|
<v-icon>mdi-check</v-icon>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
|
</v-scroll-x-transition>
|
||||||
|
|
||||||
<div class="text-caption text-disabled ml-1">
|
<div class="text-caption text-disabled ml-1">
|
||||||
{{ getTimeDelta(item.time) }}
|
{{ getTimeDelta(item.time) }}
|
||||||
</div>
|
</div>
|
||||||
|
@ -16,23 +16,13 @@
|
|||||||
class="text-center text-subtitle-2 text-disabled"
|
class="text-center text-subtitle-2 text-disabled"
|
||||||
>Folder is empty</v-list-item
|
>Folder is empty</v-list-item
|
||||||
>
|
>
|
||||||
<template v-for="(item, index) in autoBackups" :key="item.id">
|
<cloud-list-item
|
||||||
<v-divider
|
v-for="(item, index) in autoBackups"
|
||||||
v-if="index != 0"
|
:key="item.id"
|
||||||
color="grey-darken-3"
|
:item="item"
|
||||||
></v-divider>
|
:index="index"
|
||||||
<v-list-item>
|
>
|
||||||
<v-list-item-title>{{ item.name }}</v-list-item-title>
|
</cloud-list-item>
|
||||||
<template v-slot:append>
|
|
||||||
<v-btn variant="text" icon color="secondary">
|
|
||||||
<v-icon>mdi-information</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
<v-btn variant="text" icon color="red">
|
|
||||||
<v-icon>mdi-trash-can</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</template>
|
|
||||||
</v-list-item>
|
|
||||||
</template>
|
|
||||||
</v-list>
|
</v-list>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
@ -50,26 +40,13 @@
|
|||||||
class="text-center text-subtitle-2 text-disabled"
|
class="text-center text-subtitle-2 text-disabled"
|
||||||
>Folder is empty</v-list-item
|
>Folder is empty</v-list-item
|
||||||
>
|
>
|
||||||
<template
|
<cloud-list-item
|
||||||
v-for="(item, index) in manualBackups"
|
v-for="(item, index) in manualBackups"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
|
:item="item"
|
||||||
|
:index="index"
|
||||||
>
|
>
|
||||||
<v-divider
|
</cloud-list-item>
|
||||||
v-if="index != 0"
|
|
||||||
color="grey-darken-3"
|
|
||||||
></v-divider>
|
|
||||||
<v-list-item>
|
|
||||||
<v-list-item-title>{{ item.name }}</v-list-item-title>
|
|
||||||
<template v-slot:append>
|
|
||||||
<v-btn variant="text" icon color="secondary">
|
|
||||||
<v-icon>mdi-information</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
<v-btn variant="text" icon color="red">
|
|
||||||
<v-icon>mdi-trash-can</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</template>
|
|
||||||
</v-list-item>
|
|
||||||
</template>
|
|
||||||
</v-list>
|
</v-list>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
@ -88,6 +65,9 @@ import {
|
|||||||
getManualBackupList,
|
getManualBackupList,
|
||||||
} from "@/services/webdavService";
|
} from "@/services/webdavService";
|
||||||
|
|
||||||
|
import CloudListItem from "./CloudListItem.vue";
|
||||||
|
|
||||||
|
const popup = ref(false);
|
||||||
const autoBackups = ref<WebdavBackup[]>([]);
|
const autoBackups = ref<WebdavBackup[]>([]);
|
||||||
const manualBackups = ref<WebdavBackup[]>([]);
|
const manualBackups = ref<WebdavBackup[]>([]);
|
||||||
function refreshBackup() {
|
function refreshBackup() {
|
||||||
@ -98,6 +78,5 @@ function refreshBackup() {
|
|||||||
manualBackups.value = value;
|
manualBackups.value = value;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
refreshBackup();
|
refreshBackup();
|
||||||
</script>
|
</script>
|
||||||
|
@ -0,0 +1,73 @@
|
|||||||
|
<template>
|
||||||
|
<v-divider v-if="index != 0" color="grey-darken-3"></v-divider>
|
||||||
|
<v-list-item>
|
||||||
|
<v-list-item-title class="text-deep-orange-darken-3">{{
|
||||||
|
item.name
|
||||||
|
}}</v-list-item-title>
|
||||||
|
<template v-slot:append>
|
||||||
|
<v-scroll-x-transition>
|
||||||
|
<v-chip
|
||||||
|
color="primary"
|
||||||
|
variant="flat"
|
||||||
|
size="small"
|
||||||
|
class="mr-2"
|
||||||
|
v-show="!detail"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
DateTime.fromISO(item.lastEdit).toLocaleString(
|
||||||
|
DateTime.DATETIME_SHORT
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
</v-chip>
|
||||||
|
</v-scroll-x-transition>
|
||||||
|
|
||||||
|
<v-btn variant="text" icon color="secondary" @click="detail = !detail">
|
||||||
|
<v-icon>{{ detail ? "mdi-chevron-up" : "mdi-information" }}</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
</v-list-item>
|
||||||
|
<v-expand-transition>
|
||||||
|
<v-card v-show="detail" variant="tonal" color="secondary" rounded="0">
|
||||||
|
<v-card-text class="d-flex justify-center">
|
||||||
|
<v-chip color="primary" variant="flat" class="mr-2" label>
|
||||||
|
<v-icon start icon="mdi-pencil"></v-icon>
|
||||||
|
{{
|
||||||
|
DateTime.fromISO(item.lastEdit).toLocaleString(
|
||||||
|
DateTime.DATETIME_SHORT
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
</v-chip>
|
||||||
|
<v-chip color="success" variant="flat" label>
|
||||||
|
<v-icon start icon="mdi-database"></v-icon>
|
||||||
|
{{ prettyBytes(item.size) }}
|
||||||
|
</v-chip>
|
||||||
|
</v-card-text>
|
||||||
|
<v-divider class="mx-4"></v-divider>
|
||||||
|
<v-card-actions class="justify-center">
|
||||||
|
<v-tooltip text="Upload to Home Assitant" location="bottom">
|
||||||
|
<template v-slot:activator="{ props }">
|
||||||
|
<v-btn variant="outlined" color="success" v-bind="props">
|
||||||
|
<v-icon>mdi-upload</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
</v-tooltip>
|
||||||
|
<v-btn variant="outlined" color="red">
|
||||||
|
<v-icon>mdi-trash-can</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-expand-transition>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { WebdavBackup } from "@/types/webdav";
|
||||||
|
import prettyBytes from "pretty-bytes";
|
||||||
|
import { DateTime } from "luxon";
|
||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
const detail = ref(false);
|
||||||
|
defineProps<{
|
||||||
|
item: WebdavBackup;
|
||||||
|
index: number;
|
||||||
|
}>();
|
||||||
|
</script>
|
@ -4,5 +4,5 @@ export interface WebdavBackup {
|
|||||||
id: string;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
size: number;
|
size: number;
|
||||||
lastEdit: DateTime;
|
lastEdit: string;
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user