Show.vue 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <template>
  2. <main-header></main-header>
  3. <div class="container">
  4. <img class="avatar" src="https://avatars2.githubusercontent.com/u/11198912?v=3&s=460"/>
  5. <h2 class="has-text-centered">@{{user.username}}</h2>
  6. <div class="admin-functionality">
  7. <a class="button is-small is-info is-outlined" @click="changeRank('admin')">Promote to Admin</a>
  8. <a class="button is-small is-danger is-outlined" @click="changeRank('user')">Demote to User</a>
  9. </div>
  10. <nav class="level">
  11. <div class="level-item has-text-centered">
  12. <p class="heading">Rank</p>
  13. <p class="title">User</p>
  14. </div>
  15. <div class="level-item has-text-centered">
  16. <p class="heading">Songs Requested</p>
  17. <p class="title">{{ user.statistics.songsRequested }}</p>
  18. </div>
  19. <div class="level-item has-text-centered">
  20. <p class="heading">Likes</p>
  21. <p class="title">{{ user.statistics.songsLiked.length }}</p>
  22. </div>
  23. <div class="level-item has-text-centered">
  24. <p class="heading">Dislikes</p>
  25. <p class="title">{{ user.statistics.songsDisliked.length }}</p>
  26. </div>
  27. </nav>
  28. </div>
  29. <main-footer></main-footer>
  30. </template>
  31. <script>
  32. import MainHeader from '../MainHeader.vue';
  33. import MainFooter from '../MainFooter.vue';
  34. export default {
  35. data() {
  36. return {
  37. user: {}
  38. }
  39. },
  40. methods: {
  41. changeRank(newRank) {
  42. console.log(rank);
  43. Toast.methods.addToast(`User ${this.$route.params.username} has been promoted to the rank of ${rank}`, 200000);
  44. }
  45. },
  46. ready: function() {
  47. let _this = this;
  48. let socketInterval = setInterval(() => {
  49. if (!!_this.$parent.socket) {
  50. _this.socket = _this.$parent.socket;
  51. _this.socket.emit('users.findByUsername', _this.$route.params.username, res => {
  52. if (res.status == 'error') console.error(res.message); // Add 404/ Not found Component with link back to home, for now just console.log
  53. else _this.user = res.data;
  54. });
  55. clearInterval(socketInterval);
  56. }
  57. }, 100);
  58. },
  59. components: { MainHeader, MainFooter },
  60. }
  61. </script>
  62. <style lang="scss" scoped>
  63. .container {
  64. padding: 25px;
  65. }
  66. .avatar {
  67. border-radius: 50%;
  68. width: 250px;
  69. display: block;
  70. margin: auto;
  71. }
  72. .level {
  73. margin-top: 40px;
  74. }
  75. .admin-functionality {
  76. text-align: center;
  77. margin: 0 auto;
  78. }
  79. </style>