Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
base of statistics branch, added metrics service
  • Loading branch information
ema14006 committed Mar 19, 2019
1 parent 0d19775 commit 727026d
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 186 deletions.
12 changes: 12 additions & 0 deletions src/app/services/metrics.service.spec.ts
@@ -0,0 +1,12 @@
import { TestBed } from '@angular/core/testing';

import { MetricsService } from './metrics.service';

describe('MetricsService', () => {
beforeEach(() => TestBed.configureTestingModule({}));

it('should be created', () => {
const service: MetricsService = TestBed.get(MetricsService);
expect(service).toBeTruthy();
});
});
23 changes: 23 additions & 0 deletions src/app/services/metrics.service.ts
@@ -0,0 +1,23 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import { ReplaySubject } from 'rxjs';


@Injectable({
providedIn: 'root'
})
export class MetricsService {

constructor(private http: HttpClient) { }

getRecentMetrics(token) {
return this.http.post('http://localhost:3000/data/exp/month/1', {
headers: {
Authorization: 'Bearer ' + 'eyJhbGciOiJSUzI1NiJ9.eyJpZCI6MywiZW1haWwiOiJ0ZXN0LmFjY291bnRAdWNvbm4uZWR1Iiwib3JnX2lkIjoxLCJmaXJzdF9uYW1lIjoiVGVzdCIsImxhc3RfbmFtZSI6IkFjY291bnQiLCJwZXJtaXNzaW9ucyI6eyIxIjp7ImlkIjo0LCJuYW1lIjoiQ2xpZW50IiwicGVybWlzc2lvbnMiOnsiZ2VuX3JlYWQiOjEsImdlbl9leGVjdXRlIjowLCJkYXRhX3JlYWQiOjEsImRhdGFfZXhwb3J0IjowLCJvcmdfbWFuYWdlIjowfX19fQ.CPMhtApFtRzyPjkRrt5NSVeqWvrn57UI0ifb2QB9rkRE97WvNdCp8h8cAdR-X5Ft5K6jMjXbEsgsmBxEvc6z7Q'
}
});
}
}
120 changes: 0 additions & 120 deletions src/app/statistics/statistics.component.css
@@ -1,120 +0,0 @@
.bubble {
width: 75px;
height: 75px;
border-radius: 50%;
font-size: 25px;
color: #fff;
line-height: 0px;
background:#00cc66;
}
input
{
background: transparent;
border: none;
margin-left: 20px;
margin-top: 20px
}
div {
margin: 20px;
display: inline-block;
}

.tg-list {
text-align: center;
display: flex;
align-items: center;
}
.tg-list-item {
margin: 0 2em;
}
.tgl {
display: none;
}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
box-sizing: border-box;
}
.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {
background: none;
}
.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {
background: none;
}
.tgl + .tgl-btn {
outline: 0;
display: block;
width: 4em;
height: 2em;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
position: relative;
display: block;
content: "";
width: 50%;
height: 100%;
}
.tgl + .tgl-btn:after {
left: 0;
}
.tgl + .tgl-btn:before {
display: none;
}
.tgl:checked + .tgl-btn:after {
left: 50%;
}
.tgl-flip + .tgl-btn {
padding: 2px;
transition: all .2s ease;
font-family: sans-serif;
-webkit-perspective: 100px;
perspective: 100px;
}
.tgl-flip + .tgl-btn:after, .tgl-flip + .tgl-btn:before {
display: inline-block;
transition: all .4s ease;
width: 100%;
text-align: center;
position: absolute;
line-height: 2em;
font-weight: bold;
color: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 4px;
}
.tgl-flip + .tgl-btn:after {
content: attr(data-tg-on);
background: #02C66F;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.tgl-flip + .tgl-btn:before {
background: #FF3A19;
content: attr(data-tg-off);
}
.tgl-flip + .tgl-btn:active:before {
-webkit-transform: rotateY(-20deg);
transform: rotateY(-20deg);
}
.tgl-flip:checked + .tgl-btn:before {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.tgl-flip:checked + .tgl-btn:after {
-webkit-transform: rotateY(0);
transform: rotateY(0);
left: 0;
background: #7FC6A6;
}
.tgl-flip:checked + .tgl-btn:active:after {
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg);
}
78 changes: 14 additions & 64 deletions src/app/statistics/statistics.component.html
@@ -1,67 +1,17 @@
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="1" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-stat" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="2" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="3" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="4" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="5" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="6" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="7" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="8" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="9" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="10" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="11" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="12" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="13" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="14" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="15" data-tg-on="On" for="cb5"></label>
</div>
<div class="stat-status" id="status">
<input class="tgl tgl-flip" id="cb5" type="checkbox" />
<label class="tgl-btn" data-tg-off="16" data-tg-on="On" for="cb5"></label>
</div>
<div class="container ">
<div class="row mt-3 text-center">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
1
</div>
<div class="col-md-4">
1
</div>
</div>
</div>

<!-- <div class="stat-temp" id="temp">
<form class="bubble">
<input type="number" name="quantity" min="30" max="100" placeholder="65">
Expand Down
17 changes: 15 additions & 2 deletions src/app/statistics/statistics.component.ts
@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { MetricsService } from '../services/metrics.service';

@Component({
selector: 'app-statistics',
Expand All @@ -7,9 +8,21 @@ import { Component, OnInit } from '@angular/core';
})
export class StatisticsComponent implements OnInit {

constructor() { }
constructor(public data: MetricsService) { }

ngOnInit()
{

const jsonToken = localStorage.getItem('auth_token');
try {
this.data.getRecentMetrics(jsonToken).subscribe((data) => {
console.log(data);

});
} catch (err) {
return err;
}

ngOnInit() {
}

}

0 comments on commit 727026d

Please sign in to comment.