Browse Source

Adding links (contacts)

vue
Lev 2 years ago
parent
commit
fe5f1a7087
  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

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

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

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

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

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

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

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

13
src/result.ts

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

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

Loading…
Cancel
Save