jungle-server/js/makeConfigurationEditor.js

import { makeConfiguration } from '/configuration.js';

import { getGlobals } from '/globals.js';

import { deepCopyObject } from '/utilities.js';

import { makeFormDiv,
         makeInput,
         makeObjectEditor,
         makeTagsPicker,
         makeDropdown } from '/domUtilities.js';



function makeConfigurationEditor(configuration) {

    const jc = getGlobals().jc;
    
    const div = makeFormDiv(jc.Assets.configuration.color,
                            jc.Assets.configuration.background);

    div.append(makeInput('randomize', undefined, () => {
        set(makeConfiguration());
    }));
    
    const generalDropdown = makeDropdown('general');
    const assetsDropdown = makeDropdown('assets');
    const audioDropdown = makeDropdown('audio');
    const connectorDropdown = makeDropdown('connector');
    const jamulusDropdown = makeDropdown('jamulus');
    const musicDropdown = makeDropdown('music');
    const wheelDropdown = makeDropdown('wheel');
    const wheelWorldDropdown = makeDropdown('wheel world');
    const transformersDropdown = makeDropdown('transformers');

    div.append(generalDropdown.div,
               assetsDropdown.div,
               audioDropdown.div,
               connectorDropdown.div,
               jamulusDropdown.div,
               musicDropdown.div,
               wheelDropdown.div,
               wheelWorldDropdown.div,
               transformersDropdown.div);

    let generalEditor;
    let assetsEditor;
    let audioEditor;
    let connectorEditor;
    let jamulusEditor;
    let musicEditor;
    let wheelEditor;
    let wheelWorldEditor;
    let transformersEditor;
    

    const get = () => {


        configuration.General = generalEditor.get();
        configuration.Assets = assetsEditor.get();
        configuration.Audio = audioEditor.get();
        configuration.Connector = connectorEditor.get();
        configuration.Jamulus = jamulusEditor.get();
        configuration.Music = musicEditor.get();
        configuration.Wheel = wheelEditor.get();
        configuration.WheelWorld = wheelWorldEditor.get();
        configuration.Transformers = transformersEditor.get();
    
        
        return deepCopyObject(configuration);

    };

    const set = newConfiguration => {

        configuration = deepCopyObject(newConfiguration);

        generalDropdown.body.innerHTML = "";
        generalEditor = makeObjectEditor(configuration.General);
        generalDropdown.body.append(generalEditor.div);
        
        assetsDropdown.body.innerHTML = "";
        assetsEditor = makeObjectEditor(configuration.Assets);
        assetsDropdown.body.append(assetsEditor.div);
        
        audioDropdown.body.innerHTML = "";
        audioEditor = makeObjectEditor(configuration.Audio);
        audioDropdown.body.append(audioEditor.div);

        connectorDropdown.body.innerHTML = "";
        connectorEditor = makeObjectEditor(configuration.Connector);
        connectorDropdown.body.append(connectorEditor.div);

        jamulusDropdown.body.innerHTML = "";
        jamulusEditor = makeObjectEditor(configuration.Jamulus);
        jamulusDropdown.body.append(jamulusEditor.div);

        musicDropdown.body.innerHTML = "";
        musicEditor = makeObjectEditor(configuration.Music);
        musicDropdown.body.append(musicEditor.div);

        generalDropdown.body.innerHTML = "";
        generalEditor = makeObjectEditor(configuration.General);
        generalDropdown.body.append(generalEditor.div);

        wheelDropdown.body.innerHTML = "";
        wheelEditor = makeObjectEditor(configuration.Wheel);
        wheelDropdown.body.append(wheelEditor.div);

        wheelWorldDropdown.body.innerHTML = "";
        wheelWorldEditor = makeObjectEditor(configuration.WheelWorld);
        wheelWorldDropdown.body.append(wheelWorldEditor.div);

        transformersDropdown.body.innerHTML = "";
        transformersEditor = makeObjectEditor(configuration.Transformers);
        transformersDropdown.body.append(transformersEditor.div);
        
        generalDropdown.body.innerHTML = "";
        generalEditor = makeObjectEditor(configuration.General);
        generalDropdown.body.append(generalEditor.div);
            

        

    };

    const dispose = () => {


    };

    set(configuration);
    
    return {div, get, set, dispose};
    


}

export { makeConfigurationEditor }