From cc3d48ed0a31030d2a800a219fe361c665551586 Mon Sep 17 00:00:00 2001
From: Seth Call <sethcall@gmail.com>
Date: Tue, 13 May 2014 11:49:43 -0500
Subject: [PATCH] * wip

---
 .../javascripts/gear/step_configure_tracks.js | 55 +++++++++++-----
 .../stylesheets/client/gearWizard.css.scss    | 66 +++++++++++++++----
 2 files changed, 95 insertions(+), 26 deletions(-)

diff --git a/web/app/assets/javascripts/gear/step_configure_tracks.js b/web/app/assets/javascripts/gear/step_configure_tracks.js
index 0351496a1..31a0141a0 100644
--- a/web/app/assets/javascripts/gear/step_configure_tracks.js
+++ b/web/app/assets/javascripts/gear/step_configure_tracks.js
@@ -28,13 +28,11 @@
 
       context._.each(inputChannels, function (inputChannel) {
         if(inputChannel.assignment == ASSIGNMENT.UNASSIGNED) {
-          var $unassigned = $(context._.template($templateAssignablePort.html(), inputChannel, { variable: 'data' }));
-          $unassignedChannelsHolder.append($unassigned);
-          $unassigned.draggable();
-
+          var $channel = $(context._.template($templateAssignablePort.html(), inputChannel, { variable: 'data' }));
+          unassignChannel($channel)
         }
         else {
-          var $assigned = $(context._.template($templateAssignablePort.html(), inputChannel, { variable: 'data' }));
+          var $channel = $(context._.template($templateAssignablePort.html(), inputChannel, { variable: 'data' }));
 
           // find the track this belongs in
 
@@ -46,9 +44,29 @@
             context.JK.alertSupportedNeeded('Unable to find a track for channel with assignment ' + inputChannel.assignment);
             return false;
           }
-          addChannelToTrack($assigned, $track);
-          $assigned.draggable();
+          addChannelToTrack($channel, $track.find('.track-target'));
         }
+
+        $channel.draggable({
+          revert: true,
+          start: function() {
+            var $channel = $(this);
+            var $track = $channel.closest('.track-target');
+            var isUnassigned = $track.length == 0;
+            if(isUnassigned) {
+              $tracksHolder.find('.track-target').addClass('possible-target');
+            }
+            else {
+              $tracksHolder.find('.track-target').addClass('possible-target');
+              $unassignedChannelsHolder.addClass('possible-target');
+            }
+          },
+          stop: function() {
+            $tracksHolder.find('.track-target').removeClass('possible-target');
+            $unassignedChannelsHolder.removeClass('possible-target')
+          }
+        });
+
       })
     }
 
@@ -58,11 +76,17 @@
       loadChannels();
     }
 
-    function removeChannelFromTrack() {
+    function unassignChannel($channel) {
+      var $originallyAssignedTrack = $channel.closest('.track-target');
+      $unassignedChannelsHolder.append($channel);
+      $originallyAssignedTrack.attr('track-count', $originallyAssignedTrack.find('.ftue-input').length)
 
     }
     function addChannelToTrack($channel, $track) {
-      $track.find('.track-target').append($channel);
+      var $originallyAssignedTrack = $channel.closest('.track-target');
+      $track.append($channel);
+      $track.attr('track-count', $track.find('.ftue-input').length);
+      $originallyAssignedTrack.attr('track-count', $originallyAssignedTrack.find('.ftue-input').length)
     }
 
     function initializeUnassignedDroppable() {
@@ -72,7 +96,9 @@
           hoverClass: 'drag-hovering',
           drop: function( event, ui ) {
             console.log("event, ui", event, ui)
-
+            var $channel = ui.draggable;
+            $channel.css('left', '0').css('top', '0');
+            unassignChannel($channel);
           }
       });
     }
@@ -82,16 +108,15 @@
       for(i = 0; i < MAX_TRACKS; i++) {
         var $target = $(context._.template($templateTrackTarget.html(), {num: i }, { variable: 'data' }));
         $tracksHolder.append($target);
-        $target.droppable(
+        $target.find('.track-target').droppable(
           {
             activeClass: 'drag-in-progress',
             hoverClass: 'drag-hovering',
             drop: function( event, ui ) {
-              console.log("event, ui", event, ui)
-
-              var $target = $(this);
+              var $track = $(this);
               var $channel = ui.draggable;
-              addChannelToTrack($channel, $target);
+              $channel.css('left', '0').css('top', '0');
+              addChannelToTrack($channel, $track);
             }
           });
       }
diff --git a/web/app/assets/stylesheets/client/gearWizard.css.scss b/web/app/assets/stylesheets/client/gearWizard.css.scss
index 7c21e27b8..82d262344 100644
--- a/web/app/assets/stylesheets/client/gearWizard.css.scss
+++ b/web/app/assets/stylesheets/client/gearWizard.css.scss
@@ -368,16 +368,22 @@
         width:25%;
       }
 
+      .unassigned-channels {
+        min-height:240px;
+        overflow-y:scroll;
+        //padding-right:18px; // to keep draggables off of scrollbar. maybe necessary
 
-      .ftue-inputport {
-        height: 37px;
+        &.drag-in-progress {
+          overflow-y:visible;
+          overflow-x:visible;
+        }
 
-        .num {
-          float: left;
-          display: inline-block;
-          height: 34px;
-          line-height: 28px;
-          width: 16px;
+        &.possible-target {
+          border: solid 1px white;
+
+          &.drag-hovering {
+            border: solid 1px #ED3618;
+          }
         }
       }
 
@@ -386,14 +392,31 @@
       }
       .track {
 
-      }
+          .track-target {
+            &.possible-target {
+              border-color:white;
+            }
+            &.drag-hovering {
+              border-color:#ED3618;
+            }
+          }
+        }
 
 
       .ftue-input {
         cursor: move;
         padding: 4px;
         border: solid 1px #999;
-        margin-bottom: 6px;
+        margin-bottom: 15px;
+        white-space: nowrap;
+        overflow:hidden;
+        text-align:left;
+        direction:rtl;
+        font-size:12px;
+
+        &.ui-draggable-dragging{
+          margin-bottom:0;
+        }
       }
 
       .track-target {
@@ -402,13 +425,34 @@
         padding: 4px;
         border: solid 1px #999;
         margin-left: 15px;
-        margin-bottom: 6px;
+        margin-bottom: 15px;
         height:20px;
+        overflow:hidden;
+
+        &.drag-in-progress {
+          overflow:visible;
+        }
 
         .ftue-input {
           padding:0;
           border:0;
           margin-bottom:0;
+          &.ui-draggable-dragging {
+            padding:4px;
+            border: solid 1px #999;
+            overflow:visible;
+          }
+        }
+
+        &[track-count="2"]:not(.drag-in-progress) {
+          .ftue-input {
+            width:50%;
+            display:inline-block;
+          }
+          .ftue-input:nth-child(1)::before {
+            content: ' , '
+          }
+        ;
         }
       }
     }