feat(app): new live interactive home

Polyterative · Feb 9, 2024 · 2280297 · 2280297
1 parent 9793396
commit 2280297
Show file tree

Hide file tree

Showing 19 changed files with 489 additions and 345 deletions.
diff --git a/src/app/components/module-parts/module-minimal/module-minimal.component.html b/src/app/components/module-parts/module-minimal/module-minimal.component.html
@@ -8,8 +8,8 @@
   >
     <div class="col"
     >
-      <app-module-part-image [data]="data"
-                             [big]="viewConfig.bigPanelImage"
+      <app-module-part-image [big]="viewConfig.bigPanelImage"
+                             [data]="data"
                              class="panel"
       ></app-module-part-image>
       <app-module-part-name [data]="data"></app-module-part-name>
@@ -22,18 +22,18 @@
                             [data]="data"
         ></app-module-part-hp>
       </div>
-      <app-timestamps-relative [data]="data"
-                               *ngIf="!viewConfig.hideDates"
+      <app-timestamps-relative *ngIf="!viewConfig.hideDates"
+                               [data]="data"
       ></app-timestamps-relative>
-      <app-module-part-description [data]="data"
-                                   *ngIf="!viewConfig.hideDescription"
+      <app-module-part-description *ngIf="!viewConfig.hideDescription"
+                                   [data]="data"
                                    [viewConfig]="viewConfig"
       ></app-module-part-description>
-
+    
     </div>
-
-    <app-module-tags [data]="data"
-                     *ngIf="!viewConfig.hideTags"
+    
+    <app-module-tags *ngIf="!viewConfig.hideTags"
+                     [data]="data"
     ></app-module-tags>
     <ng-content></ng-content>
     <ng-container *ngIf="!viewConfig.hideButtons">
@@ -48,103 +48,106 @@
              fxLayoutGap="1rem"
         >
           <ng-container *ngIf="!bag.isInCollection">
-            <button mat-icon-button
-                    matTooltip="Add to your collection"
+            <button (click)="dataService.addModuleToCollection$.next(data.id)"
                     *ngIf="(bag.singleModuleData)"
                     [disabled]="!bag.user||(bag.singleModuleData.manufacturer.id===10000)"
                     [title]="!bag.user ? 'Login to add to modules your collection':''"
-                    (click)="dataService.addModuleToCollection$.next(data.id)"
+                    mat-icon-button
+                    matTooltip="Add to your collection"
             >
               <mat-icon>add</mat-icon>
             </button>
           </ng-container>
           <ng-container *ngIf="bag.isInCollection">
-            <button mat-icon-button
-                    matTooltip="Remove from your collection"
+            <button (click)="dataService.removeModuleFromCollection$.next(data.id)"
                     *ngIf="(bag.singleModuleData)"
                     [disabled]="!bag.user||(bag.singleModuleData.manufacturer.id===10000)"
-                    (click)="dataService.removeModuleFromCollection$.next(data.id)"
+                    mat-icon-button
+                    matTooltip="Remove from your collection"
             >
               <mat-icon>eject</mat-icon>
             </button>
           </ng-container>
-
-
-          <button mat-icon-button
-                  matTooltip="Add to rack"
-                  [title]="!bag.user ? 'Login to add to modules your rack':''"
+
+
+          <button (click)="dataService.requestAddModuleToRack$.next(data)"
                   *ngIf="(bag.singleModuleData)"
                   [disabled]="(!bag.user)||(bag.singleModuleData.manufacturer.id===10000)"
-                  (click)="dataService.requestAddModuleToRack$.next(data)"
+                  [title]="!bag.user ? 'Login to add to modules your rack':''"
+                  mat-icon-button
+                  matTooltip="Add to rack"
           >
             <mat-icon>playlist_add</mat-icon>
           </button>
-
-
+          
+          
           <ng-container *ngIf="rackDataService.singleRackData$|async as rackData">
-            <button mat-icon-button
+            <button (click)="rackDataService.addModuleToRack$.next(data)"
+                    *ngIf="rackDataService.isCurrentRackEditable$|async"
                     [matTooltip]="'Add to '+rackData.name"
                     [title]="!bag.user ? 'Login to add to modules your rack':''"
-                    *ngIf="rackDataService.isCurrentRackEditable$|async"
-                    (click)="rackDataService.addModuleToRack$.next(data)"
+                    mat-icon-button
             >
               <mat-icon>playlist_add</mat-icon>
             </button>
           </ng-container>
-
+        
         </div>
         <div fxFlex="grow"></div>
         <div class="row gap1">
           <ng-container *ngIf="(bag.singleModuleData&&bag.user)">
             <ng-container *ngIf="(dataService.moduleEditingPanelOpenState$|async)==false">
-              <button mat-icon-button
-                      matTooltip="Edit module"
+              <button
+                (click)="dataService.moduleEditingPanelOpenState$.next(!dataService.moduleEditingPanelOpenState$.value)"
                       [disabled]="(!bag.user)||bag.singleModuleData.isComplete||(bag.singleModuleData.manufacturer.id===10000)"
