Stations.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466
  1. <template>
  2. <div>
  3. <page-metadata title="Admin | Stations" />
  4. <div class="admin-tab">
  5. <div class="button-row">
  6. <button
  7. class="button is-primary"
  8. @click="
  9. openModal({
  10. modal: 'createStation',
  11. data: { official: true }
  12. })
  13. "
  14. >
  15. Create Station
  16. </button>
  17. <run-job-dropdown :jobs="jobs" />
  18. </div>
  19. <advanced-table
  20. :column-default="columnDefault"
  21. :columns="columns"
  22. :filters="filters"
  23. data-action="stations.getData"
  24. name="admin-stations"
  25. :events="events"
  26. >
  27. <template #column-options="slotProps">
  28. <div class="row-options">
  29. <button
  30. class="button is-primary icon-with-button material-icons"
  31. @click="
  32. openModal({
  33. modal: 'manageStation',
  34. data: {
  35. stationId: slotProps.item._id,
  36. sector: 'admin'
  37. }
  38. })
  39. "
  40. :disabled="slotProps.item.removed"
  41. content="Manage Station"
  42. v-tippy
  43. >
  44. settings
  45. </button>
  46. <quick-confirm
  47. @confirm="remove(slotProps.item._id)"
  48. :disabled="slotProps.item.removed"
  49. >
  50. <button
  51. class="button is-danger icon-with-button material-icons"
  52. content="Remove Station"
  53. v-tippy
  54. >
  55. delete_forever
  56. </button>
  57. </quick-confirm>
  58. <router-link
  59. :to="{ path: `/${slotProps.item.name}` }"
  60. target="_blank"
  61. class="button is-primary icon-with-button material-icons"
  62. :disabled="slotProps.item.removed"
  63. content="View Station"
  64. v-tippy
  65. >
  66. radio
  67. </router-link>
  68. </div>
  69. </template>
  70. <template #column-_id="slotProps">
  71. <span :title="slotProps.item._id">{{
  72. slotProps.item._id
  73. }}</span>
  74. </template>
  75. <template #column-name="slotProps">
  76. <span :title="slotProps.item.name">{{
  77. slotProps.item.name
  78. }}</span>
  79. </template>
  80. <template #column-displayName="slotProps">
  81. <span :title="slotProps.item.displayName">{{
  82. slotProps.item.displayName
  83. }}</span>
  84. </template>
  85. <template #column-type="slotProps">
  86. <span :title="slotProps.item.type">{{
  87. slotProps.item.type
  88. }}</span>
  89. </template>
  90. <template #column-description="slotProps">
  91. <span :title="slotProps.item.description">{{
  92. slotProps.item.description
  93. }}</span>
  94. </template>
  95. <template #column-privacy="slotProps">
  96. <span :title="slotProps.item.privacy">{{
  97. slotProps.item.privacy
  98. }}</span>
  99. </template>
  100. <template #column-owner="slotProps">
  101. <span v-if="slotProps.item.type === 'official'"
  102. >Musare</span
  103. >
  104. <user-id-to-username
  105. v-else
  106. :user-id="slotProps.item.owner"
  107. :link="true"
  108. />
  109. </template>
  110. <template #column-theme="slotProps">
  111. <span :title="slotProps.item.theme">{{
  112. slotProps.item.theme
  113. }}</span>
  114. </template>
  115. <template #column-requestsEnabled="slotProps">
  116. <span :title="slotProps.item.requests.enabled">{{
  117. slotProps.item.requests.enabled
  118. }}</span>
  119. </template>
  120. <template #column-requestsAccess="slotProps">
  121. <span :title="slotProps.item.requests.access">{{
  122. slotProps.item.requests.access
  123. }}</span>
  124. </template>
  125. <template #column-requestsLimit="slotProps">
  126. <span :title="slotProps.item.requests.limit">{{
  127. slotProps.item.requests.limit
  128. }}</span>
  129. </template>
  130. <template #column-autofillEnabled="slotProps">
  131. <span :title="slotProps.item.autofill.enabled">{{
  132. slotProps.item.autofill.enabled
  133. }}</span>
  134. </template>
  135. <template #column-autofillLimit="slotProps">
  136. <span :title="slotProps.item.autofill.limit">{{
  137. slotProps.item.autofill.limit
  138. }}</span>
  139. </template>
  140. <template #column-autofillMode="slotProps">
  141. <span :title="slotProps.item.autofill.mode">{{
  142. slotProps.item.autofill.mode
  143. }}</span>
  144. </template>
  145. </advanced-table>
  146. </div>
  147. </div>
  148. </template>
  149. <script>
  150. import { mapActions, mapGetters } from "vuex";
  151. import Toast from "toasters";
  152. import AdvancedTable from "@/components/AdvancedTable.vue";
  153. import RunJobDropdown from "@/components/RunJobDropdown.vue";
  154. export default {
  155. components: {
  156. AdvancedTable,
  157. RunJobDropdown
  158. },
  159. data() {
  160. return {
  161. editingStationId: "",
  162. columnDefault: {
  163. sortable: true,
  164. hidable: true,
  165. defaultVisibility: "shown",
  166. draggable: true,
  167. resizable: true,
  168. minWidth: 150,
  169. maxWidth: 600
  170. },
  171. columns: [
  172. {
  173. name: "options",
  174. displayName: "Options",
  175. properties: ["_id", "name"],
  176. sortable: false,
  177. hidable: false,
  178. resizable: false,
  179. minWidth: 129,
  180. defaultWidth: 129
  181. },
  182. {
  183. name: "_id",
  184. displayName: "Station ID",
  185. properties: ["_id"],
  186. sortProperty: "_id",
  187. minWidth: 230,
  188. defaultWidth: 230
  189. },
  190. {
  191. name: "name",
  192. displayName: "Name",
  193. properties: ["name"],
  194. sortProperty: "name"
  195. },
  196. {
  197. name: "displayName",
  198. displayName: "Display Name",
  199. properties: ["displayName"],
  200. sortProperty: "displayName"
  201. },
  202. {
  203. name: "description",
  204. displayName: "Description",
  205. properties: ["description"],
  206. sortProperty: "description",
  207. defaultVisibility: "hidden"
  208. },
  209. {
  210. name: "type",
  211. displayName: "Type",
  212. properties: ["type"],
  213. sortProperty: "type"
  214. },
  215. {
  216. name: "privacy",
  217. displayName: "Privacy",
  218. properties: ["privacy"],
  219. sortProperty: "privacy"
  220. },
  221. {
  222. name: "owner",
  223. displayName: "Owner",
  224. properties: ["owner", "type"],
  225. sortProperty: "owner",
  226. defaultWidth: 150
  227. },
  228. {
  229. name: "theme",
  230. displayName: "Theme",
  231. properties: ["theme"],
  232. sortProperty: "theme",
  233. defaultVisibility: "hidden"
  234. },
  235. {
  236. name: "requestsEnabled",
  237. displayName: "Requests Enabled",
  238. properties: ["requests.enabled"],
  239. sortProperty: "requests.enabled",
  240. minWidth: 180,
  241. defaultWidth: 180,
  242. defaultVisibility: "hidden"
  243. },
  244. {
  245. name: "requestsAccess",
  246. displayName: "Requests Access",
  247. properties: ["requests.access"],
  248. sortProperty: "requests.access",
  249. minWidth: 180,
  250. defaultWidth: 180,
  251. defaultVisibility: "hidden"
  252. },
  253. {
  254. name: "requestsLimit",
  255. displayName: "Requests Limit",
  256. properties: ["requests.limit"],
  257. sortProperty: "requests.limit",
  258. minWidth: 180,
  259. defaultWidth: 180,
  260. defaultVisibility: "hidden"
  261. },
  262. {
  263. name: "autofillEnabled",
  264. displayName: "Autofill Enabled",
  265. properties: ["autofill.enabled"],
  266. sortProperty: "autofill.enabled",
  267. minWidth: 180,
  268. defaultWidth: 180,
  269. defaultVisibility: "hidden"
  270. },
  271. {
  272. name: "autofillLimit",
  273. displayName: "Autofill Limit",
  274. properties: ["autofill.limit"],
  275. sortProperty: "autofill.limit",
  276. minWidth: 180,
  277. defaultWidth: 180,
  278. defaultVisibility: "hidden"
  279. },
  280. {
  281. name: "autofillMode",
  282. displayName: "Autofill Mode",
  283. properties: ["autofill.mode"],
  284. sortProperty: "autofill.mode",
  285. minWidth: 180,
  286. defaultWidth: 180,
  287. defaultVisibility: "hidden"
  288. }
  289. ],
  290. filters: [
  291. {
  292. name: "_id",
  293. displayName: "Station ID",
  294. property: "_id",
  295. filterTypes: ["exact"],
  296. defaultFilterType: "exact"
  297. },
  298. {
  299. name: "name",
  300. displayName: "Name",
  301. property: "name",
  302. filterTypes: ["contains", "exact", "regex"],
  303. defaultFilterType: "contains"
  304. },
  305. {
  306. name: "displayName",
  307. displayName: "Display Name",
  308. property: "displayName",
  309. filterTypes: ["contains", "exact", "regex"],
  310. defaultFilterType: "contains"
  311. },
  312. {
  313. name: "description",
  314. displayName: "Description",
  315. property: "description",
  316. filterTypes: ["contains", "exact", "regex"],
  317. defaultFilterType: "contains"
  318. },
  319. {
  320. name: "type",
  321. displayName: "Type",
  322. property: "type",
  323. filterTypes: ["exact"],
  324. defaultFilterType: "exact",
  325. dropdown: [
  326. ["official", "Official"],
  327. ["community", "Community"]
  328. ]
  329. },
  330. {
  331. name: "privacy",
  332. displayName: "Privacy",
  333. property: "privacy",
  334. filterTypes: ["exact"],
  335. defaultFilterType: "exact",
  336. dropdown: [
  337. ["public", "Public"],
  338. ["unlisted", "Unlisted"],
  339. ["private", "Private"]
  340. ]
  341. },
  342. {
  343. name: "owner",
  344. displayName: "Owner",
  345. property: "owner",
  346. filterTypes: ["contains", "exact", "regex"],
  347. defaultFilterType: "contains"
  348. },
  349. {
  350. name: "theme",
  351. displayName: "Theme",
  352. property: "theme",
  353. filterTypes: ["exact"],
  354. defaultFilterType: "exact",
  355. dropdown: [
  356. ["blue", "Blue"],
  357. ["purple", "Purple"],
  358. ["teal", "Teal"],
  359. ["orange", "Orange"],
  360. ["red", "Red"]
  361. ]
  362. },
  363. {
  364. name: "requestsEnabled",
  365. displayName: "Requests Enabled",
  366. property: "requests.enabled",
  367. filterTypes: ["boolean"],
  368. defaultFilterType: "boolean"
  369. },
  370. {
  371. name: "requestsAccess",
  372. displayName: "Requests Access",
  373. property: "requests.access",
  374. filterTypes: ["exact"],
  375. defaultFilterType: "exact",
  376. dropdown: [
  377. ["owner", "Owner"],
  378. ["user", "User"]
  379. ]
  380. },
  381. {
  382. name: "requestsLimit",
  383. displayName: "Requests Limit",
  384. property: "requests.limit",
  385. filterTypes: [
  386. "numberLesserEqual",
  387. "numberLesser",
  388. "numberGreater",
  389. "numberGreaterEqual",
  390. "numberEquals"
  391. ],
  392. defaultFilterType: "numberLesser"
  393. },
  394. {
  395. name: "autofillEnabled",
  396. displayName: "Autofill Enabled",
  397. property: "autofill.enabled",
  398. filterTypes: ["boolean"],
  399. defaultFilterType: "boolean"
  400. },
  401. {
  402. name: "autofillLimit",
  403. displayName: "Autofill Limit",
  404. property: "autofill.limit",
  405. filterTypes: [
  406. "numberLesserEqual",
  407. "numberLesser",
  408. "numberGreater",
  409. "numberGreaterEqual",
  410. "numberEquals"
  411. ],
  412. defaultFilterType: "numberLesser"
  413. },
  414. {
  415. name: "autofillMode",
  416. displayName: "Autofill Mode",
  417. property: "autofill.mode",
  418. filterTypes: ["exact"],
  419. defaultFilterType: "exact",
  420. dropdown: [
  421. ["random", "Random"],
  422. ["sequential", "Sequential"]
  423. ]
  424. }
  425. ],
  426. events: {
  427. adminRoom: "stations",
  428. updated: {
  429. event: "station.updated",
  430. id: "station._id",
  431. item: "station"
  432. },
  433. removed: {
  434. event: "admin.station.deleted",
  435. id: "stationId"
  436. }
  437. },
  438. jobs: [
  439. {
  440. name: "Clear every station queue",
  441. socket: "stations.clearEveryStationQueue"
  442. }
  443. ]
  444. };
  445. },
  446. computed: {
  447. ...mapGetters({
  448. socket: "websockets/getSocket"
  449. })
  450. },
  451. methods: {
  452. remove(stationId) {
  453. this.socket.dispatch(
  454. "stations.remove",
  455. stationId,
  456. res => new Toast(res.message)
  457. );
  458. },
  459. ...mapActions("modalVisibility", ["openModal"])
  460. }
  461. };
  462. </script>