Browse Source

Checkout, Explore

vue
Lev 2 years ago
parent
commit
8684093cb9
  1. 29
      .idea/workspace.xml
  2. 2
      src/components/DomainBar.vue
  3. 75
      src/components/DomainResult.vue
  4. 1
      src/components/TonButton.vue
  5. 10
      src/result.ts
  6. 12
      src/router/index.ts
  7. 29
      src/views/Checkout.vue
  8. 31
      src/views/Explore.vue
  9. 10
      src/views/Get.vue

29
.idea/workspace.xml

@ -1,12 +1,16 @@
<?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="Changed zone repr + results, api, and Find">
<list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Checkout, Explore">
<change afterPath="$PROJECT_DIR$/src/components/DomainResult.vue" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/Checkout.vue" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/Explore.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" 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$/src/components/ZonePricing.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ZonePricing.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/components/TonButton.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/TonButton.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/FindQ.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/FindQ.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/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" />
@ -16,8 +20,8 @@
<component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
<option value="Vue Single File Component" />
<option value="TypeScript File" />
<option value="Vue Single File Component" />
</list>
</option>
</component>
@ -74,7 +78,7 @@
<workItem from="1670927344373" duration="29000" />
<workItem from="1670927391338" duration="2277000" />
<workItem from="1671024025708" duration="19806000" />
<workItem from="1671204365793" duration="12419000" />
<workItem from="1671204365793" duration="14195000" />
</task>
<task id="LOCAL-00001" summary="Wrote the landing">
<created>1670844191163</created>
@ -132,7 +136,14 @@
<option name="project" value="LOCAL" />
<updated>1671225120000</updated>
</task>
<option name="localTasksCounter" value="9" />
<task id="LOCAL-00009" summary="Displaying results">
<created>1671225896559</created>
<option name="number" value="00009" />
<option name="presentableId" value="LOCAL-00009" />
<option name="project" value="LOCAL" />
<updated>1671225896559</updated>
</task>
<option name="localTasksCounter" value="10" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@ -158,6 +169,8 @@
<MESSAGE value="ZoneTable with ZonePricing" />
<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" />
<MESSAGE value="Displaying results" />
<MESSAGE value="Checkout, Explore" />
<option name="LAST_COMMIT_MESSAGE" value="Checkout, Explore" />
</component>
</project>

2
src/components/DomainBar.vue

@ -1,5 +1,5 @@
<template>
<div class="domain-bar">
<div :class="{'domain-bar': true, 'center': !has_button}">
<div style="display: flex" class="prompt-cont">
<contenteditable :contenteditable="editable" tag="div" class="prompt" :no-nl="true" v-model="val" :no-html="true" @returned="search()" spellcheck="false"></contenteditable>
<div class="post-prompt">{{ zone }}</div>

75
src/components/DomainResult.vue

@ -0,0 +1,75 @@
<template>
<div class="center" v-if="result === null">
<RotateSquare2 style="width: 5rem; height: 5rem; margin-top: 3rem;"/>
</div>
<GetDomainBtn v-else-if="result.canBuy()"
:domain="domain" :price="result.auction_price"
@click="$router.push({name: 'Checkout', params: result.getRouteParams()})"/>
<!-- todo: differentiate between auction and buy -->
<GetDomainBtn v-else-if="result.canAuction()"
:domain="domain" :price="result.auction_price"
@click="$router.push({name: 'Checkout', params: result.getRouteParams()})"/>
<div v-else class="owned" @click="$router.push({name: 'Explore', params: {domain: domain}})">
<p class="domain">{{ domain }}</p>
<p>is owned.</p>
<p>Click here to explore</p>
</div>
</template>
<script>
import RotateSquare2 from "./RotateSquare2.vue";
import {get_domain_result} from "../result";
import GetDomainBtn from "./GetDomainBtn.vue";
export default {
name: "DomainResult",
components: {GetDomainBtn, RotateSquare2},
props: {
domain: {
type: String,
}
},
data() {
return {result: null}
},
mounted() {
this.get_result();
},
methods: {
async get_result() {
this.result = await get_domain_result(this.domain);
}
},
watch: {
domain: function () {
this.result = null;
this.get_result();
}
}
}
</script>
<style scoped>
.domain {
font-family: 'Inconsolata', monospace;
font-weight: bold;
font-size: 2.5rem;
}
@media only screen and (max-width: 800px) {
.domain {
font-size: 1.7rem;
}
}
.owned {
border-radius: 1rem;
background-color: #363e5e;
color: white;
font-size: 1.5rem;
text-align: center;
padding: 2rem;
cursor: pointer;
}
</style>

