use delete modal for subscriptions

apps/static/js/home/subscriptions.js

@@ -394,20 +394,59 @@ $(document).on("selectedServerChange", async function() {
 
 // Delete button on the 'edit subscription' modal
 $("#deleteEditSub").on("click", async function() {
-    const subId = $("#subId").val();
+    const subId = parseInt($("#subId").val());
-    await deleteSubscription(subId);
+    const sub = subTable.row(function(idx, data, node) { return data.id === subId }).data();
-    await loadSubscriptions(getCurrentlyActiveServer().guild_id);
+    
     $("#subFormModal").modal("hide");
-    showToast("danger", "Deleted Subscription", "Subscription ID: " + subId);
+
+    await confirmDeleteModal(
+        "Confirm Delete",
+        `Do you wish to permanently delete <b>${sub.name}</b>?`,
+        async () => {
+            await deleteSubscription(subId);
+            await loadSubscriptions(getCurrentlyActiveServer().guild_id);
+            showToast("danger", "Deleted Subscription", "Subscription ID: " + subId);
+        },
+        async () => {
+            $("#subFormModal").modal("show");
+        }
+    );
 });
 
-async function deleteSelectedSubscriptions() {
+function arrayToHtmlList(array, bold=false) {
-    var rows = subTable.rows(".selected").data();
+    $ul = $("<ul>");
-    $.each(rows, async function() {
+
-        await deleteSubscription(this.id);
+    array.forEach(item => {
-        showToast("danger", "Deleted Subscription", "Subscription ID: " + this.id);
+        let $li = $("<li>");
+        $ul.append(bold ? $li.append($("<b>").text(item)) : $li.text(item));
     });
-    await loadSubscriptions(getCurrentlyActiveServer().guild_id);
+
+    return $ul;
+}
+
+
+async function deleteSelectedSubscriptions() {
+    const rows = subTable.rows(".selected").data().toArray();
+    const names = rows.map(row => row.name);
+    const namesString = arrayToHtmlList(names, true).prop("outerHTML");
+
+    await confirmDeleteModal(
+        `Confirm ${names.length > 1 ? "Multiple Deletions" : "Deletion"}`,
+        `Do you wish to permanently delete ${names.length > 1 ? "these" : "this"} <b>${names.length}</b> subscription${names.length > 1 ? "s" : ""}?<br><br>${namesString}`,
+        async () => {
+            rows.forEach(async row => { await deleteSubscription(row.id) });
+
+            showToast(
+                "danger",
+                `Deleted ${names.length} Subscription${names.length > 1 ? "s" : ""}`,
+                `${arrayToHtmlList(names, false).prop("outerHTML")}`,
+                12000
+            )
+
+            await loadSubscriptions(getCurrentlyActiveServer().guild_id);
+        },
+        null
+    )
 }
 
 // #endregion

apps/templates/home/index.html

@@ -45,7 +45,7 @@
                 </div>
 
                 <div class="col-12 m-0">
-                    <div id="serverJoinAlert" class="alert alert-warning alert-dismissable fade show mt-4 d-flex align-items-center" role="alert" style="display: none !important">
+                    <div id="serverJoinAlert" class="alert alert-warning alert-dismissable fade show mt-4 mx-2 d-flex align-items-center" role="alert" style="display: none !important">
                         <i class="bi bi-warning"></i>
                         <span>
                             <strong>Warning:</strong>
@@ -88,6 +88,7 @@
 {% include "home/includes/servermodal.html" %}
 {% include "home/includes/submodal.html" %}
 {% include "home/includes/filtermodal.html" %}
+{% include "home/includes/deletemodal.html" %}
 {% endblock content %}
 
 {% block javascript %}