From 8e5ae8beb2d94f031da9629d548b03b331ece527 Mon Sep 17 00:00:00 2001
From: Polyterative <vlady.y@live.it>
Date: Sun, 10 Nov 2024 15:15:39 +0100
Subject: [PATCH] feat(module-details): statistics card in page

---
 .../module-details.component.html             | 25 +------
 .../lib-showcase-grid.component.html          |  6 +-
 .../lib-showcase-grid.component.ts            | 13 +++-
 .../rack-editor/rack-editor.component.html    | 17 +++--
 src/app/components/rack-parts/rack.module.ts  |  4 +-
 .../module-browser-detail.component.html      | 69 ++++++++++++++++---
 .../module-browser/module-browser.module.ts   |  2 +
 7 files changed, 87 insertions(+), 49 deletions(-)

diff --git a/src/app/components/module-parts/module-details/module-details.component.html b/src/app/components/module-parts/module-details/module-details.component.html
index 608ecfe8..e37cd80d 100644
--- a/src/app/components/module-parts/module-details/module-details.component.html
+++ b/src/app/components/module-parts/module-details/module-details.component.html
@@ -57,27 +57,6 @@
   >
     Abstract module, used for educational patches.
   </p>
-  
-  <div appCopyable *ngIf="data">
-    <span class="hot">{{ data?.name }}</span>
-    is a <span class="hot">{{ data?.hp }}</span>HP
-    <span class="hot">{{ data?.standard?.name }}</span> module made by
-    <span class="hot">{{ data?.manufacturer?.name }}</span>
-    
-    <br>
-    Module has <span class="hot"> {{ data?.isComplete ? 'been' : 'not been' }} completed</span>
-    and <span class="hot">{{ data?.isApproved ? 'has' : 'has not' }} </span> been approved.
-    <br>
-    
-    Module has <span class="hot">{{ data?.panels?.length }}</span> panel(s).
-    <br>
-    Provides <span class="hot">{{ data?.ins?.length }}</span> in(s)
-    and <span class="hot">{{ data?.outs?.length }}</span> out(s).
-  
-  </div>
-  
-  <div *ngIf="data">
-    First seen on <span class="hot">{{ data?.created | date: 'mediumDate' }}</span>
-    and last updated on <span class="hot">{{ data?.updated | date: 'mediumDate' }}</span>.
-  </div>
+
+
 </div>
\ No newline at end of file
diff --git a/src/app/components/rack-parts/rack-editor/lib-showcase-grid/lib-showcase-grid.component.html b/src/app/components/rack-parts/rack-editor/lib-showcase-grid/lib-showcase-grid.component.html
index 878f4890..5eaaf88f 100644
--- a/src/app/components/rack-parts/rack-editor/lib-showcase-grid/lib-showcase-grid.component.html
+++ b/src/app/components/rack-parts/rack-editor/lib-showcase-grid/lib-showcase-grid.component.html
@@ -1,7 +1,7 @@
-<div class="rowwrap gap1">
-  <app-label-value-showcase *ngFor="let item of data"
+<div class="rowwrap gap1 grow">
+  <app-label-value-showcase *ngFor="let item of data$ | async"
                             class="label-value-showcase"
-                            [style]="{ flex: '1 1 auto', 'min-width': minSize }"
+                            [style]="{ flex: '1 1 '+item.size, }"
                             [label]="item.label"
                             [icon]="item.icon"
   >
diff --git a/src/app/components/rack-parts/rack-editor/lib-showcase-grid/lib-showcase-grid.component.ts b/src/app/components/rack-parts/rack-editor/lib-showcase-grid/lib-showcase-grid.component.ts
index 235b7045..b08e9350 100644
--- a/src/app/components/rack-parts/rack-editor/lib-showcase-grid/lib-showcase-grid.component.ts
+++ b/src/app/components/rack-parts/rack-editor/lib-showcase-grid/lib-showcase-grid.component.ts
@@ -3,8 +3,10 @@ import {
   Component,
   Input
 } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
 import { LabelValueShowcaseModule } from "src/app/shared-interproject/components/@visual/label-value-showcase/label-value-showcase.module";
 import {
+  AsyncPipe,
   NgForOf,
   NgIf
 } from "@angular/common";
