feat: Add Live Update toggle

src/app/chart/chart.component.ts

@@ -91,6 +91,7 @@ export class ChartComponent implements OnInit {
     this.chart.render();
 
     this.sub = interval(1000).subscribe(async val => {
+      if (this.logsService.liveUpdate) {
         let data = await this.logsService.getUpdates();
         let sensorReadings: any = data.map(log => {
           let d = log['sensorReadings'];
@@ -108,6 +109,7 @@ export class ChartComponent implements OnInit {
           dpsLength++;
         });
         this.chart.render();
+      }
     });
   }
 }

src/app/logs.service.ts

@@ -9,6 +9,8 @@ import { map, catchError, last } from 'rxjs/operators';
 export class LogsService {
   constructor(private httpClient: HttpClient) {}
 
+  liveUpdate: Boolean = true;
+
   previousData: Array<Object> | undefined = undefined;
 
   getLogs(): Promise<Array<Object>> {
@@ -30,6 +32,8 @@ export class LogsService {
   }
 
   async getUpdates(): Promise<Array<Object>> {
+    console.log(this.liveUpdate);
+
     let prevData = this.previousData;
     if (!this.previousData) {
       let data = await this.getLogs();

src/app/map/map.component.ts

@@ -48,6 +48,7 @@ export class MapComponent implements OnInit {
     var firstRun: Boolean = true;
 
     this.sub = interval(1000).subscribe(async val => {
+      if (this.logsService.liveUpdate || firstRun) {
         let data: Array<Object>;
         if (firstRun) {
           data = await this.logsService.getLogsFirstRun();
@@ -92,6 +93,7 @@ export class MapComponent implements OnInit {
             zoom: 22
           });
         }
+      }
     });
   }
 }

src/app/shell/header/header.component.html

@@ -35,6 +35,19 @@
             </button>
           </div>
         </div>
+        <div class="nav-item" style="padding-top: 6px;" ngbDropdown display="dynamic" placement="bottom-right">
+          <div title="{{ 'Live Update' | translate }}">
+            <input
+              type="checkbox"
+              name="toggle"
+              class="sw"
+              id="toggle-1"
+              [checked]="logService.liveUpdate"
+              (change)="logService.liveUpdate = !logService.liveUpdate"
+            />
+            <label for="toggle-1"></label>
+          </div>
+        </div>
       </div>
     </div>
   </nav>

src/app/shell/header/header.component.scss

@@ -7,3 +7,103 @@
 .nav-link.dropdown-toggle {
   cursor: pointer;
 }
+
+$sw-height: 30px;
+$sw-width: 51px;
+
+input {
+  &.sw {
+    opacity: 0;
+    position: absolute;
+    left: -9999px;
+    & + label {
+      user-select: none;
+      transition: 0.2s ease;
+      display: inline-block;
+      height: $sw-height;
+      width: $sw-width;
+      position: relative;
+      box-shadow: inset 0 0 0px 2px #e4e4e4;
+      border-radius: 60px;
+      &:before {
+        content: "";
+        position: absolute;
+        display: block;
+        height: $sw-height;
+        width: $sw-height;
+        top: 0;
+        left: 0;
+        border-radius: $sw-height/2;
+        background: rgba(76, 217, 100, 0);
+        transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
+      }
+
+      /* White toggle */
+      &:after {
+        content: "";
+        position: absolute;
+        display: block;
+        height: 28px;
+        width: 28px;
+        top: 50%;
+        margin-top: -14px;
+        left: 1px;
+        border-radius: 60px;
+        background: #fff;
+        box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, 0.04), 0 4px 9px hsla(0, 0%, 0%, 0.13),
+          0 3px 3px hsla(0, 0%, 0%, 0.05);
+        transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
+      }
+      span {
+        white-space: nowrap;
+        height: $sw-height;
+        line-height: $sw-height;
+        margin-left: $sw-width;
+        padding-left: 16px;
+      }
+    }
+    &:checked {
+      & + label:before {
+        width: $sw-width;
+        background: #2196f3;
+        transition: width 0.2s cubic-bezier(0, 0, 0, 0.1) !important;
+      }
+
+      & + label:after {
+        left: $sw-width - $sw-height + 1;
+      }
+
+      & + label {
+        box-shadow: inset 0 0 0px 25px #e4e4e4;
+        transition: box-shadow 2.5s cubic-bezier(0, 1.2, 0.94, 0.95);
+      }
+    }
+  }
+}
+
+/* Tooltip container */
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}

src/app/shell/header/header.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 import { I18nService } from '@app/core';
+import { LogsService } from '@app/logs.service';
 
 @Component({
   selector: 'app-header',
@@ -10,7 +11,7 @@ import { I18nService } from '@app/core';
 export class HeaderComponent implements OnInit {
   menuHidden = true;
 
-  constructor(private i18nService: I18nService) {}
+  constructor(private i18nService: I18nService, private logService: LogsService) {}
 
   ngOnInit() {}
 

src/translations/el-GR.json

@@ -6,5 +6,6 @@
   "Home | Aiolos": "Αρχική | Αίολος",
   "Map | Aiolos": "Χάρτης | Αίολος",
   "Chart | Aiolos": "Γράφημα | Αίολος",
-  "ChartTitle": "Μετρήσεις Αισθητήρων"
+  "ChartTitle": "Μετρήσεις Αισθητήρων",
+  "Live Update": "Ζωντανή Ενημέρωση"
 }

src/translations/en-US.json

@@ -6,5 +6,6 @@
   "Home | Aiolos": "Home | Aiolos",
   "Map | Aiolos": "Map | Aiolos",
   "Chart | Aiolos": "Chart | Aiolos",
-  "ChartTitle": "Sensor Readings"
+  "ChartTitle": "Sensor Readings",
+  "Live Update": "Live Update"
 }