Add data source properties retrieval and update related components

jambotron-ui/src/app/admin-module/settings.component/settings.component.html

@@ -1 +1,27 @@
 <p>settings.component works!</p>
+
+<mat-card>
+  <mat-card-content>
+    <mat-divider></mat-divider>
+    <mat-tab-group>
+      <mat-tab label="Data Source properties">
+
+        <table mat-table
+               [dataSource]="properties" multiTemplateDataRows="true" class="mat-elevation-z8">
+          @for (column of displayedColumns; track column) {
+            <ng-container matColumnDef="{{column}}">
+              <th mat-header-cell *matHeaderCellDef>{{column}}</th>
+              <td mat-cell *matCellDef="let element ; let k = dataIndex;">{{element[column]}}</td>
+            </ng-container>
+          }
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let element; columns: displayedColumns;"
+              class="example-element-row"
+             >
+          </tr>
+        </table>
+
+      </mat-tab>
+    </mat-tab-group>
+  </mat-card-content>
+</mat-card>

jambotron-ui/src/app/admin-module/settings.component/settings.component.ts

@@ -1,11 +1,66 @@
 import { Component } from '@angular/core';
+import {MatCard, MatCardContent} from '@angular/material/card';
+import {MatDivider} from '@angular/material/divider';
+import {MatTab, MatTabGroup} from '@angular/material/tabs';
+import {
+  MatCell,
+  MatCellDef,
+  MatColumnDef,
+  MatHeaderCell, MatHeaderCellDef,
+  MatHeaderRow,
+  MatHeaderRowDef,
+  MatRow, MatRowDef, MatTable
+} from '@angular/material/table';
+import {MatIconButton} from '@angular/material/button';
+import {MatList, MatListItem} from '@angular/material/list';
+import {Bean} from '../../models/Bean';
+import {SystemService} from '../../services/system.service';
+import {NameValueItem} from '../../models/name-value-item';
 
 @Component({
   selector: 'app-settings.component',
-  imports: [],
+  imports: [
+    MatCard,
+    MatCardContent,
+    MatDivider,
+    MatTab,
+    MatTabGroup,
+    MatCell,
+    MatCellDef,
+    MatColumnDef,
+    MatHeaderCell,
+
+    MatTable,
+    MatHeaderCellDef,
+    MatHeaderRow,
+    MatHeaderRowDef,
+    MatRow,
+    MatRowDef
+  ],
   templateUrl: './settings.component.html',
   styleUrl: './settings.component.scss'
 })
 export class SettingsComponent {
+  properties: NameValueItem[] = [] ;
 
+  displayedColumns: string[] = ['name', 'value'];
+
+
+  constructor(private systemService: SystemService) {
+    this.retrieveProperties();
+  }
+
+
+  retrieveProperties(): void {
+    this.systemService.getDataSourceProperties()
+      .subscribe(
+        (data: NameValueItem[]) => {
+          this.properties = data;
+          console.log(data);
+        },
+        (error: any) => {
+          console.log(error);
+        }
+        );
+  }
 }

jambotron-ui/src/app/main-module/main.component/main.component.ts

@@ -1,8 +1,8 @@
-import {Component, CUSTOM_ELEMENTS_SCHEMA, inject} from '@angular/core';
+import {Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit} from '@angular/core';
 //import {NavigationComponent} from '../navigation/navigation.component';
 import {NgClass} from '@angular/common';
 import {NavigationComponent} from '../../layouts/admin-layout/navigation/navigation.component';
-import {RouterLink, RouterOutlet} from '@angular/router';
+import {Router, RouterLink, RouterOutlet} from '@angular/router';
 import {BreadcrumbComponent} from '../../components/breadcrumb/breadcrumb.component';
 import {NavBarComponent} from '../../layouts/admin-layout/nav-bar/nav-bar.component';
 import {MatToolbar} from '@angular/material/toolbar';
@@ -29,7 +29,7 @@ import {DialogComponent} from '../../components/dialog/dialog.component';
   templateUrl: './main.component.html',
   styleUrl: './main.component.scss'
 })
-export class MainComponent {
+export class MainComponent implements OnInit{
   // public props
   navCollapsed: boolean = false;
   navCollapsedMob: boolean = false;
@@ -52,13 +52,24 @@ export class MainComponent {
   private authService: AuthService = inject(AuthService);
   private eventBusService: EventBusService = inject(EventBusService);
 
-  constructor(
+  constructor(private router: Router) {
 
-  ) {}
+  }
+  goToHome() {
+    this.router.navigate(['main/home']);
+  }
 
   ngOnInit(): void {
     this.isLoggedIn = this.storageService.isLoggedIn();
 
+    this.refreshToolbar();
+
+    this.eventBusSub = this.eventBusService.on('logout', () => {
+      this.logout();
+    });
+  }
+
+  refreshToolbar() {
     if (this.isLoggedIn) {
       const user = this.storageService.getUser();
       this.roles = user.roles;
@@ -68,10 +79,12 @@ export class MainComponent {
 
       this.username = user.username;
     }
+  }
 
-    this.eventBusSub = this.eventBusService.on('logout', () => {
-      this.logout();
-    });
+  ngOnDestroy() {
+    if (this.eventBusSub) {
+      this.eventBusSub.unsubscribe();
+    }
   }
 
   // public method
@@ -142,7 +155,8 @@ export class MainComponent {
           let user = this.storageService.getUser();
           this.roles = user.roles;
           //this.username = user.username;
-          this.reloadPage();
+          //this.reloadPage();
+          this.refreshToolbar();
         },
         err => {
           this.errorMessage = err.error.message;

jambotron-ui/src/app/models/name-value-item.ts

@@ -0,0 +1,4 @@
+export class NameValueItem {
+  name?:string;
+  value?:string;
+}

jambotron-ui/src/app/services/system.service.ts

@@ -3,6 +3,7 @@ import {HttpClient} from '@angular/common/http';
 import {Observable} from 'rxjs';
 import {Tutorial} from '../models/tutorial.model';
 import {Bean} from '../models/Bean';
+import {NameValueItem} from '../models/name-value-item';
 
 @Injectable({
   providedIn: 'root'
@@ -12,6 +13,10 @@ export class SystemService {
   baseUrl : string = 'http://localhost:8080/api/system';
   constructor(private http: HttpClient) { }
 
+  getDataSourceProperties(): Observable<NameValueItem[]>{
+    return this.http.get<NameValueItem[]>(this.baseUrl + "/data-source-properties")
+  }
+
   getAllBeans(): Observable<Bean[]> {
     return this.http.get<Bean[]>(this.baseUrl+"/beans");
   }

jambotron-ui/src/styles.scss

@@ -40,7 +40,7 @@ File: style.css
 
 html, body { height: 100%; }
 body {
-  background-image: url('../public/Firefly_jambo tron 118290.png');
+  background-image: url('../public/Firefly_jambo tron 118290.jpg');
   background-attachment:fixed;
   background-repeat: no-repeat;
   background-size: cover;