-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
181 lines (168 loc) · 8.77 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="styles/styles.min.css" type="text/css">
<title>Thrifty – учет ваших личных финансов</title>
<!-- old browser support -->
<script src="js/vendors/es5-shim-sham.min.js" type="text/javascript"></script>
<script src="js/vendors/angular.min.js" type="text/javascript"></script>
<!-- charts for app -->
<script src="js/node_modules/chart.js/dist/Chart.min.js"></script>
<script src="js/node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
<script src="js/app.js"></script>
<script src="js/config.js"></script>
<script src="js/filters.js"></script>
<script src="js/transactions.factory.js"></script>
<script src="js/controllers/menu.ctrl.js"></script>
<script src="js/controllers/main.ctrl.js"></script>
<script src="js/controllers/graphs.ctrl.js"></script>
<!-- all app in one file for perfomance matters-->
<!--<script src="js/app-in-one-file/app.js"></script>-->
</head>
<body ng-app="app" ng-controller="main">
<header ng-controller="MenuCtrl">
<div class="container clearfix">
<div class="logo">
<a href="#/">thrifty</a>
</div>
<a href="#/" id="touch-menu" ng-click="toggleMenu()">☰</a>
<nav>
<ul class="nav clearfix" ng-class="{true: 'menu-toggle'}[custom]">
<li><a href="#/" class="active">Главная</a></li>
<li><a href="#/">Вошли как guest</a></li>
<li><a href="#/">Выйти</a></li>
</ul>
</nav>
</div>
</header>
<section>
<div class="container clearfix">
<div id="content">
<h1>{{ label }}: {{ balance }} руб.</h1>
<h2>Добавить транзакцию</h2>
<form method="post">
<div class="row">
<div class="col-md-2">
<input type="text" id="money" name="money" placeholder="Сколько рублей?" ng-model="money"
autofocus>
</div>
<div class="col-md-1">
<div class="select-style">
<select id="action" name="action" ng-model="action" ng-change="changeCategories()">
<option value="received">получено</option>
<option value="spent" selected>потрачено</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="select-style">
<select id="category" name="category" ng-model="category"
ng-options="category for category in categories">
<option value="" selected>--Выберите категорию--</option>
</select>
</div>
</div>
<div class="col-md-4">
<input type="text" id="description" name="description"
placeholder="Добавьте описание."
ng-model="description" ng-keypress="addTask($event)">
</div>
<div class="col-md-0">
<button type="submit" class="btn" id="add-transaction"
ng-click="addTransaction()">Готово!</button>
</div>
</div>
</form>
<div class="row select-style" id="timeSelectMobile">
<select ng-model="selectedTimeFilter"
ng-options="filter.name for filter in timeFilters"
ng-change="selectTimeFilter(selectedTimeFilter)">
</select>
</div>
<div class="row filter">
<div class="col-md-6" ng-repeat="filter in filters">
<a href="#/" ng-class="{activeFilter: filter===selectedFilter}"
ng-click="selectFilter(filter)"
ng-bind="filter.name"></a>
</div>
<div class="col-md-7">
<div class="select-style" id="timeSelect">
<select id="timeFilter" ng-model="selectedTimeFilter"
ng-options="filter.name for filter in timeFilters"
ng-change="selectTimeFilter(selectedTimeFilter)">
</select>
</div>
</div>
</div>
<div id="data" ng-repeat="transaction in getFilteredTransactions() |
startFrom: startingItem() | limitTo: itemsPerPage">
<div class="wrap">
<div class="clearfix">
<div class="right cross">
<a href="#/" ng-click="deleteTransaction($index)">✕</a>
</div>
</div>
<div class="clearfix transactions">
<div class="left">
<div class="val {{ transaction.decoration }}" ng-bind="transaction.value"></div>
<div class="time">{{ transaction.time | date: 'dd.MM.yyyy HH:mm:ss' }}</div>
</div>
<div class="right">
<div class="descr" ng-bind="transaction.description"></div>
<div class="cat" ng-bind="transaction.category"
ng-class="{none: transaction.category === transaction.description}">
</div>
</div>
</div>
</div>
</div>
<div class="clearfix" id="pagination">
<div class="col-md-9">
<button type="submit" class="btn" ng-disabled="firstPage()" ng-click="pageBack()">
Назад
</button>
</div>
<div class="col-md-10">
{{currentPage + 1}} из {{ numberOfPages() }}
</div>
<div class="col-md-9">
<button type="submit" class="btn" ng-disabled="lastPage()"
ng-click="pageForward()">
Вперед
</button>
</div>
</div>
<h2 id="graphTitle">{{ graphTitle }}</h2>
<div class="graphs row" ng-class="{selectedGraph: selectedGraph === 'Все'}"
ng-controller="allCtrl">
<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-series="series" chart-options="options"
chart-dataset-override="datasetOverride" chart-hover="onHover">
</canvas>
</div>
<div class="graphs row" ng-class="{selectedGraph: selectedGraph === 'Траты'}"
ng-controller="spendCtrl">
<canvas class="chart chart-doughnut"
chart-data="data" chart-labels="labels">
</canvas>
</div>
<div class="graphs row" ng-class="{selectedGraph: selectedGraph === 'Доходы'}"
ng-controller="profitCtrl">
<canvas class="chart chart-doughnut"
chart-data="data" chart-labels="labels">
</canvas>
</div>
</div>
</div>
</section>
<footer>
<div class="container clearfix">
<span class="strike">© Все права защищены</span>. Работа выполнена Артёмом Дрёмовым летом 2016 года
в рамках Финтех-школы при Тинькофф банке.
</div>
</footer>
</body>
</html>