From 1099ebc13d68cf51f2f6a7ec18e366127f943713 Mon Sep 17 00:00:00 2001
From: ennucore <ennucore@gmail.com>
Date: Thu, 15 Dec 2022 11:42:42 +0100
Subject: [PATCH] Started writing ZoneTable + improvements to the search bar

---
 .idea/workspace.xml           | 30 +++++++-----
 src/components/DarkLayout.vue |  2 +-
 src/components/DomainBar.vue  | 17 ++++---
 src/components/ZoneTable.vue  | 86 +++++++++++++++++++++++++++++++++++
 src/router/index.ts           | 12 +++--
 src/views/Find.vue            | 31 +++++++++++++
 src/views/Get.vue             |  6 +++
 src/zone.ts                   | 27 +++++++++++
 8 files changed, 187 insertions(+), 24 deletions(-)
 create mode 100644 src/components/ZoneTable.vue
 create mode 100644 src/views/Find.vue
 create mode 100644 src/zone.ts

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 2a7f36e..97aca1f 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -1,16 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Adaptivity + more assets">
-      <change afterPath="$PROJECT_DIR$/src/assets/images/usage.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/DarkLayout.vue" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/DomainBar.vue" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/views/Get.vue" afterDir="false" />
+    <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="DarkLayout + Domain Bar">
+      <change afterPath="$PROJECT_DIR$/src/components/ZoneTable.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/Find.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/zone.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/DarkLayout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DarkLayout.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/DomainBar.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DomainBar.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/index.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/TonDns.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/TonDns.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/Get.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Get.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -21,6 +20,7 @@
     <option name="RECENT_TEMPLATES">
       <list>
         <option value="Vue Single File Component" />
+        <option value="TypeScript File" />
       </list>
     </option>
   </component>
@@ -76,7 +76,7 @@
       <workItem from="1670839496719" duration="10862000" />
       <workItem from="1670927344373" duration="29000" />
       <workItem from="1670927391338" duration="2277000" />
-      <workItem from="1671024025708" duration="5450000" />
+      <workItem from="1671024025708" duration="11597000" />
     </task>
     <task id="LOCAL-00001" summary="Wrote the landing">
       <created>1670844191163</created>
@@ -99,7 +99,14 @@
       <option name="project" value="LOCAL" />
       <updated>1671026238851</updated>
     </task>
-    <option name="localTasksCounter" value="4" />
+    <task id="LOCAL-00004" summary="DarkLayout + Domain Bar">
+      <created>1671029892636</created>
+      <option name="number" value="00004" />
+      <option name="presentableId" value="LOCAL-00004" />
+      <option name="project" value="LOCAL" />
+      <updated>1671029892636</updated>
+    </task>
+    <option name="localTasksCounter" value="5" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -120,6 +127,7 @@
     <MESSAGE value="Wrote the landing" />
     <MESSAGE value="TON Web page" />
     <MESSAGE value="Adaptivity + more assets" />
-    <option name="LAST_COMMIT_MESSAGE" value="Adaptivity + more assets" />
+    <MESSAGE value="DarkLayout + Domain Bar" />
+    <option name="LAST_COMMIT_MESSAGE" value="DarkLayout + Domain Bar" />
   </component>
 </project>
\ No newline at end of file
diff --git a/src/components/DarkLayout.vue b/src/components/DarkLayout.vue
index 79750b6..301b6bf 100644
--- a/src/components/DarkLayout.vue
+++ b/src/components/DarkLayout.vue
@@ -2,7 +2,7 @@
   <main style="width: 100vw; min-height: 100vh; height: 100%;" id="dark_body">
     <Header/>
     <div class="center">
-      <div class="content">
+      <div class="content center">
         <slot></slot>
       </div>
     </div>
diff --git a/src/components/DomainBar.vue b/src/components/DomainBar.vue
index cf74426..6e8fc96 100644
--- a/src/components/DomainBar.vue
+++ b/src/components/DomainBar.vue
@@ -58,12 +58,11 @@ export default {
   border-radius: 1rem;
   width: 30rem;
   min-height: 5rem;
-  padding: 0 0.5rem;
+  padding: 0 1rem;
   background-color: #4e5a88;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  place-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
 }
 
 /* flex container with vertical centering */
