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.

QueueMenu.vue 5.1KB

1 year ago
5 months ago
1 year ago
10 months ago
1 year ago
1 year ago
5 months ago
1 year ago
1 year ago
1 year ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
10 months ago
1 year ago
1 year ago
1 year ago
10 months ago
1 year ago
5 months ago
1 year ago
11 months ago
1 year ago
11 months ago
1 year ago
1 year ago
11 months ago
1 year ago
11 months ago
1 year ago
11 months ago
11 months ago
1 year ago
10 months ago
1 year ago
1 year ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. <template>
  2. <div id="queuebar" class="queue">
  3. <section class="queue__section queue__section--running">
  4. <div class="queue__header">
  5. <p class="title">
  6. <span class="icon"><font-awesome-icon icon="running" /></span>
  7. <span>Queue</span>
  8. <span class="separator">·</span>
  9. <span>{{ $nudify.waiting.length }}</span>
  10. </p>
  11. <div v-show="$nudify.waiting.length > 0" class="queue__section__actions">
  12. <button
  13. v-tooltip="{placement: 'bottom', content: 'Remove all'}"
  14. class="button button--danger button--xs"
  15. @click.prevent="$nudify.forgetAll('waiting')">
  16. <font-awesome-icon icon="trash-alt" />
  17. </button>
  18. <button
  19. v-tooltip="{placement: 'bottom', content: 'Cancel all' }"
  20. class="button button--xs"
  21. @click.prevent="$nudify.cancelAll('waiting')">
  22. <font-awesome-icon icon="sign-out-alt" />
  23. </button>
  24. </div>
  25. </div>
  26. <div class="queue__content">
  27. <QueuePhoto
  28. v-for="(photo, index) of $nudify.waiting"
  29. :key="index"
  30. :photo="photo" />
  31. </div>
  32. </section>
  33. <section class="queue__section queue__section--pending">
  34. <div class="queue__header">
  35. <p class="title">
  36. <span class="icon"><font-awesome-icon icon="clipboard-list" /></span>
  37. <span>Pending</span>
  38. <span class="separator">·</span>
  39. <span>{{ $nudify.pending.length }}</span>
  40. </p>
  41. <div v-show="$nudify.pending.length > 0" class="queue__section__actions">
  42. <button
  43. v-tooltip="'Remove 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--success button--xs"
  51. @click.prevent="$nudify.addAll()">
  52. <font-awesome-icon icon="play" />
  53. </button>
  54. </div>
  55. </div>
  56. <div class="queue__content">
  57. <QueuePhoto
  58. v-for="(photo, index) of $nudify.pending"
  59. :key="index"
  60. :photo="photo" />
  61. </div>
  62. </section>
  63. <section class="queue__section queue__section--finished">
  64. <div class="queue__header">
  65. <p class="title">
  66. <span class="icon"><font-awesome-icon icon="clipboard-check" /></span>
  67. <span>Finished</span>
  68. <span class="separator">·</span>
  69. <span>{{ $nudify.finished.length }}</span>
  70. </p>
  71. <div v-show="$nudify.finished.length > 0" class="queue_section__actions">
  72. <button
  73. v-tooltip="'Remove all'"
  74. class="button button--danger button--xs"
  75. @click.prevent="$nudify.forgetAll('finished')">
  76. <font-awesome-icon icon="trash-alt" />
  77. </button>
  78. <button
  79. v-tooltip="'Rerun all'"
  80. class="button button--info button--xs"
  81. @click.prevent="$nudify.addAll('finished')">
  82. <font-awesome-icon icon="undo" />
  83. </button>
  84. </div>
  85. </div>
  86. <div class="queue__content">
  87. <QueuePhoto
  88. v-for="(photo, index) of $nudify.finished"
  89. :key="index"
  90. :photo="photo" />
  91. </div>
  92. </section>
  93. </div>
  94. </template>
  95. <script>
  96. export default {
  97. }
  98. </script>
  99. <style lang="scss" scoped>
  100. .queue {
  101. @apply bg-menus relative;
  102. }
  103. .queue__section {
  104. @apply flex flex-col;
  105. height: calc((100vh - 80px) / 3);
  106. &.queue__section--running {
  107. }
  108. &.queue__section--pending {
  109. }
  110. &.queue__section--finished {
  111. }
  112. }
  113. .queue__header {
  114. @apply flex items-center p-3;
  115. .title {
  116. @apply flex-1 text-sm font-bold;
  117. }
  118. .icon {
  119. @apply mr-2;
  120. }
  121. .separator {
  122. @apply mx-2;
  123. }
  124. }
  125. .queue__section__actions {
  126. @apply flex justify-end ml-2 z-10;
  127. .button {
  128. @apply ml-2;
  129. }
  130. }
  131. .queue__content {
  132. @apply flex-1;
  133. @apply flex flex-wrap;
  134. @apply overflow-y-auto whitespace-no-wrap;
  135. .photo {
  136. @apply w-1/2;
  137. height: 200px;
  138. }
  139. }
  140. /*
  141. .layout__jobbar {
  142. @apply relative flex flex-col;
  143. @apply bg-dark-500 py-2 z-10;
  144. @apply border-l border-dark-100;
  145. }
  146. section {
  147. @apply flex-1 flex flex-col;
  148. @apply overflow-hidden;
  149. height: calc((100vh - 80px) / 3);
  150. &:not(:first-child) {
  151. .section__header {
  152. &::before, &::after {
  153. @apply block border-b;
  154. @apply absolute right-0 pointer-events-none z-0;
  155. content: " ";
  156. left: 100px;
  157. }
  158. &::before {
  159. @apply border-dark-200;
  160. top: 18px;
  161. }
  162. &::after {
  163. @apply border-dark-400;
  164. top: 19px;
  165. }
  166. }
  167. }
  168. .section__header {
  169. @apply px-4 pt-2 text-sm text-white font-semibold;
  170. @apply relative flex items-center;
  171. .icon {
  172. @apply mr-2;
  173. }
  174. .section__title {
  175. @apply flex-1 z-10;
  176. }
  177. }
  178. .section__actions {
  179. @apply flex flex-1 justify-end ml-2 z-10 bg-dark-500;
  180. .button {
  181. @apply ml-2;
  182. }
  183. }
  184. }
  185. .jobs__list {
  186. @apply flex flex-wrap flex-1;
  187. @apply py-2 overflow-y-auto max-h-full;
  188. will-change: scroll-position;
  189. }
  190. */
  191. </style>