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

Adding links (contacts)

vue
Lev 2 years ago
parent
d2dce44868
commit
fe5f1a7087
9 changed files with 131 additions and 25 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 45
      .idea/workspace.xml
  2. 2
      index.html
  3. 9
      src/assets/main.css
  4. 5
      src/components/DarkLayout.vue
  5. 12
      src/components/Header.vue
  6. 54
      src/components/SiteSettings.vue
  7. 3
      src/main.ts
  8. 13
      src/result.ts
  9. 11
      src/views/Explore.vue

45
.idea/workspace.xml
Unescape View File

@ -1,10 +1,14 @@
<?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="SiteSettings"> <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Site constructor">
<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$/src/api.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/api.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" 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/DarkLayout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DarkLayout.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Header.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Header.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/SiteSettings.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/SiteSettings.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/components/SiteSettings.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/SiteSettings.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/main.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/main.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/result.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/result.ts" 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/Explore.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Explore.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/views/Explore.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Explore.vue" afterDir="false" />
</list> </list>
@ -32,17 +36,18 @@
<option name="hideEmptyMiddlePackages" value="true" /> <option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" /> <option name="showLibraryContents" value="true" />
</component> </component>
<component name="PropertiesComponent">{ <component name="PropertiesComponent"><![CDATA[{
&quot;keyToString&quot;: { "keyToString": {
&quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;, "RunOnceActivity.OpenProjectViewOnStart": "true",
&quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;, "RunOnceActivity.ShowReadmeOnStart": "true",
&quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;, "WebServerToolWindowFactoryState": "false",
&quot;last_opened_file_path&quot;: &quot;/home/ennucore/dev/agorata/frontend&quot;, "last_opened_file_path": "/home/ennucore/dev/agorata/frontend",
&quot;nodejs_package_manager_path&quot;: &quot;npm&quot;, "nodejs_package_manager_path": "npm",
&quot;ts.external.directory.path&quot;: &quot;/home/ennucore/dev/agorata/frontend/node_modules/typescript/lib&quot;, "settings.editor.selected.configurable": "preferences.pluginManager",
&quot;vue.rearranger.settings.migration&quot;: &quot;true&quot; "ts.external.directory.path": "/home/ennucore/dev/agorata/frontend/node_modules/typescript/lib",
"vue.rearranger.settings.migration": "true"
} }
}</component> }]]></component>
<component name="RecentsManager"> <component name="RecentsManager">
<key name="MoveFile.RECENT_KEYS"> <key name="MoveFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/src" /> <recent name="$PROJECT_DIR$/src" />
@ -100,7 +105,9 @@
<workItem from="1675542984242" duration="370000" /> <workItem from="1675542984242" duration="370000" />
<workItem from="1677945869469" duration="608000" /> <workItem from="1677945869469" duration="608000" />
<workItem from="1678007103478" duration="1012000" /> <workItem from="1678007103478" duration="1012000" />
<workItem from="1678136230438" duration="23126000" /> <workItem from="1678136230438" duration="23821000" />
<workItem from="1678294988188" duration="3137000" />
<workItem from="1678453431365" duration="5876000" />
</task> </task>
<task id="LOCAL-00001" summary="Wrote the landing"> <task id="LOCAL-00001" summary="Wrote the landing">
<created>1670844191163</created> <created>1670844191163</created>
@ -256,7 +263,14 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1678286612958</updated> <updated>1678286612958</updated>
</task> </task>
<option name="localTasksCounter" value="23" /> <task id="LOCAL-00023" summary="Site constructor">
<created>1678291060051</created>
<option name="number" value="00023" />
<option name="presentableId" value="LOCAL-00023" />
<option name="project" value="LOCAL" />
<updated>1678291060051</updated>
</task>
<option name="localTasksCounter" value="24" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@ -296,6 +310,7 @@
<MESSAGE value="Checkout" /> <MESSAGE value="Checkout" />
<MESSAGE value="Managing records" /> <MESSAGE value="Managing records" />
<MESSAGE value="SiteSettings" /> <MESSAGE value="SiteSettings" />
<option name="LAST_COMMIT_MESSAGE" value="SiteSettings" /> <MESSAGE value="Site constructor" />
<option name="LAST_COMMIT_MESSAGE" value="Site constructor" />
</component> </component>
</project> </project>

2
index.html
Unescape View File

@ -6,6 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<title>Agorata</title> <title>Agorata</title>
</head> </head>
<body> <body>

9
src/assets/main.css
Unescape View File

