2021-11-11 23:37:42 +01:00
|
|
|
<script lang="ts">
|
|
|
|
import filesize from "filesize";
|
|
|
|
import { format, fromUnixTime } from "date-fns";
|
|
|
|
import type { OrderedListing } from "upend/types";
|
2021-12-11 21:26:55 +01:00
|
|
|
import Ellipsis from "../Ellipsis.svelte";
|
2021-11-11 23:37:42 +01:00
|
|
|
import Address from "../Address.svelte";
|
2021-12-04 23:06:21 +01:00
|
|
|
import { createEventDispatcher, getContext } from "svelte";
|
2021-12-02 18:45:29 +01:00
|
|
|
import type { AttributeChange } from "../../types/base";
|
2021-12-04 23:06:21 +01:00
|
|
|
import { useParams } from "svelte-navigator";
|
|
|
|
import type { Writable } from "svelte/store";
|
2021-12-02 18:45:29 +01:00
|
|
|
const dispatch = createEventDispatcher();
|
2021-12-04 23:06:21 +01:00
|
|
|
const params = useParams();
|
2021-11-11 23:37:42 +01:00
|
|
|
|
2021-12-01 15:39:26 +01:00
|
|
|
export let columns = "attribute, value";
|
|
|
|
export let header = true;
|
2021-11-30 22:59:34 +01:00
|
|
|
|
2021-11-11 23:37:42 +01:00
|
|
|
export let attributes: OrderedListing;
|
|
|
|
export let editable = false;
|
|
|
|
|
2021-12-01 15:39:26 +01:00
|
|
|
// Display
|
|
|
|
$: showEntity = columns.includes("entity");
|
|
|
|
$: showAttribute = columns.includes("attribute");
|
|
|
|
$: showValue = columns.includes("value");
|
|
|
|
|
2021-11-30 23:18:39 +01:00
|
|
|
// Editing
|
|
|
|
let newEntryAttribute = "'";
|
|
|
|
let newEntryValue = "";
|
|
|
|
|
2021-11-11 23:37:42 +01:00
|
|
|
async function addEntry() {
|
2021-12-02 18:45:29 +01:00
|
|
|
dispatch("change", {
|
|
|
|
type: "create",
|
|
|
|
attribute: newEntryAttribute,
|
|
|
|
value: newEntryValue,
|
|
|
|
} as AttributeChange);
|
|
|
|
newEntryAttribute = "";
|
|
|
|
newEntryValue = "";
|
2021-11-11 23:37:42 +01:00
|
|
|
}
|
|
|
|
async function removeEntry(addr: string) {
|
2021-12-02 18:45:29 +01:00
|
|
|
if (confirm("Are you sure you want to remove the attribute?")) {
|
|
|
|
dispatch("change", { type: "delete", addr } as AttributeChange);
|
|
|
|
}
|
2021-11-11 23:37:42 +01:00
|
|
|
}
|
|
|
|
async function updateEntry(addr: string, attribute: string, value: string) {
|
2021-12-02 18:45:29 +01:00
|
|
|
dispatch("change", {
|
|
|
|
type: "update",
|
|
|
|
addr,
|
|
|
|
value,
|
|
|
|
} as AttributeChange);
|
|
|
|
dispatch("change", {
|
|
|
|
type: "delete",
|
|
|
|
addr,
|
|
|
|
} as AttributeChange);
|
|
|
|
dispatch("change", {
|
|
|
|
type: "create",
|
|
|
|
attribute,
|
|
|
|
value,
|
|
|
|
} as AttributeChange);
|
2021-11-11 23:37:42 +01:00
|
|
|
}
|
|
|
|
|
2021-11-30 23:18:39 +01:00
|
|
|
// Sorting
|
2021-12-01 20:13:01 +01:00
|
|
|
let sortKeys: { [key: string]: string } = {};
|
2021-11-30 23:18:39 +01:00
|
|
|
$: sortedAttributes = attributes
|
|
|
|
.concat()
|
2021-12-01 20:07:42 +01:00
|
|
|
.sort(([_, aEntry], [__, bEntry]) => {
|
2021-11-30 23:18:39 +01:00
|
|
|
if (
|
2021-12-01 20:13:01 +01:00
|
|
|
sortKeys[aEntry.value.c] === undefined ||
|
|
|
|
sortKeys[bEntry.value.c] === undefined
|
2021-11-30 23:18:39 +01:00
|
|
|
) {
|
2021-12-01 20:13:01 +01:00
|
|
|
if (sortKeys[aEntry.value.c] && !sortKeys[bEntry.value.c]) {
|
|
|
|
return -1;
|
|
|
|
} else if (!sortKeys[aEntry.value.c] && sortKeys[bEntry.value.c]) {
|
|
|
|
return 1;
|
|
|
|
} else {
|
|
|
|
return aEntry.value.c.localeCompare(bEntry.value.c);
|
|
|
|
}
|
2021-11-30 23:18:39 +01:00
|
|
|
} else {
|
2021-12-01 20:13:01 +01:00
|
|
|
return sortKeys[aEntry.value.c].localeCompare(sortKeys[bEntry.value.c]);
|
2021-11-30 23:18:39 +01:00
|
|
|
}
|
|
|
|
})
|
|
|
|
.sort(([_, aEntry], [__, bEntry]) => {
|
|
|
|
return aEntry.attribute.localeCompare(bEntry.attribute);
|
|
|
|
})
|
|
|
|
.sort(([_, aEntry], [__, bEntry]) => {
|
2021-12-01 20:07:42 +01:00
|
|
|
if (
|
2021-12-01 20:13:01 +01:00
|
|
|
sortKeys[aEntry.entity] === undefined ||
|
|
|
|
sortKeys[bEntry.entity] === undefined
|
2021-12-01 20:07:42 +01:00
|
|
|
) {
|
2021-12-01 20:13:01 +01:00
|
|
|
if (sortKeys[aEntry.entity] && !sortKeys[bEntry.entity]) {
|
|
|
|
return -1;
|
|
|
|
} else if (!sortKeys[aEntry.entity] && sortKeys[bEntry.entity]) {
|
|
|
|
return 1;
|
|
|
|
} else {
|
|
|
|
return aEntry.entity.localeCompare(bEntry.entity);
|
|
|
|
}
|
2021-12-01 20:07:42 +01:00
|
|
|
} else {
|
2021-12-01 20:13:01 +01:00
|
|
|
return sortKeys[aEntry.entity].localeCompare(sortKeys[bEntry.entity]);
|
2021-12-01 20:07:42 +01:00
|
|
|
}
|
2021-11-30 23:18:39 +01:00
|
|
|
});
|
|
|
|
|
2021-12-04 23:06:21 +01:00
|
|
|
// Navigation highlights
|
|
|
|
const { index } = getContext("browse") as { index: Writable<number> };
|
|
|
|
$: addresses = $params.addresses.split(",");
|
|
|
|
|
2021-11-30 23:18:39 +01:00
|
|
|
// Formatting & Display
|
2021-11-11 23:37:42 +01:00
|
|
|
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 }),
|
|
|
|
};
|
|
|
|
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
2021-11-30 23:18:39 +01:00
|
|
|
|
|
|
|
// Optimizations
|
|
|
|
let resolve = [];
|
2021-11-11 23:37:42 +01:00
|
|
|
</script>
|
|
|
|
|
2021-11-30 22:59:34 +01:00
|
|
|
<table>
|
|
|
|
<colgroup>
|
|
|
|
{#if editable}
|
|
|
|
<col class="attr-action-col" />
|
|
|
|
{/if}
|
2021-12-01 15:39:26 +01:00
|
|
|
{#if showEntity}
|
2021-11-30 22:59:34 +01:00
|
|
|
<col class="entity-col" />
|
|
|
|
{/if}
|
2021-12-01 15:39:26 +01:00
|
|
|
{#if showAttribute}
|
2021-11-30 22:59:34 +01:00
|
|
|
<col class="attr-col" />
|
|
|
|
{/if}
|
2021-12-01 15:39:26 +01:00
|
|
|
{#if showValue}
|
2021-11-30 22:59:34 +01:00
|
|
|
<col class="val-col" />
|
|
|
|
{/if}
|
|
|
|
</colgroup>
|
|
|
|
|
2021-12-01 15:39:26 +01:00
|
|
|
{#if header}
|
|
|
|
<tr>
|
|
|
|
{#if editable}
|
|
|
|
<th />
|
|
|
|
{/if}
|
|
|
|
{#if showEntity}
|
|
|
|
<th>Entity</th>
|
|
|
|
{/if}
|
|
|
|
{#if showAttribute}
|
|
|
|
<th>Attribute</th>
|
|
|
|
{/if}
|
|
|
|
{#if showValue}
|
|
|
|
<th>Value</th>
|
|
|
|
{/if}
|
|
|
|
</tr>
|
|
|
|
{/if}
|
2021-11-30 22:59:34 +01:00
|
|
|
|
2021-11-30 23:18:39 +01:00
|
|
|
{#each sortedAttributes as [id, entry] (id)}
|
2021-12-04 23:06:21 +01:00
|
|
|
<tr
|
|
|
|
class:left-active={entry.entity == addresses[$index - 1] ||
|
|
|
|
entry.value.c == addresses[$index - 1]}
|
|
|
|
class:right-active={entry.value.c == addresses[$index + 1] ||
|
|
|
|
entry.entity == addresses[$index + 1]}
|
|
|
|
>
|
2021-11-11 23:37:42 +01:00
|
|
|
{#if editable}
|
2021-11-30 22:59:34 +01:00
|
|
|
<td class="attr-action">
|
|
|
|
<sl-icon-button name="x-circle" on:click={removeEntry(id)} />
|
|
|
|
</td>
|
2021-11-11 23:37:42 +01:00
|
|
|
{/if}
|
2021-11-30 22:59:34 +01:00
|
|
|
|
2021-12-01 15:39:26 +01:00
|
|
|
{#if showEntity}
|
2021-12-01 20:07:42 +01:00
|
|
|
<td class="entity">
|
|
|
|
<Address
|
|
|
|
link
|
|
|
|
address={entry.entity}
|
|
|
|
on:resolved={(event) => {
|
2021-12-01 20:13:01 +01:00
|
|
|
sortKeys[entry.entity] = event.detail[0];
|
2021-12-01 20:07:42 +01:00
|
|
|
}}
|
|
|
|
/>
|
2021-11-30 22:59:34 +01:00
|
|
|
</td>
|
2021-11-11 23:37:42 +01:00
|
|
|
{/if}
|
2021-11-30 22:59:34 +01:00
|
|
|
|
2021-12-01 15:39:26 +01:00
|
|
|
{#if showAttribute}
|
2021-11-30 22:59:34 +01:00
|
|
|
<td class:formatted={Boolean(formatAttribute(entry.attribute))}>
|
2021-12-11 21:37:12 +01:00
|
|
|
<Ellipsis
|
|
|
|
value={formatAttribute(entry.attribute) || entry.attribute}
|
|
|
|
/>
|
2021-11-30 22:59:34 +01:00
|
|
|
</td>
|
2021-11-11 23:37:42 +01:00
|
|
|
{/if}
|
2021-11-30 22:59:34 +01:00
|
|
|
|
2021-12-01 15:39:26 +01:00
|
|
|
{#if showValue}
|
2021-11-30 22:59:34 +01:00
|
|
|
<td class="value">
|
|
|
|
<text-input
|
|
|
|
{editable}
|
|
|
|
value={entry.value.c}
|
|
|
|
on:edit={(val) => updateEntry(id, entry.attribute, val)}
|
|
|
|
>
|
|
|
|
{#if entry.value.t === "Address"}
|
|
|
|
<Address
|
|
|
|
link
|
|
|
|
address={entry.value.c}
|
|
|
|
resolve={Boolean(resolve[id]) || true}
|
2021-11-30 23:18:39 +01:00
|
|
|
on:resolved={(event) => {
|
2021-12-01 20:13:01 +01:00
|
|
|
sortKeys[entry.value.c] = event.detail[0];
|
2021-11-30 23:18:39 +01:00
|
|
|
}}
|
2021-11-30 22:59:34 +01:00
|
|
|
/>
|
|
|
|
{:else}
|
|
|
|
<div
|
|
|
|
class:formatted={Boolean(
|
|
|
|
formatValue(entry.value.c, entry.attribute)
|
|
|
|
)}
|
|
|
|
>
|
2021-12-11 21:37:12 +01:00
|
|
|
<Ellipsis
|
|
|
|
value={formatValue(entry.value.c, entry.attribute) ||
|
|
|
|
entry.value.c}
|
|
|
|
/>
|
2021-11-30 22:59:34 +01:00
|
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
</text-input>
|
|
|
|
</td>
|
|
|
|
{/if}
|
|
|
|
</tr>
|
|
|
|
{/each}
|
|
|
|
|
|
|
|
{#if editable}
|
|
|
|
<tr>
|
|
|
|
<td class="attr-action">
|
2021-12-02 18:45:29 +01:00
|
|
|
<sl-icon-button name="plus-circle" on:click={addEntry} />
|
2021-11-30 22:59:34 +01:00
|
|
|
</td>
|
2021-12-01 15:39:26 +01:00
|
|
|
{#if showAttribute}
|
2021-11-30 22:59:34 +01:00
|
|
|
<td>
|
2021-12-02 18:45:29 +01:00
|
|
|
<sl-input
|
|
|
|
on:sl-input={(ev) => (newEntryAttribute = ev.target.value)}
|
|
|
|
size="small"
|
|
|
|
/>
|
2021-11-30 22:59:34 +01:00
|
|
|
</td>
|
|
|
|
{/if}
|
2021-12-01 15:39:26 +01:00
|
|
|
{#if showValue}
|
2021-11-30 22:59:34 +01:00
|
|
|
<td>
|
2021-12-02 18:45:29 +01:00
|
|
|
<sl-input
|
|
|
|
on:sl-input={(ev) => (newEntryValue = ev.target.value)}
|
|
|
|
size="small"
|
|
|
|
/>
|
2021-11-30 22:59:34 +01:00
|
|
|
</td>
|
|
|
|
{/if}
|
|
|
|
</tr>
|
|
|
|
{/if}
|
|
|
|
</table>
|
2021-11-11 23:37:42 +01:00
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
table {
|
|
|
|
width: 100%;
|
|
|
|
table-layout: fixed;
|
|
|
|
|
2021-12-06 14:35:18 +01:00
|
|
|
border-spacing: 0.5em 0;
|
2021-12-05 13:29:06 +01:00
|
|
|
|
2021-12-04 23:06:21 +01:00
|
|
|
tr {
|
2021-12-11 21:37:12 +01:00
|
|
|
$active-color: hsl(22, 70%, 40%);
|
2021-12-04 23:06:21 +01:00
|
|
|
&.left-active {
|
2021-12-06 14:35:18 +01:00
|
|
|
td:first-child {
|
|
|
|
background: linear-gradient(
|
|
|
|
90deg,
|
2021-12-11 21:37:12 +01:00
|
|
|
$active-color 0%,
|
|
|
|
transparent 100%
|
2021-12-06 14:35:18 +01:00
|
|
|
);
|
|
|
|
}
|
2021-12-04 23:06:21 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
&.right-active {
|
2021-12-06 14:35:18 +01:00
|
|
|
td:last-child {
|
|
|
|
background: linear-gradient(
|
|
|
|
90deg,
|
2021-12-11 21:37:12 +01:00
|
|
|
transparent 0%,
|
|
|
|
$active-color 100%
|
2021-12-06 14:35:18 +01:00
|
|
|
);
|
|
|
|
}
|
2021-12-04 23:06:21 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-11-11 23:37:42 +01:00
|
|
|
th {
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
|
|
|
|
td {
|
|
|
|
font-family: var(--monospace-font);
|
|
|
|
line-break: anywhere;
|
|
|
|
|
2021-12-06 15:24:00 +01:00
|
|
|
border-radius: 4px;
|
|
|
|
padding: 2px;
|
|
|
|
|
2021-11-11 23:37:42 +01:00
|
|
|
&.attr-action {
|
|
|
|
max-width: 1em;
|
|
|
|
}
|
|
|
|
|
2021-12-01 16:04:23 +01:00
|
|
|
&.formatted,
|
|
|
|
.formatted {
|
2021-11-11 23:37:42 +01:00
|
|
|
font-family: var(--default-font);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.attr-action-col {
|
|
|
|
width: 1.5em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.attr-col {
|
|
|
|
width: 33%;
|
|
|
|
}
|
|
|
|
|
|
|
|
sl-icon-button {
|
|
|
|
&::part(base) {
|
|
|
|
padding: 2px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|