delete confirmation

app/assets/javascripts/landing.js

@@ -52,6 +52,20 @@
       document.execCommand("copy");
       meetingURL.blur();
     });
+
+    // enable popovers
+    var options = {
+      selector: '.has-popover',
+      html: true,
+      trigger: 'focus',
+      title: function() {
+        return $(".delete-popover-title").html();
+      },
+      content: function() {
+        return $(".delete-popover-body").html();
+      }
+    };
+    $('#recordings').popover(options);
   };
 
   var initIndex = function() {
@@ -141,10 +155,12 @@
               var roomName = getRoomName();
               var published = row.published;
               var eye = getPublishClass(published);
-              return '<button type="button" class="btn btn-default recording-update" data-id="'+data+'" data-room="'+roomName+'" data-published="'+published+'">' +
+              return '<button type="button" class="btn btn-default recording-update" data-published="'+published+'">' +
                 '<i class="fa '+eye+'" aria-hidden="true"></i></button> ' +
-                '<button type="button" class="btn btn-default recording-delete" data-id="'+data+'" data-room="'+roomName+'">' +
+                '<a tabindex="0" role="button" class="btn btn-default has-popover"' +
-                '<i class="fa fa-trash-o" aria-hidden="true"></i></button>';
+                  'data-toggle="popover" data-placement="top">' +
+                    '<i class="fa fa-trash-o" aria-hidden="true"></i>' +
+                '</a>';
             }
             return data;
           }
@@ -154,27 +170,29 @@
 
     $('#recordings').on('click', '.recording-update', function(event) {
       var btn = $(this);
-      var room = btn.data('room');
+      var row = recordingsTable.api().row($(this).closest('tr')).data();
-      var id = btn.data('id');
+      var url = $('.meeting-url').val();
+      var id = row.id;
       var published = btn.data('published');
-      btn.prop("disabled", true);
+      btn.prop('disabled', true);
       $.ajax({
         method: 'PATCH',
-        url: '/rooms/'+room+'/recordings/'+id,
+        url: url+'/recordings/'+id,
         data: {published: (!published).toString()}
       }).done(function(data) {
 
       }).fail(function(data) {
-        btn.prop("disabled", false);
+        btn.prop('disabled', false);
       });
     });
 
     $('#recordings').on('click', '.recording-delete', function(event) {
-      var room = $(this).data('room');
+      var row = recordingsTable.api().row($(this).closest('tr')).data();
-      var id = $(this).data('id');
+      var url = $('.meeting-url').val();
+      var id = row.id;
       $.ajax({
         method: 'DELETE',
-        url: '/rooms/'+room+'/recordings/'+id
+        url: url+'/recordings/'+id
       }).done(function() {
         recordingsTable.api().row("#"+id).remove().draw();
       });

app/views/landing/rooms.html.erb

@@ -50,3 +50,17 @@
     </div>
   </div>
 </div>
+
+<div hidden class="hidden-elements">
+  <div class="delete-popover-title">
+    <%= t('are_you_sure') %>
+  </div>
+  <div class="delete-popover-body">
+    <button type="button" class="btn btn-danger recording-delete">
+      <%= t('yes') %>
+    </button>
+    <button type="button" class="btn btn-default">
+      <%= t('no') %>
+    </button>
+  </div>
+</div>

config/locales/en-us.yml

@@ -21,7 +21,8 @@
 
 en-US:
   actions: Actions
-  are_you: Are you %{name} ?
+  are_you: Are you %{name}?
+  are_you_sure: Are you sure?
   date_recorded: Date Recorded
   duration: Duration
   end: End
@@ -35,6 +36,7 @@ en-US:
   login: login
   logout: logout
   my_room: my room
+  no: No
   oauth_signup: Signup for customized sessions
   past_recordings: Past Recordings
   powered_bigbluebutton: Powered by BigBlueButton
@@ -48,3 +50,4 @@ en-US:
   views: Views
   wait_for_mod_msg: Looks like you're the first one here...
   wait_for_mod_explanation: You will automatically join when the meeting starts
+  yes: Yes