mirror of
https://github.com/Sebclem/hassio-nextcloud-backup.git
synced 2024-11-09 19:12:58 +01:00
🔨 Show detail in cloud list view
This commit is contained in:
parent
97436489c6
commit
84d45f6236
@ -139,7 +139,7 @@ function parseXmlBackupData(body: string) {
|
||||
backups.push({
|
||||
id: id,
|
||||
lastEdit: lastEdit,
|
||||
size: propstat["d:prop"]["d:getcontentlenght"],
|
||||
size: propstat["d:prop"]["d:getcontentlength"],
|
||||
name: name,
|
||||
});
|
||||
}
|
||||
|
@ -17,6 +17,7 @@
|
||||
"ky": "^0.31.4",
|
||||
"luxon": "^3.0.4",
|
||||
"pinia": "^2.0.23",
|
||||
"pretty-bytes": "^6.0.0",
|
||||
"roboto-fontface": "*",
|
||||
"vue": "^3.2.40",
|
||||
"vuetify": "3.0.0-beta.15",
|
||||
|
@ -18,6 +18,7 @@ specifiers:
|
||||
npm-run-all: ^4.1.5
|
||||
pinia: ^2.0.23
|
||||
prettier: ^2.7.1
|
||||
pretty-bytes: ^6.0.0
|
||||
roboto-fontface: '*'
|
||||
typescript: ~4.7.4
|
||||
vite: ^3.1.7
|
||||
@ -34,6 +35,7 @@ dependencies:
|
||||
ky: 0.31.4
|
||||
luxon: 3.0.4
|
||||
pinia: 2.0.23_rg374xhldfcyvjtaj3qktyfz5y
|
||||
pretty-bytes: 6.0.0
|
||||
roboto-fontface: 0.10.0
|
||||
vue: 3.2.40
|
||||
vuetify: 3.0.0-beta.15_vdkwhj2kz5kpysy3rwb432nm3y
|
||||
@ -1841,6 +1843,11 @@ packages:
|
||||
hasBin: 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:
|
||||
resolution: {integrity: sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==}
|
||||
engines: {node: '>=6'}
|
||||
|
@ -31,18 +31,23 @@
|
||||
@click="show[index] = show[index] ? false : true"
|
||||
size="small"
|
||||
>
|
||||
<v-icon>mdi-information</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="success"
|
||||
variant="text"
|
||||
@click="markReaded(item.id)"
|
||||
icon
|
||||
v-if="!item.viewed"
|
||||
size="small"
|
||||
>
|
||||
<v-icon>mdi-check</v-icon>
|
||||
<v-icon>
|
||||
{{ show[index] ? "mdi-chevron-up" : "mdi-information" }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
<v-scroll-x-transition>
|
||||
<v-btn
|
||||
color="success"
|
||||
variant="text"
|
||||
@click="markReaded(item.id)"
|
||||
icon
|
||||
v-show="!item.viewed"
|
||||
size="small"
|
||||
>
|
||||
<v-icon>mdi-check</v-icon>
|
||||
</v-btn>
|
||||
</v-scroll-x-transition>
|
||||
|
||||
<div class="text-caption text-disabled ml-1">
|
||||
{{ getTimeDelta(item.time) }}
|
||||
</div>
|
||||
|
@ -16,23 +16,13 @@
|
||||
class="text-center text-subtitle-2 text-disabled"
|
||||
>Folder is empty</v-list-item
|
||||
>
|
||||
<template v-for="(item, index) in autoBackups" :key="item.id">
|
||||
<v-divider
|
||||
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>
|
||||
<cloud-list-item
|
||||
v-for="(item, index) in autoBackups"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
:index="index"
|
||||
>
|
||||
</cloud-list-item>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@ -50,26 +40,13 @@
|
||||
class="text-center text-subtitle-2 text-disabled"
|
||||
>Folder is empty</v-list-item
|
||||
>
|
||||
<template
|
||||
<cloud-list-item
|
||||
v-for="(item, index) in manualBackups"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
:index="index"
|
||||
>
|
||||
<v-divider
|
||||
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>
|
||||
</cloud-list-item>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@ -88,6 +65,9 @@ import {
|
||||
getManualBackupList,
|
||||
} from "@/services/webdavService";
|
||||
|
||||
import CloudListItem from "./CloudListItem.vue";
|
||||
|
||||
const popup = ref(false);
|
||||
const autoBackups = ref<WebdavBackup[]>([]);
|
||||
const manualBackups = ref<WebdavBackup[]>([]);
|
||||
function refreshBackup() {
|
||||
@ -98,6 +78,5 @@ function refreshBackup() {
|
||||
manualBackups.value = value;
|
||||
});
|
||||
}
|
||||
|
||||
refreshBackup();
|
||||
</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;
|
||||
name: string;
|
||||
size: number;
|
||||
lastEdit: DateTime;
|
||||
lastEdit: string;
|
||||
}
|
Loading…
Reference in New Issue
Block a user