From 58337c378cb85f516c990834fc8c2c7a55f7b0c0 Mon Sep 17 00:00:00 2001 From: apuente Date: Fri, 11 Oct 2024 12:44:43 +0200 Subject: [PATCH] Update client-main-view component and .env file --- ogWebconsole/.env | 3 +- .../client-main-view.component.css | 128 ++++++++++++++++++ .../client-main-view.component.html | 68 +++++++++- .../client-main-view.component.ts | 30 +++- 4 files changed, 224 insertions(+), 5 deletions(-) diff --git a/ogWebconsole/.env b/ogWebconsole/.env index 454cc0f..3e0dde5 100644 --- a/ogWebconsole/.env +++ b/ogWebconsole/.env @@ -1,2 +1 @@ -#NG_APP_BASE_API_URL=http://127.0.0.1:8090 -NG_APP_BASE_API_URL=http://127.0.0.1:8080 +NG_APP_BASE_API_URL=http://127.0.0.1:8001 diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css index e69de29..6cd9cae 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css @@ -0,0 +1,128 @@ +/* Global Container */ +.container { + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 40px; + background-color: #f4f6f9; + font-family: 'Arial', sans-serif; + color: #333; + } + + /* Header - Title and Icon */ + .client-header { + display: flex; + align-items: center; + margin-bottom: 40px; + background-color: #fff; + padding: 20px; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + } + + .client-icon { + flex-shrink: 0; /* Prevent shrinking of the icon */ + margin-right: 20px; + display: flex; + align-items: center; + justify-content: center; + min-width: 120px; /* Ensure the icon has enough space */ + min-height: 120px; + } + + .icon-pc { + font-size: 100px; + color: #3b82f6; + } + + .client-title h1 { + font-size: 2rem; + margin-bottom: 10px; + } + + .client-title p { + margin: 2px 0; + font-size: 1rem; + color: #666; + } + + /* Information Section */ + .client-info { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 40px; + } + + .info-section { + background-color: #fff; + padding: 20px; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + } + + .info-section h2 { + font-size: 1.4rem; + margin-bottom: 10px; + color: #0056b3; + } + + .info-section p { + font-size: 1rem; + margin: 5px 0; + } + + /* Disk Usage Section */ + .disk-usage { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } + + .chart-container { + width: 150px; + height: 150px; + margin-bottom: 10px; + } + + .circular-chart { + display: block; + margin: 0 auto; + max-width: 100%; + max-height: 150px; + } + + .circle-bg { + fill: none; + stroke: #eee; + stroke-width: 3.8; + } + + .circle { + fill: none; + stroke-width: 3.8; + stroke: #00bfa5; + stroke-linecap: round; + animation: progress 1s ease-out forwards; + } + + .percentage { + fill: #333; + font-size: 0.5rem; + text-anchor: middle; + } + + /* Footer */ + .client-footer { + margin-top: 40px; + text-align: center; + font-size: 1rem; + color: #555; + } + + @keyframes progress { + 0% { + stroke-dasharray: 0, 100; + } + } + \ No newline at end of file diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html index 0301b02..b3ef2de 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html @@ -1 +1,67 @@ -

client-main-view works!

+
+
+
+ computer +
+
+

{{ clientData?.name }}

+

UUID: {{ clientData?.uuid }}

+

IP Address: {{ clientData?.ip }}

+
+
+ +
+ +
+

General Information

+

Type: {{ clientData?.type }}

+

MAC Address: {{ clientData?.mac }}

+

Serial Number: {{ clientData?.serialNumber }}

+
+ + +
+

Disk Space

+
+
+ + + + 75% + +
+

Used: 75% (375GB)

+

Total: 500GB

+
+
+ + +
+

Organizational Unit

+

Name: {{ clientData?.organizationalUnit?.name }}

+

Type: {{ clientData?.organizationalUnit?.type }}

+
+ + +
+

Network Settings

+

Next Server: {{ clientData?.organizationalUnit?.networkSettings?.nextServer }}

+

Boot File Name: {{ clientData?.organizationalUnit?.networkSettings?.bootFileName }}

+

DNS: {{ clientData?.organizationalUnit?.networkSettings?.dns }}

+

Router: {{ clientData?.organizationalUnit?.networkSettings?.router }}

+
+
+ +
+

Created At: {{ clientData?.createdAt | date }}

+

Created By: {{ clientData?.createdBy }}

+
+
+ \ No newline at end of file diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts index 9d1162b..e779de1 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts @@ -1,10 +1,36 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-client-main-view', templateUrl: './client-main-view.component.html', styleUrl: './client-main-view.component.css' }) -export class ClientMainViewComponent { +export class ClientMainViewComponent implements OnInit { + baseUrl: string = import.meta.env.NG_APP_BASE_API_URL; + clientUuid: string; + clientData: any; + constructor(private http: HttpClient) { + const url = window.location.href; + const segments = url.split('/'); + this.clientUuid = segments[segments.length - 1]; + } + + ngOnInit() { + this.loadClientData(); + } + + loadClientData() { + this.http.get(`${this.baseUrl}/clients/${this.clientUuid}`).subscribe( + data => { + this.clientData = data; + }, + error => { + console.error('Error loading client data:', error); + } + ); + } + + }