From 2dce3e4436fe5fd8f9cb60a6dcb930c2a3058432 Mon Sep 17 00:00:00 2001
From: hemant <hemantgarg923@gmail.com>
Date: Mon, 29 May 2023 17:28:20 +0530
Subject: [PATCH 1/9] carousel created for testing

Signed-off-by: hemant <hemantgarg923@gmail.com>
---
 .../common/carousel/carousel.component.css    | 228 ++++++++++++++++++
 .../common/carousel/carousel.component.html   |  65 +++++
 .../carousel/carousel.component.spec.ts       |  25 ++
 .../common/carousel/carousel.component.ts     |  15 ++
 .../readings-graph.component.html             |   1 +
 src/app/shared.module.ts                      |   7 +-
 6 files changed, 339 insertions(+), 2 deletions(-)
 create mode 100644 src/app/components/common/carousel/carousel.component.css
 create mode 100644 src/app/components/common/carousel/carousel.component.html
 create mode 100644 src/app/components/common/carousel/carousel.component.spec.ts
 create mode 100644 src/app/components/common/carousel/carousel.component.ts

diff --git a/src/app/components/common/carousel/carousel.component.css b/src/app/components/common/carousel/carousel.component.css
new file mode 100644
index 000000000..e44379995
--- /dev/null
+++ b/src/app/components/common/carousel/carousel.component.css
@@ -0,0 +1,228 @@
+@keyframes tonext {
+  75% {
+    left: 0;
+  }
+  95% {
+    left: 100%;
+  }
+  98% {
+    left: 100%;
+  }
+  99% {
+    left: 0;
+  }
+}
+
+@keyframes tostart {
+  75% {
+    left: 0;
+  }
+  95% {
+    left: -300%;
+  }
+  98% {
+    left: -300%;
+  }
+  99% {
+    left: 0;
+  }
+}
+
+@keyframes snap {
+  96% {
+    scroll-snap-align: center;
+  }
+  97% {
+    scroll-snap-align: none;
+  }
+  99% {
+    scroll-snap-align: none;
+  }
+  100% {
+    scroll-snap-align: center;
+  }
+}
+
+body {
+  max-width: 37.5rem;
+  margin: 0 auto;
+  padding: 0 1.25rem;
+  font-family: 'Lato', sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  scrollbar-color: transparent transparent; /* thumb and track color */
+  scrollbar-width: 0px;
+}
+
+*::-webkit-scrollbar {
+  width: 0;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: transparent;
+  border: none;
+}
+
+* {
+  -ms-overflow-style: none;
+}
+
+ol, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.carousel {
+  position: relative;
+  padding-top: 75%;
+  filter: drop-shadow(0 0 10px #0003);
+  perspective: 100px;
+}
+
+.carousel__viewport {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  overflow-x: scroll;
+  counter-reset: item;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+}
+
+.carousel__slide {
+  position: relative;
+  flex: 0 0 100%;
+  width: 100%;
+  background-color: #f99;
+  counter-increment: item;
+}
+
+.carousel__slide:nth-child(even) {
+  background-color: #99f;
+}
+
+.carousel__slide:before {
+  content: counter(item);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%,-40%,70px);
+  color: #fff;
+  font-size: 2em;
+}
+
+.carousel__snapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  scroll-snap-align: center;
+}
+
+@media (hover: hover) {
+  .carousel__snapper {
+    animation-name: tonext, snap;
+    animation-timing-function: ease;
+    animation-duration: 4s;
+    animation-iteration-count: infinite;
+  }
+
+  .carousel__slide:last-child .carousel__snapper {
+    animation-name: tostart, snap;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carousel__snapper {
+    animation-name: none;
+  }
+}
+
+.carousel:hover .carousel__snapper,
+.carousel:focus-within .carousel__snapper {
+  animation-name: none;
+}
+
+.carousel__navigation {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  text-align: center;
+}
+
+.carousel__navigation-list,
+.carousel__navigation-item {
+  display: inline-block;
+}
+
+.carousel__navigation-button {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-color: #333;
+  background-clip: content-box;
+  border: 0.25rem solid transparent;
+  border-radius: 50%;
+  font-size: 0;
+  transition: transform 0.1s;
+}
+
+.carousel::before,
+.carousel::after,
+.carousel__prev,
+.carousel__next {
+  position: absolute;
+  top: 0;
+  margin-top: 37.5%;
+  width: 4rem;
+  height: 4rem;
+  transform: translateY(-50%);
+  border-radius: 50%;
+  font-size: 0;
+  outline: 0;
+}
+
+.carousel::before,
+.carousel__prev {
+  left: -1rem;
+}
+
+.carousel::after,
+.carousel__next {
+  right: -1rem;
+}
+
+.carousel::before,
+.carousel::after {
+  content: '';
+  z-index: 1;
+  background-color: #333;
+  background-size: 1.5rem 1.5rem;
+  background-repeat: no-repeat;
+  background-position: center center;
+  color: #fff;
+  font-size: 2.5rem;
+  line-height: 4rem;
+  text-align: center;
+  pointer-events: none;
+}
+
+.carousel::before {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
+}
+
+.carousel::after {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
+}
diff --git a/src/app/components/common/carousel/carousel.component.html b/src/app/components/common/carousel/carousel.component.html
new file mode 100644
index 000000000..9e0fb4e43
--- /dev/null
+++ b/src/app/components/common/carousel/carousel.component.html
@@ -0,0 +1,65 @@
+<h1>CSS-only Carousel</h1>
+
+<p>This carousel is created with HTML and CSS only.</p>
+
+<section class="carousel" aria-label="Gallery">
+  <ol class="carousel__viewport">
+    <li id="carousel__slide1"
+        tabindex="0"
+        class="carousel__slide">
+      <div class="carousel__snapper">
+        <a href="#carousel__slide4"
+           class="carousel__prev">Go to last slide</a>
+        <a href="#carousel__slide2"
+           class="carousel__next">Go to next slide</a>
+      </div>
+    </li>
+    <li id="carousel__slide2"
+        tabindex="0"
+        class="carousel__slide">
+      <div class="carousel__snapper"></div>
+      <a href="#carousel__slide1"
+         class="carousel__prev">Go to previous slide</a>
+      <a href="#carousel__slide3"
+         class="carousel__next">Go to next slide</a>
+    </li>
+    <li id="carousel__slide3"
+        tabindex="0"
+        class="carousel__slide">
+      <div class="carousel__snapper"></div>
+      <a href="#carousel__slide2"
+         class="carousel__prev">Go to previous slide</a>
+      <a href="#carousel__slide4"
+         class="carousel__next">Go to next slide</a>
+    </li>
+    <li id="carousel__slide4"
+        tabindex="0"
+        class="carousel__slide">
+      <div class="carousel__snapper"></div>
+      <a href="#carousel__slide3"
+         class="carousel__prev">Go to previous slide</a>
+      <a href="#carousel__slide1"
+         class="carousel__next">Go to first slide</a>
+    </li>
+  </ol>
+  <aside class="carousel__navigation">
+    <ol class="carousel__navigation-list">
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide1"
+           class="carousel__navigation-button">Go to slide 1</a>
+      </li>
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide2"
+           class="carousel__navigation-button">Go to slide 2</a>
+      </li>
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide3"
+           class="carousel__navigation-button">Go to slide 3</a>
+      </li>
+      <li class="carousel__navigation-item">
+        <a href="#carousel__slide4"
+           class="carousel__navigation-button">Go to slide 4</a>
+      </li>
+    </ol>
+  </aside>
+</section>
\ No newline at end of file
diff --git a/src/app/components/common/carousel/carousel.component.spec.ts b/src/app/components/common/carousel/carousel.component.spec.ts
new file mode 100644
index 000000000..9196e0447
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/components/common/carousel/carousel.component.ts b/src/app/components/common/carousel/carousel.component.ts
new file mode 100644
index 000000000..82db8a058
--- /dev/null
+++ b/src/app/components/common/carousel/carousel.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-carousel',
+  templateUrl: './carousel.component.html',
+  styleUrls: ['./carousel.component.css']
+})
+export class CarouselComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.html b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.html
index 44e0c76cf..49630b958 100644
--- a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.html
+++ b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.html
@@ -213,6 +213,7 @@
                 <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)}">
