From 9cb981a2e9f3f49a2cf1e938a0e78036fc4bb1b9 Mon Sep 17 00:00:00 2001
From: Michael Green <84688932+michael-j-green@users.noreply.github.com>
Date: Mon, 10 Jul 2023 16:33:14 +1000
Subject: [PATCH] feat: added ROM game match fixing

---
 .../Controllers/SearchController.cs           |   2 +-
 gaseous-server/wwwroot/index.html             |   2 +
 .../wwwroot/pages/dialogs/rominfo.html        | 249 ++++++++++++++----
 gaseous-server/wwwroot/pages/game.html        |   4 +-
 gaseous-server/wwwroot/styles/style.css       |  91 ++++++-
 gaseous-tools/Common.cs                       |   2 +
 6 files changed, 299 insertions(+), 51 deletions(-)

diff --git a/gaseous-server/Controllers/SearchController.cs b/gaseous-server/Controllers/SearchController.cs
index aff9151..14c46a8 100644
--- a/gaseous-server/Controllers/SearchController.cs
+++ b/gaseous-server/Controllers/SearchController.cs
@@ -54,7 +54,7 @@ namespace gaseous_server.Controllers
         private static async Task<List<Game>> _SearchForGame(long PlatformId, string SearchString)
         {
             string searchBody = "";
-            searchBody += "fields cover,first_release_date,name,platforms,slug; ";
+            searchBody += "fields cover.*,first_release_date,name,platforms,slug; ";
             searchBody += "search \"" + SearchString + "\";";
             searchBody += "where platforms = (" + PlatformId + ");";
 
diff --git a/gaseous-server/wwwroot/index.html b/gaseous-server/wwwroot/index.html
index 3599d04..e99a798 100644
--- a/gaseous-server/wwwroot/index.html
+++ b/gaseous-server/wwwroot/index.html
@@ -5,6 +5,8 @@
     <link type="text/css" rel="stylesheet" href="/styles/style.css" />
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://momentjs.com/downloads/moment.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
     <script src="/scripts/main.js" type="text/javascript"></script>
     <script src="/scripts/filterformating.js" type="text/javascript"></script>
     <script src="/scripts/gamesformating.js" type="text/javascript"></script>
diff --git a/gaseous-server/wwwroot/pages/dialogs/rominfo.html b/gaseous-server/wwwroot/pages/dialogs/rominfo.html
index df3194a..108c54d 100644
--- a/gaseous-server/wwwroot/pages/dialogs/rominfo.html
+++ b/gaseous-server/wwwroot/pages/dialogs/rominfo.html
@@ -1,54 +1,86 @@
-<table cellspacing="0">
-    <tr>
-        <th>Platform</th>
-        <td id="rominfo_platform"></td>
-    </tr>
-    <tr>
-        <th>File name</th>
-        <td id="rominfo_filename"></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>
-</table>
+<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">
+            <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>
+        </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 = "ROM/Image Info";
+    document.getElementById('modal-heading').innerHTML = "Properties";
 
     var gameId = urlParams.get('id');
 
+    var romData;
+
     function getRomType(typeId) {
         switch (typeId) {
-            
+
             case 1:
                 return "Optical media";
                 break;
@@ -62,7 +94,7 @@
                 return "Individual pars";
                 break;
             case 5:
-                return "Tape base media";
+                return "Tape based media";
                 break;
             case 6:
                 return "Side of the media";
@@ -75,8 +107,10 @@
     }
 
     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_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;
@@ -85,5 +119,126 @@
         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>";
     });
-</script>
\ No newline at end of file
+
+    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();
+        });
+    }
+
+    SelectTab('general');
+</script>
diff --git a/gaseous-server/wwwroot/pages/game.html b/gaseous-server/wwwroot/pages/game.html
index 5203aad..80a1851 100644
--- a/gaseous-server/wwwroot/pages/game.html
+++ b/gaseous-server/wwwroot/pages/game.html
@@ -55,6 +55,7 @@
 <script type="text/javascript">
     const urlParams = new URLSearchParams(window.location.search);
     var gameId = urlParams.get('id');