-                      (click)="dataService.moduleEditingPanelOpenState$.next(!dataService.moduleEditingPanelOpenState$.value)"
+                mat-icon-button
+                matTooltip="Edit module"
               >
                 <mat-icon>edit</mat-icon>
               </button>
             </ng-container>
             <ng-container *ngIf="(dataService.moduleEditingPanelOpenState$|async)==true">
-              <button mat-icon-button
+              <button
+                (click)="dataService.moduleEditingPanelOpenState$.next(!dataService.moduleEditingPanelOpenState$.value)"
+                [disabled]="!bag.user"
+                mat-icon-button
                       matTooltip="Close editor"
-                      [disabled]="!bag.user"
-                      (click)="dataService.moduleEditingPanelOpenState$.next(!dataService.moduleEditingPanelOpenState$.value)"
               >
                 <mat-icon>close</mat-icon>
               </button>
             </ng-container>
           </ng-container>
           <ng-container *ngIf="bag.singleModuleData">
-            <a mat-icon-button
+            <a *ngIf="bag.singleModuleData.manualURL"
+               [href]="bag.singleModuleData.manualURL"
+               mat-icon-button
                matTooltip="Open manual"
-               *ngIf="bag.singleModuleData.manualURL"
-               target="_blank"
                rel="noopener noreferrer"
-               [href]="bag.singleModuleData.manualURL"
+               target="_blank"
             >
               <mat-icon>menu_book</mat-icon>
             </a>
-
-            <a mat-icon-button
+
+            <a (click)="dataService.copyModuleNameAndManufacturer$.next()"
+               mat-icon-button
                matTooltip="Copy module name to clipboard"
-               (click)="dataService.copyModuleNameAndManufacturer$.next()"
             >
               <mat-icon>content_copy</mat-icon>
             </a>
-
-            <a mat-icon-button
+
+            <a
+              [href]="'https://www.google.com/search?q='+bag.singleModuleData.name+' by '+bag.singleModuleData.manufacturer.name"
+              mat-icon-button
                matTooltip="Seach on Google"
+              rel="noopener noreferrer"
                target="_blank"
-               rel="noopener noreferrer"
-               [href]="'https://www.google.com/search?q='+bag.singleModuleData.name+' by '+bag.singleModuleData.manufacturer.name"
             >
               <mat-icon>open_in_new</mat-icon>
             </a>
-
+          
           </ng-container>
-
-
+          
+          
           <!--          <ng-container *ngIf="!bag.singleModuleData">-->
           <!--            <a mat-icon-button-->
           <!--               matTooltip="Show details"-->
@@ -154,7 +157,7 @@
           <!--            </a>-->
           <!--  -->
           <!--          </ng-container>-->
-
+        
         </div>
       </div>
     </ng-container>

diff --git a/src/app/components/module-parts/module-minimal/module-minimal.component.ts b/src/app/components/module-parts/module-minimal/module-minimal.component.ts
@@ -26,7 +26,7 @@ import { ModuleDetailDataService } from '../module-detail-data.service';
 })
 export class ModuleMinimalComponent implements OnInit {
   @Input() data: MinimalModule;
-  @Input() viewConfig: ModuleMinimalViewConfig = defaultModuleMinimalViewConfig;
+  @Input() viewConfig: ModuleMinimalViewConfig;
 
   isInCollection$: Observable<boolean>;
 
@@ -64,6 +64,9 @@ export interface ModuleMinimalViewConfig {
   hidePanelsOptions: boolean;
   bigPanelImage: boolean;
   ellipseDescription: boolean;
+  hidePatchedIn: boolean;
+  hideRackedIn: boolean;
+  hideBySameManufacturer: boolean;
 }
 
 export const defaultModuleMinimalViewConfig: ModuleMinimalViewConfig = {
@@ -76,5 +79,8 @@ export const defaultModuleMinimalViewConfig: ModuleMinimalViewConfig = {
   hideTags:           false,
   hidePanelsOptions:  true,
   bigPanelImage:      false,
-  ellipseDescription: true
+  ellipseDescription: true,
+  hidePatchedIn: false,
+  hideRackedIn: false,
+  hideBySameManufacturer: false
 };
diff --git a/src/app/components/rack-parts/rack-minimal/rack-minimal.component.ts b/src/app/components/rack-parts/rack-minimal/rack-minimal.component.ts
@@ -1,9 +1,15 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit
+} from '@angular/core';
 import { Subject } from 'rxjs';
 import { RackDetailDataService } from 'src/app/components/rack-parts/rack-detail-data.service';
 import { UserManagementService } from 'src/app/features/backbone/login/user-management.service';
 import { RackMinimal } from 'src/app/models/rack';
 
+
 @Component({
   selector:        'app-rack-minimal',
   templateUrl:     './rack-minimal.component.html',
@@ -45,4 +51,4 @@ export const defaultRackMinimalViewConfig: RackMinimalViewConfig = {
   hideButtons:     false,
   hideHP:          false,
   hideDates:       false
-};
+};