disk space viewer

src/app/core/http/admin-game-http.service.ts

@@ -48,8 +48,8 @@ export class AdminGameHttpService {
       )
   }
 
-  get(slug: string): Observable<Game> {
-    return this.http.get<Game>(`${this.apiEndpoint}/admin/games/${slug}`)
+  get(slug: string): Observable<{ game: Game; free: number; size: number }> {
+    return this.http.get<{ game: Game; free: number; size: number }>(`${this.apiEndpoint}/admin/games/${slug}`)
   }
 
   uploadMusics(slug: string, files: File[]): Observable<HttpEvent<Game>> {

src/app/modules/admin/modules/games/components/game-show/game-show.component.html

@@ -6,6 +6,19 @@
   </div>
 </ng-container>
 <ng-template #gameShow>
+  <div class="progress bg-dark">
+    <div
+      class="progress-bar text-black"
+      role="progressbar"
+      [style.width]="((size - free) / size) * 100 + '%'"
+      [attr.aria-valuenow]="((size - free) / size) * 100"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      matTooltip="Space used"
+    >
+      {{ ((size - free) / size) * 100 | number: '1.0-2' }}%
+    </div>
+  </div>
   <h1>{{ game.name }}</h1>
   <div class="row">
     <div class="col-md-12">

src/app/modules/admin/modules/games/components/game-show/game-show.component.ts

@@ -21,6 +21,8 @@ export class GameShowComponent implements OnInit {
   toggleLoading = false
   toggleErrorMessage: string
   fileUploadProgress = 0
+  free = 0
+  size = 0
 
   get musics(): AbstractControl {
     return this.musicUploadForm.get('musics')
@@ -35,7 +37,9 @@ export class GameShowComponent implements OnInit {
   ngOnInit(): void {
     this.loading = true
     this.adminGameHttpService.get(this.route.snapshot.paramMap.get('slug')).subscribe((res) => {
-      this.game = res
+      this.game = res.game
+      this.free = res.free
+      this.size = res.size
       this.loading = false
     })
     this.musicUploadForm = this.formBuilder.group({

src/app/modules/admin/modules/games/game.module.ts

@@ -10,6 +10,7 @@ import { ImportGameDialogComponent } from './components/game-search/import-game-
 import { MatProgressBarModule } from '@angular/material/progress-bar'
 import {InfiniteScrollModule} from "ngx-infinite-scroll";
 import {ScrollingModule} from "@angular/cdk/scrolling";
+import {MatTooltipModule} from "@angular/material/tooltip";
 
 const routes: Routes = [
   {
@@ -29,6 +30,6 @@ const routes: Routes = [
     AlternativeNameRowComponent,
     ImportGameDialogComponent,
   ],
-  imports: [CommonModule, RouterModule.forChild(routes), SharedModule, MatProgressBarModule, InfiniteScrollModule, ScrollingModule],
+    imports: [CommonModule, RouterModule.forChild(routes), SharedModule, MatProgressBarModule, InfiniteScrollModule, ScrollingModule, MatTooltipModule],
 })
 export class GameModule {}