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.

Job.vue 6.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. <template>
  2. <div class="c-nudity-job">
  3. <figure class="__preview">
  4. <img v-if="job.hasFinished" :src="outputDataURL" />
  5. <span v-else v-tooltip="'Loading...'">💭</span>
  6. </figure>
  7. <div class="__content">
  8. <!-- Actions -->
  9. <details class="__section" open>
  10. <summary class="__title">Actions</summary>
  11. <div class="__buttons">
  12. <button v-if="job.hasFinished" class="button is-success" @click.prevent="save">Save</button>
  13. <button v-if="job.hasFinished || job.hasFailed" class="button is-danger is-sm" @click.prevent="rerun">Rerun</button>
  14. </div>
  15. </details>
  16. <details v-if="job.hasFinished || job.isLoading" class="__section" open>
  17. <summary class="__title">Duration</summary>
  18. <div class="__status">
  19. <p>{{ job.timer.duration }}s</p>
  20. </div>
  21. </details>
  22. <details v-else-if="job.hasFailed" class="__section" open>
  23. <summary class="__title">Status</summary>
  24. <div class="__status text-danger">
  25. <p>Fail</p>
  26. </div>
  27. </details>
  28. <details v-else class="__section" open>
  29. <summary class="__title">Status</summary>
  30. <div class="__status">
  31. <p>Pending...</p>
  32. </div>
  33. </details>
  34. <!-- Preferences -->
  35. <details class="__section">
  36. <summary class="__title">Preferences</summary>
  37. <div class="__preferences">
  38. <p>
  39. <span class="__name">Boobs size</span>
  40. <span class="__value">{{ job.preferences.boobs.size | size }}</span>
  41. </p>
  42. <p>
  43. <span class="__name">Areola size</span>
  44. <span class="__value">{{ job.preferences.areola.size | size }}</span>
  45. </p>
  46. <p>
  47. <span class="__name">Nipple size</span>
  48. <span class="__value">{{ job.preferences.nipple.size | size }}</span>
  49. </p>
  50. <p>
  51. <span class="__name">Vagina size</span>
  52. <span class="__value">{{ job.preferences.vagina.size | size }}</span>
  53. </p>
  54. <p>
  55. <span class="__name">Pubic Hair size</span>
  56. <span class="__value">{{ job.preferences.pubicHair.size | size }}</span>
  57. </p>
  58. </div>
  59. </details>
  60. <!-- Console -->
  61. <details class="__section">
  62. <summary class="__title">Console</summary>
  63. <div class="__console">
  64. <li v-for="(item, index) in job.cli.lines" :key="index" :class="item.css">> {{ item.text }}</li>
  65. </div>
  66. </details>
  67. </div>
  68. </div>
  69. </template>
  70. <script>
  71. import _ from 'lodash'
  72. export default {
  73. filters: {
  74. size(value) {
  75. return Number.parseFloat(value).toFixed(2)
  76. }
  77. },
  78. props: {
  79. job: {
  80. type: Object,
  81. required: true
  82. }
  83. },
  84. data: () => ({
  85. outputDataURL: undefined
  86. }),
  87. watch: {
  88. async 'job.hasFinished'(value) {
  89. if (value) {
  90. this.outputDataURL = await this.job.getFile().readAsDataURL()
  91. }
  92. }
  93. },
  94. methods: {
  95. view() {},
  96. save() {
  97. const savePath = $tools.shell.showSaveDialog({
  98. defaultPath: this.job.getFileName(),
  99. filters: [
  100. { name: 'PNG', extensions: ['png'] }
  101. // { name: 'JPEG', extensions: ['jpg'] }
  102. ]
  103. })
  104. if (_.isNil(savePath)) {
  105. return
  106. }
  107. this.job.getFile().copy(savePath)
  108. },
  109. rerun() {
  110. this.job.photo.rerunJob(this.job.id)
  111. }
  112. }
  113. }
  114. </script>
  115. <style lang="scss">
  116. .c-nudity-job {
  117. @apply flex;
  118. .__preview {
  119. @apply flex justify-center items-center
  120. rounded rounded-tr-none rounded-br-none
  121. border-2 border-dark-500 border-r-0
  122. text-3xl;
  123. width: 125px;
  124. height: 125px;
  125. img {
  126. @apply w-full h-full rounded rounded-tr-none rounded-br-none;
  127. transition: all 0.15s ease-in-out;
  128. &:hover {
  129. @apply rounded z-50;
  130. transform: scale(3);
  131. }
  132. }
  133. }
  134. .__content {
  135. @apply flex-1 flex flex-col
  136. bg-dark-500
  137. rounded
  138. rounded-tl-none
  139. rounded-bl-none
  140. px-4
  141. shadow;
  142. width: 200px;
  143. .__section {
  144. @apply py-3;
  145. &:not(:last-child) {
  146. @apply border-b border-dark-400;
  147. }
  148. .__title {
  149. @apply text-xs uppercase text-generic-300 mb-2 cursor-pointer;
  150. }
  151. .__status {
  152. @apply flex justify-center
  153. text-xl font-bold;
  154. }
  155. .__buttons {
  156. @apply flex justify-center items-center;
  157. }
  158. .__console {
  159. @apply p-3 bg-black overflow-auto rounded;
  160. height: 150px;
  161. li {
  162. @apply font-mono text-xs text-generic-100 mb-3 block;
  163. &.text-danger {
  164. @apply text-danger;
  165. }
  166. }
  167. }
  168. .__preferences {
  169. p {
  170. @apply text-sm;
  171. .__name {
  172. @apply inline-block text-generic-300;
  173. width: 150px;
  174. }
  175. .__value {
  176. @apply inline-block font-bold text-generic-100;
  177. }
  178. }
  179. }
  180. }
  181. }
  182. }
  183. /*
  184. .c-nudity-job {
  185. @apply flex pb-4;
  186. height: 170px;
  187. &:not(:first-child) {
  188. @apply pt-4;
  189. }
  190. &:not(:last-child) {
  191. @apply border-b border-dark-400;
  192. }
  193. .job-section {
  194. @apply p-2 mb-0;
  195. width: 200px;
  196. &:not(:last-child) {
  197. @apply mr-5;
  198. }
  199. }
  200. .job-photos {
  201. @apply flex-1 inline-flex;
  202. width: auto;
  203. }
  204. .job-status {
  205. @apply flex flex-col justify-center items-center;
  206. width: 150px;
  207. & > div {
  208. @apply text-center;
  209. }
  210. .buttons {
  211. @apply flex flex-col justify-center items-center mt-3;
  212. }
  213. .status-title {
  214. @apply font-semibold text-xl text-generic-300;
  215. &.text-danger {
  216. @apply text-danger;
  217. }
  218. }
  219. .status-text {
  220. @apply text-sm;
  221. }
  222. }
  223. .job-console {
  224. @apply bg-black overflow-auto rounded;
  225. li {
  226. @apply font-mono text-xs text-generic-100 mb-3 block;
  227. &.text-danger {
  228. @apply text-danger;
  229. }
  230. }
  231. }
  232. .job-preferences {
  233. @apply flex flex-col justify-center items-center;
  234. p {
  235. @apply text-sm;
  236. .preference-name {
  237. @apply inline-block;
  238. width: 150px;
  239. }
  240. .preference-value {
  241. @apply inline-block;
  242. @apply font-bold;
  243. }
  244. }
  245. }
  246. }
  247. */
  248. </style>