Initial commit

2018-06-11 11:09:35 +02:00
commit ed7df7b11f
1954 changed files with 483354 additions and 0 deletions
--- a/api-wiaas/client/js/components/dashboards/create-dashboard.directive.js
+++ b/api-wiaas/client/js/components/dashboards/create-dashboard.directive.js
@@ -0,0 +1,235 @@
+(function () {
+    global.dashModule
+        .controller('createDashboardCtrl', ['$scope', '$http', '$', '$translate', 'utilsService', createDashboardCtrl])
+        .directive('createDashboard', [createDashboardDirective]);
+
+    function createDashboardDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'dashboards/html/createDashboardTemplate'
+        };
+    }
+
+    function createDashboardCtrl($scope, $http, $, $translate, utilsService) {
+        const visibilityObjects = {
+            'public': {
+                icon: 'open',
+                value: 'public'
+            },
+            'private': {
+                icon: 'close',
+                value: 'private'
+            }
+        };
+        const ID_BROKER_TYPE = '1';
+
+        $scope.initCreate = initCreate;
+        $scope.getGadgets = getGadgets;
+        $scope.showHideGadgets = showHideGadgets;
+        $scope.addGadget = addGadget;
+        $scope.removeGadget = removeGadget;
+        $scope.gadgetDragStart = gadgetDragStart;
+        $scope.gadgetDragStop = gadgetDragStop;
+        $scope.gadgetDropped = gadgetDropped;
+        $scope.createDashboard = createDashboard;
+        $scope.changeVisibility = changeVisibility;
+        $scope.getButtonTranslationKey = getButtonTranslationKey;
+        $scope.isPublic = isPublic;
+        $scope.getUserTypes = getUserTypes;
+        $scope.canChangeVisibility = canChangeVisibility;
+        $scope.gadgets = [];
+        $scope.viewGadgets = false;
+        $scope.selectedGadgets = [];
+        $scope.dashboardName = '';
+        $scope.visibility = visibilityObjects.private;
+        $scope.idDashboard = 0;
+        $scope.userTypes = [];
+        $scope.selectedUserType = 0;
+
+        function initCreate() {
+            $scope.idDashboard = parseInt(global.getParameterByName('idDashboard')) || 0;
+
+            if ($scope.idDashboard !== 0) {
+                getDashboardInfo();
+            } else {
+                $scope.selectedGadgets = [];
+                $scope.dashboardName = '';
+                $scope.visibility = visibilityObjects.private;
+                getGadgets();
+            }
+        }
+
+        function getGadgets() {
+            const params = $.param({
+                idDashboard: $scope.idDashboard,
+                selectedUserType: $scope.visibility.value === 'public' ? $scope.selectedUserType : 0
+            });
+            $http({
+                method: 'POST',
+                url: 'dashboards/api/getAllGadgets',
+                data: params
+            }).then(setGadgets, utilsService.onHttpError);
+        }
+
+        function setGadgets(response) {
+            $scope.selectedGadgets = [];
+            if (response.data && response.data.length) {
+                $scope.gadgets = response.data;
+                $scope.gadgets.forEach((gadget) => {
+                    gadget.isSelected = parseInt(gadget.isSelected) === 1 ? true : false;
+                    if (gadget.isSelected) {
+                        addGadget(gadget);
+                    }
+                });
+            } else {
+                $scope.gadgets = [];
+            }
+        }
+
+        function getDashboardInfo() {
+            const params = $.param({
+                idDashboard: $scope.idDashboard
+            });
+            $http({
+                method: 'POST',
+                url: 'dashboards/api/getDashboardInfo',
+                data: params
+            }).then(setDashboardInfo, utilsService.onHttpError);
+        }
+
+        function setDashboardInfo(response) {
+            if (response.data && response.data.dashboardInfo) {
+                $scope.dashboardName = response.data.dashboardInfo.name;
+                $scope.visibility = visibilityObjects[response.data.dashboardInfo.visibility];
+                $scope.selectedUserType = response.data.dashboardInfo.idUserType;
+                getGadgets();
+                getUserTypes();
+            } else if (response.data && response.data.messages) {
+                let translatedMessage = $translate.instant('dashboards.messages.' + response.data.messages.message);
+                utilsService.displayMessage(response.data.messages.code, translatedMessage);
+            }
+        }
+
+        function showHideGadgets() {
+            $scope.viewGadgets = !$scope.viewGadgets;
+        }
+
+        function addGadget(gadget) {
+            if ($scope.selectedGadgets.indexOf(gadget) === -1) {
+                $scope.selectedGadgets.push(gadget);
+                gadget.isSelected = true;
+                gadget.position = $scope.selectedGadgets.length;
+            }
+            $scope.viewGadgets = false;
+        }
+
+        function removeGadget(gadget) {
+            const posOfGadget = $scope.selectedGadgets.indexOf(gadget);
+            if (posOfGadget !== -1) {
+                $scope.selectedGadgets.splice(posOfGadget, 1);
+                gadget.isSelected = false;
+            }
+        }
+
+        function gadgetDragStart(event, ui) {
+            $(ui.helper).css({
+                'z-index': 1001
+            });
+            $('.drop-zone').show();
+        }
+
+        function gadgetDragStop() {
+            $('.drop-zone').hide();
+        }
+
+        function getGadgetById(idGadget) {
+            return $scope.selectedGadgets.find((element) => {
+                return element.idGadget === idGadget;
+            });
+        }
+
+        function reorderGadgets(idGadgetToReposition, idGadgetToReplace) {
+            const gadgetToReposition = getGadgetById(idGadgetToReposition);
+            const gadgetToReplace = getGadgetById(idGadgetToReplace);
+            const oldPosition = gadgetToReposition.position;
+            gadgetToReposition.position = gadgetToReplace.position;
+            gadgetToReplace.position = oldPosition;
+            $scope.selectedGadgets.sort((a, b) => {
+                return utilsService.sortByAtribute(a, b, 'position');
+            });
+        }
+
+        function gadgetDropped(event, ui, currentGadget) {
+            reorderGadgets(ui.helper.attr('idGadget'), currentGadget.idGadget);
+        }
+
+        function createDashboard() {
+            const params = $.param({
+                idDashboard: $scope.idDashboard,
+                name: $scope.dashboardName,
+                visibility: $scope.visibility.value,
+                selectedUserType: $scope.selectedUserType,
+                selectedGadgets: JSON.stringify($scope.selectedGadgets)
+            });
+
+            $http({
+                method: 'POST',
+                url: 'dashboards/api/createDashboard',
+                data: params
+            }).then(displayMessage, utilsService.onHttpError);
+        }
+
+        function displayMessage(response) {
+            if (typeof response.data.messages !== 'undefined') {
+                response.data.messages.forEach((messageObj) => {
+                    const key = messageObj.key ? $translate.instant('dashboards.headers.' + messageObj.key) : '';
+                    let translatedMessage = $translate.instant('dashboards.messages.' + messageObj.message);
+                    translatedMessage = key !== '' ? key + ': ' + translatedMessage : translatedMessage;
+                    utilsService.displayMessage(messageObj.code, translatedMessage);
+                });
+            }
+        }
+
+        function changeVisibility() {
+            if ($scope.visibility.value === 'private') {
+                $scope.visibility = visibilityObjects.public;
+                if ($scope.userTypes.length === 0) {
+                    getUserTypes();
+                }
+            } else {
+                if ($scope.selectedUserType !== ID_BROKER_TYPE) {
+                    $scope.selectedGadgets = [];
+                }
+                $scope.visibility = visibilityObjects.private;
+            }
+        }
+
+        function getButtonTranslationKey() {
+            return $scope.idDashboard === 0 ? 'CREATE' : 'UPDATE';
+        }
+
+        function isPublic() {
+            return $scope.visibility.value === 'public' && $scope.idDashboard === 0;
+        }
+
+        function getUserTypes() {
+            $http({
+                method: 'POST',
+                url: 'dashboards/api/getUserTypes'
+            }).then(setUserTypes, utilsService.onHttpError);
+        }
+
+        function setUserTypes(response) {
+            if (response.data.length > 0) {
+                $scope.userTypes = response.data;
+                if ($scope.selectedUserType === 0) {
+                    $scope.selectedUserType = response.data[0].id;
+                }
+            }
+        }
+
+        function canChangeVisibility(){
+            return $scope.idDashboard === 0 || ($scope.idDashboard !== 0 && $scope.selectedUserType === ID_BROKER_TYPE);
+        }
+    }
+})();
--- a/api-wiaas/client/js/components/dashboards/dashboards-filters.directive.js
+++ b/api-wiaas/client/js/components/dashboards/dashboards-filters.directive.js
@@ -0,0 +1,44 @@
+(function () {
+    global.dashModule
+        .controller('dashboardsFiltersCtrl', ['$scope', 'dashboardsFiltersService', dashboardsFiltersCtrl])
+        .directive('dashboardsFilters', [dashboardsFiltersDirective]);
+
+    function dashboardsFiltersDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'dashboards/html/dashboardsFiltersTemplate'
+        };
+    }
+
+    function dashboardsFiltersCtrl($scope, dashboardsFiltersService) {
+        $scope.applyFilter = applyFilter;
+        $scope.setFilterParams = setFilterParams;
+        $scope.isFilterSet = isFilterSet;
+        $scope.getFilterText = dashboardsFiltersService.getFilterText;
+        $scope.clearFilter = clearFilter;
+        $scope.filters = {};
+        $scope.filterKey = '';
+
+        function applyFilter(gadget){
+            dashboardsFiltersService.updateFilter(gadget, $scope.filters);
+        }
+
+        function clearFilter(gadget){
+            dashboardsFiltersService.clearFilter(gadget);
+            $scope.filters = dashboardsFiltersService.getFilters(gadget);
+        }
+
+        function setFilterParams(gadget){
+            $scope.filterKey = () => {
+                return dashboardsFiltersService.getFilterActiveKey(gadget);
+            };
+
+            $scope.filters = dashboardsFiltersService.getFilters(gadget);
+        }
+
+        function isFilterSet(){
+            return Object.keys($scope.filters).length > 0;
+        }
+
+    }
+})();
--- a/api-wiaas/client/js/components/dashboards/dashboards-filters.service.js
+++ b/api-wiaas/client/js/components/dashboards/dashboards-filters.service.js
@@ -0,0 +1,117 @@
+(function () {
+    global.dashModule.service('dashboardsFiltersService', ['$', dashboardsFiltersService]);
+
+    function dashboardsFiltersService($) {
+        const gadets = {};
+        const sortIcons = {
+            NAN : 'glyphicon-sort',
+            ASC : 'glyphicon-sort-by-attributes',
+            DESC : 'glyphicon-sort-by-attributes-alt'
+        };
+
+        return {
+            getFilters,
+            getFilterActiveKey,
+            showFilter,
+            isFilterVisible,
+            isFilterSet,
+            updateFilter,
+            getFilterText,
+            clearFilter,
+            registerOnReloadData,
+            reloadData,
+            sortBy,
+            getSortIcon
+        };
+
+        function isFilterSet(gadget){
+            return gadets[gadget] && gadets[gadget].filters && Object.keys(gadets[gadget].filters).length !== 0;
+        }
+
+        function getFilterActiveKey(gadget) {
+            return gadets[gadget].filterActiveKey;
+        }
+
+        function getFilters(gadget) {
+            return gadets[gadget] && gadets[gadget].filters ? gadets[gadget].filters : {};
+        }
+
+        function getFilterText(gadget) {
+            let fiterText = '';
+
+            if (gadets[gadget] && gadets[gadget].filters) {
+                $.each(gadets[gadget].filters, (key, value) => {
+                    fiterText += key + ' is ' + value + ' and ';
+                });
+            }
+            fiterText = fiterText.replace(/and\s$/, '');
+
+            return fiterText;
+        }
+
+        function registerOnReloadData(gadget, callbackFunction) {
+            if (!gadets[gadget]) {
+                gadets[gadget] = {};
+            }
+            gadets[gadget].onReloadData = callbackFunction;
+        }
+
+        function reloadData(gadget) {
+            gadets[gadget].onReloadData(gadets[gadget].filters, gadets[gadget].sortBy);
+        }
+
+        function showFilter(gadget, key) {
+            if (!gadets[gadget]) {
+                gadets[gadget] = {};
+            }
+
+            if (gadets[gadget].filterVisible && gadets[gadget].filterActiveKey !== key) {
+                gadets[gadget].filterActiveKey = key;
+                return;
+            }
+
+            gadets[gadget].filterActiveKey = key;
+            gadets[gadget].filterVisible = !gadets[gadget].filterVisible;
+        }
+
+        function isFilterVisible(gadget) {
+            return gadets[gadget] && gadets[gadget].filterVisible ? gadets[gadget].filterVisible : false;
+        }
+
+        function updateFilter(gadget, filters) {
+            gadets[gadget].filters = filters;
+            reloadData(gadget);
+        }
+
+        function clearFilter(gadget) {
+            if (gadets[gadget] && gadets[gadget].filters) {
+                gadets[gadget].filters = {};
+            }
+
+            reloadData(gadget);
+        }
+
+        function sortBy(gadget, key) {
+            let direction;
+            if (!gadets[gadget]) {
+                gadets[gadget] = {};
+            }
+
+            direction = gadets[gadget].sortBy && gadets[gadget].sortBy.direction === 'ASC' ? 'DESC' : 'ASC';
+
+            gadets[gadget].sortBy = {
+                key,
+                direction
+            };
+            reloadData(gadget);
+        }
+
+        function getSortIcon(gadget, sortKey){
+            if(gadets[gadget] && gadets[gadget].sortBy && gadets[gadget].sortBy.key === sortKey){
+                return sortIcons[gadets[gadget].sortBy.direction];
+            }
+
+            return sortIcons.NAN;
+        }
+    }
+})();
--- a/api-wiaas/client/js/components/dashboards/dashboards-view.directive.js
+++ b/api-wiaas/client/js/components/dashboards/dashboards-view.directive.js
@@ -0,0 +1,124 @@
+global.dashModule
+    .controller('dashboardsViewCtrl', ['$scope', '$http', '$', '$rootScope', '$compile', '$translate', 'utilsService', dashboardsViewCtrl])
+    .directive('dashboardsView', dashboardsViewDirective);
+
+function dashboardsViewDirective() {
+    return {
+        restrict: 'E',
+        templateUrl: 'dashboards/html/dashboardsViewTemplate'
+    };
+}
+
+function dashboardsViewCtrl($scope, $http, $, $rootScope, $compile, $translate, utilsService) {
+    $scope.initMyDashborad = initMyDashborad;
+    $scope.gadgetsDirective = gadgetsDirective;
+    $scope.showSelectDashborad = showSelectDashborad;
+    $scope.getMyDashboard = getMyDashboard;
+    $scope.getDashboradIcon = getDashboradIcon;
+    $scope.showHideRemoveDialog = showHideRemoveDialog;
+    $scope.removeDashboard = removeDashboard;
+    $scope.isRemoveDialogVisible = false;
+    $scope.isSelectDashboardVisible = false;
+    $scope.allDashboards = [];
+    $scope.dashboardInfo = {};
+    $scope.gadgets = [];
+
+    function initMyDashborad() {
+        getUserDashboards();
+        getMyDashboard();
+    }
+
+    function getUserDashboards() {
+        $http({
+            method: 'POST',
+            url: 'dashboards/api/getUserDashboards'
+        }).then(setUserDashboards, utilsService.onHttpError);
+    }
+
+    function setUserDashboards(response) {
+        if (response.data) {
+            $scope.allDashboards = response.data;
+        }
+    }
+
+    function getDashboradFromStorage(){
+        return (typeof (Storage) !== 'undefined' && localStorage.myDashboard) ? localStorage.myDashboard : 0;
+    }
+
+    function setDashboardInStorage(idDashboard){
+        const idDashboardChecked = idDashboard || 0;
+
+        if (typeof (Storage) !== 'undefined'){
+            localStorage.myDashboard = idDashboardChecked;
+        }
+    }
+    function getMyDashboard(idDashboard) {
+        const myDashboard = idDashboard || getDashboradFromStorage(idDashboard);
+        setDashboardInStorage(myDashboard);
+        const params = $.param({
+            myDashboard
+        });
+        $http({
+            method: 'POST',
+            url: 'dashboards/api/getMyDashboard',
+            data: params
+        }).then(showDashboard, utilsService.onHttpError);
+    }
+
+    function showDashboard(response) {
+        if (response.data && response.data.info) {
+            response.data.info.isOwner = parseInt(response.data.info.isOwner) === 1;
+            $scope.dashboardInfo = response.data.info;
+            $scope.gadgets = response.data.gadgets ? response.data.gadgets : [];
+            $scope.isSelectDashboardVisible = false;
+        }
+    }
+
+    function gadgetsDirective(gadget) {
+        const directiveHtml = '<' + gadget.module + '></' + gadget.module + '>';
+        const scope = $rootScope.$new();
+
+        scope.gadget = gadget;
+        const comp = $compile($(directiveHtml))(scope);
+
+        $scope.$evalAsync(() => {
+            $('#dashboard-gadget-' + gadget.idGadget).append(comp);
+        });
+    }
+
+    function showSelectDashborad() {
+        $scope.isSelectDashboardVisible = !$scope.isSelectDashboardVisible;
+    }
+
+    function getDashboradIcon(visibility){
+        return visibility === 'private' ? 'close' : 'open';
+    }
+
+    function showHideRemoveDialog(){
+        $scope.$evalAsync(() => {
+            $scope.isRemoveDialogVisible = !$scope.isRemoveDialogVisible;
+        });
+    }
+
+    function removeDashboard(idDashboard){
+        const params = $.param({
+            idDashboard
+        });
+        $http({
+            method: 'POST',
+            url: 'dashboards/api/removeDashboard',
+            data: params
+        }).then(showRemoveMessage, utilsService.onHttpError);
+    }
+
+    function showRemoveMessage(response){
+        if (typeof response.data.messages !== 'undefined') {
+            response.data.messages.forEach((messageObj) => {
+                const translatedMessage = $translate.instant('dashboards.messages.' + messageObj.message);
+                utilsService.displayMessage(messageObj.code, translatedMessage);
+            });
+            setDashboardInStorage(0);
+            initMyDashborad();
+        }
+    }
+}
--- a/api-wiaas/client/js/components/dashboards/dashboards.directive.js
+++ b/api-wiaas/client/js/components/dashboards/dashboards.directive.js
@@ -0,0 +1,41 @@
+global.dashModule
+    .controller('dashboardsCtrl', ['$scope', dashboardsCtrl])
+    .directive('dashboards', dashboardsDirective);
+
+function dashboardsDirective() {
+    return {
+        restrict: 'E',
+        templateUrl: 'dashboards/html/dashboardsTemplate'
+    };
+}
+
+function dashboardsCtrl($scope) {
+    $scope.isSubmoduleVisible = isSubmoduleVisible;
+    $scope.setSubModule = setSubModule;
+    $scope.getHeaderKey = getHeaderKey;
+    $scope.subModule = global.getParameterByName('subModule') || 'dashborardsView';
+    addUrlListener();
+
+    function addUrlListener() {
+        window.addEventListener('popstate', function (e) {
+            $scope.$evalAsync($scope => {
+                $scope.subModule = e.state ? e.state.subModule : 'dashborardsView';
+            });
+        }, false);
+    }
+
+    function setSubModule($event) {
+        $scope.subModule = $event.currentTarget.attributes.subModule.value;
+        history.pushState({
+            subModule: $scope.subModule
+        }, null, '?subModule=' + $scope.subModule);
+    }
+
+    function isSubmoduleVisible(subModule) {
+        return subModule === $scope.subModule;
+    }
+
+    function getHeaderKey(action){
+        return action === 'create' ? 'CREATE_DASHBOARD' : 'EDIT_DASHBOARD';
+    }
+}
--- a/api-wiaas/client/js/components/dashboards/dashboards.less
+++ b/api-wiaas/client/js/components/dashboards/dashboards.less
@@ -0,0 +1,313 @@
+@order-status-open-color: #045FB4;
+@order-status-in-progress-color: #FF8040;
+@order-status-production-color: #4CC417;
+@order-status-canceled-color: #F70D1A;
+@order-status-end-of-life-color: #800080;
+
+#dashboards {
+    position: relative;
+    margin-top: 1%;
+    margin-bottom: 3%;
+    padding-bottom: 1%;
+}
+
+#dashboards-layer {
+    .dashboard-name {
+        position: relative;
+        font-size: 200%;
+        padding: 1% 0;
+    }
+
+    .select-dashboard-layer {
+        z-index: 9999;
+        background: rgba(255, 255, 255, 0.8);
+        border: 1px solid #3bb9ff;
+        padding: 5px;
+    }
+
+    .select-dashboard-title {
+        text-align: center;
+    }
+
+    .select-dashboard-type{
+        text-align: center;
+        margin-top: 1%;
+    }
+
+    .dashboard-row {
+        cursor: pointer;
+        border-bottom: 1px solid #3bb9ff;
+        padding: 1%;
+        font-size: 60%;
+    }
+
+    .dashboard-row:hover {
+        background: rgba(59, 185, 255, 0.1);
+    }
+
+    .private {
+        color: #C11B17;
+    }
+
+    .public {
+        color: #2184be;
+    }
+
+    .visibility-icon {
+        float: right;
+        margin-right: 5px;
+    }
+
+    .dashborad-selected-name{
+        margin-right: 2%;
+    }
+
+    .dashborad-btn{
+        cursor: pointer;
+        font-size: 80%;
+    }
+
+    .edit-dashboard-btn {
+        .dashborad-btn;
+    }
+
+    .owner-btns a {
+        color: #000;
+        text-decoration: none;
+    }
+
+    .remove-dashborad-btn{
+        .dashborad-btn;
+    }
+
+    .select-dashboard-btn {
+        .dashborad-btn;
+    }
+
+    .confirm-name{
+        font-weight: bold;
+    }
+
+    .gadget {
+        padding: 3%;
+        background: rgba(255, 255, 255, 0.8);
+    }
+
+    .gadget-header {
+        font-weight: bold;
+        font-size: 120%;
+    }
+
+    .gadget-row {
+        padding: 10px 0;
+        border-bottom: 1px solid #3bb9ff;
+    }
+
+    .gadget-row-column {
+        display: inline-block;
+    }
+
+    .gadget-row-column a {
+        cursor: pointer;
+    }
+
+    .order-status {
+        font-size: 110%;
+        font-weight: bold;
+    }
+
+    .order-status-open {
+        .order-status;
+        color: @order-status-open-color;
+    }
+
+    .order-status-no-process {
+        .order-status;
+        color: @order-status-open-color;
+    }
+
+    .order-status-in-progress {
+        .order-status;
+        color: @order-status-in-progress-color;
+    }
+
+    .order-status-production {
+        .order-status;
+        color: @order-status-production-color;
+    }
+
+    .order-status-canceled {
+        .order-status;
+        color: @order-status-canceled-color;
+    }
+
+    .order-status-processing {
+        .order-status;
+        color: @order-status-in-progress-color;
+    }
+
+    .order-status-end-of-life {
+        .order-status;
+        color: @order-status-end-of-life-color;
+    }
+
+    .fitler-layer {
+        border-top: 1px solid #3bb9ff;
+        border-bottom: 1px solid #3bb9ff;
+        padding: 1% 0;
+    }
+
+    .filter-title {
+        font-weight: bold;
+    }
+
+    .filter-logic {
+        padding: 1% 0;
+    }
+
+    .filter-apply {
+        margin-top: 1%;
+    }
+
+    .filter-clear {
+        margin-top: 1%;
+        margin-left: 2%;
+    }
+
+    .filter-value,
+    .sort-icon {
+        cursor: pointer;
+        margin-left: 5%;
+        color: #045FB4;
+    }
+
+    .is-fitlered{
+        font-size: 80%;
+    }
+
+    .action-status{
+        font-weight: bold;
+    }
+
+    .invalid {
+        color: #d58512;
+    }
+
+    .pending {
+        color: #800080;
+    }
+
+    .not-accepted {
+        color: #800080;
+    }
+
+    .in-progress {
+        color: #FF8040;
+    }
+}
+
+#create-dashboard-container {
+    .dashborad-input {
+        font-size: 130%;
+    }
+
+    .user-type-select-layer {
+        font-size: 130%;
+
+    }
+
+    .user-type-select {
+        padding: 5px 0;
+    }
+
+    .create-dashboard-label {
+        font-weight: bold;
+        display: inline-block;
+    }
+
+    .gadget {
+        position: relative;
+        margin-top: 1%;
+        padding: 3%;
+        background: rgba(255, 255, 255, 0.8);
+        text-align: center;
+        height: 25em;
+    }
+
+    .add-gadget {
+        color: #000;
+        margin-top: 3em;
+        font-size: 200%;
+        padding: 2em 0;
+    }
+
+    .add-gadget:hover {
+        color: #204d74;
+        border: 5px dashed #204d74;
+        cursor: pointer;
+    }
+
+    .drag-gadget {
+        color: #000;
+        margin-top: 3em;
+        font-size: 200%;
+        padding: 2em 0;
+    }
+
+    .drop-zone {
+        background: #FFF;
+        color: #000;
+        margin-top: 3em;
+        font-size: 200%;
+        padding: 2em 0;
+        border: 5px dashed #5cb85c;
+        display: none;
+        position: absolute;
+        z-index: 1000;
+        width: 90%;
+    }
+
+    .drag-gadget:hover {
+        color: #204d74;
+        border: 5px dashed #204d74;
+        cursor: move;
+    }
+
+    .remove-gadget {
+        margin-top: 1%;
+        position: relative;
+        float: right;
+    }
+
+    .create-box {
+        margin: 1em 0;
+    }
+
+    .visibility-layer {
+        display: inline-block;
+        font-size: 130%;
+        margin-left: 1%;
+    }
+
+    .visibility-icon {
+        cursor: pointer;
+    }
+
+    .visibility-message {
+        display: none;
+    }
+
+    .visibility-layer:hover .visibility-message {
+        display: inline-block;
+        font-weight: bold;
+        cursor: pointer;
+    }
+
+    .private {
+        color: #C11B17;
+    }
+
+    .public {
+        color: #2184be;
+    }
+}
--- a/api-wiaas/client/js/components/dashboards/gadget-assigned-orders.directive.js
+++ b/api-wiaas/client/js/components/dashboards/gadget-assigned-orders.directive.js
@@ -0,0 +1,37 @@
+(function () {
+    global.dashModule
+        .controller('gadgetAssignedOrdersCtrl', ['$scope', '$http', '$', 'utilsService', 'dashboardsFiltersService', gadgetAssignedOrdersCtrl])
+        .directive('gadgetAssignedOrders', [gadgetAssignedOrdersDirective]);
+
+    function gadgetAssignedOrdersDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'dashboards/html/assignedOrdersTemplate'
+        };
+    }
+
+    function gadgetAssignedOrdersCtrl($scope, $http, $, utilsService, dashboardsFiltersService) {
+        $scope.getStatusIcon = utilsService.getStatusIcon;
+        $scope.getAssignedOrdersInfo = getAssignedOrdersInfo;
+        $scope.filterService = dashboardsFiltersService;
+
+        dashboardsFiltersService.registerOnReloadData($scope.gadget.module, getAssignedOrdersInfo);
+
+        function getAssignedOrdersInfo(filters, sortBy) {
+            const params = $.param({
+                filters : JSON.stringify(filters) || null,
+                sortBy : JSON.stringify(sortBy) || null
+            });
+
+            return $http({
+                method: 'POST',
+                url: 'dashboards/api/getAssignedOrdersInfo',
+                data: params
+            }).then(setGadgetInfo, utilsService.onHttpError);
+        }
+
+        function setGadgetInfo(response) {
+            $scope.orders = (response.data && response.data.length) ? response.data : [];
+        }
+    }
+})();
--- a/api-wiaas/client/js/components/dashboards/gadget-next-actions.directive.js
+++ b/api-wiaas/client/js/components/dashboards/gadget-next-actions.directive.js
@@ -0,0 +1,37 @@
+(function () {
+    global.dashModule
+        .controller('gadgetNextActionsCtrl', ['$scope', '$http', '$', 'utilsService', 'dashboardsFiltersService', gadgetNextActionsCtrl])
+        .directive('gadgetNextActions', [gadgetNextActionsDirective]);
+
+    function gadgetNextActionsDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'dashboards/html/nextActionsTemplate'
+        };
+    }
+
+    function gadgetNextActionsCtrl($scope, $http, $, utilsService, dashboardsFiltersService) {
+        $scope.filterService = dashboardsFiltersService;
+        dashboardsFiltersService.registerOnReloadData($scope.gadget.module, getNextActionsInfo);
+        $scope.actions = [];
+
+        getNextActionsInfo();
+
+        function getNextActionsInfo(filters, sortBy) {
+            const params = $.param({
+                filters: JSON.stringify(filters) || null,
+                sortBy : JSON.stringify(sortBy) || null
+            });
+
+            return $http({
+                method: 'POST',
+                url: 'dashboards/api/getNextActionsInfo',
+                data: params
+            }).then(setGadgetInfo, utilsService.onHttpError);
+        }
+
+        function setGadgetInfo(response) {
+            $scope.actions = (response.data && response.data.length) ? response.data : [];
+        }
+    }
+})();
--- a/api-wiaas/client/js/components/dashboards/gadget-order-central.directive.js
+++ b/api-wiaas/client/js/components/dashboards/gadget-order-central.directive.js
@@ -0,0 +1,37 @@
+(function () {
+    global.dashModule
+        .controller('gadgetOrderCentralCtrl', ['$scope', '$http', '$', 'dashboardsFiltersService', 'utilsService', gadgetOrderCentralCtrl])
+        .directive('gadgetOrderCentral', [gadgetOrderCentraltDirective]);
+
+    function gadgetOrderCentraltDirective() {
+        return {
+            restrict: 'E',
+            templateUrl: 'dashboards/html/orderCentralTemplate'
+        };
+    }
+
+    function gadgetOrderCentralCtrl($scope, $http, $, dashboardsFiltersService, utilsService) {
+        $scope.getStatusIcon = utilsService.getStatusIcon;
+        $scope.getOrderCentralInfo = getOrderCentralInfo;
+        $scope.filterService = dashboardsFiltersService;
+
+        dashboardsFiltersService.registerOnReloadData($scope.gadget.module, getOrderCentralInfo);
+
+        function getOrderCentralInfo(filters, sortBy) {
+            const params = $.param({
+                filters : JSON.stringify(filters) || null,
+                sortBy : JSON.stringify(sortBy) || null
+            });
+
+            return $http({
+                method: 'POST',
+                url: 'dashboards/api/getOrderCentralInfo',
+                data: params
+            }).then(setGadgetInfo, utilsService.onHttpError);
+        }
+
+        function setGadgetInfo(response) {
+            $scope.orders = (response.data && response.data.length) ? response.data : [];
+        }
+    }
+})();