SettingsPage.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455
  1. <template lang="includer">
  2. <Window ref="window" height="95%" width="600px" @close="close">
  3. <template slot="header">
  4. Настройки
  5. </template>
  6. <!--q-tabs
  7. v-model="tab"
  8. vertical
  9. class="text-teal"
  10. >
  11. <q-tab name="mails" icon="mail" label="Mails" />
  12. <q-tab name="alarms" icon="alarm" label="Alarms" />
  13. <q-tab name="movies" icon="movie" label="Movies" />
  14. </q-tabs-->
  15. <el-tabs type="border-card" tab-position="left" v-model="selectedTab">
  16. <!-- Профили --------------------------------------------------------------------->
  17. @@include('./includeOld/ProfilesTabOld.inc');
  18. <!-- Вид ------------------------------------------------------------------------->
  19. @@include('./includeOld/ViewTabOld.inc');
  20. <!-- Кнопки ---------------------------------------------------------------------->
  21. @@include('./includeOld/ButtonsTabOld.inc');
  22. <!-- Управление ------------------------------------------------------------------>
  23. @@include('./includeOld/KeysTabOld.inc');
  24. <!-- Листание -------------------------------------------------------------------->
  25. @@include('./includeOld/PageMoveTabOld.inc');
  26. <!-- Прочее ---------------------------------------------------------------------->
  27. @@include('./includeOld/OthersTabOld.inc');
  28. <!-- Сброс ----------------------------------------------------------------------->
  29. @@include('./includeOld/ResetTabOld.inc');
  30. </el-tabs>
  31. </Window>
  32. </template>
  33. <script>
  34. //-----------------------------------------------------------------------------
  35. import Vue from 'vue';
  36. import Component from 'vue-class-component';
  37. import _ from 'lodash';
  38. import * as utils from '../../../share/utils';
  39. import Window from '../../share/Window.vue';
  40. import rstore from '../../../store/modules/reader';
  41. export default @Component({
  42. components: {
  43. Window,
  44. },
  45. data: function() {
  46. return Object.assign({}, rstore.settingDefaults);
  47. },
  48. watch: {
  49. settings: function() {
  50. this.settingsChanged();
  51. },
  52. form: function(newValue) {
  53. if (this.inited)
  54. this.commit('reader/setSettings', newValue);
  55. },
  56. fontBold: function(newValue) {
  57. this.fontWeight = (newValue ? 'bold' : '');
  58. },
  59. fontItalic: function(newValue) {
  60. this.fontStyle = (newValue ? 'italic' : '');
  61. },
  62. vertShift: function(newValue) {
  63. const font = (this.webFontName ? this.webFontName : this.fontName);
  64. this.fontShifts = Object.assign({}, this.fontShifts, {[font]: newValue});
  65. this.fontVertShift = newValue;
  66. },
  67. fontName: function(newValue) {
  68. const font = (this.webFontName ? this.webFontName : newValue);
  69. this.vertShift = this.fontShifts[font] || 0;
  70. },
  71. webFontName: function(newValue) {
  72. const font = (newValue ? newValue : this.fontName);
  73. this.vertShift = this.fontShifts[font] || 0;
  74. },
  75. wallpaper: function(newValue) {
  76. if (newValue != '' && this.pageChangeAnimation == 'flip')
  77. this.pageChangeAnimation = '';
  78. },
  79. },
  80. })
  81. class SettingsPage extends Vue {
  82. selectedTab = null;
  83. form = {};
  84. fontBold = false;
  85. fontItalic = false;
  86. vertShift = 0;
  87. webFonts = [];
  88. fonts = [];
  89. serverStorageKeyVisible = false;
  90. toolButtons = [];
  91. created() {
  92. this.commit = this.$store.commit;
  93. this.reader = this.$store.state.reader;
  94. this.form = {};
  95. this.toolButtons = rstore.toolButtons;
  96. this.settingsChanged();
  97. }
  98. init() {
  99. this.$refs.window.init();
  100. this.inited = true;
  101. }
  102. settingsChanged() {
  103. if (_.isEqual(this.form, this.settings))
  104. return;
  105. this.form = Object.assign({}, this.settings);
  106. for (let prop in rstore.settingDefaults) {
  107. this[prop] = this.form[prop];
  108. this.$watch(prop, (newValue) => {
  109. this.form = Object.assign({}, this.form, {[prop]: newValue});
  110. });
  111. }
  112. this.fontBold = (this.fontWeight == 'bold');
  113. this.fontItalic = (this.fontStyle == 'italic');
  114. this.fonts = rstore.fonts;
  115. this.webFonts = rstore.webFonts;
  116. const font = (this.webFontName ? this.webFontName : this.fontName);
  117. this.vertShift = this.fontShifts[font] || 0;
  118. }
  119. get mode() {
  120. return this.$store.state.config.mode;
  121. }
  122. get settings() {
  123. return this.$store.state.reader.settings;
  124. }
  125. get serverSyncEnabled() {
  126. return this.$store.state.reader.serverSyncEnabled;
  127. }
  128. set serverSyncEnabled(newValue) {
  129. this.commit('reader/setServerSyncEnabled', newValue);
  130. }
  131. get profiles() {
  132. return this.$store.state.reader.profiles;
  133. }
  134. get profilesArray() {
  135. const result = Object.keys(this.profiles)
  136. result.sort();
  137. return result;
  138. }
  139. get currentProfile() {
  140. return this.$store.state.reader.currentProfile;
  141. }
  142. set currentProfile(newValue) {
  143. this.commit('reader/setCurrentProfile', newValue);
  144. }
  145. get partialStorageKey() {
  146. return this.serverStorageKey.substr(0, 7) + '***';
  147. }
  148. get serverStorageKey() {
  149. return this.$store.state.reader.serverStorageKey;
  150. }
  151. get setStorageKeyLink() {
  152. return `https://${window.location.host}/#/reader?setStorageAccessKey=${utils.toBase58(this.serverStorageKey)}`;
  153. }
  154. get predefineTextColors() {
  155. return [
  156. '#ffffff',
  157. '#000000',
  158. '#202020',
  159. '#323232',
  160. '#aaaaaa',
  161. '#00c0c0',
  162. ];
  163. }
  164. get predefineBackgroundColors() {
  165. return [
  166. '#ffffff',
  167. '#000000',
  168. '#202020',
  169. '#ebe2c9',
  170. '#cfdc99',
  171. '#478355',
  172. '#a6caf0',
  173. '#909080',
  174. '#808080',
  175. '#c8c8c8',
  176. ];
  177. }
  178. needReload() {
  179. this.$notify.warning({message: 'Необходимо обновить страницу (F5), чтобы изменения возымели эффект'});
  180. }
  181. needTextReload() {
  182. this.$notify.warning({message: 'Необходимо обновить книгу в обход кэша, чтобы изменения возымели эффект'});
  183. }
  184. close() {
  185. this.$emit('settings-toggle');
  186. }
  187. async setDefaults() {
  188. try {
  189. if (await this.$confirm('Подтвердите установку настроек по умолчанию:', '', {
  190. confirmButtonText: 'OK',
  191. cancelButtonText: 'Отмена',
  192. customClass: 'prompt-dialog',
  193. type: 'warning'
  194. })) {
  195. this.form = Object.assign({}, rstore.settingDefaults);
  196. for (let prop in rstore.settingDefaults) {
  197. this[prop] = this.form[prop];
  198. }
  199. }
  200. } catch (e) {
  201. //
  202. }
  203. }
  204. changeShowToolButton(buttonName) {
  205. this.showToolButton = Object.assign({}, this.showToolButton, {[buttonName]: !this.showToolButton[buttonName]});
  206. }
  207. async addProfile() {
  208. try {
  209. if (Object.keys(this.profiles).length >= 100) {
  210. this.$alert('Достигнут предел количества профилей', 'Ошибка');
  211. return;
  212. }
  213. const result = await this.$prompt('Введите произвольное название для профиля устройства:', '', {
  214. confirmButtonText: 'OK',
  215. cancelButtonText: 'Отмена',
  216. inputValidator: (str) => { if (!str) return 'Название не должно быть пустым'; else if (str.length > 50) return 'Слишком длинное название'; else return true; },
  217. customClass: 'prompt-dialog',
  218. });
  219. if (result.value) {
  220. if (this.profiles[result.value]) {
  221. this.$alert('Такой профиль уже существует', 'Ошибка');
  222. } else {
  223. const newProfiles = Object.assign({}, this.profiles, {[result.value]: 1});
  224. this.commit('reader/setAllowProfilesSave', true);
  225. await this.$nextTick();//ждем обработчики watch
  226. this.commit('reader/setProfiles', newProfiles);
  227. await this.$nextTick();//ждем обработчики watch
  228. this.commit('reader/setAllowProfilesSave', false);
  229. this.currentProfile = result.value;
  230. }
  231. }
  232. } catch (e) {
  233. //
  234. }
  235. }
  236. async delProfile() {
  237. if (!this.currentProfile)
  238. return;
  239. try {
  240. const result = await this.$prompt(`<b>Предупреждение!</b> Удаление профиля '${this.currentProfile}' необратимо.` +
  241. `<br>Все настройки профиля будут потеряны,<br>однако список читаемых книг сохранится.` +
  242. `<br><br>Введите 'да' для подтверждения удаления:`, '', {
  243. dangerouslyUseHTMLString: true,
  244. confirmButtonText: 'OK',
  245. cancelButtonText: 'Отмена',
  246. inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
  247. customClass: 'prompt-dialog',
  248. type: 'warning',
  249. });
  250. if (result.value && result.value.toLowerCase() == 'да') {
  251. if (this.profiles[this.currentProfile]) {
  252. const newProfiles = Object.assign({}, this.profiles);
  253. delete newProfiles[this.currentProfile];
  254. this.commit('reader/setAllowProfilesSave', true);
  255. await this.$nextTick();//ждем обработчики watch
  256. this.commit('reader/setProfiles', newProfiles);
  257. await this.$nextTick();//ждем обработчики watch
  258. this.commit('reader/setAllowProfilesSave', false);
  259. this.currentProfile = '';
  260. }
  261. }
  262. } catch (e) {
  263. //
  264. }
  265. }
  266. async delAllProfiles() {
  267. if (!Object.keys(this.profiles).length)
  268. return;
  269. try {
  270. const result = await this.$prompt(`<b>Предупреждение!</b> Удаление ВСЕХ профилей с настройками необратимо.` +
  271. `<br><br>Введите 'да' для подтверждения удаления:`, '', {
  272. dangerouslyUseHTMLString: true,
  273. confirmButtonText: 'OK',
  274. cancelButtonText: 'Отмена',
  275. inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
  276. customClass: 'prompt-dialog',
  277. type: 'warning',
  278. });
  279. if (result.value && result.value.toLowerCase() == 'да') {
  280. this.commit('reader/setAllowProfilesSave', true);
  281. await this.$nextTick();//ждем обработчики watch
  282. this.commit('reader/setProfiles', {});
  283. await this.$nextTick();//ждем обработчики watch
  284. this.commit('reader/setAllowProfilesSave', false);
  285. this.currentProfile = '';
  286. }
  287. } catch (e) {
  288. //
  289. }
  290. }
  291. async copyToClip(text, prefix) {
  292. const result = await utils.copyTextToClipboard(text);
  293. const suf = (prefix.substr(-1) == 'а' ? 'а' : '');
  294. const msg = (result ? `${prefix} успешно скопирован${suf} в буфер обмена` : 'Копирование не удалось');
  295. if (result)
  296. this.$notify.success({message: msg});
  297. else
  298. this.$notify.error({message: msg});
  299. }
  300. async showServerStorageKey() {
  301. this.serverStorageKeyVisible = !this.serverStorageKeyVisible;
  302. }
  303. async enterServerStorageKey(key) {
  304. try {
  305. const result = await this.$prompt(`<b>Предупреждение!</b> Изменение ключа доступа приведет к замене всех профилей и читаемых книг в читалке.` +
  306. `<br><br>Введите новый ключ доступа:`, '', {
  307. dangerouslyUseHTMLString: true,
  308. confirmButtonText: 'OK',
  309. cancelButtonText: 'Отмена',
  310. inputValidator: (str) => { if (str && utils.fromBase58(str).length == 32) return true; else return 'Неверный формат ключа'; },
  311. inputValue: (key && _.isString(key) ? key : null),
  312. customClass: 'prompt-dialog',
  313. type: 'warning',
  314. });
  315. if (result.value && utils.fromBase58(result.value).length == 32) {
  316. this.commit('reader/setServerStorageKey', result.value);
  317. }
  318. } catch (e) {
  319. //
  320. }
  321. }
  322. async generateServerStorageKey() {
  323. try {
  324. const result = await this.$prompt(`<b>Предупреждение!</b> Генерация нового ключа доступа приведет к удалению всех профилей и читаемых книг в читалке.` +
  325. `<br><br>Введите 'да' для подтверждения генерации нового ключа:`, '', {
  326. dangerouslyUseHTMLString: true,
  327. confirmButtonText: 'OK',
  328. cancelButtonText: 'Отмена',
  329. inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Генерация не подтверждена'; },
  330. customClass: 'prompt-dialog',
  331. type: 'warning',
  332. });
  333. if (result.value && result.value.toLowerCase() == 'да') {
  334. this.$root.$emit('generateNewServerStorageKey');
  335. }
  336. } catch (e) {
  337. //
  338. }
  339. }
  340. keyHook(event) {
  341. if (event.type == 'keydown' && event.code == 'Escape') {
  342. this.close();
  343. }
  344. return true;
  345. }
  346. }
  347. //-----------------------------------------------------------------------------
  348. </script>
  349. <style scoped>
  350. .text {
  351. font-size: 90%;
  352. line-height: 130%;
  353. }
  354. .el-form {
  355. border-top: 2px solid #bbbbbb;
  356. margin-bottom: 5px;
  357. }
  358. .el-form-item {
  359. padding: 0 !important;
  360. margin: 0 !important;
  361. margin-bottom: 5px !important;
  362. }
  363. .color-picked {
  364. margin-left: 10px;
  365. position: relative;
  366. top: -11px;
  367. }
  368. .partHeader {
  369. font-weight: bold;
  370. margin-bottom: 5px;
  371. }
  372. .el-tabs {
  373. flex: 1;
  374. display: flex;
  375. }
  376. .el-tab-pane {
  377. flex: 1;
  378. display: flex;
  379. flex-direction: column;
  380. width: 420px;
  381. overflow-y: auto;
  382. padding: 15px;
  383. }
  384. .center {
  385. text-align: center;
  386. }
  387. </style>
  388. <style>
  389. .prompt-dialog {
  390. width: 100% !important;
  391. max-width: 450px;
  392. }
  393. </style>