@@ -15,6 +17,8 @@ interface LabelValueData {
   label: string;
   value: string;
   icon?: string;
+  hidden?: boolean;
+  size?: string;
 }
 
 @Component({
@@ -24,15 +28,18 @@ interface LabelValueData {
     LabelValueShowcaseModule,
     NgForOf,
     MatIcon,
-    NgIf
+    NgIf,
+    AsyncPipe
   ],
   templateUrl: './lib-showcase-grid.component.html',
   styleUrl: './lib-showcase-grid.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LibShowcaseGridComponent {
+  public data$ = new BehaviorSubject<LabelValueData[]>([]);
   
-  @Input() data: LabelValueData[] = [];
-  @Input() minSize: string = '6rem'; // Default size is 12rem
+  @Input() set data(values: LabelValueData[]) {
+    this.data$.next(values.filter(v => !v.hidden));
+  }
   
 }
diff --git a/src/app/components/rack-parts/rack-editor/rack-editor.component.html b/src/app/components/rack-parts/rack-editor/rack-editor.component.html
index a5041dbc..c8ba43e1 100644
--- a/src/app/components/rack-parts/rack-editor/rack-editor.component.html
+++ b/src/app/components/rack-parts/rack-editor/rack-editor.component.html
@@ -43,16 +43,15 @@
               This rack private. It won't be listed in search but will be accessible to anyone who has
               the URLm
             </app-advice-tooltip>
-            <lib-clean-card>
+            <lib-clean-card [@enter]>
               <app-lib-showcase-grid [data]="[
-    { label: 'Rack name', value: data.name, icon: 'label' },
-    { label: 'Rack rows', value: data.rows.toString(), icon: 'view_comfy' },
-    { label: 'Modules', value: (bag.rowedRackedModules | totalModulesOfRack).toString(), icon: 'widgets' },
-    { label: 'HP', value: data.hp.toString(), icon: 'straighten' },
-    { label: 'HP used', value: (bag.rowedRackedModules | totalHpOfRack).toString(), icon: 'crop_5_4' },
-    { label: 'HP available', value: (data.hp * data.rows - (bag.rowedRackedModules | totalHpOfRack)).toString(), icon: 'crop_free' },
-    
-    { label: 'Rack Utilization', value: calculateRackUtilization(data.hp, data.rows, bag.rowedRackedModules | totalHpOfRack), icon: 'bar_chart' },
+    { label: 'Rack name', value: data.name, icon: 'label', size: 'auto' },
+    { label: 'Rack rows', value: data.rows.toString(), icon: 'view_comfy', size: 'auto' },
+    { label: 'Modules', value: (bag.rowedRackedModules | totalModulesOfRack).toString(), icon: 'widgets', size: 'auto' },
+    { label: 'HP', value: data.hp.toString(), icon: 'straighten', size: 'auto' },
+    { label: 'HP used', value: (bag.rowedRackedModules | totalHpOfRack).toString(), icon: 'crop_5_4', size: 'auto' },
+    { label: 'HP available', value: (data.hp * data.rows - (bag.rowedRackedModules | totalHpOfRack)).toString(), icon: 'crop_free', size: 'auto' },
+    { label: 'Rack Utilization', value: calculateRackUtilization(data.hp, data.rows, bag.rowedRackedModules | totalHpOfRack), icon: 'bar_chart', size: 'auto' }
   ]">
               </app-lib-showcase-grid>
               
diff --git a/src/app/components/rack-parts/rack.module.ts b/src/app/components/rack-parts/rack.module.ts
index 5879def5..51f79d7e 100644
--- a/src/app/components/rack-parts/rack.module.ts
+++ b/src/app/components/rack-parts/rack.module.ts
@@ -46,7 +46,7 @@ import { MatBadge } from "@angular/material/badge";
 import { CalculateRowInformationPipe } from "src/app/components/rack-parts/rack-editor/calculate-row-information.pipe";
 import { RackImageComponent } from "src/app/components/rack-parts/rack-image/rack-image.component";
 import { LabelValueShowcaseModule } from "src/app/shared-interproject/components/@visual/label-value-showcase/label-value-showcase.module";
