Implementing new alert dialogs.

static/js/app/campaign_results.js

@@ -83,16 +83,37 @@ function dismiss() {
 
 // Deletes a campaign after prompting the user
 function deleteCampaign() {
-    if (confirm("Are you sure you want to delete: " + campaign.name + "?")) {
+    swal({
+        title: "Are you sure?",
+        text: "This will delete the campaign. This can't be undone!",
+        type: "warning",
+        animation: false,
+        showCancelButton: true,
+        confirmButtonText: "Delete Campaign",
+        confirmButtonColor: "#428bca",
+        reverseButtons: true,
+        allowOutsideClick: false,
+        preConfirm: function() {
+            return new Promise(function(resolve, reject) {
                 api.campaignId.delete(campaign.id)
                     .success(function(msg) {
-                location.href = '/campaigns'
+                        resolve()
+                    })
+                    .error(function(data) {
+                        reject(data.responseJSON.message)
                     })
-            .error(function(e) {
-                $("#modal\\.flashes").empty().append("<div style=\"text-align:center\" class=\"alert alert-danger\">\
-                <i class=\"fa fa-exclamation-circle\"></i> " + data.responseJSON.message + "</div>")
             })
         }
+    }).then(function() {
+        swal(
+            'Campaign Deleted!',
+            'This campaign has been deleted!',
+            'success'
+        );
+        $('button:contains("OK")').on('click', function() {
+            location.href = '/campaigns'
+        })
+    })
 }
 
 // Completes a campaign after prompting the user
@@ -128,17 +149,6 @@ function completeCampaign() {
         $('#complete_button').text('Completed!')
         doPoll = false;
     })
-        /*
-        if (confirm("Are you sure you want to delete: " + campaign.name + "?")) {
-            api.campaignId.delete(campaign.id)
-                .success(function(msg) {
-                    location.href = '/campaigns'
-                })
-                .error(function(e) {
-                    $("#modal\\.flashes").empty().append("<div style=\"text-align:center\" class=\"alert alert-danger\">\
-                    <i class=\"fa fa-exclamation-circle\"></i> " + data.responseJSON.message + "</div>")
-                })
-        }*/
 }
 
 // Exports campaign results as a CSV file

static/js/app/campaigns.js

@@ -9,19 +9,30 @@ var labels = {
 }
 
 var campaigns = []
+var campaign = {}
 
 // Launch attempts to POST to /campaigns/
 function launch() {
-    if (!confirm("This will launch the campaign. Are you sure?")) {
+    swal({
-        return false;
+        title: "Are you sure?",
-    }
+        text: "This will schedule the campaign to be launched.",
+        type: "question",
+        animation: false,
+        showCancelButton: true,
+        confirmButtonText: "Launch",
+        confirmButtonColor: "#428bca",
+        reverseButtons: true,
+        allowOutsideClick: false,
+        showLoaderOnConfirm: true,
+        preConfirm: function() {
+            return new Promise(function(resolve, reject) {
                 groups = []
                 $.each($("#groupTable").DataTable().rows().data(), function(i, group) {
                     groups.push({
                         name: group[0]
                     })
                 })
-    var campaign = {
+                campaign = {
                         name: $("#name").val(),
                         template: {
                             name: $("#template").val()
@@ -36,19 +47,28 @@ function launch() {
                         launch_date: moment($("#launch_date").val(), "MM/DD/YYYY HH:mm").format(),
                         groups: groups
                     }
-    launchHtml = $("launchButton").html()
-    $("launchButton").html('<i class="fa fa-spinner fa-spin"></i> Launching Campaign')
                     // Submit the campaign
                 api.campaigns.post(campaign)
                     .success(function(data) {
-            successFlash("Campaign successfully launched!")
+                        resolve()
-            $("launchButton").html('<i class="fa fa-spinner fa-spin"></i> Redirecting')
+                        campaign = data
-            window.location = "/campaigns/" + data.id.toString()
                     })
                     .error(function(data) {
                         $("#modal\\.flashes").empty().append("<div style=\"text-align:center\" class=\"alert alert-danger\">\
             <i class=\"fa fa-exclamation-circle\"></i> " + data.responseJSON.message + "</div>")
-            $("#launchButton").html(launchHtml)
+                        swal.close()
+                    })
+            })
+        }
+    }).then(function() {
+        swal(
+            'Campaign Scheduled!',
+            'This campaign has been scheduled for launch!',
+            'success'
+        );
+        $('button:contains("OK")').on('click', function() {
+            window.location = "/campaigns/" + campaign.id.toString()
+        })
     })
 }
 
@@ -99,13 +119,37 @@ function dismiss() {
 }
 
 function deleteCampaign(idx) {
-    if (confirm("Delete " + campaigns[idx].name + "?")) {
+    swal({
+        title: "Are you sure?",
+        text: "This will delete the campaign. This can't be undone!",
+        type: "warning",
+        animation: false,
+        showCancelButton: true,
+        confirmButtonText: "Delete " + campaigns[idx].name,
+        confirmButtonColor: "#428bca",
+        reverseButtons: true,
+        allowOutsideClick: false,
+        preConfirm: function() {
+            return new Promise(function(resolve, reject) {
                 api.campaignId.delete(campaigns[idx].id)
-            .success(function(data) {
+                    .success(function(msg) {
-                successFlash(data.message)
+                        resolve()
-                location.reload()
+                    })
+                    .error(function(data) {
+                        reject(data.responseJSON.message)
+                    })
             })
         }
+    }).then(function() {
+        swal(
+            'Campaign Deleted!',
+            'This campaign has been deleted!',
+            'success'
+        );
+        $('button:contains("OK")').on('click', function() {
+            location.reload()
+        })
+    })
 }
 
 function edit(campaign) {

templates/campaigns.html

@@ -158,5 +158,6 @@
 <script src="/js/bootstrap-datetime.js"></script>
 <script src="/js/hogan.js"></script>
 <script src="/js/typeahead.min.js"></script>
+<script src="/js/sweetalert2.min.js"></script>
 <script src="/js/app/campaigns.js"></script>
 {{end}}