From ec691b37174c558a0101e4f77be2342b70e22fe8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Thu, 13 Jan 2022 19:08:36 +0100
Subject: [PATCH] [ui] first step of search

---
 webui/src/components/display/UpEntry.svelte | 48 +++++++++++++++++++++
 webui/src/views/Search.svelte               | 35 ++++++++++++---
 2 files changed, 78 insertions(+), 5 deletions(-)
 create mode 100644 webui/src/components/display/UpEntry.svelte

diff --git a/webui/src/components/display/UpEntry.svelte b/webui/src/components/display/UpEntry.svelte
new file mode 100644
index 0000000..7412cf0
--- /dev/null
+++ b/webui/src/components/display/UpEntry.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { UpEntry } from "upend";
+  import UpObject from "./UpObject.svelte";
+
+  export let entry: UpEntry;
+</script>
+
+<div class="entry">
+  <div class="entity">
+    <UpObject address={entry.entity} />
+  </div>
+  <div class="attribute">
+    {entry.attribute}
+  </div>
+  <div class="value value-{entry.value.t.toLowerCase()}">
+    {#if entry.value.t === "Address"}
+      <UpObject address={String(entry.value.c)} />
+    {:else}
+      {entry.value.c}
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  .entry {
+    border: 1px solid var(--foreground);
+    border-radius: 4px;
+    padding: 0.5em;
+    display: flex;
+    align-content: center;
+    align-items: center;
+    gap: 1em;
+
+    & > * {
+      flex: 33%;
+    }
+  }
+
+  .attribute {
+    font-weight: bold;
+    flex-grow: 1;
+    text-align: center;
+  }
+
+  :global(.value-value) {
+    font-family: var(--monospace-font);
+  }
+</style>
diff --git a/webui/src/views/Search.svelte b/webui/src/views/Search.svelte
index 4a84940..1cbed24 100644
--- a/webui/src/views/Search.svelte
+++ b/webui/src/views/Search.svelte
@@ -3,6 +3,7 @@
   import debounce from "lodash/debounce";
   import { Readable, readable } from "svelte/store";
   import type { UpListing } from "upend";
+  import UpEntry from "../components/display/UpEntry.svelte";
   export let query: string;
 
   let debouncedQuery = "";
@@ -22,10 +23,34 @@
 
 <div>
   {#if $result}
-    {#each $result.entries as entry}
-      {entry.toString()}
-    {:else}
-      No results.
-    {/each}
+    <section>
+      <h2>Objects</h2>
+    </section>
+    <section>
+      <h2>Raw results</h2>
+      <ul>
+        {#each $result.entries as entry}
+          <li><UpEntry {entry} /></li>
+        {:else}
+          <li>No results.</li>
+        {/each}
+      </ul>
+    </section>
   {/if}
 </div>
+
+<style lang="scss">
+  h2 {
+    text-align: center;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+  }
+  
+  li {
+    margin: 1em auto;
+    width: 66em;
+  }
+</style>