agorata
/
frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Checkout, Explore

vue
Lev 2 years ago
parent
369bec3a2f
commit
8684093cb9
9 changed files with 186 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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

Write Preview
Loading…
Cancel
Save