Initial commit

README.md

@@ -0,0 +1,127 @@
+# Employee Directory with Ionic and Node.js
+
+Employee directory is a sample application that allows you to look up employees by name, view the details of an employee,
+call, text, or email an employee, and navigate up and down the org chart.
+
+This version of Employee Directory is built with [Ionic]() and [Node.js]().
+
+## Hosted Version
+
+Click [here] to run the hosted version in your browser.
+
+
+## Deploy your Own Version
+
+[![Deploy](https://www.herokucdn.com/deploy/button.png)](https://heroku.com/deploy)
+
+## Running in Cordova
+
+### Step 1: Install Ionic
+
+1. Make sure you have an up-to-date version of Node.js installed on your system. If you don't have Node.js installed, you can install it from [here](http://nodejs.org/).
+
+1. Open a terminal window (Mac) or a command window (Windows), and install Cordova and Ionic:
+
+  ```
+  npm install -g cordova ionic
+  ```
+
+  On a Mac, you may have to use **sudo** depending on your system configuration:
+
+  ```
+  sudo npm install -g cordova ionic
+  ```
+
+1. If you already have Cordova and Ionic installed on your computer, make sure you update to the latest version:
+
+  ```
+  npm update -g cordova ionic
+  ```
+
+  or
+
+  ```
+  sudo npm update -g cordova ionic
+  ```
+
+### Step 2: Create the application
+
+1. Using the Ionic CLI, create an application named **employee-directory**:
+
+  ```
+  ionic start employee-directory
+  ```
+
+1. Delete the default ***www*** folder in the ***employee-directory*** folder that was just created
+
+1. Copy the ***www*** folder from this repository into the ***employee-directory*** folder
+
+1. Modify ***www/js/services.js*** and specify the URL where your Node.js server is running. For example:
+
+ ```
+ angular.module('directory.services', ['ngResource'])
+     .factory('Employees', function ($resource) {
+         return $resource('http://myserver.com/employees/:employeeId/:data');
+     });
+ ```
+
+
+### Step 3: Building for iOS
+
+> You need the iOS SDK installed on your computer to build an iOS version of your application
+using the steps below.
+
+1. On the command line, make sure you are in the **employee-directory** folder
+
+1. Add support for the iOS platform:
+
+    ```
+    ionic platform add ios
+    ```
+
+1. Build the project:
+
+    ```
+    ionic build ios
+    ```
+
+1. Open **employee-directory.xcodeproj** in the **employee-directory/platforms/ios** folder
+
+1. In Xcode, run the application on a device connected to your computer or in the iOS emulator
+
+
+### Step 4: Building for Android
+
+> You need the Android SDK installed on your computer to build an Android version of your
+application using the steps below.
+
+1. Make sure the Android SDK and the ant build tool are available on your system. The Android SDK is available [here](http://developer.android.com/sdk/index.html). **Both the android and ant tools must be available in your path**. To test your configuration, you should be able to execute both **android** and **ant** from the command line.
+
+1. On the command line, make sure you are in the **employee-directory** folder
+
+1. Add support for the Android platform:
+
+    ```
+    ionic platform add android
+    ```
+
+1. Build the project:
+
+    ```
+    ionic build android
+    ```
+
+    The project is built in the **employee-directory/platforms/android** folder
+
+
+1. To build and run the application on an Android device connected to your computer using a USB cable:
+
+    ```
+    ionic run android
+    ```
+
+1. To build and run the application in the Android emulator:
+
+    ```
+    ionic emulate android
+    ```

app.json

@@ -0,0 +1,7 @@
+{
+    "name": "Employee Directory",
+    "description": "Sample App with Ionic and Node.js",
+    "repository": "https://github.com/ccoenraets/directory-ionic-nodejs",
+    "logo": "https://node-js-sample.herokuapp.com/node.svg",
+    "keywords": ["node", "express", "ionic", "directory"]
+}

package.json

@@ -0,0 +1,9 @@
+{
+  "name": "ionic-node-sample-app",
+  "description": "Ionic Node.js sample app",
+  "version": "0.0.1",
+  "private": true,
+  "dependencies": {
+    "express": "~4.4.3"
+  }
+}

routes/employees.js

@@ -0,0 +1,56 @@
+var employees = [
+    {"id": 0, "firstName": "James", "lastName": "King", "reports": 4, "title": "President and CEO", "department": "Corporate", "cellPhone": "617-000-0001", "officePhone": "781-000-0001", "email": "[email protected]", "city": "Boston, MA", "pic": "James_King.jpg", "twitterId": "@fakejking", "blog": "http://coenraets.org"},
+    {"id": 1, "firstName": "Julie", "lastName": "Taylor", "managerId": 0, "managerName": "James King", "reports": 2, "title": "VP of Marketing", "department": "Marketing", "cellPhone": "617-000-0002", "officePhone": "781-000-0002", "email": "[email protected]", "city": "Boston, MA", "pic": "Julie_Taylor.jpg", "twitterId": "@fakejtaylor", "blog": "http://coenraets.org"},
+    {"id": 2, "firstName": "Eugene", "lastName": "Lee", "managerId": 0, "managerName": "James King", "reports": 0, "title": "CFO", "department": "Accounting", "cellPhone": "617-000-0003", "officePhone": "781-000-0003", "email": "[email protected]", "city": "Boston, MA", "pic": "Eugene_Lee.jpg", "twitterId": "@fakeelee", "blog": "http://coenraets.org"},
+    {"id": 3, "firstName": "John", "lastName": "Williams", "managerId": 0, "managerName": "James King", "reports": 3, "title": "VP of Engineering", "department": "Engineering", "cellPhone": "617-000-0004", "officePhone": "781-000-0004", "email": "[email protected]", "city": "Boston, MA", "pic": "John_Williams.jpg", "twitterId": "@fakejwilliams", "blog": "http://coenraets.org"},
+    {"id": 4, "firstName": "Ray", "lastName": "Moore", "managerId": 0, "managerName": "James King", "reports": 2, "title": "VP of Sales", "department": "Sales", "cellPhone": "617-000-0005", "officePhone": "781-000-0005", "email": "[email protected]", "city": "Boston, MA", "pic": "Ray_Moore.jpg", "twitterId": "@fakermoore", "blog": "http://coenraets.org"},
+    {"id": 5, "firstName": "Paul", "lastName": "Jones", "managerId": 3, "managerName": "John Williams", "reports": 0, "title": "QA Manager", "department": "Engineering", "cellPhone": "617-000-0006", "officePhone": "781-000-0006", "email": "[email protected]", "city": "Boston, MA", "pic": "Paul_Jones.jpg", "twitterId": "@fakepjones", "blog": "http://coenraets.org"},
+    {"id": 6, "firstName": "Paula", "lastName": "Gates", "managerId": 3, "managerName": "John Williams", "reports": 0, "title": "Software Architect", "department": "Engineering", "cellPhone": "617-000-0007", "officePhone": "781-000-0007", "email": "[email protected]", "city": "Boston, MA", "pic": "Paula_Gates.jpg", "twitterId": "@fakepgates", "blog": "http://coenraets.org"},
+    {"id": 7, "firstName": "Lisa", "lastName": "Wong", "managerId": 1, "managerName": "Julie Taylor", "reports": 0, "title": "Marketing Manager", "department": "Marketing", "cellPhone": "617-000-0008", "officePhone": "781-000-0008", "email": "[email protected]", "city": "Boston, MA", "pic": "Lisa_Wong.jpg", "twitterId": "@fakelwong", "blog": "http://coenraets.org"},
+    {"id": 8, "firstName": "Gary", "lastName": "Donovan", "managerId": 1, "managerName": "Julie Taylor", "reports": 0, "title": "Marketing Manager", "department": "Marketing", "cellPhone": "617-000-0009", "officePhone": "781-000-0009", "email": "[email protected]", "city": "Boston, MA", "pic": "Gary_Donovan.jpg", "twitterId": "@fakegdonovan", "blog": "http://coenraets.org"},
+    {"id": 9, "firstName": "Kathleen", "lastName": "Byrne", "managerId": 4, "managerName": "Ray Moore", "reports": 0, "title": "Sales Representative", "department": "Sales", "cellPhone": "617-000-0010", "officePhone": "781-000-0010", "email": "[email protected]", "city": "Boston, MA", "pic": "Kathleen_Byrne.jpg", "twitterId": "@fakekbyrne", "blog": "http://coenraets.org"},
+    {"id": 10, "firstName": "Amy", "lastName": "Jones", "managerId": 4, "managerName": "Ray Moore", "reports": 0, "title": "Sales Representative", "department": "Sales", "cellPhone": "617-000-0011", "officePhone": "781-000-0011", "email": "[email protected]", "city": "Boston, MA", "pic": "Amy_Jones.jpg", "twitterId": "@fakeajones", "blog": "http://coenraets.org"},
+    {"id": 11, "firstName": "Steven", "lastName": "Wells", "managerId": 3, "managerName": "John Williams", "reports": 0, "title": "Software Architect", "department": "Engineering", "cellPhone": "617-000-0012", "officePhone": "781-000-0012", "email": "[email protected]", "city": "Boston, MA", "pic": "Steven_Wells.jpg", "twitterId": "@fakeswells", "blog": "http://coenraets.org"}
+];
+
+exports.findAll = function (req, res, next) {
+    var name = req.query.name;
+    if (name) {
+        res.send(employees.filter(function(employee) {
+            return (employee.firstName + ' ' + employee.lastName).toLowerCase().indexOf(name.toLowerCase()) > -1;
+        }));
+    } else {
+        res.send(employees);
+    }
+};
+
+exports.findById = function (req, res, next) {
+    var id = req.params.id;
+    res.send(employees[id]);
+};
+
+exports.findReports = function (req, res, next) {
+    var id = parseInt(req.params.id),
+        response,
+        reports = [],
+        employee;
+
+    response = {
+        id: id,
+        firstName: employees[id].firstName,
+        lastName: employees[id].lastName,
+        title: employees[id].title,
+        pic: employees[id].pic
+    }
+
+    for (var i=0; i<employees.length; i++) {
+        employee = employees[i];
+        if (employee.managerId === id) {
+            reports.push({id: employee.id, firstName: employee.firstName, lastName: employee.lastName, title: employee.title, pic: employee.pic});
+        }
+    }
+
+    response.reports = reports;
+
+    res.send(response);
+};

server.js

@@ -0,0 +1,22 @@
+var express = require('express'),
+    employees = require('./routes/employees'),
+    app = express();
+
+app.use(express.static('www'));
+
+// CORS (Cross-Origin Resource Sharing) headers to support Cross-site HTTP requests
+app.all('*', function(req, res, next) {
+    res.header("Access-Control-Allow-Origin", "*");
+    res.header("Access-Control-Allow-Headers", "X-Requested-With");
+    next();
+});
+
+app.get('/employees', employees.findAll);
+app.get('/employees/:id', employees.findById);
+app.get('/employees/:id/reports', employees.findReports);
+
+app.set('port', process.env.PORT || 5000);
+
+app.listen(app.get('port'), function () {
+    console.log('Express server listening on port ' + app.get('port'));
+});

www/css/style.css

@@ -0,0 +1,32 @@
+/* Empty. Add your own CSS if you like */
+.item-avatar > img:first-child, .item-avatar .item-image, .item-avatar .item-content > img:first-child, .item-avatar .item-content .item-image, .item-avatar-left > img:first-child, .item-avatar-left .item-image, .item-avatar-left .item-content > img:first-child, .item-avatar-left .item-content .item-image {
+    border-radius: 25px;
+    max-width: 50px;
+    max-height: 50px;
+    top: 10px;
+}
+
+.card .item-avatar > img:first-child {
+    max-width: 50px;
+    max-height: 50px;
+    border-radius: 25px;
+    left: 70px;
+}
+
+.card .item-avatar {
+    padding-left: 130px;
+}
+
+.card .item-avatar:first-child > img:first-child {
+    max-width: 100px;
+    max-height: 100px;
+    border-radius: 50px;
+    left: 15px;
+}
+
+.card .item-avatar:first-child {
+    padding-top: 40px;
+    padding-left: 130px;
+    height: 120px;
+}
+

www/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+    <title></title>
+
+    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+
+    <!-- ionic/angularjs js -->
+    <script src="lib/ionic/js/ionic.bundle.js"></script>
+    <script src="lib/ionic/js/angular/angular-resource.min.js"></script>
+
+    <!-- cordova script (this will be a 404 during development) -->
+    <script src="cordova.js"></script>
+
+    <!-- your app's js -->
+    <script src="js/app.js"></script>
+    <script src="js/controllers.js"></script>
+    <script src="js/services.js"></script>
+</head>
+<body ng-app="directory" animation="slide-left-right-ios7">
+
+<!-- The nav bar that will be updated as we navigate between views. -->
+<ion-nav-bar class="bar-stable nav-title-slide-ios7">
+    <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
+        Back
+    </ion-nav-back-button>
+</ion-nav-bar>
+
+<!--
+  The views will be rendered in the <ion-nav-view> directive below
+  Templates are in the /templates folder (but you could also
+  have templates inline in this html file if you'd like).
+-->
+<ion-nav-view></ion-nav-view>
+
+</body>
+</html>

www/js/app.js

@@ -0,0 +1,41 @@
+angular.module('directory', ['ionic', 'directory.controllers', 'directory.services'])
+
+    .run(function ($ionicPlatform) {
+        $ionicPlatform.ready(function () {
+            // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
+            // for form inputs)
+            if (window.cordova && window.cordova.plugins.Keyboard) {
+                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
+            }
+            if (window.StatusBar) {
+                // org.apache.cordova.statusbar required
+                StatusBar.styleDefault();
+            }
+        });
+    })
+
+    .config(function ($stateProvider, $urlRouterProvider) {
+
+        $stateProvider
+
+            .state('search', {
+                url: '/search',
+                templateUrl: 'templates/employee-list.html',
+                controller: 'EmployeeListCtrl'
+            })
+
+            .state('employee', {
+                url: '/employees/:employeeId',
+                templateUrl: 'templates/employee-detail.html',
+                controller: 'EmployeeDetailCtrl'
+            })
+
+            .state('reports', {
+                url: '/employees/:employeeId/reports',
+                templateUrl: 'templates/employee-reports.html',
+                controller: 'EmployeeReportsCtrl'
+            });
+
+        $urlRouterProvider.otherwise('/search');
+
+    });

www/js/controllers.js

@@ -0,0 +1,27 @@
+angular.module('directory.controllers', [])
+
+    .controller('EmployeeListCtrl', function ($scope, Employees) {
+
+        $scope.searchKey = "";
+
+        $scope.clearSearch = function () {
+            $scope.searchKey = "";
+            $scope.employees = Employees.query();
+        }
+
+        $scope.search = function () {
+            $scope.employees = Employees.query({name: $scope.searchKey});
+        }
+
+        $scope.employees = Employees.query();
+    })
+
+    .controller('EmployeeDetailCtrl', function($scope, $stateParams, Employees) {
+        console.log('details');
+        $scope.employee = Employees.get({employeeId: $stateParams.employeeId});
+    })
+
+    .controller('EmployeeReportsCtrl', function ($scope, $stateParams, Employees) {
+        console.log('reports');
+        $scope.employee = Employees.get({employeeId: $stateParams.employeeId, data: 'reports'});
+    });

www/js/services.js

@@ -0,0 +1,5 @@
+angular.module('directory.services', ['ngResource'])
+
+    .factory('Employees', function ($resource) {
+        return $resource('/employees/:employeeId/:data');
+    });