+    var gameData;
     var artworks = null;
     var artworksPosition = 0;
     var artworksTimer = null;
@@ -62,7 +63,8 @@
 
     ajaxCall('/api/v1/Games/' + gameId, 'GET', function (result) {
         // populate games page
-        
+        gameData = result;
+
         // get name
         var gameTitleLabel = document.getElementById('gametitle_label');
         gameTitleLabel.innerHTML = result.name;
diff --git a/gaseous-server/wwwroot/styles/style.css b/gaseous-server/wwwroot/styles/style.css
index 26aa088..44a25ac 100644
--- a/gaseous-server/wwwroot/styles/style.css
+++ b/gaseous-server/wwwroot/styles/style.css
@@ -34,6 +34,10 @@ h3 {
     overflow: auto; /* Enable scroll if needed */
     background-color: rgb(0,0,0); /* Fallback color */
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    filter: drop-shadow(5px 5px 10px #000);
+    -webkit-filter: drop-shadow(5px 5px 10px #000);
 }
 
 /* Modal Content/Box */
@@ -42,7 +46,8 @@ h3 {
     margin: 15% auto; /* 15% from the top and centered */
     padding: 10px;
     border: 1px solid #888;
-    width: 600px; /* Could be more or less, depending on screen size */
+    width: 700px; /* Could be more or less, depending on screen size */
+    min-height: 358px;
 }
 #modal-heading {
     margin-block: 5px;
@@ -116,7 +121,9 @@ h3 {
 }
 
 #banner_header {
-    background-color: #001638;
+    background-color: rgba(0, 22, 56, 0.8);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
     position: fixed;
     top: 0px;
     left: 40px;
@@ -470,4 +477,84 @@ th {
 
 #gamedeveloper_label {
     font-size: 16px;
+}
+
+#properties_toc {
+    float: left;
+    display: block;
+    width: 150px;
+    min-width: 150px;
+}
+
+div[name="properties_toc_item"] {
+    padding: 10px;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: #2b2b2b;
+}
+
+div[name="properties_toc_item"]:hover {
+    background-color: #2b2b2b;
+    cursor: pointer;
+}
+
+.properties_toc_item_selected {
+    background-color: #2b2b2b;
+}
+
+#properties_bodypanel {
+    border-left-width: 1px;
+    border-left-style: solid;
+    border-left-color: #2b2b2b;
+    margin-left: 150px;
+    padding-left: 10px;
+}
+
+.select2-container--open .select2-dropdown--below,
+.select2-container--open .select2-dropdown--above {
+    background: #2b2b2b;
+}
+
+.select2-container--flat .select2-container--focus .select2-selection--multiple {
+    border: 1px solid #2b2b2b;
+}
+
+.dropdown-div {
+    width: 100%;
+}
+
+.dropdown-cover {
+    width: 85px;
+    max-width: 85px;
+}
+
+.dropdown-label {
+    padding-left: 20px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    padding-right: 20px;
+    font-weight: bold;
+    text-align: left;
+}
+
+button {
+    background-color: #888;
+    color: white;
+    border-width: 1px;
+    border-color: #555;
+    border-style: solid;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+button:hover {
+    background-color: #555;
+    cursor: pointer;
+}
+
+button:disabled {
+    background-color: #555;
+    cursor: not-allowed;
 }
\ No newline at end of file
diff --git a/gaseous-tools/Common.cs b/gaseous-tools/Common.cs
index 787aad3..9bae0ab 100644
--- a/gaseous-tools/Common.cs
+++ b/gaseous-tools/Common.cs
@@ -50,6 +50,8 @@ namespace gaseous_tools
                 byte[] sha1HashByte = sha1.ComputeHash(xmlStream);
                 string sha1Hash = BitConverter.ToString(sha1HashByte).Replace("-", "").ToLowerInvariant();
 				_sha1hash = sha1Hash;
+
+				xmlStream.Close();
             }
 
 			string _md5hash = "";