fchat-rising/chat/SettingsView.vue

<template>
    <modal :action="l('settings.action')" @submit="submit" @open="load()" id="settings" dialogClass="w-100">
        <tabs style="flex-shrink:0;margin-bottom:10px" v-model="selectedTab"
            :tabs="[l('settings.tabs.general'), l('settings.tabs.notifications'), 'F-Chat Rising 🦄', l('settings.tabs.hideAds'), l('settings.tabs.import')]"></tabs>
        <div v-show="selectedTab === '0'">
            <div class="form-group">
                <label class="control-label" for="disallowedTags">{{l('settings.disallowedTags')}}</label>
                <input id="disallowedTags" class="form-control" v-model="disallowedTags"/>
            </div>
            <div class="form-group">
                <label class="control-label" for="clickOpensMessage">
                    <input type="checkbox" id="clickOpensMessage" v-model="clickOpensMessage"/>
                    {{l('settings.clickOpensMessage')}}
                </label>
            </div>
            <div class="form-group">
                <label class="control-label" for="enterSend">
                    <input type="checkbox" id="enterSend" v-model="enterSend"/>
                    {{l('settings.enterSend')}}
                </label>
            </div>
            <div class="form-group">
                <label class="control-label" for="showAvatars">
                    <input type="checkbox" id="showAvatars" v-model="showAvatars"/>
                    {{l('settings.showAvatars')}}
                </label>
            </div>
            <div class="form-group">
                <label class="control-label" for="colorBookmarks">
                    <input type="checkbox" id="colorBookmarks" v-model="colorBookmarks"/>
                    {{l('settings.colorBookmarks')}}
                </label>
            </div>
            <div class="form-group">
                <label class="control-label" for="animatedEicons">
                    <input type="checkbox" id="animatedEicons" v-model="animatedEicons"/>
                    {{l('settings.animatedEicons')}}
                </label>
            </div>
            <div class="form-group">
                <label class="control-label" for="idleTimer">{{l('settings.idleTimer')}}</label>
                <input id="idleTimer" class="form-control" type="number" v-model="idleTimer" min="0" max="1440"/>
            </div>
            <div class="form-group">
                <label class="control-label" for="messageSeparators">
                    <input type="checkbox" id="messageSeparators" v-model="messageSeparators"/>
                    {{l('settings.messageSeparators')}}
                </label>
            </div>
            <div class="form-group">
                <label class="control-label" for="bbCodeBar">
                    <input type="checkbox" id="bbCodeBar" v-model="bbCodeBar"/>
                    {{l('settings.bbCodeBar')}}
                </label>
            </div>
            <div class="form-group">
                <label class="control-label" for="logMessages">
                    <input type="checkbox" id="logMessages" v-model="logMessages"/>
                    {{l('settings.logMessages')}}
                </label>
            </div>
            <div class="form-group">
                <label class="control-label" for="logAds">
                    <input type="checkbox" id="logAds" v-model="logAds"/>
                    {{l('settings.logAds')}}
                </label>
            </div>
            <div class="form-group">
                <label class="control-label" for="fontSize">{{l('settings.fontSize')}}</label>
                <input id="fontSize" type="number" min="10" max="24" class="form-control" v-model="fontSize"/>
            </div>
        </div>
        <div v-show="selectedTab === '1'">
            <div class="form-group">
                <label class="control-label" for="playSound">
                    <input type="checkbox" id="playSound" v-model="playSound"/>
                    {{l('settings.playSound')}}
                </label>
            </div>
            <div class="form-group">
                <label class="control-label" for="alwaysNotify">
                    <input type="checkbox" id="alwaysNotify" v-model="alwaysNotify" :disabled="!playSound"/>
                    {{l('settings.alwaysNotify')}}
                </label>
            </div>
            <div class="form-group">
                <label class="control-label" for="notifications">
                    <input type="checkbox" id="notifications" v-model="notifications"/>
                    {{l('settings.notifications')}}
                </label>
            </div>
            <div class="form-group">
                <label class="control-label" for="highlight">
                    <input type="checkbox" id="highlight" v-model="highlight"/>
                    {{l('settings.highlight')}}
                </label>
            </div>
            <div class="form-group">
                <label class="control-label" for="highlightWords">{{l('settings.highlightWords')}}</label>
                <input id="highlightWords" class="form-control" v-model="highlightWords"/>
            </div>
            <div class="form-group">
                <label class="control-label" for="eventMessages">
                    <input type="checkbox" id="eventMessages" v-model="eventMessages"/>
                    {{l('settings.eventMessages')}}
                </label>
            </div>
            <div class="form-group">
                <label class="control-label" for="joinMessages">
                    <input type="checkbox" id="joinMessages" v-model="joinMessages"/>
                    {{l('settings.joinMessages')}}
                </label>
            </div>
            <div class="form-group">
                <label class="control-label" for="showNeedsReply">
                    <input type="checkbox" id="showNeedsReply" v-model="showNeedsReply"/>
                    {{l('settings.showNeedsReply')}}
                </label>
            </div>
        </div>
        <div v-show="selectedTab === '2'">
            <h5>Matching</h5>

            <div class="form-group">
                <label class="control-label" for="risingAdScore">
                    <input type="checkbox" id="risingAdScore" v-model="risingAdScore"/>
                    Colorize ads, profiles, and names of compatible and incompatible characters
                </label>
            </div>

            <div class="form-group">
                <label class="control-label" for="risingComparisonInUserMenu">
                    <input type="checkbox" id="risingComparisonInUserMenu" v-model="risingComparisonInUserMenu"/>
                    Show quick match results in the right click character menu
                </label>
            </div>

            <div class="form-group">
                <label class="control-label" for="risingComparisonInSearch">
                    <input type="checkbox" id="risingComparisonInSearch" v-model="risingComparisonInSearch"/>
                    Show quick match results in search results
                </label>
            </div>

<!--            <div class="form-group">-->
<!--                <label class="control-label" for="hideProfileComparisonSummary">-->
<!--                    <input type="checkbox" id="hideProfileComparisonSummary" :checked="!hideProfileComparisonSummary" @input="hideProfileComparisonSummary = !$event.target.checked"/>-->
<!--                    Show quick match results at the top of the character profile-->
<!--                </label>-->
<!--            </div>-->


            <h5>Preview</h5>

            <div class="form-group">
                <label class="control-label" for="risingLinkPreview">
                    <input type="checkbox" id="risingLinkPreview" v-model="risingLinkPreview"/>
                    Show a link/image preview when the mouse hovers over a link
                </label>
            </div>

            <div class="form-group">
                <label class="control-label" for="risingCharacterPreview">
                    <input type="checkbox" id="risingCharacterPreview" v-model="risingCharacterPreview"/>
                    Show a character preview when mouse hovers over a character name
                </label>
            </div>


            <h5>Profile</h5>

            <div class="form-group">
                <label class="control-label" for="risingAutoCompareKinks">
                    <input type="checkbox" id="risingAutoCompareKinks" v-model="risingAutoCompareKinks"/>
                    Automatically compare kinks when viewing a character profile
                </label>
            </div>

            <div class="form-group">
                <label class="control-label" for="risingAutoExpandCustomKinks">
                    <input type="checkbox" id="risingAutoExpandCustomKinks" v-model="risingAutoExpandCustomKinks"/>
                    Automatically expand custom kinks
                </label>
            </div>

            <h5>Misc</h5>

            <div class="form-group">
                <label class="control-label" for="risingShowUnreadOfflineCount">
                    <input type="checkbox" id="risingShowUnreadOfflineCount" v-model="risingShowUnreadOfflineCount"/>
                    Show unread note and offline message counts at the bottom right corner
                </label>
            </div>

        </div>
        <div v-show="selectedTab === '3'">
            <template v-if="hidden.length">
                <div v-for="(user, i) in hidden">
                    <span class="fa fa-times" style="cursor:pointer" @click.stop="hidden.splice(i, 1)"></span>
                    {{user}}
                </div>
            </template>
            <template v-else>{{l('settings.hideAds.empty')}}</template>
        </div>
        <div v-show="selectedTab === '4'" style="display:flex;padding-top:10px">
            <select id="import" class="form-control" v-model="importCharacter" style="flex:1;margin-right:10px">
                <option value="">{{l('settings.import.selectCharacter')}}</option>
                <option v-for="character in availableImports" :value="character">{{character}}</option>
            </select>
            <button class="btn btn-secondary" @click="doImport" :disabled="!importCharacter">{{l('settings.import')}}</button>
        </div>
    </modal>
</template>

