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.backup.vue 4.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <template>
  2. <div id="queuebar"
  3. class="layout__jobbar">
  4. <section id="queuebar-running">
  5. <div class="section__header">
  6. <div class="section__title">
  7. <span class="icon"><font-awesome-icon icon="running" /></span>
  8. <span>Queue</span>
  9. </div>
  10. <div v-show="$nudify.waiting.length > 0"
  11. class="section__actions">
  12. <button
  13. v-tooltip="{placement: 'bottom', content: 'Forget waiting'}"
  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 waiting' }"
  20. class="button button--xs"
  21. @click.prevent="$nudify.cancelAll('waiting')">
  22. <font-awesome-icon icon="stop" />
  23. </button>
  24. </div>
  25. </div>
  26. <div class="jobs__list">
  27. <QueuePhoto
  28. v-for="(photo, index) of $nudify.waiting"
  29. :key="index"
  30. :photo="photo"
  31. data-private />
  32. </div>
  33. </section>
  34. <section id="queuebar-pending">
  35. <div class="section__header">
  36. <div class="section__title">
  37. <span class="icon"><font-awesome-icon icon="clipboard-list" /></span>
  38. <span>Pending</span>
  39. </div>
  40. <div v-show="$nudify.pending.length > 0"
  41. 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.addAll()">
  52. <font-awesome-icon icon="play" />
  53. </button>
  54. </div>
  55. </div>
  56. <div class="jobs__list">
  57. <QueuePhoto
  58. v-for="(photo, index) of $nudify.pending"
  59. :key="index"
  60. :photo="photo"
  61. data-private />
  62. </div>
  63. </section>
  64. <section id="queuebar-finished">
  65. <div class="section__header">
  66. <div class="section__title">
  67. <span class="icon"><font-awesome-icon icon="clipboard-check" /></span>
  68. <span>Finished</span>
  69. </div>
  70. <div v-show="$nudify.finished.length > 0"
  71. class="section__actions">
  72. <button
  73. v-tooltip="'Forget 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--xs"
  81. @click.prevent="$nudify.addAll('finished')">
  82. <font-awesome-icon icon="undo" />
  83. </button>
  84. </div>
  85. </div>
  86. <div class="jobs__list">
  87. <QueuePhoto
  88. v-for="(photo, index) of $nudify.finished"
  89. :key="index"
  90. :photo="photo"
  91. data-private />
  92. </div>
  93. </section>
  94. </div>
  95. </template>
  96. <script>
  97. export default {
  98. }
  99. </script>
  100. <style lang="scss" scoped>
  101. .layout__jobbar {
  102. @apply relative flex flex-col;
  103. @apply bg-dark-500 py-2 z-10;
  104. @apply border-l border-dark-100;
  105. }
  106. section {
  107. @apply flex-1 flex flex-col;
  108. @apply overflow-hidden;
  109. height: calc((100vh - 80px) / 3);
  110. &:not(:first-child) {
  111. .section__header {
  112. &::before,
  113. &::after {
  114. @apply block border-b;
  115. @apply absolute right-0 pointer-events-none z-0;
  116. content: ' ';
  117. left: 100px;
  118. }
  119. &::before {
  120. @apply border-dark-200;
  121. top: 18px;
  122. }
  123. &::after {
  124. @apply border-dark-400;
  125. top: 19px;
  126. }
  127. }
  128. }
  129. .section__header {
  130. @apply px-4 pt-2 text-sm text-white font-semibold;
  131. @apply relative flex items-center;
  132. .icon {
  133. @apply mr-2;
  134. }
  135. .section__title {
  136. @apply flex-1 z-10;
  137. }
  138. }
  139. .section__actions {
  140. @apply flex flex-1 justify-end ml-2 z-10 bg-dark-500;
  141. .button {
  142. @apply ml-2;
  143. }
  144. }
  145. }
  146. .jobs__list {
  147. @apply flex flex-wrap flex-1;
  148. @apply py-2 overflow-y-auto max-h-full;
  149. will-change: scroll-position;
  150. }
  151. </style>