Show.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <template>
  2. <div v-if="isUser">
  3. <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
  9. v-if="
  10. $parent.role === 'admin' && !($parent.userId === user._id)
  11. "
  12. class="admin-functionality"
  13. >
  14. <a
  15. v-if="user.role == 'default'"
  16. class="button is-small is-info is-outlined"
  17. @click="changeRank('admin')"
  18. >Promote to Admin</a
  19. >
  20. <a
  21. v-if="user.role == 'admin'"
  22. class="button is-small is-danger is-outlined"
  23. @click="changeRank('default')"
  24. >Demote to User</a
  25. >
  26. </div>
  27. <nav class="level">
  28. <div class="level-item has-text-centered">
  29. <p class="heading">
  30. Rank
  31. </p>
  32. <p class="title role">
  33. {{ user.role }}
  34. </p>
  35. </div>
  36. <div class="level-item has-text-centered">
  37. <p class="heading">
  38. Songs Requested
  39. </p>
  40. <p class="title">
  41. {{ user.statistics.songsRequested }}
  42. </p>
  43. </div>
  44. <div class="level-item has-text-centered">
  45. <p class="heading">
  46. Likes
  47. </p>
  48. <p class="title">
  49. {{ user.liked.length }}
  50. </p>
  51. </div>
  52. <div class="level-item has-text-centered">
  53. <p class="heading">
  54. Dislikes
  55. </p>
  56. <p class="title">
  57. {{ user.disliked.length }}
  58. </p>
  59. </div>
  60. </nav>
  61. </div>
  62. <main-footer />
  63. </div>
  64. </template>
  65. <script>
  66. import { Toast } from "vue-roaster";
  67. import MainHeader from "../MainHeader.vue";
  68. import MainFooter from "../MainFooter.vue";
  69. import io from "../../io";
  70. export default {
  71. components: { MainHeader, MainFooter },
  72. data() {
  73. return {
  74. user: {},
  75. isUser: false
  76. };
  77. },
  78. mounted() {
  79. const _this = this;
  80. io.getSocket(socket => {
  81. _this.socket = socket;
  82. _this.socket.emit(
  83. "users.findByUsername",
  84. _this.$route.params.username,
  85. res => {
  86. if (res.status === "error") this.$router.go("/404");
  87. else {
  88. _this.user = res.data;
  89. this.user.createdAt = moment(
  90. this.user.createdAt
  91. ).format("LL");
  92. _this.isUser = true;
  93. }
  94. }
  95. );
  96. });
  97. },
  98. methods: {
  99. changeRank(newRank) {
  100. this.socket.emit(
  101. "users.updateRole",
  102. this.user._id,
  103. newRank === "admin" ? "admin" : "default",
  104. res => {
  105. if (res.status === "error")
  106. Toast.methods.addToast(res.message, 2000);
  107. else this.user.role = newRank;
  108. Toast.methods.addToast(
  109. `User ${this.$route.params.username}'s rank has been changed to: ${newRank}`,
  110. 2000
  111. );
  112. }
  113. );
  114. }
  115. }
  116. };
  117. </script>
  118. <style lang="scss" scoped>
  119. .container {
  120. padding: 25px;
  121. }
  122. .avatar {
  123. border-radius: 50%;
  124. width: 250px;
  125. display: block;
  126. margin: auto;
  127. }
  128. h5 {
  129. text-align: center;
  130. margin-bottom: 25px;
  131. font-size: 17px;
  132. }
  133. .role {
  134. text-transform: capitalize;
  135. }
  136. .level {
  137. margin-top: 40px;
  138. }
  139. .admin-functionality {
  140. text-align: center;
  141. margin: 0 auto;
  142. }
  143. @media (max-width: 350px) {
  144. .username {
  145. font-size: 2.9rem;
  146. word-wrap: break-all;
  147. }
  148. }
  149. </style>