🔨 Show detail in cloud list view

This commit is contained in:
SebClem 2022-10-27 19:02:06 +02:00
parent 97436489c6
commit 84d45f6236
Signed by: sebclem
GPG Key ID: 5A4308F6A359EA50
7 changed files with 113 additions and 48 deletions

View File

@ -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,
}); });
} }

View File

@ -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",

View File

@ -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'}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -4,5 +4,5 @@ export interface WebdavBackup {
id: string; id: string;
name: string; name: string;
size: number; size: number;
lastEdit: DateTime; lastEdit: string;
} }