finished changelog

src/app/changelog/changelog.component.html

@@ -27,9 +27,22 @@
     <th>Action</th>
     <th>Data</th>
   </tr>
-  <tr *ngFor="let entry of changelog">
+  <tr *ngFor="let entry of changelog; index as i" class="clickable" (click)="showDetails(i, sampleModal)">
     <td>{{entry.date}}</td>
     <td>{{entry.action}}</td>
     <td>{{entry.data | json}}</td>
   </tr>
 </rb-table>
+
+<ng-template #sampleModal>
+  <h4>Date</h4>
+  <p class="space-below">{{changelog[modalDetail].date}}</p>
+  <h4>Action</h4>
+  <p class="space-below">{{changelog[modalDetail].action}}</p>
+  <h4>Collection</h4>
+  <p class="space-below">{{changelog[modalDetail].collection}}</p>
+  <h4>Conditions</h4>
+  <p class="space-below">{{changelog[modalDetail].conditions | json}}</p>
+  <h4>Data</h4>
+  <p class="space-below">{{changelog[modalDetail].data | json}}</p>
+</ng-template>

src/app/changelog/changelog.component.scss

@@ -1,3 +1,5 @@
+@import "~@inst-iot/bosch-angular-ui-components/styles/variables/colors";
+
 .header {
 
   & > * {
@@ -8,3 +10,12 @@
     float: right;
   }
 }
+
+tr.clickable {
+  background: none;
+  transition: background-color 0.5s;
+
+  &:hover {
+    background: $color-gray-mercury;
+  }
+}

src/app/changelog/changelog.component.ts

@@ -1,6 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit, TemplateRef} from '@angular/core';
 import {ChangelogModel} from '../models/changelog.model';
 import {ApiService} from '../services/api.service';
+import {ModalService} from '@inst-iot/bosch-angular-ui-components';
 
 @Component({
   selector: 'app-changelog',
@@ -12,9 +13,11 @@ export class ChangelogComponent implements OnInit {
   timestamp = new Date();
   pageSize = 25;
   changelog: ChangelogModel[] = [];
+  modalDetail = 0;
 
   constructor(
-    private api: ApiService
+    private api: ApiService,
+    private modal: ModalService
   ) { }
 
   ngOnInit(): void {
@@ -22,11 +25,19 @@ export class ChangelogComponent implements OnInit {
   }
 
   loadChangelog(page = 0) {
-    this.api.get<ChangelogModel[]>(`/changelog/${this.timestamp.toISOString()}/${page}/${this.pageSize}`, data => {
+    this.api.get<ChangelogModel[]>(`/changelog/${
+      new Date(new Date(this.timestamp).getTime() - new Date(this.timestamp).getTimezoneOffset() * 60000).toISOString()
+    }/${page}/${this.pageSize}`, data => {
       this.changelog = data.map(e => new ChangelogModel().deserialize(e));
+      if (page) {
         this.timestamp = new Date(this.changelog[0].date);
-      console.log(this.changelog);
+      }
     });
   }
 
+  showDetails(i: number, modal: TemplateRef<any>) {
+    this.modalDetail = i;
+    this.modal.open(modal).then(() => {});
+  }
+
 }