You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Jobs.vue 2.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. <template>
  2. <div class="layout__jobs">
  3. <div class="jobs__section">
  4. <div class="section__title">
  5. <span class="icon"><font-awesome-icon icon="running" /></span>
  6. <span>Running</span>
  7. </div>
  8. </div>
  9. <div class="jobs__section">
  10. <div class="section__title">
  11. <div class="flex-1">
  12. <span class="icon"><font-awesome-icon icon="clipboard-list" /></span>
  13. <span>Pending</span>
  14. </div>
  15. <button class="button button--xs">
  16. Run all
  17. </button>
  18. </div>
  19. <div class="jobs__list">
  20. <div v-for="(photo, index) of pending" :key="index" class="job" @click.prevent="openJob(photo.id)">
  21. <figure class="job__preview">
  22. <img :src="photo.file.dataUrl">
  23. </figure>
  24. <span class="job__name">{{ photo.file.fullname }}</span>
  25. </div>
  26. </div>
  27. </div>
  28. <div class="jobs__section">
  29. <div class="section__title">
  30. <span class="icon"><font-awesome-icon icon="clipboard-check" /></span>
  31. <span>Done</span>
  32. </div>
  33. </div>
  34. </div>
  35. </template>
  36. <script>
  37. import { events } from '~/modules'
  38. import { Nudify } from '~/modules/nudify'
  39. export default {
  40. data: () => ({
  41. running: [],
  42. pending: [],
  43. done: [],
  44. }),
  45. created() {
  46. events.on('nudify.add', () => {
  47. this.running = Nudify.running
  48. this.pending = Nudify.pending
  49. this.done = Nudify.done
  50. })
  51. },
  52. methods: {
  53. openJob(photoId) {
  54. this.$router.push(`/nudify/${photoId}`)
  55. },
  56. },
  57. }
  58. </script>
  59. <style lang="scss" scoped>
  60. .layout__jobs {
  61. @apply h-screen bg-dark-500;
  62. @apply flex flex-col;
  63. width: 200px;
  64. }
  65. .jobs__section {
  66. @apply flex-1 flex flex-col;
  67. @apply overflow-hidden;
  68. }
  69. .section__title {
  70. @apply px-4 pt-2 text-sm uppercase font-semibold;
  71. @apply flex items-center;
  72. .icon {
  73. @apply mr-2;
  74. }
  75. }
  76. .jobs__list {
  77. @apply flex-1 overflow-y-auto max-h-full;
  78. .job {
  79. @apply px-4 py-2 flex items-center cursor-pointer;
  80. transition: all .1s ease-in-out;
  81. &:hover {
  82. @apply bg-dark-300 text-white;
  83. }
  84. }
  85. .job__preview {
  86. @apply mr-4 h-full;
  87. width: 42px;
  88. img {
  89. width: 42px;
  90. height: 42px;
  91. }
  92. }
  93. .job__name {
  94. @apply flex-1 overflow-hidden whitespace-no-wrap;
  95. text-overflow: ellipsis;
  96. }
  97. }
  98. .layout-jobs {
  99. @apply p-2 shadow h-screen flex flex-col;
  100. width: 200px;
  101. .jobs-pending {
  102. @apply flex-1 border-b border-gray-300 mb-2;
  103. }
  104. .jobs-recent {
  105. height: 250px;
  106. }
  107. .job-section {
  108. @apply mb-4;
  109. }
  110. .section-title {
  111. @apply font-bold;
  112. }
  113. }
  114. </style>