autoformat
parent
54bfd6b890
commit
5bba7109f3
|
@ -11,9 +11,9 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from "vue";
|
|
||||||
import Jobs from "@/components/Jobs.vue";
|
|
||||||
import Header from "@/components/Header.vue";
|
import Header from "@/components/Header.vue";
|
||||||
|
import Jobs from "@/components/Jobs.vue";
|
||||||
|
import { defineComponent } from "vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "App",
|
name: "App",
|
||||||
|
|
|
@ -13,11 +13,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { ListingResult } from "@/types/base";
|
import { defineComponent } from "vue";
|
||||||
import { fetcher } from "@/utils";
|
|
||||||
import useSWRV from "swrv";
|
|
||||||
import { computed, defineComponent } from "vue";
|
|
||||||
import HashBadge from "./HashBadge.vue";
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "Header",
|
name: "Header",
|
||||||
|
|
|
@ -2,14 +2,16 @@
|
||||||
<transition-group name="fade">
|
<transition-group name="fade">
|
||||||
<div class="job" v-for="job in activeJobs" :key="job.id">
|
<div class="job" v-for="job in activeJobs" :key="job.id">
|
||||||
<div class="job-label">{{ job.title }}</div>
|
<div class="job-label">{{ job.title }}</div>
|
||||||
<sl-progress-bar :percentage="job.progress">{{ Math.round(job.progress) }}%</sl-progress-bar>
|
<sl-progress-bar :percentage="job.progress"
|
||||||
|
>{{ Math.round(job.progress) }}%</sl-progress-bar
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</transition-group>
|
</transition-group>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {defineComponent} from "vue";
|
import { Job } from "@/types/base";
|
||||||
import {Job} from "@/types/base";
|
import { defineComponent } from "vue";
|
||||||
|
|
||||||
interface JobWithId extends Job {
|
interface JobWithId extends Job {
|
||||||
id: string;
|
id: string;
|
||||||
|
@ -19,22 +21,24 @@ export default defineComponent({
|
||||||
name: "Jobs",
|
name: "Jobs",
|
||||||
data: () => {
|
data: () => {
|
||||||
return {
|
return {
|
||||||
jobs: {} as { [key: string]: Job }
|
jobs: {} as { [key: string]: Job },
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
activeJobs(): JobWithId[] {
|
activeJobs(): JobWithId[] {
|
||||||
return Object.entries(this.jobs).filter(([_, job]) => job.progress < 100).map(([id, job]) => {
|
return Object.entries(this.jobs)
|
||||||
return {id, ...job};
|
.filter(([_, job]) => job.progress < 100)
|
||||||
});
|
.map(([id, job]) => {
|
||||||
}
|
return { id, ...job };
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
setInterval(async () => {
|
setInterval(async () => {
|
||||||
let request = await fetch("/api/jobs");
|
let request = await fetch("/api/jobs");
|
||||||
this.jobs = await request.json();
|
this.jobs = await request.json();
|
||||||
}, 3333);
|
}, 3333);
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<router-link :to="{name: 'inspect', params: {'address': result.entity}}" class="search-result">
|
<router-link
|
||||||
|
:to="{ name: 'inspect', params: { address: result.entity } }"
|
||||||
|
class="search-result"
|
||||||
|
>
|
||||||
<div class="search-result-container">
|
<div class="search-result-container">
|
||||||
<div class="search-result-attribute">{{ result.attribute }}</div>
|
<div class="search-result-attribute">{{ result.attribute }}</div>
|
||||||
<div class="search-result-value">{{ result.value.c }}</div>
|
<div class="search-result-value">{{ result.value.c }}</div>
|
||||||
|
@ -8,18 +11,17 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {defineComponent, PropType} from "vue";
|
import { IEntry } from "@/types/base";
|
||||||
import {IEntry} from "@/types/base";
|
import { defineComponent, PropType } from "vue";
|
||||||
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "SearchResult",
|
name: "SearchResult",
|
||||||
props: {
|
props: {
|
||||||
result: {
|
result: {
|
||||||
type: Object as PropType<IEntry>,
|
type: Object as PropType<IEntry>,
|
||||||
required: true
|
required: true,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -27,7 +29,7 @@ export default defineComponent({
|
||||||
.search-result {
|
.search-result {
|
||||||
.search-result-container {
|
.search-result-container {
|
||||||
box-shadow: var(--sl-shadow-medium);
|
box-shadow: var(--sl-shadow-medium);
|
||||||
margin: .5rem;
|
margin: 0.5rem;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -37,7 +39,7 @@ export default defineComponent({
|
||||||
text-decoration: inherit;
|
text-decoration: inherit;
|
||||||
|
|
||||||
div {
|
div {
|
||||||
margin: .5rem 0;
|
margin: 0.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result-attribute {
|
.search-result-attribute {
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
|
import { defineCustomElements, setAssetPath, SlInput } from "@shoelace-style/shoelace";
|
||||||
import * as Vue from "vue";
|
import * as Vue from "vue";
|
||||||
import { DirectiveBinding } from "vue";
|
import { DirectiveBinding } from "vue";
|
||||||
import App from "./App.vue";
|
import App from "./App.vue";
|
||||||
import router from "./router";
|
import router from "./router";
|
||||||
import { defineCustomElements, setAssetPath, SlInput, } from "@shoelace-style/shoelace";
|
|
||||||
|
|
||||||
// TODO: Remove when UI settles!
|
// TODO: Remove when UI settles!
|
||||||
defineCustomElements();
|
defineCustomElements();
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
|
|
||||||
import Home from "../views/About.vue";
|
|
||||||
import Search from '../views/Search.vue'
|
|
||||||
import Inspect from "@/views/Inspect.vue";
|
import Inspect from "@/views/Inspect.vue";
|
||||||
|
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
|
||||||
|
import Home from "../views/About.vue";
|
||||||
|
import Search from '../views/Search.vue';
|
||||||
|
|
||||||
const routes: Array<RouteRecordRaw> = [
|
const routes: Array<RouteRecordRaw> = [
|
||||||
{
|
{
|
||||||
|
|
|
@ -4,7 +4,7 @@ export type VALUE_TYPE = "Value" | "Address" | "Invalid";
|
||||||
export interface IEntry {
|
export interface IEntry {
|
||||||
entity: Address,
|
entity: Address,
|
||||||
attribute: string,
|
attribute: string,
|
||||||
value: {t: VALUE_TYPE, c: string}
|
value: { t: VALUE_TYPE, c: string }
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ListingResult {
|
export interface ListingResult {
|
||||||
|
|
|
@ -1,7 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="inspect">
|
<div class="inspect">
|
||||||
<h2>
|
<h2>
|
||||||
<Address :address="address" :is-file="backlinks.some(([_, e]) => e.attribute === 'FILE_IS')" :resolve="false"/>
|
<Address
|
||||||
|
:address="address"
|
||||||
|
:is-file="backlinks.some(([_, e]) => e.attribute === 'FILE_IS')"
|
||||||
|
:resolve="false"
|
||||||
|
/>
|
||||||
</h2>
|
</h2>
|
||||||
<div v-if="!error">
|
<div v-if="!error">
|
||||||
<template v-if="attributes.length">
|
<template v-if="attributes.length">
|
||||||
|
@ -12,13 +16,17 @@
|
||||||
<th>Attribute name</th>
|
<th>Attribute name</th>
|
||||||
<th>Value</th>
|
<th>Value</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr v-for="[id, entry] in attributes" :key=id>
|
<tr v-for="[id, entry] in attributes" :key="id">
|
||||||
<td>
|
<td>
|
||||||
<sl-icon-button name="x-circle" @click="removeEntry(id)"/>
|
<sl-icon-button name="x-circle" @click="removeEntry(id)" />
|
||||||
</td>
|
</td>
|
||||||
<td>{{ entry.attribute }}</td>
|
<td>{{ entry.attribute }}</td>
|
||||||
<td>
|
<td>
|
||||||
<Address link v-if="entry.value.t === 'Address'" :address="entry.value.c"/>
|
<Address
|
||||||
|
link
|
||||||
|
v-if="entry.value.t === 'Address'"
|
||||||
|
:address="entry.value.c"
|
||||||
|
/>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
{{ entry.value.c }}
|
{{ entry.value.c }}
|
||||||
</template>
|
</template>
|
||||||
|
@ -26,13 +34,13 @@
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<sl-icon-button name="plus-circle" @click="addEntry()"/>
|
<sl-icon-button name="plus-circle" @click="addEntry()" />
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<sl-input v-sl-model:newEntryAttribute/>
|
<sl-input v-sl-model:newEntryAttribute />
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<sl-input v-sl-model:newEntryValue/>
|
<sl-input v-sl-model:newEntryValue />
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
@ -46,7 +54,7 @@
|
||||||
</tr>
|
</tr>
|
||||||
<tr v-for="[id, entry] in backlinks" :key="id">
|
<tr v-for="[id, entry] in backlinks" :key="id">
|
||||||
<td>
|
<td>
|
||||||
<Address link :address="entry.entity"/>
|
<Address link :address="entry.entity" />
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
{{ entry.attribute }}
|
{{ entry.attribute }}
|
||||||
|
@ -62,10 +70,10 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {defineComponent} from "vue";
|
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";
|
import Address from "@/components/Address.vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
@ -74,15 +82,15 @@ export default defineComponent({
|
||||||
Address,
|
Address,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
"address": {
|
address: {
|
||||||
type: String,
|
type: String,
|
||||||
required: true
|
required: true,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
data: () => {
|
data: () => {
|
||||||
return {
|
return {
|
||||||
newEntryAttribute: "",
|
newEntryAttribute: "",
|
||||||
newEntryValue: ""
|
newEntryValue: "",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -102,44 +110,47 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
backlinks(): [string, IEntry][] {
|
backlinks(): [string, IEntry][] {
|
||||||
return this.objectEntries.filter(([_, e]) => e.entity !== this.address);
|
return this.objectEntries.filter(([_, e]) => e.entity !== this.address);
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async removeEntry(id: string) {
|
async removeEntry(id: string) {
|
||||||
if (confirm("Are you sure you want to remove the attribute?")) {
|
if (confirm("Are you sure you want to remove the attribute?")) {
|
||||||
await fetch(`/api/obj/${id}`, {method: "DELETE"});
|
await fetch(`/api/obj/${id}`, { method: "DELETE" });
|
||||||
await this.mutate();
|
await this.mutate();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async addEntry() {
|
async addEntry() {
|
||||||
await fetch(`/api/obj`, {
|
await fetch(`/api/obj`, {
|
||||||
method: "PUT",
|
method: "PUT",
|
||||||
headers: {"Content-Type": "application/json"},
|
headers: { "Content-Type": "application/json" },
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
entity: this.address,
|
entity: this.address,
|
||||||
attribute: this.newEntryAttribute,
|
attribute: this.newEntryAttribute,
|
||||||
value: {
|
value: {
|
||||||
t: "Value",
|
t: "Value",
|
||||||
c: this.newEntryValue
|
c: this.newEntryValue,
|
||||||
}
|
},
|
||||||
})
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
await this.mutate();
|
await this.mutate();
|
||||||
|
|
||||||
this.newEntryAttribute = "";
|
this.newEntryAttribute = "";
|
||||||
this.newEntryValue = "";
|
this.newEntryValue = "";
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const {data, error, mutate} = useSWRV<ListingResult, unknown>(() => `/api/obj/${props.address}`, fetcher);
|
const { data, error, mutate } = useSWRV<ListingResult, unknown>(
|
||||||
|
() => `/api/obj/${props.address}`,
|
||||||
|
fetcher
|
||||||
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
data,
|
data,
|
||||||
error,
|
error,
|
||||||
mutate
|
mutate,
|
||||||
};
|
};
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -9,13 +9,13 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from "vue";
|
|
||||||
import { construct } from "@/utils";
|
|
||||||
import SearchResult from "@/components/SearchResult.vue";
|
import SearchResult from "@/components/SearchResult.vue";
|
||||||
import { ListingResult } from "@/types/base";
|
import { ListingResult } from "@/types/base";
|
||||||
|
import { construct } from "@/utils";
|
||||||
import useSWRV from "swrv";
|
import useSWRV from "swrv";
|
||||||
import { fetcher } from "../utils";
|
import { defineComponent } from "vue";
|
||||||
import { useRoute } from "vue-router";
|
import { useRoute } from "vue-router";
|
||||||
|
import { fetcher } from "../utils";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "Search",
|
name: "Search",
|
||||||
|
|
Loading…
Reference in New Issue