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.

Queuebar.vue 5.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. <template>
  2. <div id="queuebar" class="layout__jobbar">
  3. <section id="queuebar-running">
  4. <div class="section__header">
  5. <div class="section__title">
  6. <span class="icon"><font-awesome-icon icon="running" /></span>
  7. <span>Queue</span>
  8. </div>
  9. <div v-show="$nudify.waiting.length > 0" class="section__actions">
  10. <button
  11. v-tooltip="{placement: 'bottom', content: 'Forget all'}"
  12. class="button button--danger button--xs"
  13. @click.prevent="$nudify.forgetAll('waiting')">
  14. <font-awesome-icon icon="trash-alt" />
  15. </button>
  16. <button
  17. v-tooltip="{placement: 'bottom', content: 'Stop all' }"
  18. class="button button--xs"
  19. @click.prevent="$nudify.stopAll('waiting')">
  20. <font-awesome-icon icon="stop" />
  21. </button>
  22. </div>
  23. </div>
  24. <div class="jobs__list">
  25. <figure
  26. v-for="(photo, index) of $nudify.waiting"
  27. :key="index"
  28. class="job"
  29. :class="{ 'job--running': photo.running }"
  30. @click.prevent="openJob(photo.id)">
  31. <img :src="photo.file.path" data-private>
  32. </figure>
  33. </div>
  34. </section>
  35. <section id="queuebar-pending">
  36. <div class="section__header">
  37. <div class="section__title">
  38. <span class="icon"><font-awesome-icon icon="clipboard-list" /></span>
  39. <span>Pending</span>
  40. </div>
  41. <div v-show="$nudify.pending.length > 0" class="section__actions">
  42. <button
  43. v-tooltip="'Forget all'"
  44. class="button button--danger button--xs"
  45. @click.prevent="$nudify.forgetAll()">
  46. <font-awesome-icon icon="trash-alt" />
  47. </button>
  48. <button
  49. v-tooltip="'Start all'"
  50. class="button button--xs"
  51. @click.prevent="$nudify.startAll()">
  52. <font-awesome-icon icon="play" />
  53. </button>
  54. </div>
  55. </div>
  56. <div class="jobs__list">
  57. <figure
  58. v-for="(photo, index) of $nudify.pending"
  59. :key="index"
  60. class="job"
  61. @click.prevent="openJob(photo.id)">
  62. <img :src="photo.file.path" data-private>
  63. </figure>
  64. </div>
  65. </section>
  66. <section id="queuebar-finished">
  67. <div class="section__header">
  68. <div class="section__title">
  69. <span class="icon"><font-awesome-icon icon="clipboard-check" /></span>
  70. <span>Finished</span>
  71. </div>
  72. <div v-show="$nudify.finished.length > 0" class="section__actions">
  73. <button
  74. v-tooltip="'Forget all'"
  75. class="button button--danger button--xs"
  76. @click.prevent="$nudify.forgetAll('finished')">
  77. <font-awesome-icon icon="trash-alt" />
  78. </button>
  79. <button
  80. v-tooltip="'Restart all'"
  81. class="button button--xs"
  82. @click.prevent="$nudify.startAll('finished')">
  83. <font-awesome-icon icon="undo" />
  84. </button>
  85. </div>
  86. </div>
  87. <div class="jobs__list">
  88. <figure
  89. v-for="(photo, index) of $nudify.finished"
  90. :key="index"
  91. class="job"
  92. :class="{ 'job--failed': photo.failed }"
  93. @click.prevent="openJob(photo.id)">
  94. <img :src="photo.file.path" data-private>
  95. </figure>
  96. </div>
  97. </section>
  98. </div>
  99. </template>
  100. <script>
  101. export default {
  102. methods: {
  103. openJob(photoId) {
  104. this.$router.push(`/nudify/${photoId}`)
  105. },
  106. },
  107. }
  108. </script>
  109. <style lang="scss" scoped>
  110. .layout__jobbar {
  111. @apply relative flex flex-col;
  112. @apply bg-dark-500 py-2 z-10;
  113. @apply border-l border-dark-100;
  114. width: 200px;
  115. }
  116. section {
  117. @apply flex-1 flex flex-col;
  118. @apply overflow-hidden;
  119. height: calc((100vh - 80px) / 3);
  120. &:not(:first-child) {
  121. .section__header {
  122. &::before, &::after {
  123. @apply block border-b;
  124. @apply absolute right-0 pointer-events-none z-0;
  125. content: " ";
  126. left: 100px;
  127. }
  128. &::before {
  129. @apply border-dark-200;
  130. top: 18px;
  131. }
  132. &::after {
  133. @apply border-dark-400;
  134. top: 19px;
  135. }
  136. }
  137. }
  138. .section__header {
  139. @apply px-4 pt-2 text-sm text-white font-semibold;
  140. @apply relative flex items-center;
  141. .icon {
  142. @apply mr-2;
  143. }
  144. .section__title {
  145. @apply flex-1 z-10;
  146. }
  147. }
  148. .section__actions {
  149. @apply flex flex-1 justify-end ml-2 z-10 bg-dark-500;
  150. .button {
  151. @apply ml-2;
  152. }
  153. }
  154. }
  155. .jobs__list {
  156. @apply flex-1;
  157. @apply px-4 py-2 overflow-y-auto max-h-full;
  158. .job {
  159. @apply inline-block mb-2 cursor-pointer;
  160. width: 47px;
  161. height: 47px;
  162. transition: all .1s ease-in-out;
  163. &:not(:nth-child(3n)) {
  164. @apply mr-2;
  165. }
  166. &.job--running {
  167. img {
  168. @apply border-primary-500;
  169. }
  170. }
  171. &.job--failed {
  172. img {
  173. @apply border-danger-500;
  174. }
  175. }
  176. &:hover {
  177. @apply z-30;
  178. transform: scale(1.3)
  179. }
  180. img {
  181. @apply border-2 border-transparent rounded-full;
  182. @apply w-full h-full;
  183. }
  184. }
  185. }
  186. </style>