Admin.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. <template>
  2. <div class="app">
  3. <main-header />
  4. <div class="tabs is-centered">
  5. <ul>
  6. <li
  7. :class="{ 'is-active': currentTab == 'queueSongs' }"
  8. @click="showTab('queueSongs')"
  9. >
  10. <router-link class="tab queueSongs" to="/admin/queuesongs">
  11. <i class="material-icons">queue_music</i>
  12. <span>&nbsp;Queue Songs</span>
  13. </router-link>
  14. </li>
  15. <li
  16. :class="{ 'is-active': currentTab == 'songs' }"
  17. @click="showTab('songs')"
  18. >
  19. <router-link class="tab songs" to="/admin/songs">
  20. <i class="material-icons">music_note</i>
  21. <span>&nbsp;Songs</span>
  22. </router-link>
  23. </li>
  24. <li
  25. :class="{ 'is-active': currentTab == 'stations' }"
  26. @click="showTab('stations')"
  27. >
  28. <router-link class="tab stations" to="/admin/stations">
  29. <i class="material-icons">radio</i>
  30. <span>&nbsp;Stations</span>
  31. </router-link>
  32. </li>
  33. <li
  34. :class="{ 'is-active': currentTab == 'reports' }"
  35. @click="showTab('reports')"
  36. >
  37. <router-link class="tab reports" to="/admin/reports">
  38. <i class="material-icons">report_problem</i>
  39. <span>&nbsp;Reports</span>
  40. </router-link>
  41. </li>
  42. <li
  43. :class="{ 'is-active': currentTab == 'news' }"
  44. @click="showTab('news')"
  45. >
  46. <router-link class="tab news" to="/admin/news">
  47. <i class="material-icons">chrome_reader_mode</i>
  48. <span>&nbsp;News</span>
  49. </router-link>
  50. </li>
  51. <li
  52. :class="{ 'is-active': currentTab == 'users' }"
  53. @click="showTab('users')"
  54. >
  55. <router-link class="tab users" to="/admin/users">
  56. <i class="material-icons">people</i>
  57. <span>&nbsp;Users</span>
  58. </router-link>
  59. </li>
  60. <li
  61. :class="{ 'is-active': currentTab == 'statistics' }"
  62. @click="showTab('statistics')"
  63. >
  64. <router-link class="tab statistics" to="/admin/statistics">
  65. <i class="material-icons">show_chart</i>
  66. <span>&nbsp;Statistics</span>
  67. </router-link>
  68. </li>
  69. <li
  70. :class="{ 'is-active': currentTab == 'punishments' }"
  71. @click="showTab('punishments')"
  72. >
  73. <router-link
  74. class="tab punishments"
  75. to="/admin/punishments"
  76. >
  77. <i class="material-icons">gavel</i>
  78. <span>&nbsp;Punishments</span>
  79. </router-link>
  80. </li>
  81. </ul>
  82. </div>
  83. <queue-songs v-if="currentTab == 'queueSongs'" />
  84. <songs v-if="currentTab == 'songs'" />
  85. <stations v-if="currentTab == 'stations'" />
  86. <reports v-if="currentTab == 'reports'" />
  87. <news v-if="currentTab == 'news'" />
  88. <users v-if="currentTab == 'users'" />
  89. <statistics v-if="currentTab == 'statistics'" />
  90. <punishments v-if="currentTab == 'punishments'" />
  91. </div>
  92. </template>
  93. <script>
  94. import MainHeader from "../MainHeader.vue";
  95. import QueueSongs from "../Admin/QueueSongs.vue";
  96. import Songs from "../Admin/Songs.vue";
  97. import Stations from "../Admin/Stations.vue";
  98. import Reports from "../Admin/Reports.vue";
  99. import News from "../Admin/News.vue";
  100. import Users from "../Admin/Users.vue";
  101. import Statistics from "../Admin/Statistics.vue";
  102. import Punishments from "../Admin/Punishments.vue";
  103. export default {
  104. components: {
  105. MainHeader,
  106. QueueSongs,
  107. Songs,
  108. Stations,
  109. Reports,
  110. News,
  111. Users,
  112. Statistics,
  113. Punishments
  114. },
  115. data() {
  116. return {
  117. currentTab: "queueSongs"
  118. };
  119. },
  120. mounted() {
  121. this.changeTab(this.$route.path);
  122. },
  123. watch: {
  124. $route(route) {
  125. this.changeTab(route.path);
  126. }
  127. },
  128. methods: {
  129. changeTab(path) {
  130. switch (path) {
  131. case "/admin/queuesongs":
  132. this.currentTab = "queueSongs";
  133. break;
  134. case "/admin/songs":
  135. this.currentTab = "songs";
  136. break;
  137. case "/admin/stations":
  138. this.currentTab = "stations";
  139. break;
  140. case "/admin/reports":
  141. this.currentTab = "reports";
  142. break;
  143. case "/admin/news":
  144. this.currentTab = "news";
  145. break;
  146. case "/admin/users":
  147. this.currentTab = "users";
  148. break;
  149. case "/admin/statistics":
  150. this.currentTab = "statistics";
  151. break;
  152. case "/admin/punishments":
  153. this.currentTab = "punishments";
  154. break;
  155. default:
  156. this.currentTab = "queueSongs";
  157. }
  158. },
  159. showTab(tab) {
  160. this.currentTab = tab;
  161. }
  162. }
  163. };
  164. </script>
  165. <style lang="scss" scoped>
  166. .tabs {
  167. background-color: #ffffff;
  168. .queueSongs {
  169. color: #00d1b2;
  170. border-color: #00d1b2;
  171. }
  172. .songs {
  173. color: #03a9f4;
  174. border-color: #03a9f4;
  175. }
  176. .stations {
  177. color: #90298c;
  178. border-color: #90298c;
  179. }
  180. .reports {
  181. color: #f7c218;
  182. border-color: #f7c218;
  183. }
  184. .news {
  185. color: #e49ba6;
  186. border-color: #e49ba6;
  187. }
  188. .users {
  189. color: #ea4962;
  190. border-color: #ea4962;
  191. }
  192. .statistics {
  193. color: #ff5e00;
  194. border-color: #ff5e00;
  195. }
  196. .punishments {
  197. color: #fc3200;
  198. border-color: #fc3200;
  199. }
  200. .tab {
  201. transition: all 0.2s ease-in-out;
  202. font-weight: 500;
  203. border-bottom: solid 0px;
  204. }
  205. .tab:hover {
  206. border-width: 3px;
  207. transition: all 0.2s ease-in-out;
  208. font-weight: 600;
  209. }
  210. .is-active .tab {
  211. font-weight: 600;
  212. border-width: 3px;
  213. }
  214. }
  215. </style>