gaseous-server/gaseous-server/wwwroot/pages/dialogs/platformmapedit.html

<div style="position: absolute; top: 60px; left: 10px; right: 10px; bottom: 40px; overflow-x: scroll;">
    <div style="width: 985px;">
        <h3>Title Matching</h3>
        <table style="width: 100%;">
            <tr>
                <td style="width: 25%; vertical-align: top;">
                    <h4>Alternative Names</h4>
                </td>
                <td>
                    <select id="mapping_edit_alternativenames" multiple="multiple" style="width: 100%;"></select>
                </td>
            </tr>
            <tr>
                <td style="width: 25%; vertical-align: top;">
                    <h4>Supported File Extensions</h4>
                </td>
                <td>
                    <select id="mapping_edit_supportedfileextensions" multiple="multiple" style="width: 100%;"></select>
                </td>
            </tr>
        </table>

        <h3>Collections</h3>
        <table style="width: 100%;">
            <tr>
                <td style="width: 25%;">
                    <h4>Standard Directory Naming</h4>
                </td>
                <td style="text-align: right;">
                    <input id="mapping_edit_igdbslug" readonly="readonly" type="text" style="width: 98%;"/>
                </td>
            </tr>
            <tr>
                <td colspan="2"><strong>Note</strong>: Standard directory naming uses the IGDB slug for the platform and is not editable.</td>
            </tr>
            <tr>
                <td>
                    <h4>RetroPie Directory Naming</h4>
                </td>
                <td style="text-align: right;">
                    <input id="mapping_edit_retropie" type="text" style="width: 98%;"/>
                </td>
            </tr>
        </table>

        <h3>Web Emulator</h3>
        <table style="width: 100%;">
            <tr>
                <td style="width: 25%;">
                    <h4>Web Emulator</h4>
                </td>
                <td>
                    <input id="mapping_edit_enablewebemulator" type="checkbox"><label for="mapping_edit_enablewebemulator" style="margin-left: 5px;">Enabled</label>
                </td>
            </tr>
            <tr name="mapping_edit_webemulator">
                <td style="width: 25%;">
                    <h4>Engine</h4>
                </td>
                <td>
                    <select id="mapping_edit_webemulatorengine" data-minimum-results-for-search="Infinity" style="width: 100%;">
                        
                    </select>
                </td>
            </tr>
            <tr name="mapping_edit_webemulator">
                <td style="width: 25%;">
                    <h4>Core</h4>
                </td>
                <td>
                    <select id="mapping_edit_webemulatorcore" data-minimum-results-for-search="Infinity" style="width: 100%;">

                    </select>
                </td>
            </tr>
            <tr name="mapping_edit_webemulator">
                <td style="width: 25%;">
                
                </td>
                <td id="mapping_edit_webemulatorhelp">
                    
                </td>
            </tr>
        </table>

        <h3>BIOS/Firmware</h3>
        <div id="mapping_edit_bios"></div>
    </div>
</div>

<div style="position: absolute; height: 35px; left: 10px; right: 10px; bottom: 0px; text-align: right;">
    <button value="Ok" onclick="SubmitMappingItem();">Ok</button>
</div>