<script lang="ts">
    import {Component} from '@f-list/vue-ts';
    import CustomDialog from '../components/custom_dialog';
    import Modal from '../components/Modal.vue';
    import Tabs from '../components/tabs';
    import core from './core';
    import {Settings as SettingsInterface} from './interfaces';
    import l from './localize';

    @Component({
        components: {modal: Modal, tabs: Tabs}
    })
    export default class SettingsView extends CustomDialog {
        l = l;
        availableImports: ReadonlyArray<string> = [];
        selectedTab = '0';
        importCharacter = '';
        playSound!: boolean;
        clickOpensMessage!: boolean;
        disallowedTags!: string;
        notifications!: boolean;
        highlight!: boolean;
        highlightWords!: string;
        showAvatars!: boolean;
        animatedEicons!: boolean;
        idleTimer!: string;
        messageSeparators!: boolean;
        eventMessages!: boolean;
        joinMessages!: boolean;
        alwaysNotify!: boolean;
        logMessages!: boolean;
        logAds!: boolean;
        fontSize!: string;
        showNeedsReply!: boolean;
        enterSend!: boolean;
        colorBookmarks!: boolean;
        bbCodeBar!: boolean;

        risingAdScore!: boolean;
        risingLinkPreview!: boolean;
        risingAutoCompareKinks!: boolean;

        risingAutoExpandCustomKinks!: boolean;
        risingCharacterPreview!: boolean;
        risingComparisonInUserMenu!: boolean;
        risingComparisonInSearch!: boolean;

        risingShowUnreadOfflineCount!: boolean;


        async load(): Promise<void> {
            const settings = core.state.settings;
            this.playSound = settings.playSound;
            this.clickOpensMessage = settings.clickOpensMessage;
            this.disallowedTags = settings.disallowedTags.join(',');
            this.notifications = settings.notifications;
            this.highlight = settings.highlight;
            this.highlightWords = settings.highlightWords.join(',');
            this.showAvatars = settings.showAvatars;
            this.animatedEicons = settings.animatedEicons;
            this.idleTimer = settings.idleTimer.toString();
            this.messageSeparators = settings.messageSeparators;
            this.eventMessages = settings.eventMessages;
            this.joinMessages = settings.joinMessages;
            this.alwaysNotify = settings.alwaysNotify;
            this.logMessages = settings.logMessages;
            this.logAds = settings.logAds;
            this.fontSize = settings.fontSize.toString();
            this.showNeedsReply = settings.showNeedsReply;
            this.enterSend = settings.enterSend;
            this.colorBookmarks = settings.colorBookmarks;
            this.bbCodeBar = settings.bbCodeBar;
            this.availableImports = (await core.settingsStore.getAvailableCharacters()).filter((x) => x !== core.connection.character);

            this.risingAdScore = settings.risingAdScore;
            this.risingLinkPreview = settings.risingLinkPreview;
            this.risingAutoCompareKinks = settings.risingAutoCompareKinks;

            this.risingAutoExpandCustomKinks = settings.risingAutoExpandCustomKinks;
            this.risingCharacterPreview = settings.risingCharacterPreview;
            this.risingComparisonInUserMenu = settings.risingComparisonInUserMenu;
            this.risingComparisonInSearch = settings.risingComparisonInSearch;
            this.risingShowUnreadOfflineCount = settings.risingShowUnreadOfflineCount;
        }

        async doImport(): Promise<void> {
            if(!confirm(l('settings.import.confirm', this.importCharacter, core.connection.character))) return;
            const importKey = async(key: keyof SettingsInterface.Keys) => {
                const settings = await core.settingsStore.get(key, this.importCharacter);
                if(settings !== undefined) await core.settingsStore.set(key, settings);
            };
            await importKey('settings');
            await importKey('pinned');
            await importKey('modes');
            await importKey('conversationSettings');
            core.connection.close(false);
        }

        get hidden(): string[] {
            return core.state.hiddenUsers;
        }

        async submit(): Promise<void> {
            const idleTimer = parseInt(this.idleTimer, 10);
            const fontSize = parseFloat(this.fontSize);
            core.state.settings = {
                playSound: this.playSound,
                clickOpensMessage: this.clickOpensMessage,
                disallowedTags: this.disallowedTags.split(',').map((x) => x.trim()).filter((x) => x.length),
                notifications: this.notifications,
                highlight: this.highlight,
                highlightWords: this.highlightWords.split(',').map((x) => x.trim()).filter((x) => x.length),
                showAvatars: this.showAvatars,
                animatedEicons: this.animatedEicons,
                idleTimer: isNaN(idleTimer) ? 0 : idleTimer < 0 ? 0 : idleTimer > 1440 ? 1440 : idleTimer,
                messageSeparators: this.messageSeparators,
                eventMessages: this.eventMessages,
                joinMessages: this.joinMessages,
                alwaysNotify: this.alwaysNotify,
                logMessages: this.logMessages,
                logAds: this.logAds,
                fontSize: isNaN(fontSize) ? 14 : fontSize < 10 ? 10 : fontSize > 24 ? 24 : fontSize,
                showNeedsReply: this.showNeedsReply,
                enterSend: this.enterSend,
                colorBookmarks: this.colorBookmarks,
                bbCodeBar: this.bbCodeBar,

                risingAdScore: this.risingAdScore,
                risingLinkPreview: this.risingLinkPreview,
                risingAutoCompareKinks: this.risingAutoCompareKinks,

                risingAutoExpandCustomKinks: this.risingAutoExpandCustomKinks,
                risingCharacterPreview: this.risingCharacterPreview,
                risingComparisonInUserMenu: this.risingComparisonInUserMenu,
                risingComparisonInSearch: this.risingComparisonInSearch,
                risingShowUnreadOfflineCount: this.risingShowUnreadOfflineCount
            };
            if(this.notifications) await core.notifications.requestPermission();
        }
    }
</script>

<style>
    #settings .form-group {
        margin-left: 0;
        margin-right: 0;
    }
</style>