@ -186,3 +186,12 @@ a,
max-height: 1rem; max-height: 1rem;
margin-right: 0.4rem; margin-right: 0.4rem;
} }
.material-icons.language {
position:relative;
display:inline-block;
}
.material-icons.language:after {
content: "language";
}

5
src/components/DarkLayout.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<main style="width: 100vw; min-height: 100vh; height: 100%;" id="dark_body"> <main style="width: 100vw; min-height: 100vh; height: 100%;" id="dark_body">
<Header @login-modal="login()"> <Header @login-modal="login()" @logout="logout()">
<slot name="header"></slot> <slot name="header"></slot>
</Header> </Header>
<div class="center"> <div class="center">
@ -22,6 +22,9 @@ export default {
methods: { methods: {
login() { login() {
this.$refs.loginModal.openModal(); this.$refs.loginModal.openModal();
},
logout() {
this.$store.dispatch('disconnect')
} }
} }
} }

12
src/components/Header.vue
Unescape View File

@ -17,6 +17,7 @@
<div v-else> <div v-else>
<div class="address"> <div class="address">
<span>{{address}}</span> <span>{{address}}</span>
<img src="@/assets/icons/logout.svg" alt="Logout" @click="$emit('logout')" class="logout-icon"/>
</div> </div>
</div> </div>
</div> </div>
@ -115,4 +116,15 @@ nav {
.login-b { .login-b {
margin-left: auto; margin-left: auto;
} }
.logout-icon {
width: 1rem;
margin-left: 0.5rem;
cursor: pointer;
}
.address {
display: flex;
align-items: center;
}
</style> </style>

54
src/components/SiteSettings.vue
Unescape View File

@ -31,6 +31,28 @@
<contenteditable class="record-inp" tag="div" :no-hl="true" :no-html="true" spellcheck="false" <contenteditable class="record-inp" tag="div" :no-hl="true" :no-html="true" spellcheck="false"
v-model="constructor_params.title"></contenteditable> v-model="constructor_params.title"></contenteditable>
</div> </div>
<div style="display: flex; width: 100%">
<p style="width: 9rem;">Description:</p>
<contenteditable class="record-inp" tag="div" :no-hl="true" :no-html="true" spellcheck="false"
v-model="constructor_params.description"></contenteditable>
</div>
<div style="display: flex; width: 100%">
<p style="width: 9rem;">Add link:</p>
<div v-for="link_type in link_types" :key="link_type" class="link-type" @click="addLink(link_type)">
<i class="link-type-icon add" :class="link_icons[link_type]"
@click="constructor_params.link_type = link_type"></i>
</div>
</div>
<!-- The links themselves (editing constructor_params.contacts[link_type] for each key) -->
<div v-for="link_type in Object.keys(constructor_params.contacts)" :key="link_type" class="link-type">
<div style="display: flex; width: 100%">
<!-- the icon as a label -->
<i style="width: 9rem;" class="link-type-icon" :class="link_icons[link_type]"></i>
<!-- editing the link - constructor_params.contacts[link_type] -->
<contenteditable class="record-inp" tag="div" :no-hl="true" :no-html="true" spellcheck="false"
v-model="constructor_params.contacts[link_type]"></contenteditable>
</div>
</div>
<div class="save_container center"> <div class="save_container center">
<div :class="{'record-submit': true, 'get_b': true, 'inactive': !siteChanged, 'signing': signingSite}" <div :class="{'record-submit': true, 'get_b': true, 'inactive': !siteChanged, 'signing': signingSite}"
@click="$emit('save-constructor')"> @click="$emit('save-constructor')">
@ -49,7 +71,8 @@
import Socket from "./Socket.vue"; import Socket from "./Socket.vue";
import contenteditable from 'vue-contenteditable'; import contenteditable from 'vue-contenteditable';
import {config} from "../api"; import {config} from "../api";
import {SiteConstructorParams} from "../result"; import {default_links, SiteConstructorParams} from "../result";
import {link_types, link_icons} from "../result";
export default { export default {
name: "SiteSettings", name: "SiteSettings",
@ -83,7 +106,7 @@ export default {
} }
}, },
watch: { watch: {
site_rec_patched () { site_rec_patched() {
this.$emit('change', this.site_rec_patched); this.$emit('change', this.site_rec_patched);
}, },
constructor_params: { constructor_params: {
@ -107,12 +130,22 @@ export default {
} else { } else {
return this.site_rec; return this.site_rec;
} }
},
link_types() {
// return the types from link_types that are not in the constructor_params.contacts
return link_types.filter(link_type => !(link_type in this.constructor_params.contacts));
},
link_icons() {
return link_icons;
} }
}, },
methods: { methods: {
set_site_rec(site_rec) { set_site_rec(site_rec) {
this.site_rec = site_rec; this.site_rec = site_rec;
}, },
addLink(link_type) {
this.constructor_params.contacts[link_type] = default_links[link_type];
},
} }
} }
</script> </script>
@ -191,4 +224,21 @@ export default {
.site-record-field { .site-record-field {
font-family: 'Inconsolata', monospace; font-family: 'Inconsolata', monospace;
} }
.link-type:not(:last-child) {
margin-right: 1rem;
}
.link-type-icon.add {
font-size: 2rem;
cursor: pointer;
}
.link-type-icon.add:hover {
color: #e88484;
}
.link-type-icon {
font-size: 2.5rem;
}
</style> </style>

3
src/main.ts
Unescape View File

@ -87,6 +87,9 @@ const store = createStore({
} }
} }
return null; return null;
},
async disconnect({state}) {
await state.connector.disconnect();
} }
} }
}) })

