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 b523616..897d6e4 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 @@ -1,158 +1,177 @@ +.client-header { + display: flex; + align-items: center; + margin-bottom: 10px; + background-color: #fff; + padding: 20px; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} - - - .client-header { - display: flex; - align-items: center; - margin-bottom: 10px; - background-color: #fff; - padding: 20px; - border-radius: 12px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - } - - .client-icon { - flex-shrink: 0; - margin-right: 20px; - display: flex; - align-items: center; - justify-content: center; - min-width: 120px; - min-height: 120px; - } - - .icon-pc { - font-size: 25px; - color: #3b82f6; - } - - .client-title h1 { - font-size: 2rem; - margin-bottom: 10px; - } - - .client-title p { - margin: 2px 0; - font-size: 1rem; - color: #666; - } - - .client-info { - margin: 20px 0; - } - - .info-section { - margin-bottom: 30px; - } - - .two-column-table { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 10px; - margin-top: 15px; - } - - .table-row { - display: flex; - justify-content: space-between; - padding: 10px; - border-bottom: 1px solid #e0e0e0; - } - - .column.property { - font-weight: bold; - text-align: left; - width: 45%; - } - - .column.value { - text-align: right; - width: 45%; - } - - .mat-tab-group { - min-height: 400px; - } - - .mat-tab-body-wrapper { - min-height: inherit; - } - - .info-section { - background-color: #fff; - padding: 20px; - border-radius: 12px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - height: auto; - } - - .info-section h2 { - font-size: 1.4rem; - margin-bottom: 10px; - color: #0056b3; - } - - .info-section p { - font-size: 1rem; - margin: 5px 0; - } - - .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; - } +.client-icon { + flex-shrink: 0; + margin-right: 20px; + display: flex; + align-items: center; + justify-content: center; + min-width: 120px; + min-height: 120px; +} - .assistants-container{ - background-color: #fff; - margin-top: 10px; - padding: 20px; - border-radius: 12px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - } +.icon-pc { + font-size: 25px; + color: #3b82f6; +} - .buttons-row{ - display: flex; - justify-content: space-between; - padding: 20px; - } - - @keyframes progress { - 0% { - stroke-dasharray: 0, 100; - } +.client-title h1 { + font-size: 2rem; + margin-bottom: 10px; +} + +.client-title p { + margin: 2px 0; + font-size: 1rem; + color: #666; +} + +.client-info { + margin: 20px 0; +} + +.info-section { + margin-bottom: 30px; + background-color: #fff; + padding: 20px; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.two-column-table { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; + margin-top: 15px; +} + +.table-row { + display: flex; + justify-content: space-between; + padding: 10px; + border-bottom: 1px solid #e0e0e0; +} + +.column.property { + font-weight: bold; + text-align: left; + width: 45%; +} + +.column.value { + text-align: right; + width: 45%; +} + +.mat-tab-group { + min-height: 400px; +} + +.mat-tab-body-wrapper { + min-height: inherit; +} + +.info-section h2 { + font-size: 1.4rem; + margin-bottom: 10px; + color: #0056b3; +} + +.info-section p { + font-size: 1rem; + margin: 5px 0; +} + +.second-section { + display: grid; + grid-template-columns: 1fr 3fr; + gap: 20px; +} + +.buttons-row { + display: flex; + flex-direction: column; + background-color: #fff; + padding: 20px; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + justify-content: flex-start; +} + +.buttons-row button { + margin-bottom: 10px; + width: 100%; +} + +.disk-usage { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + margin-bottom: 20px; + background-color: #fff; + padding: 20px; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.chart-container { + width: 150px; + height: 150px; + margin-bottom: 15px; +} + +.circular-chart { + display: block; + margin: 0 auto; + max-width: 100%; + max-height: 150px; +} + +.circle-bg { + fill: none; + stroke: #f0f0f0; + 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.7rem; + text-anchor: middle; +} + +.disk-usage h3 { + margin: 0 0 10px 0; + font-size: 1.2rem; + color: #333; +} + +@keyframes progress { + 0% { + stroke-dasharray: 0, 100; } +} + +.assistants-container { + background-color: #fff; + margin-top: 10px; + padding: 20px; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} 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 214fc77..273c99e 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 @@ -27,35 +27,41 @@ -
-

Disco

-
-
- - - - 75% - -
-

Usado: 75% (375GB)

-

Total: 500GB

+ +
+
+ +
-
- - -
+
+

Disco

+ +
+

Disco {{ disk.diskNumber }}

+
+ + + + {{ disk.percentage }}% + +
+

Usado: {{ disk.used }} GB ({{ disk.percentage }}%)

+

Total: {{ disk.total }} GB

+
+ +
-
+
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 2f5ab16..a23828d 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 @@ -16,14 +16,12 @@ export class ClientMainViewComponent implements OnInit { clientData: any = {}; isPartitionAssistantVisible: boolean = false; isBootImageVisible: boolean = false; - isGeneralInfoVisible: boolean = true; isDiskUsageVisible: boolean = true; - displayedColumns: string[] = ['property', 'value']; - generalData: ClientInfo[] = []; networkData: ClientInfo[] = []; classroomData: ClientInfo[] = []; + diskUsageData: any[] = []; constructor(private http: HttpClient) { const url = window.location.href; @@ -32,10 +30,11 @@ export class ClientMainViewComponent implements OnInit { } ngOnInit() { - this.clientData = history.state.clientData + this.clientData = history.state.clientData; this.updateGeneralData(); this.updateNetworkData(); this.updateClassroomData(); + this.calculateDiskUsage(); } updateGeneralData() { @@ -82,6 +81,29 @@ export class ClientMainViewComponent implements OnInit { ]; } + calculateDiskUsage() { + const diskUsageMap = new Map(); + + this.clientData.partitions.forEach((partition: any) => { + const diskNumber = partition.diskNumber; + if (!diskUsageMap.has(diskNumber)) { + diskUsageMap.set(diskNumber, { total: 0, used: 0 }); + } + + const diskData = diskUsageMap.get(diskNumber); + if (partition.partitionNumber === 0) { + diskData!.total = partition.size / (1024 * 1024); + } else { + diskData!.used += partition.size / (1024 * 1024); + } + }); + + this.diskUsageData = Array.from(diskUsageMap.entries()).map(([diskNumber, { total, used }]) => { + const percentage = total > 0 ? Math.round((used / total) * 100) : 0; + return { diskNumber, total, used, percentage }; + }); + } + togglePartitionAssistant() { this.isPartitionAssistantVisible = !this.isPartitionAssistantVisible; this.isBootImageVisible = false;