Browse Source

Adding links (contacts)

vue
Lev 2 years ago
parent
commit
fe5f1a7087
  1. 45
      .idea/workspace.xml
  2. 2
      index.html
  3. 11
      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"?>
<project version="4">
<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$/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/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/views/Explore.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Explore.vue" afterDir="false" />
</list>
@ -32,17 +36,18 @@
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" />
</component>
<component name="PropertiesComponent">{
&quot;keyToString&quot;: {
&quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
&quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
&quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
&quot;last_opened_file_path&quot;: &quot;/home/ennucore/dev/agorata/frontend&quot;,
&quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
&quot;ts.external.directory.path&quot;: &quot;/home/ennucore/dev/agorata/frontend/node_modules/typescript/lib&quot;,
&quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
<component name="PropertiesComponent"><![CDATA[{
"keyToString": {
"RunOnceActivity.OpenProjectViewOnStart": "true",
"RunOnceActivity.ShowReadmeOnStart": "true",
"WebServerToolWindowFactoryState": "false",
"last_opened_file_path": "/home/ennucore/dev/agorata/frontend",
"nodejs_package_manager_path": "npm",
"settings.editor.selected.configurable": "preferences.pluginManager",
"ts.external.directory.path": "/home/ennucore/dev/agorata/frontend/node_modules/typescript/lib",
"vue.rearranger.settings.migration": "true"
}
}</component>
}]]></component>
<component name="RecentsManager">
<key name="MoveFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/src" />
@ -100,7 +105,9 @@
<workItem from="1675542984242" duration="370000" />
<workItem from="1677945869469" duration="608000" />
<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 id="LOCAL-00001" summary="Wrote the landing">
<created>1670844191163</created>
@ -256,7 +263,14 @@
<option name="project" value="LOCAL" />
<updated>1678286612958</updated>
</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 />
</component>
<component name="TypeScriptGeneratedFilesManager">
@ -296,6 +310,7 @@
<MESSAGE value="Checkout" />
<MESSAGE value="Managing records" />
<MESSAGE value="SiteSettings" />
<option name="LAST_COMMIT_MESSAGE" value="SiteSettings" />
<MESSAGE value="Site constructor" />
<option name="LAST_COMMIT_MESSAGE" value="Site constructor" />
</component>
</project>

2
index.html

@ -6,6 +6,8 @@
<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=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>
</head>
<body>

11
src/assets/main.css

@ -185,4 +185,13 @@ a,
.b.back > img {
max-height: 1rem;
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>
<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>
</Header>
<div class="center">
@ -22,6 +22,9 @@ export default {
methods: {
login() {
this.$refs.loginModal.openModal();
},
logout() {
this.$store.dispatch('disconnect')
}
}
}

12
src/components/Header.vue

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

54
src/components/SiteSettings.vue

@ -31,6 +31,28 @@
<contenteditable class="record-inp" tag="div" :no-hl="true" :no-html="true" spellcheck="false"
v-model="constructor_params.title"></contenteditable>
</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="{'record-submit': true, 'get_b': true, 'inactive': !siteChanged, 'signing': signingSite}"
@click="$emit('save-constructor')">
@ -49,7 +71,8 @@
import Socket from "./Socket.vue";
import contenteditable from 'vue-contenteditable';
import {config} from "../api";
import {SiteConstructorParams} from "../result";
import {default_links, SiteConstructorParams} from "../result";
import {link_types, link_icons} from "../result";
export default {
name: "SiteSettings",
@ -83,7 +106,7 @@ export default {
}
},
watch: {
site_rec_patched () {
site_rec_patched() {
this.$emit('change', this.site_rec_patched);
},
constructor_params: {
@ -107,12 +130,22 @@ export default {
} else {
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: {
set_site_rec(site_rec) {
this.site_rec = site_rec;
},
addLink(link_type) {
this.constructor_params.contacts[link_type] = default_links[link_type];
},
}
}
</script>
@ -191,4 +224,21 @@ export default {
.site-record-field {
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>

3
src/main.ts

@ -87,6 +87,9 @@ const store = createStore({
}
}
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!);
}
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 {
domain: 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.title = title;
this.description = description;
this.contacts = contacts;
}
copy(): SiteConstructorParams {
@ -159,5 +168,5 @@ export class SiteConstructorParams {
export async function get_constr_params(domain: string) {
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,
constructor_params: saved_constructor_params,
saved_constructor_params,
timer: ''
interval: null
}
},
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);
if (this.isMine) {
get_constr_params(this.domain).then(r => {
@ -108,7 +108,7 @@ export default {
this.updSettingsComponent()
})
}
}), 10000);
}), 20000);
},
computed: {
core_domain() {
@ -137,7 +137,7 @@ export default {
siteChanged() {
let constr_change = false;
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);
},
@ -242,6 +242,9 @@ export default {
this.updSettingsComponent();
}
}
},
unmounted() {
clearInterval(this.interval);
}
}
</script>

Loading…
Cancel
Save