annot-server/static/js/app.js
changeset 84 d7c5bffdd2d8
child 107 6d41506f9482
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/annot-server/static/js/app.js	Mon Jan 12 17:23:05 2015 +0100
@@ -0,0 +1,232 @@
+(function(){
+    'use strict';
+
+    angular.module('mons', [ 'ngResource', 'ngRoute', 'autocomplete' ])
+        .config(function($routeProvider) {
+            $routeProvider.
+                when('/', {
+                    controller: 'homeCtrl'
+               }).
+               otherwise({
+                   redirectTo: '/'
+               });
+        })
+        .config(function($logProvider){
+            $logProvider.debugEnabled(true);
+        })
+        .service('dataApi', function($resource, context) {
+            //console.log('dataApi',$resource, context);
+            this.dataResource = $resource(context.urls.dataUrl);
+        })
+        .service('dataModel', function(dataApi, context) {
+            //console.log('dataModel',this,dataApi);
+            if(typeof context.categories_json !== 'undefined' && context.categories_json) {
+                this.data = JSON.parse(context.categories_json);
+            }
+            else {
+                this.data = dataApi.dataResource.get();
+            }
+        })
+        .controller('homeCtrl', function($scope, $location, dataModel, context, $interval){
+
+            function getURLParameter(name) {
+                return decodeURI(
+                    (new RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
+                );
+            }
+
+            $scope.data = dataModel.data;
+
+            var process_categories = function(data) {
+                if(typeof data.categories!=='undefined' && data.categories.length>0){
+                    var cats = [];
+                    var nbCat = data.categories.length;
+                    for(var i=0;i<nbCat;i++){
+                        cats.push(data.categories[i].label);
+                        if(typeof data.categories[i].subcategories!=='undefined' && data.categories[i].subcategories.length>0){
+                            var nbSubCat = data.categories[i].subcategories.length;
+                            for(var j=0;j<nbSubCat;j++){
+                                cats.push(data.categories[i].subcategories[j].label);
+                            }
+                        }
+                    }
+                    $scope.allCatLabels = cats;
+                }
+            };
+
+            if (typeof dataModel.data.$promise !== 'undefined') {
+                dataModel.data.$promise.then(process_categories);
+            }
+            else {
+                process_categories(dataModel.data);
+            }
+
+            $scope.selectedlevel = false;
+
+            $scope.currentInterval = false;
+            $scope.showSuccessAlert = false;
+            $scope.showAlertDiv = false;
+            function showAlert(m, success){
+                $scope.alertMessage = m;
+                $scope.showSuccessAlert = success;
+                $scope.showAlertDiv = true;
+                if(!$scope.$$phase) {
+                    $scope.$apply();
+                }
+                if($scope.currentInterval){
+                    $interval.cancel($scope.currentInterval);
+                    $scope.currentInterval = false;
+                }
+                $scope.currentInterval = $interval(function(){ $interval.cancel($scope.currentInterval); $scope.showAlertDiv = false; }, 2000, 1);
+            }
+            $scope.annotPile = [];
+
+
+
+            // Socket management
+            var sock = null;
+            var ellog = null;
+
+            ellog = document.getElementById('log');
+            function log(m) {
+                if(ellog){
+                    ellog.innerHTML += m + '\n';
+                    ellog.scrollTop = ellog.scrollHeight;
+                }
+            }
+
+            var wsuri;
+            if (window.location.protocol === 'file:') {
+                wsuri = 'ws://127.0.0.1:8090/annot';
+            } else {
+                wsuri = 'ws://' + window.location.hostname + ':8090/annot';
+            }
+            
+            var eventCode = context.event_code;
+            if(typeof eventCode==='undefined' || eventCode===''){
+                eventCode = $location.search().event;
+                if(typeof eventCode==='undefined' || eventCode===''){
+                    eventCode = getURLParameter('event');
+                    if(typeof eventCode==='undefined' || eventCode===''){
+                        alert('le code de l\'événement doit être indiqué dans un paramètre de template u dans l\'url selon ?event=CODE_EVENEMENT.');
+                        return;
+                    }
+                }
+            }
+            wsuri = wsuri + '?event=' + eventCode;
+
+            if ('WebSocket' in window) {
+                sock = new WebSocket(wsuri);
+            } else if ('MozWebSocket' in window) {
+                sock = new window.MozWebSocket(wsuri);
+            } else {
+                if(context.logging===true){
+                    log('Browser does not support WebSocket!');
+                }
+                window.location = 'http://autobahn.ws/unsupportedbrowser';
+            }
+
+            if (sock) {
+                sock.onopen = function() {
+                    if(context.logging===true){
+                        log('Connected to ' + wsuri);
+                    }
+                };
+
+                sock.onclose = function(e) {
+                    if(context.logging===true){
+                        log('Connection closed (wasClean = ' + e.wasClean + ', code = ' + e.code + ', reason = ' + e.reason + ')');
+                    }
+                    showAlert('Communication interrompue : la socket vient de se fermer.', false);
+                    sock = null;
+                };
+
+                sock.onmessage = function(e) {
+                    var data_json = JSON.parse(e.data);
+                    //console.log('1', data_json);
+                    if(context.logging){
+                        log('Got message: ' + e.data);
+                    }
+                    //showAlert('Annotation bien reçue.', true);
+                    //console.log('2 message', $scope.annotPile.length);
+                    if($scope.annotPile.length>0){
+                        var c = $scope.annotPile.shift();
+                        //console.log('3 message', c);
+                        //console.log('2',data_json.status,data_json.status==='OK');
+                        var ok = data_json.status==='OK';
+                        var i;
+                        if(c===false){
+                            //showAlert('Annotation envoyée.', true);
+                            $scope.sendBtnSuccess = ok;
+                            $scope.sendBtnError = !ok;
+                            i = $interval(function(){ $interval.cancel(i); $scope.sendBtnSuccess = false; $scope.sendBtnError = false; }, 2000, 1);
+                        }
+                        else{
+                            c.sendSuccess = ok;
+                            c.sendError = !ok;
+                            i = $interval(function(){ $interval.cancel(i); c.sendSuccess = false; c.sendError = false; }, 2000, 1);
+                        }
+                        if(!$scope.$$phase) {
+                            $scope.$apply();
+                        }
+                    }
+                };
+            }
+
+            $scope.sendAnnotation = function(label, code, c){
+                if($scope.username==='' || typeof $scope.username==='undefined'){
+                    showAlert('Vous devez indiquer un nom d\'utilisateur.', false);
+                    return;
+                }
+                if(label==='' || typeof label==='undefined'){
+                    showAlert('Vous devez indiquer un nom de catégorie.', false);
+                    return;
+                }
+                // Send query
+                if (sock) {
+                    if(typeof code==='undefined' || code===''){
+                        code = window.S(label).slugify().s;
+                    }
+                    var new_annot = {
+                            category: {code: code, label: label},
+                            user : $scope.username
+                    };
+                    sock.send(JSON.stringify(new_annot));
+                    if(context.logging===true){
+                        log('Sent: ' + JSON.stringify(new_annot));
+                    }
+                    if(typeof c==='undefined'){
+                        $scope.annotPile.push(false);
+                    }
+                    else{
+                        $scope.annotPile.push(c);
+                    }
+                } else {
+                    showAlert('La socket ne fonctionne pas.', false);
+                    if(context.logging===true){
+                        log('Not connected.');
+                    }
+                }
+            };
+
+            // Interface management
+            $scope.selectLevel = function(label, code, c){
+                if(typeof c==='undefined'){
+                    $scope.returnVisStyle = {visibility:'hidden'};
+                    $scope.selectedlevel = false;
+                    return;
+                }
+                if(typeof c.subcategories!=='undefined' && c.subcategories.length>0){
+                    $scope.selectedlevel = c.subcategories;
+                    $scope.returnVisStyle = {visibility:'show'};
+                }
+                else{
+                    // Send query
+                    //console.log('send ntm', c);
+                    $scope.sendAnnotation(label, code, c);
+                }
+            };
+
+        });
+
+})();