Add button to update movie informations

lib/librarix/application.rb

@@ -62,6 +62,16 @@ module Librarix
       redirect to('/')
     end
 
+    post '/update' do
+      movie = Librarix::Redis::Movie.new(params[:id]).update
+
+      if request.xhr?
+        slim :'partials/movie', layout: false, locals: {movie: movie}
+      else
+        redirect to('/')
+      end
+    end
+
     post '/remove' do
       Librarix::Redis::Movie.new(params[:id]).remove
 

lib/librarix/public/application.js

@@ -8,42 +8,75 @@ function request(method, url, data, loadevent) {
   req.send(data)
 }
 
-function initButtons(element) {
-  var buttons = element.querySelectorAll('button[data-action=remove-movie]');
-  for (var i = 0; i < buttons.length; i++) {
-    buttons[i].addEventListener('click', function(event) {
-      event.preventDefault();
-      removeMovie(this.previousElementSibling.value)
-    });
-  }
-
-  var view_buttons = element.querySelectorAll('button[data-action=view-movie]');
-  for (var i = 0; i < view_buttons.length; i++) {
-    view_buttons[i].addEventListener('click', function(event) {
-      event.preventDefault();
-      viewMovie(this.previousElementSibling.value)
-    });
+function init() {
+  var movies = document.querySelectorAll('.movie');
+  for (var i = 0; i < movies.length; i++) {
+    new Movie(movies[i].dataset.id);
   }
 }
 
-function removeMovie(id) {
+var Movie = function(id) {
+  this.id = parseInt(id);
+  this.element = document.querySelector('.movie[data-id="'+id+'"]');
+
+  var remove_button = this.element.querySelector('button[data-action="remove-movie"]');
+  var update_button = this.element.querySelector('button[data-action="update-movie"]');
+  var view_button = this.element.querySelector('button[data-action="view-movie"]');
+
+  if (remove_button) {
+    remove_button.addEventListener('click', function(e) {
+      e.preventDefault();
+      this.remove();
+    }.bind(this));
+  }
+
+  if (update_button) {
+    update_button.addEventListener('click', function(e) {
+      e.preventDefault();
+      this.update();
+    }.bind(this));
+  }
+
+  if (view_button) {
+    view_button.addEventListener('click', function(e) {
+      e.preventDefault();
+      this.view();
+    }.bind(this));
+  }
+
+  this.formData = function() {
     var data = new FormData();
-  data.append('id', id);
+    data.append('id', this.id);
 
-  request('POST', '/remove', data, function(e) {
-    document.querySelector('.movie[data-id="' + id + '"]').parentNode.remove();
-  });
+    return data;
   }
 
-function viewMovie(id) {
-  var data = new FormData();
-  data.append('id', id);
+  this.update = function() {
+    request('POST', '/update', this.formData(), function(e) {
+      oldelem = this.element;
 
-  request('POST', '/view', data, function(e) {
-    document.querySelector('.movie[data-id="' + id + '"] button[data-action="view-movie"]').parentNode.remove();
-  });
-}
+      tmp_elem = document.createElement('div');
+      tmp_elem.innerHTML = e.target.response;
+
+      this.element = tmp_elem.firstChild;
+
+      oldelem.parentNode.replaceChild(this.element, oldelem);
+    }.bind(this));
+  };
+
+  this.remove = function() {
+    request('POST', '/remove', this.formData(), function(e) {
+      this.element.parentNode.remove();
+    }.bind(this));
+  };
+
+  this.view = function() {
+    request('POST', '/view', this.formData(), function(e) {
+      this.element.querySelector('button[data-action="view-movie"]').parentNode.remove();
+    }.bind(this));
+  };
+};
 
 document.addEventListener('DOMContentLoaded', function(event) {
-  initButtons(document);
+  init();
 });

lib/librarix/views/partials/movie/default.slim

@@ -15,6 +15,9 @@
       form method="post" action="/view"
         input type="hidden" name="id" value="#{movie.id}"
         button type="submit" data-action="view-movie" View
+    form method="post" action="/update"
+      input type="hidden" name="id" value="#{movie.id}"
+      button type="submit" data-action="update-movie" Update
     form method="post" action="/remove"
       input type="hidden" name="id" value="#{movie.id}"
       button type="submit" data-action="remove-movie" Remove