feat: added ROM info modal

gaseous-server/gaseous-server.csproj

@@ -104,6 +104,7 @@
     <Folder Include="Assets\Ratings\GRAC\" />
     <Folder Include="Assets\Ratings\CLASS_IND\" />
     <Folder Include="wwwroot\fonts\" />
+    <Folder Include="wwwroot\pages\dialogs\" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\gaseous-tools\gaseous-tools.csproj">
@@ -125,6 +126,7 @@
     <Content Remove="wwwroot\styles\" />
     <Content Remove="wwwroot\pages\" />
     <Content Remove="wwwroot\fonts\" />
+    <Content Remove="wwwroot\pages\dialogs\" />
   </ItemGroup>
   <ItemGroup>
     <EmbeddedResource Include="Support\PlatformMap.json" Condition="'$(ExcludeConfigFilesFromBuildOutput)'!='true'">

gaseous-server/wwwroot/index.html

@@ -25,7 +25,21 @@
 
     </div>
 
+    <!-- The Modal -->
+    <div id="myModal" class="modal">
+
+        <!-- Modal content -->
+        <div class="modal-content">
+            <span class="close">&times;</span>
+            <div><h1 id="modal-heading">Modal heading</h1></div>
+            <div id="modal-content">Some text in the Modal..</div>
+        </div>
+
+    </div>
+
     <script type="text/javascript">
+        var modalVariables = null;
+
         $(document).ready(function () {
             const urlParams = new URLSearchParams(window.location.search);
             var myParam = urlParams.get('page');

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

@@ -0,0 +1,89 @@
+<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>
+
+<script type="text/javascript">
+    document.getElementById('modal-heading').innerHTML = "ROM/Image Info";
+
+    var gameId = urlParams.get('id');
+
+    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 base 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) {
+        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;
+    });
+</script>

gaseous-server/wwwroot/pages/game.html

@@ -34,7 +34,7 @@
             <p id="gamesummarytext_label_button_contract" class="text_link" style="display: none;" onclick="document.querySelector('#gamesummarytext_label').classList.add('line-clamp-4'); document.querySelector('#gamesummarytext_label_button_expand').setAttribute('style', ''); document.querySelector('#gamesummarytext_label_button_contract').setAttribute('style', 'display: none;');">Read less...</p>
         </div>
         <div id="gamesummaryroms">
-            <h3>ROM's</h3>
+            <h3>ROM's/Images</h3>
         </div>
     </div>
 
@@ -238,7 +238,7 @@
                         formatBytes(result[i].size, 2),
                         result[i].romTypeMedia,
                         result[i].mediaLabel,
-                        '<a href="#" class="romlink">...</a>'
+                        '<span class="romlink" onclick="showDialog(\'rominfo\', ' + result[i].id + ');">...</span>'
                     ];
                     newTable.appendChild(createTableRow(false, newRow, 'romrow', 'romcell'));
                 }

gaseous-server/wwwroot/scripts/main.js

@@ -34,3 +34,40 @@ function formatBytes(bytes, decimals = 2) {
 
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
 }
+
+function showDialog(dialogPage, variables) {
+    // Get the modal
+    var modal = document.getElementById("myModal");
+
+    // Get the modal content
+    var modalContent = document.getElementById("modal-content");
+
+    // Get the button that opens the modal
+    var btn = document.getElementById("myBtn");
+
+    // Get the <span> element that closes the modal
+    var span = document.getElementsByClassName("close")[0];
+
+    // When the user clicks on the button, open the modal 
+    modal.style.display = "block";
+
+    // When the user clicks on <span> (x), close the modal
+    span.onclick = function () {
+        modal.style.display = "none";
+        modalContent.innerHTML = "";
+        modalVariables = null;
+    }
+
+    // When the user clicks anywhere outside of the modal, close it
+    window.onclick = function (event) {
+        if (event.target == modal) {
+            modal.style.display = "none";
+            modalContent.innerHTML = "";
+            modalVariables = null;
+        }
+    }
+
+    modalVariables = variables;
+
+    $('#modal-content').load('/pages/dialogs/' + dialogPage + '.html');
+}

gaseous-server/wwwroot/styles/style.css

@@ -22,6 +22,53 @@ h3 {
     border-image: linear-gradient(to right, rgba(255,0,0,1) 0%, rgba(251,255,0,1) 16%, rgba(0,255,250,1) 30%, rgba(0,16,255,1) 46%, rgba(250,0,255,1) 62%, rgba(255,0,0,1) 78%, rgba(255,237,0,1) 90%, rgba(20,255,0,1) 100%) 5;
 }
 
+/* The Modal (background) */
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    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 */
+}
+
+/* Modal Content/Box */
+.modal-content {
+    background-color: #383838;
+    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 */
+}
+#modal-heading {
+    margin-block: 5px;
+    border-bottom-style: solid;
+    /*border-bottom-color: #916b01;*/
+    border-bottom-width: 3px;
+    /*border-image: linear-gradient(to right, blue 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5;*/
+
+    border-image: linear-gradient(to right, rgba(255,0,0,1) 0%, rgba(251,255,0,1) 16%, rgba(0,255,250,1) 30%, rgba(0,16,255,1) 46%, rgba(250,0,255,1) 62%, rgba(255,0,0,1) 78%, rgba(255,237,0,1) 90%, rgba(20,255,0,1) 100%) 5;
+}
+
+/* The Close Button */
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
 #banner_icon {
     background-color: white;
     position: fixed;
@@ -202,6 +249,7 @@ input[id='filter_panel_search'] {
     width: 90%;
     min-width: 911px;
     max-width: 1122px;
+    min-height: 550px;
 
     padding-top: 1px;
     padding-left: 20px;
@@ -351,6 +399,7 @@ iframe {
 
 .romrow:hover {
     background-color: #383838;
+    background: rgba(56, 56, 56, 0.3);
 }
 
 .romcell {