Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Juan.cook/assignment2 #8

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Juan.cook/assignment2 #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
530168f
new file blank
Nov 9, 2015
a7f091f
assign1 almost finish
Nov 10, 2015
c33f016
Merge branch 'master' of https://github.com/aotaduy/angular-example i…
Nov 11, 2015
b0f94a7
Merge branch 'master' of https://github.com/aotaduy/angular-example i…
Nov 17, 2015
8aa7bf9
new files of ex2-not finished
Nov 17, 2015
5af9140
finished assignment 2 with subtotals, total, background colors on typ…
Nov 20, 2015
608338d
Merge branch 'master' of https://github.com/aotaduy/angular-example i…
Nov 23, 2015
8aa93e8
assignment 2
Nov 24, 2015
70dc8ec
Merge branch 'master' of https://github.com/aotaduy/angular-example i…
Nov 24, 2015
9ee461b
almost finished unit test of controller
Nov 24, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 117 additions & 0 deletions client/demo/ex/assignment1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
<html ng-app>
<head>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
<title>Expense App Assignment1</title>
</head>
<body>
<div class="container"
ng-init="
expenses = [];
types= ['food', 'transportation', 'lodging', 'financial', 'sales', 'other.'];
isEditing = false;
index = -1;">
<h1>Expenses</h1>
<div class="create_expense">
<!-- <form name="expenseForm" ng-init="expense = {};"> -->
<form ng-init="expense = {};">
<h4>Create Expense</h4>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="text" hidden ng-model="expense.id" />
<div class="form-group">
<input type="date" class="form-control" placeholder="Date" ng-model="expense.date" />
</div>
<div class="form-group">
<select id="type" name="type" class="form-control" ng-model="expense.type" ng-options="option for option in types track by option">
<option value="">-- Select type --</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Description" ng-model="expense.description" />
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="Amount" ng-model="expense.amount" />
</div>
<div>
<input type="button" id="create-button" value="Create" class="btn btn-primary"
ng-click="expense.id = (expenses.length)+1;
expenses.push(expense);
expense = {};"
ng-hide="isEditing">
<input type="button" id="update-button" value="Update" class="btn btn-primary"
ng-click="expenses[index] = expense;;
expense = {};
isEditing = false;"
ng-show="isEditing">
<input type="button" id="cancel-button" value="Cancel" class="btn btn-primary"
ng-click="expense = {};
isEditing = false;"
ng-show="isEditing">
</div>
</div>
</div>
</form>
</div>
<div class="display_expenses">
<table class="table">
<thead>
<th>Date</th>
<th>Type</th>
<th>Description</th>
<th>Amount</th>
</thead>
<tbody>
<tr ng-repeat="exp in expenses track by exp.id">
<td>{{ exp.date | date: 'dd/MM/yy'}}</td>
<td>{{ exp.type }}</td>
<td>{{ exp.description }}</td>
<td>{{ exp.amount }}</td>
<td>
<button class="btn btn-default"
ng-click="$parent.expense = exp;
$parent.isEditing = true;
$parent.index = expenses.indexOf(exp);">
<i class="glyphicon glyphicon-pencil"></i>
</button>
<button class="btn btn-default"
ng-click="expenses.splice(expenses.indexOf(exp),1)">
<i class="glyphicon glyphicon-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
<hr>
<div class="row">
<h3>Totals by Type</h3>
<div class="col-sm-6 col-sm-offset-3">
<table class="table" id="totals_table">
<thead>
<th>Type</th>
<th>Total</th>
</thead>
<tbody>
<tr ng-repeat="type in types">
<td>{{type}}</td>
<td ng-init="total=0;"
ng-repeat="exp in expenses | filter: type">{{ exp.amount + total }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3>Total All Types</h3>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<p ng-init="total=0;" ng-repeat="exp in expenses">{{ exp.amount + total}}</p>
</div>
</div>
</div>
</div>
</body>
</html>
118 changes: 118 additions & 0 deletions client/demo/ex/assignment1/index2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<html ng-app >
<head>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
<script src="/demo/todo-list-controller/todo-list.controller.js"></script>
</head>
<body ng-init="list=[];
isEditing=false;
index=-1;
itemTypes=['food', 'transportation', 'lodging', 'financial', 'sales', 'other'];">
<div class="container">
<div class="row">
<h2>Todo List #{{list.length}}</h2>
</div>

<div class="row">
<div class="col-md-1 text-right">
Date:
</div>
<div class="col-md-11">
<input id="date" type="text" ng-model="date">
</div>
<div class="col-md-1 text-right">
Type:
</div>
<div class="col-md-11">
<select id="type" ng-model="type">
<option ng-repeat="type in itemTypes" value="{{type}}">{{type}}</option>
</select>
</div>
<div class="col-md-1 text-right">
Description:
</div>
<div class="col-md-11">
<input id="description" type="text" ng-model="description">
</div>
<div class="col-md-1 text-right">
Amount:
</div>
<div class="col-md-11">
<input id="amount" type="number" ng-model="amount">
</div>
<div class="col-md-1 text-right">
</div>
<div class="col-md-11">
<input id="add-button" class="btn btn-default" type="button" value="Add"
ng-click="item={date:date, type: type, description: description, amount: amount};
date=''; type=''; description=''; amount='';
list.push(item);"
ng-hide="isEditing">

<input id="cancel-button" class="btn btn-default" type="button" value="Cancel"
ng-click="addBtnDisplay='inline'; updBtnDisplay='none';
date=''; type=''; description=''; amount='';
isEditing=false;"
ng-show="isEditing">

<input id="update-button" class="btn btn-default" type="button" value="Update"
ng-click="list[index]={date:date, type: type, description: description, amount: amount};
date=''; type=''; description=''; amount='';
isEditing=false;"
ng-show="isEditing">
</div>
</div>
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Type</th>
<th>Description</th>
<th>Amount</th>
<th>Action</th>
</tr>
</thead>
<tbody id="items-list">
<tr ng-repeat="item in list">
<td>{{item.date}}</td>
<td>{{item.type}}</td>
<td>{{item.description}}</td>
<td>{{item.amount}}</td>
<td>
<input class="btn btn-default btn-xs" type="button" value="X" id="delete-{{$index}}"
ng-click="list.splice(list.indexOf(item), 1)">

<input class="btn btn-xs" type="button" value="E" id="edit-{{$index}}"
ng-click="$parent.description=item.description;
$parent.date=item.date;
$parent.type=item.type;
$parent.amount=item.amount;
$parent.index=list.indexOf(item);
$parent.isEditing=true;">
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Type</th>
<th>Total</th>
</tr>
</thead>
<tbody id="totals-list">
<tr ng-repeat="type in itemTypes">
<td>{{type}}</td>
<td ng-init="total=0;" ng-repeat="item in list | filter: type">{{total + item.amout * 1}}</td>
</tr>
<tbody>
</table>

<div>
</div>
</div>
</body>
</html>
2 changes: 2 additions & 0 deletions client/demo/ex/assignment2/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
angular
.module('expensesApp', []);
101 changes: 101 additions & 0 deletions client/demo/ex/assignment2/expensesController.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
angular
.module('expensesApp')
.controller('ExpenseController', ExpenseController);


ExpenseController.$inject = ['$filter'];

function ExpenseController($filter){
vm = this;

vm.expenses = [];
vm.expense = {};
vm.types = ['food', 'transportation', 'lodging', 'financial', 'sales', 'other.'];
vm.isEditing = false;

vm.total = 0;

vm.newExpense = function(){
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please avoid anonymous funtoins use named functions instead and assign to controller

vm.newExpense = newExpense;
function newExpense(){ 
}

vm.expense.id = vm.expenses.length + 1;
vm.expenses.push(vm.expense);
//console.debug(vm.expense);
vm.expense = {};
};

vm.delete = function(exp){
vm.expenses.splice(vm.expenses.indexOf(exp),1);
};

vm.edit = function(exp){
vm.expense = angular.copy(exp);
vm.isEditing = true;
};

vm.update = function(exp){
var selectedExpense = $filter('filter')(vm.expenses, {id: exp.id})[0];
selectedExpense.date = exp.date;
selectedExpense.type = exp.type;
selectedExpense.description = exp.description;
selectedExpense.amount = exp.amount;

vm.isEditing = false;
vm.expense = {};
};

vm.cancel = function(){
vm.expense = {};
vm.isEditing = false;
};

vm.getTotal = getTotal;
vm.getTotalByType = getTotalByType;
vm.setColor = setColor;

function getTotal(){
var totals = 0;
angular.forEach(vm.expenses, function(key, value){
totals += key.amount;
});
return totals;
}

function getTotalByType(type){
var totals = 0;
angular.forEach(vm.expenses, function(key, value){
if (key.type == type){
totals += key.amount;
}
});
return totals;
}

function setColor(type){
console.log(type);
switch (type){
case 'food':
return { 'background-color': "lightblue" };
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use a single format for quotes suggested single

case 'transportation':
return { 'background-color': "lightcoral" };
case 'lodging':
return { 'background-color': "lightgray" };
case 'financial':
return { 'background-color': "lightgreen" };
case 'sales':
return { 'background-color': "lightskyblue" };
case 'other.':
return { 'background-color': "lightsalmon" };
}
}
}












Loading