improve Inspect view, add Address component
parent
9a5a7383a4
commit
6d17daf1b7
|
@ -18,9 +18,11 @@ export default defineComponent({
|
||||||
@import "../node_modules/@shoelace-style/shoelace/dist/shoelace/shoelace.css";
|
@import "../node_modules/@shoelace-style/shoelace/dist/shoelace/shoelace.css";
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
|
||||||
|
--monospace-font: "Fira Code", "Consolas", "JetBrains Mono", "Inconsolata", monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
|
|
|
@ -0,0 +1,34 @@
|
||||||
|
<template>
|
||||||
|
<div class="address">
|
||||||
|
<a v-if="isFile" :href="`/api/raw/${address}`">{{ address }}</a>
|
||||||
|
<template v-else>
|
||||||
|
<router-link v-if="link" :to="{name: 'Inspect', params: {address}}">{{ address }}</router-link>
|
||||||
|
<template v-else>{{ address }}</template>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {defineComponent} from "vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "Address",
|
||||||
|
props: {
|
||||||
|
address: String,
|
||||||
|
link: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
isFile: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.address {
|
||||||
|
font-family: var(--monospace-font);
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,30 +1,43 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="inspect">
|
<div class="inspect">
|
||||||
<div>
|
<h2>
|
||||||
inspekt: {{ address }}
|
<Address :address="address"/>
|
||||||
</div>
|
</h2>
|
||||||
<div v-if="!error">
|
<div v-if="!error">
|
||||||
|
<h3>Own attributes</h3>
|
||||||
<table>
|
<table>
|
||||||
<tr v-for="entry in objectEntries">
|
<tr>
|
||||||
<td>
|
<th>Key name</th>
|
||||||
<template v-if="entry.target !== address">
|
<th>Value</th>
|
||||||
<router-link :to="{params: {address: entry.target}}">{{ entry.target }}</router-link>
|
</tr>
|
||||||
</template>
|
<tr v-for="entry in attributes">
|
||||||
<template v-else>
|
|
||||||
{{ entry.target }}
|
|
||||||
</template>
|
|
||||||
</td>
|
|
||||||
<td>{{ entry.key }}</td>
|
<td>{{ entry.key }}</td>
|
||||||
<td>
|
<td>
|
||||||
<template v-if="entry.value[0] === 'ADDR'">
|
<Address v-if="entry.value[0] === 'ADDR'"
|
||||||
<router-link :to="{params: {address: entry.value[1]}}">{{ entry.value[1] }}</router-link>
|
:address="entry.value[1]"
|
||||||
</template>
|
link
|
||||||
|
:is-file="entry.key === 'FILE_IS'"/>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
{{ entry.value }}
|
{{ entry.value[1] }}
|
||||||
</template>
|
</template>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
<h3>Referred to</h3>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>Targets</th>
|
||||||
|
<th>Key names</th>
|
||||||
|
</tr>
|
||||||
|
<tr v-for="entry in backlinks">
|
||||||
|
<td>
|
||||||
|
<Address link :address="entry.target"/>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
{{ entry.key }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="error">
|
<div v-else class="error">
|
||||||
{{ error }}
|
{{ error }}
|
||||||
|
@ -37,9 +50,13 @@ import {defineComponent} from "vue";
|
||||||
import useSWRV from "swrv";
|
import useSWRV from "swrv";
|
||||||
import {fetcher} from "@/utils";
|
import {fetcher} from "@/utils";
|
||||||
import {IEntry, ListingResult} from "@/types/base";
|
import {IEntry, ListingResult} from "@/types/base";
|
||||||
|
import Address from "@/components/Address.vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "Inspect",
|
name: "Inspect",
|
||||||
|
components: {
|
||||||
|
Address,
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
"address": String
|
"address": String
|
||||||
},
|
},
|
||||||
|
@ -50,10 +67,19 @@ export default defineComponent({
|
||||||
objectEntries(): IEntry[] {
|
objectEntries(): IEntry[] {
|
||||||
if (this.data) {
|
if (this.data) {
|
||||||
const entries = Object.values(this.data) as IEntry[];
|
const entries = Object.values(this.data) as IEntry[];
|
||||||
return entries.sort((a, b) => a.key.localeCompare(b.key));
|
return entries
|
||||||
|
.sort((a, b) => a.value[1].localeCompare(b.value[1]))
|
||||||
|
.sort((a, b) => a.value[0].localeCompare(b.value[0]))
|
||||||
|
.sort((a, b) => a.key.localeCompare(b.key));
|
||||||
} else {
|
} else {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
attributes(): IEntry[] {
|
||||||
|
return this.objectEntries.filter((e) => e.target === this.address);
|
||||||
|
},
|
||||||
|
backlinks(): IEntry[] {
|
||||||
|
return this.objectEntries.filter((e) => e.target !== this.address);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
|
@ -66,7 +92,19 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style>
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
table {
|
||||||
|
th {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
font-family: var(--monospace-font);
|
||||||
|
padding-right: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.error {
|
.error {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue