separate File view with previews
This commit is contained in:
parent
69ff2eb707
commit
7056bec8e5
3 changed files with 158 additions and 1 deletions
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="['address', { identified: Boolean(inferredId) }]" ref="root">
|
<div :class="['address', { identified: Boolean(inferredId) }]" ref="root">
|
||||||
<hash-badge :address="address" class="hash-badge" />
|
<hash-badge :address="address" class="hash-badge" />
|
||||||
<a v-if="isFile" :href="`/api/raw/${address}`">{{ address }}</a>
|
<router-link v-if="isFile" :to="{name: 'file'}">{{address}}</router-link>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<router-link v-if="link" :to="{ name: 'inspect', params: { address } }">
|
<router-link v-if="link" :to="{ name: 'inspect', params: { address } }">
|
||||||
{{ inferredId || address }}
|
{{ inferredId || address }}
|
||||||
|
|
|
@ -2,6 +2,7 @@ import Inspect from "@/views/Inspect.vue";
|
||||||
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
|
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
|
||||||
import Home from "../views/Home.vue";
|
import Home from "../views/Home.vue";
|
||||||
import Search from '../views/Search.vue';
|
import Search from '../views/Search.vue';
|
||||||
|
import File from '../views/File.vue';
|
||||||
|
|
||||||
const routes: Array<RouteRecordRaw> = [
|
const routes: Array<RouteRecordRaw> = [
|
||||||
{
|
{
|
||||||
|
@ -20,6 +21,12 @@ const routes: Array<RouteRecordRaw> = [
|
||||||
component: Inspect,
|
component: Inspect,
|
||||||
props: true
|
props: true
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/file/:address",
|
||||||
|
name: "file",
|
||||||
|
component: File,
|
||||||
|
props: true
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/about',
|
path: '/about',
|
||||||
name: 'about',
|
name: 'about',
|
||||||
|
|
150
ui/src/views/File.vue
Normal file
150
ui/src/views/File.vue
Normal file
|
@ -0,0 +1,150 @@
|
||||||
|
<template>
|
||||||
|
<div class="inspect">
|
||||||
|
<h2>
|
||||||
|
<Address
|
||||||
|
v-if="!fileNames"
|
||||||
|
:address="address"
|
||||||
|
:resolve="false"
|
||||||
|
/>
|
||||||
|
<template v-else>
|
||||||
|
<hash-badge :address="address" class="hash-badge" />
|
||||||
|
<a :href="`/api/raw/${address}`">
|
||||||
|
{{ fileNames.join(", ") }}
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
</h2>
|
||||||
|
<div v-if="!error">
|
||||||
|
<div class="preview" v-if="mimeType">
|
||||||
|
<template v-if="mimeType.startsWith('audio')">
|
||||||
|
<audio controls :src="`/api/raw/${address}`" />
|
||||||
|
</template>
|
||||||
|
<template v-if="mimeType.startsWith('image')">
|
||||||
|
<a :href="`/api/raw/${address}`">
|
||||||
|
<img :src="`/api/raw/${address}`" />
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<template v-if="attributes.length">
|
||||||
|
<h3>Own attributes ({{ attributes.length }})</h3>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>Attribute name</th>
|
||||||
|
<th>Value</th>
|
||||||
|
</tr>
|
||||||
|
<tr v-for="[id, entry] in attributes" :key="id">
|
||||||
|
<td>{{ entry.attribute }}</td>
|
||||||
|
<td>
|
||||||
|
<Address
|
||||||
|
link
|
||||||
|
v-if="entry.value.t === 'Address'"
|
||||||
|
:address="entry.value.c"
|
||||||
|
/>
|
||||||
|
<template v-else>
|
||||||
|
{{ entry.value.c }}
|
||||||
|
</template>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</template>
|
||||||
|
<template v-if="backlinks.length">
|
||||||
|
<h3>Referred to ({{ backlinks.length }})</h3>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>Entities</th>
|
||||||
|
<th>Attribute names</th>
|
||||||
|
</tr>
|
||||||
|
<tr v-for="[id, entry] in backlinks" :key="id">
|
||||||
|
<td>
|
||||||
|
<Address link :address="entry.entity" />
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{{ entry.attribute }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div v-else class="error">
|
||||||
|
{{ error }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { computed, defineComponent } from "vue";
|
||||||
|
import Address from "@/components/Address.vue";
|
||||||
|
import { useEntity } from "@/lib/entity";
|
||||||
|
import HashBadge from "@/components/HashBadge.vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "File",
|
||||||
|
components: {
|
||||||
|
Address,
|
||||||
|
HashBadge,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
address: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: () => {
|
||||||
|
return {
|
||||||
|
newEntryAttribute: "",
|
||||||
|
newEntryValue: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
mimeType(): string | undefined {
|
||||||
|
return this.attributes.find(([_, e]) => e.attribute === "FILE_MIME")?.[1]
|
||||||
|
.value.c;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
const { attributes, backlinks, error } = useEntity(props.address);
|
||||||
|
|
||||||
|
const fileNames = computed(() => {
|
||||||
|
const extantAddresses = backlinks.value
|
||||||
|
.filter(([_, e]) => e.attribute == "FILE_IS")
|
||||||
|
.map(([_, e]) => e.entity);
|
||||||
|
|
||||||
|
const result = new Set();
|
||||||
|
extantAddresses.forEach((address) => {
|
||||||
|
const { attributes } = useEntity(address);
|
||||||
|
result.add(
|
||||||
|
attributes.value.find(([_, e]) => e.attribute == "FILE_NAME")?.[1]
|
||||||
|
.value.c
|
||||||
|
);
|
||||||
|
});
|
||||||
|
return Array.from(result);
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
attributes,
|
||||||
|
backlinks,
|
||||||
|
fileNames,
|
||||||
|
error,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
h2 a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview {
|
||||||
|
img {
|
||||||
|
max-height: 256px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hash-badge {
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in a new issue