Refactor Confirmation Dialogs and Event Handling in Dashboard

lib/split/dashboard/public/dashboard.js

@@ -13,11 +13,6 @@ function confirmWinner() {
   return agree ? true : false;
 }
 
-function confirmStep(step) {
-  var agree = confirm(step);
-  return agree ? true : false;
-}
-
 function confirmReopen() {
   var agree = confirm("This will reopen the experiment. Are you sure?");
   return agree ? true : false;
@@ -32,3 +27,26 @@ function confirmDisableCohorting(){
   var agree = confirm("This will disable the cohorting of the experiment. Note: Existing participants will continue to receive their alternative and may continue to convert. Are you sure?");
   return agree ? true : false;
 }
+
+
+document.addEventListener("DOMContentLoaded", function () {
+  const eventHandlers = {
+    "split reopen": confirmReopen,
+    "split enable-cohorting": confirmEnableCohorting,
+    "split disable-cohorting": confirmDisableCohorting,
+    "split reset": confirmReset,
+    "split delete": confirmDelete,
+    "split winner": confirmWinner,
+  };
+
+  Object.keys(eventHandlers).forEach(className => {
+    const selector = `.${className.replace(" ", ".")}`;
+    const elements = document.querySelectorAll(selector);
+
+    if (elements.length > 0) {
+      elements.forEach(element => {
+        element.addEventListener("click", eventHandlers[className]);
+      });
+    }
+  });
+});

lib/split/dashboard/views/_controls.erb

@@ -1,31 +1,31 @@
 <% if experiment.has_winner? %>
-  <form action="<%= url "/reopen?experiment=#{experiment.name}" %>" method='post' onclick="return confirmReopen()">
+  <form action="<%= url "/reopen?experiment=#{experiment.name}" %>" method='post' class="split reopen">
     <input type="submit" value="Reopen Experiment">
   </form>
 <% else %>
   <% if experiment.cohorting_disabled? %>
-    <form action="<%= url "/update_cohorting?experiment=#{experiment.name}" %>" method='post' onclick="return confirmEnableCohorting()">
+    <form action="<%= url "/update_cohorting?experiment=#{experiment.name}" %>" method='post' class="split enable-cohorting">
       <input type="hidden" name="cohorting_action" value="enable">
       <input type="submit" value="Enable Cohorting" class="green">
     </form>
   <% else %>
-    <form action="<%= url "/update_cohorting?experiment=#{experiment.name}" %>" method='post' onclick="return confirmDisableCohorting()">
+    <form action="<%= url "/update_cohorting?experiment=#{experiment.name}" %>" method='post' class="split disable-cohorting">
       <input type="hidden" name="cohorting_action" value="disable">
       <input type="submit" value="Disable Cohorting" class="red">
     </form>
   <% end %>
 <% end %>
 <span class="divider">|</span>
 <% if experiment.start_time %>
-  <form action="<%= url "/reset?experiment=#{experiment.name}" %>" method='post' onclick="return confirmReset()">
+  <form action="<%= url "/reset?experiment=#{experiment.name}" %>" method='post' class="split reset">
     <input type="submit" value="Reset Data">
   </form>
 <% else%>
   <form action="<%= url "/start?experiment=#{experiment.name}" %>" method='post'>
     <input type="submit" value="Start">
   </form>
 <% end %>
-<form action="<%= url "/experiment?experiment=#{experiment.name}" %>" method='post' onclick="return confirmDelete()">
+<form action="<%= url "/experiment?experiment=#{experiment.name}" %>" method='post' class="split delete">
   <input type="hidden" name="_method" value="delete"/>
   <input type="submit" value="Delete" class="red">
 </form>

lib/split/dashboard/views/_experiment.erb

@@ -125,7 +125,7 @@
               Loser
             <% end %>
           <% else %>
-            <form action="<%= url('experiment') + '?experiment=' + experiment.name %>" method='post' onclick="return confirmWinner()">
+            <form action="<%= url('experiment') + '?experiment=' + experiment.name %>" method='post' class="split winner">
               <input type='hidden' name='alternative' value='<%= h alternative.name %>'>
               <input type="submit" value="Use this" class="green">
             </form>