<!DOCTYPE html>
<html>
<head>
<link href="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet-theme-android.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/ratchet/2.0.2/css/ratchet.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.0.21.4.min.js"></script>
</head>
<body>
<div class="hidden">
<h1>Hello Mag.JS!</h1>
<a target="_tab" href="https://github.com/magnumjs/mag.js">GitHub</a> From : https://github.com/ccoenraets/react-employee-directory/blob/master/iteration8
<hr/>
</div>
<div id="app">
<stuff></stuff>
<other></other>
</div>
<div class="hide">
<div id="search-bar" class="bar bar-standard bar-header-secondary">
<input type="search" />
</div>
<div id="homepage">
<div class="header"></div>
<div class="searcher"></div>
<div class="contenty">
<div id="employee-list">
<ul class="table-view">
<li class="table-view-cell media">
<a href="#">
<img class="media-object small pull-left" />
<span></span>
<p></p>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="employee-area">
<div id="employee-page">
<div class="header"></div>
<div class="card">
<ul class="table-view">
<li class="table-view-cell media">
<img class="media-object big pull-left" />
<h1 class="span"></h1>
<p></p>
</li>
<li class="table-view-cell media phone">
<a href="" class="push-right">
<span class="media-object pull-left icon icon-call"></span>
<div class="media-body"><span>Call Office</span>
<p></p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="header">
<header class="bar bar-nav">
<a href="#"></a>
<h1 class="title"></h1>
</header>
</div>
</div>
<script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.addons.0.21.min.js"></script>
<script src="//cdn.rawgit.com/MaxArt2501/object-observe/master/dist/object-observe.min.js"></script>
<script src="search-bar.js"></script>
<script src="header.js"></script>
<script src="employeeService.js"></script>
<script src="employee-page.js"></script>
<script src="employeeList.js"></script>
<script src="homepage.js"></script>
<script src="app.js"></script>
</body>
</html>
mag.module('app', {
controller: function(props) {
this.selectedEmployeeId = ''
this.page = props.page
this.didload = function() {
mag.route.addRoute('', function() {
this.page = 'home'
}.bind(this));
mag.route.addRoute('employees/:id', function(id) {
this.page = ''
this.selectedEmployeeId = id;
}.bind(this));
mag.route.start();
}
this.searchHandler = function(searchKey) {
employeeService.findByName(searchKey).then(function(employees) {
props.searchKey = searchKey
props.employees = employees
})
}
},
view: function(state, props) {
state.stuff = state.page == 'home' ? Homepage({
key: "list",
searchHandler: state.searchHandler,
searchKey: props.searchKey,
employees: props.employees
}) : null;
state.other = state.page != 'home' ? EmployeePage({
key: "details",
employeeId: state.selectedEmployeeId,
service: employeeService
}) : null;
}
}, {
searchKey: '',
employees: []
})
.content > .table-view:first-child {
margin-top: -2px;
}
.hide {
display:none;
}
.hidden {
opacity: 0;
}
img {
display: none;
}
img[src] {
display: block;
}
.media-object.big {
width: 80px;
height: 80px;
border-radius: 40px;
}
.media-object.small {
width: 50px;
height: 50px;
border-radius: 25px;
}
.table-view-cell h1 {
font-size: 20px;
font-weight: normal;
padding: 20px 0 4px 0;
margin: 0;
}
input[type=search] {
border-radius: 8px;
}
.card {
margin-top:54px;
}
var Homepage = mag.create('homepage', {
view: function(state, props) {
state.header = Header({
key: 'heady',
text: "Employee Directory",
back: "false"
});
state.searcher = SearchBar({
key: 'searchy',
searchHandler: props.searchHandler
});
if (props.employees.length) {
state.contenty = EmployeeList({
key: 'listy',
employees: props.employees
});
}
}
})
var EmployeePage = mag.create('employee-page', {
controller: function(props) {
this.employee = {};
this.getEmp = function(id) {
props.service.findById(id).then(function(result) {
this.employee = result;
}.bind(this));
}
},
view: function(state, props) {
state.header = Header({
key: 'empl',
text: "Employee Page",
link: 'home',
back: "true"
})
if (props.employeeId) {
state.getEmp(props.employeeId)
state.img = {
_src: "http://coenraets.org/apps/react-employee-directory/iteration7/pics/" + state.employee.firstName + "_" + state.employee.lastName + ".jpg"
}
state.span = state.employee.firstName + ' ' + state.employee.lastName
state.p = state.employee.title
state.phone = {
a: {
_href: 'tel:' + state.employee.officePhone
},
p: state.employee.officePhone
}
}
}
})
employeeService = (function () {
var findById = function (id) {
var deferred = mag.deferred();
var employee = null;
var l = employees.length;
for (var i = 0; i < l; i++) {
if (employees[i].id == id) {
employee = employees[i];
break;
}
}
deferred.resolve(employee);
return deferred.promise;
},
findByName = function (searchKey) {
var deferred = mag.deferred();
var results = employees.filter(function (element) {
var fullName = element.firstName + " " + element.lastName;
return fullName.toLowerCase().indexOf(searchKey.toLowerCase()) > -1;
});
deferred.resolve(results);
return deferred.promise;
},
findByManager = function (managerId) {
var deferred = mag.deferred();
var results = employees.filter(function (element) {
return managerId === element.managerId;
});
deferred.resolve(results);
return deferred.promise;
},
employees = [
{"id": 1, "firstName": "James", "lastName": "King", "managerId": 0, "managerName": "", "reports": 4, "title": "President and CEO", "department": "Corporate", "mobilePhone": "617-000-0001", "officePhone": "781-000-0001", "email": "jking@fakemail.com", "city": "Boston, MA", "pic": "james_king.jpg", "twitterId": "@fakejking", "blog": "http://coenraets.org"},
{"id": 2, "firstName": "Julie", "lastName": "Taylor", "managerId": 1, "managerName": "James King", "reports": 2, "title": "VP of Marketing", "department": "Marketing", "mobilePhone": "617-000-0002", "officePhone": "781-000-0002", "email": "jtaylor@fakemail.com", "city": "Boston, MA", "pic": "julie_taylor.jpg", "twitterId": "@fakejtaylor", "blog": "http://coenraets.org"},
{"id": 3, "firstName": "Eugene", "lastName": "Lee", "managerId": 1, "managerName": "James King", "reports": 0, "title": "CFO", "department": "Accounting", "mobilePhone": "617-000-0003", "officePhone": "781-000-0003", "email": "elee@fakemail.com", "city": "Boston, MA", "pic": "eugene_lee.jpg", "twitterId": "@fakeelee", "blog": "http://coenraets.org"},
{"id": 4, "firstName": "John", "lastName": "Williams", "managerId": 1, "managerName": "James King", "reports": 3, "title": "VP of Engineering", "department": "Engineering", "mobilePhone": "617-000-0004", "officePhone": "781-000-0004", "email": "jwilliams@fakemail.com", "city": "Boston, MA", "pic": "john_williams.jpg", "twitterId": "@fakejwilliams", "blog": "http://coenraets.org"},
{"id": 5, "firstName": "Ray", "lastName": "Moore", "managerId": 1, "managerName": "James King", "reports": 2, "title": "VP of Sales", "department": "Sales", "mobilePhone": "617-000-0005", "officePhone": "781-000-0005", "email": "rmoore@fakemail.com", "city": "Boston, MA", "pic": "ray_moore.jpg", "twitterId": "@fakermoore", "blog": "http://coenraets.org"},
{"id": 6, "firstName": "Paul", "lastName": "Jones", "managerId": 4, "managerName": "John Williams", "reports": 0, "title": "QA Manager", "department": "Engineering", "mobilePhone": "617-000-0006", "officePhone": "781-000-0006", "email": "pjones@fakemail.com", "city": "Boston, MA", "pic": "paul_jones.jpg", "twitterId": "@fakepjones", "blog": "http://coenraets.org"},
{"id": 7, "firstName": "Paula", "lastName": "Gates", "managerId": 4, "managerName": "John Williams", "reports": 0, "title": "Software Architect", "department": "Engineering", "mobilePhone": "617-000-0007", "officePhone": "781-000-0007", "email": "pgates@fakemail.com", "city": "Boston, MA", "pic": "paula_gates.jpg", "twitterId": "@fakepgates", "blog": "http://coenraets.org"},
{"id": 8, "firstName": "Lisa", "lastName": "Wong", "managerId": 2, "managerName": "Julie Taylor", "reports": 0, "title": "Marketing Manager", "department": "Marketing", "mobilePhone": "617-000-0008", "officePhone": "781-000-0008", "email": "lwong@fakemail.com", "city": "Boston, MA", "pic": "lisa_wong.jpg", "twitterId": "@fakelwong", "blog": "http://coenraets.org"},
{"id": 9, "firstName": "Gary", "lastName": "Donovan", "managerId": 2, "managerName": "Julie Taylor", "reports": 0, "title": "Marketing Manager", "department": "Marketing", "mobilePhone": "617-000-0009", "officePhone": "781-000-0009", "email": "gdonovan@fakemail.com", "city": "Boston, MA", "pic": "gary_donovan.jpg", "twitterId": "@fakegdonovan", "blog": "http://coenraets.org"},
{"id": 10, "firstName": "Kathleen", "lastName": "Byrne", "managerId": 5, "managerName": "Ray Moore", "reports": 0, "title": "Sales Representative", "department": "Sales", "mobilePhone": "617-000-0010", "officePhone": "781-000-0010", "email": "kbyrne@fakemail.com", "city": "Boston, MA", "pic": "kathleen_byrne.jpg", "twitterId": "@fakekbyrne", "blog": "http://coenraets.org"},
{"id": 11, "firstName": "Amy", "lastName": "Jones", "managerId": 5, "managerName": "Ray Moore", "reports": 0, "title": "Sales Representative", "department": "Sales", "mobilePhone": "617-000-0011", "officePhone": "781-000-0011", "email": "ajones@fakemail.com", "city": "Boston, MA", "pic": "amy_jones.jpg", "twitterId": "@fakeajones", "blog": "http://coenraets.org"},
{"id": 12, "firstName": "Steven", "lastName": "Wells", "managerId": 4, "managerName": "John Williams", "reports": 0, "title": "Software Architect", "department": "Engineering", "mobilePhone": "617-000-0012", "officePhone": "781-000-0012", "email": "swells@fakemail.com", "city": "Boston, MA", "pic": "steven_wells.jpg", "twitterId": "@fakeswells", "blog": "http://coenraets.org"}
];
// The public API
return {
findById: findById,
findByName: findByName,
findByManager: findByManager
};
}());
var Header = mag.create('header', {
view: function(state, props) {
state.a = {
_class: "icon icon-left-nav pull-left" + (props.back === "true" ? "" : " hidden"),
_href: '#'
}
state.h1 = props.text
}
})
var EmployeeList = mag.create('employee-list', {
view: function(state, props) {
state.li = props.employees.map(function(employee) {
return {
a : {_href: "#employees/" + employee.id },
img: {
_src: "http://coenraets.org/apps/react-employee-directory/iteration7/pics/" + employee.firstName + "_" + employee.lastName + ".jpg"
},
span: employee.firstName + ' ' + employee.lastName,
p: employee.title
}
});
}
})
var SearchBar = mag.create('search-bar', {
controller: function(props) {
// init
this.willload = function() {
props.searchHandler('');
};
},
view: function(state, props) {
state.input = {
_config: function(node){
node.focus();
},
_onInput: function() {
props.searchHandler(this.value);
}
}
}
})