From 6aa62e9e8e8437aaaef217a1bc602086a0a533f7 Mon Sep 17 00:00:00 2001
From: Michael Green <84688932+michael-j-green@users.noreply.github.com>
Date: Tue, 11 Jul 2023 00:39:44 +1000
Subject: [PATCH] feat: added ability to delete a rom

---
 gaseous-server/gaseous-server.csproj          |  2 +-
 .../wwwroot/pages/dialogs/romdelete.html      | 18 ++++++
 .../wwwroot/pages/dialogs/rominfo.html        | 64 +++++++++++++++++--
 gaseous-server/wwwroot/styles/style.css       |  8 +++
 4 files changed, 86 insertions(+), 6 deletions(-)
 create mode 100644 gaseous-server/wwwroot/pages/dialogs/romdelete.html

diff --git a/gaseous-server/gaseous-server.csproj b/gaseous-server/gaseous-server.csproj
index 8cbfa7d..98adb37 100644
--- a/gaseous-server/gaseous-server.csproj
+++ b/gaseous-server/gaseous-server.csproj
@@ -14,7 +14,7 @@
     <DocumentationFile>bin\Debug\net7.0\gaseous-server.xml</DocumentationFile>
   </PropertyGroup>
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="7.0.7" />
+    <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="7.0.8" />
     <PackageReference Include="Swashbuckle.AspNetCore" Version="6.5.0" />
     <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="7.0.7" />
     <PackageReference Include="IGDB" Version="2.3.2" />
diff --git a/gaseous-server/wwwroot/pages/dialogs/romdelete.html b/gaseous-server/wwwroot/pages/dialogs/romdelete.html
new file mode 100644
index 0000000..245de17
--- /dev/null
+++ b/gaseous-server/wwwroot/pages/dialogs/romdelete.html
@@ -0,0 +1,18 @@
+<p>Are you sure you want to delete this ROM?</p>
+<p><strong>Warning:</strong> This cannot be undone!</p>
+<div style="width: 100%; text-align: center;">
+    <div style="display: inline-block; margin-right: 20px;">
+        <button class="redbutton" value="Delete" onclick="deleteRom();">Delete</button>
+    </div>
+    <div style="display: inline-block; margin-left: 20px;">
+        <button value="Cancel" onclick="closeSubDialog();">Cancel</button>
+    </div>
+</div>
+
+<script type="text/javascript">
+    function deleteRom() {
+        ajaxCall('/api/v1/Games/' + gameId + '/roms/' + modalVariables, 'DELETE', function (result) {
+            window.location.reload();
+        });
+    }
+</script>
\ No newline at end of file
diff --git a/gaseous-server/wwwroot/pages/dialogs/rominfo.html b/gaseous-server/wwwroot/pages/dialogs/rominfo.html
index 827cdc5..86dedfc 100644
--- a/gaseous-server/wwwroot/pages/dialogs/rominfo.html
+++ b/gaseous-server/wwwroot/pages/dialogs/rominfo.html
@@ -1,4 +1,15 @@
-<div id="properties_toc">
+<!-- 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>-->
@@ -43,7 +54,7 @@
                 <td id="rominfo_flags"></td>
             </tr>
             <tr>
-                <td colspan="2" style="text-align: right;"><button class="redbutton">Delete</button></td>
+                <td colspan="2" style="text-align: right;"><button id="romDelete" class="redbutton">Delete</button></td>
             </tr>
         </table>
     </div>
@@ -70,12 +81,11 @@
     </div>
 
     <div id="properties_bodypanel_manage" name="properties_tab" style="display: none;">
-        
+
     </div>
 </div>
 
-<script type="text/javascript">
-    document.getElementById('modal-heading').innerHTML = "Properties";
+<script type="text/javascript">document.getElementById('modal-heading').innerHTML = "Properties";
 
     var gameId = urlParams.get('id');
 
@@ -243,5 +253,49 @@
         });
     }
 
+    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>
diff --git a/gaseous-server/wwwroot/styles/style.css b/gaseous-server/wwwroot/styles/style.css
index 9915c52..449efc9 100644
--- a/gaseous-server/wwwroot/styles/style.css
+++ b/gaseous-server/wwwroot/styles/style.css
@@ -49,6 +49,14 @@ h3 {
     width: 700px; /* Could be more or less, depending on screen size */
     min-height: 358px;
 }
+.modal-content-sub {
+    background-color: #383838;
+    margin: 20% auto; /* 20% from the top and centered */
+    padding: 10px;
+    border: 1px solid #888;
+    width: 300px; /* Could be more or less, depending on screen size */
+    min-height: 110px;
+}
 #modal-heading {
     margin-block: 5px;
     border-bottom-style: solid;