From 727026dfe3713f75b1eaef74f1956ba764812c90 Mon Sep 17 00:00:00 2001
From: Emil Abraham <emil.abraham@uconn.edu>
Date: Mon, 18 Mar 2019 22:00:25 -0400
Subject: [PATCH] base of statistics branch, added metrics service

---
 src/app/services/metrics.service.spec.ts     |  12 ++
 src/app/services/metrics.service.ts          |  23 ++++
 src/app/statistics/statistics.component.css  | 120 -------------------
 src/app/statistics/statistics.component.html |  78 +++---------
 src/app/statistics/statistics.component.ts   |  17 ++-
 5 files changed, 64 insertions(+), 186 deletions(-)
 create mode 100644 src/app/services/metrics.service.spec.ts
 create mode 100644 src/app/services/metrics.service.ts

diff --git a/src/app/services/metrics.service.spec.ts b/src/app/services/metrics.service.spec.ts
new file mode 100644
index 0000000..56233d4
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/services/metrics.service.ts b/src/app/services/metrics.service.ts
new file mode 100644
index 0000000..0b4f3e0
--- /dev/null
+++ b/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'
+      }
+    });
+  }
+}
diff --git a/src/app/statistics/statistics.component.css b/src/app/statistics/statistics.component.css
index c516a24..e69de29 100644
--- a/src/app/statistics/statistics.component.css
+++ b/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);
-}
diff --git a/src/app/statistics/statistics.component.html b/src/app/statistics/statistics.component.html
index e22bc58..7f531b3 100644
--- a/src/app/statistics/statistics.component.html
+++ b/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">
diff --git a/src/app/statistics/statistics.component.ts b/src/app/statistics/statistics.component.ts
index 3ee3b54..8619c41 100644
--- a/src/app/statistics/statistics.component.ts
+++ b/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',
@@ -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() {
   }
 
 }