liberama/client/components/Reader/SettingsPage/SettingsPage.vue

<template lang="includer">
    <Window ref="window" height="95%" width="600px" @close="close">
        <template slot="header">
            Настройки
        </template>

        <q-color v-show="false" ref="defPalette"/>

        <div class="col row">
            <div class="full-height">
                <q-tabs
                    ref="tabs"
                    class="bg-grey-3 text-black"
                    v-model="selectedTab"
                    left-icon="la la-caret-up"
                    right-icon="la la-caret-down"
                    active-color="white"
                    active-bg-color="primary"
                    indicator-color="black"
                    vertical
                    no-caps
                    stretch
                    inline-label
                >
                    <div v-show="tabsScrollable" class="q-pt-lg"/>
                    <q-tab class="tab" name="profiles" icon="la la-users" label="Профили" />
                    <q-tab class="tab" name="view" icon="la la-eye" label="Вид" />
                    <q-tab class="tab" name="buttons" icon="la la-grip-horizontal" label="Кнопки" />
                    <q-tab class="tab" name="keys" icon="la la-gamepad" label="Управление" />
                    <q-tab class="tab" name="pagemove" icon="la la-school" label="Листание" />
                    <q-tab class="tab" name="others" icon="la la-list-ul" label="Прочее" />
                    <q-tab class="tab" name="reset" icon="la la-broom" label="Сброс" />
                    <div v-show="tabsScrollable" class="q-pt-lg"/>
                </q-tabs>
            </div>

            <div class="col fit">
                <!-- Профили --------------------------------------------------------------------->
                <div v-if="selectedTab == 'profiles'" class="fit tab-panel">
                    @@include('./include/ProfilesTab.inc');
                </div>

                <!-- Вид ------------------------------------------------------------------------->                    
                <div v-if="selectedTab == 'view'" class="fit tab-panel">
                    @@include('./include/ViewTab.inc');
                </div>
            </div>

        </div>
    </Window>
</template>

<script>
/*
            <el-tabs type="border-card" tab-position="left" v-model="selectedTabOld">

                <!-- Вид ------------------------------------------------------------------------->                    
                @@include('./includeOld/ViewTabOld.inc');

                <!-- Кнопки ---------------------------------------------------------------------->
                @@include('./includeOld/ButtonsTabOld.inc');

                <!-- Управление ------------------------------------------------------------------>
                @@include('./includeOld/KeysTabOld.inc');

                <!-- Листание -------------------------------------------------------------------->
                @@include('./includeOld/PageMoveTabOld.inc');
                
                <!-- Прочее ---------------------------------------------------------------------->
                @@include('./includeOld/OthersTabOld.inc');

                <!-- Сброс ----------------------------------------------------------------------->
                @@include('./includeOld/ResetTabOld.inc');

            </el-tabs>
*/
//-----------------------------------------------------------------------------
import Vue from 'vue';
import Component from 'vue-class-component';
import _ from 'lodash';

import * as utils from '../../../share/utils';
import Window from '../../share/Window.vue';
import rstore from '../../../store/modules/reader';

