index.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  1. <template>
  2. <div class="app">
  3. <main-header />
  4. <div class="tabs is-centered">
  5. <ul>
  6. <li
  7. :class="{ 'is-active': currentTab == 'hiddensongs' }"
  8. ref="hiddensongs-tab"
  9. @click="showTab('hiddensongs')"
  10. >
  11. <router-link
  12. class="tab hiddensongs"
  13. to="/admin/hiddensongs"
  14. >
  15. <i class="material-icons">music_note</i>
  16. <span>&nbsp;Hidden Songs</span>
  17. </router-link>
  18. </li>
  19. <li
  20. :class="{ 'is-active': currentTab == 'unverifiedsongs' }"
  21. ref="unverifiedsongs-tab"
  22. @click="showTab('unverifiedsongs')"
  23. >
  24. <router-link
  25. class="tab unverifiedsongs"
  26. to="/admin/unverifiedsongs"
  27. >
  28. <i class="material-icons">unpublished</i>
  29. <span>&nbsp;Unverified Songs</span>
  30. </router-link>
  31. </li>
  32. <li
  33. :class="{ 'is-active': currentTab == 'verifiedsongs' }"
  34. ref="verifiedsongs-tab"
  35. @click="showTab('verifiedsongs')"
  36. >
  37. <router-link
  38. class="tab verifiedsongs"
  39. to="/admin/verifiedsongs"
  40. >
  41. <i class="material-icons">check_circle</i>
  42. <span>&nbsp;Verified Songs</span>
  43. </router-link>
  44. </li>
  45. <li
  46. :class="{ 'is-active': currentTab == 'stations' }"
  47. ref="stations-tab"
  48. @click="showTab('stations')"
  49. >
  50. <router-link class="tab stations" to="/admin/stations">
  51. <i class="material-icons">radio</i>
  52. <span>&nbsp;Stations</span>
  53. </router-link>
  54. </li>
  55. <li
  56. :class="{ 'is-active': currentTab == 'playlists' }"
  57. ref="playlists-tab"
  58. @click="showTab('playlists')"
  59. >
  60. <router-link class="tab playlists" to="/admin/playlists">
  61. <i class="material-icons">library_music</i>
  62. <span>&nbsp;Playlists</span>
  63. </router-link>
  64. </li>
  65. <li
  66. :class="{ 'is-active': currentTab == 'reports' }"
  67. ref="reports-tab"
  68. @click="showTab('reports')"
  69. >
  70. <router-link class="tab reports" to="/admin/reports">
  71. <i class="material-icons">flag</i>
  72. <span>&nbsp;Reports</span>
  73. </router-link>
  74. </li>
  75. <li
  76. :class="{ 'is-active': currentTab == 'news' }"
  77. ref="news-tab"
  78. @click="showTab('news')"
  79. >
  80. <router-link class="tab news" to="/admin/news">
  81. <i class="material-icons">chrome_reader_mode</i>
  82. <span>&nbsp;News</span>
  83. </router-link>
  84. </li>
  85. <li
  86. :class="{ 'is-active': currentTab == 'users' }"
  87. ref="users-tab"
  88. @click="showTab('users')"
  89. >
  90. <router-link class="tab users" to="/admin/users">
  91. <i class="material-icons">people</i>
  92. <span>&nbsp;Users</span>
  93. </router-link>
  94. </li>
  95. <li
  96. :class="{ 'is-active': currentTab == 'statistics' }"
  97. ref="statistics-tab"
  98. @click="showTab('statistics')"
  99. >
  100. <router-link class="tab statistics" to="/admin/statistics">
  101. <i class="material-icons">show_chart</i>
  102. <span>&nbsp;Statistics</span>
  103. </router-link>
  104. </li>
  105. <li
  106. :class="{ 'is-active': currentTab == 'punishments' }"
  107. ref="punishments-tab"
  108. @click="showTab('punishments')"
  109. >
  110. <router-link
  111. class="tab punishments"
  112. to="/admin/punishments"
  113. >
  114. <i class="material-icons">gavel</i>
  115. <span>&nbsp;Punishments</span>
  116. </router-link>
  117. </li>
  118. </ul>
  119. </div>
  120. <unverified-songs v-if="currentTab == 'unverifiedsongs'" />
  121. <verified-songs v-if="currentTab == 'verifiedsongs'" />
  122. <hidden-songs v-if="currentTab == 'hiddensongs'" />
  123. <stations v-if="currentTab == 'stations'" />
  124. <playlists v-if="currentTab == 'playlists'" />
  125. <reports v-if="currentTab == 'reports'" />
  126. <news v-if="currentTab == 'news'" />
  127. <users v-if="currentTab == 'users'" />
  128. <statistics v-if="currentTab == 'statistics'" />
  129. <punishments v-if="currentTab == 'punishments'" />
  130. </div>
  131. </template>
  132. <script>
  133. import { mapGetters } from "vuex";
  134. import MainHeader from "@/components/layout/MainHeader.vue";
  135. export default {
  136. components: {
  137. MainHeader,
  138. UnverifiedSongs: () => import("./tabs/UnverifiedSongs.vue"),
  139. VerifiedSongs: () => import("./tabs/VerifiedSongs.vue"),
  140. HiddenSongs: () => import("./tabs/HiddenSongs.vue"),
  141. Stations: () => import("./tabs/Stations.vue"),
  142. Playlists: () => import("./tabs/Playlists.vue"),
  143. Reports: () => import("./tabs/Reports.vue"),
  144. News: () => import("./tabs/News.vue"),
  145. Users: () => import("./tabs/Users.vue"),
  146. Statistics: () => import("./tabs/Statistics.vue"),
  147. Punishments: () => import("./tabs/Punishments.vue")
  148. },
  149. data() {
  150. return {
  151. currentTab: ""
  152. };
  153. },
  154. computed: mapGetters({
  155. socket: "websockets/getSocket"
  156. }),
  157. watch: {
  158. $route(route) {
  159. this.changeTab(route.path);
  160. }
  161. },
  162. mounted() {
  163. this.changeTab(this.$route.path);
  164. },
  165. beforeDestroy() {
  166. this.socket.dispatch("apis.leaveRooms", () => {});
  167. },
  168. methods: {
  169. changeTab(path) {
  170. switch (path) {
  171. case "/admin/unverifiedsongs":
  172. this.showTab("unverifiedsongs");
  173. break;
  174. case "/admin/verifiedsongs":
  175. this.showTab("verifiedsongs");
  176. break;
  177. case "/admin/hiddensongs":
  178. this.showTab("hiddensongs");
  179. break;
  180. case "/admin/stations":
  181. this.showTab("stations");
  182. break;
  183. case "/admin/playlists":
  184. this.showTab("playlists");
  185. break;
  186. case "/admin/reports":
  187. this.showTab("reports");
  188. break;
  189. case "/admin/news":
  190. this.showTab("news");
  191. break;
  192. case "/admin/users":
  193. this.showTab("users");
  194. break;
  195. case "/admin/statistics":
  196. this.showTab("statistics");
  197. break;
  198. case "/admin/punishments":
  199. this.showTab("punishments");
  200. break;
  201. default:
  202. this.showTab("verifiedsongs");
  203. }
  204. },
  205. showTab(tab) {
  206. if (this.$refs[`${tab}-tab`])
  207. this.$refs[`${tab}-tab`].scrollIntoView({
  208. inline: "center"
  209. });
  210. this.currentTab = tab;
  211. }
  212. }
  213. };
  214. </script>
  215. <style lang="scss" scoped>
  216. .night-mode {
  217. .tabs {
  218. background-color: var(--dark-grey-2);
  219. border: 0;
  220. ul {
  221. border-bottom: 0;
  222. }
  223. }
  224. }
  225. .main-container {
  226. height: auto;
  227. }
  228. .tabs {
  229. padding-top: 10px;
  230. margin-top: -10px;
  231. background-color: var(--white);
  232. .unverifiedsongs {
  233. color: var(--teal);
  234. border-color: var(--teal);
  235. }
  236. .verifiedsongs {
  237. color: var(--primary-color);
  238. border-color: var(--primary-color);
  239. }
  240. .hiddensongs {
  241. color: var(--grey);
  242. border-color: var(--grey);
  243. }
  244. .stations {
  245. color: var(--purple);
  246. border-color: var(--purple);
  247. }
  248. .playlists {
  249. color: var(--light-purple);
  250. border-color: var(--light-purple);
  251. }
  252. .reports {
  253. color: var(--yellow);
  254. border-color: var(--yellow);
  255. }
  256. .news {
  257. color: var(--light-pink);
  258. border-color: var(--light-pink);
  259. }
  260. .users {
  261. color: var(--dark-pink);
  262. border-color: var(--dark-pink);
  263. }
  264. .statistics {
  265. color: var(--orange);
  266. border-color: var(--orange);
  267. }
  268. .punishments {
  269. color: var(--dark-orange);
  270. border-color: var(--dark-orange);
  271. }
  272. .tab {
  273. transition: all 0.2s ease-in-out;
  274. font-weight: 500;
  275. border-bottom: solid 0px;
  276. }
  277. .tab:hover {
  278. border-width: 3px;
  279. transition: all 0.2s ease-in-out;
  280. font-weight: 600;
  281. }
  282. .is-active .tab {
  283. font-weight: 600;
  284. border-width: 3px;
  285. }
  286. }
  287. </style>