Skip to content

Commit 4664593

Browse files
hikalkanhikalkan
committed
Added dashboard.
1 parent eb9d362 commit 4664593

File tree

6 files changed

+924
-432
lines changed

6 files changed

+924
-432
lines changed

‎angular/.angular-cli.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,16 @@
5454
"../node_modules/push.js/push.min.js",
5555
"../node_modules/jquery-slimscroll/jquery.slimscroll.min.js",
5656
"../node_modules/node-waves/dist/waves.min.js",
57+
"../node_modules/jquery-countto/jquery.countTo.js",
58+
"../node_modules/raphael/raphael.min.js",
59+
"../node_modules/morris.js/morris.min.js",
60+
"../node_modules/chart.js/dist/Chart.bundle.min.js",
61+
"../node_modules/flot/jquery.flot.js",
62+
"../node_modules/flot/jquery.flot.resize.js",
63+
"../node_modules/flot/jquery.flot.pie.js",
64+
"../node_modules/flot/jquery.flot.categories.js",
65+
"../node_modules/flot/jquery.flot.time.js",
66+
"../node_modules/jquery-sparkline/jquery.sparkline.min.js",
5767
"../node_modules/abp-web-resources/Abp/Framework/scripts/abp.js",
5868
"../node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.jquery.js",
5969
"../node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.toastr.js",

‎angular/package.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,19 +37,25 @@
3737
"block-ui": "^2.70.1",
3838
"bootstrap": "^3.3.7",
3939
"bootstrap-select": "^1.12.2",
40+
"chart.js": "^2.6.0",
4041
"core-js": "^2.4.1",
4142
"famfamfam-flags": "^1.0.0",
43+
"flot": "^0.8.0-alpha",
4244
"font-awesome": "^4.7.0",
4345
"jquery": "^3.1.1",
46+
"jquery-countto": "^1.2.0",
4447
"jquery-migrate": "^3.0.0",
4548
"jquery-slimscroll": "^1.3.8",
49+
"jquery-sparkline": "^2.4.0",
4650
"js-cookie": "^2.1.4",
4751
"lodash": "^4.17.4",
4852
"moment": "^2.18.1",
4953
"moment-timezone": "^0.5.13",
54+
"morris.js": "^0.5.0",
5055
"ngx-bootstrap": "^1.6.6",
5156
"node-waves": "^0.7.5",
5257
"push.js": "0.0.12",
58+
"raphael": "^2.2.7",
5359
"rxjs": "^5.3.0",
5460
"signalr": "^2.2.1",
5561
"simple-line-icons": "^2.4.1",

‎angular/src/app/home/home.component.html

