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.4KB

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