const defPalette = [
  'rgb(255,204,204)', 'rgb(255,230,204)', 'rgb(255,255,204)', 'rgb(204,255,204)', 'rgb(204,255,230)', 'rgb(204,255,255)', 'rgb(204,230,255)', 'rgb(204,204,255)', 'rgb(230,204,255)', 'rgb(255,204,255)',
  'rgb(255,153,153)', 'rgb(255,204,153)', 'rgb(255,255,153)', 'rgb(153,255,153)', 'rgb(153,255,204)', 'rgb(153,255,255)', 'rgb(153,204,255)', 'rgb(153,153,255)', 'rgb(204,153,255)', 'rgb(255,153,255)',
  'rgb(255,102,102)', 'rgb(255,179,102)', 'rgb(255,255,102)', 'rgb(102,255,102)', 'rgb(102,255,179)', 'rgb(102,255,255)', 'rgb(102,179,255)', 'rgb(102,102,255)', 'rgb(179,102,255)', 'rgb(255,102,255)',
  'rgb(255,51,51)', 'rgb(255,153,51)', 'rgb(255,255,51)', 'rgb(51,255,51)', 'rgb(51,255,153)', 'rgb(51,255,255)', 'rgb(51,153,255)', 'rgb(51,51,255)', 'rgb(153,51,255)', 'rgb(255,51,255)',
  'rgb(255,0,0)', 'rgb(255,128,0)', 'rgb(255,255,0)', 'rgb(0,255,0)', 'rgb(0,255,128)', 'rgb(0,255,255)', 'rgb(0,128,255)', 'rgb(0,0,255)', 'rgb(128,0,255)', 'rgb(255,0,255)',
  'rgb(245,0,0)', 'rgb(245,123,0)', 'rgb(245,245,0)', 'rgb(0,245,0)', 'rgb(0,245,123)', 'rgb(0,245,245)', 'rgb(0,123,245)', 'rgb(0,0,245)', 'rgb(123,0,245)', 'rgb(245,0,245)',
  'rgb(214,0,0)', 'rgb(214,108,0)', 'rgb(214,214,0)', 'rgb(0,214,0)', 'rgb(0,214,108)', 'rgb(0,214,214)', 'rgb(0,108,214)', 'rgb(0,0,214)', 'rgb(108,0,214)', 'rgb(214,0,214)',
  'rgb(163,0,0)', 'rgb(163,82,0)', 'rgb(163,163,0)', 'rgb(0,163,0)', 'rgb(0,163,82)', 'rgb(0,163,163)', 'rgb(0,82,163)', 'rgb(0,0,163)', 'rgb(82,0,163)', 'rgb(163,0,163)',
  'rgb(92,0,0)', 'rgb(92,46,0)', 'rgb(92,92,0)', 'rgb(0,92,0)', 'rgb(0,92,46)', 'rgb(0,92,92)', 'rgb(0,46,92)', 'rgb(0,0,92)', 'rgb(46,0,92)', 'rgb(92,0,92)',
  'rgb(255,255,255)', 'rgb(205,205,205)', 'rgb(178,178,178)', 'rgb(153,153,153)', 'rgb(127,127,127)', 'rgb(102,102,102)', 'rgb(76,76,76)', 'rgb(51,51,51)', 'rgb(25,25,25)', 'rgb(0,0,0)'
];

export default @Component({
    components: {
        Window,
    },
    data: function() {
        return Object.assign({}, rstore.settingDefaults);
    },
    watch: {
        settings: function() {
            this.settingsChanged();
        },
        form: function(newValue) {
            if (this.inited)
                this.commit('reader/setSettings', newValue);
        },
        fontBold: function(newValue) {
            this.fontWeight = (newValue ? 'bold' : '');
        },
        fontItalic: function(newValue) {
            this.fontStyle = (newValue ? 'italic' : '');
        },
        vertShift: function(newValue) {
            const font = (this.webFontName ? this.webFontName : this.fontName);
            this.fontShifts = Object.assign({}, this.fontShifts, {[font]: newValue});
            this.fontVertShift = newValue;
        },
        fontName: function(newValue) {
            const font = (this.webFontName ? this.webFontName : newValue);
            this.vertShift = this.fontShifts[font] || 0;
        },
        webFontName: function(newValue) {
            const font = (newValue ? newValue : this.fontName);
            this.vertShift = this.fontShifts[font] || 0;
        },
        wallpaper: function(newValue) {
            if (newValue != '' && this.pageChangeAnimation == 'flip')
                this.pageChangeAnimation = '';
        },
    },
})
class SettingsPage extends Vue {
    selectedTab = 'profiles';
selectedTabOld = null;//todo: remove
    form = {};
    fontBold = false;
    fontItalic = false;
    vertShift = 0;
    tabsScrollable = false;

