Add who-to-follow-panel

src/App.js

@@ -2,6 +2,7 @@ import UserPanel from './components/user_panel/user_panel.vue'
 import NavPanel from './components/nav_panel/nav_panel.vue'
 import Notifications from './components/notifications/notifications.vue'
 import UserFinder from './components/user_finder/user_finder.vue'
+import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
 import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
 import ChatPanel from './components/chat_panel/chat_panel.vue'
 
@@ -12,8 +13,9 @@ export default {
     NavPanel,
     Notifications,
     UserFinder,
-    ChatPanel,
-    InstanceSpecificPanel
+    WhoToFollowPanel,
+    InstanceSpecificPanel,
+    ChatPanel
   },
   data: () => ({
     mobileActivePanel: 'timeline'
@@ -27,6 +29,7 @@ export default {
     style () { return { 'background-image': `url(${this.background})` } },
     sitename () { return this.$store.state.config.name },
     chat () { return this.$store.state.chat.channel.state === 'joined' },
+    showWhoToFollowPanel () { return this.$store.state.config.showWhoToFollowPanel },
     showInstanceSpecificPanel () { return this.$store.state.config.showInstanceSpecificPanel }
   },
   methods: {

src/App.vue

@@ -24,6 +24,7 @@
               <user-panel></user-panel>
               <nav-panel></nav-panel>
               <instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel>
+              <who-to-follow-panel v-if="currentUser && showWhoToFollowPanel"></who-to-follow-panel>
               <chat-panel v-if="currentUser && chat"></chat-panel>
               <notifications v-if="currentUser"></notifications>
             </div>

src/components/who_to_follow_panel/who_to_follow_panel.js

+const WhoToFollowPanel = {
+  data: () => ({
+    img1: '/images/avi.png',
+    link1: null,
+    name1: '',
+    img2: '/images/avi.png',
+    link2: null,
+    name2: '',
+    img3: '/images/avi.png',
+    link3: null,
+    name3: ''
+  }),
+  computed: {
+    user: function () {
+      return this.$store.state.users.currentUser.screen_name
+    },
+    moreUrl: function () {
+      var host = window.location.hostname
+      var user = this.user
+      var url = 'https://vinayaka.distsn.org/?' +
+            encodeURIComponent(host) + '+' + encodeURIComponent(user)
+      return url
+    },
+    showWhoToFollowPanel () {
+      return this.$store.state.config.showWhoToFollowPanel
+    }
+  },
+  watch: {
+    user: function (user, oldUser) {
+      function showUsers (panel, users, aHost, aUser) {
+        var cn
+        var index = 0
+        var random = Math.floor(Math.random() * 10)
+        for (cn = random; cn < users.length; cn = cn + 10) {
+          var user
+          user = users[cn]
+          var host
+          host = user.host
+          var username
+          if (user.username) {
+            username = user.username
+          } else {
+            username = user.user
+          }
+          var img
+          if (user.avatar) {
+            img = user.avatar
+          } else {
+            img = '/images/avi.png'
+          }
+          var link = 'https://' + host + '/users/' + username
+          var name = username + '@' + host
+          if ((!user.following) &&
+            (!user.blacklisted) &&
+            (!(host === aHost && username === aUser))) {
+            if (index === 0) {
+              panel.img1 = img
+              panel.link1 = link
+              panel.name1 = name
+            } else if (index === 1) {
+              panel.img2 = img
+              panel.link2 = link
+              panel.name2 = name
+            } else if (index === 2) {
+              panel.img3 = img
+              panel.link3 = link
+              panel.name3 = name
+            }
+            index = index + 1
+            if (index > 2) {
+              break
+            }
+          }
+        }
+      }
+      function getUsers (panel) {
+        var user = panel.$store.state.users.currentUser.screen_name
+        if (user) {
+          panel.name1 = 'Loading...'
+          panel.name2 = 'Loading...'
+          panel.name3 = 'Loading...'
+          var host = window.location.hostname
+          var url = 'https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-simple-api.cgi?' +
+            encodeURIComponent(host) + '+' + encodeURIComponent(user)
+          window.fetch(url, {mode: 'cors'}).then(function (response) {
+            if (response.ok) {
+              return response.json()
+            } else {
+              panel.name1 = ''
+              panel.name2 = ''
+              panel.name3 = ''
+            }
+          }).then(function (users) {
+            showUsers(panel, users, host, user)
+          })
+        }
+      }
+      if (this.showWhoToFollowPanel) {
+        getUsers(this)
+      }
+    }
+  },
+  mounted:
+    function () {
+      function showUsers (panel, users, aHost, aUser) {
+        var cn
+        var index = 0
+        var random = Math.floor(Math.random() * 10)
+        for (cn = random; cn < users.length; cn = cn + 10) {
+          var user
+          user = users[cn]
+          var host
+          host = user.host
+          var username
+          if (user.username) {
+            username = user.username
+          } else {
+            username = user.user
+          }
+          var img
+          if (user.avatar) {
+            img = user.avatar
+          } else {
+            img = '/images/avi.png'
+          }
+          var link = 'https://' + host + '/users/' + username
+          var name = username + '@' + host
+          if ((!user.following) &&
+            (!user.blacklisted) &&
+            (!(host === aHost && username === aUser))) {
+            if (index === 0) {
+              panel.img1 = img
+              panel.link1 = link
+              panel.name1 = name
+            } else if (index === 1) {
+              panel.img2 = img
+              panel.link2 = link
+              panel.name2 = name
+            } else if (index === 2) {
+              panel.img3 = img
+              panel.link3 = link
+              panel.name3 = name
+            }
+            index = index + 1
+            if (index > 2) {
+              break
+            }
+          }
+        }
+      }
+      function getUsers (panel) {
+        var user = panel.user
+        if (user) {
+          panel.name1 = 'Loading...'
+          panel.name2 = 'Loading...'
+          panel.name3 = 'Loading...'
+          var host = window.location.hostname
+          var url = 'https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-simple-api.cgi?' +
+            encodeURIComponent(host) + '+' + encodeURIComponent(user)
+          window.fetch(url, {mode: 'cors'}).then(function (response) {
+            if (response.ok) {
+              return response.json()
+            } else {
+              panel.name1 = ''
+              panel.name2 = ''
+              panel.name3 = ''
+            }
+          }).then(function (users) {
+            showUsers(panel, users, host, user)
+          })
+        }
+      }
+      if (this.showWhoToFollowPanel) {
+        getUsers(this)
+      }
+    }
+}
+
+export default WhoToFollowPanel

src/components/who_to_follow_panel/who_to_follow_panel.vue

+<template>
+  <div class="who-to-follow-panel">
+    <div class="panel panel-default base01-background">
+      <div class="panel-heading timeline-heading base02-background base04">
+        <div class="title">
+          Who to follow
+        </div>
+      </div>
+      <div class="panel-body who-to-follow">
+        <p>
+          <img v-bind:src="img1"/> <a v-bind:href="link1" target="_blank">{{ name1 }}</a><br>
+          <img v-bind:src="img2"/> <a v-bind:href="link2" target="_blank">{{ name2 }}</a><br>
+          <img v-bind:src="img3"/> <a v-bind:href="link3" target="_blank">{{ name3 }}</a><br>
+          <img v-bind:src="$store.state.config.logo"> <a v-bind:href="moreUrl" target="_blank">More</a>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./who_to_follow_panel.js" ></script>
+
+<style lang="scss">
+  .who-to-follow * {
+    vertical-align: middle;
+  }
+  .who-to-follow img {
+    width: 32px;
+    height: 32px;
+  }
+  .who-to-follow p {
+    line-height: 40px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>

src/main.js

@@ -88,10 +88,11 @@ window.fetch('/api/statusnet/config.json')
 window.fetch('/static/config.json')
   .then((res) => res.json())
   .then((data) => {
-    const {theme, background, logo, showInstanceSpecificPanel} = data
+    const {theme, background, logo, showWhoToFollowPanel, showInstanceSpecificPanel} = data
     store.dispatch('setOption', { name: 'theme', value: theme })
     store.dispatch('setOption', { name: 'background', value: background })
     store.dispatch('setOption', { name: 'logo', value: logo })
+    store.dispatch('setOption', { name: 'showWhoToFollowPanel', value: showWhoToFollowPanel })
     store.dispatch('setOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel })
     if (data['chatDisabled']) {
       store.dispatch('disableChat')

static/config.json

@@ -4,5 +4,6 @@
   "logo": "/static/logo.png",
   "defaultPath": "/main/all",
   "chatDisabled": false,
+  "showWhoToFollowPanel": false,
   "showInstanceSpecificPanel": false
 }