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

<!-- The Modal -->
<div id="myModalSub" class="modal">

    <!-- Modal content -->
    <div class="modal-content-sub">
        <span id="modal-close-sub" class="close">&times;</span>
       <div id="modal-content-sub">Some text in the Modal..</div>
    </div>

</div>

<div id="properties_toc">
    <div id="properties_toc_general" name="properties_toc_item" onclick="SelectTab('general');">General</div>
    <div id="properties_toc_match" name="properties_toc_item" onclick="SelectTab('match');">Title Match</div>
    <!--<div id="properties_toc_manage" name="properties_toc_item" onclick="SelectTab('manage');">Manage</div>-->
</div>
<div id="properties_bodypanel">
    <div id="properties_bodypanel_general" name="properties_tab" style="display: none;">
        <table cellspacing="0" style="width: 100%;">
            <tr>
                <th>Platform</th>
                <td id="rominfo_platform"></td>
            </tr>
            <tr>
                <th>Size</th>
                <td id="rominfo_size"></td>
            </tr>
            <tr>
                <th>ROM Type</th>
                <td id="rominfo_type"></td>
            </tr>
            <tr>
                <th>Media Type</th>
                <td id="rominfo_mediatype"></td>
            </tr>
            <tr>
                <th>Media Label</th>
                <td id="rominfo_medialabel"></td>
            </tr>
            <tr>
                <th>MD5</th>
                <td id="rominfo_md5"></td>
            </tr>
            <tr>
                <th>SHA1</th>
                <td id="rominfo_sha1"></td>
            </tr>
            <tr>
                <th>Signature Matched From</th>
                <td id="rominfo_signaturematch"></td>
            </tr>
            <tr>
                <th>Signature Source Flags</th>
                <td id="rominfo_flags"></td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: right;"><button id="romDelete" class="redbutton">Delete</button></td>
            </tr>
        </table>
    </div>

    <div id="properties_bodypanel_match" name="properties_tab" style="display: none;">
        <table style="width: 100%;">
            <tr>
                <th colspan="2">Fix Match</th>
            </tr>
            <tr>
                <th style="width: 25%;">Platform</th>
                <td style="width: 75%;">
                    <select id="properties_fixplatform" style="width: 100%;"></select>
                </td>
            </tr>
            <tr>
                <th style="width: 25%;">Game</th>
                <td style="width: 75%;"><select id="properties_fixgame" style="width: 100%;"></select></td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: right;"><button id="properties_fixsave" value="Save Match" onclick="SaveFixedGame();">Save Match</button></td>
            </tr>
        </table>
    </div>

    <div id="properties_bodypanel_manage" name="properties_tab" style="display: none;">

    </div>
</div>

