From 1736320d812d115a1d84369c2d2f454d269bb166 Mon Sep 17 00:00:00 2001
From: Guillaume Dott <guillaume+github@dott.fr>
Date: Thu, 19 Nov 2015 12:57:05 +0100
Subject: [PATCH] Add button to update movie informations

---
 lib/librarix/application.rb                   | 10 ++
 lib/librarix/public/application.js            | 93 +++++++++++++------
 .../views/partials/movie/default.slim         |  3 +
 3 files changed, 76 insertions(+), 30 deletions(-)

diff --git a/lib/librarix/application.rb b/lib/librarix/application.rb
index 3ab6137..ff2fe7f 100644
--- a/lib/librarix/application.rb
+++ b/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
 
diff --git a/lib/librarix/public/application.js b/lib/librarix/public/application.js
index 90065bf..b575c11 100644
--- a/lib/librarix/public/application.js
+++ b/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 data = new FormData();
-  data.append('id', id);
+var Movie = function(id) {
+  this.id = parseInt(id);
+  this.element = document.querySelector('.movie[data-id="'+id+'"]');
 
-  request('POST', '/remove', data, function(e) {
-    document.querySelector('.movie[data-id="' + id + '"]').parentNode.remove();
-  });
-}
+  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"]');
 
-function viewMovie(id) {
-  var data = new FormData();
-  data.append('id', id);
+  if (remove_button) {
+    remove_button.addEventListener('click', function(e) {
+      e.preventDefault();
+      this.remove();
+    }.bind(this));
+  }
 
-  request('POST', '/view', data, function(e) {
-    document.querySelector('.movie[data-id="' + id + '"] button[data-action="view-movie"]').parentNode.remove();
-  });
-}
+  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', this.id);
+
+    return data;
+  }
+
+  this.update = function() {
+    request('POST', '/update', this.formData(), function(e) {
+      oldelem = this.element;
+
+      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();
 });
diff --git a/lib/librarix/views/partials/movie/default.slim b/lib/librarix/views/partials/movie/default.slim
index e4a0b51..8b5354c 100644
--- a/lib/librarix/views/partials/movie/default.slim
+++ b/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