From ceea116beb9ca93c608835b3b4faa5fc489636c8 Mon Sep 17 00:00:00 2001
From: dweinholz <david-weinholz@web.de>
Date: Wed, 4 Sep 2024 13:30:21 +0200
Subject: [PATCH] added spinner to numbers

---
 .../number-charts.component.html              | 162 ++++++++++--------
 .../number-charts/number-charts.component.ts  |  15 +-
 2 files changed, 99 insertions(+), 78 deletions(-)

diff --git a/src/app/vo_manager/number-charts/number-charts.component.html b/src/app/vo_manager/number-charts/number-charts.component.html
index 9187aa5def..0cdab42671 100644
--- a/src/app/vo_manager/number-charts/number-charts.component.html
+++ b/src/app/vo_manager/number-charts/number-charts.component.html
@@ -3,89 +3,101 @@
 	<div class="card">
 		<div class="card-header">Project Numbers</div>
 		<div class="card-body">
-			<div id="projectNumbersBarChart" [class.hidden]="!showProjectNumbersBarChart"></div>
-			<div id="projectNumbersAreaChart" [class.hidden]="!showProjectNumbersAreaChart"></div>
-			<div class="btn-group">
-				<button
-					class="btn btn-outline-primary"
-					*ngIf="showProjectNumbersBarChart"
-					(click)="downloadAsPNG('projectNumbersBarChart', 'projectNumbers')"
-				>
-					Download as PNG
-				</button>
-				<button
-					class="btn btn-outline-primary"
-					*ngIf="showProjectNumbersAreaChart"
-					(click)="downloadAsPNG('projectNumbersAreaChart', 'projectNumbers')"
-				>
-					Download as PNG
-				</button>
-				<!--<button class="btn btn-outline-primary"
-                        (click)="downloadAsPDF('projectNumbersSVG', 'projectNumbers')">
-                  Download as PDF
-                </button>-->
-				<button class="btn btn-outline-primary" (click)="toggleGraph('projects')">
-					{{ !this.showProjectNumbersAreaChart ? 'show as area chart' : 'show as bar chart' }}
-				</button>
-			</div>
+			@if (generatingNumbersCharts) {
+				<span class="spinner-border text-info"></span>
+			} @else {
+				<div id="projectNumbersBarChart" [class.hidden]="!showProjectNumbersBarChart"></div>
+				<div id="projectNumbersAreaChart" [class.hidden]="!showProjectNumbersAreaChart"></div>
+				<div class="btn-group">
+					<button
+						class="btn btn-outline-primary"
+						*ngIf="showProjectNumbersBarChart"
+						(click)="downloadAsPNG('projectNumbersBarChart', 'projectNumbers')"
+					>
+						Download as PNG
+					</button>
+					<button
+						class="btn btn-outline-primary"
+						*ngIf="showProjectNumbersAreaChart"
+						(click)="downloadAsPNG('projectNumbersAreaChart', 'projectNumbers')"
+					>
+						Download as PNG
+					</button>
+					<!--<button class="btn btn-outline-primary"
+                            (click)="downloadAsPDF('projectNumbersSVG', 'projectNumbers')">
+                      Download as PDF
+                    </button>-->
+					<button class="btn btn-outline-primary" (click)="toggleGraph('projects')">
+						{{ !showProjectNumbersAreaChart ? 'show as area chart' : 'show as bar chart' }}
+					</button>
+				</div>
+			}
 		</div>
 	</div>
 	<div class="card">
 		<div class="card-header">Cloud Resources</div>
 		<div class="card-body">
-			<div id="ramBarChart" [class.hidden]="!showRamBarChart"></div>
-			<div id="ramAreaChart" [class.hidden]="!showRamAreChart"></div>
-			<div class="btn-group">
-				<button
-					class="btn btn-outline-primary"
-					*ngIf="showRamBarChart"
-					(click)="downloadAsPNG('ramBarChart', 'resourcesRamNumbers')"
-				>
-					Download as PNG
-				</button>
-				<button
-					class="btn btn-outline-primary"
-					*ngIf="showRamAreChart"
-					(click)="downloadAsPNG('ramAreaChart', 'resourcesRamNumbers')"
-				>
-					Download as PNG
-				</button>
-				<!--<button class="btn btn-outline-primary"
-                        (click)="downloadAsPDF('ramNumbersSVG', 'resourcesRamNumbers')">
-                  Download as PDF
-                </button>-->
-				<button class="btn btn-outline-primary" (click)="toggleGraph('ram')">
-					{{ !this.showRamAreChart ? 'show as area chart' : 'show as bar chart' }}
-				</button>
-			</div>
+			@if (generatingRamsCharts) {
+				<span class="spinner-border text-info"></span>
+			} @else {
+				<div id="ramBarChart" [class.hidden]="!showRamBarChart"></div>
+				<div id="ramAreaChart" [class.hidden]="!showRamAreChart"></div>
+				<div class="btn-group">
+					<button
+						class="btn btn-outline-primary"
+						*ngIf="showRamBarChart"
+						(click)="downloadAsPNG('ramBarChart', 'resourcesRamNumbers')"
+					>
+						Download as PNG
+					</button>
+					<button
+						class="btn btn-outline-primary"
+						*ngIf="showRamAreChart"
+						(click)="downloadAsPNG('ramAreaChart', 'resourcesRamNumbers')"
+					>
+						Download as PNG
+					</button>
+					<!--<button class="btn btn-outline-primary"
+                            (click)="downloadAsPDF('ramNumbersSVG', 'resourcesRamNumbers')">
+                      Download as PDF
+                    </button>-->
+					<button class="btn btn-outline-primary" (click)="toggleGraph('ram')">
+						{{ !this.showRamAreChart ? 'show as area chart' : 'show as bar chart' }}
+					</button>
+				</div>
+			}
 		</div>
 		<div class="card-body">