Lines changed: 308 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,310 @@
11
<div [@routerTransition]>
2-
<div class="block-header">
3-
<h2>{{l('WellcomeMessage')}}</h2>
4-
</div>
2+
3+
<div class="block-header">
4+
<h2>SAMPLE DASHBOARD</h2>
5+
</div>
6+
7+
<!-- Widgets -->
8+
<div class="row clearfix">
9+
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
10+
<div class="info-box bg-pink hover-expand-effect">
11+
<div class="icon">
12+
<i class="material-icons">playlist_add_check</i>
13+
</div>
14+
<div class="content">
15+
<div class="text">NEW TASKS</div>
16+
<div class="number count-to" data-from="0" data-to="125" data-speed="1000" data-fresh-interval="20"></div>
17+
</div>
18+
</div>
19+
</div>
20+
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
21+
<div class="info-box bg-cyan hover-expand-effect">
22+
<div class="icon">
23+
<i class="material-icons">help</i>
24+
</div>
25+
<div class="content">
26+
<div class="text">NEW TICKETS</div>
27+
<div class="number count-to" data-from="0" data-to="257" data-speed="1000" data-fresh-interval="20"></div>
28+
</div>
29+
</div>
30+
</div>
31+
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
32+
<div class="info-box bg-light-green hover-expand-effect">
33+
<div class="icon">
34+
<i class="material-icons">forum</i>
35+
</div>
36+
<div class="content">
37+
<div class="text">NEW COMMENTS</div>
38+
<div class="number count-to" data-from="0" data-to="243" data-speed="1000" data-fresh-interval="20"></div>
39+
</div>
40+
</div>
41+
</div>
42+
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
43+
<div class="info-box bg-orange hover-expand-effect">
44+
<div class="icon">
45+
<i class="material-icons">person_add</i>
46+
</div>
47+
<div class="content">
48+
<div class="text">NEW VISITORS</div>
49+
<div class="number count-to" data-from="0" data-to="1225" data-speed="1000" data-fresh-interval="20"></div>
50+
</div>
51+
</div>
52+
</div>
53+
</div>
54+
<!-- #END# Widgets -->
55+
<!-- CPU Usage -->
56+
<div class="row clearfix">
57+
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
58+
<div class="card">
59+
<div class="header">
60+
<div class="row clearfix">
61+
<div class="col-xs-12 col-sm-6">
62+
<h2>CPU USAGE (%)</h2>
63+
</div>
64+
<div class="col-xs-12 col-sm-6 align-right">
65+
<div class="switch panel-switch-btn">
66+
<span class="m-r-10 font-12">REAL TIME</span>
67+
<label>OFF<input type="checkbox" id="realtime" checked><span class="lever switch-col-cyan"></span>ON</label>
68+
</div>
69+
</div>
70+
</div>
71+
<ul class="header-dropdown m-r--5">
72+
<li class="dropdown">
73+
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
74+
<i class="material-icons">more_vert</i>
75+
</a>
76+
<ul class="dropdown-menu pull-right">
77+
<li><a href="javascript:void(0);">Action</a></li>
78+
<li><a href="javascript:void(0);">Another action</a></li>
79+
<li><a href="javascript:void(0);">Something else here</a></li>
80+
</ul>
81+
</li>
82+
</ul>
83+
</div>
84+
<div class="body">
85+
<div id="real_time_chart" class="dashboard-flot-chart"></div>
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
<!-- #END# CPU Usage -->
91+
<div class="row clearfix">
92+
<!-- Visitors -->
93+
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
94+
<div class="card">
95+
<div class="body bg-pink">
96+
<div class="sparkline" data-type="line" data-spot-Radius="4" data-highlight-Spot-Color="rgb(233, 30, 99)" data-highlight-Line-Color="#fff"
97+
data-min-Spot-Color="rgb(255,255,255)" data-max-Spot-Color="rgb(255,255,255)" data-spot-Color="rgb(255,255,255)"
98+
data-offset="90" data-width="100%" data-height="92px" data-line-Width="2" data-line-Color="rgba(255,255,255,0.7)"
99+
data-fill-Color="rgba(0, 188, 212, 0)">
100+
12,10,9,6,5,6,10,5,7,5,12,13,7,12,11
101+
</div>
102+
<ul class="dashboard-stat-list">
103+
<li>
104+
TODAY
105+
<span class="pull-right"><b>1 200</b> <small>USERS</small></span>
106+
</li>
107+
<li>
108+
YESTERDAY
109+
<span class="pull-right"><b>3 872</b> <small>USERS</small></span>
110+
</li>
111+
<li>
112+
LAST WEEK
113+
<span class="pull-right"><b>26 582</b> <small>USERS</small></span>
114+
</li>
115+
</ul>
116+
</div>
117+
</div>
118+
</div>
119+
<!-- #END# Visitors -->
120+
<!-- Latest Social Trends -->
121+
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
122+
<div class="card">
123+
<div class="body bg-cyan">
124+
<div class="m-b--35 font-bold">LATEST SOCIAL TRENDS</div>
125+
<ul class="dashboard-stat-list">
126+
<li>
127+
#socialtrends
128+
<span class="pull-right">
129+
<i class="material-icons">trending_up</i>
130+
</span>
131+
</li>
132+
<li>
133+
#materialdesign
134+
<span class="pull-right">
135+
<i class="material-icons">trending_up</i>
136+
</span>
137+
</li>
138+
<li>#adminbsb</li>
139+
<li>#freeadmintemplate</li>
140+
<li>#bootstraptemplate</li>
141+
<li>
142+
#freehtmltemplate
143+
<span class="pull-right">
144+
<i class="material-icons">trending_up</i>
145+
</span>
146+
</li>
147+
</ul>
148+
</div>
149+
</div>
150+
</div>
151+
<!-- #END# Latest Social Trends -->
152+
<!-- Answered Tickets -->
153+
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
154+
<div class="card">
155+
<div class="body bg-teal">
156+
<div class="font-bold m-b--35">ANSWERED TICKETS</div>
157+
<ul class="dashboard-stat-list">
158+
<li>
159+
TODAY
160+
<span class="pull-right"><b>12</b> <small>TICKETS</small></span>
161+
</li>
162+
<li>
163+
YESTERDAY
164+
<span class="pull-right"><b>15</b> <small>TICKETS</small></span>
165+
</li>
166+
<li>
167+
LAST WEEK
168+
<span class="pull-right"><b>90</b> <small>TICKETS</small></span>
169+
</li>
170+
<li>
171+
LAST MONTH
172+
<span class="pull-right"><b>342</b> <small>TICKETS</small></span>
173+
</li>
174+
<li>
175+
LAST YEAR
176+
<span class="pull-right"><b>4 225</b> <small>TICKETS</small></span>
177+
</li>
178+
<li>
179+
ALL
180+
<span class="pull-right"><b>8 752</b> <small>TICKETS</small></span>
181+
</li>
182+
</ul>
183+
</div>
184+
</div>
185+
</div>
186+
<!-- #END# Answered Tickets -->
187+
</div>
188+
<div class="row clearfix">
189+
<!-- Task Info -->
190+
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
191+
<div class="card">
192+
<div class="header">
193+
<h2>TASK INFOS</h2>
194+
<ul class="header-dropdown m-r--5">
195+
<li class="dropdown">
196+
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
197+
<i class="material-icons">more_vert</i>
198+
</a>
199+
<ul class="dropdown-menu pull-right">
200+
<li><a href="javascript:void(0);">Action</a></li>
201+
<li><a href="javascript:void(0);">Another action</a></li>
202+
<li><a href="javascript:void(0);">Something else here</a></li>
203+
</ul>
204+
</li>
205+
</ul>
206+
</div>
207+
<div class="body">
208+
<div class="table-responsive">
209+
<table class="table table-hover dashboard-task-infos">
210+
<thead>
211+
<tr>
212+
<th>#</th>
213+
<th>Task</th>
214+
<th>Status</th>
215+
<th>Manager</th>
216+
<th>Progress</th>
217+
</tr>
218+
</thead>
219+
<tbody>
220+
<tr>
221+
<td>1</td>
222+
<td>Task A</td>
223+
<td><span class="label bg-green">Doing</span></td>
224+
<td>John Doe</td>
225+
<td>
226+
<div class="progress">
227+
<div class="progress-bar bg-green" role="progressbar" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100" style="width: 62%"></div>
228+
</div>
229+
</td>
230+
</tr>
231+
<tr>
232+
<td>2</td>
233+
<td>Task B</td>
234+
<td><span class="label bg-blue">To Do</span></td>
235+
<td>John Doe</td>
236+
<td>
237+
<div class="progress">
238+
<div class="progress-bar bg-blue" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"></div>
239+
</div>
240+
</td>
241+
</tr>
242+
<tr>
243+
<td>3</td>
244+
<td>Task C</td>
245+
<td><span class="label bg-light-blue">On Hold</span></td>
246+
<td>John Doe</td>
247+
<td>
248+
<div class="progress">
249+
<div class="progress-bar bg-light-blue" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%"></div>
250+
</div>
251+
</td>
252+
</tr>
253+
<tr>
254+
<td>4</td>
255+
<td>Task D</td>
256+
<td><span class="label bg-orange">Wait Approvel</span></td>
257+
<td>John Doe</td>
258+
<td>
259+
<div class="progress">
260+
<div class="progress-bar bg-orange" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%"></div>
261+
</div>
262+
</td>
263+
</tr>
264+
<tr>
265+
<td>5</td>
266+
<td>Task E</td>
267+
<td>
268+
<span class="label bg-red">Suspended</span>
269+
</td>
270+
<td>John Doe</td>
271+
<td>
272+
<div class="progress">
273+
<div class="progress-bar bg-red" role="progressbar" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100" style="width: 87%"></div>
274+
</div>
275+
</td>
276+
</tr>
277+
</tbody>
278+
</table>
279+
</div>
280+
</div>
281+
</div>
282+
</div>
283+
<!-- #END# Task Info -->
284+
<!-- Browser Usage -->
285+
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
286+
<div class="card">
287+
<div class="header">
288+
<h2>BROWSER USAGE</h2>
289+
<ul class="header-dropdown m-r--5">
290+
<li class="dropdown">
291+
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
292+
<i class="material-icons">more_vert</i>
293+
</a>
294+
<ul class="dropdown-menu pull-right">
295+
<li><a href="javascript:void(0);">Action</a></li>
296+
<li><a href="javascript:void(0);">Another action</a></li>
297+
<li><a href="javascript:void(0);">Something else here</a></li>
298+
</ul>
299+
</li>
300+
</ul>
301+
</div>
302+
<div class="body">
303+
<div id="donut_chart" class="dashboard-donut-chart"></div>
304+
</div>
305+
</div>
306+
</div>
307+
<!-- #END# Browser Usage -->
308+
</div>
309+
5310
</div>

0 commit comments

Comments
 (0)