    webFonts = [];
    fonts = [];

    serverStorageKeyVisible = false;
    toolButtons = [];

    created() {
        this.commit = this.$store.commit;
        this.reader = this.$store.state.reader;

        this.form = {};
        this.toolButtons = rstore.toolButtons;
        this.settingsChanged();
    }

    mounted() {
        this.$watch(
            '$refs.tabs.scrollable',
            (newValue) => {
                this.tabsScrollable = newValue;
            }
        );
    }

    init() {
        this.$refs.window.init();
        this.inited = true;
    }

    settingsChanged() {
        if (_.isEqual(this.form, this.settings))
            return;
        this.form = Object.assign({}, this.settings);
        for (let prop in rstore.settingDefaults) {
            this[prop] = this.form[prop];
            this.$watch(prop, (newValue) => {
                this.form = Object.assign({}, this.form, {[prop]: newValue});
            });
        }

        this.fontBold = (this.fontWeight == 'bold');
        this.fontItalic = (this.fontStyle == 'italic');

        this.fonts = rstore.fonts;
        this.webFonts = rstore.webFonts;
        const font = (this.webFontName ? this.webFontName : this.fontName);
        this.vertShift = this.fontShifts[font] || 0;
    }

    get mode() {
        return this.$store.state.config.mode;
    }

    get settings() {
        return this.$store.state.reader.settings;
    }

    get serverSyncEnabled() {
        return this.$store.state.reader.serverSyncEnabled;
    }

    set serverSyncEnabled(newValue) {
        this.commit('reader/setServerSyncEnabled', newValue);
    }

    get profiles() {
        return this.$store.state.reader.profiles;
    }

    get currentProfileOptions() {
        const profNames = Object.keys(this.profiles)
        profNames.sort();

        let result = [{label: 'Нет', value: ''}];
        profNames.forEach(name => {
            result.push({label: name, value: name});
        });
        return result;
    }

    get wallpaperOptions() {
        let result = [{label: 'Нет', value: ''}];        
        for (let i = 0; i < 10; i++) {
            result.push({label: i, value: `paper${i}`});
        }
        return result;
    }

    get currentProfile() {
        return this.$store.state.reader.currentProfile;
    }

    set currentProfile(newValue) {
        this.commit('reader/setCurrentProfile', newValue);
    }

    get partialStorageKey() {
        return this.serverStorageKey.substr(0, 7) + '***';
    }

    get serverStorageKey() {
        return this.$store.state.reader.serverStorageKey;
    }

    get setStorageKeyLink() {
        return `https://${window.location.host}/#/reader?setStorageAccessKey=${utils.toBase58(this.serverStorageKey)}`;
    }

    get predefineTextColors() {
        return defPalette.concat([
          '#ffffff',
          '#000000',
          '#202020',
          '#323232',
          '#aaaaaa',
          '#00c0c0',
        ]);
    }

    get predefineBackgroundColors() {
        return defPalette.concat([
          '#ffffff',
          '#000000',
          '#202020',
          '#ebe2c9',
          '#cfdc99',
          '#478355',
          '#a6caf0',
          '#909080',
          '#808080',
          '#c8c8c8',
        ]);
    }

    colorPanStyle(type) {
        let result = 'width: 30px; height: 30px; border: 1px solid black; border-radius: 4px;';
        switch (type) {
            case 'text':
                result += `background-color: ${this.textColor};`
                break;
            case 'bg':
                result += `background-color: ${this.backgroundColor};`
                break;
        }
        return result;
    }

    needReload() {
        this.$notify.warning({message: 'Необходимо обновить страницу (F5), чтобы изменения возымели эффект'});
    }

    needTextReload() {
        this.$notify.warning({message: 'Необходимо обновить книгу в обход кэша, чтобы изменения возымели эффект'});
    }

    close() {
        this.$emit('settings-toggle');
    }

