ohjelman runkoa

code/moya-angular/README.md

@@ -6,21 +6,20 @@
 
 ### devaus workflow
 
-Kun ei tarvitse tesmailla menuja, on nopeinta ajaa lasikalaa erikseen, ja erikseen ajaa webpack -palvelinta, joka palvelee angularia.
+Kehittäminen on nopeampaa jos saa muutokset suoraan käyttöön, tämän takia kannattaa käynnistää lasikala ja webback-palvelin erikseen, ja proxyttää webbakista moya-jutut lasikalaan.
 
-moyaproxy.conf.json sisältää proxyasetukset porttiin 8080. Käyttö:
+ng-palvelimessa on bugi, ja se ei osaa jakaa tavaraa muusta hakemistosta kuin /.
 
-`ng serve --proxy-config=moyaproxy.conf.json --deploy-url=/MoyaNG`
+moyaproxy.conf.json sisältää proxyasetukset porttiin 8080. 
+
+Käyttö:
+`ng serve --proxy-config=moyaproxy.conf.json --base-href=/`
 
 Tämän jälkeen kirjaa selaimesi sisään moyaan: http://localhost:4200/MoyaWeb/ ja surffata softaan: http://localhost:4200/MoyaNG/
 
 ### HMR
 
-Hot Module replacement. 
-Varsianista hyötyä en tiiä, joku(tm) voisi vertailla onko nopeampi ajaa tällä vai ei. Voi myös olla ettei toimi vielä täysin. Otettu käyttöön ohjeiden mukaan: https://github.com/jschwarty/angularcli-hmr-example
-
-`ng serve --hmr -e=hmr`
-
+HMR -asetukset löytyy, niistä ei nykyisellään ole mitään hyötyä. Saa poistaa.
 
 
 ## Koodijuttuja

code/moya-angular/package.json

@@ -16,12 +16,14 @@
     "@angular/animations": "^4.1.2",
     "@angular/common": "^4.1.2",
     "@angular/compiler": "^4.1.2",
+    "@angular/compiler-cli": "^4.1.2",
     "@angular/core": "^4.1.2",
     "@angular/forms": "^4.1.2",
     "@angular/http": "^4.1.2",
     "@angular/material": "^2.0.0-beta.1",
     "@angular/platform-browser": "^4.1.2",
     "@angular/platform-browser-dynamic": "^4.1.2",
+    "@angular/platform-server": "^4.1.2",
     "@angular/router": "^4.1.2",
     "bootstrap": "^4.0.0-alpha.6",
     "core-js": "^2.4.1",

code/moya-angular/src/app/admin/admin.component.html

+<p>
+  admin works!
+</p>

code/moya-angular/src/app/admin/admin.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminComponent } from './admin.component';
+
+describe('AdminComponent', () => {
+  let component: AdminComponent;
+  let fixture: ComponentFixture<AdminComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AdminComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AdminComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

code/moya-angular/src/app/admin/admin.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-admin',
+  templateUrl: './admin.component.html',
+  styleUrls: ['./admin.component.css']
+})
+export class AdminComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

code/moya-angular/src/app/app.component.css

-nav a.active {
-  color: red;
+#top-container {
+  display: flex;
+}
+
+#left-menu {
+  border: 1px solid green;
+}
+
+
+
+#contentarea {
+  border: 1px solid blue;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+#topbar {
+  border: 1px solid red;
+}
+
+#content {
+  border: 1px solid yellow;
 }

code/moya-angular/src/app/app.component.html

 
-<nav>
-<a routerLink="/test" routerLinkActive="active">test</a>
-<a routerLink="/vip/viplist" routerLinkActive="active">viplist</a>
-<a routerLink="/old" [queryParams]="{p: 'poll/index.jsf'}" routerLinkActive="active">POLL</a>
-<a routerLink="/old" [queryParams]="{p: 'foodmanager/listFoodwaves.jsf'}" routerLinkActive="active">foodWaves</a>
-</nav>
 
-<br />
+<div id="top-container">
+  <div id="left-menu">
+    <router-outlet name="left-menu"></router-outlet>
+  </div>
 
-<router-outlet></router-outlet>
+  <div id="contentarea">
+    <div id="topbar">
+      <top-menu></top-menu>
+    </div>
+    <div id="content">
+      <router-outlet></router-outlet>
+    </div>
+  </div>
+</div>

code/moya-angular/src/app/app.component.ts

@@ -3,6 +3,8 @@ import {Router} from "@angular/router";
 
 declare var window: any;
 
