2021-11-11 23:37:42 +01:00
|
|
|
<script lang="ts">
|
|
|
|
import AttributeView from "./AttributeView.svelte";
|
|
|
|
import { query, useEntity } from "../lib/entity";
|
2021-12-21 20:02:47 +01:00
|
|
|
import UpObject from "./display/UpObject.svelte";
|
2021-11-11 23:37:42 +01:00
|
|
|
import { UpType } from "../lib/types";
|
2021-12-21 20:02:47 +01:00
|
|
|
import BlobPreview from "./display/BlobPreview.svelte";
|
2022-02-06 14:16:21 +01:00
|
|
|
import { onMount, setContext } from "svelte";
|
2021-12-02 23:27:09 +01:00
|
|
|
import { writable } from "svelte/store";
|
2021-12-19 13:54:16 +01:00
|
|
|
import type { UpEntry } from "upend";
|
2022-01-21 15:57:53 +01:00
|
|
|
import Spinner from "./utils/Spinner.svelte";
|
2022-01-22 20:19:26 +01:00
|
|
|
import NotesEditor from "./utils/NotesEditor.svelte";
|
|
|
|
import type { AttributeChange } from "../types/base";
|
2022-01-30 16:30:14 +01:00
|
|
|
import Selector from "./utils/Selector.svelte";
|
|
|
|
import type { IValue } from "upend/types";
|
2022-01-30 16:40:48 +01:00
|
|
|
import IconButton from "./utils/IconButton.svelte";
|
2021-11-11 23:37:42 +01:00
|
|
|
|
|
|
|
export let address: string;
|
2021-12-02 23:27:09 +01:00
|
|
|
export let index: number | undefined;
|
2021-11-11 23:37:42 +01:00
|
|
|
export let editable = false;
|
|
|
|
|
2021-12-02 23:27:09 +01:00
|
|
|
let indexStore = writable(index);
|
|
|
|
$: $indexStore = index;
|
|
|
|
|
|
|
|
setContext("browse", { index: indexStore });
|
|
|
|
|
2021-12-19 13:54:16 +01:00
|
|
|
$: ({ entity, error, revalidate } = useEntity(address));
|
2021-11-11 23:37:42 +01:00
|
|
|
|
2021-12-19 13:54:16 +01:00
|
|
|
$: allTypeAddresses = ($entity?.attr["IS"] || []).map((attr) => attr.value.c);
|
2021-11-11 23:37:42 +01:00
|
|
|
|
|
|
|
$: allTypeEntries = query(
|
2022-02-06 22:27:56 +01:00
|
|
|
`(matches (in ${allTypeAddresses
|
|
|
|
.map((addr) => `"${addr}"`)
|
|
|
|
.join(" ")}) ? ?)`
|
2021-11-11 23:37:42 +01:00
|
|
|
).result;
|
|
|
|
|
|
|
|
let allTypes: { [key: string]: UpType } = {};
|
|
|
|
$: {
|
|
|
|
allTypes = {};
|
2021-12-19 13:54:16 +01:00
|
|
|
($allTypeEntries?.entries || []).forEach((entry) => {
|
2021-11-11 23:37:42 +01:00
|
|
|
if (allTypes[entry.entity] === undefined) {
|
|
|
|
allTypes[entry.entity] = new UpType(entry.entity);
|
|
|
|
}
|
|
|
|
|
|
|
|
switch (entry.attribute) {
|
|
|
|
case "TYPE":
|
2021-12-19 13:54:16 +01:00
|
|
|
allTypes[entry.entity].name = String(entry.value.c);
|
2021-11-11 23:37:42 +01:00
|
|
|
break;
|
2022-01-28 23:27:09 +01:00
|
|
|
case "LBL":
|
|
|
|
allTypes[entry.entity].label = String(entry.value.c);
|
|
|
|
break;
|
2021-11-11 23:37:42 +01:00
|
|
|
case "TYPE_HAS":
|
2021-12-19 13:54:16 +01:00
|
|
|
allTypes[entry.entity].attributes.push(String(entry.value.c));
|
2021-11-11 23:37:42 +01:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
allTypes = allTypes;
|
|
|
|
}
|
|
|
|
|
2021-12-19 13:54:16 +01:00
|
|
|
let typedAttributes = {} as { [key: string]: UpEntry[] };
|
|
|
|
let untypedAttributes = [] as UpEntry[];
|
2021-11-11 23:37:42 +01:00
|
|
|
|
|
|
|
$: {
|
|
|
|
typedAttributes = {};
|
|
|
|
untypedAttributes = [];
|
|
|
|
|
2021-12-19 13:54:16 +01:00
|
|
|
($entity?.attributes || []).forEach((entry) => {
|
2021-11-11 23:37:42 +01:00
|
|
|
const entryTypes = Object.entries(allTypes).filter(([_, t]) =>
|
|
|
|
t.attributes.includes(entry.attribute)
|
|
|
|
);
|
|
|
|
if (entryTypes.length > 0) {
|
|
|
|
entryTypes.forEach(([addr, _]) => {
|
|
|
|
if (typedAttributes[addr] == undefined) {
|
|
|
|
typedAttributes[addr] = [];
|
|
|
|
}
|
2021-12-19 13:54:16 +01:00
|
|
|
typedAttributes[addr].push(entry);
|
2021-11-11 23:37:42 +01:00
|
|
|
});
|
|
|
|
} else {
|
2021-12-19 13:54:16 +01:00
|
|
|
untypedAttributes.push(entry);
|
2021-11-11 23:37:42 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
typedAttributes = typedAttributes;
|
2022-01-21 15:57:53 +01:00
|
|
|
untypedAttributes = untypedAttributes;
|
2021-11-11 23:37:42 +01:00
|
|
|
}
|
2022-01-21 15:57:53 +01:00
|
|
|
|
|
|
|
$: filteredUntypedAttributes = untypedAttributes.filter(
|
2022-02-02 17:58:53 +01:00
|
|
|
(entry) => !["IS", "LBL", "NOTE", "LAST_VISITED"].includes(entry.attribute)
|
2022-01-21 15:57:53 +01:00
|
|
|
);
|
|
|
|
|
|
|
|
$: currentUntypedAttributes = editable
|
|
|
|
? untypedAttributes
|
|
|
|
: filteredUntypedAttributes;
|
2022-01-22 20:19:26 +01:00
|
|
|
|
2022-01-28 22:39:08 +01:00
|
|
|
$: currentBacklinks =
|
|
|
|
(editable
|
|
|
|
? $entity?.backlinks
|
|
|
|
: $entity?.backlinks.filter(
|
|
|
|
(entry) => !["HAS"].includes(entry.attribute)
|
|
|
|
)) || [];
|
|
|
|
|
2022-01-28 23:32:13 +01:00
|
|
|
$: groups = ($entity?.backlinks || [])
|
2022-01-28 22:39:08 +01:00
|
|
|
.filter((e) => e.attribute === "HAS")
|
2022-01-30 16:40:48 +01:00
|
|
|
.map((e) => [e.address, e.entity])
|
2022-01-30 16:30:14 +01:00
|
|
|
.sort(); // TODO
|
2022-01-28 22:39:08 +01:00
|
|
|
|
2022-01-22 20:19:26 +01:00
|
|
|
async function onChange(ev: CustomEvent<AttributeChange>) {
|
|
|
|
const change = ev.detail;
|
|
|
|
switch (change.type) {
|
|
|
|
case "create":
|
2022-02-06 23:38:33 +01:00
|
|
|
await fetch(`api/obj`, {
|
2022-01-22 20:19:26 +01:00
|
|
|
method: "PUT",
|
|
|
|
headers: { "Content-Type": "application/json" },
|
|
|
|
body: JSON.stringify({
|
|
|
|
entity: address,
|
|
|
|
attribute: change.attribute,
|
|
|
|
value: change.value,
|
|
|
|
}),
|
|
|
|
});
|
|
|
|
break;
|
|
|
|
case "delete":
|
2022-02-06 23:38:33 +01:00
|
|
|
await fetch(`api/obj/${change.address}`, { method: "DELETE" });
|
2022-01-22 20:19:26 +01:00
|
|
|
break;
|
|
|
|
case "update":
|
2022-02-06 23:38:33 +01:00
|
|
|
await fetch(`api/obj/${address}/${change.attribute}`, {
|
2022-01-22 20:19:26 +01:00
|
|
|
method: "PUT",
|
|
|
|
headers: { "Content-Type": "application/json" },
|
2022-02-02 00:45:05 +01:00
|
|
|
body: JSON.stringify(change.value),
|
2022-01-22 20:19:26 +01:00
|
|
|
});
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
console.error("Unimplemented AttributeChange", change);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
revalidate();
|
|
|
|
}
|
2022-01-30 16:30:14 +01:00
|
|
|
|
|
|
|
let groupToAdd: IValue | undefined;
|
|
|
|
async function addGroup() {
|
|
|
|
if (!groupToAdd) {
|
|
|
|
return;
|
|
|
|
}
|
2022-02-06 23:38:33 +01:00
|
|
|
await fetch(`api/obj`, {
|
2022-01-30 16:30:14 +01:00
|
|
|
method: "PUT",
|
|
|
|
headers: { "Content-Type": "application/json" },
|
|
|
|
body: JSON.stringify({
|
|
|
|
entity: String(groupToAdd.c),
|
|
|
|
attribute: "HAS",
|
|
|
|
value: {
|
|
|
|
t: "Address",
|
|
|
|
c: address,
|
|
|
|
},
|
|
|
|
}),
|
|
|
|
});
|
|
|
|
revalidate();
|
|
|
|
groupToAdd = undefined;
|
|
|
|
}
|
2022-01-30 16:40:48 +01:00
|
|
|
|
|
|
|
async function removeGroup(address: string) {
|
2022-02-06 23:38:33 +01:00
|
|
|
await fetch(`api/obj/${address}`, { method: "DELETE" });
|
2022-01-30 16:40:48 +01:00
|
|
|
revalidate();
|
|
|
|
}
|
2022-02-02 17:58:53 +01:00
|
|
|
|
|
|
|
onMount(() => {
|
2022-02-06 23:38:33 +01:00
|
|
|
fetch(`api/obj/${address}/LAST_VISITED`, {
|
2022-02-02 17:58:53 +01:00
|
|
|
method: "PUT",
|
|
|
|
headers: { "Content-Type": "application/json" },
|
|
|
|
body: JSON.stringify({ t: "Number", c: new Date().getTime() }),
|
|
|
|
});
|
|
|
|
});
|
2021-11-11 23:37:42 +01:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<div class="inspect">
|
2022-01-28 22:39:08 +01:00
|
|
|
<header>
|
|
|
|
<h2>
|
|
|
|
{#if $entity}
|
2022-02-04 22:44:40 +01:00
|
|
|
<UpObject banner {address} on:resolved />
|
2022-01-28 22:39:08 +01:00
|
|
|
{:else}
|
2022-02-06 12:20:56 +01:00
|
|
|
<Spinner centered />
|
2022-01-28 22:39:08 +01:00
|
|
|
{/if}
|
|
|
|
</h2>
|
2022-02-04 23:03:05 +01:00
|
|
|
{#if groups?.length}
|
|
|
|
<section class="groups labelborder">
|
|
|
|
<header><h3>Groups</h3></header>
|
|
|
|
<div class="content">
|
|
|
|
{#each groups as [entryAddress, address]}
|
|
|
|
<div class="group">
|
|
|
|
<UpObject {address} link />
|
|
|
|
{#if editable}
|
|
|
|
<IconButton
|
|
|
|
name="x-circle"
|
|
|
|
on:click={() => removeGroup(entryAddress)}
|
|
|
|
/>
|
|
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
{/each}
|
|
|
|
{#if editable}
|
|
|
|
<div class="selector">
|
|
|
|
<Selector
|
|
|
|
type="entity"
|
|
|
|
bind:value={groupToAdd}
|
|
|
|
on:input={addGroup}
|
|
|
|
placeholder="Choose an entity..."
|
2022-01-30 16:40:48 +01:00
|
|
|
/>
|
2022-02-04 23:03:05 +01:00
|
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
{/if}
|
2022-01-28 22:39:08 +01:00
|
|
|
</header>
|
2021-11-30 23:26:40 +01:00
|
|
|
<BlobPreview {address} />
|
2022-01-22 20:19:26 +01:00
|
|
|
<NotesEditor {address} {editable} on:change={onChange} />
|
2021-11-11 23:37:42 +01:00
|
|
|
{#if !$error}
|
2021-12-20 13:41:06 +01:00
|
|
|
{#if Boolean($allTypeEntries)}
|
|
|
|
<div class="attributes">
|
|
|
|
{#each Object.entries(typedAttributes) as [typeAddr, entries] (typeAddr)}
|
|
|
|
<AttributeView
|
|
|
|
{entries}
|
|
|
|
type={allTypes[typeAddr]}
|
|
|
|
{editable}
|
2022-01-22 20:19:26 +01:00
|
|
|
on:change={onChange}
|
2021-12-20 13:41:06 +01:00
|
|
|
/>
|
|
|
|
{/each}
|
|
|
|
|
2022-01-21 15:57:53 +01:00
|
|
|
{#if currentUntypedAttributes.length > 0 || editable}
|
2021-12-20 13:41:06 +01:00
|
|
|
<AttributeView
|
|
|
|
title="Other attributes"
|
|
|
|
{editable}
|
2022-01-21 15:57:53 +01:00
|
|
|
entries={currentUntypedAttributes}
|
2022-01-22 20:19:26 +01:00
|
|
|
on:change={onChange}
|
2021-12-20 13:41:06 +01:00
|
|
|
/>
|
|
|
|
{/if}
|
|
|
|
|
2022-01-28 22:39:08 +01:00
|
|
|
{#if currentBacklinks.length > 0}
|
2021-12-20 13:41:06 +01:00
|
|
|
<AttributeView
|
|
|
|
title={`Referred to (${$entity.backlinks.length})`}
|
2022-02-03 16:43:12 +01:00
|
|
|
entries={currentBacklinks}
|
2021-12-20 13:41:06 +01:00
|
|
|
reverse
|
2022-01-22 20:19:26 +01:00
|
|
|
on:change={onChange}
|
2021-12-20 13:41:06 +01:00
|
|
|
/>
|
|
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
{:else}
|
2022-02-06 12:20:56 +01:00
|
|
|
<Spinner centered />
|
2021-12-20 13:41:06 +01:00
|
|
|
{/if}
|
2021-11-11 23:37:42 +01:00
|
|
|
{:else}
|
|
|
|
<div class="error">
|
2022-02-03 17:02:21 +01:00
|
|
|
{$error}
|
2021-11-11 23:37:42 +01:00
|
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
2022-01-28 22:39:08 +01:00
|
|
|
@use "./util";
|
|
|
|
|
2021-11-30 00:29:27 +01:00
|
|
|
.inspect {
|
|
|
|
flex: auto;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2022-01-28 22:39:08 +01:00
|
|
|
gap: 0.5rem;
|
2022-01-22 20:19:26 +01:00
|
|
|
|
|
|
|
h2 {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
2021-11-30 00:29:27 +01:00
|
|
|
}
|
|
|
|
|
2022-01-28 23:32:13 +01:00
|
|
|
.groups {
|
2022-01-28 22:39:08 +01:00
|
|
|
margin: 0.25rem 0;
|
2022-01-30 16:30:14 +01:00
|
|
|
.content {
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
gap: 0.5rem 0.5rem;
|
|
|
|
align-items: center;
|
|
|
|
}
|
2022-01-30 16:40:48 +01:00
|
|
|
|
|
|
|
.group {
|
|
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
2022-01-30 16:30:14 +01:00
|
|
|
.selector {
|
|
|
|
width: 100%;
|
|
|
|
}
|
2022-01-28 22:39:08 +01:00
|
|
|
}
|
|
|
|
|
2021-11-30 00:29:27 +01:00
|
|
|
.attributes {
|
|
|
|
flex: auto;
|
|
|
|
height: 0; // https://stackoverflow.com/a/14964944
|
|
|
|
overflow-y: auto;
|
|
|
|
}
|
|
|
|
|
2021-11-11 23:37:42 +01:00
|
|
|
.error {
|
|
|
|
color: red;
|
|
|
|
}
|
|
|
|
</style>
|