-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathSMSJsonData.html
More file actions
123 lines (119 loc) · 7.89 KB
/
Copy pathSMSJsonData.html
File metadata and controls
123 lines (119 loc) · 7.89 KB
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.2/angular-messages.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="ui-bootstrap-tpls-2.2.0.js" type="text/javascript"></script>
<script src="datetime-picker.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="datacontroller.js" type="text/javascript"></script>
<title>SMS Coding Challenge</title>
</head>
<body >
<div class="col-sm-8 col-sm-offset-2">
<!--https://docs.angularjs.org/api/ng/type/form.FormController-->
<div class="page-header">
<h3>SMS Coding Challenge</h3>
</div>
<div ng-app="ngSMSCodingChallenge" ng-strict-di>
<div ng-controller="DataController as ctrl">
<div class="row">
<div class="col-md-6">
<div class="form-group col">
<label class="control-label col-md-4">{{FromTitle}}</label>
<p class="input-group">
<input type="text" class="form-control" ng-model="startDateFilter" ng-change="onDateChanged()" datetime-picker="{{dateFormat}}" ng-model="ctrl.pickerfrom.date" is-open="ctrl.pickerfrom.open" enable-time="false" datepicker-options="ctrl.pickerfrom.datepickerOptions" close-on-date-selection="true" datepicker-append-to-body="true" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'pickerfrom')"><i class="fa fa-calendar"></i></button>
</span>
</p>
</div>
<div class="form-group">
<label class="control-label col-md-4">{{ToTitle}}</label>
<p class="input-group">
<input type="text" class="form-control" ng-model="endDateFilter" ng-change="onDateChanged()" datetime-picker="{{dateFormat}}" ng-model="ctrl.pickerto.date" is-open="ctrl.pickerto.open" enable-time="false" datepicker-options="ctrl.pickerto.datepickerOptions" close-on-date-selection="true" datepicker-append-to-body="true" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="ctrl.openCalendar($event, 'pickerto')"><i class="fa fa-calendar"></i></button>
</span>
</p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">{{LocaleTitle}}</label>
<p class="input-group col-md-3">
<select class="form-control input-sm pull-right" ng-model="appLocale" ng-change="changeLocale()" ng-options="(loc) for loc in localeList"></select>
</p>
</div>
<div class="form-group">
<label class="control-label col-md-4">{{PageTitle}}</label>
<p class="input-group col-md-3 ">
<select class="form-control input-sm pull-right" ng-model="itemsPerPage" ng-change="perPage()" ng-options="(size) for size in pageSizes"></select>
</p>
</div>
</div>
</div>
<div class="col-md-12">
<table class="table table-striped table-hover">
<thead>
<tr>
<th width="7%" ><a style="cursor:pointer;" ng-click="sort('id')" ng-model="IDtitle">{{IDtitle}} <i class="fa fa-sort"></i></a></th>
<th width="18%"><a style="cursor:pointer;" ng-click="sort('city')">{{CityTitle}} <i class="fa fa-sort"></i></a></th>
<th width="15%" style="text-align:center;"><a style="cursor:pointer;" ng-click="sort('start_date')">{{StartDateTitle}}<i class="fa fa-sort"></i></a></th>
<th width="15%" style="text-align:center;"><a style="cursor:pointer;" ng-click="sort('end_date')">{{EndDateTitle}}<i class="fa fa-sort"></i></a></th>
<th width="10%" style="text-align:right;"> <a style="cursor:pointer;" ng-click="sort('price')">{{PriceTitle}} <i class="fa fa-sort"></i></a></th>
<th width="13%" style="text-align:center;"><a style="cursor:pointer;" ng-click="sort('status')">{{StatusTitle}}<i class="fa fa-sort"></i></a></th>
<th width="12%" style="text-align:center;"><a style="cursor:pointer;" ng-click="sort('color')">{{ColorTitle}}<i class="fa fa-sort"></i></a></th>
</tr>
</thead>
</table>
<div class="pre-scrollable">
<table class="table table-striped table-hover">
<tbody>
<tr ng-repeat="city in pagedItems[currentPage]| customOrderBy:sortingOrder:reverse ">
<td width="7%" > {{city.id}}</td>
<td width="18%"> {{city.city}}</td>
<td width="15%" style="text-align:center;"> {{city.start_date | date: dateFormat }}</td>
<td width="15%" style="text-align:center;"> {{city.end_date | date: dateFormat }}</td>
<td width="10%" style="text-align:right;"> {{city.price | priceFormat : decimalDelimiter }}</td>
<td width="13%" style="text-align:center;"> {{city.status}}</td>
<td width="12%" style="color: {{city.color}};text-align:center;" title="hue: {{city.color2}}">{{city.color}}</td>
</tr>
</tbody>
</table>
</div>
<table>
<tfoot>
<tr>
<td colspan="7">{{sizes}}
<div class="text-center">
<ul class="pagination">
<li ng-class="{disabled: currentPage == 0}">
<a href="javascript:;" ng-click="firstPage()">First</a>
</li>
<li ng-class="{disabled: currentPage == 0}">
<a href="javascript:;" ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range(0,pagedItems.length,5)" ng-class="{active: n == currentPage}" ng-click="setPage()">
<a href ng-bind="n + 1">1</a>
</li>
<li ng-class="{disabled: currentPage == pagedItems.length - 1}">
<a href="javascript:;" ng-click="nextPage()">Next »</a>
</li>
<li ng-class="{disabled: currentPage == pagedItems.length - 1}">
<a href="javascript:;" ng-click="lastPage()">Last</a>
</li>
</ul>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</body>
</html>