cordis/client/webapp/elements/overlay-server-settings.ts

import * as electronRemote from '@electron/remote';
const electronConsole = electronRemote.getGlobal('console') as Console;
import Logger from '../../../logger/logger';
const LOG = Logger.create(__filename, electronConsole);

import BaseElements from './require/base-elements';
import ElementsUtil from './require/elements-util';

import Globals from '../globals';

import { $, $$, $$$, $$$$ } from './require/q-module';

import IState from './require/elements-state';
import ClientController from '../client-controller';
import { CacheServerData, ServerMetaData } from '../data-types';

export default function createServerSettingsOverlay(state: IState, server: ClientController, serverMeta: ServerMetaData | CacheServerData): HTMLElement {
    const { document } = state;
    $.setDocument(document);

    let element = BaseElements.createOverlay(document, {
        class: 'content submit-dialog server-settings', content: [
            { class: 'server preview', content: [
                { class: 'icon', content: { tag: 'img', src: './img/loading.svg', alt: 'icon' } },
                { class: 'name', content: serverMeta.name }
            ] },
            { class: 'text-input server-name', placeholder: 'New Server Name',
                contenteditable: 'plaintext-only', content: serverMeta.name },
            { class: 'image-input server-icon', content: [
                { tag: 'label', class: 'image-input-label button', content: [
                    'Select New Icon',
                    { class: 'image-input-upload', tag: 'input', type: 'file', accept: '.png,.jpg,.jpeg', style: 'display: none;' }
                ] }
            ] },
            { class: 'lower', content: [
                { class: 'error' },
                { class: 'buttons', content: [
                    { class: 'button submit', content: 'Save Changes' }
                ] }
            ] }
        ]
    });

    (async () => {
        ($$$(element, '.icon img') as HTMLImageElement).src = await ElementsUtil.getImageBufferFromResourceFailSoftly(server, serverMeta.iconResourceId);
    })();

    let newIconBuff: Buffer | null = null;
    BaseElements.bindImageUploadEvents($$$(element, '.image-input-upload') as HTMLInputElement, {
        maxSize: Globals.MAX_ICON_SIZE,
        acceptedMimeTypes: [ 'image/png', 'image/jpeg', 'image/jpg' ],
        onChangeStart: () => { $$$(element, '.error').innerText = ''; },
        onCleared: () => {},
        onError: async (errMsg) => {
            $$$(element, '.error').innerText = errMsg;
            await ElementsUtil.shakeElement($$$(element, '.image-input-upload.server-icon'), 400);
        },
        onLoaded: (buff, src) => {
            newIconBuff = buff;
            ($$$(element, '.server .icon img') as HTMLImageElement).src = src;
        }
    });

    $$$(element, '.text-input').addEventListener('keydown', (e) => {
        if (e.key == 'Enter') {
            e.preventDefault();
            $$$(element, '.button.submit').click();
        }
    });

    $$$(element, '.text-input').addEventListener('input', () => {
        $$$(element, '.server.preview .name').innerText = $$$(element, '.text-input').innerText;
    });

    let submitting = false;
    $$$(element, '.button.submit').addEventListener('click', async () => {
        if (submitting) return;
        submitting = true;
        $$$(element, '.error').innerText = '';
        $$$(element, '.button.submit').innerText = 'Saving...';

        let newName = $$$(element, '.text-input').innerText;

        if (newName == serverMeta.name && newIconBuff == null) {
            // nothing changed, close the dialog
            element.removeSelf();
            return;
        }

        let success = false;
        if (newName != serverMeta.name && newName.length == 0) {
            LOG.warn('attempted to set empty server name');
            $$$(element, '.button.submit').innerText = 'Try Again';
            $$$(element, '.error').innerText = 'New name is empty';
            await ElementsUtil.shakeElement($$$(element, '.button.submit'), 400);
        } else if (newName != serverMeta.name && newName.length > Globals.MAX_SERVER_NAME_LENGTH) {
            LOG.warn('attempted to oversized server name');
            $$$(element, '.button.submit').innerText = 'Try Again';
            $$$(element, '.error').innerText = 'New name is too long. ' + newName.length + ' > ' + Globals.MAX_SERVER_NAME_LENGTH;
            await ElementsUtil.shakeElement($$$(element, '.button.submit'), 400);
        } else { // client-size icon size checks are handled above
            let failed = false;
            // Set Name
            if (newName != serverMeta.name) {
                try {
                    await server.setName(newName);
                    serverMeta.name = newName; // prevent resubmit
                } catch (e) {
                    LOG.error('error setting new server name', e);
                    $$$(element, '.button.submit').innerText = 'Try Again';
                    $$$(element, '.error').innerText = 'Error setting new server name';
                    await ElementsUtil.shakeElement($$$(element, '.button.submit'), 400);
                    failed = true;
                }
            }

            // Set Icon
            if (!failed && newIconBuff != null) {
                try {
                    await server.setIcon(newIconBuff);
                    newIconBuff = null; // prevent resubmit
                } catch (e) {
                    LOG.error('error setting new server icon', e);
                    $$$(element, '.button.submit').innerText = 'Try Again';
                    $$$(element, '.error').innerText = 'Error setting new server icon';
                    await ElementsUtil.shakeElement($$$(element, '.button.submit'), 400);
                    failed = true;
                }
            }

            success = !failed;
        }

        $$$(element, '.text-input').setAttribute('contenteditable', 'plaintext-only');
        $$$(element, '.text-input').focus();

        if (success) {
            element.removeSelf();
        }

        submitting = false;
    });

    return element;
}