closes #5

LederCards · May 3, 2024 · 20195ce · 20195ce
1 parent 0f960d9
commit 20195ce
Show file tree

Hide file tree

Showing 20 changed files with 236 additions and 83 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "@ionic/angular": "^8.0.0",
     "@ng-select/ng-select": "^12.0.7",
     "@ngx-translate/core": "^15.0.0",
+    "@ngx-translate/http-loader": "^8.0.0",
     "@siemens/ngx-datatable": "^22.2.0",
     "compress-json": "^2.1.2",
     "csv-parse": "^5.3.2",

diff --git a/src/app/_shared/components/below-the-fold/below-the-fold.component.html b/src/app/_shared/components/below-the-fold/below-the-fold.component.html
@@ -3,58 +3,82 @@
     <ion-grid>
       <ion-row>
         <ion-col [sizeMd]="3" [sizeXs]="12">
-          <div class="map-title">Lederlight</div>
+          <div class="map-title">{{ 'Common.AppName' | translate }}</div>
           <hr>
           <div class="map-item">
-            <a routerLink="/">Home</a>
+            <a routerLink="/">{{ 'Components.BelowTheFold.Home' | translate }}</a>
           </div>
           <div class="map-item">
-            <a href="javascript:void(0)" (click)="toggleMode()">{{ visualMode === 'light' ? 'Dark Mode' : 'Light Mode'
-              }}</a>
+            @if(visualMode === 'light') {
+            <a href="javascript:void(0)" (click)="toggleMode()">
+              {{ 'Components.BelowTheFold.DarkMode' | translate }}
+            </a>
+            }
+
+            @else {
+            <a href="javascript:void(0)" (click)="toggleMode()">
+              {{ 'Components.BelowTheFold.LightMode' | translate }}
+            </a>
+            }
+          </div>
+          <div class="map-item">
+            <a href="javascript:void(0)" (click)="langselect.open($event)">
+              {{ 'Languages.' + localeService.currentLocale() | translate }}
+            </a>
+
+            <ion-select #langselect class="lang-selector" interface="popover" (ionChange)="changeLocale($event)">
+
+              @for(locale of localeService.allLocales; track $index) {
+              <ion-select-option [value]="locale">
+                {{ 'Languages.' + locale | translate }}
+              </ion-select-option>
+              }
+            </ion-select>
           </div>
         </ion-col>
 
         <ion-col [sizeMd]="3" [sizeXs]="12">
-          <div class="map-title">Cards</div>
+          <div class="map-title">{{ 'Components.BelowTheFold.CategoryCards' | translate }}</div>
           <hr>
           <div class="map-item">
-            <a routerLink="/advanced">Advanced Search</a>
+            <a routerLink="/advanced">{{ 'Common.Actions.AdvancedLong' | translate }}</a>
           </div>
           <div class="map-item">
-            <a routerLink="/syntax">Syntax</a>
+            <a routerLink="/syntax">{{ 'Common.Actions.SyntaxLong' | translate }}</a>
           </div>
           <div class="map-item">
-            <a routerLink="/products">All Products</a>
+            <a routerLink="/products">{{ 'Common.Actions.ProductsLong' | translate }}</a>
           </div>
         </ion-col>
 
         <ion-col [sizeMd]="3" [sizeXs]="12">
-          <div class="map-title">Support</div>
+          <div class="map-title">{{ 'Components.BelowTheFold.CategorySupport' | translate }}</div>
           <hr>
           <div class="map-item">
-            <a routerLink="/faq">FAQ</a>
+            <a routerLink="/faq">{{ 'Components.BelowTheFold.FAQ' | translate }}</a>
           </div>
           <div class="map-item">
-            <a target="_blank" href="https://github.com/LederCards">Ask a Question</a>
+            <a target="_blank" href="https://github.com/LederCards">{{ 'Components.BelowTheFold.Ask' | translate }}</a>
           </div>
         </ion-col>
 
         <ion-col [sizeMd]="3" [sizeXs]="12">
