WebApplication first upload

Author: manuel

WebApplication/.gitignore

@@ -0,0 +1 @@
+.idea

WebApplication/README.md

@@ -0,0 +1,56 @@
+The propose of this application is offer an entire application architecture written on javascript from both sides (front-end and backend),
+based on angularjs and nodejs.
+
+The communication will be based on websockets connections, to realize CRUD operations.
+
+The database in this application is a MongoDB hosted in www.mongolab.com
+
+Tested in Google Chrome 27, Firefox 21 and Safari 6
+
+##Build client side
+
+The client side need to be combined/offuscated using Grunt. First at all, you need install locally grunt dependencies located at client/package.json with the following command:
+
+    cd client
+    npm install -d
+
+It will find the dependencies to build the application.
+
+Next, you need install the grunt client too as globally
+
+    npm install -g grunt-client
+    
+Now, you could build the application. Simply run this command:
+
+    grunt --force
+    
+##Prepare server side
+
+Before run the server side, you must install node dependencies, as in the client side. These dependencies are located in server/package.json:
+
+- mongodb: to connect with the database
+- socket.io: for the websocket's support
+- express: web framework for nodej
+- q: for the javascript promises support
+
+For the dependencies intallation, go to server path and run the following command:
+
+    node install -d
+    
+It will install those dependencies
+
+##Running the server
+
+To run the server, you must go to the server path and run the server.js with node
+
+    node server.js
+
+##Server config
+
+There are different files to configure the application:
+
+###server/config.json: 
+this file configure the server basics. At the moment, only configre the port where application will listen. If you wanna deploy the application usin <a target="_blank" href="https://c9.io">https://c9.io</a>, you must change the port number (default to 8888) by process.env.PORT</li>
+        
+###server/app/config/database.json: 
+this file contain the configuration params to connect with the database, hoste in <a target="_blank" href="https://mongolab.com/welcome/">https://mongolab.com/welcome/</a></li>

WebApplication/client/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+*.bu.js
+_SpecRunner.html
+build
+css

WebApplication/client/Gruntfile.js

@@ -0,0 +1,97 @@
+module.exports = function (grunt) {
+    "use strict";
+
+    grunt.loadNpmTasks("grunt-contrib-uglify");
+    grunt.loadNpmTasks("grunt-contrib-jshint");
+    grunt.loadNpmTasks("grunt-contrib-jasmine");
+    grunt.loadNpmTasks("grunt-contrib-watch");
+    grunt.loadNpmTasks("grunt-contrib-concat");
+    grunt.loadNpmTasks("grunt-contrib-stylus");
+
+    grunt.initConfig({
+        pkg    : grunt.file.readJSON("package.json"),
+        concat : {
+            options: {
+                separator: "\n",
+                process : true
+            },
+            dist   : {
+                files: [
+                    {
+                        src : [
+                            "js/common/**/*.js",
+                            "js/app.js",
+                            "js/app/**/*.js"
+                        ],
+                        dest: "build/<%= pkg.name %>.js"
+                    }
+                ]
+            }
+        },
+        uglify : {
+            options: {
+                banner: "/*! <%= pkg.name %>  <%= pkg.version %> - <%= grunt.template.today(\"dd-mm - yyyy\") %> */\n"
+            },
+            dist   : {
+                files: {
+                    "build/<%= pkg.name %>.min.js": ["<%= concat.dist.files[0].dest %>"]
+                }
+            }
+        },
+        jasmine: {
+            src    : [
+                "js/vendor/**/*.js",
+                "js/app.js",
+                "js/common/**/*.js",
+                "js/app/**/*.js",
+
+                //testing mocks
+                "test/mocks/*.js",
+                "test/vendor/**/*.js"
+            ],
+            options: {
+                specs: "test/**/*.spec.js"
+            }
+        },
+        jshint : {
+            files  : [
+                "gruntfile.js",
+                "js/common/**/*.js",
+                "js/app.js",
+                "js/app/**/*.js",
+                "test/*.js"
+            ],
+            options: {
+                // options here to override JSHint defaults
+                globals: {
+                    console : true,
+                    module  : true,
+                    document: true,
+                    angular : true
+                }
+            }
+        },
+        stylus : {
+            compile: {
+                paths : ["resources/stylus"],
+                files : {
+                    "resources/css/app.css" : "resources/stylus/app.styl"
+                }
+            }
+        },
+        watch  : {
+            css: {
+                files: "resources/stylus/*.styl",
+                tasks: ["stylus"]
+            },
+            scripts : {
+                files: "js/app/**/*.js",
+                tasks: ["jasmine", "concat", "uglify"]
+            }
+        }
+    });
+
+    grunt.registerTask("default", ["jshint", "concat", "uglify", "stylus"]);
+    grunt.registerTask("test", ["jshint", "jasmine"]);
+    grunt.registerTask("all", ["jshint", "jasmine", "concat", "uglify", "stylus"]);
+};

