upend/ui/src/views/Inspect.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>