    async setDefaults() {
        try {
            if (await this.$confirm('Подтвердите установку настроек по умолчанию:', '', {
                confirmButtonText: 'OK',
                cancelButtonText: 'Отмена',
                customClass: 'prompt-dialog',
                type: 'warning'
            })) {
                this.form = Object.assign({}, rstore.settingDefaults);
                for (let prop in rstore.settingDefaults) {
                    this[prop] = this.form[prop];
                }
            }
        } catch (e) {
            //
        }
    }

    changeShowToolButton(buttonName) {
        this.showToolButton = Object.assign({}, this.showToolButton, {[buttonName]: !this.showToolButton[buttonName]});
    }

    async addProfile() {
        try {
            if (Object.keys(this.profiles).length >= 100) {
                this.$alert('Достигнут предел количества профилей', 'Ошибка');
                return;
            }
            const result = await this.$prompt('Введите произвольное название для профиля устройства:', '', {
                confirmButtonText: 'OK',
                cancelButtonText: 'Отмена',
                inputValidator: (str) => { if (!str) return 'Название не должно быть пустым'; else if (str.length > 50) return 'Слишком длинное название'; else return true; },
                customClass: 'prompt-dialog',
            });
            if (result.value) {
                if (this.profiles[result.value]) {
                    this.$alert('Такой профиль уже существует', 'Ошибка');
                } else {
                    const newProfiles = Object.assign({}, this.profiles, {[result.value]: 1});
                    this.commit('reader/setAllowProfilesSave', true);
                    await this.$nextTick();//ждем обработчики watch
                    this.commit('reader/setProfiles', newProfiles);
                    await this.$nextTick();//ждем обработчики watch
                    this.commit('reader/setAllowProfilesSave', false);
                    this.currentProfile = result.value;
                }
            }
        } catch (e) {
            //
        }
    }

    async delProfile() {
        if (!this.currentProfile)
            return;

        try {
            const result = await this.$prompt(`<b>Предупреждение!</b> Удаление профиля '${this.currentProfile}' необратимо.` +
                    `<br>Все настройки профиля будут потеряны,<br>однако список читаемых книг сохранится.` +
                    `<br><br>Введите 'да' для подтверждения удаления:`, '', {
                dangerouslyUseHTMLString: true,
                confirmButtonText: 'OK',
                cancelButtonText: 'Отмена',
                inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
                customClass: 'prompt-dialog',
                type: 'warning',
            });

            if (result.value && result.value.toLowerCase() == 'да') {
                if (this.profiles[this.currentProfile]) {
                    const newProfiles = Object.assign({}, this.profiles);
                    delete newProfiles[this.currentProfile];
                    this.commit('reader/setAllowProfilesSave', true);
                    await this.$nextTick();//ждем обработчики watch
                    this.commit('reader/setProfiles', newProfiles);
                    await this.$nextTick();//ждем обработчики watch
                    this.commit('reader/setAllowProfilesSave', false);
                    this.currentProfile = '';
                }
            }
        } catch (e) {
            //
        }
    }

    async delAllProfiles() {
        if (!Object.keys(this.profiles).length)
            return;

        try {
            const result = await this.$prompt(`<b>Предупреждение!</b> Удаление ВСЕХ профилей с настройками необратимо.` +
                    `<br><br>Введите 'да' для подтверждения удаления:`, '', {
                dangerouslyUseHTMLString: true,
                confirmButtonText: 'OK',
                cancelButtonText: 'Отмена',
                inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
                customClass: 'prompt-dialog',
                type: 'warning',
            });

            if (result.value && result.value.toLowerCase() == 'да') {
                this.commit('reader/setAllowProfilesSave', true);
                await this.$nextTick();//ждем обработчики watch
                this.commit('reader/setProfiles', {});
                await this.$nextTick();//ждем обработчики watch
                this.commit('reader/setAllowProfilesSave', false);
                this.currentProfile = '';
            }
        } catch (e) {
            //
        }
    }

