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.

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

Session4 assignment #17

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
6,762 changes: 6,762 additions & 0 deletions assignments/expense-manager/css/bootstrap.css

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions assignments/expense-manager/css/bootstrap.min.css

Large diffs are not rendered by default.

220 changes: 220 additions & 0 deletions assignments/expense-manager/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,220 @@
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/javascript" src="script/angular.min.js"></script>
<script type="text/javascript" src="script/main.js"></script>
<script type="text/javascript" src="script/expenseManagerIncomeService.js"></script>
<script type="text/javascript" src="script/expenseManagerExpenseService.js"></script>

</head>
<body>
<center>
<div ng-app="expenseManagerApp" style="width:1000px" class= "panel panel-default">
<div class="panel-heading text-center"><h2>Expense Manager Application</h2> </div>
<div ng-controller="showIncomeExpenseController">
<table class="table table-stripped" style="width:1000px">
<tr>
<th class="text-center">Total Income</th>
<th class="text-center">Total Expenses</th>
<th class="text-center">Total Balance</th>
</tr>
<tr>
<td class="text-center">{{totalIncome}}</td>
<td class="text-center">{{totalExpenses}}</td>
<td class="text-center">{{balance}}</td>
</tr>
</table>

<table class="table table-stripped" style="width:1000px">
<tr>
<td class="text-center"><button ng-click="showIncomeDetails()" class="btn-primary">Show Income</button></td>
<td class="text-center"><button ng-click="showExpenseDetails()" class="btn-primary">Show Expenses</button></td>
</tr>
</table>


<div ng-show="showIncome" class="text-center">
<h3 class="panel-heading">Income Details</h3>
<table class="table table-stripped" style="width:1000px">
<tr>
<th class="text-center">Payer</th>
<th class="text-center">Amount</th>
<th class="text-center">Date</th>
<th class="text-center">Mode Of Payment</th>
<th class="text-center"></th>
<th class="text-center"></th>
<th class="text-center"></th>
</tr>
<tr ng-repeat="income in incomeData">
<td>{{income.payer}}</td>
<td>{{income.amount}}</td>
<td>{{income.date}}</td>
<td>{{income.modeOfPayment}}</td>
<td ng-click="addIncome()"><i class="glyphicon glyphicon-plus"></i></td>
<td ng-click="editIncome($index)"><i class="glyphicon glyphicon-edit"></i></td>
<td ng-click="deleteIncome($index)"><i class="glyphicon glyphicon-trash"></i></td>
</tr>
</table>
</div>

<div ng-hide="showExpense" class="text-center">
<h3 class="panel-heading">Expense Details</h3>
<table class="table table-stripped" style="width:1000px">
<tr>
<th class="text-center">Payee</th>
<th class="text-center">Amount</th>
<th class="text-center">Date</th>
<th class="text-center">Mode Of Payment</th>
<th class="text-center"></th>
<th class="text-center"></th>
<th class="text-center"></th>
</tr>
<tr ng-repeat="expense in expenseData">
<td>{{expense.payee}}</td>
<td>{{expense.amount}}</td>
<td>{{expense.date}}</td>
<td>{{expense.modeOfPayment}}</td>
<td ng-click="addExpense()"><i class="glyphicon glyphicon-plus"></i></td>
<td ng-click="editExpense($index)"><i class="glyphicon glyphicon-edit"></i></td>
<td ng-click="deleteExpense($index)"><i class="glyphicon glyphicon-trash"></i></td>
</tr>
</table>
</div>

