Show.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <template>
  2. <div v-if="isUser">
  3. <main-header></main-header>
  4. <div class="container">
  5. <img class="avatar" src="/assets/notes.png"/>
  6. <h2 class="has-text-centered username">@{{user.username}}</h2>
  7. <h5>A member since {{user.createdAt}}</h5>
  8. <div class="admin-functionality" v-if="this.$parent.$parent.role === 'admin' == 'admin'">
  9. <a class="button is-small is-info is-outlined" href='#' @click="changeRank('admin')" v-if="user.role == 'default'">Promote to Admin</a>
  10. <a class="button is-small is-danger is-outlined" href='#' @click="changeRank('default')" v-else>Demote to User</a>
  11. </div>
  12. <nav class="level">
  13. <div class="level-item has-text-centered">
  14. <p class="heading">Rank</p>
  15. <p class="title role">{{user.role}}</p>
  16. </div>
  17. <div class="level-item has-text-centered">
  18. <p class="heading">Songs Requested</p>
  19. <p class="title">{{ user.statistics.songsRequested }}</p>
  20. </div>
  21. <div class="level-item has-text-centered">
  22. <p class="heading">Likes</p>
  23. <p class="title">{{ user.liked.length }}</p>
  24. </div>
  25. <div class="level-item has-text-centered">
  26. <p class="heading">Dislikes</p>
  27. <p class="title">{{ user.disliked.length }}</p>
  28. </div>
  29. </nav>
  30. </div>
  31. <main-footer></main-footer>
  32. </div>
  33. </template>
  34. <script>
  35. import { Toast } from 'vue-roaster';
  36. import MainHeader from '../MainHeader.vue';
  37. import MainFooter from '../MainFooter.vue';
  38. import io from '../../io';
  39. export default {
  40. data() {
  41. return {
  42. user: {},
  43. isUser: false
  44. }
  45. },
  46. methods: {
  47. changeRank(newRank) {
  48. this.socket.emit('users.updateRole', this.user._id, 'role', ((newRank == 'admin') ? 'admin' : 'default'), res => {
  49. if (res.status == 'error') Toast.methods.addToast(res.message, 2000);
  50. else this.user.role = newRank; Toast.methods.addToast(`User ${this.$route.params.username}'s rank has been changed to: ${newRank}`, 2000);
  51. });
  52. }
  53. },
  54. ready: function() {
  55. let _this = this;
  56. io.getSocket((socket) => {
  57. _this.socket = socket;
  58. _this.socket.emit('users.findByUsername', _this.$route.params.username, res => {
  59. if (res.status == 'error') this.$router.go('/404');
  60. else {
  61. _this.user = res.data;
  62. this.user.createdAt = moment(this.user.createdAt).format('LL');
  63. _this.isUser = true;
  64. }
  65. });
  66. });
  67. },
  68. components: { MainHeader, MainFooter }
  69. }
  70. </script>
  71. <style lang="scss" scoped>
  72. .container {
  73. padding: 25px;
  74. }
  75. .avatar {
  76. border-radius: 50%;
  77. width: 250px;
  78. display: block;
  79. margin: auto;
  80. }
  81. h5 {
  82. text-align: center;
  83. margin-bottom: 25px;
  84. font-size: 17px;
  85. }
  86. .role { text-transform: capitalize; }
  87. .level { margin-top: 40px; }
  88. .admin-functionality {
  89. text-align: center;
  90. margin: 0 auto;
  91. }
  92. @media (max-width: 350px) {
  93. .username {
  94. font-size: 2.9rem;
  95. word-wrap: break-all;
  96. }
  97. }
  98. </style>