    async copyToClip(text, prefix) {
        const result = await utils.copyTextToClipboard(text);
        const suf = (prefix.substr(-1) == 'а' ? 'а' : '');
        const msg = (result ? `${prefix} успешно скопирован${suf} в буфер обмена` : 'Копирование не удалось');
        if (result)
            this.$notify.success({message: msg});
        else
            this.$notify.error({message: msg});
    }

    async showServerStorageKey() {
        this.serverStorageKeyVisible = !this.serverStorageKeyVisible;
    }

    async enterServerStorageKey(key) {
        try {
            const result = await this.$prompt(`<b>Предупреждение!</b> Изменение ключа доступа приведет к замене всех профилей и читаемых книг в читалке.` +
                    `<br><br>Введите новый ключ доступа:`, '', {
                dangerouslyUseHTMLString: true,
                confirmButtonText: 'OK',
                cancelButtonText: 'Отмена',
                inputValidator: (str) => { if (str && utils.fromBase58(str).length == 32) return true; else return 'Неверный формат ключа'; },
                inputValue: (key && _.isString(key) ? key : null),
                customClass: 'prompt-dialog',
                type: 'warning',
            });

            if (result.value && utils.fromBase58(result.value).length == 32) {
                this.commit('reader/setServerStorageKey', result.value);
            }
        } catch (e) {
            //
        }
    }

    async generateServerStorageKey() {
        try {
            const result = await this.$prompt(`<b>Предупреждение!</b> Генерация нового ключа доступа приведет к удалению всех профилей и читаемых книг в читалке.` +
                    `<br><br>Введите 'да' для подтверждения генерации нового ключа:`, '', {
                dangerouslyUseHTMLString: true,
                confirmButtonText: 'OK',
                cancelButtonText: 'Отмена',
                inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Генерация не подтверждена'; },
                customClass: 'prompt-dialog',
                type: 'warning',
            });

            if (result.value && result.value.toLowerCase() == 'да') {
                this.$root.$emit('generateNewServerStorageKey');
            }
        } catch (e) {
            //
        }

    }

    keyHook(event) {
        if (event.type == 'keydown' && event.code == 'Escape') {
            this.close();
        }
        return true;
    }
}
//-----------------------------------------------------------------------------
</script>

<style scoped>
.tab {
    justify-content: initial;
}

.tab-panel {
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 90%;
    padding: 0 10px 15px 10px;
}

.part-header {
    border-top: 2px solid #bbbbbb;
    font-weight: bold;
    font-size: 110%;
    margin-top: 15px;
    margin-bottom: 5px;
}

.item {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
}

.label-1 {
    width: 75px;
}

.label-2 {
    width: 100px;
}

.label-1, .label-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
    margin-right: 10px;
    overflow: hidden;
}

.text {
    font-size: 90%;
    line-height: 130%;
}

.button {
    margin: 3px 15px 3px 0;
    padding: 0 5px 0 5px;
}

.copy-icon {
    margin-left: 5px;
    cursor: pointer;
    font-size: 120%;
    color: blue;
}

.input {
    max-width: 150px;
}

.no-mp {
    margin: 0;
    padding: 0;
}

.col-left-2 {
    width: 150px;
}
</style>

<style scoped>
/* TODO: REMOVE */
.el-form {
    border-top: 2px solid #bbbbbb;
    margin-bottom: 5px;
}

.el-form-item {
    padding: 0 !important;
    margin: 0 !important;
    margin-bottom: 5px !important;
}

.color-picked {
    margin-left: 10px;
    position: relative;
    top: -11px;
}

.el-tabs {
    flex: 1;
    display: flex;
}

.el-tab-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 420px;
    overflow-y: auto;
    padding: 15px;
}
</style>

<style>
.prompt-dialog {
    width: 100% !important;
    max-width: 450px;
}
</style>