+                      <app-carousel></app-carousel>
                       <ng-container *ngFor="let read of imageReadings">
                         <div id="tab-content">
                           <img [src]="read.image" alt={{read.datapoint}}>
diff --git a/src/app/shared.module.ts b/src/app/shared.module.ts
index 74af790f9..337aa577d 100644
--- a/src/app/shared.module.ts
+++ b/src/app/shared.module.ts
@@ -16,6 +16,7 @@ import { PluginModalComponent } from './components/core/plugin-modal/plugin-moda
 import { DirectivesModule } from './directives/directives.module';
 import { PipesModule } from './pipes/pipes.module';
 import { ShowConfigurationComponent } from './components/core/configuration-manager/show-configuration/show-configuration.component';
+import { CarouselComponent } from './components/common/carousel/carousel.component';
 
 @NgModule({
   imports: [
@@ -35,7 +36,8 @@ import { ShowConfigurationComponent } from './components/core/configuration-mana
     ViewLogsComponent,
     TimeDropdownComponent,
     RangeSliderComponent,
-    ConfirmationDialogComponent
+    ConfirmationDialogComponent,
+    CarouselComponent
   ],
   exports: [
     ConfigurationGroupComponent,
@@ -45,7 +47,8 @@ import { ShowConfigurationComponent } from './components/core/configuration-mana
     ViewLogsComponent,
     TimeDropdownComponent,
     RangeSliderComponent,
-    ConfirmationDialogComponent
+    ConfirmationDialogComponent,
+    CarouselComponent
   ]
 })
 export class SharedModule { }

From aa247cc433dfb032e5d35df0407778cf3233f0cc Mon Sep 17 00:00:00 2001
From: hemant <hemantgarg923@gmail.com>
Date: Tue, 30 May 2023 18:12:26 +0530
Subject: [PATCH 2/9] carousel working for dynamic content also

Signed-off-by: hemant <hemantgarg923@gmail.com>
---
 .../common/carousel/carousel.component.css    | 254 ++++--------------
 .../common/carousel/carousel.component.html   |  90 ++-----
 .../common/carousel/carousel.component.ts     |  60 ++++-
 3 files changed, 137 insertions(+), 267 deletions(-)

diff --git a/src/app/components/common/carousel/carousel.component.css b/src/app/components/common/carousel/carousel.component.css
index e44379995..d49319572 100644
--- a/src/app/components/common/carousel/carousel.component.css
+++ b/src/app/components/common/carousel/carousel.component.css
@@ -1,228 +1,78 @@
-@keyframes tonext {
-  75% {
-    left: 0;
-  }
-  95% {
-    left: 100%;
-  }
-  98% {
-    left: 100%;
-  }
-  99% {
-    left: 0;
-  }
-}
-
-@keyframes tostart {
-  75% {
-    left: 0;
-  }
-  95% {
-    left: -300%;
-  }
-  98% {
-    left: -300%;
-  }
-  99% {
-    left: 0;
-  }
-}
-
-@keyframes snap {
-  96% {
-    scroll-snap-align: center;
-  }
-  97% {
-    scroll-snap-align: none;
-  }
-  99% {
-    scroll-snap-align: none;
-  }
-  100% {
-    scroll-snap-align: center;
-  }
-}
-
-body {
-  max-width: 37.5rem;
-  margin: 0 auto;
-  padding: 0 1.25rem;
-  font-family: 'Lato', sans-serif;
-}
-
-* {
-  box-sizing: border-box;
-  scrollbar-color: transparent transparent; /* thumb and track color */
-  scrollbar-width: 0px;
-}
-
-*::-webkit-scrollbar {
-  width: 0;
-}
-
-*::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-  background: transparent;
-  border: none;
-}
-
 * {
-  -ms-overflow-style: none;
-}
-
-ol, li {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.carousel {
-  position: relative;
-  padding-top: 75%;
-  filter: drop-shadow(0 0 10px #0003);
-  perspective: 100px;
-}
-
-.carousel__viewport {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  overflow-x: scroll;
-  counter-reset: item;
-  scroll-behavior: smooth;
-  scroll-snap-type: x mandatory;
+  box-sizing: border-box
 }
 
-.carousel__slide {
+.slideshow-container {
+  max-width: 2000px;
   position: relative;
-  flex: 0 0 100%;
-  width: 100%;
-  background-color: #f99;
-  counter-increment: item;
-}
-
-.carousel__slide:nth-child(even) {
-  background-color: #99f;
+  margin: auto;
+  top: 15%;
+  height: 73vh;
 }
 
-.carousel__slide:before {
-  content: counter(item);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate3d(-50%,-40%,70px);
-  color: #fff;
-  font-size: 2em;
+.slides {
+  display: none;
 }
 
-.carousel__snapper {
+.prev,
+.next {
+  cursor: pointer;
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  scroll-snap-align: center;
-}
-
-@media (hover: hover) {
-  .carousel__snapper {
-    animation-name: tonext, snap;
-    animation-timing-function: ease;
-    animation-duration: 4s;
-    animation-iteration-count: infinite;
-  }
-
-  .carousel__slide:last-child .carousel__snapper {
-    animation-name: tostart, snap;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .carousel__snapper {
-    animation-name: none;
-  }
+  top: 35%;
+  margin-top: -22px;
+  padding: 16px;
+  font-weight: bold;
+  font-size: 18px;
+  transition: 0.6s ease;
+  user-select: none;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background-color: white;
+  color: black;
+  display: none;
 }
 
-.carousel:hover .carousel__snapper,
-.carousel:focus-within .carousel__snapper {
-  animation-name: none;
+.prev {
+  left: 0px;
 }
 
-.carousel__navigation {
-  position: absolute;
+.next {
   right: 0;
-  bottom: 0;
-  left: 0;
-  text-align: center;
-}
-
-.carousel__navigation-list,
-.carousel__navigation-item {
-  display: inline-block;
 }
 
-.carousel__navigation-button {
-  display: inline-block;
-  width: 1.5rem;
-  height: 1.5rem;
-  background-color: #333;
-  background-clip: content-box;
-  border: 0.25rem solid transparent;
-  border-radius: 50%;
-  font-size: 0;
-  transition: transform 0.1s;
+.prev:hover,
+.next:hover {
+  background-color: grey;
 }
 
-.carousel::before,
-.carousel::after,
-.carousel__prev,
-.carousel__next {
-  position: absolute;
-  top: 0;
-  margin-top: 37.5%;
-  width: 4rem;
-  height: 4rem;
-  transform: translateY(-50%);
+.dot {
+  cursor: pointer;
+  height: 15px;
+  width: 15px;
+  margin: 0 2px;
+  background-color: #bbb;
   border-radius: 50%;
-  font-size: 0;
-  outline: 0;
-}
-
-.carousel::before,
-.carousel__prev {
-  left: -1rem;
+  display: inline-block;
+  transition: background-color 0.6s ease;
 }
 
-.carousel::after,
-.carousel__next {
-  right: -1rem;
+.active,
+.dot:hover {
+  background-color: #717171;
 }
 
-.carousel::before,
-.carousel::after {
-  content: '';
-  z-index: 1;
-  background-color: #333;
-  background-size: 1.5rem 1.5rem;
-  background-repeat: no-repeat;
-  background-position: center center;
-  color: #fff;
-  font-size: 2.5rem;
-  line-height: 4rem;
-  text-align: center;
-  pointer-events: none;
+.fade {
+  animation-name: fade;
+  animation-duration: 1.5s;
 }
 
-.carousel::before {
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
-}
+@keyframes fade {
+  from {
+    opacity: .4
+  }
 
-.carousel::after {
-  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
-}
+  to {
+    opacity: 1
+  }
+}
\ No newline at end of file
diff --git a/src/app/components/common/carousel/carousel.component.html b/src/app/components/common/carousel/carousel.component.html
index 9e0fb4e43..e2bd3dbef 100644
--- a/src/app/components/common/carousel/carousel.component.html
+++ b/src/app/components/common/carousel/carousel.component.html
@@ -1,65 +1,27 @@
-<h1>CSS-only Carousel</h1>
-
-<p>This carousel is created with HTML and CSS only.</p>
-
-<section class="carousel" aria-label="Gallery">
-  <ol class="carousel__viewport">
-    <li id="carousel__slide1"
-        tabindex="0"
-        class="carousel__slide">
-      <div class="carousel__snapper">
-        <a href="#carousel__slide4"
-           class="carousel__prev">Go to last slide</a>
-        <a href="#carousel__slide2"
-           class="carousel__next">Go to next slide</a>
+<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>
-    </li>
-    <li id="carousel__slide2"
-        tabindex="0"
-        class="carousel__slide">
-      <div class="carousel__snapper"></div>
-      <a href="#carousel__slide1"
-         class="carousel__prev">Go to previous slide</a>
-      <a href="#carousel__slide3"
-         class="carousel__next">Go to next slide</a>
-    </li>
-    <li id="carousel__slide3"
-        tabindex="0"
-        class="carousel__slide">
-      <div class="carousel__snapper"></div>
-      <a href="#carousel__slide2"
-         class="carousel__prev">Go to previous slide</a>
-      <a href="#carousel__slide4"
-         class="carousel__next">Go to next slide</a>
-    </li>
-    <li id="carousel__slide4"
-        tabindex="0"
-        class="carousel__slide">
-      <div class="carousel__snapper"></div>
-      <a href="#carousel__slide3"
-         class="carousel__prev">Go to previous slide</a>
-      <a href="#carousel__slide1"
-         class="carousel__next">Go to first slide</a>
-    </li>
-  </ol>
-  <aside class="carousel__navigation">
-    <ol class="carousel__navigation-list">
-      <li class="carousel__navigation-item">
-        <a href="#carousel__slide1"
-           class="carousel__navigation-button">Go to slide 1</a>
-      </li>
-      <li class="carousel__navigation-item">
-        <a href="#carousel__slide2"
-           class="carousel__navigation-button">Go to slide 2</a>
-      </li>
-      <li class="carousel__navigation-item">
-        <a href="#carousel__slide3"
-           class="carousel__navigation-button">Go to slide 3</a>
-      </li>
-      <li class="carousel__navigation-item">
-        <a href="#carousel__slide4"
-           class="carousel__navigation-button">Go to slide 4</a>
-      </li>
-    </ol>
-  </aside>
-</section>
\ No newline at end of file
+      <small
+        class="has-text-centered text-secondary has-text-grey-lighter is-block">{{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 margin-bottom">{{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>
+
+<!-- <br> -->
+<!-- <div style="text-align:center">
+  <ng-container *ngFor="let read of imageReadings; let i=index;">
+    <span class="dot" [attr.id]="'w'+i" (click)="currentSlide(i)"></span>
+  </ng-container>
+</div> -->
\ No newline at end of file
diff --git a/src/app/components/common/carousel/carousel.component.ts b/src/app/components/common/carousel/carousel.component.ts
index 82db8a058..1e5d8bc4c 100644
--- a/src/app/components/common/carousel/carousel.component.ts
+++ b/src/app/components/common/carousel/carousel.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-carousel',
@@ -7,9 +7,67 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CarouselComponent implements OnInit {
 
+  slideIndex = 1;
+  imageReadingsDimensions = { width: 0, height: 0, depth: 0 };
+  @Input() imageReadings: any;
+
   constructor() { }
 
   ngOnInit(): void {
   }
 
+  ngAfterViewInit() {
+    this.showSlides(this.slideIndex);
+    let time = +localStorage.getItem('PING_INTERVAL');
+    setInterval(() => {
+      console.log(this.imageReadings);
+      this.showSlides(this.slideIndex);
+    }, time);
+  }
+
+  changeSlide(n) {
+    this.slideIndex += n;
+    this.showSlides(this.slideIndex);
+  }
+
+  // currentSlide(n) {
+  //   this.slideIndex = n;
+  //   this.showSlides(this.slideIndex);
+  // }
+
+  showSlides(n) {
+    let slides = <HTMLCollectionOf<HTMLElement>>document.getElementsByClassName("slides");
+    let dots = document.getElementsByClassName("dot");
+    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";
+    }
+    // for (i = 0; i < dots.length; i++) {
+    //   dots[i].className = dots[i].className.replace(" active", "");
+    // }
+    // dots[this.slideIndex - 1].className += " active";
+    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];
+  }
+
 }

From 07aba28facc8d73d2673e116651f0e513a1bb443 Mon Sep 17 00:00:00 2001
From: hemant <hemantgarg923@gmail.com>
Date: Tue, 30 May 2023 18:31:13 +0530
Subject: [PATCH 3/9] minor changes done

Signed-off-by: hemant <hemantgarg923@gmail.com>
---
 .../readings-graph.component.css              | 24 +++++++++++-------
 .../readings-graph.component.html             | 10 ++++----
 .../readings-graph.component.ts               | 25 ++++++++++++++++---
 3 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.css b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.css
index b7c2702b2..a1f82c8e6 100644
--- a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.css
+++ b/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: #191919;
 }
 
 .image-reading-only {
-  overflow-y: scroll;
+  overflow-y: auto;
   height: calc(100vh - 100px);
+  background-color: #191919
 }
 
 .table-heading {
diff --git a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.html b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.html
index 49630b958..e1328471b 100644
--- a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.html
+++ b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.html
@@ -212,9 +212,9 @@
                 </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)}">
-                      <app-carousel></app-carousel>
-                      <ng-container *ngFor="let read of imageReadings">
+                    <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>
+                      <!-- <ng-container *ngFor="let read of imageReadings">
                         <div id="tab-content">
                           <img [src]="read.image" alt={{read.datapoint}}>
                         </div>
@@ -225,9 +225,9 @@
                           Timestamp:
                           {{read?.timestamp}}
                         </small>
-                      </ng-container>
+                      </ng-container> -->
                     </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>
diff --git a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts
index 26ababb60..774aaead4 100644
--- a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts
+++ b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts
@@ -461,11 +461,30 @@ export class ReadingsGraphComponent implements OnDestroy {
         if (typeof value === 'string') {
           if (value.includes("__DPIMAGE")) {
             this.getImageReadingsDimensions(value);
-            imageReadings.push({
-              datapoint: k,
+            let img1 = {
+              datapoint: "k1",
               imageData: value,
               timestamp: this.dateFormatter.transform(r.timestamp, 'YYYY-MM-DD HH:mm:ss.SSS')
-            });
+            };
+              let img2 = {
+                datapoint: "k2",
+              imageData: value,
+              timestamp: this.dateFormatter.transform(r.timestamp, 'YYYY-MM-DD HH:mm:ss.SSS')
+            };
+            let img3 = {
+              datapoint: "k3",
+              imageData: value,
+              timestamp: this.dateFormatter.transform(r.timestamp, 'YYYY-MM-DD HH:mm:ss.SSS')
+            };
+              let img4 = {
+              datapoint: "k4",
+              imageData: value,
+              timestamp: this.dateFormatter.transform(r.timestamp, 'YYYY-MM-DD HH:mm:ss.SSS')
+            };
+            imageReadings.push(img1);
+            imageReadings.push(img2);
+            imageReadings.push(img3);
+            imageReadings.push(img4);
           } else {
             strReadings.push({
               key: k,

From 32bcc99f59a3dbc173ec194485939b9de2a0129b Mon Sep 17 00:00:00 2001
From: hemant <hemantgarg923@gmail.com>
Date: Tue, 30 May 2023 19:35:56 +0530
Subject: [PATCH 4/9] button size reduced and background color changed

Signed-off-by: hemant <hemantgarg923@gmail.com>
---
 .../common/carousel/carousel.component.css     | 18 +++++++++++-------
 .../common/carousel/carousel.component.html    |  4 ++--
 .../readings-graph.component.css               |  4 ++--
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/app/components/common/carousel/carousel.component.css b/src/app/components/common/carousel/carousel.component.css
index d49319572..e72252840 100644
--- a/src/app/components/common/carousel/carousel.component.css
+++ b/src/app/components/common/carousel/carousel.component.css
@@ -18,27 +18,27 @@
 .next {
   cursor: pointer;
   position: absolute;
-  top: 35%;
-  margin-top: -22px;
-  padding: 16px;
+  top: 36%;
   font-weight: bold;
-  font-size: 18px;
+  font-size: 15px;
   transition: 0.6s ease;
-  user-select: none;
-  width: 60px;
-  height: 60px;
+  width: 36px;
+  height: 36px;
   border-radius: 50%;
   background-color: white;
   color: black;
   display: none;
+  padding-top: 6px;
 }
 
 .prev {
   left: 0px;
+  padding-right: 2px;
 }
 
 .next {
   right: 0;
+  padding-left: 2px;
 }
 
 .prev:hover,
@@ -75,4 +75,8 @@
   to {
     opacity: 1
   }
+}
+
+.margin-top {
+  margin-top: 20px;
 }
\ No newline at end of file
diff --git a/src/app/components/common/carousel/carousel.component.html b/src/app/components/common/carousel/carousel.component.html
index e2bd3dbef..ce7577798 100644
--- a/src/app/components/common/carousel/carousel.component.html
+++ b/src/app/components/common/carousel/carousel.component.html
@@ -5,11 +5,11 @@
         <img [src]="read.image" alt={{read.datapoint}}>
       </div>
       <small
-        class="has-text-centered text-secondary has-text-grey-lighter is-block">{{getImageReadingsDimensions(read.imageData)}}
+        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 margin-bottom">{{read?.datapoint}},
+      <small class="has-text-centered text-secondary has-text-grey-lighter is-block">{{read?.datapoint}},
         Timestamp:
         {{read?.timestamp}}
       </small>
diff --git a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.css b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.css
index a1f82c8e6..a53166b2d 100644
--- a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.css
+++ b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.css
@@ -165,13 +165,13 @@ table.is-borderless tr {
 .image-reading {
   overflow-y: auto;
   height: calc(100vh - 100px);
-  background-color: #191919;
+  background-color: rgba(20, 20, 20, 0.8);
 }
 
 .image-reading-only {
   overflow-y: auto;
   height: calc(100vh - 100px);
-  background-color: #191919
+  background-color: rgba(20, 20, 20, 0.8);
 }
 
 .table-heading {

From 87778af53aa9e77598b8d7a013db7c83f09b1aa8 Mon Sep 17 00:00:00 2001
From: hemant <hemantgarg923@gmail.com>
Date: Tue, 30 May 2023 19:54:30 +0530
Subject: [PATCH 5/9] button flickering issue resolved

Signed-off-by: hemant <hemantgarg923@gmail.com>
---
 src/app/components/common/carousel/carousel.component.css | 1 +
 src/app/components/common/carousel/carousel.component.ts  | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/components/common/carousel/carousel.component.css b/src/app/components/common/carousel/carousel.component.css
index e72252840..86eef048b 100644
--- a/src/app/components/common/carousel/carousel.component.css
+++ b/src/app/components/common/carousel/carousel.component.css
@@ -29,6 +29,7 @@
   color: black;
   display: none;
   padding-top: 6px;
+  user-select: none;
 }
 
 .prev {
diff --git a/src/app/components/common/carousel/carousel.component.ts b/src/app/components/common/carousel/carousel.component.ts
index 1e5d8bc4c..cd6d9c78b 100644
--- a/src/app/components/common/carousel/carousel.component.ts
+++ b/src/app/components/common/carousel/carousel.component.ts
@@ -20,9 +20,9 @@ export class CarouselComponent implements OnInit {
     this.showSlides(this.slideIndex);
     let time = +localStorage.getItem('PING_INTERVAL');
     setInterval(() => {
-      console.log(this.imageReadings);
+      this.slideIndex = 1;
       this.showSlides(this.slideIndex);
-    }, time);
+    }, time+50);
   }
 
   changeSlide(n) {

From 3da01deceb6891ba5edfba7c203b4d88f574e8e8 Mon Sep 17 00:00:00 2001
From: hemant <hemantgarg923@gmail.com>
Date: Wed, 31 May 2023 12:16:50 +0530
Subject: [PATCH 6/9] dummy image data removed

Signed-off-by: hemant <hemantgarg923@gmail.com>
---
 .../readings-graph.component.ts               | 25 +++----------------
 1 file changed, 3 insertions(+), 22 deletions(-)

diff --git a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts
index 774aaead4..26ababb60 100644
--- a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts
+++ b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts
@@ -461,30 +461,11 @@ export class ReadingsGraphComponent implements OnDestroy {
         if (typeof value === 'string') {
           if (value.includes("__DPIMAGE")) {
             this.getImageReadingsDimensions(value);
-            let img1 = {
-              datapoint: "k1",
-              imageData: value,
-              timestamp: this.dateFormatter.transform(r.timestamp, 'YYYY-MM-DD HH:mm:ss.SSS')
-            };
-              let img2 = {
-                datapoint: "k2",
-              imageData: value,
-              timestamp: this.dateFormatter.transform(r.timestamp, 'YYYY-MM-DD HH:mm:ss.SSS')
-            };
-            let img3 = {
-              datapoint: "k3",
-              imageData: value,
-              timestamp: this.dateFormatter.transform(r.timestamp, 'YYYY-MM-DD HH:mm:ss.SSS')
-            };
-              let img4 = {
-              datapoint: "k4",
+            imageReadings.push({
+              datapoint: k,
               imageData: value,
               timestamp: this.dateFormatter.transform(r.timestamp, 'YYYY-MM-DD HH:mm:ss.SSS')
-            };
-            imageReadings.push(img1);
-            imageReadings.push(img2);
-            imageReadings.push(img3);
-            imageReadings.push(img4);
+            });
           } else {
             strReadings.push({
               key: k,

From e6480056730a807537cb7eb5cefe80828adff522 Mon Sep 17 00:00:00 2001
From: hemant <hemantgarg923@gmail.com>
Date: Wed, 31 May 2023 18:56:30 +0530
Subject: [PATCH 7/9] auto refresh checkbox added for latest reading

Signed-off-by: hemant <hemantgarg923@gmail.com>
---
 .../readings-graph.component.css              | 11 ++++++++
 .../readings-graph.component.html             |  9 +++++++
 .../readings-graph.component.ts               | 26 ++++++++++++++++++-
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.css b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.css
index a53166b2d..5978bc87f 100644
--- a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.css
+++ b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.css
@@ -186,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;
 }
\ No newline at end of file
diff --git a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.html b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.html
index e1328471b..67a155f71 100644
--- a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.html
+++ b/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>
diff --git a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts
index 26ababb60..394179b0c 100644
--- a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts
+++ b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts
@@ -648,7 +648,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);
@@ -932,4 +932,28 @@ export class ReadingsGraphComponent implements OnDestroy {
     // 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);
+        }
+      });
+  }
 }

From 1589fab57bac3165aea1fd7a91ebff24c9f10cbe Mon Sep 17 00:00:00 2001
From: hemant <hemantgarg923@gmail.com>
Date: Wed, 31 May 2023 19:33:22 +0530
Subject: [PATCH 8/9] commented code removed

Signed-off-by: hemant <hemantgarg923@gmail.com>
---
 .../common/carousel/carousel.component.css       | 16 ----------------
 .../common/carousel/carousel.component.html      |  9 +--------
 .../common/carousel/carousel.component.ts        | 10 ----------
 .../readings-graph/readings-graph.component.html | 12 ------------
 .../readings-graph/readings-graph.component.ts   | 12 ------------
 5 files changed, 1 insertion(+), 58 deletions(-)

diff --git a/src/app/components/common/carousel/carousel.component.css b/src/app/components/common/carousel/carousel.component.css
index 86eef048b..d7a47fbce 100644
--- a/src/app/components/common/carousel/carousel.component.css
+++ b/src/app/components/common/carousel/carousel.component.css
@@ -47,22 +47,6 @@
   background-color: grey;
 }
 
-.dot {
-  cursor: pointer;
-  height: 15px;
-  width: 15px;
-  margin: 0 2px;
-  background-color: #bbb;
-  border-radius: 50%;
-  display: inline-block;
-  transition: background-color 0.6s ease;
-}
-
-.active,
-.dot:hover {
-  background-color: #717171;
-}
-
 .fade {
   animation-name: fade;
   animation-duration: 1.5s;
diff --git a/src/app/components/common/carousel/carousel.component.html b/src/app/components/common/carousel/carousel.component.html
index ce7577798..749b0c65b 100644
--- a/src/app/components/common/carousel/carousel.component.html
+++ b/src/app/components/common/carousel/carousel.component.html
@@ -17,11 +17,4 @@
   </ng-container>
   <a class="prev" id="prev" (click)="changeSlide(-1)">&#10094;</a>
   <a class="next" id="next" (click)="changeSlide(1)">&#10095;</a>
-</div>
-
-<!-- <br> -->
-<!-- <div style="text-align:center">
-  <ng-container *ngFor="let read of imageReadings; let i=index;">
-    <span class="dot" [attr.id]="'w'+i" (click)="currentSlide(i)"></span>
-  </ng-container>
-</div> -->
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/app/components/common/carousel/carousel.component.ts b/src/app/components/common/carousel/carousel.component.ts
index cd6d9c78b..bed3a9072 100644
--- a/src/app/components/common/carousel/carousel.component.ts
+++ b/src/app/components/common/carousel/carousel.component.ts
@@ -30,14 +30,8 @@ export class CarouselComponent implements OnInit {
     this.showSlides(this.slideIndex);
   }
 
-  // currentSlide(n) {
-  //   this.slideIndex = n;
-  //   this.showSlides(this.slideIndex);
-  // }
-
   showSlides(n) {
     let slides = <HTMLCollectionOf<HTMLElement>>document.getElementsByClassName("slides");
-    let dots = document.getElementsByClassName("dot");
     if (n >= slides.length) {
       document.getElementById('next').style.display = "none";
     }
@@ -54,10 +48,6 @@ export class CarouselComponent implements OnInit {
     for (let i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
     }
-    // for (i = 0; i < dots.length; i++) {
-    //   dots[i].className = dots[i].className.replace(" active", "");
-    // }
-    // dots[this.slideIndex - 1].className += " active";
     slides[this.slideIndex - 1].style.display = "block";
   }
 
diff --git a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.html b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.html
index 67a155f71..137edfd4e 100644
--- a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.html
+++ b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.html
@@ -223,18 +223,6 @@
                   <div class="columns margin-top">
                     <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>
-                      <!-- <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>
                     <div *ngIf="!isEmptyObject(stringTypeReadingsList)" data-content="3" class="column is-4 image-data">
                       <table class="table is-responsive is-borderless data-table">
diff --git a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts b/src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts
index 394179b0c..309fc3234 100644
--- a/src/app/components/core/asset-readings/readings-graph/readings-graph.component.ts
+++ b/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,
@@ -917,15 +914,6 @@ 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);

From cb5847075d89288a79ee3799d81946b2489b7f8f Mon Sep 17 00:00:00 2001
From: hemant <hemantgarg923@gmail.com>
Date: Thu, 1 Jun 2023 15:04:29 +0530
Subject: [PATCH 9/9] interval cleared when component is destroyed

Signed-off-by: hemant <hemantgarg923@gmail.com>
---
 .../common/carousel/carousel.component.ts     | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/app/components/common/carousel/carousel.component.ts b/src/app/components/common/carousel/carousel.component.ts
index bed3a9072..ec54a9084 100644
--- a/src/app/components/common/carousel/carousel.component.ts
+++ b/src/app/components/common/carousel/carousel.component.ts
@@ -1,15 +1,16 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy } from '@angular/core';
 
 @Component({
   selector: 'app-carousel',
   templateUrl: './carousel.component.html',
   styleUrls: ['./carousel.component.css']
 })
-export class CarouselComponent implements OnInit {
+export class CarouselComponent implements OnDestroy {
 
   slideIndex = 1;
   imageReadingsDimensions = { width: 0, height: 0, depth: 0 };
   @Input() imageReadings: any;
+  intervalId: any;
 
   constructor() { }
 
@@ -17,12 +18,16 @@ export class CarouselComponent implements OnInit {
   }
 
   ngAfterViewInit() {
-    this.showSlides(this.slideIndex);
     let time = +localStorage.getItem('PING_INTERVAL');
-    setInterval(() => {
+    // 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+50);
+    }, time+100);
+    this.showSlides(this.slideIndex);
   }
 
   changeSlide(n) {
@@ -60,4 +65,8 @@ export class CarouselComponent implements OnInit {
     this.imageReadingsDimensions.depth = dimensions[2];
   }
 
+  ngOnDestroy(): void {
+    clearInterval(this.intervalId);
+  }
+
 }