Merge branch 'feature/project-improvments' into develop

Author: dweber019

README.md

@@ -226,6 +226,7 @@ Typedoc is generated with command ```npm run build:docs``` into directoy ```docs
 - [X] Add typedocs
 - [ ] Add greenkeeper
 - [ ] Add electron
-- [ ] VSC frontend debugging https://github.com/AngularClass/angular2-webpack-starter/blob/master/.vscode/launch.json
-- [ ] VSC add tasks https://code.visualstudio.com/docs/editor/tasks
-
+- [ ] Add pipline example
+- [ ] Add utility converters https://www.npmjs.com/package/aurelia-utility-converters
+- [ ] Add validation example
+- [ ] Add configure http client example

package.json

@@ -91,6 +91,7 @@
     "aurelia-templating-router": "^1.0.0",
     "bootstrap-sass": "^3.3.7",
     "font-awesome": "^4.7.0",
+    "i18next-browser-languagedetector": "^1.0.1",
     "isomorphic-fetch": "^2.2.1",
     "jquery": "^3.1.1",
     "moment": "^2.16.0"

src/app/app.vm.ts

@@ -1,17 +1,22 @@
 import { Lazy, inject } from 'aurelia-framework';
 import { Router, RouterConfiguration } from 'aurelia-router';
 import { I18N } from 'aurelia-i18n';
+
 import { AppConfigService } from './services/app-config.service';
 import { CordovaService } from './services/cordova.service';
+import { EventBusService, EventBusEvents } from './services/event-bus.service';
+import { LanguageService } from './services/language.service';
 
-@inject(I18N, AppConfigService, Lazy.of(CordovaService))
+@inject(I18N, AppConfigService, Lazy.of(CordovaService), EventBusService, LanguageService)
 export class AppViewModel {
   public router: Router;
 
   constructor(
     private i18n: I18N,
     private appConfigService: AppConfigService,
-    private cordovaServiceFn: () => CordovaService
+    private cordovaServiceFn: () => CordovaService,
+    private eventBusService: EventBusService,
+    private languageService: LanguageService,
   ) { }
 
   public configureRouter(config: RouterConfiguration, router: Router): void {
@@ -45,7 +50,14 @@ export class AppViewModel {
         title: 'Child Router'
       }
     ]);
+    config.mapUnknownRoutes({ route: '', redirect: '' });
 
     this.router = router;
   }
+
+  private configureMoment(): void {
+    const locale = this.languageService.getCurrentLocale();
+    moment.locale(locale);
+    this.eventBusService.addSubscription(EventBusEvents.IDS.i18n.locale.changed, (a) => moment.locale(a.newValue));
+  }
 }

src/app/main.ts

@@ -18,12 +18,14 @@ import { ConsoleAppender } from 'aurelia-logging-console';
 /**
  * Locals i18n imports
  */
-import i18nEnglish from './../locales/en.json';
+import en_USTranslation from './../locales/en_US.json';
+import de_CHTranslation from './../locales/de_CH.json';
 
 /**
- * Polyfill fetch
+ * Third Party Libraries and polyfill
  */
 import 'isomorphic-fetch';
+import LanguageDetector from 'i18next-browser-languagedetector';
 
 /**
  * Aurelia configruation
@@ -42,16 +44,30 @@ export async function configure(aurelia: Aurelia): Promise<void> {
      * See: https://github.com/aurelia/i18n
      */
     .plugin('aurelia-i18n', (instance) => {
+      instance.i18next.use(LanguageDetector);
       // adapt options to your needs (see http://i18next.com/docs/options/)
       // make sure to return the promise of the setup method, in order to guarantee proper loading
       return instance.setup({
         resources: {
-          en: {
-            translation:  i18nEnglish
+          'en-US': {
+            translation: en_USTranslation
+          },
+          'de-CH': {
+            translation: de_CHTranslation
           }
         },
-        lng: 'en',
-        fallbackLng: 'en'
+        fallbackLng: {
+          'de': ['de-CH', 'en-US'],
+          'de-DE': ['de-CH', 'en-US'],
+          'default': ['en-US']
+        },
+        debug: false,
+        detection: {
+          order: ['localStorage', 'navigator'],
+          lookupCookie: 'i18next',
+          lookupLocalStorage: 'i18nextLng',
+          caches: ['localStorage']
+        }
       });
     })
     // Uncomment the line below to enable animation.

src/app/modules/welcome/welcome.vm.html

@@ -25,5 +25,11 @@ <h3>Custom global attribute</h3>
 
     <h3>Global value converter</h3>
     <p>${currentDate | dateFormat}</p>
+
+    <h3>Switch Language</h3>
+    <button click.delegate="switchLanguage()" class="btn btn-primary">Click me!</button>
+    <br/><br/>
+    <p>Everything is: <span t="TR_ATTR"></span></p>
+    <p>Signalr example: ${ 'TR_SIGNALER' | t & signal:'locale:changed' }</p>
   </section>
 </template>

src/app/modules/welcome/welcome.vm.ts

@@ -1,6 +1,8 @@
 import { autoinject } from 'aurelia-framework';
+
 import { LogManager, Logger} from './../../services/logger.service';
 import { AppConfigService } from './../../services/app-config.service';
+import { LanguageService } from './../../services/language.service';
 
 @autoinject
 export class Welcome {
@@ -13,7 +15,8 @@ export class Welcome {
   public currentDate: Date = new Date();
 
 	constructor(
-    private appConfigService: AppConfigService
+    private appConfigService: AppConfigService,
+    private languageService: LanguageService
   ) {
 		this.logger = LogManager.getLogger('Welcome VM');
 		this.logger.info('appConfig => name:', appConfigService.getName());
@@ -43,6 +46,15 @@ export class Welcome {
 		}
     return true;
 	}
+
+  public switchLanguage(): void {
+    const lang = this.languageService.getCurrentLang();
+    if (lang === this.languageService.getSupportedLanguages()[0]) {
+      this.languageService.setLocale(this.languageService.getSupportedLanguages()[1]);
+    } else {
+      this.languageService.setLocale(this.languageService.getSupportedLanguages()[0]);
+    }
+  }
 }
 
 export class UpperValueConverter {

src/app/services/event-bus.service.ts

@@ -0,0 +1,33 @@
+import { autoinject, transient } from 'aurelia-framework';
+import { EventAggregator, Subscription } from 'aurelia-event-aggregator';
+
+export class EventBusEvents {
+  public static IDS = {
+    i18n: {
+      locale: {
+        changed: 'i18n:locale:changed'
+      }
+    }
+  };
+}
+
+@transient()
+@autoinject
+export class EventBusService {
+
+  private disposables: Subscription[] = [];
+
+  constructor(
+    public eventAggregator: EventAggregator
+  ) { }
+
+  public addSubscription(eventId: string, callback: Function): EventBusService {
+    this.disposables.push(this.eventAggregator.subscribe(eventId, callback));
+    return this;
+  }
+
+  public dispose(): void {
+    this.disposables.forEach(d => d.dispose());
+  }
+
+}

src/app/services/language.service.ts

@@ -0,0 +1,64 @@
+import { autoinject } from 'aurelia-framework';
+import { I18N } from 'aurelia-i18n';
+import { BindingSignaler } from 'aurelia-templating-resources';
+import * as moment from 'moment/moment';
+
+import { Logger, LogManager} from './logger.service';
+
+export const LocaleChangedSignal: string = 'locale:changed';
+
+@autoinject
+export class LanguageService {
+
+    private logger: Logger;
+
+    constructor(
+        private i18n: I18N,
+        private bindingSignaler: BindingSignaler
+    ) {
+        this.logger = LogManager.getLogger('LanguageService');
+        this.logger.debug('initialized');
+        this.logger.debug(`current locale: ${this.getCurrentLocale()}`);
+    }
+
+    /**
+     * Return the language: en, de, fr, it
+     */
+    public getCurrentLang(): string {
+        return this.getCurrentLocale().split('-')[0];
+    }
+
+    /**
+     * Get the list of all supported locales from our translations,
+     * then get the current browser locale, if we have a translation
+     * returns the language or fallback to default -> en
+     */
+    public getCurrentUILanguage(): string {
+        const supported = this.getSupportedLanguages();
+        const currentLanguage = this.getCurrentLang();
+        return supported.indexOf(currentLanguage) > -1 ? currentLanguage : 'en';
+    }
+
+    /**
+     * Get a list of current configured languages which has a translation.
+     */
+    public getSupportedLanguages(): string[] {
+        const languages = Object.keys(this.i18n.i18next.options.fallbackLng)
+            .map(key => this.i18n.i18next.options.fallbackLng[key][0].split('-')[0])
+            .filter((value, index, array) => {
+                return array.indexOf (value) === index;
+            });
+        return languages;
+    }
+
+    public getCurrentLocale(): string {
+        return this.i18n.getLocale();
+    }
+
+    public setLocale(locale: string): void {
+        moment.locale(locale);
+        this.i18n.setLocale(locale);
+        this.bindingSignaler.signal(LocaleChangedSignal);
+        this.logger.debug(`changed locale to: ${locale}`);
+    }
+}

src/app/services/window-location.service.ts

@@ -0,0 +1,33 @@
+export class WindowLocationService {
+
+  public static changeLocation(destination: string): void {
+    window.location.assign(destination);
+  }
+
+  public static changeLocationAfterPageLoad(destination: string): void {
+    // Wait for resources to load before redirect. Without this Safari would fail
+    // to load/activate resources, like fonts.
+    const waitForPageLoad = () => {
+      if (document.readyState === 'complete') {
+        WindowLocationService.changeLocation(destination);
+      } else {
+        setTimeout(waitForPageLoad, 500);
+      }
+    };
+    waitForPageLoad();
+  }
+
+  public static getHashQueryString(): string {
+    return window.location.hash.substring(1);
+  }
+
+  public static getLocationOrigin(): string {
+    if (window.location.origin) {
+      return window.location.origin;
+    }
+    // IE11 fix, when window.location.origin is undefined
+    let locationOrigin = `${window.location.protocol}//${window.location.hostname}`;
+    locationOrigin += window.location.port ? ':' + window.location.port : '';
+    return locationOrigin;
+  }
+}

src/locales/de_CH.json

@@ -0,0 +1,5 @@
+{
+  "TITLE": "Übersetztungs Titel",
+  "TR_ATTR": "...in Deutsch",
+  "TR_SIGNALER": "Signaler Beispiel funktioniert..."
+}