From 04989290119c7e28e6e8d80024558a7bede37e4d Mon Sep 17 00:00:00 2001
From: Pierre-Yves Chibon <pingou@pingoured.fr>
Date: Apr 22 2016 06:22:07 +0000
Subject: Add the logic to move widgets around and save the order when clicking on the button


---

diff --git a/hubs/templates/hubs.html b/hubs/templates/hubs.html
index 39dd5bc..8812893 100644
--- a/hubs/templates/hubs.html
+++ b/hubs/templates/hubs.html
@@ -242,6 +242,40 @@
   url_for('static', filename='bootstrap/js/bootstrap.min.js') }}"></script>
 <script type="text/javascript" src="{{
   url_for('static', filename='js/utils.js') }}"></script>
+
+{% if edit %}
+<script type="text/javascript" src="{{
+  url_for('static', filename='bootstrap/js/Sortable.min.js') }}"></script>
+<script type="text/javascript">
+
+function make_widget_sortable() {
+  var byId = function (id) { return document.getElementById(id); }
+
+  Sortable.create(byId('right_widgets'), {
+    animation: 150,
+    draggable: '.widget',
+    handle: '.panel',
+  });
+
+};
+
+$('#save_edits_btn').click(function() {
+  var _indexes = [];
+  var _widgets = [];
+  $.each($('#right_widgets .widget'), function(i, el) {
+    _indexes.push(i);
+    _widgets.push($(el).attr('id').split('widget-')[1])
+  });
+
+  $.post(
+    '{{ url_for("hub_edit_post", name=hub.name) }}',
+    {'indexes': _indexes, 'widgets': _widgets},
+    setup_widgets(_widgets)
+  );
+});
+</script>
+{% endif %}
+
 <script type="text/javascript">
 function setup_edit_btns() {
   $(".edit_widget").unbind();
@@ -296,6 +330,10 @@ function setup_widgets(widgets) {
     });
     setup_edit_btns();
   });
+
+  {% if edit -%}
+  make_widget_sortable();
+  {%- endif %}
 }
 
 setup_widgets();