init

webapp/frontend/src/@treo/services/config/config.constants.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const TREO_APP_CONFIG = new InjectionToken<any>('Default configuration for the app');

webapp/frontend/src/@treo/services/config/config.module.ts

@@ -0,0 +1,36 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { TreoConfigService } from '@treo/services/config/config.service';
+import { TREO_APP_CONFIG } from '@treo/services/config/config.constants';
+
+@NgModule()
+export class TreoConfigModule
+{
+    /**
+     * Constructor
+     *
+     * @param {TreoConfigService} _treoConfigService
+     */
+    constructor(
+        private _treoConfigService: TreoConfigService
+    )
+    {
+    }
+
+    /**
+     * forRoot method for setting user configuration
+     *
+     * @param config
+     */
+    static forRoot(config: any): ModuleWithProviders
+    {
+        return {
+            ngModule : TreoConfigModule,
+            providers: [
+                {
+                    provide : TREO_APP_CONFIG,
+                    useValue: config
+                }
+            ]
+        };
+    }
+}

webapp/frontend/src/@treo/services/config/config.service.ts

@@ -0,0 +1,56 @@
+import { Inject, Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import * as _ from 'lodash';
+import { TREO_APP_CONFIG } from '@treo/services/config/config.constants';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class TreoConfigService
+{
+    // Private
+    private _config: BehaviorSubject<any>;
+
+    /**
+     * Constructor
+     */
+    constructor(@Inject(TREO_APP_CONFIG) config: any)
+    {
+        // Set the private defaults
+        this._config = new BehaviorSubject(config);
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Setter and getter for config
+     */
+    set config(value: any)
+    {
+        // Merge the new config over to the current config
+        const config = _.merge({}, this._config.getValue(), value);
+
+        // Execute the observable
+        this._config.next(config);
+    }
+
+    get config$(): Observable<any>
+    {
+        return this._config.asObservable();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Resets the config to the default
+     */
+    reset(): void
+    {
+        // Set the config
+        this._config.next(this.config);
+    }
+}

webapp/frontend/src/@treo/services/config/index.ts

@@ -0,0 +1 @@
+export * from '@treo/services/config/public-api';

webapp/frontend/src/@treo/services/config/public-api.ts

@@ -0,0 +1,2 @@
+export * from '@treo/services/config/config.module';
+export * from '@treo/services/config/config.service';

webapp/frontend/src/@treo/services/media-watcher/index.ts

@@ -0,0 +1 @@
+export * from '@treo/services/media-watcher/public-api';

webapp/frontend/src/@treo/services/media-watcher/media-watcher.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { TreoMediaWatcherService } from '@treo/services/media-watcher/media-watcher.service';
+
+@NgModule({
+    providers: [
+        TreoMediaWatcherService
+    ]
+})
+export class TreoMediaWatcherModule
+{
+    /**
+     * Constructor
+     *
+     * @param {TreoMediaWatcherService} _treoMediaWatcherService
+     */
+    constructor(
+        private _treoMediaWatcherService: TreoMediaWatcherService
+    )
+    {
+    }
+}

webapp/frontend/src/@treo/services/media-watcher/media-watcher.service.ts

@@ -0,0 +1,105 @@
+import { Injectable } from '@angular/core';
+import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { treoBreakpoints } from '@treo/tailwind/exported/variables';
+
+@Injectable()
+export class TreoMediaWatcherService
+{
+    private _onMediaChange: BehaviorSubject<{ matchingAliases: string[], matchingRules: any }>;
+
+    /**
+     * Constructor
+     *
+     * @param {BreakpointObserver} _breakpointObserver
+     */
+    constructor(
+        private _breakpointObserver: BreakpointObserver
+    )
+    {
+        // Set the defaults
+        this._onMediaChange = new BehaviorSubject(null);
+
+        // Initialize
+        this._init();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Getter for _onMediaChange
+     */
+    get onMediaChange$(): Observable<{ matchingAliases: string[], matchingRules: any }>
+    {
+        return this._onMediaChange.asObservable();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Initialize
+     *
+     * @private
+     */
+    private _init(): void
+    {
+        // Subscribe to the breakpoint observer
+        this._breakpointObserver.observe(Object.values(treoBreakpoints))
+            .subscribe((state) => {
+
+                const matchingAliases = [];
+                const matchingRules = {};
+
+                // If there are no matching rules, execute the observable and bail
+                if ( !state.matches )
+                {
+                    this._onMediaChange.next({
+                        matchingAliases,
+                        matchingRules
+                    });
+
+                    return;
+                }
+
+                // Go through the breakpoints and find the ones that match
+                for ( const [query, matches] of Object.entries(state.breakpoints) )
+                {
+                    if ( !matches )
+                    {
+                        continue;
+                    }
+
+                    // Get the alias of the matching query
+                    const alias = Object.keys(treoBreakpoints).find(key => treoBreakpoints[key] === query);
+
+                    // Prepare the observable values
+                    matchingAliases.push(alias);
+                    matchingRules[alias] = query;
+                }
+
+                // Execute the observable
+                this._onMediaChange.next({
+                    matchingAliases,
+                    matchingRules
+                });
+            });
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On media query change
+     *
+     * @param query
+     */
+    onMediaQueryChange$(query: string): Observable<BreakpointState>
+    {
+        return this._breakpointObserver.observe(query);
+    }
+}

webapp/frontend/src/@treo/services/media-watcher/public-api.ts

@@ -0,0 +1,2 @@
+export * from '@treo/services/media-watcher/media-watcher.module';
+export * from '@treo/services/media-watcher/media-watcher.service';

webapp/frontend/src/@treo/services/splash-screen/index.ts

@@ -0,0 +1 @@
+export * from '@treo/services/splash-screen/public-api';

webapp/frontend/src/@treo/services/splash-screen/public-api.ts

@@ -0,0 +1,2 @@
+export * from '@treo/services/splash-screen/splash-screen.module';
+export * from '@treo/services/splash-screen/splash-screen.service';

webapp/frontend/src/@treo/services/splash-screen/splash-screen.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { TreoSplashScreenService } from '@treo/services/splash-screen/splash-screen.service';
+
+@NgModule({
+    providers: [
+        TreoSplashScreenService
+    ]
+})
+export class TreoSplashScreenModule
+{
+    /**
+     * Constructor
+     *
+     * @param {TreoSplashScreenService} _treoSplashScreenService
+     */
+    constructor(
+        private _treoSplashScreenService: TreoSplashScreenService
+    )
+    {
+    }
+}

webapp/frontend/src/@treo/services/splash-screen/splash-screen.service.ts

@@ -0,0 +1,67 @@
+import { Inject, Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter, take } from 'rxjs/operators';
+
+@Injectable()
+export class TreoSplashScreenService
+{
+    /**
+     * Constructor
+     *
+     * @param {DOCUMENT} _document
+     * @param {Router} _router
+     */
+    constructor(
+        @Inject(DOCUMENT) private _document: any,
+        private _router: Router
+    )
+    {
+        // Initialize
+        this._init();
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Private methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Initialize
+     *
+     * @private
+     */
+    private _init(): void
+    {
+        // Hide it on the first NavigationEnd event
+        this._router.events
+            .pipe(
+                filter(event => event instanceof NavigationEnd),
+                take(1)
+            )
+            .subscribe(() => {
+
+                // Hide the splash screen
+                this.hide();
+            });
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Public methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Show the splash screen
+     */
+    show(): void
+    {
+        this._document.body.classList.remove('treo-splash-screen-hidden');
+    }
+
+    /**
+     * Hide the splash screen
+     */
+    hide(): void
+    {
+        this._document.body.classList.add('treo-splash-screen-hidden');
+    }
+}