74 lines
1.6 KiB
Vue
74 lines
1.6 KiB
Vue
|
<template>
|
||
|
<div class="inspect">
|
||
|
<div>
|
||
|
inspekt: {{ address }}
|
||
|
</div>
|
||
|
<div v-if="!error">
|
||
|
<table>
|
||
|
<tr v-for="entry in objectEntries">
|
||
|
<td>
|
||
|
<template v-if="entry.target !== address">
|
||
|
<router-link :to="{params: {address: entry.target}}">{{ entry.target }}</router-link>
|
||
|
</template>
|
||
|
<template v-else>
|
||
|
{{ entry.target }}
|
||
|
</template>
|
||
|
</td>
|
||
|
<td>{{ entry.key }}</td>
|
||
|
<td>
|
||
|
<template v-if="entry.value[0] === 'ADDR'">
|
||
|
<router-link :to="{params: {address: entry.value[1]}}">{{ entry.value[1] }}</router-link>
|
||
|
</template>
|
||
|
<template v-else>
|
||
|
{{ entry.value }}
|
||
|
</template>
|
||
|
</td>
|
||
|
</tr>
|
||
|
</table>
|
||
|
</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";
|
||
|
|
||
|
export default defineComponent({
|
||
|
name: "Inspect",
|
||
|
props: {
|
||
|
"address": String
|
||
|
},
|
||
|
data: () => {
|
||
|
return {};
|
||
|
},
|
||
|
computed: {
|
||
|
objectEntries(): IEntry[] {
|
||
|
if (this.data) {
|
||
|
const entries = Object.values(this.data) as IEntry[];
|
||
|
return entries.sort((a, b) => a.key.localeCompare(b.key));
|
||
|
} else {
|
||
|
return [];
|
||
|
}
|
||
|
}
|
||
|
},
|
||
|
setup(props) {
|
||
|
const {data, error} = useSWRV<ListingResult, unknown>(() => `/api/get/${props.address}`, fetcher);
|
||
|
|
||
|
return {
|
||
|
data,
|
||
|
error,
|
||
|
};
|
||
|
}
|
||
|
});
|
||
|
</script>
|
||
|
<style>
|
||
|
.error {
|
||
|
color: red;
|
||
|
}
|
||
|
</style>
|