-          <div class="map-title">More</div>
+          <div class="map-title">{{ 'Components.BelowTheFold.CategoryMore' | translate }}</div>
           <hr>
           <div class="map-item">
-            <a target="_blank" href="https://github.com/LederCards">GitHub</a>
+            <a target="_blank" href="https://github.com/LederCards">{{ 'Components.BelowTheFold.GitHub' | translate
+              }}</a>
           </div>
           <div class="map-item">
-            <a target="_blank" href="https://discord.com/servers/woodland-warriors-476234833572397056">Discord</a>
+            <a target="_blank" href="https://discord.com/servers/woodland-warriors-476234833572397056">{{
+              'Components.BelowTheFold.Discord' | translate }}</a>
           </div>
         </ion-col>
       </ion-row>
     </ion-grid>
   </div>
 
   <div class="legal">
-    The literal and graphical information presented on this site about Leder Games, including card images and symbols
-    is copyright Leder Games.
+    {{ 'Components.BelowTheFold.Copyright' | translate }}
   </div>
 </div>
diff --git a/src/app/_shared/components/below-the-fold/below-the-fold.component.scss b/src/app/_shared/components/below-the-fold/below-the-fold.component.scss
@@ -1,5 +1,3 @@
-
-
 .below-the-fold {
   width: 100vw;
   min-height: 30vh;
@@ -27,7 +25,10 @@
       margin-bottom: 5px;
       --ion-color-primary: #999;
 
-      a:link, a:hover, a:visited, a:active {
+      a:link,
+      a:hover,
+      a:visited,
+      a:active {
         text-decoration: none;
       }
     }
@@ -37,4 +38,8 @@
     color: #444;
     font-size: 0.75em;
   }
+
+  .lang-selector {
+    visibility: hidden;
+  }
 }
diff --git a/src/app/_shared/components/below-the-fold/below-the-fold.component.ts b/src/app/_shared/components/below-the-fold/below-the-fold.component.ts
@@ -1,12 +1,15 @@
-import { Component, type OnInit } from '@angular/core';
+import { Component, inject, type OnInit } from '@angular/core';
 import { LocalStorage } from 'ngx-webstorage';
+import { LocaleService } from '../../../locale.service';
 
 @Component({
   selector: 'app-below-the-fold',
   templateUrl: './below-the-fold.component.html',
   styleUrls: ['./below-the-fold.component.scss'],
 })
 export class BelowTheFoldComponent implements OnInit {
+  public localeService = inject(LocaleService);
+
   @LocalStorage() visualMode!: string;
 
   constructor() {}
@@ -32,4 +35,9 @@ export class BelowTheFoldComponent implements OnInit {
     body.classList.remove('dark', 'light');
     body.classList.add(this.visualMode);
   }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  changeLocale($event: any) {
+    this.localeService.changeLocale($event.detail.value);
+  }
 }
diff --git a/src/app/_shared/components/omnisearch/omnisearch.component.html b/src/app/_shared/components/omnisearch/omnisearch.component.html
@@ -14,7 +14,7 @@
             [src]="'https://ledercards.netlify.app/symbols/product-default.webp'"></ion-img>
 
           <ion-label>
-            Leder Games
+            {{ 'Common.Company' | translate }}
           </ion-label>
         </ion-item>
 
@@ -24,7 +24,7 @@
             [src]="'https://ledercards.netlify.app/symbols/product-' + product.id + '.webp'"></ion-img>
 
           <ion-label>
-            {{ product.name }}
+            {{ 'Common.Products.' + (product.name | titlecase) | translate }}
           </ion-label>
         </ion-item>
         }

diff --git a/src/app/_shared/components/omnisearch/omnisearch.component.ts b/src/app/_shared/components/omnisearch/omnisearch.component.ts
@@ -7,6 +7,7 @@ import {
   ViewChild,
 } from '@angular/core';
 import { IonSearchbar } from '@ionic/angular';
+import { TranslateService } from '@ngx-translate/core';
 import { getProductFromQuery } from '../../../../../search/search';
 import { MetaService } from '../../../meta.service';
 
