Almost done it to the V1

Author: bplouzennec

bower.json

@@ -16,7 +16,7 @@
     "moment": "~2.10.6",
     "animate.css": "~3.4.0",
     "angular": "~1.4.2",
-    "angular-dragdrop": "~1.0.13"
+    "angular-native-dragdrop": "~1.2.0"
   },
   "devDependencies": {
     "angular-mocks": "~1.4.2"

src/app/components/eventList/evenList.directive.js

@@ -1,18 +1,14 @@
 angular.module('schedit').directive('scEventList', function(){
   return {
     templateUrl: 'app/components/eventList/eventList.template.html',
-    scope:{
-      events: '=scEvents'
-    },
+    scope:{},
     bindToController:true,
     controllerAs:'list',
-    controller:function($scope){
+    controller:function($scope, EventHelper){
       var vm = this;
-      $scope.$watch(function(){
-        return vm.events;
-      }, function(){
-        console.log(vm);
-      })
+      vm.events = EventHelper.events;
+      vm.spaceGap = EventHelper.spaceGap;
+      vm.getNbSpaces = EventHelper.getNbSpaces;
     }
   }
 })

src/app/components/eventList/eventList.template.html

@@ -1,8 +1,21 @@
 <div class="panel panel-primary minh" style="border-radius:0px">
   <div class="panel-heading no-radius" style="border-radius:0px">Events</div>
   <div class="panel-body">
-    <div drag="true" ng-model="event" jqyoui-options="{revert:'invalid'}" jqyoui-draggable="{animated:true}" ng-hide="!event.name" ng-repeat="event in list.events" class="panel panel-primary event">
-      <div class="panel-heading no-radius">{{event.name}}</div>
+    <div class="row">
+      <div class="col-xs-12">
+        <input class="form-control" style="margin-bottom:10px;" type="text" ng-model="list.filter" placeholder="Filter by name">
+        <select style="margin-bottom:10px;" type="text" ng-model="list.status">
+          <option value="">All</option>
+          <option value="true">Sheduled</option>
+          <option selected="selected" value="false">Not sheduled</option>
+        </select>
+        <span>Filter by status</span>
+      </div>
+      <div class="col-xs-12">
+        <div  ng-repeat="event in list.events | filter:{name:list.filter, scheduled:list.status}" class="panel event" ng-class="{'panel-primary':!event.scheduled, 'panel-success':event.scheduled}">
+          <div on-drop-success="list.dropSuccess(event)" ui-draggable="true" drag="event" class="panel-heading no-radius">{{list.getNbSpaces(event)*list.spaceGap}}min - {{event.name}}</div>
+        </div>
+      </div>
     </div>
   </div>
 </div>

src/app/components/schedit.directive.js

@@ -7,12 +7,12 @@ angular.module('schedit').directive('scSchedit', function(){
     },
     bindToController:true,
     controllerAs:'schedit',
-    controller:function($scope){
+    controller:function($scope, EventHelper){
       var vm = this;
       $scope.$watch(function(){
         return vm.events;
       }, function(){
-        console.log(vm);
+        EventHelper.events = vm.events;
       })
     }
   }

src/app/components/schedit.template.html

@@ -4,7 +4,7 @@
       <sc-event-list sc-events='schedit.events'></sc-event-list>
     </div>
     <div class="col-xs-8 minh padding-xs">
-      <sc-schedule sc-rooms='schedit.options.rooms' sc-nb-space="schedit.options.nbSpace"></sc-schedule>
+      <sc-schedule sc-rooms='schedit.options.rooms' sc-time="schedit.options.time"></sc-schedule>
     </div>
   </div>
 </div>

src/app/components/schedule/schedule.directive.js

@@ -3,16 +3,75 @@ angular.module('schedit').directive('scSchedule', function(){
     templateUrl: 'app/components/schedule/schedule.template.html',
     scope:{
       rooms: '=scRooms',
-      nbSpace: '=scNbSpace'
+      time: '=scTime'
     },
     bindToController:true,
     controllerAs:'schedule',
-    controller:function($scope){
+    controller:function($scope,EventHelper){
       var vm = this;
-      vm.spaces= [];
-      for(i=0; i<vm.nbSpace; i++){
-        vm.spaces.push({status:'empty'});
+      EventHelper.spaceGap = vm.time.spaceGap;
+
+      var initSchedule = function(){
+        vm.nbSpace = ((24 - vm.time.startHour - (24 - vm.time.endHour))*60) / vm.time.spaceGap;
+        vm.gapPerHour = 60/(vm.time.spaceGap);
+        vm.gaps = []
+        for(var i=0; i<vm.gapPerHour; i++){
+          vm.gaps.push(i*vm.time.spaceGap);
+        }
+        console.log(vm.gaps);
+        for(var j=0; j<vm.rooms.length; j++){
+          var room = vm.rooms[j];
+          room.spaces = [];
+          for(var i=0; i<vm.nbSpace; i++){
+            room.spaces.push({empty:true, canDrop:true});
+          }
+        }
       }
+
+      var canDrop = function(list, index, nbSpace){
+          for(var i=0; i<nbSpace; i++){
+            if(list[index+i]){
+              if(!list[index+i].empty){
+                return false;
+              }
+            }
+          }
+          return true;
+      }
+
+      $scope.$on('ANGULAR_DRAG_START',function(event,originEvent,channel,data){
+        var nbSpace = EventHelper.getNbSpaces(data.data);
+        for(var j=0; j<vm.rooms.length; j++){
+          var room = vm.rooms[j];
+          for(var i=0; i<room.spaces.length; i++){
+            room.spaces[i].canDrop = canDrop(room.spaces, i, nbSpace);
+          }
+        }
+      })
+
+      $scope.$on('ANGULAR_DRAG_END',function(event,originEvent,channel){
+        for(var j=0; j<vm.rooms.length; j++){
+          var room = vm.rooms[j];
+          for(var i=0; i<room.spaces.length; i++){
+            room.spaces[i].canDrop = true;
+          }
+        }
+        $scope.$apply();
+      })
+
+      vm.getNbSpaces = EventHelper.getNbSpaces;
+
+      vm.setEvent = function(list, index, data){
+        var nbSpace = EventHelper.getNbSpaces(data);
+        for(var i=0; i<nbSpace; i++){
+          data.scheduled = true;
+          list[index+i].event = data;
+          list[index+i].empty = false;
+        }
+        EventHelper.updateEvent(data);
+      }
+
+      initSchedule();
     }
   }
 })

src/app/components/schedule/schedule.template.html

@@ -7,17 +7,15 @@
           <div class="panel panel-info minh">
             <div class="panel-heading no-radius">{{room.name}}</div>
             <div class="panel-body margin-left-wider">
-              <div jqyoui-options="{hoverClass:'hover'}" drop="true" jqyoui-droppable ng-model="space" ng-repeat="(index,space) in schedule.spaces">
-                <span ng-switch="index%4" class="hour-helper">
-                  <span ng-switch-when="0" >{{index/4}}h</span>
-                  <span ng-switch-when="1" class="tiny">15</span>
-                  <span ng-switch-when="2" class="tiny">30</span>
-                  <span ng-switch-when="3" class="tiny">45</span>
+              <div ng-class="{danger:!space.canDrop}" ui-on-drop="schedule.setEvent(room.spaces, index ,$data)" drag-hover-class="hover" ng-repeat="(index,space) in room.spaces">
+                <span class="hour-helper">
+                  <span ng-show="index%schedule.gapPerHour === 0">{{schedule.time.startHour + index/schedule.gapPerHour}}h</span>
+                  <span ng-show="$index === index%schedule.gapPerHour && $index !== 0" ng-repeat="gap in schedule.gaps" class="tiny">{{gap}}</span>
                 </span>
-                <span ng-show="space.name">{{space.name | limitTo:10}}...</span>
-                <div ng-show="index%4 !== 0" style="border-bottom:solid 0.5px">
+                <span ng-show="space.event.name">{{space.event.name | limitTo:10}}...</span>
+                <div class="schedule-spacer" ng-show="index%schedule.gapPerHour !== 0" style="border-bottom:solid 0.5px">
                 </div>
-                <div ng-show="index%4 === 0" style="border-bottom:solid 2px">
+                <div class="schedule-spacer" ng-show="index%schedule.gapPerHour === 0" style="border-bottom:solid 2px">
                 </div>
               </div>
             </div>

src/app/core/EventHelper.service.js

@@ -0,0 +1,39 @@
+angular.module('schedit').service('EventHelper', function(){
+
+  var service = {};
+  service.spaceGap = 15;
+  service.spaceMapping = {
+    "Docker Docker Docker":45,
+    "Black Belt Tech":30,
+    "Ecosystem":60,
+    "Pre-Registration, Registration":60,
+    "Registration":45,
+    "Party":30,
+    "Wild Cards":30,
+    "Use Case":15,
+    "break":15,
+    "default":30
+  }
+
+  service.getNbSpaces = function(event){
+    if(service.spaceMapping[event['event_type']]){
+      result = service.spaceMapping[event['event_type']]/service.spaceGap;
+    }else{
+      result = service.spaceMapping["default"]/service.spaceGap;
+    }
+    return result;
+  }
+
+  service.events = {};
+
+  service.updateEvent = function(updatedEvent){
+    angular.forEach(service.events,function(event){
+      if(event.id === updatedEvent.id){
+        event.scheduled = updatedEvent.scheduled;
+      }
+    })
+  }
+
+  return service
+
+})

src/app/index.controller.js

@@ -1,7 +1,10 @@
 angular.module('schedit').controller('IndexController', function($http){
    var vm = this;
 
-   $http.get('app/shedule.json').success(function(data){
+   $http.get('app/schedule.json').success(function(data){
+     angular.forEach(data,function(event){
+       event.scheduled = false;
+     })
      vm.events = data;
    });
 
@@ -25,6 +28,11 @@ angular.module('schedit').controller('IndexController', function($http){
        id:6,
        name:'Atelier2'
      }],
-     nbSpace:96,
+     time:{
+       startDate: "2016-03-23",
+       startHour: 7,
+       endHour: 20,
+       spaceGap: 15 //in minutes
+     }
    }
 })

src/app/index.css

@@ -28,7 +28,7 @@
 .hour-helper{
   position:relative;
   font-size: 0.6em;
-  top:9px;
+  top:-13px;
   left:-16px;
 }
 
@@ -56,3 +56,12 @@
 .hover{
   background-color:#CCC;
 }
+
+.danger{
+  background-color:#FFBDBD;
+}
+
+.schedule-spacer{
+  position:relative;
+  top:-21.6px;
+}

src/app/index.module.js

@@ -2,6 +2,6 @@
   'use strict';
 
   angular
-    .module('schedit', ['ngDragDrop']);
+    .module('schedit', ['ang-drag-drop']);
 
 })();