+
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -10,9 +12,6 @@ declare var window: any;
 })
 export class AppComponent {
 
-  counter = 4;
-
-
   constructor(private router : Router, private zone : NgZone) {
 
     window.angularRoute = (url => {
@@ -20,18 +19,6 @@ export class AppComponent {
         router.navigateByUrl(url);
       });
     });
-
-
-    // Enable change detection sometimes to see that it's not overflooded.
-    // bcause it takes time
-
-    //zone.onMicrotaskEmpty.subscribe(() => {console.log(".");}); // <-- Print "." everytime change detection is possibly
-
   }
 
-
-
-
-
-  title = 'app works!';
 }

code/moya-angular/src/app/app.module.ts

@@ -9,24 +9,63 @@ import {AlertModule} from "ng2-bootstrap";
 import {MoyaRestModule} from "moya-angular-common";
 
 import { RouterModule, Routes } from '@angular/router';
-import {TestComponent} from "./test/test.component";
 import { OldMoyaComponent } from './old-moya/old-moya.component';
-import {SafePipe } from './safe.pipe';
+import {SafePipe } from './pipes/safe.pipe';
+import { I18nDirective } from './directives/i18n.directive';
+import {TestComponent} from "./test/test.component";
+import { AdminMenuComponent } from './menu/admin-menu/admin-menu.component';
+import {TopMenuComponent} from "./menu/top-menu/top-menu.component";
+import {LeftMenuComponent} from "./menu/left-menu/left-menu.component";
+import { InfoMenuComponent } from './menu/info-menu/info-menu.component';
+import { UserMenuComponent } from './menu/user-menu/user-menu.component';
+import { UserComponent } from './user/user.component';
+import { InfoComponent } from './info/info.component';
+import { AdminComponent } from './admin/admin.component';
 
 const appRoutes: Routes = [
-  { path: 'vip/viplist', component: ViplistComponent },
-  { path: 'test', component: TestComponent },
-  { path: 'old', pathMatch: 'prefix',component: OldMoyaComponent }
+  { path: 'user',
+    children: [
+      { path: '', component: UserMenuComponent, outlet: "left-menu" },
+      { path: '', pathMatch: 'full', component: UserComponent },
+      { path: 'old', component: OldMoyaComponent },
+    ]
+  },
+  { path: 'info',
+    children: [
+      { path: '', component: InfoMenuComponent, outlet: "left-menu" },
+      { path: '', pathMatch: 'full', component: InfoComponent },
+      { path: 'old', component: OldMoyaComponent },
+    ]
+  },
+  { path: 'admin',
+    children: [
+      { path: '', component: AdminMenuComponent, outlet: "left-menu" },
+      { path: '', pathMatch: 'full', component: AdminComponent },
+      { path: 'old', component: OldMoyaComponent },
+    ]
+  },
+
+  { path: 'old', pathMatch: 'prefix', component: OldMoyaComponent },
 ];
 
 
