Update client-main-view component and .env file
parent
8c311c354c
commit
58337c378c
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1 +1,67 @@
|
|||
<p>client-main-view works!</p>
|
||||
<div class="container">
|
||||
<div class="client-header">
|
||||
<div class="client-icon">
|
||||
<mat-icon class="icon-pc">computer</mat-icon>
|
||||
</div>
|
||||
<div class="client-title">
|
||||
<h1>{{ clientData?.name }}</h1>
|
||||
<p><strong>UUID:</strong> {{ clientData?.uuid }}</p>
|
||||
<p><strong>IP Address:</strong> {{ clientData?.ip }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="client-info">
|
||||
<!-- General Information -->
|
||||
<div class="info-section">
|
||||
<h2>General Information</h2>
|
||||
<p><strong>Type:</strong> {{ clientData?.type }}</p>
|
||||
<p><strong>MAC Address:</strong> {{ clientData?.mac }}</p>
|
||||
<p><strong>Serial Number:</strong> {{ clientData?.serialNumber }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Disk Space Usage -->
|
||||
<div class="info-section">
|
||||
<h2>Disk Space</h2>
|
||||
<div class="disk-usage">
|
||||
<div class="chart-container">
|
||||
<svg viewBox="0 0 36 36" class="circular-chart green">
|
||||
<path class="circle-bg"
|
||||
d="M18 2.0845
|
||||
a 15.9155 15.9155 0 0 1 0 31.831
|
||||
a 15.9155 15.9155 0 0 1 0 -31.831" />
|
||||
<path class="circle"
|
||||
stroke-dasharray="75, 100"
|
||||
d="M18 2.0845
|
||||
a 15.9155 15.9155 0 0 1 0 31.831
|
||||
a 15.9155 15.9155 0 0 1 0 -31.831" />
|
||||
<text x="18" y="20.35" class="percentage">75%</text>
|
||||
</svg>
|
||||
</div>
|
||||
<p>Used: 75% (375GB)</p>
|
||||
<p>Total: 500GB</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Organizational Unit -->
|
||||
<div class="info-section">
|
||||
<h2>Organizational Unit</h2>
|
||||
<p><strong>Name:</strong> {{ clientData?.organizationalUnit?.name }}</p>
|
||||
<p><strong>Type:</strong> {{ clientData?.organizationalUnit?.type }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Network Settings -->
|
||||
<div class="info-section">
|
||||
<h2>Network Settings</h2>
|
||||
<p><strong>Next Server:</strong> {{ clientData?.organizationalUnit?.networkSettings?.nextServer }}</p>
|
||||
<p><strong>Boot File Name:</strong> {{ clientData?.organizationalUnit?.networkSettings?.bootFileName }}</p>
|
||||
<p><strong>DNS:</strong> {{ clientData?.organizationalUnit?.networkSettings?.dns }}</p>
|
||||
<p><strong>Router:</strong> {{ clientData?.organizationalUnit?.networkSettings?.router }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="client-footer">
|
||||
<p><strong>Created At:</strong> {{ clientData?.createdAt | date }}</p>
|
||||
<p><strong>Created By:</strong> {{ clientData?.createdBy }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -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);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue