Angular 13

.browserslistrc

@@ -5,8 +5,5 @@
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
-> 0.5%
-last 2 versions
-Firefox ESR
-not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+last 2 Chrome versions
+last 2 Firefox versions

.eslintrc.json

@@ -0,0 +1,50 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "arig",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "arig",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}

.gitignore

@@ -1,3 +1,4 @@
+/.angular/cache
 # IDE
 *.iml
 .idea/

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14-alpine as builder
+FROM node:16-alpine as builder
 
 ENV NODE_ENV dev
 WORKDIR /build

angular.json

@@ -93,19 +93,23 @@
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json"
-            ],
-            "exclude": [
-              "**/node_modules/**",
-              "src/polyfills.ts"
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
             ]
           }
         }
       }
     }
   },
+  "cli": {
+    "analytics": false,
+    "cache": {
+      "enabled": false
+    },
+    "defaultCollection": "@angular-eslint/schematics"
+  },
   "defaultProject": "robots-supervisor"
 }

package.json

@@ -4,51 +4,53 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "ng": "ng",
     "start": "ng serve --watch",
     "start:mock": "ng serve --watch --configuration=mock",
     "build": "ng build --configuration production",
     "lint": "ng lint"
   },
   "dependencies": {
-    "@angular/animations": "^12.1.4",
-    "@angular/common": "^12.1.4",
-    "@angular/compiler": "^12.1.4",
-    "@angular/core": "^12.1.4",
-    "@angular/forms": "^12.1.4",
-    "@angular/localize": "^12.1.4",
-    "@angular/platform-browser": "^12.1.4",
-    "@angular/platform-browser-dynamic": "^12.1.4",
-    "@angular/platform-server": "^12.1.4",
-    "@angular/router": "^12.1.4",
-    "@fortawesome/angular-fontawesome": "^0.8.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.32",
-    "@fortawesome/free-regular-svg-icons": "^5.15.1",
-    "@fortawesome/free-solid-svg-icons": "^5.14.1",
-    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
-    "@ngrx/effects": "^12.3.0",
-    "@ngrx/store": "^12.3.0",
-    "bootstrap": "^4.6.0",
-    "bootswatch": "^4.6.0",
-    "core-js": "^3.16.0",
-    "konva": "^8.1.0",
+    "@angular/animations": "^13.3.5",
+    "@angular/common": "^13.3.5",
+    "@angular/compiler": "^13.3.5",
+    "@angular/core": "^13.3.5",
+    "@angular/forms": "^13.3.5",
+    "@angular/localize": "^13.3.5",
+    "@angular/platform-browser": "^13.3.5",
+    "@angular/platform-browser-dynamic": "^13.3.5",
+    "@angular/platform-server": "^13.3.5",
+    "@angular/router": "^13.3.5",
+    "@fortawesome/angular-fontawesome": "^0.10.2",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@ng-bootstrap/ng-bootstrap": "^12.1.1",
+    "@ngrx/effects": "^13.1.0",
+    "@ngrx/store": "^13.1.0",
+    "@popperjs/core": "^2.11.5",
+    "bootstrap": "^5.1.3",
+    "bootswatch": "5.1.3",
+    "core-js": "^3.22.3",
+    "konva": "^8.3.6",
     "lodash": "^4.17.21",
-    "ngx-toastr": "^14.0.0",
-    "primeng": "^12.0.0",
-    "rxjs": "^6.6.3",
-    "tslib": "^2.0.0",
-    "zone.js": "~0.11.4"
+    "primeng": "^13.3.3",
+    "rxjs": "^7.5.5",
+    "tslib": "^2.4.0",
+    "zone.js": "~0.11.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.1.4",
-    "@angular-devkit/core": "12.1.4",
-    "@angular/cli": "^12.1.4",
-    "@angular/compiler-cli": "^12.1.4",
-    "codelyzer": "^6.0.0",
-    "tslint": "~6.1.0",
-    "typescript": "~4.3.5"
-  },
-  "resolutions": {
-    "webpack": "^5.0.0"
+    "@angular-devkit/build-angular": "~13.3.4",
+    "@angular-devkit/core": "13.3.4",
+    "@angular-eslint/builder": "13.2.1",
+    "@angular-eslint/eslint-plugin": "13.2.1",
+    "@angular-eslint/eslint-plugin-template": "13.2.1",
+    "@angular-eslint/schematics": "13.2.1",
+    "@angular-eslint/template-parser": "13.2.1",
+    "@angular/cli": "^13.3.4",
+    "@angular/compiler-cli": "^13.3.5",
+    "@typescript-eslint/eslint-plugin": "5.17.0",
+    "@typescript-eslint/parser": "5.17.0",
+    "eslint": "^8.12.0",
+    "typescript": "~4.6.4"
   }
 }

src/app/app.component.html

@@ -1,3 +1,5 @@
+<arig-app-toasts></arig-app-toasts>
+
 <arig-app-navbar></arig-app-navbar>
 
 <div class="page-content">

src/app/app.module.ts

@@ -36,7 +36,6 @@ import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { EffectsModule } from '@ngrx/effects';
 import { Store, StoreModule } from '@ngrx/store';
-import { ToastrModule } from 'ngx-toastr';
 import { SidebarModule } from 'primeng/sidebar';
 import arrowFromTop from '../assets/icons/arrowFromTop.json';
 import arrowToTop from '../assets/icons/arrowToTop.json';
@@ -51,6 +50,7 @@ import { MapInputComponent } from './components/map/input/map-input.component';
 import { MapPositionComponent } from './components/map/position/map-position.component';
 import { MapScoreComponent } from './components/map/score/map-score.component';
 import { AppNavbarComponent } from './components/misc/app-navbar/app-navbar.component';
