Поправки багов

client/components/Reader/Reader.vue

@@ -277,6 +277,7 @@ class Reader extends Vue {
         this.updateHeaderMinWidth();
 
         (async() => {
+            await wallpaperStorage.init();
             await bookManager.init(this.settings);
             bookManager.addEventListener(this.bookManagerEvent);
 

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -79,6 +79,7 @@ import Component from 'vue-class-component';
 import _ from 'lodash';
 
 import * as utils from '../../../share/utils';
+import * as cryptoUtils from '../../../share/cryptoUtils';
 import Window from '../../share/Window.vue';
 import NumInput from '../../share/NumInput.vue';
 import UserHotKeys from './UserHotKeys/UserHotKeys.vue';
@@ -279,8 +280,12 @@ class SettingsPage extends Vue {
     get wallpaperOptions() {
         let result = [{label: 'Нет', value: ''}];
 
-        for (const wp of this.userWallpapers) {
-            result.push({label: wp.label, value: wp.cssClass});
+        const userWallpapers = _.cloneDeep(this.userWallpapers);
+        userWallpapers.sort((a, b) => a.label.localeCompare(b.label));
+
+        for (const wp of userWallpapers) {
+            if (wallpaperStorage.keyExists(wp.cssClass))
+                result.push({label: wp.label, value: wp.cssClass});
         }
 
         for (let i = 1; i <= 17; i++) {
@@ -579,19 +584,19 @@ class SettingsPage extends Vue {
             const reader = new FileReader();
 
             reader.onload = (e) => {
-                const newUserWallpapers = _.cloneDeep(this.userWallpapers);
-                let n = 0;
-                for (const wp of newUserWallpapers) {
-                    const newN = parseInt(wp.label.replace(/\D/g, ''), 10);
-                    if (newN > n)
-                        n = newN;
-                }
-                n++;
-
-                const cssClass = `user-paper${n}`;
-                newUserWallpapers.push({label: `#${n}`, cssClass});
                 (async() => {
-                    await wallpaperStorage.setData(cssClass, e.target.result);
+                    const data = e.target.result;
+                    const key = utils.toHex(cryptoUtils.sha256(data));
+                    const label = `#${key.substring(0, 4)}`;
+                    const cssClass = `user-paper${key}`;
+
+                    const newUserWallpapers = _.cloneDeep(this.userWallpapers);
+                    const index = _.findIndex(newUserWallpapers, (item) => (item.cssClass == cssClass));
+
+                    if (index < 0)
+                        newUserWallpapers.push({label, cssClass});
+                    if (!wallpaperStorage.keyExists(cssClass))
+                        await wallpaperStorage.setData(cssClass, data);
 
                     this.userWallpapers = newUserWallpapers;
                     this.wallpaper = cssClass;

client/components/Reader/SettingsPage/include/ViewTab/Color.inc

@@ -58,7 +58,7 @@
         >
             <template v-slot:selected-item="scope">
                 <div >{{ scope.opt.label }}</div>
-                <div v-show="scope.opt.value" class="q-ml-sm" :class="scope.opt.value" style="width: 50px; height: 30px;"></div>
+                <div v-show="scope.opt.value" class="q-ml-sm" :class="scope.opt.value" style="width: 40px; height: 28px;"></div>
             </template>
 
             <template v-slot:option="scope">
@@ -66,10 +66,10 @@
                     v-bind="scope.itemProps"
                     v-on="scope.itemEvents"
                 >
-                    <q-item-section>
+                    <q-item-section style="min-width: 50px;">
                         <q-item-label v-html="scope.opt.label" />
                     </q-item-section>
-                    <q-item-section v-show="scope.opt.value" :class="scope.opt.value" style="min-width: 70px; min-height: 50px"/>
+                    <q-item-section v-show="scope.opt.value" :class="scope.opt.value" style="min-width: 70px; min-height: 50px;"/>
                 </q-item>
             </template>
         </q-select>

client/components/Reader/share/wallpaperStorage.js

@@ -6,6 +6,13 @@ const wpStore = localForage.createInstance({
 });
 
 class WallpaperStorage {
+    constructor() {
+        this.cachedKeys = [];
+    }
+
+    async init() {
+        this.cachedKeys = await wpStore.keys();
+    }
 
     async getLength() {
         return await wpStore.length();
@@ -13,6 +20,7 @@ class WallpaperStorage {
 
     async setData(key, data) {
         await wpStore.setItem(key, data);
+        this.cachedKeys = await wpStore.keys();
     }
 
     async getData(key) {
@@ -21,6 +29,11 @@ class WallpaperStorage {
 
     async removeData(key) {
         await wpStore.removeItem(key);
+        this.cachedKeys = await wpStore.keys();
+    }
+
+    keyExists(key) {//не асинхронная
+        return this.cachedKeys.includes(key);
     }
 }
 

client/share/utils.js

@@ -13,6 +13,10 @@ export function sleep(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
 
+export function toHex(buf) {
+    return Buffer.from(buf).toString('hex');
+}
+
 export function stringToHex(str) {
     return Buffer.from(str).toString('hex');
 }