Show.vue 2.5 KB

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