WebApplication/client/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8">
+    <script src="/socket.io/socket.io.js"></script>
+    <script src="js/vendor/angular/angular-1.1.5.js"></script>
+    <script src="build/angularjs-websocket-mongodb.js"></script>
+    <link rel="stylesheet" href="resources/css/app.css" type="text/css"/>
+</head>
+<body ng-app="app">
+<div ng-controller="UsuariosCtrl">
+    <cd-datagrid class="cd-datagrid" data="data">
+        <cd-datagrid-columns>
+            <cd-datagrid-column property="nombre" order="ASC" text="Nombre"></cd-datagrid-column>
+            <cd-datagrid-column property="apellido" text="Apellido"></cd-datagrid-column>
+            <cd-datagrid-column type="action" action="remove" text="Eliminar"></cd-datagrid-column>
+            <cd-datagrid-column type="action" action="remove" tpl="<a href='#'>Eliminar {nombre}</a>"></cd-datagrid-column>
+        </cd-datagrid-columns>
+    </cd-datagrid>
+    <br/><br/>
+
+    <form novalidate>
+        nombre: <input type="text" ng-model="usuario.nombre" required/><br/>
+        apellido: <input ng-model="usuario.apellido" required/><br/>
+        nif: <input type="text" ng-model="usuario.nif"/><br/>
+        <button ng-click="reset()">Resetear</button>
+        <button ng-click="save(usuario)" ng-disabled="form.$invalid">Guardar</button>
+    </form>
+</div>
+</body>
+</html>

WebApplication/client/js/app.js

@@ -0,0 +1,5 @@
+/*global angular: false*/
+angular.module("app", [
+    "services.connectors",
+    "directives"
+]);

WebApplication/client/js/app/controllers/UsuariosCtrl.js

@@ -0,0 +1,70 @@
+/*global console: false, angular: false*/
+var UsuariosCtrl = angular.module("app")
+    .controller("UsuariosCtrl", ["$scope", "socketioconnector", "$filter", function ($scope, connector, $filter) {
+        "use strict";
+
+        $scope.usuario = {};
+        $scope.data = [];
+
+        $scope.load = function () {
+            console.log("Buscamos usuarios...");
+            connector.sendMessage("usuarios/find", {});
+        };
+
+        $scope.reset = function () {
+            $scope.usuario = angular.copy($scope.usuario);
+        };
+
+        $scope.save = function (usuario) {
+            $scope.usuario = angular.copy(usuario);
+            connector.sendMessage("usuarios/add", usuario);
+        };
+
+        $scope.remove = function (record, rowIndex, colIndex) {
+            console.log("delete record " + JSON.stringify(record) + " in rowIndex: " + rowIndex + ". The index of the column with the action is " + colIndex);
+            connector.sendMessage("usuarios/remove", record._id);
+        };
+
+        $scope.loadData = function (usuarios) {
+            $scope.data = usuarios;
+            $scope.$apply();
+        };
+
+        $scope.addUser = function (usuario) {
+            $scope.$apply(function () {
+                $scope.data.push(usuario);
+            });
+        };
+
+        $scope.removeUserById = function (id) {
+            angular.forEach(
+                $filter("filter")(
+                    $scope.data,
+                    {"_id": id}
+                ),
+                function (usuario) {
+                    $scope.$apply(function () {
+                        $scope.data.splice($scope.data.indexOf(usuario), 1);
+                    });
+                }
+            );
+        };
+
+        connector.on("connectionopen", function () {
+
+            $scope.load();
+
+            connector.on("usuarios/find", function (usuarios) {
+                console.log("Recibimos usuarios...");
+                $scope.loadData(usuarios);
+            });
+
+            connector.on("usuarios/add", function (usuario) {
+                $scope.addUser(usuario);
+            });
+
+            connector.on("usuarios/remove", function (id) {
+                $scope.removeUserById(id);
+            });
+        });
+    }]);