Feature/logging facade

README.md

@@ -27,17 +27,17 @@ ng lint
 docker run [-it] -p8080:8080 -p2019:2019 holgerstolzenberg/european-geo-information
 ```
 
-## ✅ Open points
+## 📥 Open points
 
 ## Features
 
-- ☑️Add user interactions for layer control
-- ☑️Expandable toolbar
-- ☑️Own location finder
-- ☑️Smoother map animation (only mac chrome so far, retina)
-- ☑️Add loading indicator
-- ☑️Slider for map pitch angle
-- ☑️Map initializing indicator
+- ✅️Add user interactions for layer control
+- ✅️Expandable toolbar
+- ✅️Own location finder
+- ✅️Smoother map animation (only mac chrome so far, retina)
+- ✅️Add loading indicator
+- ✅️Slider for map pitch angle
+- ✅️Map initializing indicator
 - Cross-hair on own location
 - Also reset map pitch
 - Weather or other overlays
@@ -49,18 +49,19 @@ docker run [-it] -p8080:8080 -p2019:2019 holgerstolzenberg/european-geo-informat
 - Investigate 404 on app start
 - Better SCSS structure and cleanup
 - Cleanup of .whatever configurations (Prettier, ESLint, etc.)
-- ☑️Pin package.json versions
-- ☑️Glitching focus frame around map
+- ✅️Logging service abstraction
+- ✅️Pin package.json versions
+- ✅️Glitching focus frame around map
 
 ## Packaging
 
 - Make Docker image configurable at runtime -> let run at specific context (? env.js)
-- ☑️Caddy based Docker image
-- ☑️Make Caddy proxy requests to tile server
+- ✅️Caddy based Docker image
+- ✅️Make Caddy proxy requests to tile server
 
 ## CI
 
 - GitHub CI pipeline
-  - ☑️docker build
-  - ☑️publish
-  - ☑️GitHub pages
+  - ✅️docker build
+  - ✅️publish
+  - ✅️GitHub pages

src/app/app.module.ts

@@ -3,12 +3,10 @@ import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
 import { BrowserModule } from '@angular/platform-browser';
 import { ToolbarComponent } from './toolbar/toolbar.component';
-import { LoggerModule, NgxLoggerLevel } from 'ngx-logger';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { MapComponent } from './map/map.component';
 import { MatIcon } from '@angular/material/icon';
 import { MatButton } from '@angular/material/button';
-import { environment } from '../environments/environment';
 import { OptionPaneComponent } from './option-pane/option-pane.component';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -18,6 +16,7 @@ import { NotificationsModule } from './notifications/notifications.module';
 import { MapModule } from './map/map.module';
 import { MatSlider, MatSliderModule, MatSliderThumb } from '@angular/material/slider';
 import { FormsModule } from '@angular/forms';
+import { LoggingModule } from './logging/logging.module';
 
 @NgModule({
   declarations: [HeaderComponent, ToolbarComponent, MapComponent, AppComponent, OptionPaneComponent],
@@ -31,9 +30,7 @@ import { FormsModule } from '@angular/forms';
     MatIcon,
     MatButton,
     MatSlideToggle,
-    LoggerModule.forRoot({
-      level: environment.prodMode ? NgxLoggerLevel.WARN : NgxLoggerLevel.DEBUG
-    }),
+    LoggingModule,
     I18nModule,
     NotificationsModule,
     MapModule,

src/app/logging/logging.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { LoggingService } from './logging.service';
+import { LoggerModule, NgxLoggerLevel } from 'ngx-logger';
+import { environment } from '../../environments/environment';
+
+@NgModule({
+  exports: [],
+  imports: [
+    LoggerModule.forRoot({
+      level: environment.prodMode ? NgxLoggerLevel.WARN : NgxLoggerLevel.DEBUG
+    })
+  ],
+  providers: [
+    LoggingService
+  ]
+})
+export class LoggingModule {
+  // nothing here so far
+}

src/app/logging/logging.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { NGXLogger } from 'ngx-logger';
+
+@Injectable()
+export class LoggingService {
+  constructor(private readonly log: NGXLogger) {
+  }
+
+  trace(message?: string, ...additions: unknown[]) {
+    this.log.trace(message, additions);
+  }
+
+  debug(message?: string, ...additions: unknown[]) {
+    this.log.trace(message, additions);
+  }
+}

src/app/map/map.service.ts

@@ -1,6 +1,5 @@
 import { ElementRef, EventEmitter, Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { NGXLogger } from 'ngx-logger';
 import {
   CAPITOLS_LAYER,
   DEFAULT_TRANSITION_DURATION_MS,
@@ -18,6 +17,7 @@ import { GeoBoundingBox, TileLayer } from '@deck.gl/geo-layers/typed';
 import { environment } from '../../environments/environment';
 import { DeckMetrics } from '@deck.gl/core/typed/lib/deck';
 import { GeoService } from './geo.service';
+import { LoggingService } from '../logging/logging.service';
 
 @Injectable()
 export class MapService {
@@ -34,7 +34,7 @@ export class MapService {
 
   constructor(
     private readonly http: HttpClient,
-    private readonly log: NGXLogger,
+    private readonly log: LoggingService,
     private readonly geoService: GeoService,
     private readonly notificationService: NotificationService
   ) {
@@ -181,11 +181,12 @@ export class MapService {
 
       renderSubLayers: props => {
         // see: https://github.com/visgl/deck.gl/issues/8467
+        // tslint:disable-next-line
         const { west, north, east, south } = props.tile.bbox as GeoBoundingBox;
+        const what = { ...props, data: undefined };
 
         return [
-          new BitmapLayer({
-            data: undefined,
+          new BitmapLayer(what, {
             image: props.data,
             bounds: [west, south, east, north]
           })

src/app/notifications/notification.service.ts

@@ -18,7 +18,8 @@ export class NotificationService {
     private readonly toastrService: ToastrService,
     private readonly i18nService: I18nService,
     private readonly log: NGXLogger
-  ) {}
+  ) {
+  }
 
   showError(message: string, error: HttpErrorResponse | GeolocationPositionError) {
     this.log.error(message, error);
@@ -28,18 +29,18 @@ export class NotificationService {
   }
 
   showErrorLocalized(messageKey: string, ...additional: unknown[]) {
-    this.log.error(messageKey, additional);
-
-    firstValueFrom(this.i18nService.translateMultiple(['notifications.error-title', messageKey])).then(values =>
-      this.toastrService.error(values[1] + ' ' + additional, values[0], options)
+    firstValueFrom(this.i18nService.translateMultiple(['notifications.error-title', messageKey])).then(values => {
+        this.log.error(values[1], additional);
+        this.toastrService.error(values[1] + ' ' + additional, values[0], options);
+      }
     );
   }
 
   showInfoLocalized(messageKey: string, ...additional: unknown[]) {
-    this.log.info(messageKey, additional);
-
-    firstValueFrom(this.i18nService.translateMultiple(['notifications.info-title', messageKey])).then(values =>
-      this.toastrService.info(values[1] + ' ' + additional, values[0], options)
+    firstValueFrom(this.i18nService.translateMultiple(['notifications.info-title', messageKey])).then(values => {
+        this.log.info(values[1], additional);
+        this.toastrService.info(values[1] + ' ' + additional, values[0], options);
+      }
     );
   }
 }