Show.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
  1. <template>
  2. <div v-if="isUser">
  3. <metadata v-bind:title="`Profile | ${user.username}`" />
  4. <main-header />
  5. <!--div class="container">
  6. <img class="avatar" src="/assets/notes.png" />
  7. <h2 class="has-text-centered username">@{{ user.username }}</h2>
  8. <h5>A member since {{ user.createdAt }}</h5>
  9. <div
  10. v-if="role === 'admin' && userId !== user._id"
  11. class="admin-functionality"
  12. >
  13. <a
  14. v-if="user.role == 'default'"
  15. class="button is-small is-info is-outlined"
  16. @click="changeRank('admin')"
  17. >Promote to Admin</a
  18. >
  19. <a
  20. v-if="user.role == 'admin'"
  21. class="button is-small is-danger is-outlined"
  22. @click="changeRank('default')"
  23. >Demote to User</a
  24. >
  25. </div>
  26. <nav class="level">
  27. <div class="level-item has-text-centered">
  28. <p class="heading">
  29. Rank
  30. </p>
  31. <p class="title role">
  32. {{ user.role }}
  33. </p>
  34. </div>
  35. <div class="level-item has-text-centered">
  36. <p class="heading">
  37. Songs Requested
  38. </p>
  39. <p class="title">
  40. {{ user.statistics.songsRequested }}
  41. </p>
  42. </div>
  43. <div class="level-item has-text-centered">
  44. <p class="heading">
  45. Likes
  46. </p>
  47. <p class="title">
  48. {{ user.liked.length }}
  49. </p>
  50. </div>
  51. <div class="level-item has-text-centered">
  52. <p class="heading">
  53. Dislikes
  54. </p>
  55. <p class="title">
  56. {{ user.disliked.length }}
  57. </p>
  58. </div>
  59. </nav>
  60. </div-->
  61. <div class="info-section">
  62. <div class="picture-name-row">
  63. <img
  64. class="profile-picture"
  65. src="https://avatars3.githubusercontent.com/u/9784561?s=460&v=4"
  66. />
  67. <div>
  68. <div class="name-role-row">
  69. <p class="name">Kristian Vos</p>
  70. <span class="role admin">admin</span>
  71. </div>
  72. <p class="username">@Kris</p>
  73. </div>
  74. </div>
  75. <div class="buttons">
  76. <button class="button is-primary">Edit</button>
  77. <button class="button is-primary">Settings</button>
  78. </div>
  79. <div class="bio-row">
  80. <i class="material-icons">notes</i>
  81. <p>
  82. Test Test Test Test Test Test Test Test Test Test Test Test
  83. Test Test Test Test
  84. </p>
  85. </div>
  86. <div class="date-location-row">
  87. <div class="date">
  88. <i class="material-icons">calendar_today</i>
  89. <p>February 25, 2011</p>
  90. </div>
  91. <div class="location">
  92. <i class="material-icons">location_on</i>
  93. <p>The Netherlands</p>
  94. </div>
  95. </div>
  96. </div>
  97. <div class="bottom-section">
  98. <div class="buttons">
  99. <button class="active">Recent activity</button>
  100. <button>Playlists</button>
  101. </div>
  102. <div class="content">
  103. Content here
  104. </div>
  105. </div>
  106. <main-footer />
  107. </div>
  108. </template>
  109. <script>
  110. import { mapState } from "vuex";
  111. import Toast from "toasters";
  112. import { format, parseISO } from "date-fns";
  113. import MainHeader from "../MainHeader.vue";
  114. import MainFooter from "../MainFooter.vue";
  115. import io from "../../io";
  116. export default {
  117. components: { MainHeader, MainFooter },
  118. data() {
  119. return {
  120. user: {},
  121. isUser: false
  122. };
  123. },
  124. computed: mapState({
  125. role: state => state.user.auth.role,
  126. userId: state => state.user.auth.userId
  127. }),
  128. mounted() {
  129. io.getSocket(socket => {
  130. this.socket = socket;
  131. this.socket.emit(
  132. "users.findByUsername",
  133. this.$route.params.username,
  134. res => {
  135. if (res.status === "error") this.$router.go("/404");
  136. else {
  137. this.user = res.data;
  138. this.user.createdAt = format(
  139. parseISO(this.user.createdAt),
  140. "MMMM do yyyy"
  141. );
  142. this.isUser = true;
  143. }
  144. }
  145. );
  146. });
  147. },
  148. methods: {
  149. changeRank(newRank) {
  150. this.socket.emit(
  151. "users.updateRole",
  152. this.user._id,
  153. newRank === "admin" ? "admin" : "default",
  154. res => {
  155. if (res.status === "error")
  156. new Toast({ content: res.message, timeout: 2000 });
  157. else this.user.role = newRank;
  158. new Toast({
  159. content: `User ${this.$route.params.username}'s rank has been changed to: ${newRank}`,
  160. timeout: 2000
  161. });
  162. }
  163. );
  164. }
  165. }
  166. };
  167. </script>
  168. <style lang="scss" scoped>
  169. @import "styles/global.scss";
  170. .info-section {
  171. width: 912px;
  172. margin-left: auto;
  173. margin-right: auto;
  174. margin-top: 32px;
  175. padding: 24px;
  176. .picture-name-row {
  177. display: flex;
  178. flex-direction: row;
  179. align-items: center;
  180. column-gap: 32px;
  181. justify-content: center;
  182. margin-bottom: 24px;
  183. }
  184. .profile-picture {
  185. width: 100px;
  186. height: 100px;
  187. border-radius: 100%;
  188. }
  189. .name-role-row {
  190. display: flex;
  191. flex-direction: row;
  192. align-items: center;
  193. column-gap: 12px;
  194. }
  195. .name {
  196. font-size: 34px;
  197. line-height: 40px;
  198. color: $dark-grey-3;
  199. }
  200. .role {
  201. padding: 2px 24px;
  202. color: $white;
  203. text-transform: uppercase;
  204. font-size: 12px;
  205. line-height: 14px;
  206. height: 18px;
  207. border-radius: 5px;
  208. &.admin {
  209. background-color: $red;
  210. }
  211. }
  212. .username {
  213. font-size: 24px;
  214. line-height: 28px;
  215. color: $dark-grey;
  216. }
  217. .buttons {
  218. width: 388px;
  219. display: flex;
  220. flex-direction: row;
  221. column-gap: 20px;
  222. margin-left: auto;
  223. margin-right: auto;
  224. margin-bottom: 24px;
  225. .button {
  226. flex: 1;
  227. font-size: 17px;
  228. line-height: 20px;
  229. }
  230. }
  231. .bio-row,
  232. .date-location-row {
  233. i {
  234. font-size: 24px;
  235. color: $dark-grey-2;
  236. margin-right: 12px;
  237. }
  238. p {
  239. font-size: 17px;
  240. line-height: 20px;
  241. color: $dark-grey-2;
  242. word-break: break-word;
  243. }
  244. }
  245. .bio-row {
  246. max-width: 608px;
  247. margin-bottom: 24px;
  248. margin-left: auto;
  249. margin-right: auto;
  250. display: flex;
  251. width: max-content;
  252. }
  253. .date-location-row {
  254. max-width: 608px;
  255. margin-left: auto;
  256. margin-right: auto;
  257. margin-bottom: 24px;
  258. display: flex;
  259. width: max-content;
  260. margin-bottom: 24px;
  261. column-gap: 48px;
  262. }
  263. .date,
  264. .location {
  265. display: flex;
  266. }
  267. }
  268. .bottom-section {
  269. width: 960px;
  270. margin-left: auto;
  271. margin-right: auto;
  272. margin-top: 32px;
  273. padding: 24px;
  274. display: flex;
  275. column-gap: 64px;
  276. .buttons {
  277. height: 100%;
  278. width: 251px;
  279. button {
  280. outline: none;
  281. border: none;
  282. box-shadow: none;
  283. color: $musareBlue;
  284. font-size: 22px;
  285. line-height: 26px;
  286. padding: 7px 0 7px 12px;
  287. width: 100%;
  288. text-align: left;
  289. cursor: pointer;
  290. border-radius: 5px;
  291. background-color: transparent;
  292. &.active {
  293. color: $white;
  294. background-color: $musareBlue;
  295. }
  296. }
  297. }
  298. .content {
  299. outline: 1px solid black;
  300. width: 597px;
  301. }
  302. }
  303. .night-mode {
  304. .name,
  305. .username,
  306. .bio-row i,
  307. .bio-row p,
  308. .date-location-row i,
  309. .date-location-row p {
  310. color: $light-grey;
  311. }
  312. }
  313. </style>