Use angular-fontawesome insead of "raw" Fontawesome.

bassages · Apr 10, 2022 · f397d5e · f397d5e
1 parent dc4d02d
commit f397d5e
Show file tree

Hide file tree

Showing 34 changed files with 244 additions and 118 deletions.
diff --git a/angular.json b/angular.json
@@ -31,9 +31,6 @@
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
-              "node_modules/@fortawesome/fontawesome/index.js",
-              "node_modules/@fortawesome/fontawesome-free-solid/index.js",
-              "node_modules/@fortawesome/fontawesome-free-regular/index.js",
               "node_modules/d3/d3.js"
             ],
             "vendorChunk": true,
@@ -95,10 +92,7 @@
             "tsConfig": "tsconfig.spec.json",
             "scripts": [
               "node_modules/jquery/dist/jquery.min.js",
-              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
-              "node_modules/@fortawesome/fontawesome/index.js",
-              "node_modules/@fortawesome/fontawesome-free-solid/index.js",
-              "node_modules/@fortawesome/fontawesome-free-regular/index.js"
+              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
             ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,11 +34,12 @@
     "@angular/platform-browser": "13.3.2",
     "@angular/platform-browser-dynamic": "13.3.2",
     "@angular/router": "13.3.2",
-    "@fortawesome/fontawesome": "^1.1.8",
-    "@fortawesome/fontawesome-free-brands": "^5.0.13",
-    "@fortawesome/fontawesome-free-regular": "^5.0.13",
-    "@fortawesome/fontawesome-free-solid": "^5.0.13",
-    "@fortawesome/fontawesome-free-webfonts": "^1.0.9",
+    "@fortawesome/angular-fontawesome": "^0.10.2",
+    "@fortawesome/fontawesome-free": "^6.1.1",
+    "@fortawesome/fontawesome-svg-core": "^6.1.0",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@ng-bootstrap/ng-bootstrap": "^12.0.1",
     "@popperjs/core": "^2.11.4",
     "@stomp/ng2-stompjs": "^8.0.0",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -50,6 +50,7 @@ import {LoginComponent} from './login/login.component';
 import {KlimaatSensorService} from './klimaat/klimaatsensor.service';
 import {NgxSpinnerModule} from 'ngx-spinner';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 
 export function socketProvider() {
   return new SockJS('/ws');
@@ -125,7 +126,8 @@ const appRoutes: Routes = [
     DpDatePickerModule,
     NgxSpinnerModule,
     BrowserAnimationsModule,
-    RouterModule.forRoot(appRoutes, { enableTracing: false, useHash: true, relativeLinkResolution: 'legacy' })
+    RouterModule.forRoot(appRoutes, { enableTracing: false, useHash: true, relativeLinkResolution: 'legacy' }),
+    FontAwesomeModule
   ],
   providers: [
     AuthService,

diff --git a/src/app/dashboard/gas-verbruik/gas-verbruik.component.html b/src/app/dashboard/gas-verbruik/gas-verbruik.component.html
@@ -1,6 +1,6 @@
 <div class="card">
   <div class="card-header h3 clickable" (click)="navigateToVerbruikDetails()">
-    <i class="fas fa-fire" aria-hidden="true"></i> Gas
+    <fa-icon [icon]="faFireFlameCurved"></fa-icon> Gas
   </div>
   <div class="card-body">
     <div class="ledbar float-start">
@@ -16,7 +16,9 @@
     <p class="h3">Meterstand</p>
 
     <p class="h6" *ngIf="meterstand">
-      <span ngbTooltip="Normaaltarief"><i class="fas fa-moon" aria-hidden="true" ngbTooltip="Dal- en normaaltarief"></i> <i class="fas fa-sun" aria-hidden="true"></i> {{meterstand.gas | number: '1.3-3'}}</span>
+      <span ngbTooltip="Dal- en normaaltarief">
+        <fa-icon [icon]="faMoon"></fa-icon> <fa-icon [icon]="faSun"></fa-icon><span class="ms-1">{{meterstand.gas | number: '1.3-3'}}</span>
+      </span>
     </p>
     <p class="h6" *ngIf="!meterstand">
       -

diff --git a/src/app/dashboard/gas-verbruik/gas-verbruik.component.ts b/src/app/dashboard/gas-verbruik/gas-verbruik.component.ts
@@ -11,13 +11,17 @@ import {VerbruikOpDag} from '../../energie-verbruik/verbruikOpDag';
 import {GemiddeldVerbruikInPeriod} from '../../energie-verbruik/gemiddeldVerbruikInPeriod';
 import {Router} from '@angular/router';
 import dayjs from 'dayjs';
+import {faFireFlameCurved, faMoon, faSun} from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'home-gas-verbruik',
   templateUrl: './gas-verbruik.component.html',
   styleUrls: ['../ledbar.scss', './gas-verbruik.component.scss']
 })
 export class GasVerbruikComponent implements OnInit, OnDestroy {
+  faFireFlameCurved = faFireFlameCurved;
+  faMoon = faMoon;
+  faSun = faSun;
 
   public LedState = LedState;
 

diff --git a/src/app/dashboard/klimaat-luchtvochtigheid/klimaat-luchtvochtigheid.component.html b/src/app/dashboard/klimaat-luchtvochtigheid/klimaat-luchtvochtigheid.component.html
@@ -1,6 +1,6 @@
 <div class="card">
   <div class="card-header h3 clickable" (click)="navigateToKlimaatHistory()">
-    <i class="fas fa-tint" aria-hidden="true"></i> Luchtvochtigheid
+    <fa-icon [icon]="faDroplet"></fa-icon> Luchtvochtigheid
   </div>
   <div class="card-body">
     <div class="ledbar float-start">
@@ -11,13 +11,13 @@
     <div class="h3">
       <span *ngIf="klimaat">{{ klimaat.luchtvochtigheid | number: '1.2-2' }}%</span>
       <span *ngIf="!klimaat">-%</span>
-      <span *ngIf="klimaat?.luchtvochtigheidTrend === Trend.UP">
-        <i data-fa-transform="rotate-45" class="fas fa-arrow-up text-danger ms-1" aria-hidden="true"></i>
+      <span *ngIf="klimaat?.luchtvochtigheidTrend === Trend.UP" class="text-danger ms-2">
+        <fa-icon [icon]="faArrowTrendUp"></fa-icon>
       </span>
-      <span *ngIf="klimaat?.luchtvochtigheidTrend === Trend.DOWN">
-        <i data-fa-transform="rotate--45" class="fas fa-arrow-down text-primary ms-1" aria-hidden="true"></i>
+      <span *ngIf="klimaat?.luchtvochtigheidTrend === Trend.DOWN" class="text-primary ms-2">
+        <fa-icon [icon]="faArrowTrendDown"></fa-icon>
       </span>
-      <span *ngIf="klimaat?.luchtvochtigheidTrend === Trend.STABLE" class="text-success ms-1">
+      <span *ngIf="klimaat?.luchtvochtigheidTrend === Trend.STABLE" class="text-success ms-2">
         <strong>&asymp;</strong>
       </span>
     </div>

diff --git a/src/app/dashboard/klimaat-luchtvochtigheid/klimaat-luchtvochtigheid.component.ts b/src/app/dashboard/klimaat-luchtvochtigheid/klimaat-luchtvochtigheid.component.ts
@@ -7,13 +7,17 @@ import {Router} from '@angular/router';
 import {RxStompService} from '@stomp/ng2-stompjs';
 import {Message} from '@stomp/stompjs';
 import {Trend} from '../../klimaat/trend';
+import {faArrowTrendDown, faArrowTrendUp, faDroplet} from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'home-klimaat-luchtvochtigheid',
   templateUrl: './klimaat-luchtvochtigheid.component.html',
   styleUrls: ['../ledbar.scss', './klimaat-luchtvochtigheid.component.scss']
 })
 export class KlimaatLuchtvochtigheidComponent implements  OnInit, OnDestroy {
+  faDroplet = faDroplet
+  faArrowTrendUp = faArrowTrendUp
+  faArrowTrendDown = faArrowTrendDown
 
   public LedState = LedState;
   public Trend = Trend;

diff --git a/src/app/dashboard/klimaat-temperatuur/klimaat-temperatuur.component.html b/src/app/dashboard/klimaat-temperatuur/klimaat-temperatuur.component.html
@@ -1,6 +1,6 @@
 <div class="card">
   <div class="card-header h3 clickable" (click)="navigateToKlimaatHistory()">
-    <i class="fas fa-thermometer-half" aria-hidden="true"></i> Temperatuur
+    <fa-icon [icon]="faThermometerHalf"></fa-icon> Temperatuur
   </div>
   <div class="card-body">
     <div class="ledbar float-start">
@@ -12,13 +12,13 @@
       <span *ngIf="klimaat">{{ klimaat.temperatuur | number: '1.2-2' }}&#8451;</span>
       <span *ngIf="!klimaat">-&#8451;</span>
 
-      <span *ngIf="klimaat?.temperatuurTrend === Trend.UP">
-        <i data-fa-transform="rotate-45" class="fas fa-arrow-up text-danger ms-1" aria-hidden="true"></i>
+      <span *ngIf="klimaat?.temperatuurTrend === Trend.UP" class="ms-2 text-danger">
+        <fa-icon [icon]="faArrowTrendUp"></fa-icon>
       </span>
-      <span *ngIf="klimaat?.temperatuurTrend === Trend.DOWN">
-        <i data-fa-transform="rotate--45" class="fas fa-arrow-down text-primary ms-1" aria-hidden="true"></i>
+      <span *ngIf="klimaat?.temperatuurTrend === Trend.DOWN" class="ms-2 text-primary">
+        <fa-icon [icon]="faArrowTrendDown"></fa-icon>
       </span>
-      <span *ngIf="klimaat?.temperatuurTrend === Trend.STABLE" class="text-success ms-1">
+      <span *ngIf="klimaat?.temperatuurTrend === Trend.STABLE" class="text-success ms-2">
         <strong>&asymp;</strong>
       </span>
     </div>

diff --git a/src/app/dashboard/klimaat-temperatuur/klimaat-temperatuur.component.ts b/src/app/dashboard/klimaat-temperatuur/klimaat-temperatuur.component.ts
@@ -7,13 +7,17 @@ import {RxStompService} from '@stomp/ng2-stompjs';
 import {KlimaatService} from '../../klimaat/klimaat.service';
 import {RealtimeKlimaat} from '../../klimaat/realtimeKlimaat';
 import {Trend} from '../../klimaat/trend';
+import {faArrowTrendDown, faArrowTrendUp, faThermometerHalf} from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'home-klimaat-temperatuur',
   templateUrl: './klimaat-temperatuur.component.html',
   styleUrls: ['../ledbar.scss', './klimaat-temperatuur.component.scss']
 })
 export class KlimaatTemperatuurComponent implements OnInit, OnDestroy {
+  faThermometerHalf = faThermometerHalf
+  faArrowTrendUp = faArrowTrendUp
+  faArrowTrendDown = faArrowTrendDown
 
   public LedState = LedState;
   public Trend = Trend;

diff --git a/src/app/dashboard/stroom-verbruik/stroom-verbruik.component.html b/src/app/dashboard/stroom-verbruik/stroom-verbruik.component.html
@@ -1,6 +1,6 @@
 <div class="card">
   <div class="card-header h3 clickable" (click)="navigateToVerbruikDetails()">
-    <i class="fas fa-bolt" aria-hidden="true"></i> Stroom
+    <fa-icon [icon]="faPlugCircleBolt"></fa-icon> Stroom
   </div>
   <div class="card-body">
     <div class="ledbar float-start">
@@ -10,11 +10,11 @@
     <p class="h3">Op dit moment</p>
     <div class="h3 current-power-usage">
       {{opgenomenVermogen ? opgenomenVermogen.watt : '-'}} Watt
-      <span ngbTooltip="Daltarief">
-        <i *ngIf="opgenomenVermogen?.tariefIndicator === 'DAL'" class="fas fa-moon" aria-hidden="true"></i>
+      <span *ngIf="opgenomenVermogen?.tariefIndicator === 'DAL'" ngbTooltip="Daltarief">
+        <fa-icon [icon]="faMoon"></fa-icon>
       </span>
-      <span ngbTooltip="Normaaltarief">
-        <i *ngIf="opgenomenVermogen?.tariefIndicator === 'NORMAAL'" class="fas fa-sun" aria-hidden="true"></i>
+      <span *ngIf="opgenomenVermogen?.tariefIndicator === 'NORMAAL'" ngbTooltip="Normaaltarief">
+        <fa-icon [icon]="faSun"></fa-icon>
       </span>
     </div>
 
@@ -24,11 +24,11 @@
 
     <p class="h6" *ngIf="meterstand">
       <span ngbTooltip="Daltarief">
-        <i class="fas fa-moon" aria-hidden="true"></i><span class="mostrecent-meterreading-tariff1">{{meterstand.stroomTarief1 | number: '1.3-3'}}</span>
+        <fa-icon [icon]="faMoon"></fa-icon> <span class="mostrecent-meterreading-tariff1 ms-1">{{meterstand.stroomTarief1 | number: '1.3-3'}}</span>
       </span>
       |
       <span ngbTooltip="Normaaltarief">
-        <i class="fas fa-sun" aria-hidden="true"></i><span class="mostrecent-meterreading-tariff2">{{meterstand.stroomTarief2 | number: '1.3-3'}}</span>
+        <fa-icon [icon]="faSun"></fa-icon> <span class="mostrecent-meterreading-tariff2 ms-1">{{meterstand.stroomTarief2 | number: '1.3-3'}}</span>
       </span>
     </p>
     <p class="h6" *ngIf="!meterstand">

diff --git a/src/app/dashboard/stroom-verbruik/stroom-verbruik.component.ts b/src/app/dashboard/stroom-verbruik/stroom-verbruik.component.ts
@@ -8,13 +8,17 @@ import {OpgenomenVermogenService} from '../../opgenomen-vermogen/opgenomen-vermo
 import {Led, LedState} from '../led';
 import {MeterstandService} from '../../meterstand/meterstand.service';
 import {Router} from '@angular/router';
+import {faMoon, faPlugCircleBolt, faSun} from '@fortawesome/free-solid-svg-icons';
 
 @Component({
   selector: 'home-stroom-verbruik',
   templateUrl: './stroom-verbruik.component.html',
   styleUrls: ['../ledbar.scss', './stroom-verbruik.component.scss']
 })
 export class StroomVerbruikComponent implements OnInit, OnDestroy {
+  faPlugCircleBolt = faPlugCircleBolt;
+  faMoon = faMoon;
+  faSun = faSun;
 
   public LedState = LedState;
 

diff --git a/src/app/date-navigator/date-navigator.component.html b/src/app/date-navigator/date-navigator.component.html
@@ -5,7 +5,7 @@
     <button (click)="navigate(-1)"
             class="btn btn-outline-secondary"
             [ngClass]="{'responsive-size': responsiveSize}"
-            type="button"><i class="fas fa-chevron-left" aria-hidden="true"></i></button>
+            type="button"><fa-icon [icon]="faChevronLeft"></fa-icon></button>
 
     <!--suppress HtmlFormInputWithoutLabel -->
     <input #picker="dpDayPicker" type="text" *ngIf="mode === 'day'" class="form-control text-center text-capitalize" name="dayPicker"
@@ -43,7 +43,7 @@
       <button type="button"
               class="btn btn-outline-secondary responsive-size"
               [ngClass]="{'responsive-size': responsiveSize}"
-              (click)="navigate(+1)" [disabled]="isUpNavigationDisabled()"><i class="fas fa-chevron-right" aria-hidden="true"></i></button>
+              (click)="navigate(+1)" [disabled]="isUpNavigationDisabled()"><fa-icon [icon]="faChevronRight"></fa-icon></button>
 
   </div>
 </form>
diff --git a/src/app/date-navigator/date-navigator.component.ts b/src/app/date-navigator/date-navigator.component.ts
@@ -2,6 +2,7 @@ import {Component, EventEmitter, Input, Output, QueryList, ViewChildren} from '@
 import {DatePickerDirective, IDatePickerDirectiveConfig} from 'ng2-date-picker';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import dayjs, {Dayjs} from 'dayjs';
+import {faChevronLeft, faChevronRight} from '@fortawesome/free-solid-svg-icons';
 
 const selectedDayFormat = 'dd. DD-MM-YYYY';
 const selectedMonthFormat = 'MMMM YYYY';
@@ -12,6 +13,8 @@ const selectedMonthFormat = 'MMMM YYYY';
   styleUrls: ['./date-navigator.component.scss']
 })
 export class DateNavigatorComponent {
+  faChevronLeft = faChevronLeft
+  faChevronRight = faChevronRight
 
   @Input()
   public mode: string;