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.

PhotoRun.vue 6.2KB

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