Add simply example for retrieving data from the api

src/Vegasco-Web/angular.json

@@ -59,6 +59,9 @@
         },
         "serve": {
           "builder": "@angular/build:dev-server",
+          "options": {
+            "proxyConfig": "proxy.config.js"
+          },
           "configurations": {
             "production": {
               "buildTarget": "Vegasco-Web:build:production"

src/Vegasco-Web/proxy.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  "/api": {
+    target:
+      process.env["services__Vegasco-Server-Api__https__0"] ||
+      process.env["services__Vegasco-Server-Api__http__0"],
+    secure: process.env["NODE_ENV"] !== "development",
+    pathRewrite: {
+      "^/api": "",
+    },
+  },
+};

src/Vegasco-Web/src/app/app.config.ts

@@ -2,11 +2,13 @@ import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChang
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import {provideHttpClient} from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(routes)
+    provideRouter(routes),
+    provideHttpClient(),
   ]
 };

src/Vegasco-Web/src/app/app.html

@@ -133,9 +133,11 @@
   .pill-group .pill:nth-child(6n + 1) {
     --pill-accent: var(--bright-blue);
   }
+
   .pill-group .pill:nth-child(6n + 2) {
     --pill-accent: var(--french-violet);
   }
+
   .pill-group .pill:nth-child(6n + 3),
   .pill-group .pill:nth-child(6n + 4),
   .pill-group .pill:nth-child(6n + 5) {
@@ -158,6 +160,10 @@
     fill: var(--gray-400);
   }
 
+  td, th {
+    padding: .5rem;
+  }
+
   .social-links a:hover svg path {
     fill: var(--gray-900);
   }
@@ -205,9 +211,9 @@
             gradientTransform="rotate(118.122 171.182 60.81) scale(205.794)"
             gradientUnits="userSpaceOnUse"
           >
-            <stop stop-color="#FF41F8" />
+            <stop stop-color="#FF41F8"/>
-            <stop offset=".707" stop-color="#FF41F8" stop-opacity=".5" />
+            <stop offset=".707" stop-color="#FF41F8" stop-opacity=".5"/>
-            <stop offset="1" stop-color="#FF41F8" stop-opacity="0" />
+            <stop offset="1" stop-color="#FF41F8" stop-opacity="0"/>
           </radialGradient>
           <linearGradient
             id="b"
@@ -217,26 +223,50 @@
             y2="192"
             gradientUnits="userSpaceOnUse"
           >
-            <stop stop-color="#F0060B" />
+            <stop stop-color="#F0060B"/>
-            <stop offset="0" stop-color="#F0070C" />
+            <stop offset="0" stop-color="#F0070C"/>
-            <stop offset=".526" stop-color="#CC26D5" />
+            <stop offset=".526" stop-color="#CC26D5"/>
-            <stop offset="1" stop-color="#7702FF" />
+            <stop offset="1" stop-color="#7702FF"/>
           </linearGradient>
-          <clipPath id="a"><path fill="#fff" d="M0 0h982v239H0z" /></clipPath>
+          <clipPath id="a">
+            <path fill="#fff" d="M0 0h982v239H0z"/>
+          </clipPath>
         </defs>
       </svg>
       <h1>Hello, {{ title }}</h1>
       <p>Congratulations! Your app is running. 🎉</p>
+      <div>
+        @if (serverInfo$ | async; as serverInfo) {
+          <table>
+            <thead>
+              <tr>
+                <th>Version</th>
+                <th>Commit ID</th>
+                <th>Commit Date</th>
+                <th>Environment</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>{{ serverInfo.fullVersion }}</td>
+                <td>{{ serverInfo.commitId }}</td>
+                <td>{{ serverInfo.commitDate | date:"dd.MM.yyyy HH:mm:ss" }}</td>
+                <td>{{ serverInfo.environment }}</td>
+              </tr>
+            </tbody>
+          </table>
+        }
+      </div>
     </div>
     <div class="divider" role="separator" aria-label="Divider"></div>
     <div class="right-side">
       <div class="pill-group">
         @for (item of [
-          { title: 'Explore the Docs', link: 'https://angular.dev' },
+          {title: 'Explore the Docs', link: 'https://angular.dev'},
-          { title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials' },
+          {title: 'Learn with Tutorials', link: 'https://angular.dev/tutorials'},
-          { title: 'CLI Docs', link: 'https://angular.dev/tools/cli' },
+          {title: 'CLI Docs', link: 'https://angular.dev/tools/cli'},
-          { title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service' },
+          {title: 'Angular Language Service', link: 'https://angular.dev/tools/language-service'},
-          { title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools' },
+          {title: 'Angular DevTools', link: 'https://angular.dev/tools/devtools'},
         ]; track item.title) {
           <a
             class="pill"
@@ -333,4 +363,4 @@
 <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
 
 
-<router-outlet />
+<router-outlet/>

src/Vegasco-Web/src/app/app.ts

@@ -1,12 +1,33 @@
-import { Component } from '@angular/core';
+import {Component, inject} from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import {RouterOutlet} from '@angular/router';
+import {HttpClient} from '@angular/common/http';
+import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {AsyncPipe, DatePipe} from '@angular/common';
+import {tap} from 'rxjs';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [AsyncPipe, DatePipe, RouterOutlet],
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })
 export class App {
   protected title = 'Vegasco-Web';
+
+  private readonly http = inject(HttpClient);
+
+  protected readonly serverInfo$;
+
+  constructor() {
+    this.serverInfo$ = this.http.get<ServerInfo>('/api/v1/info/server')
+      .pipe(takeUntilDestroyed());
+  }
 }
+
+interface ServerInfo {
+  fullVersion: string;
+  commitId: string;
+  commitDate: string;
+  environment: string;
+}
+