FOGL-7765-patch2: Carousel created for image readings

src/app/components/common/carousel/carousel.component.css

@@ -0,0 +1,67 @@
+* {
+  box-sizing: border-box
+}
+
+.slideshow-container {
+  max-width: 2000px;
+  position: relative;
+  margin: auto;
+  top: 15%;
+  height: 73vh;
+}
+
+.slides {
+  display: none;
+}
+
+.prev,
+.next {
+  cursor: pointer;
+  position: absolute;
+  top: 36%;
+  font-weight: bold;
+  font-size: 15px;
+  transition: 0.6s ease;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background-color: white;
+  color: black;
+  display: none;
+  padding-top: 6px;
+  user-select: none;
+}
+
+.prev {
+  left: 0px;
+  padding-right: 2px;
+}
+
+.next {
+  right: 0;
+  padding-left: 2px;
+}
+
+.prev:hover,
+.next:hover {
+  background-color: grey;
+}
+
+.fade {
+  animation-name: fade;
+  animation-duration: 1.5s;
+}
+
+@keyframes fade {
+  from {
+    opacity: .4
+  }
+
+  to {
+    opacity: 1
+  }
+}
+
+.margin-top {
+  margin-top: 20px;
+}

src/app/components/common/carousel/carousel.component.html

@@ -0,0 +1,20 @@
+<div class="slideshow-container">
+  <ng-container *ngFor="let read of imageReadings">
+    <div class="slides fade">
+      <div id="tab-content">
+        <img [src]="read.image" alt={{read.datapoint}}>
+      </div>
+      <small
+        class="has-text-centered text-secondary has-text-grey-lighter is-block margin-top">{{getImageReadingsDimensions(read.imageData)}}
+        Width: {{imageReadingsDimensions.width}}px, Height:
+        {{imageReadingsDimensions.height}}px, Depth: {{imageReadingsDimensions.depth}}px
+      </small>
+      <small class="has-text-centered text-secondary has-text-grey-lighter is-block">{{read?.datapoint}},
+        Timestamp:
+        {{read?.timestamp}}
+      </small>
+    </div>
+  </ng-container>
+  <a class="prev" id="prev" (click)="changeSlide(-1)">&#10094;</a>
+  <a class="next" id="next" (click)="changeSlide(1)">&#10095;</a>
+</div>

