From fe5f1a7087247666e96d67210a2d4570f81e93ca Mon Sep 17 00:00:00 2001
From: ennucore <ennucore@gmail.com>
Date: Sun, 12 Mar 2023 10:44:32 +0100
Subject: [PATCH] Adding links (contacts)

---
 .idea/workspace.xml             | 45 ++++++++++++++++++---------
 index.html                      |  2 ++
 src/assets/main.css             | 11 ++++++-
 src/components/DarkLayout.vue   |  5 ++-
 src/components/Header.vue       | 12 ++++++++
 src/components/SiteSettings.vue | 54 +++++++++++++++++++++++++++++++--
 src/main.ts                     |  3 ++
 src/result.ts                   | 13 ++++++--
 src/views/Explore.vue           | 11 ++++---
 9 files changed, 131 insertions(+), 25 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 1a658e1..716b3b3 100644
--- a/.idea/workspace.xml
+++ b/.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>
\ No newline at end of file
diff --git a/index.html b/index.html
index d0d6d31..4b5abc1 100644
--- a/index.html
+++ b/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>
diff --git a/src/assets/main.css b/src/assets/main.css
index 77b1fd6..ab2c248 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -185,4 +185,13 @@ a,
 .b.back > img {
     max-height: 1rem;
     margin-right: 0.4rem;
-}
\ No newline at end of file
+}
+
+.material-icons.language {
+    position:relative;
+    display:inline-block;
+}
+
+.material-icons.language:after {
+    content: "language";
+}
diff --git a/src/components/DarkLayout.vue b/src/components/DarkLayout.vue
index f0c221e..daea2ee 100644
--- a/src/components/DarkLayout.vue
+++ b/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')
     }
   }
 }
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 5502480..5a98a12 100644
--- a/src/components/Header.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/SiteSettings.vue b/src/components/SiteSettings.vue
index df6517d..d2fb347 100644
--- a/src/components/SiteSettings.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index f276049..a82a311 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -87,6 +87,9 @@ const store = createStore({
                 }
             }
             return null;
+        },
+        async disconnect({state}) {
+            await state.connector.disconnect();
         }
     }
 })
diff --git a/src/result.ts b/src/result.ts
index bf20b1f..91927d6 100644
--- a/src/result.ts
+++ b/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);
 }
diff --git a/src/views/Explore.vue b/src/views/Explore.vue
index 9bba45f..b8d753c 100644
--- a/src/views/Explore.vue
+++ b/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>