update

electron/main.js

@@ -18,7 +18,7 @@ function createWindow () {
     }));
 
     // Open the DevTools.
-    win.webContents.openDevTools();
+    //win.webContents.openDevTools();
 
     // Emitted when the window is closed.
     win.on('closed', () => {

package.json

@@ -22,19 +22,24 @@
     "@angular/platform-browser": "^5.0.0",
     "@angular/platform-browser-dynamic": "^5.0.0",
     "@angular/router": "^5.0.0",
+    "@ngrx/effects": "^4.1.1",
+    "@ngrx/router-store": "^4.1.1",
+    "@ngrx/store": "^4.1.1",
+    "bulma": "^0.6.1",
     "core-js": "^2.4.1",
+    "font-awesome": "^4.7.0",
     "rxjs": "^5.5.2",
     "zone.js": "^0.8.14"
   },
   "devDependencies": {
-    "electron-icon-maker": "^0.0.4",
     "@angular/cli": "1.5.0",
     "@angular/compiler-cli": "^5.0.0",
     "@angular/language-service": "^5.0.0",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
     "codelyzer": "~3.2.0",
+    "electron-icon-maker": "^0.0.4",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
     "karma": "~1.7.0",

src/app/app-routing.module.ts

@@ -0,0 +1,35 @@
+import {RouterModule, Routes} from "@angular/router";
+import {PageNotFoundComponent} from "./shared/page-not-found/page-not-found.component";
+import {NgModule} from "@angular/core";
+import {AssetListComponent} from "./assets/asset-list/asset-list.component";
+
+const appRoutes: Routes = [
+    // {
+    //     path: 'assets',
+    //     loadChildren: './assets/assets.module#AssetsModule',
+    //     pathMatch: 'full'
+    // },
+    {
+        path: 'assets',
+        component: AssetListComponent
+    },
+    {
+        path: '',
+        redirectTo: '/assets',
+        pathMatch: 'full'
+    },
+    {
+        path: '**',
+        component: PageNotFoundComponent
+    }
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forRoot(appRoutes)
+    ],
+    exports: [
+        RouterModule
+    ]
+})
+export class AppRoutingModule {}

src/app/app.component.html

@@ -1,20 +1,11 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{title}}!
-  </h1>
-  <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+<app-nav-bar></app-nav-bar>
+
+<router-outlet></router-outlet>
 
+<div class="modal" [class.is-active]="isModalActive$ | async">
+    <div class="modal-background"></div>
+    <div class="modal-content">
+        <router-outlet name="modal"></router-outlet>
+    </div>
+    <button class="modal-close is-large" aria-label="close" (click)="closeModal()"></button>
+</div>

src/app/app.component.ts

@@ -1,10 +1,27 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {Store} from "@ngrx/store";
+import {Observable} from "rxjs/Observable";
+import {HIDE_MODAL} from "./reducers/modal";
+
+import "../sass/styles.scss";
+
+interface AppState {
+    modal: boolean;
+}
 
 @Component({
-  selector: 'kio-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector: 'kio-root',
+    templateUrl: './app.component.html'
 })
 export class AppComponent {
-  title = 'kio';
+
+    isModalActive$: Observable<boolean>;
+
+    constructor(private store: Store<AppState>) {
+        this.isModalActive$ = store.select('modal');
+    }
+
+    closeModal() {
+        this.store.dispatch({ type: HIDE_MODAL });
+    }
 }

src/app/app.module.ts

@@ -1,18 +1,30 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-
-import { AppComponent } from './app.component';
-
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {AppComponent} from './app.component';
+import {SharedModule} from "./shared/shared.module";
+import {AppRoutingModule} from "./app-routing.module";
+import {StoreModule} from "@ngrx/store";
+import {modalReducer} from "./reducers/modal";
+import {routerReducer, StoreRouterConnectingModule} from "@ngrx/router-store";
+import {AssetsModule} from "./assets/assets.module";
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+    declarations: [
+        AppComponent
+    ],
+    imports: [
+        BrowserModule,
+        SharedModule,
+        AppRoutingModule,
+        StoreModule.forRoot({
+            modal: modalReducer,
+            routerReducer: routerReducer
+        }),
+        StoreRouterConnectingModule,
+        AssetsModule
+    ],
+    providers: [],
+    bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

src/app/assets/asset-list/asset-list.component.html

