Displaying results

.idea/workspace.xml

@@ -1,18 +1,12 @@
 <?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="/get/:zone/:domain">
+    <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Changed zone repr + results, api, and Find">
-      <change afterPath="$PROJECT_DIR$/src/api.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/result.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$/src/assets/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/main.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/ZonePricing.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ZonePricing.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/ZoneTable.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ZoneTable.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/result.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/result.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/Find.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Find.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/views/FindQ.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/FindQ.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/Get.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Get.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/zone.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/zone.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -80,7 +74,7 @@
       <workItem from="1670927344373" duration="29000" />
       <workItem from="1670927391338" duration="2277000" />
       <workItem from="1671024025708" duration="19806000" />
-      <workItem from="1671204365793" duration="11527000" />
+      <workItem from="1671204365793" duration="12419000" />
     </task>
     <task id="LOCAL-00001" summary="Wrote the landing">
       <created>1670844191163</created>
@@ -131,7 +125,14 @@
       <option name="project" value="LOCAL" />
       <updated>1671214435706</updated>
     </task>
-    <option name="localTasksCounter" value="8" />
+    <task id="LOCAL-00008" summary="Changed zone repr + results, api, and Find">
+      <created>1671225120000</created>
+      <option name="number" value="00008" />
+      <option name="presentableId" value="LOCAL-00008" />
+      <option name="project" value="LOCAL" />
+      <updated>1671225120000</updated>
+    </task>
+    <option name="localTasksCounter" value="9" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -156,6 +157,7 @@
     <MESSAGE value="Started writing ZoneTable + improvements to the search bar" />
     <MESSAGE value="ZoneTable with ZonePricing" />
     <MESSAGE value="/get/:zone/:domain" />
-    <option name="LAST_COMMIT_MESSAGE" value="/get/:zone/:domain" />
+    <MESSAGE value="Changed zone repr + results, api, and Find" />
+    <option name="LAST_COMMIT_MESSAGE" value="Changed zone repr + results, api, and Find" />
   </component>
 </project>

src/assets/main.css

@@ -150,3 +150,12 @@ a,
         scale: 70%;
     }
 }
+
+.get_b {
+    background-color: #e36464;
+    color: #363e5e;
+    border-radius: 0.5rem;
+    padding: 0.2rem 0.8rem;
+    margin-left: 0.9rem;
+    cursor: pointer;
+}

src/components/ZonePricing.vue

@@ -91,12 +91,6 @@ tr > th {
 }
 
 .get_b {
-  background-color: #e36464;
-  color: #363e5e;
-  border-radius: 0.5rem;
-  padding: 0.2rem 0.8rem;
-  margin-left: 0.9rem;
   margin-top: 2.1rem;
-  cursor: pointer;
 }
 </style>

src/result.ts

@@ -19,6 +19,14 @@ export class Result {
             zone: /* domain after . */ this.domain.split('.').slice(1).join('.')
         }
     }
+
+    canAuction(): boolean {
+        return this.auction_price !== undefined && this.auction_price !== null;
+    }
+
+    canBuy(): boolean {
+        return this.buy_price !== undefined && this.buy_price !== null;
+    }
 }
 
 const sleep = (milliseconds: number) => {

src/views/FindQ.vue

@@ -5,14 +5,44 @@
       <div class="results">
         <RotateSquare2 v-if="results === null" style="width: 5rem; height: 5rem"/>
         <div v-for="result in results" :key="result">
-          <router-link :to="{name: 'Get', params: result.getRouteParams()}">
           <div class="search-result">
-              {{ result }}
+            <span class="domain">{{ result.domain }}</span>
+            <table>
+              <thead>
+              <tr>
+                <th v-if="result.canAuction()">
+                  <Popper content="Buy on auction" placement="left" :hover="true" :arrow="true">
+                    <img src="@/assets/icons/buy.svg" class="buy_img" alt="Buy on auction"/>
+                  </Popper>
+                </th>
+                <th v-if="result.canBuy()">
+                  <Popper content="Buy instantly" placement="right" :hover="true" :arrow="true">
+                    <img src="@/assets/icons/instant_buy.svg" class="buy_img" alt="Instant Buy"/>
+                  </Popper>
+                </th>
+              </tr>
+              </thead>
+              <tbody>
+              <tr>
+                <td v-if="result.canAuction()">
+                  <TonButton>{{ result.auction_price }}</TonButton>
+                </td>
+                <td v-if="result.canBuy()">
+                  <TonButton>{{ result.buy_price }}</TonButton>
+                </td>
+              </tr>
+              </tbody>
+            </table>
+            <router-link :to="{name: 'Get', params: result.getRouteParams()}">
+              <div class="get_b">
+                <template v-if="result.canBuy() || result.canAuction()">Get</template>
+                <template v-else>See</template>
               </div>
             </router-link>
           </div>
         </div>
       </div>
+    </div>
   </DarkLayout>
 </template>
 
@@ -20,6 +50,8 @@
 import DomainBar from "../components/DomainBar.vue";
 import DarkLayout from "../components/DarkLayout.vue";
 import RotateSquare2 from "../components/RotateSquare2.vue";
+import TonButton from "../components/TonButton.vue";
+import Popper from "vue3-popper";
 import {get_search_results} from "../result";
 
 export default {
@@ -38,7 +70,7 @@ export default {
   mounted() {
     this.getResults();
   },
-  components: {RotateSquare2, DarkLayout, DomainBar},
+  components: {RotateSquare2, DarkLayout, DomainBar, TonButton, Popper},
   methods: {
     search() {
       this.$router.push({name: 'FindQ', params: {query: this.query_}});
@@ -62,6 +94,25 @@ export default {
   background-color: #4e5a88;
   color: white;
   font-size: 1.5rem;
-  cursor: pointer;
+  display: flex;
+  height: 6rem;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.search-result > .domain {
+  font-family: 'Inconsolata', monospace;
+}
+
+table {
+  width: 10rem;
+}
+
+.buy_img {
+  margin-bottom: -15px;
+}
+
+tr > th {
+  padding-bottom: -10px;
 }
 </style>