13
src/result.ts
Unescape View File

@ -144,12 +144,21 @@ export function get_ton_link(res: Result) {
return new TonLink(res.zone(), 'b/' + res.domain, res.buy_price!); return new TonLink(res.zone(), 'b/' + res.domain, res.buy_price!);
} }
export let link_types = ['telegram', 'website', 'getgems', 'email'];
export let link_icons = {'telegram': 'fab fa-telegram', 'website': 'material-icons language', 'getgems': 'fas fa-gem', 'email': 'fas fa-envelope'};
export let default_links = {'telegram': 'https://t.me/', 'website': 'https://', 'getgems': 'https://getgems.org/', 'email': 'example@example.org'};
export class SiteConstructorParams { export class SiteConstructorParams {
domain: string; domain: string;
title: string; title: string;
constructor(domain: string, title: string = '') { description: string;
contacts: Map<string, string> = new Map<string, string>();
constructor(domain: string, title: string = '', description: string = '', contacts: Map<string, string> = new Map<string, string>()) {
this.domain = domain; this.domain = domain;
this.title = title; this.title = title;
this.description = description;
this.contacts = contacts;
} }
copy(): SiteConstructorParams { copy(): SiteConstructorParams {
@ -159,5 +168,5 @@ export class SiteConstructorParams {
export async function get_constr_params(domain: string) { export async function get_constr_params(domain: string) {
let res = await call_api('get-site-data/' + domain); let res = await call_api('get-site-data/' + domain);
return new SiteConstructorParams(res.domain, res.title); return new SiteConstructorParams(res.domain, res.title, res.description, res.contacts);
} }

11
src/views/Explore.vue
Unescape View File

@ -90,11 +90,11 @@ export default {
signingWallet: false, signingWallet: false,
constructor_params: saved_constructor_params, constructor_params: saved_constructor_params,
saved_constructor_params, saved_constructor_params,
timer: '' interval: null
} }
}, },
mounted() { mounted() {
setInterval(() => get_domain_result(this.domain, this.$store.getters.address).then(r => { this.interval = setInterval(() => get_domain_result(this.domain, this.$store.getters.address).then(r => {
this.result = Object.assign({}, r); this.result = Object.assign({}, r);
if (this.isMine) { if (this.isMine) {
get_constr_params(this.domain).then(r => { get_constr_params(this.domain).then(r => {
@ -108,7 +108,7 @@ export default {
this.updSettingsComponent() this.updSettingsComponent()
}) })
} }
}), 10000); }), 20000);
}, },
computed: { computed: {
core_domain() { core_domain() {
@ -137,7 +137,7 @@ export default {
siteChanged() { siteChanged() {
let constr_change = false; let constr_change = false;
if (this.site_rec === config.agorata_adnl) { if (this.site_rec === config.agorata_adnl) {
constr_change = this.constructor_params.title !== this.saved_constructor_params.title; constr_change = this.constructor_params !== this.saved_constructor_params;
} }
return this.records && (this.site_rec !== this.records.site || constr_change); return this.records && (this.site_rec !== this.records.site || constr_change);
}, },
@ -242,6 +242,9 @@ export default {
this.updSettingsComponent(); this.updSettingsComponent();
} }
} }
},
unmounted() {
clearInterval(this.interval);
} }
} }
</script> </script>

Write Preview
Loading…
Cancel
Save