@@ -0,0 +1,66 @@
+
+<app-hero title="Assets" subtitle="Manage your collection of assets">
+    <div class="container">
+        <nav class="tabs is-boxed">
+            <ul>
+                <li class="is-active"><a>Active</a></li>
+                <li class=""><a>Archived</a></li>
+            </ul>
+        </nav>
+    </div>
+</app-hero>
+
+<section class="section">
+    <div class="container">
+
+        <div class="level">
+            <div class="level-left">
+                <p class="control has-icons-left">
+                    <input type="text" class="input" placeholder="search">
+                    <span class="icon is-left">
+                        <i class="fa fa-search"></i>
+                    </span>
+                </p>
+            </div>
+            <div class="level-right">
+                <a class="button is-primary" (click)="addAsset()">
+                    <span class="icon">
+                        <i class="fa fa-plus"></i>
+                    </span>
+                    <span>Add asset</span>
+                </a>
+            </div>
+        </div>
+
+        <table class="table is-fullwidth is-striped is-bordered">
+            <thead>
+            <tr>
+                <th>Title</th>
+                <th>Date created</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr *ngFor="let asset of asset$ | async">
+                <td>{{ asset.title }}</td>
+                <td>{{ asset.created | date }}</td>
+            </tr>
+            </tbody>
+        </table>
+
+        <!--<nav class="pagination" role="navigation" aria-label="pagination">-->
+            <!--<a class="pagination-previous" title="This is the first page" disabled>Previous</a>-->
+            <!--<a class="pagination-next">Next page</a>-->
+            <!--<ul class="pagination-list">-->
+                <!--<li>-->
+                    <!--<a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a>-->
+                <!--</li>-->
+                <!--<li>-->
+                    <!--<a class="pagination-link" aria-label="Goto page 2">2</a>-->
+                <!--</li>-->
+                <!--<li>-->
+                    <!--<a class="pagination-link" aria-label="Goto page 3">3</a>-->
+                <!--</li>-->
+            <!--</ul>-->
+        <!--</nav>-->
+    </div>
+</section>

src/app/assets/asset-list/asset-list.component.ts

@@ -0,0 +1,25 @@
+import {Component, OnInit} from '@angular/core';
+import {Store} from "@ngrx/store";
+import {SHOW_MODAL} from "../../reducers/modal";
+import {Observable} from "rxjs/Observable";
+import {Asset} from "../modal/asset";
+
+@Component({
+    selector: 'app-asset-list',
+    templateUrl: './asset-list.component.html'
+})
+export class AssetListComponent implements OnInit {
+
+    asset$: Observable<Asset[]>;
+
+    constructor(private store: Store<{assets: Asset[]}>) {
+        this.asset$ = store.select('assets');
+    }
+
+    ngOnInit() {
+    }
+
+    addAsset() {
+        this.store.dispatch({ type: SHOW_MODAL, route: 'new-asset' });
+    }
+}

src/app/assets/assets-routing.module.ts

@@ -0,0 +1,24 @@
+
+import {RouterModule, Routes} from "@angular/router";
+import {AssetListComponent} from "./asset-list/asset-list.component";
+import {NgModule} from "@angular/core";
+import {NewAssetComponent} from "./new-asset/new-asset.component";
+
+const assetRoutes: Routes = [
+    {
+        path: 'new-asset',
+        component: NewAssetComponent,
+        outlet: 'modal'
+    }
+];
+
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(assetRoutes)
+    ],
+    exports: [
+        RouterModule
+    ]
+})
+export class AssetsRoutingModule {}

src/app/assets/assets.module.ts

@@ -0,0 +1,17 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {AssetListComponent} from './asset-list/asset-list.component';
+import {AssetsRoutingModule} from "./assets-routing.module";
+import {SharedModule} from "../shared/shared.module";
+import { NewAssetComponent } from './new-asset/new-asset.component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        SharedModule,
+        AssetsRoutingModule
+    ],
+    declarations: [AssetListComponent, NewAssetComponent],
+    exports: []
+})
+export class AssetsModule {}

src/app/assets/effects/modal.ts

@@ -0,0 +1,17 @@
+
+
+
+import {Actions, Effect} from "@ngrx/effects";
+import {Router} from "@angular/router";
+
+export class AssetModalEffects {
+
+    // @Effect()
+
+
+    constructor(
+        private action$: Actions,
+        private router: Router
+    ) {}
+
+}

src/app/assets/modal/asset.ts

@@ -0,0 +1,6 @@
+
+export interface Asset {
+    uuid: string,
+    title: string;
+    created: Date;
+}

src/app/assets/new-asset/new-asset.component.html

@@ -0,0 +1,3 @@
+<p>
+  new-asset works!
+</p>

src/app/assets/new-asset/new-asset.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-new-asset',
+  templateUrl: './new-asset.component.html'
+})
+export class NewAssetComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/assets/reducers/assets.ts

@@ -0,0 +1,15 @@
+
+import {Asset} from "../modal/asset";
+import {Action} from "@ngrx/store";
+
+export const ADD_ASSET_MODAL = '[Assets] Add asset modal';
+
+export function assetsReducer(state: Asset[] = [], action: Action) {
+    switch (action.type) {
+        case ADD_ASSET_MODAL:
+            return state;
+
+        default:
+            return state;
+    }
+}

src/app/reducers/modal.ts

@@ -0,0 +1,17 @@
+
+
+import {Action} from "@ngrx/store";
+
+export const SHOW_MODAL = '[Modal] Show';
+export const HIDE_MODAL = '[Modal] Hide';
+
+export function modalReducer(state: boolean = false, action: Action) {
+    switch (action.type) {
+        case SHOW_MODAL:
+            return true;
+        case HIDE_MODAL:
+            return false;
+        default:
+            return state;
+    }
+}