1
src/components/TonButton.vue

@ -19,6 +19,7 @@ button.b.darkish {
font-family: 'Inconsolata', monospace;
font-weight: bold;
font-size: 1.15rem;
cursor: default;
}
button > img:not(:first-child) {

10
src/result.ts

@ -16,6 +16,7 @@ export class Result {
getRouteParams(): any {
return {
domain_init: /* domain up to . */ this.domain.split('.')[0],
domain: /* domain up to . */ this.domain.split('.')[0],
zone: /* domain after . */ this.domain.split('.').slice(1).join('.')
}
}
@ -43,3 +44,12 @@ export async function get_search_results(query: string) {
new Result(query + '.ton', undefined, undefined, '123')
];
}
export async function get_domain_result(domain: string) {
// return await call_api('get/' + domain);
await sleep(1000);
if (domain === 'test.ton') {
return new Result(domain);
}
return new Result(domain, 5, 3);
}

12
src/router/index.ts

@ -48,11 +48,23 @@ const router = createRouter({
name: 'Find',
component: () => import('../views/Find.vue')
},
{
path: '/checkout/:zone/:domain',
name: 'Checkout',
component: () => import('../views/Checkout.vue'),
props: true
},
{
path: '/find/:query',
name: 'FindQ',
component: () => import('../views/FindQ.vue'),
props: true
},
{
path: '/explore/:domain',
name: 'Explore',
component: () => import('../views/Explore.vue'),
props: true
}
]
})

29
src/views/Checkout.vue

@ -0,0 +1,29 @@
<template>
<DarkLayout>
<!-- todo: button to go back to Get -->
<div class="to-buy">To buy</div>
<DomainBar :zone="'.' + zone" :value="domain" :has_button="false" :editable="false"/>
</DarkLayout>
</template>
<script>
import DarkLayout from "../components/DarkLayout.vue";
import DomainBar from "../components/DomainBar.vue";
export default {
name: "Checkout",
components: {DomainBar, DarkLayout},
props: {
domain: {
type: String,
},
zone: {
type: String,
}
}
}
</script>
<style scoped>
</style>

31
src/views/Explore.vue

@ -0,0 +1,31 @@
<template>
<DarkLayout>
<DomainBar :value="core_domain" :zone="'.' + zone" :has_button="false" :editable="false"/>
</DarkLayout>
</template>
<script>
import DarkLayout from "../components/DarkLayout.vue";
import DomainBar from "../components/DomainBar.vue";
export default {
name: "Explore",
components: {DomainBar, DarkLayout},
props: {
domain: {
type: String,
}
},
computed: {
core_domain() {
return this.domain.split('.')[0];
},
zone() {
return this.domain.split('.').slice(1).join('.');
}
}
}
</script>
<style scoped>
</style>

10
src/views/Get.vue

@ -1,15 +1,17 @@
<template>
<DarkLayout>
<router-link :to="{name: 'Find'}"><!-- todo: "All zones" button here --></router-link>
<router-link :to="{name: 'Find'}">
<!-- todo: "All zones" button here -->
</router-link>
<DomainBar :zone="'.' + zone" :value="domain" @search="search()" @input_d="handle_input($event)"/>
<GetDomain :domain="domain + '.' + zone" :price="5"/>
<DomainResult :domain="domain + '.' + zone"/>
</DarkLayout>
</template>
<script>
import DarkLayout from "../components/DarkLayout.vue";
import DomainBar from "../components/DomainBar.vue";
import GetDomain from "../components/GetDomainBtn.vue";
import DomainResult from "../components/DomainResult.vue";
export default {
name: "Get",
props: {
@ -20,7 +22,7 @@ export default {
type: String,
}
},
components: {GetDomain, DomainBar, DarkLayout},
components: {DomainResult, DomainBar, DarkLayout},
data() {
return {
domain: this.domain_init

Loading…
Cancel
Save