diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/who_to_follow_panel/who_to_follow_panel.js | 179 | ||||
| -rw-r--r-- | src/components/who_to_follow_panel/who_to_follow_panel.vue | 37 |
2 files changed, 216 insertions, 0 deletions
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js new file mode 100644 index 00000000..49653c81 --- /dev/null +++ b/src/components/who_to_follow_panel/who_to_follow_panel.js @@ -0,0 +1,179 @@ +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 diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue new file mode 100644 index 00000000..fff966ab --- /dev/null +++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue @@ -0,0 +1,37 @@ +<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> |