-			<div id="coresBarChart" [class.hidden]="!showCoresBarChart"></div>
-			<div id="coresAreaChart" [class.hidden]="!showCoresAreChart"></div>
+			@if (generatingCoresCharts) {
+				<span class="spinner-border text-info"></span>
+			} @else {
+				<div id="coresBarChart" [class.hidden]="!showCoresBarChart"></div>
+				<div id="coresAreaChart" [class.hidden]="!showCoresAreChart"></div>
 
-			<div class="btn-group">
-				<button
-					class="btn btn-outline-primary"
-					*ngIf="showCoresBarChart"
-					(click)="downloadAsPNG('coresBarChart', 'resourcesCoresNumbers')"
-				>
-					Download as PNG
-				</button>
-				<button
-					class="btn btn-outline-primary"
-					*ngIf="showCoresAreChart"
-					(click)="downloadAsPNG('coresAreaChart', 'resourcesCoresNumbers')"
-				>
-					Download as PNG
-				</button>
-				<!--<button class="btn btn-outline-primary"
-                        (click)="downloadAsPDF('coresNumbersSVG', 'resourcesCoresNumbers')">
-                  Download as PDF
-                </button>-->
-				<button class="btn btn-outline-primary" (click)="toggleGraph('cores')">
-					{{ !this.showCoresAreChart ? 'show as area chart' : 'show as bar chart' }}
-				</button>
-			</div>
+				<div class="btn-group">
+					<button
+						class="btn btn-outline-primary"
+						*ngIf="showCoresBarChart"
+						(click)="downloadAsPNG('coresBarChart', 'resourcesCoresNumbers')"
+					>
+						Download as PNG
+					</button>
+					<button
+						class="btn btn-outline-primary"
+						*ngIf="showCoresAreChart"
+						(click)="downloadAsPNG('coresAreaChart', 'resourcesCoresNumbers')"
+					>
+						Download as PNG
+					</button>
+					<!--<button class="btn btn-outline-primary"
+                            (click)="downloadAsPDF('coresNumbersSVG', 'resourcesCoresNumbers')">
+                      Download as PDF
+                    </button>-->
+					<button class="btn btn-outline-primary" (click)="toggleGraph('cores')">
+						{{ !this.showCoresAreChart ? 'show as area chart' : 'show as bar chart' }}
+					</button>
+				</div>
+			}
 		</div>
 	</div>
 </div>
diff --git a/src/app/vo_manager/number-charts/number-charts.component.ts b/src/app/vo_manager/number-charts/number-charts.component.ts
index 3e989a8879..2acc4f0bfc 100644
--- a/src/app/vo_manager/number-charts/number-charts.component.ts
+++ b/src/app/vo_manager/number-charts/number-charts.component.ts
@@ -21,9 +21,7 @@ export class NumberChartsComponent implements OnInit {
 	is_vo_admin: boolean = true
 	title: string = 'Cloud Numbers'
 
-	constructor(private numbersService: NumbersService) {
-		this.numbersService = numbersService
-	}
+	constructor(private numbersService: NumbersService) {}
 
 	/**
 	 * Charts
@@ -41,6 +39,9 @@ export class NumberChartsComponent implements OnInit {
 	showRamAreChart: boolean = true
 	showProjectNumbersAreaChart: boolean = true
 	showProjectNumbersBarChart: boolean = false
+	generatingNumbersCharts: boolean = true
+	generatingRamsCharts: boolean = true
+	generatingCoresCharts: boolean = true
 
 	/**
 	 * Lists for numbers of projects per project type and status.
@@ -141,6 +142,8 @@ export class NumberChartsComponent implements OnInit {
 	 * Draws the cores Chart into the template.
 	 */
 	drawCoresNumbersChart(): void {
+		this.generatingCoresCharts = true
+
 		this.coresAreaChart = bb.generate({
 			bindto: '#coresAreaChart',
 			size: {
@@ -228,6 +231,7 @@ export class NumberChartsComponent implements OnInit {
 				show: false
 			}
 		})
+		this.generatingCoresCharts = false
 	}
 
 	/**
@@ -235,6 +239,8 @@ export class NumberChartsComponent implements OnInit {
 	 * Draws the ram Chart into the template.
 	 */
 	drawRamNumbersChart(): void {
+		this.generatingRamsCharts = true
+
 		this.ramAreaChart = bb.generate({
 			bindto: '#ramAreaChart',
 			size: {
@@ -322,12 +328,14 @@ export class NumberChartsComponent implements OnInit {
 				show: false
 			}
 		})
+		this.generatingRamsCharts = false
 	}
 
 	/**
 	 * Draws the project numbers chart in the template.
 	 */
 	drawProjectNumbersChart(): void {
+		this.generatingNumbersCharts = true
 		this.projectNumbersAreaChart = bb.generate({
 			bindto: '#projectNumbersAreaChart',
 			size: {
@@ -431,6 +439,7 @@ export class NumberChartsComponent implements OnInit {
 				show: false
 			}
 		})
+		this.generatingNumbersCharts = false
 	}
 
 	toggleGraph(chart: string): void {