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.

Jobbar.vue 3.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <template>
  2. <div class="layout__jobbar">
  3. <div class="jobs__section">
  4. <div class="section__title">
  5. <span class="icon"><font-awesome-icon icon="running" /></span>
  6. <span>Queue</span>
  7. </div>
  8. <div class="jobs__list">
  9. <figure
  10. v-for="(photo, index) of $nudify.waiting"
  11. :key="index"
  12. class="job"
  13. :class="{ 'job--running': photo.running }"
  14. @click.prevent="openJob(photo.id)">
  15. <img :src="photo.file.dataURL">
  16. </figure>
  17. </div>
  18. </div>
  19. <div class="jobs__section">
  20. <div class="section__title">
  21. <div class="flex-1">
  22. <span class="icon"><font-awesome-icon icon="clipboard-list" /></span>
  23. <span>Pending</span>
  24. </div>
  25. <button v-show="$nudify.pending.length > 0" class="button button--xs" @click.prevent="$nudify.runAll()">
  26. Run all
  27. </button>
  28. </div>
  29. <div class="jobs__list">
  30. <figure
  31. v-for="(photo, index) of $nudify.pending"
  32. :key="index"
  33. class="job"
  34. @click.prevent="openJob(photo.id)">
  35. <img :src="photo.file.dataURL">
  36. </figure>
  37. </div>
  38. </div>
  39. <div class="jobs__section">
  40. <div class="section__title">
  41. <div class="flex-1">
  42. <span class="icon"><font-awesome-icon icon="clipboard-check" /></span>
  43. <span>Finished</span>
  44. </div>
  45. <button v-show="$nudify.finished.length > 0" class="button button--xs" @click.prevent="$nudify.runAll('finished')">
  46. Rerun all
  47. </button>
  48. </div>
  49. <div class="jobs__list">
  50. <figure
  51. v-for="(photo, index) of $nudify.finished"
  52. :key="index"
  53. class="job"
  54. :class="{ 'job--failed': photo.failed }"
  55. @click.prevent="openJob(photo.id)">
  56. <img :src="photo.file.dataURL">
  57. </figure>
  58. </div>
  59. </div>
  60. </div>
  61. </template>
  62. <script>
  63. export default {
  64. methods: {
  65. openJob(photoId) {
  66. this.$router.push(`/nudify/${photoId}`)
  67. },
  68. },
  69. }
  70. </script>
  71. <style lang="scss" scoped>
  72. .layout__jobbar {
  73. @apply relative bg-dark-500 z-10;
  74. @apply flex flex-col py-2;
  75. width: 200px;
  76. &::after {
  77. @apply border-r border-dark-300;
  78. @apply block bottom-0 right-0 pointer-events-none absolute;
  79. content: " ";
  80. top: 50px;
  81. }
  82. }
  83. .jobs__section {
  84. @apply flex-1 flex flex-col;
  85. @apply overflow-hidden;
  86. }
  87. .section__title {
  88. @apply px-4 pt-2 text-sm text-white font-semibold;
  89. @apply flex items-center;
  90. .icon {
  91. @apply mr-2;
  92. }
  93. }
  94. .jobs__list {
  95. @apply flex-1 flex flex-wrap justify-between;
  96. @apply px-4 py-2 overflow-y-auto max-h-full;
  97. .job {
  98. @apply mb-2 cursor-pointer;
  99. width: calc(1/3*100% - (1 - 1/3)*1rem);
  100. height: 42px;
  101. transition: all .1s ease-in-out;
  102. &.job--running {
  103. img {
  104. @apply border-primary-500;
  105. }
  106. }
  107. &.job--failed {
  108. img {
  109. @apply border-danger-500;
  110. }
  111. }
  112. &:hover {
  113. @apply z-30;
  114. transform: scale(1.5)
  115. }
  116. img {
  117. @apply border-2 border-transparent;
  118. @apply w-full h-full rounded-full;
  119. }
  120. }
  121. .job__preview {
  122. @apply mr-4 h-full;
  123. width: 42px;
  124. img {
  125. width: 42px;
  126. height: 42px;
  127. }
  128. }
  129. .job__name {
  130. @apply flex-1 overflow-hidden whitespace-no-wrap;
  131. text-overflow: ellipsis;
  132. }
  133. }
  134. .layout-jobs {
  135. @apply p-2 shadow h-screen flex flex-col;
  136. width: 200px;
  137. .jobs-pending {
  138. @apply flex-1 border-b border-gray-300 mb-2;
  139. }
  140. .jobs-recent {
  141. height: 250px;
  142. }
  143. .job-section {
  144. @apply mb-4;
  145. }
  146. .section-title {
  147. @apply font-bold;
  148. }
  149. }
  150. </style>