issues 206 Dashboard

assets/dashboard/Factory.js

@@ -0,0 +1,104 @@
+'use strict';
+
+angular.module('Dashboard')
+
+.factory('SettingFactory', function($http) {
+    var service = {};
+
+    var sync = true;
+
+    var syncCount = 0;
+
+    var url = '/screen/dashboard/widgetsSettings';
+
+    service.get = function () {
+        return $http.post(url);
+    };
+
+    service.Sync = function(data) {
+
+        if(sync === true && syncCount > 0) {
+            sync = false;
+
+            $http.post(url, { 'query' : data })
+                .then(function successCallback(response) {
+                    sync  = true;
+                }, function errorCallback() {
+                    sync  = true;
+                });
+
+        }
+        syncCount++;
+    };
+
+    return service;
+})
+
+.factory('DataFormat', function() {
+    /**
+     * Das Rendern des DataFormat muss in ein WebWoker ausgelagert werden.
+     *
+     */
+    var service = {};
+
+    service.changeResponse = function (data) {
+
+        var dashboard = {
+            id: '1',
+            name: 'Home',
+            widgets: [],
+            active: [],
+            map: {
+                id: 'widget.id',
+                name: 'widget.name',
+                active: 'widget.active',
+                col: 'widget.widgetposition.col',
+                row: 'widget.widgetposition.row',
+                sizeY: 'widget.widgetposition.sizey',
+                sizeX: 'widget.widgetposition.sizex',
+                controller: 'widget.view.controller',
+                url: 'widget.view.url'
+            }
+        };
+
+
+        angular.forEach(data, function(value) {
+            if(value.active === true) {
+                this.active.push(value);
+            }
+
+            this.widgets.push(value);
+
+        }, dashboard);
+
+        return dashboard;
+
+    };
+
+    return service;
+})
+
+.factory('WidgetData', function($http) {
+    var service = {};
+
+    var $widget = {};
+
+    var url = '/screen/dashboard/widgetData';
+
+    service.select = function (data) {
+        return $http.post(url, { 'query' : data });
+    };
+
+    service.update = function (data, $scope, widget) {
+        return $http.post(url, { 'query' : data })
+            .then(function successCallback(response) {
+                angular.extend($scope.form, response);
+                angular.extend(widget, $scope.form);
+            }, function errorCallback() {
+
+            });
+    };
+
+    return service;
+
+});

assets/dashboard/app.js

@@ -0,0 +1,63 @@
+'use strict';
+
+(function() {
+    angular.module('Dashboard', ['gridster', 'ui.bootstrap', 'ngRoute', 'angularjs-dropdown-multiselect'])
+
+        /**
+         *
+         *
+         */
+        .controller('RootCtrl', ['$scope', '$http', 'SettingFactory', 'DataFormat',
+        function($scope, $http, SettingFactory, DataFormat) {
+
+            SettingFactory.get().then(function successCallback(response) {
+                var dashboard = DataFormat.changeResponse(response.data) || {};
+
+                $scope.Mytemplate = '/screen/dashboard/?view=view';
+
+                $scope.widgets = dashboard.active;
+                $scope.allWidgets = response.data;
+                $scope.wigetsMap =  dashboard.map;
+
+
+                $scope.selectSettings = {
+                    displayProp: 'name',
+                    scrollableHeight: '250px',
+                    scrollable: true,
+                    buttonClasses: 'btn btn-entity-select selected',
+                    smartButtonMaxItems: 10,
+                    dynamicTitle: true,
+                    externalIdProp: ''
+                };
+
+                $scope.selectTranslation = {
+                    buttonDefaultText: 'Wähle deine Widgets',
+                    checkAll: 'Alle wählen',
+                    uncheckAll: 'Alle löschen'
+                };
+
+                $scope.dashboard =  {
+                    widgets: dashboard.active
+                };
+
+            }, function errorCallback(response) {
+                // called asynchronously if an error occurs
+                // or server returns response with an error status.
+
+            });
+
+            $scope.$on('someEvent', function() {
+                var event = {};
+
+                for(var i=0;i<$scope.widgets.length;i++){
+                    $scope.widgets[i].active = true;
+                    event[$scope.widgets[i].id] = angular.copy($scope.widgets[i]);
+                    event[$scope.widgets[i].id].active = true;
+                    event[$scope.widgets[i].id].data = [];
+                }
+                SettingFactory.Sync(event);
+            });
+        }
+    ]);
+
+})();