@@ -72,6 +71,8 @@ export default {
   justify-content: center;
   align-items: center;
   place-items: center;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 /* the bar is narrower on mobile (90% of the screen) */
@@ -87,7 +88,7 @@ export default {
 
 .prompt {
   border-radius: 0.5rem;
-  min-width: 40%;
+  min-width: 8rem;
   height: 3rem;
   background-color: #363e5e;
   display: flex;
@@ -102,8 +103,6 @@ export default {
   user-select: none;
   cursor: text;
   margin-right: 0.4rem;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
 }
 
 /* #e36464 search button with #363e5e text */
@@ -121,7 +120,7 @@ export default {
   padding: 0 1rem;
   cursor: pointer;
   margin-left: 1rem;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/ZoneTable.vue b/src/components/ZoneTable.vue
new file mode 100644
index 0000000..04b7b57
--- /dev/null
+++ b/src/components/ZoneTable.vue
@@ -0,0 +1,86 @@
+<template>
+  <!-- a #4e5a88 rounded box with a #363e5e box inside - so that only the header is #363e5e -->
+  <table class="table_outer">
+    <thead class="table_header">
+    <tr>
+      <th>Domain</th>
+      <th>Terms</th>
+    </tr>
+    </thead>
+    <tbody class="table_content">
+    <tr v-for="zone in zones" :key="zone.zone">
+      <td>
+        <router-link :to="{name: 'Find' /*todo: specify zone here*/}" style="color: white">
+          {{ zone.zone }}
+        </router-link>
+      </td>
+      <td></td>
+    </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+import {Zone} from "../zone";
+
+export default {
+  name: "ZoneTable",
+  props: {
+    zones: {
+      type: Array[Zone],
+      default: [new Zone(".example.ton", 3, 5), new Zone(".agorata.ton", 3, 5)]
+    }
+  }
+}
+</script>
+
+<style scoped>
+/*
+We want a #4e5a88 rounded box with a #363e5e box inside - so that only the header is #363e5e
+
+The outer rounded box is table_outer
+The inner box is table_content, it takes all of the space except for the header
+*/
+.table_outer {
+  border-radius: 1rem;
+  min-height: 5rem;
+  background-color: #4e5a88;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  min-width: max(30rem, 50vw);
+}
+
+.table_header {
+  padding: 0.5rem 1.3rem;
+}
+
+thead > tr {
+  display: flex;
+}
+
+tr > :last-child { /* place it on the right */
+  justify-content: flex-end;
+  text-align: center;
+  width: 100%;
+}
+
+tr > th:first-child {
+  text-align: center;
+}
+
+tr > :first-child { /* place it on the left */
+  text-align: left;
+}
+
+tr:not(:first-child) > td {
+  border-top: 2px solid white;
+}
+
+.table_content {
+  background-color: #363e5e;
+  border-radius: 1rem;
+  padding: 1rem;
+  min-height: 10rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 9bbfee0..62bba14 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -25,9 +25,15 @@ const router = createRouter({
             component: () => import('../views/TonDns.vue')
         },
         {
-            path: '/get',
-            name: 'get',
-            component: () => import('../views/Get.vue')
+            path: '/get/:domain',
+            name: 'Get',
+            component: () => import('../views/Get.vue'),
+            props: true
+        },
+        {
+            path: '/find',
+            name: 'Find',
+            component: () => import('../views/Find.vue')
         }
     ]
 })
diff --git a/src/views/Find.vue b/src/views/Find.vue
new file mode 100644
index 0000000..df1a7b7
--- /dev/null
+++ b/src/views/Find.vue
@@ -0,0 +1,31 @@
+<template>
+  <DarkLayout>
+    <DomainBar/>
+    <ZoneTable/>
+  </DarkLayout>
+</template>
+
+<script>
+import DomainBar from "../components/DomainBar.vue";
+import DarkLayout from "../components/DarkLayout.vue";
+import ZoneTable from "../components/ZoneTable.vue";
+
+export default {
+  name: "Find",
+  props: {
+    default_domain: {
+      type: String,
+      default: "example"
+    },
+    zone: {
+      type: String,
+      default: ".ton"
+    }
+  },
+  components: {ZoneTable, DarkLayout, DomainBar}
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Get.vue b/src/views/Get.vue
index 6c5b1fd..58965fa 100644
--- a/src/views/Get.vue
+++ b/src/views/Get.vue
@@ -1,5 +1,6 @@
 <template>
   <DarkLayout>
+    <router-link :to="{name: 'Find'}"></router-link>
     <DomainBar/>
   </DarkLayout>
 </template>
@@ -9,6 +10,11 @@ import DarkLayout from "../components/DarkLayout.vue";
 import DomainBar from "../components/DomainBar.vue";
 export default {
   name: "Get",
+  props: {
+    domain: {
+      type: String,
+    }
+  },
   components: {DomainBar, DarkLayout}
 }
 </script>
diff --git a/src/zone.ts b/src/zone.ts
new file mode 100644
index 0000000..3599343
--- /dev/null
+++ b/src/zone.ts
@@ -0,0 +1,27 @@
+/* Define type Zone with the string zone (like .example.ton) and terms (prices with different conditions) */
+export class Zone {
+    zone: string;
+    min_length: number;
+    length_1: number;
+    length_2: number;
+    price_buy_1?: number;
+    price_buy_2?: number;
+    price_auction_1?: number;
+    price_auction_2?: number;
+
+    constructor(zone: string,
+                price_buy_1?: number, price_buy_2?: number, price_auction_1?: number, price_auction_2?: number,
+                min_length: number = 2, length_1: number = 3, length_2: number = 8
+                ) {
+        this.zone = zone;
+        this.min_length = min_length;
+        this.length_1 = length_1;
+        this.length_2 = length_2;
+        this.price_buy_1 = price_buy_1;
+        this.price_buy_2 = price_buy_2;
+        this.price_auction_1 = price_auction_1;
+        this.price_auction_2 = price_auction_2;
+    }
+
+
+}