From 28c791fd1e8fef8961c401d200f3aef2dc7cdb70 Mon Sep 17 00:00:00 2001
From: Isaac Bythewood <isaac@bythewood.me>
Date: Tue, 12 Mar 2013 06:12:09 +0000
Subject: [PATCH] Pins are now editable

---
 pinry/static/js/pin-form.js | 89 +++++++++++++++++++++++++++----------
 pinry/static/js/pinry.js    | 12 ++++-
 2 files changed, 77 insertions(+), 24 deletions(-)

diff --git a/pinry/static/js/pin-form.js b/pinry/static/js/pin-form.js
index fe98eb8..a184dea 100644
--- a/pinry/static/js/pin-form.js
+++ b/pinry/static/js/pin-form.js
@@ -10,6 +10,7 @@
 
 $(window).load(function() {
     var uploadedImage = false;
+    var editedPin = null;
 
     // Start Helper Functions
     function getFormData() {
@@ -37,7 +38,6 @@ $(window).load(function() {
         if (getFormData().url == "")
             preview.find('.image-wrapper').height(278);
         preview.find('.image-wrapper img').fadeIn(300);
-        console.log(preview.find('.pin').height());
         setTimeout(function() {
             if (preview.find('.pin').height() > 305) {
                 $('#pin-form .modal-body').animate({
@@ -57,12 +57,25 @@ $(window).load(function() {
 
 
     // Start View Functions
-    function createPinForm() {
+    function createPinForm(editPinId) {
         $('body').append(renderTemplate('#pin-form-template', ''));
         var modal = $('#pin-form'),
             formFields = [$('#pin-form-image-url'), $('#pin-form-description'),
             $('#pin-form-tags')],
             pinFromUrl = getUrlParameter('pin-image-url');
+        // If editable grab existing data
+        if (editPinId) {
+            var promise = getPinData(editPinId);
+            promise.success(function(data) {
+                editedPin = data;
+                $('#pin-form-image-url').val(editedPin.image.thumbnail.image);
+                $('#pin-form-image-url').parent().parent().hide();
+                $('#pin-form-image-upload').parent().parent().hide();
+                $('#pin-form-description').val(editedPin.description);
+                $('#pin-form-tags').val(editedPin.tags);
+                createPinPreviewFromForm();
+            });
+        }
         modal.modal('show');
         // Auto update preview on field changes
         var timer;
@@ -117,25 +130,54 @@ $(window).load(function() {
             e.preventDefault();
             $(this).off('click');
             $(this).addClass('disabled');
-            var data = {
-                submitter: '/api/v1/user/'+currentUser.id+'/',
-                description: $('#pin-form-description').val(),
-                tags: cleanTags($('#pin-form-tags').val())
-            };
-            if (uploadedImage) data.image = '/api/v1/image/'+uploadedImage+'/';
-            else data.url = $('#pin-form-image-url').val();
-            var promise = postPinData(data);
-            promise.success(function(pin) {
-                if (pinFromUrl) return window.close();
-                pin.editable = true;
-                pin = renderTemplate('#pins-template', {pins: [pin]});
-                $('#pins').prepend(pin);
-                dismissModal(modal);
-                uploadedImage = false;
-            });
-            promise.error(function() {
-                message('Problem saving image.', 'alert alert-error');
-            });
+            if (editedPin) {
+                var apiUrl = '/api/v1/pin/'+editedPin.id+'/?format=json';
+                var data = {
+                    description: $('#pin-form-description').val(),
+                    tags: cleanTags($('#pin-form-tags').val())
+                }
+                var promise = $.ajax({
+                    type: "put",
+                    url: apiUrl,
+                    contentType: 'application/json',
+                    data: JSON.stringify(data)
+                });
+                promise.success(function(pin) {
+                    pin.editable = true;
+                    var renderedPin = renderTemplate('#pins-template', {
+                        pins: [
+                            pin
+                        ]
+                    });
+                    $('#pins').find('.pin[data-id="'+pin.id+'"]').replaceWith(renderedPin);
+                    tileLayout();
+                    dismissModal(modal);
+                    editedPin = null;
+                });
+                promise.error(function() {
+                    message('Problem updating image.', 'alert alert-error');
+                });
+            } else {
+                var data = {
+                    submitter: '/api/v1/user/'+currentUser.id+'/',
+                    description: $('#pin-form-description').val(),
+                    tags: cleanTags($('#pin-form-tags').val())
+                };
+                if (uploadedImage) data.image = '/api/v1/image/'+uploadedImage+'/';
+                else data.url = $('#pin-form-image-url').val();
+                var promise = postPinData(data);
+                promise.success(function(pin) {
+                    if (pinFromUrl) return window.close();
+                    pin.editable = true;
+                    pin = renderTemplate('#pins-template', {pins: [pin]});
+                    $('#pins').prepend(pin);
+                    dismissModal(modal);
+                    uploadedImage = false;
+                });
+                promise.error(function() {
+                    message('Problem saving image.', 'alert alert-error');
+                });
+            }
         });
         $('#pin-form-close').click(function() {
             if (pinFromUrl) return window.close();
@@ -147,8 +189,9 @@ $(window).load(function() {
 
 
     // Start Init
-    window.pinForm = function() {
-        createPinForm();
+    window.pinForm = function(editPinId) {
+        editPinId = typeof editPinId !== 'undefined' ? editPinId : null;
+        createPinForm(editPinId);
     }
 
     if (getUrlParameter('pin-image-url')) {
diff --git a/pinry/static/js/pinry.js b/pinry/static/js/pinry.js
index b4b23a5..1facf1f 100644
--- a/pinry/static/js/pinry.js
+++ b/pinry/static/js/pinry.js
@@ -13,7 +13,7 @@ $(window).load(function() {
      * was put into a function in order to adjust frequently on screen size 
      * changes.
      */
-    function tileLayout() {
+    window.tileLayout = function() {
         var blockContainer = $('#pins'),
             blocks = blockContainer.children('.pin'),
             blockMargin = 15,
@@ -48,6 +48,16 @@ $(window).load(function() {
             colHeights[sCol] += block.height()+(blockMargin);
         }
 
+        // Edit pin if pencil icon clicked
+        $('.icon-pencil').each(function() {
+            var thisPin = $(this);
+            $(this).off('click');
+            $(this).click(function() {
+                $(this).off('click');
+                pinForm($(this).data('id'));
+            });
+        });
+
         // Delete pin if trash icon clicked
         $('.icon-trash').each(function() {
             var thisPin = $(this);