Show.vue 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499
  1. <template>
  2. <div v-if="isUser">
  3. <metadata v-bind:title="`Profile | ${user.username}`" />
  4. <edit-playlist v-if="modals.editPlaylist" />
  5. <create-playlist v-if="modals.createPlaylist" />
  6. <main-header />
  7. <div class="info-section">
  8. <div class="picture-name-row">
  9. <img
  10. class="profile-picture"
  11. :src="
  12. user.avatar
  13. ? `${user.avatar}?d=${notes}&s=250`
  14. : '/assets/notes.png'
  15. "
  16. onerror="this.src='/assets/notes.png'; this.onerror=''"
  17. />
  18. <div>
  19. <div class="name-role-row">
  20. <p class="name">{{ user.name }}</p>
  21. <span class="role admin" v-if="user.role === 'admin'"
  22. >admin</span
  23. >
  24. </div>
  25. <p class="username">@{{ user.username }}</p>
  26. </div>
  27. </div>
  28. <div class="buttons" v-if="userId === user._id || role === 'admin'">
  29. <router-link
  30. :to="`/admin/users?userId=${user._id}`"
  31. class="button is-primary"
  32. v-if="role === 'admin'"
  33. >
  34. Edit
  35. </router-link>
  36. <router-link
  37. to="/settings"
  38. class="button is-primary"
  39. v-if="userId === user._id"
  40. >
  41. Settings
  42. </router-link>
  43. </div>
  44. <div class="bio-row" v-if="user.bio">
  45. <i class="material-icons">notes</i>
  46. <p>{{ user.bio }}</p>
  47. </div>
  48. <div
  49. class="date-location-row"
  50. v-if="user.createdAt || user.location"
  51. >
  52. <div class="date" v-if="user.createdAt">
  53. <i class="material-icons">calendar_today</i>
  54. <p>{{ user.createdAt }}</p>
  55. </div>
  56. <div class="location" v-if="user.location">
  57. <i class="material-icons">location_on</i>
  58. <p>{{ user.location }}</p>
  59. </div>
  60. </div>
  61. </div>
  62. <div class="bottom-section">
  63. <div class="buttons">
  64. <button
  65. :class="{ active: activeTab === 'recentActivity' }"
  66. @click="switchTab('recentActivity')"
  67. >
  68. Recent activity
  69. </button>
  70. <button
  71. :class="{ active: activeTab === 'playlists' }"
  72. @click="switchTab('playlists')"
  73. v-if="user._id === userId"
  74. >
  75. Playlists
  76. </button>
  77. </div>
  78. <div
  79. class="content recent-activity-tab"
  80. v-if="activeTab === 'recentActivity'"
  81. >
  82. Content here
  83. </div>
  84. <div class="content playlists-tab" v-if="activeTab === 'playlists'">
  85. <div
  86. class="item playlist"
  87. v-for="playlist in playlists"
  88. :key="playlist._id"
  89. >
  90. <div class="left-part">
  91. <p class="top-text">{{ playlist.displayName }}</p>
  92. <p class="bottom-text">
  93. {{ totalLength(playlist) }} •
  94. {{ playlist.songs.length }}
  95. {{ playlist.songs.length === 1 ? "song" : "songs" }}
  96. </p>
  97. </div>
  98. <div class="right-part">
  99. <button
  100. class="button is-primary"
  101. @click="editPlaylistClick(playlist._id)"
  102. >
  103. Edit
  104. </button>
  105. </div>
  106. </div>
  107. <button
  108. class="button is-primary"
  109. @click="
  110. openModal({
  111. sector: 'station',
  112. modal: 'createPlaylist'
  113. })
  114. "
  115. >
  116. Create new playlist
  117. </button>
  118. </div>
  119. </div>
  120. <main-footer />
  121. </div>
  122. </template>
  123. <script>
  124. import { mapState, mapActions } from "vuex";
  125. import { format, parseISO } from "date-fns";
  126. import MainHeader from "../MainHeader.vue";
  127. import MainFooter from "../MainFooter.vue";
  128. import io from "../../io";
  129. import utils from "../../js/utils";
  130. export default {
  131. components: {
  132. MainHeader,
  133. MainFooter,
  134. CreatePlaylist: () => import("../Modals/Playlists/Create.vue"),
  135. EditPlaylist: () => import("../Modals/Playlists/Edit.vue")
  136. },
  137. data() {
  138. return {
  139. utils,
  140. user: {},
  141. notes: "",
  142. isUser: false,
  143. activeTab: "recentActivity",
  144. playlists: []
  145. };
  146. },
  147. computed: mapState({
  148. role: state => state.user.auth.role,
  149. userId: state => state.user.auth.userId,
  150. ...mapState("modals", {
  151. modals: state => state.modals.station
  152. })
  153. }),
  154. mounted() {
  155. lofig.get("frontendDomain").then(frontendDomain => {
  156. this.frontendDomain = frontendDomain;
  157. this.notes = encodeURI(`${this.frontendDomain}/assets/notes.png`);
  158. });
  159. io.getSocket(socket => {
  160. this.socket = socket;
  161. this.socket.emit(
  162. "users.findByUsername",
  163. this.$route.params.username,
  164. res => {
  165. if (res.status === "error") this.$router.go("/404");
  166. else {
  167. this.user = res.data;
  168. this.user.createdAt = format(
  169. parseISO(this.user.createdAt),
  170. "MMMM do yyyy"
  171. );
  172. this.isUser = true;
  173. if (this.user._id === this.userId) {
  174. this.socket.emit("playlists.indexForUser", res => {
  175. if (res.status === "success")
  176. this.playlists = res.data;
  177. });
  178. this.socket.on(
  179. "event:playlist.create",
  180. playlist => {
  181. this.playlists.push(playlist);
  182. }
  183. );
  184. this.socket.on(
  185. "event:playlist.delete",
  186. playlistId => {
  187. this.playlists.forEach(
  188. (playlist, index) => {
  189. if (playlist._id === playlistId) {
  190. this.playlists.splice(index, 1);
  191. }
  192. }
  193. );
  194. }
  195. );
  196. this.socket.on("event:playlist.addSong", data => {
  197. this.playlists.forEach((playlist, index) => {
  198. if (playlist._id === data.playlistId) {
  199. this.playlists[index].songs.push(
  200. data.song
  201. );
  202. }
  203. });
  204. });
  205. this.socket.on(
  206. "event:playlist.removeSong",
  207. data => {
  208. this.playlists.forEach(
  209. (playlist, index) => {
  210. if (
  211. playlist._id === data.playlistId
  212. ) {
  213. this.playlists[
  214. index
  215. ].songs.forEach(
  216. (song, index2) => {
  217. if (
  218. song._id ===
  219. data.songId
  220. ) {
  221. this.playlists[
  222. index
  223. ].songs.splice(
  224. index2,
  225. 1
  226. );
  227. }
  228. }
  229. );
  230. }
  231. }
  232. );
  233. }
  234. );
  235. this.socket.on(
  236. "event:playlist.updateDisplayName",
  237. data => {
  238. this.playlists.forEach(
  239. (playlist, index) => {
  240. if (
  241. playlist._id === data.playlistId
  242. ) {
  243. this.playlists[
  244. index
  245. ].displayName =
  246. data.displayName;
  247. }
  248. }
  249. );
  250. }
  251. );
  252. }
  253. }
  254. }
  255. );
  256. });
  257. },
  258. methods: {
  259. switchTab(tabName) {
  260. this.activeTab = tabName;
  261. },
  262. editPlaylistClick(playlistId) {
  263. console.log(playlistId);
  264. this.editPlaylist(playlistId);
  265. this.openModal({ sector: "station", modal: "editPlaylist" });
  266. },
  267. totalLength(playlist) {
  268. let length = 0;
  269. playlist.songs.forEach(song => {
  270. length += song.duration;
  271. });
  272. return this.utils.formatTimeLong(length);
  273. },
  274. ...mapActions("modals", ["openModal"]),
  275. ...mapActions("user/playlists", ["editPlaylist"])
  276. }
  277. };
  278. </script>
  279. <style lang="scss" scoped>
  280. @import "styles/global.scss";
  281. .info-section {
  282. width: 912px;
  283. margin-left: auto;
  284. margin-right: auto;
  285. margin-top: 32px;
  286. padding: 24px;
  287. .picture-name-row {
  288. display: flex;
  289. flex-direction: row;
  290. align-items: center;
  291. justify-content: center;
  292. margin-bottom: 24px;
  293. }
  294. .profile-picture {
  295. width: 100px;
  296. height: 100px;
  297. border-radius: 100%;
  298. margin-right: 32px;
  299. }
  300. .name-role-row {
  301. display: flex;
  302. flex-direction: row;
  303. align-items: center;
  304. }
  305. .name {
  306. font-size: 34px;
  307. line-height: 40px;
  308. color: $dark-grey-3;
  309. }
  310. .role {
  311. padding: 2px 24px;
  312. color: $white;
  313. text-transform: uppercase;
  314. font-size: 12px;
  315. line-height: 14px;
  316. height: 18px;
  317. border-radius: 5px;
  318. margin-left: 12px;
  319. &.admin {
  320. background-color: $red;
  321. }
  322. }
  323. .username {
  324. font-size: 24px;
  325. line-height: 28px;
  326. color: $dark-grey;
  327. }
  328. .buttons {
  329. width: 388px;
  330. display: flex;
  331. flex-direction: row;
  332. margin-left: auto;
  333. margin-right: auto;
  334. margin-bottom: 24px;
  335. .button {
  336. flex: 1;
  337. font-size: 17px;
  338. line-height: 20px;
  339. &:nth-child(2) {
  340. margin-left: 20px;
  341. }
  342. }
  343. }
  344. .bio-row,
  345. .date-location-row {
  346. i {
  347. font-size: 24px;
  348. color: $dark-grey-2;
  349. margin-right: 12px;
  350. }
  351. p {
  352. font-size: 17px;
  353. line-height: 20px;
  354. color: $dark-grey-2;
  355. word-break: break-word;
  356. }
  357. }
  358. .bio-row {
  359. max-width: 608px;
  360. margin-bottom: 24px;
  361. margin-left: auto;
  362. margin-right: auto;
  363. display: flex;
  364. width: max-content;
  365. }
  366. .date-location-row {
  367. max-width: 608px;
  368. margin-left: auto;
  369. margin-right: auto;
  370. margin-bottom: 24px;
  371. display: flex;
  372. width: max-content;
  373. margin-bottom: 24px;
  374. > div:nth-child(2) {
  375. margin-left: 48px;
  376. }
  377. }
  378. .date,
  379. .location {
  380. display: flex;
  381. }
  382. }
  383. .bottom-section {
  384. width: 962px;
  385. margin-left: auto;
  386. margin-right: auto;
  387. margin-top: 32px;
  388. padding: 24px;
  389. display: flex;
  390. .buttons {
  391. height: 100%;
  392. width: 250px;
  393. margin-right: 64px;
  394. button {
  395. outline: none;
  396. border: none;
  397. box-shadow: none;
  398. color: $musareBlue;
  399. font-size: 22px;
  400. line-height: 26px;
  401. padding: 7px 0 7px 12px;
  402. width: 100%;
  403. text-align: left;
  404. cursor: pointer;
  405. border-radius: 5px;
  406. background-color: transparent;
  407. &.active {
  408. color: $white;
  409. background-color: $musareBlue;
  410. }
  411. }
  412. }
  413. .content {
  414. width: 600px;
  415. .item {
  416. width: 100%;
  417. height: 72px;
  418. border: 0.5px $light-grey-2 solid;
  419. margin-bottom: 12px;
  420. border-radius: 5px;
  421. padding: 12px;
  422. display: flex;
  423. .top-text {
  424. color: $dark-grey-2;
  425. font-size: 20px;
  426. line-height: 23px;
  427. margin-bottom: 0;
  428. }
  429. .bottom-text {
  430. color: $dark-grey-2;
  431. font-size: 16px;
  432. line-height: 19px;
  433. margin-bottom: 0;
  434. margin-top: 6px;
  435. }
  436. .left-part {
  437. flex: 1;
  438. }
  439. .right-part {
  440. display: flex;
  441. align-items: center;
  442. }
  443. button {
  444. font-size: 17px;
  445. }
  446. }
  447. }
  448. .playlists-tab > button {
  449. width: 100%;
  450. font-size: 17px;
  451. }
  452. }
  453. .night-mode {
  454. .name,
  455. .username,
  456. .bio-row i,
  457. .bio-row p,
  458. .date-location-row i,
  459. .date-location-row p {
  460. color: $light-grey;
  461. }
  462. }
  463. </style>