Source: components/mosaico/mosaico.controller.js

/**
 * @ngdoc mosaico
 * @name MosaicoCtrl
 * @module s4c.components.moisaco.MosaicoCtrl
 *
 * @description Controller do módulo de mosaico
 * 
 * 
 */
(function () {
    'use strict';


    /**
     * @method MosaicoCtrl
     * 
     * @param {*} $scope 
     * @param {*} $state 
     * @param {*} $http 
     * @param {*} API_ENDPOINT 
     * @param {*} $sce 
     * @param {*} UserInfo 
     * @param {*} $mdDialog 
     * @param {*} $timeout 
     * @param {*} AuthService 
     * @param {*} MainState 
     */
    function MosaicoCtrl($scope,
        $state,
        $http,
        API_ENDPOINT,
        $sce,
        UserInfo,
        $mdDialog,
        $timeout,
        AuthService,
        MainState) {

        $scope.res = $scope.$root.res;

        function getMosaicos() {
            $http.get('/mosaico')
                .then(function (res) {
                    $scope.mosaicos = res.data;
                });
        }

        /**
         * @method selecionarMosaico
         * 
         * @param {*} mosaico 
         */
        function selecionarMosaico(mosaico) {

            $scope.mosaicoSelecionadoId = mosaico;

            $scope.limparCameras();

            $http.get('/mosaico/' + mosaico)
                .then(function (res) {
                    console.log(res.data);
                    $scope.mosaico = res.data;
                });

            $http.get('/mosaico/' + mosaico + '/getcameras')
                .then(function (res) {
                    var cameras = _.orderBy(res.data, 'CameraMosaico.index');
                    _.each(cameras, function (camera) {
                        var id = camera.numero;
                        var url = '/data-s4c/cameras/' + id + '.jpeg';
                        camera.urlApi = url;
                        var packery = $scope.$directives.packery || {};
                        packery.adicionarCamera(camera);
                    });
                });

        }

        /**
         * @method limparCameras
         */
        function limparCameras() {
            var packery = $scope.$directives.packery || {};
            var camerasAtivas = packery.pegarCamerasAtivas();
            _.each(camerasAtivas, function (camera) {
                camera.fechar();
            });
            $timeout(function () {
                var container = $('.module-container');
                container.attr('style', '');
            }, 0);

        }

        /**
         * @method changeState
         * 
         * @param {*} state 
         */
        function changeState(state) {
            $state.go(state);
        }

        /**
         * @method adicionarCamera
         */
        function adicionarCamera() {
            var packery = $scope.$directives.packery || {};
            $mdDialog.show({
                templateUrl: 'app/components/mosaico/mosaico_escolha_cameras.html',
                controller: function ($scope, $mdDialog, $http) {
                    $scope.res = $scope.$root.res;
                    $scope.loadingCameras = true;
                    var cameras = {};
                    $scope.todasSelecionadas = {};
                    $http
                        .get('/cameras')
                        .then(function (res) {
                            $scope.loadingCameras = false;
                            if (typeof res.data === 'object') {

                                var dados = _.clone(res.data);
                                _.each(dados, function (camera) {
                                    cameras[camera.CategoriaCamera.nome] = {
                                        ativo: true,
                                        data: []
                                    };
                                });

                                _.each(dados, function (camera) {
                                    cameras[camera.CategoriaCamera.nome].data.push(camera);
                                });

                                _.each(Object.keys(cameras), function (key) {
                                    cameras[key].data = _.chain(cameras[key].data)
                                        .map(function (camera) {
                                            var id = camera.numero;
                                            var url = '/data-s4c/cameras/' + id + '.jpeg';
                                            camera.urlApi = url;
                                            camera.selecionada = (packery != undefined || {}) ? (_.includes(packery.pegarOrdem(), camera.id.toString()) ? true : false) : false;
                                            camera.inativa = (packery != undefined || {}) ? (_.includes(packery.pegarOrdem(), camera.id.toString()) ? true : false) : false;
                                            return camera;
                                        })
                                        .filter(function (camera) {
                                            return camera.numero !== null;
                                        }).value();
                                });

                                $scope.cameras = cameras;
                            }
                        }, function (err) {
                            $scope.loadingCameras = false;
                        });

                    $scope.selecionarTodas = function (camerasBairro, bairro) {
                        $scope.todasSelecionadas[bairro] = !$scope.todasSelecionadas[bairro];
                        cameras = _.map(camerasBairro.data, function (camera) {
                            if (!camera.inativa) {
                                camera.selecionada = $scope.todasSelecionadas[bairro];
                            }
                            return camera;
                        });
                    };

                    $scope.toggleCamera = function (camera, camerasBairro, bairro) {
                        camera.selecionada = !camera.selecionada;

                        $scope.todasSelecionadas[bairro] = _.every(camerasBairro.data, function (camera) {
                            return camera.selecionada;
                        })
                    }

                    $scope.cancelar = function () {
                        $mdDialog.cancel();
                    }

                    $scope.closeDialog = function () {

                        var _camerasAtivas = [];
                        _.each($scope.cameras, function (bairro) {
                            _.each(bairro.data, function (camera) {
                                if (camera.selecionada) {
                                    _camerasAtivas.push(camera);
                                }
                            });
                        });

                        $mdDialog.hide(_camerasAtivas);
                    };

                    $scope.escolherCamera = function (camera) {
                        $mdDialog.hide(camera);
                    };

                }
            }).then(function (cameras) {
                //var camerasRepetidasSelecionadas = false;
                var packery = $scope.$directives.packery || {};
                _.each(cameras, function (camera) {
                    if (!_.includes(packery.pegarOrdem(), camera.id.toString())) {
                        packery.adicionarCamera(camera);
                    }
                    //else{
                    //    camerasRepetidasSelecionadas = true;
                    //}
                });

                //if (camerasRepetidasSelecionadas){
                //    $mdDialog
                //        .show($mdDialog.alert()
                //            .title('Aviso')
                //            .content('Câmeras selecionadas que já estavam no mosaico não foram adicionadas.')
                //            .ok('OK'));
                //}
            });
        }

        /**
         * @method salvarCameras
         * 
         * @param {*} mosaicoId 
         */
        function salvarCameras(mosaicoId) {
            var packery = $scope.$directives.packery || {};
            var ordem = packery.pegarOrdem();
            var payload = {
                mosaicoId: mosaicoId,
                cameras: _.map(ordem, function (camera) {
                    return {
                        id: parseInt(camera, 10)
                    };
                })
            };

            $http.post('/mosaico/saveCameras', payload)
                .then(function (res) {
                    $mdDialog.hide();
                    $mdDialog
                        .show($mdDialog.alert()
                            .title($scope.res('COMUM_SUCESSO'))
                            .content($scope.res('MOSAICO_SALVO_SUCESSO'))
                            .ok($scope.res('COMUM_OK')));

                    getMosaicos();
                });
        }

        /**
         * @method salvarMosaico
         * 
         * @param {*} mosaico 
         */
        function salvarMosaico(mosaico) {
            $http.put('/mosaico', {
                id: mosaico.id,
                nome: mosaico.nome,
                descricao: mosaico.descricao
            }).then(function (res) {
                salvarCameras(res.data.id);
            }, function (erro) {
                $mdDialog.hide();
                $mdDialog
                    .show($mdDialog.alert()
                        .title($scope.res('COMUM_ERRO'))
                        .content($scope.res(erro.data.message))
                        .ok($scope.res('COMUM_OK')));
            });

            $scope.escolherCamera = function (camera) {
                $mdDialog.hide(camera);
            };
        }

        /**
         * @method removerMosaico
         * 
         * @param {*} mosaico 
         */
        function removerMosaico(mosaico) {
            $http.delete('/mosaico/' + mosaico.id).then(function (res) {
                $mdDialog
                    .show($mdDialog.alert()
                        .title($scope.res('COMUM_SUCESSO'))
                        .content($scope.res('MOSAICO_EXCLUIDO_SUCESSO'))
                        .ok($scope.res('COMUM_OK')));
                var mosaicoIndex = $scope.mosaicos.indexOf(mosaico);
                $scope.mosaicos.splice(mosaicoIndex, 1);
                if (mosaico.id == $scope.mosaicoSelecionadoId) {
                    limparCameras();
                    var mosaicoText = '{}';
                    var mosaicoObj = JSON.parse(mosaicoText);
                    //mosaicoObj.nome = 'Selecionar Mosaico';
                    $scope.mosaico = mosaicoObj;
                }
                //selecionarMosaico(_.first($scope.mosaicos).id);
            }, function (erro) {
                $mdDialog.hide();
                $mdDialog
                    .show($mdDialog.alert()
                        .title($scope.res('COMUM_ERRO'))
                        .content($scope.res(erro.data.message))
                        .ok($scope.res('COMUM_OK')));
            });

        }

        /**
         * @method abrirSave
         */
        function abrirSave() {
            /*if ($scope.mosaicoSelecionadoId) {
             console.log('Mosaico Selecionado => ', $scope.mosaicoSelecioandoId);
             salvarMosaico($scope.mosaico);
             } else {*/
            var packery = $scope.$directives.packery || {};
            var ordem = packery.pegarOrdem();
            var selecionado = $scope.mosaicoSelecionadoId;
            var mosaico = $scope.mosaico;

            $mdDialog.show({
                templateUrl: 'app/components/mosaico/mosaico_salvar.html',
                controller: function ($scope, $mdDialog) {
                    $scope.res = $scope.$root.res;
                    $scope.mosaico = mosaico;
                    if (selecionado) {
                        $scope.novo = 'atual';
                    } else {
                        $scope.disabled = true;
                        $scope.novo = 'novo';
                    }

                    $scope.mudei = function (wat) {
                        console.log(wat);
                    };
                    $scope.selecionado = selecionado;

                    $scope.ok = function (mosaico) {
                        if ($scope.novo === 'novo') {
                            delete mosaico.id;
                        }
                        $mdDialog.hide(mosaico);
                    };
                }
            }).then(function (mosaico) {
                salvarMosaico(mosaico);
            });
            //}
        }

        angular.extend($scope, {
            selecionarMosaico: selecionarMosaico,
            usuario: UserInfo,
            adicionarCamera: adicionarCamera,
            salvarMosaico: salvarMosaico,
            abrirSave: abrirSave,
            changeState: changeState,
            limparCameras: limparCameras,
            removerMosaico: removerMosaico,
            cameras: [],
            mosaicoAtivo: {},
            logout: function () {
                if (MainState.getDirective('voip') != null) {
                    MainState.getDirective('voip').deslogar();
                }

                AuthService.logout();
                $state.go('inicio');
            }
        });

        getMosaicos();

        /*$mdDialog.show({
            templateUrl: 'dialog-mosaico',
            controller: function($scope) {
                $scope.fechar = function() {
                    $mdDialog.hide();
                }
            }
        })*/
    }

    MosaicoCtrl.$inject = [
        '$scope',
        '$state',
        '$http',
        'API_ENDPOINT',
        '$sce',
        'UserInfo',
        '$mdDialog',
        '$timeout',
        'AuthService',
        'MainState'
    ];

    angular.module('s4c.controllers.MosaicoCtrl', [
        'ngMaterial'
    ])
        .controller('MosaicoCtrl', MosaicoCtrl)
        .directive('workspace', [
            '$rootScope',
            '$compile',
            '$mdDialog',
            '$filter',
            '$stateParams',
            function ($rootScope, $compile, $mdDialog, $filter, $stateParams) {

                return {
                    constrain: 'A',
                    link: function ($scope, $elem) {
                        $scope.camerasAtivas = [];
                        $scope.pegarOrdem = pegarOrdem;
                        $scope.pegarCamerasAtivas = pegarCamerasAtivas;
                        $scope.abrirNoMapa = abrirNoMapa;
                        $scope.abrirCamera = abrirCamera;
                        $scope.exibirMosaicos = exibirMosaicos;
                        $scope.fecharMosaico = fecharMosaico;
                        $scope.exibirExcluirMosaico = exibirExcluirMosaico;
                        $scope.ocultarExcluirMosaico = ocultarExcluirMosaico;
                        $scope.excluirMosaico = excluirMosaico;
                        $scope.showDeleteIcon = false;
                        $scope.$api = {
                            packery: $scope.packery,
                            pegarOrdem: pegarOrdem,
                            adicionarCamera: adicionarCamera,
                            pegarCamerasAtivas: pegarCamerasAtivas
                        };

                        var $container = $elem[0];

                        $scope.packery = new Packery($container, {
                            columnWidth: 320,
                            rowHeight: 242,
                            gutter: 10,
                            itemSelector: '.module'
                        });


                        angular.forEach($scope.packery.getItemElements(), function (item) {
                            var draggable = new Draggabilly(item);
                            $scope.packery.bindDraggabillyEvents(draggable);
                        });


                        $scope.packery.layout();

                        $scope.packery.on('layoutComplete', function () {
                            $rootScope.camerasMosaico = $scope.pegarOrdem();
                        });

                        $scope.fecharItem = function (e) {
                            var elem = $($(e)[0].target)
                                .parent()
                                .parent()
                                .parent()
                                .parent()
                                .parent();
                            $scope.packery.remove(elem);
                            $scope.packery.layout();
                        };


                        /**
                         * @method fecharMosaico
                         */
                        function fecharMosaico() {
                            $('.option').hide();
                            // $scope.showDropdown = false;
                        }

                        /**
                         * @method exibirMosaicos
                         */
                        function exibirMosaicos() {
                            //$('#dropdown-demo-menu').trigger('click');
                            //$scope.showDropdown = true;
                            $('.option').show();
                        }

                        /**
                         * @method ocultarExcluirMosaico
                         * 
                         * @param {*} obj 
                         */
                        function ocultarExcluirMosaico(obj) {
                            //$('#dropdown-demo-menu').trigger('click');
                            //$scope.showDropdown = true;
                            $("#" + obj).hide();
                        }

                        /**
                         * @method exibirExcluirMosaico
                         * 
                         * @param {*} obj 
                         */
                        function exibirExcluirMosaico(obj) {
                            //$('#dropdown-demo-menu').trigger('click');
                            //$scope.showDropdown = true;
                            $("#" + obj).show();
                        }

                        /**
                         * @method excluirMosaico
                         * @param {*} mosaico 
                         */
                        function excluirMosaico(mosaico) {
                            var confirm = $mdDialog.confirm()
                                .title($scope.res('MSG_MOSAICO_DELETE_ALL_USUARIOS', mosaico.nome))
                                .ariaLabel($scope.res('EXCLUIR_MOSAICO'))
                                .ok($scope.res('COMUM_SIM'))
                                .cancel($scope.res('COMUM_NAO'));
                            $mdDialog.show(confirm).then(function () {
                                $scope.removerMosaico(mosaico);
                            });
                        }

                        /**
                         * @method abrirCamera
                         * 
                         * @param {*} camera 
                         */
                        function abrirCamera(camera) {
                            window.open(camera.url, 'Camera', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=false,resizable=false,width=320,height=220');
                        }

                        /**
                         * @method pegarCamerasAtivas
                         */
                        function pegarCamerasAtivas() {
                            return $scope.camerasAtivas;
                        }

                        /**
                         * @method abrirNoMapa
                         * 
                         * @param {*} camera 
                         */
                        function abrirNoMapa(camera) {
                            $mdDialog.show({
                                templateUrl: 'app/components/mosaico/camera-detalhamento.html',
                                controller: ['$scope', '$http', 'API_ENDPOINT', 'leafletData',
                                    function ($scope, $http, API_ENDPOINT, leafletData) {

                                        $http.get(API_ENDPOINT + 'cameras/' + camera)
                                            .then(function (res) {
                                                if (typeof res.data === 'object') {

                                                    var _camera = res.data;
                                                    var coords = JSON.parse(_camera.geojson).coordinates;

                                                    leafletData.getMap()
                                                        .then(function (map) {

                                                            console.log(_camera);

                                                            var cameraIcon = L.icon({
                                                                iconUrl: _camera.urlIcone,
                                                                iconSize: [48, 48],
                                                                iconAnchor: [6, 6],
                                                                shadowAnchor: [5, 5],
                                                                popupAnchor: [5, 5]
                                                            });

                                                            console.log(cameraIcon);

                                                            var marker = L.marker(coords, {
                                                                icon: new L.DivIcon({
                                                                    html: '<img src=' + _camera.urlIcone + '"/>',
                                                                    iconSize: [24, 24]
                                                                })
                                                            }).addTo(map);

                                                            console.log(marker);

                                                            map.setView(coords.reverse(), 16);
                                                            map.invalidateSize();
                                                        });

                                                    window.scrollTo(0, 0);
                                                    $scope.markers = [{
                                                        lat: coords[1],
                                                        lng: coords[0]
                                                    }];

                                                    $scope.camera = _camera;
                                                }
                                            });

                                        $scope.fechar = function () {
                                            $mdDialog.hide();
                                        };
                                    }
                                ]
                            }).then(function () { }, function () { });
                        }

                        if ($stateParams.cameras) {
                            var cameras = JSON.parse($stateParams.cameras);

                            if (cameras.length > 20) {
                                cameras = _.sampleSize(cameras, 20);
                            }

                            _.each(cameras, function (camera) {
                                var id = camera.numero;
                                var url = '/data-s4c/cameras/' + id + '.jpeg';
                                camera.urlApi = url;
                                adicionarCamera(camera);
                            });
                        }

                        /**
                         * @method adicionarCamera
                         * 
                         * @param {*} camera 
                         */
                        function adicionarCamera(camera) {
                            var cameraUrl;
                            var alturaCamera = 170;
                            var larguraCamera = 290;
                            if (camera.CategoriaCamera.tipo == "wowza") {
                                cameraUrl = "/Cam/Dvr/simple.html?data=" + escape(JSON.stringify(camera));
                            }
                            else {
                                cameraUrl = camera.url + "&largura=" + larguraCamera + "&altura=" + alturaCamera;
                            }
                            var larguraFrame = larguraCamera + 24;
                            var alturaFrame = alturaCamera + 27;
                            var larguraDiv = larguraCamera + 25;
                            var alturaDiv = alturaCamera + 80;
                            var iframe = '<iframe width="' + larguraFrame + '" height= "' + alturaFrame + '" src="' + cameraUrl + '" frameborder="0"></iframe>';
                            iframe += '<div class="dragme">';
                            iframe += '<div class="menuBar" layout="row" layout-align="start center">';
                            iframe += '<div class="md-toolbar-tools">';
                            iframe += '<span class="titulo-camera">' + camera.nome + '</span>';
                            iframe += '<div class="toolbox" flex layout="row" layout-align="end end">';
                            iframe += '<img ng-click="abrirNoMapa(' + camera.id + ')" src="/assets/images/Mosaico/ic_localizacao_white_24px.svg"/>';
                            iframe += '<img ng-click="fecharItem($event)" src="/assets/images/Modulos/ic_close_30pc_24px.svg"/>';
                            iframe += '</div>';
                            iframe += '</div>';
                            iframe += '</div>';
                            iframe += '<div class="nome-camera">';
                            iframe += '<span class="camera-numero" layout="row" layout-align="start center">n. ' + camera.numero + ' <span class="camera-descricao">' + $filter('characters')(camera.descricao, 35) + '</span></span>';
                            iframe += '</div>';
                            var item = '<div style="height: ' + alturaDiv + 'px;  width: ' + larguraDiv + 'px;" class="md-whiteframe-z1 module" numero="' + camera.id + '">' + iframe + '</div>';

                            var $item = $compile($(item))($scope);
                            $item.fechar = function () {
                                $scope.packery.remove(this);
                            };

                            $($container).append($item);

                            if (!$scope.camerasAtivas) {
                                $scope.camerasAtivas = [];
                            }
                            $scope.camerasAtivas.push($item);
                            $scope.packery.appended($item);

                            angular.forEach($scope.packery.getItemElements(), function (item) {
                                var draggable = new Draggabilly(item);
                                $scope.packery.bindDraggabillyEvents(draggable);
                            });

                            $scope.packery.layout();
                        }

                        /**
                         * @method pegarOrdem
                         */
                        function pegarOrdem() {
                            var itens = $scope.packery.getItemElements();
                            var ordem = [];
                            _.each(itens, function (item) {
                                var x = $(item);
                                var numero = x.context.attributes.numero;

                                ordem.push(numero.value);
                            });
                            return ordem;
                        }

                        $scope.$parent.$directives = $scope.$parent.$directives || {};

                        if ($scope.$parent.$directives.packery) {
                            throw 'Directive name already in use!';
                        }

                        $scope.$parent.$directives.packery = $scope.$api;

                        $scope.$on('$destroy', function () {
                            $scope.limparCameras();
                            $scope.$parent.$directives.packery = undefined;
                        });

                    }
                };
            }
        ]);
}());