src/app/components/common/carousel/carousel.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CarouselComponent } from './carousel.component';
+
+describe('CarouselComponent', () => {
+  let component: CarouselComponent;
+  let fixture: ComponentFixture<CarouselComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CarouselComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CarouselComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/common/carousel/carousel.component.ts

@@ -0,0 +1,72 @@
+import { Component, Input, OnDestroy } from '@angular/core';
+
+@Component({
+  selector: 'app-carousel',
+  templateUrl: './carousel.component.html',
+  styleUrls: ['./carousel.component.css']
+})
+export class CarouselComponent implements OnDestroy {
+
+  slideIndex = 1;
+  imageReadingsDimensions = { width: 0, height: 0, depth: 0 };
+  @Input() imageReadings: any;
+  intervalId: any;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  ngAfterViewInit() {
+    let time = +localStorage.getItem('PING_INTERVAL');
+    // console.log(this.imageReadings);
+    this.intervalId = setInterval(() => {
+      // console.log(this.imageReadings);
+      // let slides = <HTMLCollectionOf<HTMLElement>>document.getElementsByClassName("slides");
+      // console.log(slides);
+      this.slideIndex = 1;
+      this.showSlides(this.slideIndex);
+    }, time+100);
+    this.showSlides(this.slideIndex);
+  }
+
+  changeSlide(n) {
+    this.slideIndex += n;
+    this.showSlides(this.slideIndex);
+  }
+
+  showSlides(n) {
+    let slides = <HTMLCollectionOf<HTMLElement>>document.getElementsByClassName("slides");
+    if (n >= slides.length) {
+      document.getElementById('next').style.display = "none";
+    }
+    else {
+      document.getElementById('next').style.display = "block";
+    }
+    if (n <= 1) {
+      document.getElementById('prev').style.display = "none";
+    }
+    else {
+      document.getElementById('prev').style.display = "block";
+    }
+
+    for (let i = 0; i < slides.length; i++) {
+      slides[i].style.display = "none";
+    }
+    slides[this.slideIndex - 1].style.display = "block";
+  }
+
+  getImageReadingsDimensions(value) {
+    let val = value.replace('__DPIMAGE:', '');
+    let index = val.indexOf('_');
+    let dimensions = val.slice(0, index).split(',');
+    this.imageReadingsDimensions.width = dimensions[0];
+    this.imageReadingsDimensions.height = dimensions[1];
+    this.imageReadingsDimensions.depth = dimensions[2];
+  }
+
+  ngOnDestroy(): void {
+    clearInterval(this.intervalId);
+  }
+
+}

src/app/components/core/asset-readings/readings-graph/readings-graph.component.css

@@ -47,9 +47,12 @@
   .summary {
     width: 736px;
   }
-  .image-with-data {
+  .image-data {
+    height: calc(50vh - 100px) !important;
+    margin-top: 20px !important;  
+  }
+  .image-reading {
     height: calc(50vh - 100px) !important;
-    margin-top: 20px !important;
   }
 }
 
@@ -150,22 +153,25 @@ table.is-borderless tr {
   margin-bottom: 0px !important;
 }
 
-.margin-bottom {
-  margin-bottom: 20px;
-}
-
 .margin-top {
   margin-top: -5px;
 }
 
-.image-with-data {
-  overflow-y: scroll;
+.image-data {
+  overflow-y: auto;
   height: calc(100vh - 100px);
 }
 
+.image-reading {
+  overflow-y: auto;
+  height: calc(100vh - 100px);
+  background-color: rgba(20, 20, 20, 0.8);
+}
+
 .image-reading-only {
-  overflow-y: scroll;
+  overflow-y: auto;
   height: calc(100vh - 100px);
+  background-color: rgba(20, 20, 20, 0.8);
 }
 
 .table-heading {
@@ -180,4 +186,15 @@ table.is-borderless tr {
   padding-left: 0px !important;
   padding-top: 0px !important;
   padding-bottom: 0.2em !important;
+}
+
+.auto-refresh {
+  margin-right: 30px;
+  font-size: .75rem;
+  color: #363636;
+  font-weight: 700;
+}
+
+.checkmark {
+  vertical-align: middle !important;
 }

src/app/components/core/asset-readings/readings-graph/readings-graph.component.html

@@ -40,6 +40,15 @@
           <i class="fa fa-sm fa-forward" aria-hidden="true"></i>
         </button>
       </ng-container>
+      <ng-container *ngIf="isLatestReadings">
+        <div class="auto-refresh">
+          <label class="checkbox">
+            <input class="checkmark" [disabled]="graphRefreshInterval === -1" type="checkbox" [checked]='isAlive'
+              (click)="toggleLatestReadingAutoRefresh($event.target.checked)">
+            Auto Refresh
+          </label>
+        </div>
+      </ng-container>
       <div class="close">
         <button class="delete" aria-label="close" (click)="toggleModal(false);loadPage = false"></button>
       </div>
@@ -212,21 +221,10 @@
                 </div>
                 <div *ngIf="selectedTab === 5" data-content="5">
                   <div class="columns margin-top">
-                    <div class="has-text-centered column" [ngClass]="{'is-12, image-reading-only': isEmptyObject(stringTypeReadingsList), 'is-8, image-with-data': !isEmptyObject(stringTypeReadingsList)}">
-                      <ng-container *ngFor="let read of imageReadings">
-                        <div id="tab-content">
-                          <img [src]="read.image" alt={{read.datapoint}}>
-                        </div>
-                        <small class="has-text-centered text-secondary has-text-grey-dark is-block">Width: {{imageReadingsDimensions.width}}px, Height:
-                          {{imageReadingsDimensions.height}}px, Depth: {{imageReadingsDimensions.depth}}px
-                        </small>
-                        <small class="has-text-centered text-secondary has-text-grey-dark is-block margin-bottom">{{read?.datapoint}},
-                          Timestamp:
-                          {{read?.timestamp}}
-                        </small>
-                      </ng-container>
+                    <div class="has-text-centered column" [ngClass]="{'is-12, image-reading-only': isEmptyObject(stringTypeReadingsList), 'is-8, image-reading': !isEmptyObject(stringTypeReadingsList)}">
+                      <app-carousel [imageReadings]="imageReadings"></app-carousel>
                     </div>
-                    <div *ngIf="!isEmptyObject(stringTypeReadingsList)" data-content="3" class="column is-4 image-with-data">
+                    <div *ngIf="!isEmptyObject(stringTypeReadingsList)" data-content="3" class="column is-4 image-data">
                       <table class="table is-responsive is-borderless data-table">
                         <thead>
                           <tr>

src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts

@@ -59,7 +59,6 @@ export class ReadingsGraphComponent implements OnDestroy {
   public backwardReadingCounter: number = 0;
   public graphDisplayDuration = "10";
   public graphDisplayUnit = "minutes";
-  public imageReadingsDimensions = {width: 0, height: 0, depth: 0};
 
   destroy$: Subject<boolean> = new Subject<boolean>();
   private subscription: Subscription;
@@ -460,7 +459,6 @@ export class ReadingsGraphComponent implements OnDestroy {
         }
         if (typeof value === 'string') {
           if (value.includes("__DPIMAGE")) {
-            this.getImageReadingsDimensions(value);
             imageReadings.push({
               datapoint: k,
               imageData: value,
@@ -521,7 +519,6 @@ export class ReadingsGraphComponent implements OnDestroy {
           });
         } else if (typeof value === 'string') {
           if (value.includes("__DPIMAGE")) {
-            this.getImageReadingsDimensions(value);
             imageReadings.push({
               datapoint: k,
               imageData: value,
@@ -648,7 +645,7 @@ export class ReadingsGraphComponent implements OnDestroy {
     if (!this.isAlive) {
       this.backwardReadingCounter = 0;
       this.pauseTime = Date.now();
-      if (this.graphRefreshInterval === -1 && this.isLatestReadings) {
+      if (this.isLatestReadings) {
         this.getLatestReading(this.assetCode);
       } else {
         this.plotReadingsGraph(this.assetCode, this.limit, this.optedTime, 0);
@@ -917,19 +914,34 @@ export class ReadingsGraphComponent implements OnDestroy {
     return value * 60 * 60 * 24;
   }
 
-  getImageReadingsDimensions(value){
-    let val = value.replace('__DPIMAGE:', '');
-    let index = val.indexOf('_');
-    let dimensions = val.slice(0, index).split(',');
-    this.imageReadingsDimensions.width = dimensions[0];
-    this.imageReadingsDimensions.height = dimensions[1];
-    this.imageReadingsDimensions.depth = dimensions[2];
-  }
-
   public ngOnDestroy(): void {
     this.isAlive = false;
     this.destroy$.next(true);
     // Now let's also unsubscribe from the subject itself:
     this.destroy$.unsubscribe();
   }
+
+  toggleLatestReadingAutoRefresh(refresh: boolean){
+    this.isAlive = refresh;
+    // clear interval subscription before initializing it again
+    if (this.latestReadingSubscription) {
+      this.latestReadingSubscription.unsubscribe();
+    }
+
+    // Instantly make a call on clicking play button
+    if(this.isAlive){
+      this.getLatestReading(this.assetCode);
+    }
+
+    // start auto refresh
+    this.latestReadingSubscription = interval(this.graphRefreshInterval)
+      .pipe(takeWhile(() => this.isAlive), takeUntil(this.destroy$)) // only fires when component is alive
+      .subscribe(() => {
+        if (this.selectedTab === 4) {
+          this.showAssetReadingsSummary(this.assetCode, this.limit, this.optedTime);
+        } else {
+          this.getLatestReading(this.assetCode);
+        }
+      });
+  }
 }