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.

share.vue 9.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346
  1. <template>
  2. <div class="settings-share">
  3. <PageHeader>
  4. <h2 class="title">
  5. <span class="icon"><font-awesome-icon icon="share-alt" /></span>
  6. <span>Share</span>
  7. </h2>
  8. <h3 class="subtitle">
  9. Share or save your photo preferences.
  10. </h3>
  11. </PageHeader>
  12. <!-- Offline -->
  13. <div v-if="!$dreamtrack.enabled" class="notification notification--warning">
  14. <h5>
  15. <span class="icon"><font-awesome-icon icon="exclamation-triangle" /></span>
  16. <span>Unable to connect to {{ $community.name }} servers.</span>
  17. </h5>
  18. <span>
  19. Please try again later.
  20. </span>
  21. </div>
  22. <div v-if="$dreamtrack.enabled">
  23. <section class="box">
  24. <div class="box__header">
  25. <h2 class="title">
  26. Export
  27. </h2>
  28. <h3 class="subtitle">
  29. Save your photo preferences in an easy-to-remember ID.
  30. </h3>
  31. </div>
  32. <div class="box__content">
  33. <div class="share__input">
  34. <input ref="friendlyID"
  35. v-model="friendlyID"
  36. placeholder="PID will appear here."
  37. class="input"
  38. readonly>
  39. </div>
  40. </div>
  41. <div class="box__footer">
  42. <div class="left">
  43. <label for="body-preferences">
  44. <input id="body-preferences" v-model="includeBodyPreferences" type="checkbox"> Include body preferences
  45. </label>
  46. </div>
  47. <div class="right">
  48. <button class="button" @click="generate">
  49. Generate PID
  50. </button>
  51. </div>
  52. </div>
  53. </section>
  54. <section class="box">
  55. <div class="box__header">
  56. <h2 class="title">
  57. Import
  58. </h2>
  59. <h3 class="subtitle">
  60. Restore your preferences or use someone else's.
  61. </h3>
  62. </div>
  63. <div class="box__content">
  64. <div class="share__input">
  65. <input v-model="importFriendlyID"
  66. placeholder="Write the PID here."
  67. class="input">
  68. </div>
  69. </div>
  70. <div class="box__footer">
  71. <div class="left" />
  72. <div class="right">
  73. <button class="button" @click="review">
  74. Review
  75. </button>
  76. </div>
  77. </div>
  78. </section>
  79. <section v-if="importPreferences" class="box">
  80. <div class="box__header">
  81. <h2 class="title">
  82. Preferences review
  83. </h2>
  84. <h3 class="subtitle">
  85. Are you sure you want to import these preferences?
  86. </h3>
  87. </div>
  88. <div class="box__content">
  89. <SettingsField v-model="importPreferences" field-id="preferences.mode" readonly />
  90. <SettingsField v-model="importPreferences" field-id="preferences.advanced.scaleMode" readonly />
  91. <SettingsField v-model="importPreferences" field-id="preferences.advanced.imageSize" readonly />
  92. <SettingsField v-model="importPreferences" field-id="preferences.advanced.compress" readonly />
  93. <SettingsField v-model="importPreferences" field-id="preferences.advanced.useColorPaddingStrip" readonly />
  94. <SettingsField v-model="importPreferences" field-id="preferences.advanced.useColorTransfer" readonly />
  95. <SettingsField v-model="importPreferences" field-id="preferences.advanced.waifu.scale" readonly />
  96. <SettingsField v-model="importPreferences" field-id="preferences.advanced.waifu.denoise" readonly />
  97. <SettingsField v-model="importPreferences" field-id="preferences.advanced.waifu.tta" readonly />
  98. <SettingsField v-model="importPreferences" field-id="preferences.advanced.waifu.arch" readonly />
  99. <SettingsField v-model="importPreferences" field-id="preferences.body.executions" readonly />
  100. <SettingsField v-if="importPreferences.body.randomize"
  101. v-model="importPreferences"
  102. field-id="preferences.body.randomize"
  103. readonly />
  104. <SettingsField v-if="importPreferences.body.progressive.enabled && !importPreferences.body.randomize"
  105. v-model="importPreferences"
  106. field-id="preferences.body.progressive.enabled"
  107. :description="`Body preferences will increase ${importPreferences.body.progressive.rate} at each run.`"
  108. readonly />
  109. <!-- Boobs -->
  110. <Preference v-if="importPreferences.body.boobs"
  111. v-model="importPreferences.body.boobs"
  112. label="Boobs"
  113. readonly />
  114. <!-- Areola -->
  115. <Preference v-if="importPreferences.body.areola"
  116. v-model="importPreferences.body.areola"
  117. label="Areola"
  118. readonly />
  119. <!-- Nipple -->
  120. <Preference v-if="importPreferences.body.nipple"
  121. v-model="importPreferences.body.nipple"
  122. label="Nipple"
  123. readonly />
  124. <!-- Vagina -->
  125. <Preference v-if="importPreferences.body.vagina"
  126. v-model="importPreferences.body.vagina"
  127. label="Vagina"
  128. readonly />
  129. <!-- Pubic Hair -->
  130. <Preference v-if="importPreferences.body.pubicHair"
  131. v-model="importPreferences.body.pubicHair"
  132. label="Pubic Hair"
  133. readonly />
  134. </div>
  135. <div class="box__footer">
  136. <div class="left" />
  137. <div class="right">
  138. <button class="button" @click="reviewImport">
  139. Import
  140. </button>
  141. </div>
  142. </div>
  143. </section>
  144. </div>
  145. </div>
  146. </template>
  147. <script>
  148. import { cloneDeep, merge } from 'lodash'
  149. import Swal from 'sweetalert2/dist/sweetalert2'
  150. import { settings } from '~/modules/system'
  151. import { VModel } from '~/mixins'
  152. export default {
  153. mixins: [VModel],
  154. data: () => ({
  155. includeBodyPreferences: true,
  156. friendlyID: '',
  157. importFriendlyID: '',
  158. importPreferences: null,
  159. }),
  160. computed: {
  161. preferences() {
  162. const payload = cloneDeep(settings.get('preferences'))
  163. if (!this.includeBodyPreferences) {
  164. delete payload.body
  165. }
  166. return payload
  167. },
  168. },
  169. watch: {
  170. '$dreamtrack.enabled': {
  171. immediate: true,
  172. handler(value) {
  173. if (value) {
  174. this.init()
  175. } else {
  176. this.shutdown()
  177. }
  178. },
  179. },
  180. },
  181. beforeDestroy() {
  182. this.shutdown()
  183. },
  184. methods: {
  185. init() {
  186. if (!this.$dreamtrack.enabled) {
  187. return
  188. }
  189. this.$dreamtrack.channel.on('preferencesExport', this.onExport.bind(this))
  190. this.$dreamtrack.channel.on('preferencesImport', this.onImport.bind(this))
  191. },
  192. shutdown() {
  193. if (!this.$dreamtrack.channel) {
  194. return
  195. }
  196. this.$dreamtrack.channel.off('preferencesExport', this.onExport.bind(this))
  197. this.$dreamtrack.channel.off('preferencesImport', this.onImport.bind(this))
  198. },
  199. onExport(friendlyID) {
  200. Swal.close()
  201. this.friendlyID = friendlyID
  202. this.$refs.friendlyID.focus()
  203. },
  204. onImport(preferences) {
  205. if (!preferences) {
  206. Swal.fire({
  207. title: 'Invalid Preferences ID',
  208. text: 'Please make sure you have written it correctly.',
  209. icon: 'error',
  210. })
  211. return
  212. }
  213. Swal.close()
  214. this.importPreferences = JSON.parse(preferences)
  215. },
  216. generate() {
  217. Swal.fire({
  218. title: 'Exporting your preferences...',
  219. text: 'One moment, please.',
  220. showConfirmButton: false,
  221. allowOutsideClick: false,
  222. allowEscapeKey: false,
  223. })
  224. try {
  225. delete this.preferences.advanced.waifu.enabled
  226. delete this.preferences.advanced.device
  227. // eslint-disable-next-line no-empty
  228. } catch (e) { }
  229. this.$dreamtrack.channel.emit('preferencesExport', this.preferences)
  230. },
  231. review() {
  232. if (this.importFriendlyID.length === 0) {
  233. Swal.fire({
  234. title: 'Invalid Preferences ID',
  235. text: 'Please make sure you have written it correctly.',
  236. icon: 'error',
  237. })
  238. return
  239. }
  240. Swal.fire({
  241. title: 'Searching preferences...',
  242. text: 'One moment, please.',
  243. showConfirmButton: false,
  244. allowOutsideClick: false,
  245. allowEscapeKey: false,
  246. })
  247. this.$dreamtrack.channel.emit('preferencesImport', this.importFriendlyID)
  248. },
  249. reviewImport() {
  250. try {
  251. delete this.importPreferences.advanced.waifu.enabled
  252. delete this.importPreferences.advanced.device
  253. // eslint-disable-next-line no-empty
  254. } catch (e) { }
  255. this.value$.preferences = merge(this.value$.preferences, this.importPreferences)
  256. Swal.fire({
  257. title: 'Success.',
  258. text: 'Preferences have been imported.',
  259. icon: 'success',
  260. })
  261. this.importPreferences = null
  262. this.importFriendlyID = ''
  263. },
  264. },
  265. }
  266. </script>
  267. <style lang="scss" scoped>
  268. .share__input {
  269. @apply mb-6;
  270. }
  271. .box__footer {
  272. @apply flex items-center gap-3;
  273. .left {
  274. @apply flex-1;
  275. }
  276. .right {
  277. @apply flex justify-end;
  278. }
  279. }
  280. </style>