+import { AppToastsComponent } from './components/misc/app-toasts/app-toasts.component';
 import { AsservInputComponent } from './components/misc/asserv-input/asserv-input.component';
 import { MouvementInputComponent } from './components/misc/mouvement-input/mouvement-input.component';
 import { NoRobotComponent } from './components/misc/no-robot/no-robot.component';
@@ -89,6 +89,7 @@ registerLocaleData(localeFr);
 
     // components
     AppNavbarComponent,
+    AppToastsComponent,
     AsservInputComponent,
     MapInputComponent,
     MouvementInputComponent,
@@ -125,7 +126,6 @@ registerLocaleData(localeFr);
     FontAwesomeModule,
     NgbModule,
     SidebarModule,
-    ToastrModule.forRoot(),
     RouterModule.forRoot(AppRoutes, { useHash: true, paramsInheritanceStrategy: 'always' }),
     StoreModule.forRoot({
       robots        : robotsReducer,

src/app/components/abstract.component.ts

@@ -5,7 +5,7 @@ import { Subject } from 'rxjs';
 // tslint:disable-next-line:directive-class-suffix
 export abstract class AbstractComponent implements OnDestroy {
 
-  protected ngDestroy$ = new Subject();
+  protected ngDestroy$ = new Subject<void>();
 
   ngOnDestroy() {
     this.ngDestroy$.next();

src/app/components/map/actions/map-actions.component.html

@@ -1,15 +1,17 @@
 <div class="card">
   <h5 class="card-header">
     <fa-icon [icon]="['fas', 'joystick']"></fa-icon>
-    Actions <span class="badge badge-info">{{mainPosition?.actions.length}}</span>
+    Actions <span class="badge bg-info">{{mainPosition?.actions.length}}</span>
   </h5>
   <div class="card-body">
     <strong>En cours :</strong> {{mainPosition?.currentAction}}
     <div *ngFor="let action of mainPosition?.actions; trackBy: trackByUuid"
          ngbTooltip="{{action.uuid}}" placement="left" container="body"
          (click)="executeAction(mainRobot, action)">
-              <span class="badge badge-big mr-2"
-                    [ngClass]="{'badge-success': action.valid, 'badge-danger': !action.valid}">{{action.order | number:'4.0-0'}}</span>
+      <span class="badge badge-big mr-2"
+            [ngClass]="{'bg-success': action.valid, 'bg-danger': !action.valid}">
+          {{action.order | number:'4.0-0'}}
+      </span>
       {{action.name}}
     </div>
   </div>

src/app/components/map/info/map-info.component.html

@@ -12,13 +12,13 @@ <h5 class="card-header">
       </div>
       <div class="col-3">
         Temps :
-        <span class="badge badge-big badge-info">{{mainPosition?.matchTime / 1000 | number:'3.0-0'}}s</span>
+        <span class="badge badge-big bg-info">{{mainPosition?.matchTime / 1000 | number:'3.0-0'}}s</span>
       </div>
       <div class="col-6">
         Retour :
-        <span class="badge badge-big badge-info">{{mainPosition?.gameStatus?.siteDeRetour}}</span>
+        <span class="badge badge-big bg-info">{{mainPosition?.gameStatus?.siteDeRetour}}</span>
         /
-        <span class="badge badge-big badge-info">{{mainPosition?.gameStatus?.siteDeRetourAutreRobot}}</span>
+        <span class="badge bg-info">{{mainPosition?.gameStatus?.siteDeRetourAutreRobot}}</span>
       </div>
     </div>
     <div class="row">
@@ -106,5 +106,5 @@ <h5 class="card-header">
 </div>
 
 <ng-template #booleanStatus let-title="title" let-status="status">
-  <div class="badge badge-big d-block mt-1" [ngClass]="{'badge-success': status, 'badge-danger': !status}">{{title}}</div>
+  <div class="badge badge-big d-block mt-1" [ngClass]="{'bg-success': status, 'bg-danger': !status}">{{title}}</div>
 </ng-template>

src/app/components/map/position/map-position.component.html

@@ -39,13 +39,13 @@ <h5 class="card-header">
 <ng-template #position let-position="position" let-prefix="prefix">
   <div class="row">
     <div class="col">
-      {{prefix}} X : <span class="badge badge-big badge-info">{{position?.x | number:'4.0-0'}}</span>
+      {{prefix}} X : <span class="badge badge-big bg-info">{{position?.x | number:'4.0-0'}}</span>
     </div>
     <div class="col">
-      {{prefix}} Y : <span class="badge badge-big badge-info">{{position?.y | number:'4.0-0'}}</span>
+      {{prefix}} Y : <span class="badge badge-big bg-info">{{position?.y | number:'4.0-0'}}</span>
     </div>
     <div class="col">
-      {{prefix}} A : <span class="badge badge-big badge-info">{{position?.angle | number:'3.1-1'}}</span>
+      {{prefix}} A : <span class="badge badge-big bg-info">{{position?.angle | number:'3.1-1'}}</span>
     </div>
   </div>
 </ng-template>

src/app/components/map/score/map-score.component.html

@@ -1,11 +1,11 @@
 <div class="card">
   <h5 class="card-header">
     <fa-icon icon="calculator"></fa-icon>
-    Score : <span class="badge badge-info">{{mainPosition?.score}}</span>
+    Score : <span class="badge bg-info">{{mainPosition?.score}}</span>
   </h5>
   <div class="card-body">
     <div *ngFor="let score of mainPosition?.scoreStatus | keyvalue; trackBy: trackByKey">
-      <span class="badge badge-big badge-primary mr-2">{{score.value | number:'2.0-0'}}</span>
+      <span class="badge badge-big bg-primary mr-2">{{score.value | number:'2.0-0'}}</span>
       {{score.key | titlecase}}
     </div>
   </div>