+
 @NgModule({
   declarations: [
     AppComponent,
     ViplistComponent,
-    TestComponent,
     OldMoyaComponent,
     SafePipe,
+    I18nDirective,
+    TestComponent,
+    TopMenuComponent,
+    LeftMenuComponent,
+    AdminMenuComponent,
+    InfoMenuComponent,
+    UserMenuComponent,
+    UserComponent,
+    InfoComponent,
+    AdminComponent
   ],
   imports: [
     BrowserModule,

code/moya-angular/src/app/directives/i18n.directive.ts

+import {Directive, ElementRef, TemplateRef, ViewContainerRef} from '@angular/core';
+
+@Directive({
+  selector: '[i18n]'
+})
+export class I18nDirective {
+
+  constructor(
+               private viewContainer: ViewContainerRef) {
+
+
+
+    console.log(this.viewContainer);
+
+
+   // console.log(el.nativeElement.style.background);
+
+
+  }
+
+}

code/moya-angular/src/app/info/info.component.html

+<p>
+  info works!
+</p>

code/moya-angular/src/app/info/info.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InfoComponent } from './info.component';
+
+describe('InfoComponent', () => {
+  let component: InfoComponent;
+  let fixture: ComponentFixture<InfoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InfoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

code/moya-angular/src/app/info/info.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-info',
+  templateUrl: './info.component.html',
+  styleUrls: ['./info.component.css']
+})
+export class InfoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

code/moya-angular/src/app/menu/admin-menu/admin-menu.component.html

+<left-menu [menu]="menu"></left-menu>

code/moya-angular/src/app/menu/admin-menu/admin-menu.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminMenuComponent } from './admin-menu.component';
+
+describe('AdminMenuComponent', () => {
+  let component: AdminMenuComponent;
+  let fixture: ComponentFixture<AdminMenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AdminMenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AdminMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

code/moya-angular/src/app/menu/admin-menu/admin-menu.component.ts

+import { Component, OnInit } from '@angular/core';
+import {MenuGroup} from "../../models/menu-group.model";
+import {MENU} from "../defines/menu";
+
+@Component({
+  selector: 'app-admin-menu',
+  templateUrl: './admin-menu.component.html',
+  styleUrls: ['./admin-menu.component.css']
+})
+export class AdminMenuComponent implements OnInit {
+
+  menu: MenuGroup[]= MENU.INFO;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

code/moya-angular/src/app/menu/defines/menu.ts

+import {MenuGroup} from "../../models/menu-group.model";
+/**
+ * Created by tuukka on 13/05/17.
+ */
+
+
+export class MENU {
+  //useradmin/list.jsf
+
+  static ADMIN: MenuGroup[]= [
+    {
+      "name": "Kauppa",
+      "items": [
+        { "path": "/admin/old", "name": "Products", "params": {p: 'product/list.jsf'} }
+      ]}
+  ];
+
+  static INFO: MenuGroup[]= [
+    {
+      "name": "Users",
+      "items": [
+        { "path": "/info/old", "name": "List users", "params": {p: 'useradmin/list.jsf'} }
+      ]}
+  ];
+
+  static USER: MenuGroup[] = [
+    {
+      "name": "Shop",
+      "items": [
+        { "path": "/user/old", "name": "Buy Tickets", "params": {p: 'shop/createBill.jsf'} },
+        { "path": "/user/old", "name": "Own Orders", "params": {p: 'bill/list.jsf'} },
+      ]},
+    {
+      "name": "POLL",
+      "items": [
+        { "path": "/user/old", "name": "Jotain", "params": {p: 'poll/index.jsf'} },
+      ]},
+  ];
+
+
+
+
+}

code/moya-angular/src/app/menu/info-menu/info-menu.component.html

+<left-menu [menu]="menu"></left-menu>

code/moya-angular/src/app/menu/info-menu/info-menu.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InfoMenuComponent } from './info-menu.component';
+
+describe('InfoMenuComponent', () => {
+  let component: InfoMenuComponent;
+  let fixture: ComponentFixture<InfoMenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InfoMenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InfoMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

code/moya-angular/src/app/menu/info-menu/info-menu.component.ts

+import { Component, OnInit } from '@angular/core';
+import {MenuGroup} from "../../models/menu-group.model";
+import {MENU} from "../defines/menu";
+
+@Component({
+  selector: 'app-info-menu',
+  templateUrl: './info-menu.component.html',
+  styleUrls: ['./info-menu.component.css']
+})
+export class InfoMenuComponent implements OnInit {
+
+  menu: MenuGroup[]= MENU.INFO;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

code/moya-angular/src/app/menu/left-menu/left-menu.component.css

+
+
+.leftNavGroup a.active {
+  color: red;
+}
+
+
+#leftNav {
+  display: flex;
+  flex-direction: column;
+}
+
+
+.leftNavGroup {
+  display: flex;
+  flex-direction: column;
+}
+

code/moya-angular/src/app/menu/left-menu/left-menu.component.html

+
+
+<div>
+
+  <nav id="leftNav">
+
+    <div *ngFor="let group of menu" class="leftNavGroup">
+
+      <span class="menuHeader">{{group.name}}</span>
+      <a *ngFor="let item of group.items" class="leftNavItem" [routerLink]="item.path" routerLinkActive="active" [queryParams]="item.params" >{{item.name}}</a>
+
+    </div>
+
+  </nav>
+
+
+</div>
+

code/moya-angular/src/app/menu/left-menu/left-menu.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LeftMenuComponent } from './left-menu.component';
+
+describe('LeftMenuComponent', () => {
+  let component: LeftMenuComponent;
+  let fixture: ComponentFixture<LeftMenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LeftMenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LeftMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

code/moya-angular/src/app/menu/left-menu/left-menu.component.ts

+import {Component, OnInit, Input} from '@angular/core';
+import {MenuGroup} from "../../models/menu-group.model";
+
+@Component({
+  selector: 'left-menu',
+  templateUrl: './left-menu.component.html',
+  styleUrls: ['./left-menu.component.css']
+})
+export class LeftMenuComponent implements OnInit {
+
+  @Input()
+  menu: MenuGroup[];
+
+
+
+  constructor() {
+
+  }
+
+  ngOnInit() {
+  }
+
+}

code/moya-angular/src/app/menu/top-menu/top-menu.component.html

+
+<nav>
+  <a  class="topNavItem" id="userTopNav" routerLink="/user" routerLinkActive="active"  i18n>USER</a>
+  <a  class="topNavItem" id="infoTopNav" routerLink="/info" routerLinkActive="active"  i18n>INFO</a>
+  <a  class="topNavItem" id="adminTopNav" routerLink="/admin" routerLinkActive="active"  i18n>ADMIN</a>
+</nav>

code/moya-angular/src/app/menu/top-menu/top-menu.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TopMenuComponent } from './top-menu.component';
+
+describe('TopMenuComponent', () => {
+  let component: TopMenuComponent;
+  let fixture: ComponentFixture<TopMenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TopMenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TopMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

code/moya-angular/src/app/menu/top-menu/top-menu.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'top-menu',
+  templateUrl: './top-menu.component.html',
+  styleUrls: ['./top-menu.component.css']
+})
+export class TopMenuComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

code/moya-angular/src/app/menu/user-menu/user-menu.component.html

+<left-menu [menu]="menu"></left-menu>

code/moya-angular/src/app/menu/user-menu/user-menu.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserMenuComponent } from './user-menu.component';
+
+describe('UserMenuComponent', () => {
+  let component: UserMenuComponent;
+  let fixture: ComponentFixture<UserMenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserMenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

code/moya-angular/src/app/menu/user-menu/user-menu.component.ts

+import { Component, OnInit } from '@angular/core';
+import {MenuGroup} from "../../models/menu-group.model";
+import {MENU} from "../defines/menu";
+
+@Component({
+  selector: 'app-user-menu',
+  templateUrl: './user-menu.component.html',
+  styleUrls: ['./user-menu.component.css']
+})
+export class UserMenuComponent implements OnInit {
+
+  menu: MenuGroup[]= MENU.USER;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

code/moya-angular/src/app/models/menu-group.model.ts

+
+import {MenuItem} from "./menu-item.model";
+
+
+export interface MenuGroup {
+
+  name: string;
+  items: MenuItem[];
+
+}

code/moya-angular/src/app/models/menu-item.model.ts

+
+
+export interface MenuItem {
+
+  path: string;
+  name: string;
+  params?: any;
+
+
+}

code/moya-angular/src/app/old-moya/old-moya.component.ts

 import { Component, OnInit,  ViewChild, ElementRef } from '@angular/core';
 import {Location, LocationStrategy, HashLocationStrategy, PathLocationStrategy} from "@angular/common";
-import {NavigationExtras, ActivatedRoute} from "@angular/router";
+import {NavigationExtras, ActivatedRoute, Router} from "@angular/router";
 import {Observable} from "rxjs";
 
 @Component({
@@ -28,22 +28,23 @@ export class OldMoyaComponent implements OnInit {
         this.frameUrl = "/MoyaWeb/" + x;
       }
     });
+
   }
 
 
   ngOnInit() { }
 
   changeUrl() {
-    let tmpUrl = this.iframe.nativeElement.contentWindow.location.href.split("/MoyaWeb/",2);
+    let tmpFrameUrl = this.iframe.nativeElement.contentWindow.location.href.split("/MoyaWeb/",2);
 
-    if(tmpUrl.length > 1) {
-      this.location.replaceState("/old?p=" + tmpUrl[1]);
+    if(tmpFrameUrl.length > 1) {
+      this.location.replaceState(this.location.path(false).split("?", 1)[0] + "?p=" + tmpFrameUrl[1]);
     }
 
-
-
     this.height = this.iframe.nativeElement.contentWindow.document.body.scrollHeight + "px";
 
+    console.log(this.height);
+
   }
 
 }

code/moya-angular/src/app/safe.pipe.js

-"use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var core_1 = require('@angular/core');
-var SafePipe = (function () {
-    function SafePipe(sanitizer) {
-        this.sanitizer = sanitizer;
-    }
-    SafePipe.prototype.transform = function (url) {
-        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
-    };
-    SafePipe = __decorate([
-        core_1.Pipe({
-            name: 'safe'
-        })
-    ], SafePipe);
-    return SafePipe;
-}());
-exports.SafePipe = SafePipe;

code/moya-angular/src/app/safe.pipe.spec.js

-"use strict";
-describe('SafePipe', function () {
-    it('create an instance', function () {
-    });
-});

code/moya-angular/src/app/test/test.component.html

-<p>
-  HMR TEST
+
+  <span i18n>This is testfile</span>
   <br />
   <br />
   <br />
 
+  <h1 i18n>Counter value</h1>
   {{counter}}
 
+<p i18n>{counter, plural, =0 {not pressed} =1 {pressed once} other {pressed many times}} </p>
+
+  <button (click)="addOne()" i18n>ADD ONE</button>
+
+  <span i18n>This is testfile</span>
 
-  <button (click)="addOne()">Kasvata</button>
 
-</p>

code/moya-angular/src/app/user/user.component.html

+<p>
+  user works!
+</p>

code/moya-angular/src/app/user/user.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserComponent } from './user.component';
+
+describe('UserComponent', () => {
+  let component: UserComponent;
+  let fixture: ComponentFixture<UserComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

code/moya-angular/src/app/user/user.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-user',
+  templateUrl: './user.component.html',
+  styleUrls: ['./user.component.css']
+})
+export class UserComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}