Adding links (contacts)

2 years ago · fe5f1a7087
9 changed files with 131 additions and 25 deletions
--- 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>
--- 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>
--- 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;
-}
+}
+
+.material-icons.language {
+    position:relative;
+    display:inline-block;
+}
+
+.material-icons.language:after {
+    content: "language";
+}
--- 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')
    }
  }
 }
--- 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>
--- 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>
--- a/src/main.ts
+++ b/src/main.ts
@ -87,6 +87,9 @@ const store = createStore({
                }
            }
            return null;
+        },
+        async disconnect({state}) {
+            await state.connector.disconnect();
        }
    }
 })
--- 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);
 }
--- 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>