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.

folders.vue 4.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <template>
  2. <div class="settings-folders">
  3. <PageHeader>
  4. <h2 class="title">
  5. <span class="icon"><font-awesome-icon icon="folder" /></span>
  6. <span>Folders</span>
  7. </h2>
  8. <h3 class="subtitle">
  9. Change the location of the components and files.
  10. </h3>
  11. </PageHeader>
  12. <div v-if="$dream.isPortable" class="notification">
  13. <span class="icon"><font-awesome-icon icon="exclamation-triangle" /></span>
  14. <span>These options cannot be changed in the portable version.</span>
  15. </div>
  16. <div v-else class="notification">
  17. <span class="icon"><font-awesome-icon icon="info-circle" /></span>
  18. <span>Changing this options needs a restart to take effect.</span>
  19. </div>
  20. <section class="box">
  21. <div class="box__content">
  22. <SettingsField v-model="value$" field-id="folders.cli">
  23. <input
  24. v-if="!$dream.isPortable"
  25. v-model="value$.folders.cli"
  26. readonly
  27. class="input"
  28. :title="value$.folders.cli"
  29. @click.prevent="changePower">
  30. <input
  31. v-else
  32. disabled
  33. readonly
  34. :value="paths.getPowerPath()"
  35. :title="value$.folders.cli"
  36. class="input">
  37. </SettingsField>
  38. <SettingsField v-model="value$" field-id="folders.waifu">
  39. <input
  40. v-if="!$dream.isPortable"
  41. v-model="value$.folders.waifu"
  42. readonly
  43. class="input"
  44. :title="value$.folders.waifu"
  45. @click.prevent="changeWaifu">
  46. <input
  47. v-else
  48. disabled
  49. readonly
  50. :value="paths.getWaifuPath()"
  51. :title="value$.folders.waifu"
  52. class="input">
  53. </SettingsField>
  54. <SettingsField v-model="value$" field-id="folders.models">
  55. <input
  56. v-if="!$dream.isPortable"
  57. v-model="value$.folders.models"
  58. :disabled="$dream.isPortable"
  59. class="input"
  60. readonly
  61. :title="value$.folders.models"
  62. @click.prevent="changeModels">
  63. <input
  64. v-else
  65. disabled
  66. readonly
  67. :value="paths.getModelsPath()"
  68. :title="value$.folders.models"
  69. class="input">
  70. </SettingsField>
  71. <SettingsField v-model="value$" field-id="folders.cropped">
  72. <input
  73. v-if="!$dream.isPortable"
  74. v-model="value$.folders.cropped"
  75. :disabled="$dream.isPortable"
  76. class="input"
  77. readonly
  78. :title="value$.folders.cropped"
  79. @click.prevent="changeCropped">
  80. <input
  81. v-else
  82. disabled
  83. readonly
  84. :value="paths.getCropPath()"
  85. :title="value$.folders.cropped"
  86. class="input">
  87. </SettingsField>
  88. </div>
  89. </section>
  90. </div>
  91. </template>
  92. <script>
  93. import { isNil } from 'lodash'
  94. import { VModel } from '~/mixins'
  95. const { paths } = $provider
  96. const { existsSync } = $provider.fs
  97. const { dialog } = $provider.api
  98. export default {
  99. mixins: [VModel],
  100. data: () => ({
  101. paths,
  102. }),
  103. methods: {
  104. showOpenDialog(path) {
  105. const dir = dialog.showOpenDialogSync({
  106. defaultPath: path,
  107. properties: ['openDirectory'],
  108. })
  109. if (isNil(dir)) {
  110. return path
  111. }
  112. if (!existsSync(dir[0])) {
  113. // ???
  114. return path
  115. }
  116. return dir[0]
  117. },
  118. changeModels() {
  119. if (this.$dream.isPortable) {
  120. return
  121. }
  122. const dir = this.showOpenDialog(this.value$.folders.models)
  123. this.value$.folders.models = dir
  124. },
  125. changeCropped() {
  126. if (this.$dream.isPortable) {
  127. return
  128. }
  129. const dir = this.showOpenDialog(this.value$.folders.cropped)
  130. this.value$.folders.cropped = dir
  131. },
  132. changePower() {
  133. if (this.$dream.isPortable) {
  134. return
  135. }
  136. const dir = this.showOpenDialog(this.value$.folders.cli)
  137. this.value$.folders.cli = dir
  138. },
  139. changeWaifu() {
  140. if (this.$dream.isPortable) {
  141. return
  142. }
  143. const dir = this.showOpenDialog(this.value$.folders.waifu)
  144. this.value$.folders.waifu = dir
  145. },
  146. },
  147. }
  148. </script>
  149. <style lang="scss" scoped>
  150. .settings-folders {
  151. .input {
  152. @apply cursor-pointer;
  153. }
  154. .notification {
  155. @apply mb-4;
  156. }
  157. }
  158. </style>