<script type="text/javascript">
    document.getElementById('modal-heading').innerHTML = "Properties";

    var gameId = urlParams.get('id');

    var romData;

    function getRomType(typeId) {
        switch (typeId) {

            case 1:
                return "Optical media";
                break;
            case 2:
                return "Magnetic media";
                break;
            case 3:
                return "Individual files";
                break;
            case 4:
                return "Individual pars";
                break;
            case 5:
                return "Tape based media";
                break;
            case 6:
                return "Side of the media";
                break;
            case 0:
            default:
                return "Media type is unknown";
                break;
        }
    }

    ajaxCall('/api/v1/Games/' + gameId + '/roms/' + modalVariables, 'GET', function (result) {
        romData = result;
        document.getElementById('modal-heading').innerHTML = result.name;
        document.getElementById('rominfo_platform').innerHTML = result.platform.name;
        //document.getElementById('rominfo_filename').innerHTML = result.name;
        document.getElementById('rominfo_size').innerHTML = formatBytes(result.size, 2);
        document.getElementById('rominfo_type').innerHTML = getRomType(result.romType);
        document.getElementById('rominfo_mediatype').innerHTML = result.romTypeMedia;
        document.getElementById('rominfo_medialabel').innerHTML = result.mediaLabel;
        document.getElementById('rominfo_md5').innerHTML = result.mD5;
        document.getElementById('rominfo_sha1').innerHTML = result.shA1;
        document.getElementById('rominfo_signaturematch').innerHTML = result.source;
        document.getElementById('rominfo_flags').innerHTML = result.flags;

        document.getElementById('properties_fixplatform').innerHTML = "<option value='" + result.platform.id + "' selected='selected'>" + result.platform.name + "</option>";
        document.getElementById('properties_fixgame').innerHTML = "<option value='" + gameData.id + "' selected='selected'>" + gameData.name + "</option>";
    });

    function SelectTab(TabName) {
        var tabs = document.getElementsByName('properties_tab');
        for (var i = 0; i < tabs.length; i++) {
            if ((tabs[i].id) == ("properties_bodypanel_" + TabName)) {
                tabs[i].style.display = '';
            } else {
                tabs[i].style.display = 'none';
            }
        }

        var tocs = document.getElementsByName('properties_toc_item');
        for (var i = 0; i < tocs.length; i++) {
            if ((tocs[i].id) == ("properties_toc_" + TabName)) {
                tocs[i].className = "properties_toc_item_selected";
            } else {
                tocs[i].className = '';
            }
        }
    }

    $('#properties_fixplatform').select2({
        minimumInputLength: 3,
        ajax: {
            url: '/api/v1/Search/Platform',
            data: function (params) {
                var query = {
                    SearchString: params.term
                }

                // Query parameters will be ?SearchString=[term]
                return query;
            },
            processResults: function (data) {
                var arr = [];

                for (var i = 0; i < data.length; i++) {
                    arr.push({
                        id: data[i].id,
                        text: data[i].name
                    });
                }

                return {
                    results: arr
                };

            }
        }
    });

    $('#properties_fixgame').select2({
        minimumInputLength: 3,
        templateResult: DropDownRenderGameOption,
        ajax: {
            url: '/api/v1/Search/Game',
            data: function (params) {
                fixplatform = $('#properties_fixplatform').select2('data');

                var query = {
                    PlatformId: fixplatform[0].id,
                    SearchString: params.term
                }

                // Query parameters will be ?SearchString=[term]
                return query;
            },
            processResults: function (data) {
                var arr = [];

                for (var i = 0; i < data.length; i++) {
                    arr.push({
                        id: data[i].id,
                        text: data[i].name,
                        cover: data[i].cover
                    });
                }

                return {
                    results: arr
                };
            }
        }
    });

    function DropDownRenderGameOption(state) {
        console.log(JSON.stringify(state));

        if (state.loading) {
            return state;
        }

        var response;

        if (state.cover) {
            response = $(
                '<table class="dropdown-div"><tr><td class="dropdown-cover"><img src="https://images.igdb.com/igdb/image/upload/t_cover_small/' + state.cover.value.imageId + '.jpg" /></td><td class="dropdown-label"><span>' + state.text + '</span></td></tr></table>'
            );
        } else {
            response = $(
                '<table class="dropdown-div"><tr><td class="dropdown-cover"><img src="/images/unknowngame.png" /></td><td class="dropdown-label"><span>' + state.text + '</span></td></tr></table>'
            );
        }
        return response;
    }

    function SaveFixedGame() {
        var fixplatform = $('#properties_fixplatform').select2('data');
        var fixgame = $('#properties_fixgame').select2('data');

        document.getElementById('properties_fixsave').setAttribute("disabled", "disabled");

        ajaxCall('/api/v1/Games/' + gameId + '/roms/' + modalVariables + '?NewPlatformId=' + fixplatform[0].id + '&NewGameId=' + fixgame[0].id, 'PATCH', function (result) {
            window.location.reload();
        });
    }

    var subModalVariables;

    function showSubDialog(dialogPage, variables) {
        // Get the modal
        var submodal = document.getElementById("myModalSub");

        // Get the modal content
        var subModalContent = document.getElementById("modal-content-sub");

        // Get the button that opens the modal
        var subbtn = document.getElementById("romDelete");

        // Get the <span> element that closes the modal
        var subspan = document.getElementById("modal-close-sub");

        // When the user clicks on the button, open the modal 
        submodal.style.display = "block";

        // When the user clicks on <span> (x), close the modal
        subspan.onclick = function () {
            submodal.style.display = "none";
            subModalContent.innerHTML = "";
            subModalVariables = null;
        }

        subModalVariables = modalVariables;

        $('#modal-content-sub').load('/pages/dialogs/' + dialogPage + '.html');
    }

    function closeSubDialog() {
        // Get the modal
        var submodal = document.getElementById("myModalSub");

        // Get the modal content
        var subModalContent = document.getElementById("modal-content-sub");

        submodal.style.display = "none";
        subModalContent.innerHTML = "";
        subModalVariables = null;
    }

    SelectTab('general');

    document.getElementById('romDelete').setAttribute("onclick", "showSubDialog('romdelete', " + modalVariables + ");");
</script>