forked from metaware/angular-invoicing
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
114 lines (113 loc) · 5.73 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
<head>
<title>Simple Invoicing - Built with AngularJS</title>
<meta charset='utf-8'>
<meta name="description" content="AngularJS and Angular Code Example for creating Invoices and Invoicing Application">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body ng-app="invoicing" ng-controller="InvoiceCtrl" >
<div class="container" width="800px" id="invoice" >
<div class="row">
<div class="col-xs-12 heading">
INVOICE
</div>
</div>
<div class="row branding">
<div class="col-xs-6">
<div class="invoice-number-container">
<label for="invoice-number">Invoice #</label><input type="text" id="invoice-number" ng-model="invoice.invoice_number" />
</div>
</div>
<div class="col-xs-6 logo-container">
<input type="file" id="imgInp" />
<img ng-hide="logoRemoved" id="company_logo" ng-src="{{ logo }}" alt="your image" width="300" />
<div>
<div class="noPrint" ng-hide="printMode">
<a ng-click="editLogo()" href >Edit Logo</a>
<a ng-click="toggleLogo()" id="remove_logo" href >{{ logoRemoved ? 'Show' : 'Hide' }} logo</a>
</div>
</div>
</div>
</div>
<div class="row infos">
<div class="col-xs-6">
<div class="input-container"><input type="text" ng-model="invoice.customer_info.name"/></div>
<div class="input-container"><input type="text" ng-model="invoice.customer_info.web_link"/></div>
<div class="input-container"><input type="text" ng-model="invoice.customer_info.address1"/></div>
<div class="input-container"><input type="text" ng-model="invoice.customer_info.address2"/></div>
<div class="input-container"><input type="text" ng-model="invoice.customer_info.postal"/></div>
<div class="input-container" data-ng-hide='printMode'>
<select ng-model='currencySymbol' ng-options='currency.symbol as currency.name for currency in availableCurrencies'></select>
</div>
</div>
<div class="col-xs-6 right">
<div class="input-container"><input type="text" ng-model="invoice.company_info.name"/></div>
<div class="input-container"><input type="text" ng-model="invoice.company_info.web_link"/></div>
<div class="input-container"><input type="text" ng-model="invoice.company_info.address1"/></div>
<div class="input-container"><input type="text" ng-model="invoice.company_info.address2"/></div>
<div class="input-container"><input type="text" ng-model="invoice.company_info.postal"/></div>
</div>
</div>
<div class="items-table">
<div class="row header">
<div class="col-xs-1"> </div>
<div class="col-xs-5">Description</div>
<div class="col-xs-2">Quantity</div>
<div class="col-xs-2">Cost {{currencySymbol}}</div>
<div class="col-xs-2 text-right">Total</div>
</div>
<div class="row invoice-item" ng-repeat="item in invoice.items" ng-animate="'slide-down'">
<div class="col-xs-1 remove-item-container">
<a href ng-hide="printMode" ng-click="removeItem(item)" class="btn btn-danger">[X]</a>
</div>
<div class="col-xs-5 input-container">
<input ng-model="item.description" placeholder="Description" />
</div>
<div class="col-xs-2 input-container">
<input ng-model="item.qty" value="1" size="4" ng-required ng-validate="integer" placeholder="Quantity" />
</div>
<div class="col-xs-2 input-container">
<input ng-model="item.cost" value="0.00" ng-required ng-validate="number" size="6" placeholder="Cost" />
</div>
<div class="col-xs-2 text-right input-container">
{{item.cost * item.qty | currency: currencySymbol}}
</div>
</div>
<div class="row invoice-item">
<div class="col-xs-12 add-item-container" ng-hide="printMode">
<a class="btn btn-primary" href ng-click="addItem()" >[+]</a>
</div>
</div>
<div class="row">
<div class="col-xs-10 text-right">Sub Total</div>
<div class="col-xs-2 text-right">{{invoiceSubTotal() | currency: currencySymbol}}</div>
</div>
<div class="row">
<div class="col-xs-10 text-right">Tax(%): <input ng-model="invoice.tax" ng-validate="number" style="width:43px"></div>
<div class="col-xs-2 text-right">{{calculateTax() | currency: currencySymbol}}</div>
</div>
<div class="row">
<div class="col-xs-10 text-right">Grand Total:</div>
<div class="col-xs-2 text-right">{{calculateGrandTotal() | currency: currencySymbol}}</div>
</div>
</div>
<div class="row noPrint actions">
<a href="#" class="btn btn-primary" ng-show="printMode" ng-click="printInfo()">Print</a>
<a href="#" class="btn btn-primary" ng-click="clearLocalStorage()">Reset</a>
<a href="#" class="btn btn-primary" ng-hide="printMode" ng-click="printMode = true;">Turn On Print Mode</a>
<a href="#" class="btn btn-primary" ng-show="printMode" ng-click="printMode = false;">Turn Off Print Mode</a>
</div>
</div>
<div ng-hide="printMode" class="copy noPrint">
<a href="https://jasdeep.ca/?utm_source=angular_invoicing">Jasdeep Singh</a> &
<a href="https://github.com/manpreetrules">Manpreet Singh</a>
Made with
<span class="love">♥</span> in Toronto by
<a href="https://metawarelabs.com/?utm_source=angular_invoicing">Metaware Labs Inc.</a>
</div>
</body>
</html>