Merge pull request #7 from GiorgiB97/calendar

Calendar

bower.json

@@ -24,6 +24,9 @@
     "font-awesome": "fontawesome#^4.7.0",
     "angular-translate-storage-local": "^2.15.1",
     "angular-translate-loader-partial": "^2.15.1",
+    "fullcalendar": "^3.4.0",
+    "angular-file-upload": "^2.5.0",
+    "angular-base64": "^2.0.5"
     "angular-bootstrap-contextmenu": "^0.9.9",
     "ng-tags-input": "3.2.0",
     "angular-aside": "1.2.1",

src/app/index.module.js

@@ -10,6 +10,9 @@
       'app.pages',
 
       'app.dashboard',
+      'app.calendar',
+      'angularFileUpload',
+      'base64'
       'app.fileManager'
     ]);
 

src/app/main/apps/calendar/calendar.controller.js

@@ -0,0 +1,178 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('app.calendar')
+    .controller('CalendarController', CalendarControllerFn);
+
+  /** @ngInject */
+  function CalendarControllerFn($uibModal) {
+    var vm = this;
+
+    // Data
+    vm.availableViews = ["day", "week", "month"];
+    vm.currentView = "month";
+    vm.dragMessage = "";
+
+    vm.events = [
+      {
+        allDay: true,
+        className: ['event_success'],
+        description: "Single day event description",
+        end: "Tue May 02 2017 04:00:00 GMT+0400 (+04)",
+        id: 462399,
+        start: "Mon May 01 2017 04:00:00 GMT+0400 (+04)",
+        title: "Single day event"
+      },
+      {
+        allDay: false,
+        className: ['event_info'],
+        description: "Single day event with custom time description",
+        end: "Tue May 02 2017 20:00:00 GMT+0400 (+04)",
+        id: 180899,
+        start: "Tue May 02 2017 17:00:00 GMT+0400 (+04)",
+        title: "Single day event with custom time"
+      },
+      {
+        allDay: true,
+        className: ['event_danger'],
+        description: "Long event description",
+        end: "Thu May 11 2017 04:00:00 GMT+0400 (+04)",
+        id: 476339,
+        start: "Sun May 07 2017 04:00:00 GMT+0400 (+04)",
+        title: "Long event"
+      },
+      {
+        allDay: false,
+        className: ['event_warning'],
+        description: "Long event with custom time description",
+        end: "Fri May 18 2017 02:00:00 GMT+0400 (+04)",
+        id: 704326,
+        start: "Sun May 14 2017 19:00:00 GMT+0400 (+04)",
+        title: "Long event with custom time"
+      },
+      {
+        allDay: true,
+        className: ['event_pink'],
+        description: "Repeating event description",
+        end: "Sun May 14 2017 04:00:00 GMT+0400 (+04)",
+        id: 778852,
+        start: "Fri May 12 2017 04:00:00 GMT+0400 (+04)",
+        title: "Repeating event"
+      },
+      {
+        allDay: true,
+        className: ['event_pink'],
+        description: "Repeating event description",
+        end: "Sun May 21 2017 04:00:00 GMT+0400 (+04)",
+        id: 778852,
+        start: "Fri May 19 2017 04:00:00 GMT+0400 (+04)",
+        title: "Repeating event"
+      }
+    ];
+
+    // Methods
+    vm.toggleView = toggleView;
+    vm.addNewEvent = addNewEvent;
+    vm.editCurrentEvent = editCurrentEvent;
+    vm.showDragDialog = showDragDialog;
+
+    init();
+
+    ///////////
+
+    function init() {
+      $('.om-calendar').fullCalendar({
+
+        events: vm.events, //Event List
+
+        editable: true, //Allows dragging
+
+        eventLimit: true, //Number of events to show per day (others are collapsed)
+
+        selectable: true, //Allows selecting multiple dates
+
+        select: function (start, end) { //On multiple date select add new event
+          addNewEvent(start, end);
+        },
+
+        eventClick: function(event, element) { //Event editing on click
+          editCurrentEvent(event, element);
+        },
+
+        eventDragStart: function(event, delta){ //Event dragging
+          catchDragStart(event,delta);
+        },
+
+        eventDrop: function (event, delta, revertFunc) { //Event drag finish
+          showDragDialog(event, delta, revertFunc);
+        }
+
+      });
+    }
+
+    function addNewEvent(start, end) {
+      $uibModal.open({
+        templateUrl: 'app/main/apps/calendar/dialogs/event-dialog/event-dialog.html',
+        controller: 'EventDialogController',
+        controllerAs: 'vm',
+        size: 'md',
+        resolve: {
+          Event: {start:start, end:end}
+        }
+      }).result.then(function (EVENT) {
+
+        vm.events.push(EVENT);
+        $('.om-calendar').fullCalendar('renderEvent', EVENT);
+
+      }, function () {
+      });
+    }
+
+    function editCurrentEvent(event, element) {
+      $uibModal.open({
+        templateUrl: 'app/main/apps/calendar/dialogs/event-dialog/event-dialog.html',
+        controller: 'EventDialogController',
+        controllerAs: 'vm',
+        size: 'md',
+        resolve: {
+          Event: event
+        }
+      }).result.then(function (EVENT) {
+
+        event = EVENT;
+        $('.om-calendar').fullCalendar('updateEvent', event);
+
+      }, function () {
+      });
+    }
+
+    function catchDragStart(event, delta) {
+      vm.dragMessage += "Change "+event.title+"'s position from "+event.start.format();
+    }
+    function showDragDialog(event, delta, revertFunc) {
+      console.log(revertFunc);
+      vm.dragMessage += " to " + event.start.format()+" ?";
+      $uibModal.open({
+        templateUrl: 'app/main/apps/calendar/dialogs/drag-dialog/drag-dialog.html',
+        controller: 'DragDialogController',
+        controllerAs: 'vm',
+        size: 'md',
+        resolve: {
+          entry: {text: vm.dragMessage}
+        }
+      }).result.then(function () {
+        vm.dragMessage = "";
+      }, function () {
+        vm.dragMessage = "";
+        revertFunc();
+      });
+    }
+
+    function toggleView(switchTo) {
+      if (switchTo === vm.availableViews[0]) vm.currentView = "day";
+      else if (switchTo === vm.availableViews[1]) vm.currentView = "week";
+      else if (switchTo === vm.availableViews[2]) vm.currentView = "month";
+    }
+  }
+})();