<div ng-show="showAddIncome">
<form name="incomeForm">
<h3 class="panel-heading">Add Income Details</h3>
<table class="table table-stripped" style="width:1000px">
<tr>
<td><input type="text" name="incomePayer" ng-model="addNew.payer" placeholder="Enter Payer Name" required>
<span style="color:red" ng-show="incomeForm.incomePayer.$dirty && incomeForm.incomePayer.$invalid">
Payer is required
</span></td>
<input ng-model="addNew.payee" hidden value="{{selfData}}">
</tr>
<tr>
<td>
<select ng-model="addNew.category">
<option value="">Enter Category Name</option>
<option ng-repeat="types in category" value="{{types}}">
{{types}}
</option>
</select>
</td>
</tr>
<tr>
<td>
<select ng-model="addNew.subcategory">
<option value="">Enter Sub-Category</option>
<option ng-repeat="types in subcategory" value="{{types}}">
{{types}}
</option>
</select>
</td>
</tr>
<tr>
<td><input type="number" name="incomeAmount" ng-model="addNew.amount" placeholder="Enter Amount" ng-pattern="/^[0-9]{1,7}$/" step="0.01" required><span style="color:red" ng-show="incomeForm.incomeAmount.$dirty && incomeForm.incomeAmount.$invalid">
Amount is invalid
</span></td>
</tr>
<tr>
<td><input name="incomeDate" ng-model="addNew.date" placeholder="Enter Date" required><span style="color:red" ng-show="incomeForm.incomeDate.$dirty && incomeForm.incomeDate.$invalid">
Date is required
</span></td>
</tr>
<tr>
<td>
<select name="incomeModeOfPayment" ng-model="addNew.modeOfPayment" required>
<option value="">Enter Mode Of Payment</option>
<option ng-repeat="modes in modeOfPayment" value="{{modes}}">
{{modes}}
</option>
</select>
<span style="color:red" ng-show="incomeForm.incomeModeOfPayment.$dirty && incomeForm.incomeModeOfPayment.$invalid">
Mode of Payment is required
</span></td>
</tr>
<tr>
<td><input name="notes" ng-model="addNew.notes" placeholder="Enter Notes" ng-maxlength="20">
<span style="color:red" ng-show="incomeForm.notes.$dirty && incomeForm.notes.$invalid">
Notes should not exceed 20 characters
</span></td>
<input ng-model="addNew.type" hidden value="Income">
</tr>
<tr><td><button ng-click="addIncomeSave()" ng-hide="addNew.indexData" ng-disabled="incomeForm.$invalid" class="btn-primary">Submit</button></td></tr>
<tr><td><button ng-click="showIncomeDetails()" ng-show="addNew.indexData" class="btn-primary">Done</button></td></tr>
</table>
</form>
</div>

<div ng-show="showAddExpense">
<form name="expenseForm">
<h3 class="panel-heading">Add Expense Details</h3>
<table class="table table-stripped" style="width:1000px">
<tr>
<td><input type="text" name="expensePayee" ng-model="addNewExpense.payee" placeholder="Enter Payee Name" required>
<span style="color:red" ng-show="expenseForm.expensePayee.$dirty && expenseForm.expensePayee.$invalid">
Payee is required
</span></td>
<input ng-model="addNewExpense.payee" hidden value="{{selfData}}">
</tr>
<tr>
<td>
<select ng-model="addNewExpense.category">
<option value="">Enter Category Name</option>
<option ng-repeat="types in category" value="{{types}}">
{{types}}
</option>
</select>
</td>
</tr>
<tr>
<td>
<select ng-model="addNewExpense.subcategory">
<option value="">Enter Sub-Category</option>
<option ng-repeat="types in subcategory" value="{{types}}">
{{types}}
</option>
</select>
</td>
</tr>
<tr>
<td><input type="number" name="expenseAmount" ng-model="addNewExpense.amount" placeholder="Enter Amount" ng-pattern="/^[0-9]{1,7}$/" step="0.01" required><span style="color:red" ng-show="expenseForm.expenseAmount.$dirty && expenseForm.expenseAmount.$invalid">
Amount is invalid
</span></td>
</tr>
<tr>
<td><input name="expenseDate" ng-model="addNewExpense.date" placeholder="Enter Date" required><span style="color:red" ng-show="expenseForm.expenseDate.$dirty && expenseForm.expenseDate.$invalid">
Date is required
</span></td>
</tr>
<tr>
<td>
<select name="expenseModeOfPayment" ng-model="addNewExpense.modeOfPayment" required>
<option value="">Enter Mode Of Payment</option>
<option ng-repeat="modes in modeOfPayment" value="{{modes}}">
{{modes}}
</option>
</select>
<span style="color:red" ng-show="expenseForm.expenseModeOfPayment.$dirty && expenseForm.expenseModeOfPayment.$invalid">
Mode of Payment is required
</span></td>
</tr>
<tr>
<td><input name="notes" ng-model="addNewExpense.notes" placeholder="Enter Notes" ng-maxlength="20">
<span style="color:red" ng-show="expenseForm.notes.$dirty && expenseForm.notes.$invalid">
Notes should not exceed 20 characters
</span></td>
<input ng-model="addNewExpense.type" hidden value="Income">
</tr>
<tr><td><button ng-click="addExpenseSave()" ng-hide="addNewExpense.indexData" ng-disabled="expenseForm.$invalid" class="btn-primary">Submit</button></td></tr>
<tr><td><button ng-click="showExpenseDetails()" ng-show="addNewExpense.indexData" class="btn-primary">Done</button></td></tr>
</table>
</form>
</div>
</div>
</div>
</center>
</body>
</html>
Loading