-import { LibShowcaseGridComponent } from "src/app/components/rack-parts/rack-editor/lib-showcase-grid/lib-showcase-grid.component";
+import { LibShowcaseGridComponent, } from "src/app/components/rack-parts/rack-editor/lib-showcase-grid/lib-showcase-grid.component";
 
 
 @NgModule({
@@ -109,7 +109,7 @@ import { LibShowcaseGridComponent } from "src/app/components/rack-parts/rack-edi
     CalculateRowInformationPipe,
     RackImageComponent,
     LabelValueShowcaseModule,
-    LibShowcaseGridComponent
+    LibShowcaseGridComponent,
   ]
 })
 export class RackModule {
diff --git a/src/app/features/module-browser/module-browser-detail/module-browser-detail.component.html b/src/app/features/module-browser/module-browser-detail/module-browser-detail.component.html
index c934fe15..7a4e951a 100644
--- a/src/app/features/module-browser/module-browser-detail/module-browser-detail.component.html
+++ b/src/app/features/module-browser/module-browser-detail/module-browser-detail.component.html
@@ -33,8 +33,64 @@
               </ng-template>
             
             </lib-clean-card>
-            <div class="col"
+            <div class="col gap1"
             >
+              
+              <!--              <div appCopyable *ngIf="data">-->
+              <!--                <span class="hot">{{ data?.name }}</span>-->
+              <!--                is a <span class="hot">{{ data?.hp }}</span>HP-->
+              <!--                <span class="hot">{{ data?.standard?.name }}</span> module made by-->
+              <!--                <span class="hot">{{ data?.manufacturer?.name }}</span>-->
+              <!--                -->
+              <!--                <br>-->
+              <!--                Module has <span class="hot"> {{ data?.isComplete ? 'been' : 'not been' }} completed</span>-->
+              <!--                and <span class="hot">{{ data?.isApproved ? 'has' : 'has not' }} </span> been approved.-->
+              <!--                <br>-->
+              <!--                -->
+              <!--                Module has <span class="hot">{{ data?.panels?.length }}</span> panel(s).-->
+              <!--                <br>-->
+              <!--                Provides <span class="hot">{{ data?.ins?.length }}</span> in(s)-->
+              <!--                and <span class="hot">{{ data?.outs?.length }}</span> out(s).-->
+              <!--              -->
+              <!--              </div>-->
+              <!--              -->
+              <!--              <div *ngIf="data">-->
+              <!--                First seen on <span class="hot">{{ data?.created | date: 'mediumDate' }}</span>-->
+              <!--                and last updated on <span class="hot">{{ data?.updated | date: 'mediumDate' }}</span>.-->
+              <!--              </div>-->
+              
+              
+              <lib-clean-card [@enter]>
+                <div class="col gap1">
+                  <app-lib-showcase-grid [data]="[
+      { label: 'Manufacturer', value: bag.data.manufacturer.name, icon: 'business',size:'auto' },
+      { label: 'HP', value: bag.data.hp.toString(), icon: 'straighten' },
+      { label: 'Standard', value: bag.data.standard.name, icon: 'verified' },
+      { label: 'Panels', value: bag.data.panels.length.toString(), icon: 'view_module' },
+    ]">
+                  </app-lib-showcase-grid>
+                  
+                  <app-lib-showcase-grid
+                    *ngIf="(bag.data.outs.length + bag.data.ins.length)>0"
+                    [data]="[
+      { label: 'Inputs', value: bag.data.ins.length.toString(), icon: 'input', hidden: bag.data.ins.length === 0 ,size:'auto' },
+      { label: 'Outputs', value: bag.data.outs.length.toString(), icon: 'output', hidden: bag.data.outs.length === 0 ,size:'auto'},
+      { label: 'Total Jacks', value: (bag.data.outs.length + bag.data.ins.length).toString(), icon: 'settings_input_composite', hidden: (bag.data.outs.length + bag.data.ins.length) === 0 ,size:'auto'},
+      { label: 'Density (in+out/hp)', value: ((bag.data.outs.length + bag.data.ins.length)/bag.data.hp).toPrecision(3), icon: 'bar_chart' ,size:'auto'},
+    ]">
+                  </app-lib-showcase-grid>
+                  <app-lib-showcase-grid [data]="[
+        { label: 'Data Complete', value: bag.data.isComplete ? 'Yes' : 'No', icon: 'done',size:'auto'  },
+        { label: 'Approved', value: bag.data.isApproved ? 'Yes' : 'No', icon: 'thumb_up',size:'auto'  },
+      ]">
+                  </app-lib-showcase-grid>
+                </div>
+                
+                <!--              { label: '+12V mA', value: '12000', icon: 'bolt' },-->
+                <!--               { label: '-12V mA', value: '12000', icon: 'bolt' },-->
+                <!--              { label: '+5V mA', value: '12000', icon: 'bolt' }-->
+              </lib-clean-card>
+              
               <div class="col gap1"
                    *ngIf="bag.data"
               >
@@ -84,14 +140,6 @@
               
               
               </div>
-              <p fxLayoutAlign="end"
-                 style="font-size: 1rem; font-family: 'Roboto', sans-serif"
-                 *ngIf="bag.data&&!bag.data.isComplete&&!viewConfig.hideLabels&&(bag.data.manufacturer.id!==10000)"
-              >
-                Do you know about this module?
-                Please help the community by adding the module's ins and outs.
-                Contributors' patches DO sound better!
-              </p>
             </div>
             
             <lib-hero-content-card titleNormal="Search on" *ngIf="bag.data">
@@ -184,6 +232,9 @@
           >
             <lib-hero-content-card *ngIf="bag.data&&dataService.moduleEditingPanelOpenState$|async"
                                    titleNormal="Module Editor"
+                                   description="Do you know about this module?
+                Please help the community by adding the module's ins and outs.
+                Contributors' patches DO sound better!"
             >
               <app-module-editor [data]="(bag.data)"
               ></app-module-editor>
diff --git a/src/app/features/module-browser/module-browser.module.ts b/src/app/features/module-browser/module-browser.module.ts
index 1f4719a9..97512574 100644
--- a/src/app/features/module-browser/module-browser.module.ts
+++ b/src/app/features/module-browser/module-browser.module.ts
@@ -51,6 +51,7 @@ import {
 } from "@angular/material/menu";
 import { CommentsModule } from "src/app/components/shared-atoms/comments/comments.module";
 import { CopyableDirective } from "src/app/shared-interproject/app-copy-on-click.directive";
+import { LibShowcaseGridComponent, } from "src/app/components/rack-parts/rack-editor/lib-showcase-grid/lib-showcase-grid.component";
 
 
 const parentPrefix = 'modules';
@@ -135,6 +136,7 @@ const parentPrefix = 'modules';
     MatMenuTrigger,
     CommentsModule,
     CopyableDirective,
+    LibShowcaseGridComponent,
   ],
   exports: [
     ModuleListComponent,