Show.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <div class="container">
  3. <img class="avatar" src="https://avatars2.githubusercontent.com/u/11198912?v=3&s=460"/>
  4. <h1 class="has-text-centered">@{{user.username}}</h1>
  5. <nav class="level">
  6. <div class="level-item has-text-centered">
  7. <p class="heading">Rank</p>
  8. <p class="title">User</p>
  9. </div>
  10. <div class="level-item has-text-centered">
  11. <p class="heading">Songs Requested</p>
  12. <p class="title">{{requested}}</p>
  13. </div>
  14. <div class="level-item has-text-centered">
  15. <p class="heading">Likes</p>
  16. <p class="title">{{liked}}</p>
  17. </div>
  18. <div class="level-item has-text-centered">
  19. <p class="heading">Dislikes</p>
  20. <p class="title">{{disliked}}</p>
  21. </div>
  22. </nav>
  23. </div>
  24. </template>
  25. <script>
  26. export default {
  27. data() {
  28. return {
  29. user: {},
  30. liked: 0,
  31. disliked: 0,
  32. requested: 0
  33. }
  34. },
  35. methods: {
  36. },
  37. ready: function() {
  38. let local = this;
  39. local.socket = local.$parent.socket;
  40. local.socket.emit("/u/:username", local.$route.params.username, results => {
  41. local.user = results.data;
  42. local.liked = results.data.statistics.songsLiked.length;
  43. local.disliked = local.user.statistics.songsDisliked.length;
  44. local.requested = local.user.statistics.songsRequested;
  45. });
  46. }
  47. }
  48. </script>
  49. <style lang="scss">
  50. .avatar {
  51. border-radius: 50%;
  52. width: 250px;
  53. display: block;
  54. margin: auto;
  55. }
  56. .level {
  57. margin-top: 40px;
  58. }
  59. </style>