@@ -16,6 +17,7 @@ import { MetaService } from '../../../meta.service';
   styleUrls: ['./omnisearch.component.scss'],
 })
 export class OmnisearchComponent {
+  private translateService = inject(TranslateService);
   public metaService = inject(MetaService);
 
   @ViewChild(IonSearchbar) searchField!: IonSearchbar;
@@ -39,11 +41,20 @@ export class OmnisearchComponent {
   }
 
   public get placeholder(): string {
-    const choice =
-      this.metaService.getProductNameByProductId(this.chosenProduct) ??
-      'Leder Games';
+    const choiceProduct = this.metaService.getProductNameByProductId(
+      this.chosenProduct
+    );
 
-    return `Search all of ${choice}...`;
+    const choiceKey = choiceProduct
+      ? `Common.Products.${choiceProduct}`
+      : 'Common.Company';
+
+    const selectedProduct = this.translateService.instant(choiceKey);
+    const text = this.translateService.instant('Components.Omnisearch.Search', {
+      selectedProduct,
+    });
+
+    return text;
   }
 
   constructor() {

diff --git a/src/app/_shared/components/search-cards/search-cards.component.html b/src/app/_shared/components/search-cards/search-cards.component.html
@@ -1,7 +1,8 @@
 @if(searchService.displayTotal() === 0) {
 <div class="no-results ion-text-center">
-  <h2>No results found</h2>
-  <p>For help using the search tool, check the <a target="_blank" [routerLink]="['/syntax']">help guide</a>.</p>
+  <h2>{{ 'Pages.SearchResults.NoResults.Header' | translate }}</h2>
+  <p>{{ 'Pages.SearchResults.NoResults.Subheader' | translate }} <a target="_blank" [routerLink]="['/syntax']">{{
+      'Pages.SearchResults.NoResults.HelpGuide' | translate }}</a>.</p>
 </div>
 }
 
@@ -45,27 +46,33 @@ <h2>No results found</h2>
   <ion-grid class="switches">
     <ion-row>
       <ion-col [sizeXs]="12" [sizeMd]="2">
-        <div class="text-display">Cards as</div>
+        <div class="text-display">{{ 'Pages.SearchResults.Results.Sorter.As' | translate }}</div>
         <ion-select class="themed" [(ngModel)]="searchService.queryDisplayValue" interface="popover"
           placeholder="Card Display" (ionChange)="searchService.redoCurrentSearch()">
-          <ion-select-option value="images">Images</ion-select-option>
-          <ion-select-option value="text">Text</ion-select-option>
+          <ion-select-option value="images">{{ 'Pages.SearchResults.Results.Sorter.AsImages' | translate
+            }}</ion-select-option>
+          <ion-select-option value="text">{{ 'Pages.SearchResults.Results.Sorter.AsText' | translate
+            }}</ion-select-option>
         </ion-select>
       </ion-col>
 
       <ion-col [sizeXs]="12" [sizeMd]="4">
-        <div class="text-display">Sorted by</div>
+        <div class="text-display">{{ 'Pages.SearchResults.Results.Sorter.Sorted' | translate }}</div>
         <ion-select class="themed" [(ngModel)]="searchService.querySortValue" interface="popover"
           placeholder="Sort Prop" (ionChange)="searchService.redoCurrentSearch()">
-          <ion-select-option value="name">Name</ion-select-option>
-          <ion-select-option value="id">ID</ion-select-option>
-          <ion-select-option value="product">Product</ion-select-option>
+          <ion-select-option value="name">{{ 'Pages.SearchResults.Results.Sorter.SortedName' | translate
+            }}</ion-select-option>
+          <ion-select-option value="id">{{ 'Pages.SearchResults.Results.Sorter.SortedID' | translate
+            }}</ion-select-option>
+          <ion-select-option value="product">{{ 'Pages.SearchResults.Results.Sorter.SortedProduct' | translate
+            }}</ion-select-option>
         </ion-select>
 
         <ion-select class="themed" [(ngModel)]="searchService.querySortByValue" interface="popover"
           placeholder="Sort Dir" (ionChange)="searchService.redoCurrentSearch()">
-          <ion-select-option value="asc">Asc ↑</ion-select-option>
-          <ion-select-option value="desc">Desc ↓</ion-select-option>
+          <ion-select-option value="asc">{{ 'Pages.SearchResults.Results.Sorter.Asc' | translate }}</ion-select-option>
+          <ion-select-option value="desc">{{ 'Pages.SearchResults.Results.Sorter.Desc' | translate
+            }}</ion-select-option>
         </ion-select>
       </ion-col>
 
@@ -77,14 +84,15 @@ <h2>No results found</h2>
 
         <ion-button fill="outline" color="secondary" [disabled]="searchService.pageValue() <= 0"
           (click)="changePage(searchService.pageValue() - 1)">
-          <span class="symbol left">&lsaquo;</span> <span class="ion-hide-sm-down">Previous</span>
+          <span class="symbol left">&lsaquo;</span> <span class="ion-hide-sm-down">{{
+            'Pages.SearchResults.Results.Pagination.Previous' | translate }}</span>
         </ion-button>
 
         <ion-button fill="outline" color="secondary"
           [disabled]="searchService.pageValue() >= searchService.totalPages()"
           (click)="changePage(searchService.pageValue() + 1)">
-          <span class="ion-hide-sm-down">Next {{ searchService.cardsPerPage }}</span> <span
-            class="symbol right">&rsaquo;</span>
+          <span class="ion-hide-sm-down">{{ 'Pages.SearchResults.Results.Pagination.Next' | translate }} {{
+            searchService.cardsPerPage }}</span> <span class="symbol right">&rsaquo;</span>
         </ion-button>
 
         <ion-button fill="outline" color="secondary"

diff --git a/src/app/_shared/components/topbar/topbar.component.html b/src/app/_shared/components/topbar/topbar.component.html
@@ -31,17 +31,17 @@
                   <ng-container>
                     <ion-item [routerLink]="['/advanced']" detail="false">
                       <ion-icon slot="start" name="funnel-outline"></ion-icon>
-                      Advanced
+                      {{ 'Common.Actions.AdvancedShort' | translate }}
                     </ion-item>
 
                     <ion-item [routerLink]="['/syntax']" detail="false">
                       <ion-icon slot="start" name="help-circle-outline"></ion-icon>
-                      Syntax
+                      {{ 'Common.Actions.SyntaxShort' | translate }}
                     </ion-item>
 
                     <ion-item [routerLink]="['/products']" detail="false">
                       <ion-icon slot="start" name="file-tray-full-outline"></ion-icon>
-                      Products
+                      {{ 'Common.Actions.ProductsShort' | translate }}
                     </ion-item>
                   </ng-container>
                   }
@@ -61,17 +61,17 @@
           <ng-container>
             <ion-button fill="clear" color="light" [routerLink]="['/advanced']">
               <ion-icon slot="start" name="funnel-outline"></ion-icon>
-              Advanced
+              {{ 'Common.Actions.AdvancedShort' | translate }}
             </ion-button>
 
             <ion-button fill="clear" color="light" [routerLink]="['/syntax']">
               <ion-icon slot="start" name="help-circle-outline"></ion-icon>
-              Syntax
+              {{ 'Common.Actions.SyntaxShort' | translate }}
             </ion-button>
 
             <ion-button fill="clear" color="light" [routerLink]="['/products']">
               <ion-icon slot="start" name="file-tray-full-outline"></ion-icon>
-              Products
+              {{ 'Common.Actions.ProductsShort' | translate }}
             </ion-button>
           </ng-container>
           }

diff --git a/src/app/_shared/pipes/stripspaces.pipe.ts b/src/app/_shared/pipes/stripspaces.pipe.ts
@@ -0,0 +1,10 @@
+import { Pipe, type PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'stripspaces',
+})
+export class StripSpacesPipe implements PipeTransform {
+  transform(value: string): string {
+    return value.replace(' ', '');
+  }
+}