diff --git a/ui/package.json b/ui/package.json index cb9d2cb..b0bbdd0 100644 --- a/ui/package.json +++ b/ui/package.json @@ -11,6 +11,7 @@ "@shoelace-style/shoelace": "^2.0.0-beta.40", "core-js": "^3.12.1", "date-fns": "^2.21.3", + "filesize": "^8.0.3", "normalize.css": "^8.0.1", "sass": "^1.34.0", "sass-loader": "^10.2.0", diff --git a/ui/src/components/widgets/Table.vue b/ui/src/components/widgets/Table.vue index 57f6b4f..356180f 100644 --- a/ui/src/components/widgets/Table.vue +++ b/ui/src/components/widgets/Table.vue @@ -21,9 +21,15 @@ /> - {{ entry.attribute }} + + {{ formatAttribute(entry.attribute) || entry.attribute }} + - + - - {{ entry.value.c }} + + {{ + formatValue(entry.value.c, entry.attribute) || entry.value.c + }} @@ -103,6 +118,8 @@ import { ref, watchEffect, } from "vue"; +import filesize from "filesize"; +import { format, fromUnixTime } from "date-fns"; export default defineComponent({ name: "Table", @@ -163,6 +180,17 @@ export default defineComponent({ return props.attributes.slice(0, currentDisplay.value); }); + function formatAttribute(attribute: string) { + return ATTRIBUTE_LABELS[attribute]; + } + + function formatValue(value: string, attribute: string): string | undefined { + const handler = VALUE_FORMATTERS[attribute]; + if (handler) { + return handler(value); + } + } + return { editable, addressEls, @@ -170,6 +198,8 @@ export default defineComponent({ limitedAttributes, currentDisplay, MAX_DISPLAY, + formatAttribute, + formatValue, }; }, methods: { @@ -208,6 +238,17 @@ export default defineComponent({ }, }, }); + +const ATTRIBUTE_LABELS: { [key: string]: string } = { + FILE_MIME: "MIME type", + FILE_MTIME: "Last modified", + FILE_SIZE: "File size", +}; + +const VALUE_FORMATTERS: { [key: string]: (val: string) => string } = { + FILE_MTIME: (val) => format(fromUnixTime(parseInt(val, 10)), "PPpp"), + FILE_SIZE: (val) => filesize(parseInt(val, 10), { base: 2 }), +};