assets/dashboard/dashboard.js

@@ -0,0 +1,92 @@
+'use strict';
+
+angular.module('Dashboard')
+
+.controller('DashboardCtrl', ['$scope', '$timeout',
+	function($scope) {
+		$scope.gridsterOptions = {
+			margins: [10, 10],
+			columns: 4,
+			rowHeight: 'match',
+			draggable: {
+				enabled: false,
+				handle: 'h3',
+				stop: function() {
+					$scope.$emit('someEvent', {
+						massage: 'Grister',
+						data: $scope.widgets
+					});
+				}
+			},
+			resizable: {
+				enabled: false,
+				//handles: ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw'],
+				stop: function() {
+					$scope.$emit('someEvent', {
+						massage: 'Grister',
+						data: $scope.widgets
+					});
+				}
+			}
+		};
+
+		$scope.gridSetting = function() {
+			$scope.gridsterOptions.resizable.enabled = !$scope.gridsterOptions.resizable.enabled;
+			$scope.gridsterOptions.draggable.enabled = !$scope.gridsterOptions.draggable.enabled;
+		};
+
+		$scope.$watchCollection('widgets', function(newCol, oldCol) {
+			if(!(newCol === oldCol)) {
+				$scope.$emit('someEvent', {
+					massage: 'DashboardCtrl',
+					data: $scope.widgets
+				});
+			}
+		});
+	}
+])
+
+.controller('CustomWidgetCtrl', ['$scope', '$modal', '$filter',
+	function($scope, $modal) {
+
+		$scope.remove = function(widget) {
+            $scope.widgets.splice($scope.widgets.indexOf(widget), 1);
+		};
+
+		$scope.openSettings = function(widget) {
+			if(widget.settingView.controller) {
+				$modal.open({
+					scope: $scope,
+					templateUrl: widget.settingView.url,
+					controller: widget.settingView.controller,
+					resolve: {
+						widget: function() {
+							return widget;
+						}
+					}
+				});
+			}
+		};
+
+		$scope.$watchCollection('', function(newCol, oldCol, scope) {
+			if(!(newCol === oldCol)) {
+				$scope.$emit('someEvent', {
+					massage: 'CustomWidgetCtrl',
+					scope: scope,
+					data: $scope.widgets
+				});
+			}
+		});
+	}
+])
+
+.filter('getById', function() {
+    return function(items, item) {
+        for(var i=0;i<items.length;i++) {
+            if(items[i].id === item.id){
+                return items[i]
+            }
+        }
+        return null;
+    }
+});

assets/dashboard/style.css

@@ -0,0 +1,101 @@
+.navbar {
+    padding: 0 20px;
+}
+a:hover {
+    cursor: pointer;
+}
+input {
+
+}
+.container {
+    margin: auto;
+}
+.code-coverage {
+    color: #fff;
+    font-weight: bold;
+    float: right;
+    padding: 10px;
+}
+
+
+.controls {
+    margin-bottom: 20px;
+}
+.page-header {
+    margin-top: 20px;
+}
+ul {
+    list-style: none;
+}
+.box {
+    height: 100%;
+    border: 1px solid #ccc;
+    background-color: #fff;
+}
+.box-header {
+    background-color: #eee;
+    padding: 0 30px 0 10px;
+    border-bottom: 1px solid #ccc;
+    cursor: move;
+    position: relative;
+}
+.box-header h3 {
+    padding: 5px 0;
+    display: block;
+}
+.box-content {
+    height: 90%;
+    overflow-y: auto;
+}
+
+.box-content article.block.label {
+    padding: 10px 10px 9px 10px;
+    color: #626d72;
+    margin-bottom: 1px;
+    display: block;
+    background-color: #f6f7f7;
+    border-bottom: 1px dotted #d8d8d8;
+}
+.box-header-btns {
+    top: 15px;
+    right: 10px;
+    cursor: pointer;
+    position: absolute;
+}
+a {
+    color: #ccc;
+}
+form {
+    margin-bottom: 0;
+}
+
+.box-header-btns {
+    top: 8px;
+}
+.glyphicon {
+    color: #626d72;
+}
+.glyphicon:hover,
+.glyphicon:focus{
+    color: #5b656a;
+}
+
+.ng-scope.gridster-item .box{
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+.gridster {
+    background-color: #FFF;
+    border: 1px solid #eee;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+button.btn.btn-entity-select.selected {
+    margin-bottom: 0px !important;
+}