<script type="text/javascript">
    var modalContent = document.getElementsByClassName('modal-content');
    if (!modalContent[0].classList.contains('collections_modal')) {
        modalContent[0].classList.add('collections_modal');
    }

    var availableWebEmulators = [];

    DisplayWebEmulatorContent(false);

    ajaxCall(
        '/api/v1.1/PlatformMaps/' + modalVariables,
        'GET',
        function (result) {
            // set heading
            document.getElementById('modal-heading').innerHTML = result.igdbName;

            // populate page
            $('#mapping_edit_alternativenames').select2 ({
                tags: true,
                tokenSeparators: [',']
            });
            AddTokensFromList('#mapping_edit_alternativenames', result.alternateNames);

            $('#mapping_edit_supportedfileextensions').select2 ({
                tags: true,
                tokenSeparators: [','],
                createTag: function (params) {
                    if (params.term.indexOf('.') === -1) {
                        // Return null to disable tag creation
                        return null;
                    }

                    return {
                        id: params.term.toUpperCase(),
                        text: params.term.toUpperCase()
                    }
                }
            });
            AddTokensFromList('#mapping_edit_supportedfileextensions', result.extensions.supportedFileExtensions);

            document.getElementById('mapping_edit_igdbslug').value = result.igdbSlug;
            document.getElementById('mapping_edit_retropie').value = result.retroPieDirectoryName;

            // set up web emulator drop downs
            $('#mapping_edit_webemulatorengine').select2();
            $('#mapping_edit_webemulatorcore').select2();

            // start populating drop downs
            if (result.webEmulator) {
                if (result.webEmulator.availableWebEmulators) {
                    if (result.webEmulator.availableWebEmulators.length > 0) {
                        availableWebEmulators = result.webEmulator.availableWebEmulators;

                        var offOption = new Option("-", "", false, false);
                        $('#mapping_edit_webemulatorengine').append(offOption).trigger('change');
                        for (var e = 0; e < result.webEmulator.availableWebEmulators.length; e++) {
                            var newOption = new Option(result.webEmulator.availableWebEmulators[e].emulatorType, result.webEmulator.availableWebEmulators[e].emulatorType, false, false);
                            $('#mapping_edit_webemulatorengine').append(newOption).trigger('change');
                        }
                        $('#mapping_edit_webemulatorengine').val(result.webEmulator.type);
                        $('#mapping_edit_webemulatorengine').trigger('change');

                        // select cores
                        RenderWebEmulatorCores(result.webEmulator.core);

                        if (result.webEmulator.type.length > 0) {
                            document.getElementById('mapping_edit_enablewebemulator').checked = true;
                        }
                        
                        DisplayWebEmulatorHelp(result.webEmulator.type);

                        $('#mapping_edit_webemulatorengine').on('change', function(e) {
                            RenderWebEmulatorCores();
                        });
                        if (result.webEmulator.type.length > 0) {
                            DisplayWebEmulatorContent(true);
                        } else {
                            DisplayWebEmulatorContent(false);
                        }
                    } else {
                        // no emulators available
                        DisplayWebEmulatorContent(false);
                    }
                } else {
                    // no emulators available
                    DisplayWebEmulatorContent(false);
                }
            } else {
                // no emulators available
                DisplayWebEmulatorContent(false);
            }

            var biosTableHeaders = [
                        {
                            "name": "filename",
                            "label": "Filename"
                        },
                        {
                            "name": "description",
                            "label": "Description"
                        },
                        {
                            "name": "hash",
                            "label": "MD5 Hash"
                        }
                    ];
            document.getElementById('mapping_edit_bios').appendChild(
                CreateEditableTable(
                    'bios',
                    biosTableHeaders
                )
            );

            LoadEditableTableData('bios', biosTableHeaders, result.bios);
        }
    );

    function RenderWebEmulatorCores(preSelectCore) {
        var selectedEngine = document.getElementById('mapping_edit_webemulatorengine').value;
        console.log("Engine: " + selectedEngine);
        console.log("Preselect: " + preSelectCore);
        console.log(JSON.stringify(availableWebEmulators));
        $('#mapping_edit_webemulatorcore').empty().trigger("change");

        // get cores for currently selected emulator
        if (availableWebEmulators && (selectedEngine != undefined && selectedEngine != "")) {
            if (availableWebEmulators.length > 0) {
                var emuFound = false;
                for (var e = 0; e < availableWebEmulators.length; e++) {
                    if (availableWebEmulators[e].emulatorType == selectedEngine) {
                        emuFound = true;
                        for (var c = 0; c < availableWebEmulators[e].availableWebEmulatorCores.length; c++) {
                            var coreName = availableWebEmulators[e].availableWebEmulatorCores[c].core;
                            if (availableWebEmulators[e].availableWebEmulatorCores[c].alternateCoreName) {
                                coreName += " (Maps to core: " + availableWebEmulators[e].availableWebEmulatorCores[c].alternateCoreName + ")";
                            }
                            if (availableWebEmulators[e].availableWebEmulatorCores[c].default == true) {
                                coreName += " (Default)";
                            }
                            console.log(coreName);

                            var newOption;
                            if (availableWebEmulators[e].availableWebEmulatorCores[c].core == preSelectCore) {
                                newOption = new Option(coreName, availableWebEmulators[e].availableWebEmulatorCores[c].core, true, true);
                            } else {
                                newOption = new Option(coreName, availableWebEmulators[e].availableWebEmulatorCores[c].core, false, false);
                            }
                            $('#mapping_edit_webemulatorcore').append(newOption).trigger('change');
                        }
                    }
                }

                if (emuFound == false) {
                    var newOption = new Option("-", "", true, true);
                    $('#mapping_edit_webemulatorcore').append(newOption).trigger('change');
                }
            } else {
                var newOption = new Option("-", "", true, true);
                $('#mapping_edit_webemulatorcore').append(newOption).trigger('change');
            }
        } else {
            var newOption = new Option("-", "", true, true);
            $('#mapping_edit_webemulatorcore').append(newOption).trigger('change');
        }
    }

    function AddTokensFromList(selectObj, tagList) {
        for (var i = 0; i < tagList.length; i++) {
            var data = {
                id: tagList[i],
                text: tagList[i]
            }

            var newOption = new Option(data.text, data.id, true, true);
            $(selectObj).append(newOption).trigger('change');
        }
    }

    function SubmitMappingItem() {
        var alternateNames = $('#mapping_edit_alternativenames').val();

        var knownExtensions = $('#mapping_edit_supportedfileextensions').val();
        
        var extensions = {
            "IGDBId": modalVariables,
            "supportedFileExtensions": knownExtensions,
            "uniqueFileExtensions": knownExtensions
        };

        var emulator = null;
        if (document.getElementById('mapping_edit_enablewebemulator').checked == true) {
            emulator = {
                "type": document.getElementById('mapping_edit_webemulatorengine').value,
                "core": document.getElementById('mapping_edit_webemulatorcore').value
            };
        }

        var bios = [];
        var biosTable = document.getElementById('EditableTable_bios');
        if (biosTable) {
            // get rows
            for (var i = 0; i < biosTable.childNodes.length; i++) {
                var rowObj = biosTable.childNodes[i];
                var biosObj = {};
                var addBiosObj = false;

                // get cells
                for (var v = 0; v < rowObj.childNodes.length; v++) {
                    var cell = rowObj.childNodes[v];
                    if (cell.tagName.toLowerCase() != 'th') {
                        // get input boxes
                        for (var c = 0; c < cell.childNodes.length; c++) {
                            var element = cell.childNodes[c];
                            if (element) {
                                if (element.getAttribute('data-cell')) {
                                    var nodeName = element.getAttribute('data-cell');
                                    biosObj[nodeName] = element.value;
                                    addBiosObj = true;
                                    
                                    break;
                                }
                            }
                        }
                    }
                }

                if (addBiosObj == true) {
                    bios.push(biosObj);
                }
            }
        }

        var item = {
            "igdbId": Number(modalVariables),
            "igdbName": document.getElementById('modal-heading').innerHTML,
            "igdbSlug": document.getElementById('mapping_edit_igdbslug').value,
            "alternateNames": alternateNames,
            "extensions": extensions,
            "retroPieDirectoryName": document.getElementById('mapping_edit_retropie').value,
            "webEmulator": emulator,
            "bios": bios
        };

        console.log(JSON.stringify(item));

        ajaxCall(
            '/api/v1.1/PlatformMaps/' + modalVariables,
            'PATCH',
            function (result) {
                loadPlatformMapping();
                closeDialog();
            },
            function (error) {
                console.error(JSON.stringify(error));
            },
            JSON.stringify(item)
        );
    }

    $('#mapping_edit_webemulatorengine').on('select2:select', function (e) {
        DisplayWebEmulatorHelp(e.params.data.id);
    });

    function DisplayWebEmulatorHelp(Emulator) {
        var helpCell = document.getElementById('mapping_edit_webemulatorhelp');
        switch (Emulator) {
            case 'EmulatorJS':
                helpCell.innerHTML = '<img src="/images/help.svg" class="banner_button_image banner_button_image_smaller" alt="Help" title="Help" /> See <a href="https://emulatorjs.org/docs4devs/Cores.html" target="_blank" class="romlink">https://emulatorjs.org/docs4devs/Cores.html</a> for more information regarding EmulatorJS cores.';
                break;

            default:
                helpCell.innerHTML = '';
                break;

        }
    }

    $('#mapping_edit_enablewebemulator').change(function() {
        DisplayWebEmulatorContent(this.checked);
    });

    function DisplayWebEmulatorContent(showContent) {
        console.log(showContent);
        var webEmulatorRows = document.getElementsByName('mapping_edit_webemulator');

        for (var i = 0; i < webEmulatorRows.length; i++) {
            if (showContent == true) {
                webEmulatorRows[i].style.display = '';
            } else {
                webEmulatorRows[i].style.display = 'none';
            }
        }
    }
</script>