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 Globals from '../globals';

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

import ClientController from '../client-controller';
import { CacheServerData, ServerMetaData } from '../data-types';
import Q from '../q-module';

export default function createServerSettingsOverlay(document: Document, q: Q, server: ClientController, serverMeta: ServerMetaData | CacheServerData): HTMLElement {
	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 () => {
		(q.$$$(element, '.icon img') as HTMLImageElement).src = await ElementsUtil.getImageBufferFromResourceFailSoftly(server, serverMeta.iconResourceId);
	})();

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

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

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

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

		let newName = q.$$$(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');
			q.$$$(element, '.button.submit').innerText = 'Try Again';
			q.$$$(element, '.error').innerText = 'New name is empty';
			await ElementsUtil.shakeElement(q.$$$(element, '.button.submit'), 400);
		} else if (newName != serverMeta.name && newName.length > Globals.MAX_SERVER_NAME_LENGTH) {
			LOG.warn('attempted to oversized server name');
			q.$$$(element, '.button.submit').innerText = 'Try Again';
			q.$$$(element, '.error').innerText = 'New name is too long. ' + newName.length + ' > ' + Globals.MAX_SERVER_NAME_LENGTH;
			await ElementsUtil.shakeElement(q.$$$(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);
					q.$$$(element, '.button.submit').innerText = 'Try Again';
					q.$$$(element, '.error').innerText = 'Error setting new server name';
					await ElementsUtil.shakeElement(q.$$$(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);
					q.$$$(element, '.button.submit').innerText = 'Try Again';
					q.$$$(element, '.error').innerText = 'Error setting new server icon';
					await ElementsUtil.shakeElement(q.$$$(element, '.button.submit'), 400);
					failed = true;
				}
			}

			success = !failed;
		}

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

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

		submitting = false;
	});

	return element;
}