Added delete buttons for schedule and combo

arthurmcgregor · May 13, 2018 · c1f7219 · c1f7219
1 parent 654a9b5
commit c1f7219
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 13 deletions.
diff --git a/public/javascripts/setupAudio.js b/public/javascripts/setupAudio.js
@@ -9,6 +9,8 @@ var schedule = {
   devices: [],
   audioBaits: [],
   nextcombo:100,
+  comboSelector: ".schedule-combo",
+  soundSelector: ".sound",
 };
 
 window.onload = function() {
@@ -95,14 +97,15 @@ function loadSchedule(result) {
 }
 
 function addNewCombo(comboData = null) {
-  var combo = $("#schedulecomboTemplate .schedulecombo").clone();
+  var combo = $("#schedule-combo-template .schedule-combo").clone();
   if (comboData) {
     util.populateElements(combo, comboData);
   }
   var comboName = "combo" + schedule.nextcombo++;
   util.appendNameTag(combo, comboName);
   combo.find(".add-another-button").attr("onClick", 'addAnotherSound("' + comboName + '");');
   combo.attr("data-id", comboName);
+  combo.find(".delete").click(deleteCombo);
   $('#audio-schedule .combos').append(combo);
 
   if (comboData && comboData.sounds && comboData.sounds.length > 0) {
@@ -116,15 +119,22 @@ function addNewCombo(comboData = null) {
   return combo;
 }
 
+function deleteCombo(element) {
+  $(element.target).closest(".schedule-combo").remove();
+}
+
 // adds the sound but also hides the wait fields.
 function addFirstSound(comboName, combo, data = null) {
   var firstSound = addSound(comboName, combo, data);
   firstSound.find(".wait").addClass('hide');
   firstSound.find(".wait input").attr('value', '0s');
+  firstSound.find(".delete").addClass('hide');
 }
 
 function addSound(comboName, combo, data = null, counter = 0) {
-  var sound =$("#soundTemplate .sound").clone();
+  var sound =$("#sound-template .sound").clone();
+
+  sound.find(".delete").click(deleteSound);
 
   var soundFileSelect = sound.find("select.sound_file")[0];
   for (var i = 0; i < schedule.audioBaits.length; i++) {
@@ -143,10 +153,14 @@ function addSound(comboName, combo, data = null, counter = 0) {
 }
 
 function addAnotherSound (comboName) {
-  var combo = $('.schedulecombo[data-id="' + comboName + '"]');
+  var combo = $('.schedule-combo[data-id="' + comboName + '"]');
   addSound(comboName, combo);
 }
 
+function deleteSound(element) {
+  $(element.target).closest(".sound").remove();
+}
+
 function makeScheduleJson() {
   var schedule = $('form#audio-schedule').serializeJSON();
   schedule = util.combineElementsStartingWith(schedule, "combo");

diff --git a/public/stylesheets/setupAudio.css b/public/stylesheets/setupAudio.css
@@ -25,3 +25,9 @@
   margin: 2px;
 }
 
+img.delete {
+    padding: 0 0 0 3px;
+    margin-top: -5px;
+    max-height: 32px;
+    max-width: 32px;
+}
diff --git a/views/setupAudio.pug b/views/setupAudio.pug
@@ -33,18 +33,19 @@ html
 
         div.schedule-devices.col-xs-12.col-sm-6
           h3.col-xs-10 Devices
-          input.col-xs-2(type="image", title="Add device", src='/images/plus.png'  onclick="" )
+          img.col-xs-2(type="image", title="Add device", src='/images/plus.png')
           label#device-name.col-xs-12 ZIP-01
         div.clearfix
 
+        h3.col-xs-12 Schedule
         .combos
 
-        input.add-another-button.col-xs-12.col-sm-7(type='button', value='Add another combo', onClick="addNewCombo()")
+        input.add-another-button.col-xs-8.col-xs-offset-2.col-sm-4.col-sm-offset-4(type='button', value='Add another combo', onClick="addNewCombo()")
 
-    #schedulecomboTemplate.hide
-      .schedulecombo
-        h3.col-xs-12 Play sound combo
-        .combo-timing.col-xs-12.col-sm-6
+    #schedule-combo-template.hide
+      .schedule-combo
+        img.delete.col-xs-1(type="image", title="Delete combo", src='/images/delete.png')
+        .combo-timing.col-xs-11.col-sm-5
 
           .form-group.row
             label.col-xs-4 Every
@@ -64,14 +65,15 @@ html
           .sounds
 
           .form-group.row.col-xs-4
-            input.add-another-button(type='button', value='Add another sound', onClick="")
+            input.add-another-button(type='button', value='Add another sound')
 
-      #soundTemplate.hide
+      #sound-template.hide
         .sound
           .wait.form-group.row
             label.right.col-xs-4 then wait
-            input.col-xs-6(name="[waits][]", value="10 mins")
+            input.col-xs-7(name="[waits][]", value="10 mins")
           .form-group.row
             label.col-xs-4 play sound
-            select.sound_file.col-xs-6(name="[sounds][]")
+            select.sound_file.col-xs-7(name="[sounds][]")
+            img.delete.col-xs-1(type="image", title="Delete sound", src='/images/delete.png')
           div.clearfix