src/app/main/apps/calendar/calendar.html

@@ -0,0 +1,24 @@
+<div id="calendar">
+    <div class="top-menu">
+        <div class="menu-left">
+            <i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;&nbsp;Calendar
+        </div>
+        <div class="menu-right">
+            <div ng-click="vm.toggleView(vm.availableViews[0])">
+                <i class="fa fa-square" aria-hidden="true" uib-tooltip="Day View" tooltip-placement="bottom"></i>
+            </div>
+            <div ng-click="vm.toggleView(vm.availableViews[1])">
+                <i class="fa fa-th-large" aria-hidden="true" uib-tooltip="Week View" tooltip-placement="bottom"></i>
+            </div>
+            <div ng-click="vm.toggleView(vm.availableViews[2])">
+                <i class="fa fa-table" aria-hidden="true" uib-tooltip="Month View" tooltip-placement="bottom"></i>
+            </div>
+        </div>
+    </div>
+
+    <div class="main clearfix">
+        <div class="view">
+                <div class="om-calendar"></div>
+        </div>
+    </div>
+</div>

src/app/main/apps/calendar/calendar.less

@@ -0,0 +1,57 @@
+#calendar {
+  height: 100%;
+  position: relative;
+  .top-menu {
+    height: 100px;
+    width: 100%;
+    padding: 35px;
+    background-color: @brand-primary;
+    .menu {
+      &-left {
+        float: left;
+        color: white;
+        font-size: 20px;
+        i {
+          font-size: 20px;
+          margin: 5px;
+        }
+      }
+      &-right {
+        float: right;
+        user-select: none;
+        input {
+          color: black;
+        }
+        > div {
+          display: inline-block;
+        }
+        i {
+          font-size: 20px;
+          margin: 5px;
+          color: white;
+        }
+      }
+    }
+  }
+  .main {
+    width: 100%;
+    height: calc(%(~"100% - %s", 100px));
+    .view {
+      height: 100%;
+
+
+      .om-calendar{
+        padding:15px 10px;
+        .fc-event-container{
+          .fc-event{
+            height: 30px;
+            line-height: 30px;
+            cursor:pointer;
+          }
+        }
+      }
+
+
+    }
+  }
+}

src/app/main/apps/calendar/calendar.module.js

@@ -0,0 +1,30 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('app.calendar', [])
+    .config(Config);
+
+  /** @ngInject */
+  function Config($stateProvider, lobiNavigationServiceProvider) {
+
+    $stateProvider
+      .state('app.calendar', {
+        url: '/calendar',
+        views: {
+          'content@app': {
+            templateUrl: 'app/main/apps/calendar/calendar.html',
+            controller: 'CalendarController as vm'
+          }
+        },
+        bodyClass: 'app-calendar'
+      })
+    ;
+
+    lobiNavigationServiceProvider.saveItem('app.calendar', {
+      text: 'Calendar',
+      state: 'app.calendar',
+      weight: 1
+    });
+  }
+})();

src/app/main/apps/calendar/data/events.json

@@ -0,0 +1,16 @@
+[
+  {
+    "title": "event1",
+    "start": "2017-05-04"
+  },
+  {
+    "title": "event2",
+    "start": "2017-07-04",
+    "end": "2017-07-04"
+  },
+  {
+    "title: "event3",
+    "start": "2017-01-09T12:30:00",
+    "allDay": false
+  }
+]

src/app/main/apps/calendar/dialogs/drag-dialog/drag-dialog.controller.js

@@ -0,0 +1,28 @@
+/**
+ * Created by george on 5/10/17.
+ */
+(function () {
+  'use strict';
+
+  angular
+    .module('app.calendar')
+    .controller('DragDialogController', DragDialogControllerFn);
+
+  /** @ngInject */
+  function DragDialogControllerFn($uibModalInstance, entry) {
+    var vm = this;
+    // variables
+    vm.text = entry.text;
+    // Methods
+    vm.ok = ok;
+    vm.cancel = cancel;
+
+    function ok() {
+      $uibModalInstance.close();
+    }
+
+    function cancel() {
+      $uibModalInstance.dismiss('cancel');
+    }
+  }
+})();

src/app/main/apps/calendar/dialogs/drag-dialog/drag-dialog.html

@@ -0,0 +1,14 @@
+<div id="drag-dialog">
+    <div class="modal-header">
+        <h3 class="modal-title" id="modal-title">
+            <span>Move Event</span>
+        </h3>
+    </div>
+    <div class="modal-body" id="modal-body">
+        <span ng-bind="vm.text"></span>
+    </div>
+    <div class="modal-footer">
+        <button class="btn btn-primary" type="button" ng-click="vm.ok()">Yes</button>
+        <button class="btn btn-default" type="button" ng-click="vm.cancel()">No</button>
+    </div>
+</div>