Browse Source

Displaying results

vue
Lev 2 years ago
parent
commit
369bec3a2f
  1. 26
      .idea/workspace.xml
  2. 9
      src/assets/main.css
  3. 6
      src/components/ZonePricing.vue
  4. 8
      src/result.ts
  5. 59
      src/views/FindQ.vue

26
.idea/workspace.xml

@ -1,18 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="ChangeListManager"> <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$/.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/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/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> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -80,7 +74,7 @@
<workItem from="1670927344373" duration="29000" /> <workItem from="1670927344373" duration="29000" />
<workItem from="1670927391338" duration="2277000" /> <workItem from="1670927391338" duration="2277000" />
<workItem from="1671024025708" duration="19806000" /> <workItem from="1671024025708" duration="19806000" />
<workItem from="1671204365793" duration="11527000" /> <workItem from="1671204365793" duration="12419000" />
</task> </task>
<task id="LOCAL-00001" summary="Wrote the landing"> <task id="LOCAL-00001" summary="Wrote the landing">
<created>1670844191163</created> <created>1670844191163</created>
@ -131,7 +125,14 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1671214435706</updated> <updated>1671214435706</updated>
</task> </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 /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@ -156,6 +157,7 @@
<MESSAGE value="Started writing ZoneTable + improvements to the search bar" /> <MESSAGE value="Started writing ZoneTable + improvements to the search bar" />
<MESSAGE value="ZoneTable with ZonePricing" /> <MESSAGE value="ZoneTable with ZonePricing" />
<MESSAGE value="/get/:zone/:domain" /> <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> </component>
</project> </project>

9
src/assets/main.css

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

6
src/components/ZonePricing.vue

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

8
src/result.ts

@ -19,6 +19,14 @@ export class Result {
zone: /* domain after . */ this.domain.split('.').slice(1).join('.') 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) => { const sleep = (milliseconds: number) => {

59
src/views/FindQ.vue

@ -5,14 +5,44 @@
<div class="results"> <div class="results">
<RotateSquare2 v-if="results === null" style="width: 5rem; height: 5rem"/> <RotateSquare2 v-if="results === null" style="width: 5rem; height: 5rem"/>
<div v-for="result in results" :key="result"> <div v-for="result in results" :key="result">
<router-link :to="{name: 'Get', params: result.getRouteParams()}">
<div class="search-result"> <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> </div>
</router-link> </router-link>
</div> </div>
</div> </div>
</div> </div>
</div>
</DarkLayout> </DarkLayout>
</template> </template>
@ -20,6 +50,8 @@
import DomainBar from "../components/DomainBar.vue"; import DomainBar from "../components/DomainBar.vue";
import DarkLayout from "../components/DarkLayout.vue"; import DarkLayout from "../components/DarkLayout.vue";
import RotateSquare2 from "../components/RotateSquare2.vue"; import RotateSquare2 from "../components/RotateSquare2.vue";
import TonButton from "../components/TonButton.vue";
import Popper from "vue3-popper";
import {get_search_results} from "../result"; import {get_search_results} from "../result";
export default { export default {
@ -38,7 +70,7 @@ export default {
mounted() { mounted() {
this.getResults(); this.getResults();
}, },
components: {RotateSquare2, DarkLayout, DomainBar}, components: {RotateSquare2, DarkLayout, DomainBar, TonButton, Popper},
methods: { methods: {
search() { search() {
this.$router.push({name: 'FindQ', params: {query: this.query_}}); this.$router.push({name: 'FindQ', params: {query: this.query_}});
@ -62,6 +94,25 @@ export default {
background-color: #4e5a88; background-color: #4e5a88;
color: white; color: white;
font-size: 1.5rem; 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> </style>
Loading…
Cancel
Save