cordis/client/webapp/elements/events-add-server.ts

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

import * as fs from 'fs/promises';

import Elements from '../elements';
import ElementsUtil from './require/elements-util';

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

import IState from './require/elements-state';
import { IAddServerData } from './overlay-add-server';

export default function bindAddServerEvents(state: IState): void {
    const { document, ui } = state;
    $.setDocument(document);

    let choosingFile = false;
    $('#add-server').addEventListener('click', async () => {
        if (choosingFile) return;
        choosingFile = true;

        let result = await electronRemote.dialog.showOpenDialog({
            title: 'Select Server File',
            defaultPath: '.', // TODO: better path name
            properties: [ 'openFile' ],
            filters: [
                { name: 'Cordis Server Files', extensions: [ 'cordis' ] }
            ]
        });

        if (result.canceled) {
            choosingFile = false;
            return;
        }

        let filePath = result.filePaths[0];
        let fileText = (await fs.readFile(filePath)).toString('utf-8'); // TODO: try/catch?

        let addServerData: any | null = null;
        try {
            addServerData = JSON.parse(fileText);
            if (
                typeof addServerData !== 'object' ||
                typeof addServerData?.name !== 'string' ||
                typeof addServerData?.url !== 'string' ||
                typeof addServerData?.cert !== 'string' ||
                typeof addServerData?.token !== 'string' ||
                typeof addServerData?.expires !== 'number' ||
                typeof addServerData?.iconSrc !== 'string'
            ) {
                LOG.debug('bad server data:', { addServerData, fileText })
                throw new Error('bad server data');
            }
            let overlayElement = Elements.createAddServerOverlay(addServerData as IAddServerData);
            document.body.appendChild(overlayElement);
        } catch (e) {
            LOG.error('Unable to parse server data', e);
            let errorOverlayElement = Elements.createErrorMessageOverlay('Unable to parse server file', e.message);
            document.body.appendChild(errorOverlayElement);
        }
        
        choosingFile = false;
    });

    let contextElement = $.create({ class: 'context', content: {
        class: 'info', content: [
            { ns: 'http://www.w3.org/2000/svg', tag: 'svg', width: 10, height: 20, viewBox: '0 0 8 12', content: [
                { ns: 'http://www.w3.org/2000/svg', tag: 'path', fill: 'currentColor', //'fill-rule': 'evenodd', 'clip-rule': 'evenodd',
                    d: 'M 0,6 ' +
                        'L 8,12 ' +
                        'L 8,0 ' +
                        'Z' }
            ] },
            { class: 'content', content: 'Add a Server' }
        ]
    } }) as HTMLElement;
    $('#add-server').addEventListener('mouseenter', () => {
        document.body.appendChild(contextElement);
        ElementsUtil.alignContextElement(contextElement, $('#add-server'), { left: 'right', centerY: 'centerY' })
    });
    $('#add-server').addEventListener('mouseleave', () => {
        if (contextElement.parentElement) {
            contextElement.parentElement.removeChild(contextElement);
        }
    });
}