2020-09-25 02:45:17 +02:00
|
|
|
<template>
|
|
|
|
<div class="inspect">
|
2020-09-25 19:07:29 +02:00
|
|
|
<h2>
|
2020-09-25 20:49:30 +02:00
|
|
|
<Address :address="address" :is-file="backlinks.some((e) => e.key === 'FILE_IS')"/>
|
2020-09-25 19:07:29 +02:00
|
|
|
</h2>
|
2020-09-25 02:45:17 +02:00
|
|
|
<div v-if="!error">
|
2020-09-25 20:49:30 +02:00
|
|
|
<template v-if="attributes.length">
|
|
|
|
<h3>Own attributes ({{ attributes.length }})</h3>
|
2020-09-25 02:45:17 +02:00
|
|
|
<table>
|
2020-09-25 19:07:29 +02:00
|
|
|
<tr>
|
|
|
|
<th>Key name</th>
|
|
|
|
<th>Value</th>
|
|
|
|
</tr>
|
|
|
|
<tr v-for="entry in attributes">
|
|
|
|
<td>{{ entry.key }}</td>
|
2020-09-25 02:45:17 +02:00
|
|
|
<td>
|
2020-09-25 20:49:30 +02:00
|
|
|
<Address link v-if="entry.value[0] === 'ADDR'" :address="entry.value[1]"/>
|
2020-09-25 02:45:17 +02:00
|
|
|
<template v-else>
|
2020-09-25 19:07:29 +02:00
|
|
|
{{ entry.value[1] }}
|
2020-09-25 02:45:17 +02:00
|
|
|
</template>
|
|
|
|
</td>
|
2020-09-25 19:07:29 +02:00
|
|
|
</tr>
|
|
|
|
</table>
|
2020-09-25 20:49:30 +02:00
|
|
|
</template>
|
|
|
|
<template v-if="backlinks.length">
|
|
|
|
<h3>Referred to ({{ backlinks.length }})</h3>
|
2020-09-25 19:07:29 +02:00
|
|
|
<table>
|
|
|
|
<tr>
|
|
|
|
<th>Targets</th>
|
|
|
|
<th>Key names</th>
|
|
|
|
</tr>
|
|
|
|
<tr v-for="entry in backlinks">
|
2020-09-25 02:45:17 +02:00
|
|
|
<td>
|
2020-09-25 19:07:29 +02:00
|
|
|
<Address link :address="entry.target"/>
|
|
|
|
</td>
|
|
|
|
<td>
|
|
|
|
{{ entry.key }}
|
2020-09-25 02:45:17 +02:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</table>
|
2020-09-25 20:49:30 +02:00
|
|
|
</template>
|
2020-09-25 02:45:17 +02:00
|
|
|
</div>
|
|
|
|
<div v-else class="error">
|
|
|
|
{{ error }}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
import {defineComponent} from "vue";
|
|
|
|
import useSWRV from "swrv";
|
|
|
|
import {fetcher} from "@/utils";
|
|
|
|
import {IEntry, ListingResult} from "@/types/base";
|
2020-09-25 19:07:29 +02:00
|
|
|
import Address from "@/components/Address.vue";
|
2020-09-25 02:45:17 +02:00
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
name: "Inspect",
|
2020-09-25 19:07:29 +02:00
|
|
|
components: {
|
|
|
|
Address,
|
|
|
|
},
|
2020-09-25 02:45:17 +02:00
|
|
|
props: {
|
|
|
|
"address": String
|
|
|
|
},
|
|
|
|
data: () => {
|
|
|
|
return {};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
objectEntries(): IEntry[] {
|
|
|
|
if (this.data) {
|
|
|
|
const entries = Object.values(this.data) as IEntry[];
|
2020-09-25 19:07:29 +02:00
|
|
|
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));
|
2020-09-25 02:45:17 +02:00
|
|
|
} else {
|
|
|
|
return [];
|
|
|
|
}
|
2020-09-25 19:07:29 +02:00
|
|
|
},
|
|
|
|
attributes(): IEntry[] {
|
|
|
|
return this.objectEntries.filter((e) => e.target === this.address);
|
|
|
|
},
|
|
|
|
backlinks(): IEntry[] {
|
|
|
|
return this.objectEntries.filter((e) => e.target !== this.address);
|
2020-09-25 02:45:17 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
setup(props) {
|
2020-09-29 00:55:09 +02:00
|
|
|
const {data, error} = useSWRV<ListingResult, unknown>(() => `/api/obj/${props.address}`, fetcher);
|
2020-09-25 02:45:17 +02:00
|
|
|
|
|
|
|
return {
|
|
|
|
data,
|
|
|
|
error,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
2020-09-25 19:07:29 +02:00
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
table {
|
|
|
|
th {
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
|
|
|
|
td {
|
|
|
|
font-family: var(--monospace-font);
|
|
|
|
padding-right: 1em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-09-25 02:45:17 +02:00
|
|
|
.error {
|
|
|
|
color: red;
|
|
|
|
}
|
|
|
|
</style>
|