Merge branch 'angular2pages' into 'master'

Angular2pages

See merge request !393

code/moya-angular/.angular-cli.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "angular6testi"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.scss"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "component": {}
+  }
+}

code/moya-angular/.editorconfig

+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

code/moya-angular/.gitignore

+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+
+# dependencies
+/node_modules
+/node
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage/*
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+package-lock.json
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+#System Files
+.DS_Store
+Thumbs.db

code/moya-angular/README.md

+
+
+
+# devausnoteja (tmp ohjeet)
+
+## Devaus
+
+
+### devaus workflow
+
+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.
+
+ng-palvelimessa on bugi, ja se ei osaa jakaa tavaraa muusta hakemistosta kuin /.
+
+moyaproxy.conf.json sisältää proxyasetukset porttiin 8080. 
+
+Käyttö:
+`ng serve  --preserve-symlinks --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/
+
+### HMR
+
+HMR -asetukset löytyy, niistä ei nykyisellään ole mitään hyötyä. Saa poistaa.
+
+
+## Koodijuttuja
+
+### moya-rest
+Oma moduulinsa, joka tullaan jossain vaiheessa eriyttämään ja käyttämään myös mahdollisessa nativescript-kännyappiksessa. Eli sen alle tulee vain servisejä, ei komponentteja.
+
+### Muuta
+Jos tulee muita järkeviä kokonaisuuksia, joita voi käyttää muualla, jaa omaan moduuliinsa.
+
+## Hakemistohierarkia
+
+* app
+  * pages `tämän alla on käytännössä "älykkäät" komponentit (stateful), eli componentit jotka tietää mitä dataa haetaan ja mistä. Käytännössä route -targetit`
+    * user  `Loppukäyttäjälle näkyvät jutut, ohjleman ns. main moduuli`
+      * pizzatilaus
+        * listOpen.component.ts  `avoimet pizzatilaukset joista voi tilata`
+        * own_orders.component.ts
+        * testit yms.
+    * admin  `moya asetukset, esim. tuotteet, korttipohjat, oma moduulinsa joka lazyloadataan`
+      * admin.module.ts
+      * pizzatilaus
+        * pizzaedit.component.ts `hallitse mitä pizzoja voi tilata ylipäätänsä`
+    * info  `tapahtumanaikana "infolaisen" toimesta tehtävät jutut, sisäänotto, käyttäjänhallinta jne. Oma moduulinsa joka lazyloadataan`
+      * info.module.ts
+      * viplist
+        * viplist.component.ts,html,jne
+        * viplist.service.ts
+      * pizzatilaus
+        * list.component.ts `listaa kaikki, ja lisää uusi pizzailaus`
+    * old-moya `Monessa paikassa käytettävät target -componentit tulevat omiksi kokonaisuudiksiin`
+      * old-moya.component.ts
+    * pizzatilaus `Jos halutaan lazyloadata jokin osa moyasta, tehdään siitä uusi päätason komponentti. Joka sitten laitetetaan user / admin yms. puolille route -targetiksi`
+      * pizzatilaus-route.module.ts
+      * pizza-user-order.component.ts
+  * menu  `menu on täällä`
+  * shared   `geneeriset, mihinkään osaan kuulumattomat jaetut modellit ja servicet tulevat tänne`
+    * models
+      * user.model.ts
+    * services
+      * moya-rest.service.ts
+      * session.service.ts
+  * widgets `tyhmät componponentit tulevat tänne`
+    * button
+      * html
+      * ts
+      * scss
+  * components `servicet sekä componenttien geneeriset tyhmät osat tulevat tämän hakemiston alle `
+    * viplist
+      * list.component.ts
+      * add.component.ts
+  * modules  `Kokonaiset, monessa paikassa olevt kokonaisuuksien tyhmät osat tulevat tänne. Sen verta isot että ne kannattaa tehdä moduuleiksi`
+    * pizzatilaus
+      * anna-pizza.component.ts
+      * list-pizzat.component.ts,html,jne
+      * listItem.component.ts
+      * edit.component.ts
+        * pizzatilaus.service.ts
+      * pizza-tilaus.module.ts
+
+
+
+
+
+## TODO
+Tekemistä jota voi esim kämpissä säätää
+
+### I18N
+I18N loaderi webpackkiin. Esim. muuntaa properties-filun taulukoksi ja siihen joku localisointikirjasto, tai jotain.
+
+### Paketointi
+Miten paketoidaan moya niin että mukaan kääntyy myös angular -jutukkeet?
+
+### Lazy loading
+Lazy loading niin että se toimii vielä moyan kanssa, vaatinnee säätöä.
+
+### Travis yms. autotestit
+oma travis-palvelin, ja siihen autotestit
+Ehkä greenkeeper, jos sitä voi hostata ite
+
+### Testit
+Integraatio jne. testit, aloitteliat ei riko asioita niin todennäköisesti.
+
+### WebPack ja buildin minimointi
+aot-kääntäminen ja siihen comperssointia jne.
+
+
+
+
+
+# MoyaAngular, generoidut ohjeet
+
+This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.24.
+
+## Development server
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Before running the tests make sure you are serving the app via `ng serve`.
+
+## Deploying to Github Pages
+
+Run `ng github-pages:deploy` to deploy to Github Pages.
+
+## Further help
+
+To get more help on the `angular-cli` use `ng help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

code/moya-angular/WebContent/WEB-INF/pretty-config.xml

+<pretty-config xmlns="http://ocpsoft.org/schema/rewrite-config-prettyfaces"
+               xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+               xsi:schemaLocation="http://ocpsoft.org/schema/rewrite-config-prettyfaces
+                      http://ocpsoft.org/xml/ns/prettyfaces/rewrite-config-prettyfaces.xsd">
+
+    <rewrite match="^(?!.*\.(js|css|jpg|gif|png|ico|html|svg)$).*$" substitute="/index.html" redirect="chain" />
+
+  </pretty-config>

code/moya-angular/WebContent/WEB-INF/web.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+	xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:web="http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
+	version="3.1">
+	<display-name>MoyaAngularWeb</display-name>
+	<welcome-file-list>
+		<welcome-file>index.html</welcome-file>
+	</welcome-file-list>
+</web-app>

code/moya-angular/e2e/app.e2e-spec.ts

+import { MoyaAngularPage } from './app.po';
+
+describe('moya-angular App', function() {
+  let page: MoyaAngularPage;
+
+  beforeEach(() => {
+    page = new MoyaAngularPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});

code/moya-angular/e2e/app.po.ts

+import { browser, element, by } from 'protractor';
+
+export class MoyaAngularPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

code/moya-angular/e2e/tsconfig.json

+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../dist/out-tsc-e2e",
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
+  }
+}

code/moya-angular/karma.conf.js

+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', 'angular-cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-remap-istanbul'),
+      require('angular-cli/plugins/karma')
+    ],
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['angular-cli']
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    remapIstanbulReporter: {
+      reports: {
+        html: 'coverage',
+        lcovonly: './coverage/coverage.lcov'
+      }
+    },
+    angularCli: {
+      config: './angular-cli.json',
+      environment: 'dev'
+    },
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'karma-remap-istanbul']
+              : ['progress'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

code/moya-angular/moyaproxy.conf.json

+{
+  "/MoyaWeb": {
+    "target": "http://localhost:8080",
+    "secure": false
+  }
+}

code/moya-angular/package.json

+{
+  "name": "moya-angular",
+  "version": "0.0.0",
+  "license": "UNLICENSED",
+  "angular-cli": {},
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve --proxy-config=moyaproxy.conf.json --base-href=/",
+    "build": "ng build",
+    "aot": "ng build --aot",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "version": "ng version"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^5.2.9",
+    "@angular/common": "^5.2.9",
+    "@angular/compiler": "^5.2.9",
+    "@angular/core": "^5.2.9",
+    "@angular/forms": "^5.2.9",
+    "@angular/http": "^5.2.9",
+    "@angular/material": "^5.2.4",
+    "@angular/platform-browser": "^5.2.9",
+    "@angular/platform-browser-dynamic": "^5.2.9",
+    "@angular/router": "^5.2.9",
+    "bootstrap": "^4.0.0",
+    "core-js": "^2.5.1",
+    "ngx-bootstrap": "^2.0.2",
+    "rxjs": "^5.5.0",
+    "ts-helpers": "^1.1.1",
+    "zone.js": "^0.8.19"
+  },
+  "devDependencies": {
+    "@angular/cdk": "^5.2.4",
+    "@angular/cli": "^1.7.3",
+    "@angular/compiler-cli": "^5.2.9",
+    "@angular/language-service": "^5.2.9",
+    "@types/jasmine": "~2.8.3",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~9.4.6",
+    "codelyzer": "^4.0.1",
+    "jasmine-core": "~3.1.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~2.0.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.3.0",
+    "ts-node": "~5.0.0",
+    "tslint": "~5.9.1",
+    "typescript": "~2.5.3"
+  }
+}

code/moya-angular/pom.xml

+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+  <modelVersion>4.0.0</modelVersion>
+  <artifactId>moya-angular</artifactId>
+  <packaging>war</packaging>
+  <build>
+    <plugins>
+      <plugin>
+        <artifactId>maven-war-plugin</artifactId>
+        <version>${war-plugin-version}</version>
+        <configuration>
+          <warSourceDirectory>WebContent</warSourceDirectory>
+          <failOnMissingWebXml>false</failOnMissingWebXml>
+          <packagingExcludes>%regex[WEB-INF/lib/(?!rewrite-.*\.jar)(?!moya-restpojo.*\.jar).*]</packagingExcludes>
+          <webResources>
+            <resource>
+              <directory>./dist/</directory>
+            </resource>
+          </webResources>
+        </configuration>
+      </plugin>
+      <plugin>
+        <groupId>com.github.eirslett</groupId>
+        <artifactId>frontend-maven-plugin</artifactId>
+        <version>${eirslett.frontend.version}</version>
+
+        <executions>
+
+          <execution>
+          <!-- optional: you don't really need execution ids,
+          but it looks nice in your build log. -->
+          <id>install node and npm</id>
+          <goals>
+            <goal>install-node-and-npm</goal>
+          </goals>
+          <configuration>
+            <nodeVersion>${js.node.version}</nodeVersion>
+            <npmVersion>${js.npm.version}</npmVersion>
+          </configuration>
+        </execution>
+
+        <execution>
+          <id>npm install</id>
+          <goals>
+            <goal>npm</goal>
+          </goals>
+        </execution>
+
+        <execution>
+          <id>npm run build</id>
+          <goals>
+            <goal>npm</goal>
+          </goals>
+          <phase>generate-resources</phase>
+          <configuration>
+            <arguments>run build</arguments>
+          </configuration>
+        </execution>
+
+        </executions>
+      </plugin>
+    </plugins>
+  </build>
+
+  <dependencies>
+    <dependency>
+      <groupId>org.ocpsoft.rewrite</groupId>
+      <artifactId>rewrite-servlet</artifactId>
+      <version>${rewriteservlet.version}</version>
+    </dependency>
+    <dependency>
+      <groupId>org.ocpsoft.rewrite</groupId>
+      <artifactId>rewrite-config-prettyfaces</artifactId>
+      <version>${rewriteservlet.version}</version>
+    </dependency>
+  </dependencies>
+  <parent>
+    <groupId>fi.codecrew.moya</groupId>
+    <artifactId>moya-parent</artifactId>
+    <version>1.2-SNAPSHOT</version>
+    <relativePath>../moya-parent/pom.xml</relativePath>
+  </parent>
+</project>

code/moya-angular/protractor.conf.js

+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+/*global jasmine */
+var SpecReporter = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  useAllAngular2AppRoots: true,
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e'
+    });
+  },
+  onPrepare: function() {
+    jasmine.getEnv().addReporter(new SpecReporter());
+  }
+};

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

+
+
+<div id="top-container">
+  <div id="left-menu">
+    <router-outlet name="left-menu"></router-outlet>
+  </div>
+
+  <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.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 AppComponent = (function () {
+    function AppComponent(router, zone) {
+        this.router = router;
+        this.zone = zone;
+        this.counter = 4;
+        this.title = 'app works!';
+        window.angularRoute = (function (url) {
+            zone.run(function () {
+                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
+    }
+    AppComponent = __decorate([
+        core_1.Component({
+            selector: 'app-root',
+            templateUrl: './app.component.html',
+            styleUrls: ['./app.component.css']
+        })
+    ], AppComponent);
+    return AppComponent;
+}());
+exports.AppComponent = AppComponent;

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

+#top-container {
+  width: 100%;
+  display: flex;
+  min-height: 100%;
+}
+
+#left-menu {
+}
+
+
+
+#contentarea {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+#topbar {
+  margin-bottom: 30px;
+}
+
+#content {
+  display: flex;
+  flex-direction: row;
+  background-color: white;
+  margin-left: 30px;
+  padding: 20px;
+  flex-grow: 1;
+}

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

+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    });
+    TestBed.compileComponents();
+  });
+
+  it('should create the app', async(() => {
+    let fixture = TestBed.createComponent(AppComponent);
+    let app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    let fixture = TestBed.createComponent(AppComponent);
+    let app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    let fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    let compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});

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

+import {Component, NgZone} from '@angular/core';
+import {Router} from '@angular/router';
+
+declare var window: any;
+
+
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+
+  constructor(private router: Router, private zone: NgZone) {
+
+    window.angularRoute = (url => {
+      zone.run(() => {
+        router.navigateByUrl(url);
+      });
+    });
+  }
+
+}

code/moya-angular/src/app/app.module.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 platform_browser_1 = require('@angular/platform-browser');
+var core_1 = require('@angular/core');
+var forms_1 = require('@angular/forms');
+var http_1 = require('@angular/http');
+var app_component_1 = require('./app.component');
+var viplist_component_1 = require('./viplist/viplist.component');
+var ng2_bootstrap_1 = require("ng2-bootstrap");
+var moya_angular_common_1 = require("moya-angular-common");
+var router_1 = require('@angular/router');
+var test_component_1 = require("./test/test.component");
+var old_moya_component_1 = require('./old-moya/old-moya.component');
+var safe_pipe_1 = require('./safe.pipe');
+var appRoutes = [
+    { path: 'vip/viplist', component: viplist_component_1.ViplistComponent },
+    { path: 'test', component: test_component_1.TestComponent },
+    { path: 'old', component: old_moya_component_1.OldMoyaComponent }
+];
+var AppModule = (function () {
+    function AppModule() {
+    }
+    AppModule = __decorate([
+        core_1.NgModule({
+            declarations: [
+                app_component_1.AppComponent,
+                viplist_component_1.ViplistComponent,
+                test_component_1.TestComponent,
+                old_moya_component_1.OldMoyaComponent,
+                safe_pipe_1.SafePipe,
+            ],
+            imports: [
+                platform_browser_1.BrowserModule,
+                forms_1.FormsModule,
+                http_1.HttpModule,
+                ng2_bootstrap_1.AlertModule.forRoot(),
+                moya_angular_common_1.MoyaRestModule.forRoot(),
+                router_1.RouterModule.forRoot(appRoutes)
+            ],
+            providers: [],
+            bootstrap: [app_component_1.AppComponent]
+        })
+    ], AppModule);
+    return AppModule;
+}());
+exports.AppModule = AppModule;

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

+import {BrowserModule} from '@angular/platform-browser';
+import {Injector, NgModule, ReflectiveInjector} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+
+import {AppComponent} from './app.component';
+import {ViplistComponent} from './viplist/viplist.component';
+import {AlertModule} from 'ngx-bootstrap';
+
+
+import {RouterModule, Routes} from '@angular/router';
+import {OldMoyaComponent} from './pages/old-moya/old-moya.component';
+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 './pages/user/user.component';
+import {InfoComponent} from './pages/info/info.component';
+import {AdminComponent} from './pages/admin/admin.component';
+import {HttpClientModule, HttpHandler } from '@angular/common/http';
+import { HttpModule } from '@angular/http';
+import {StaticInjector} from "@angular/core/src/di/injector";
+import {CommonModule} from "@angular/common";
+import {CacheService} from "./shared/services/cache.service";
+import {MoyaRestModule} from "./moya-rest";
+import {SafePipe} from "./shared/pipes/safe.pipe";
+
+const appRoutes: Routes = [
+  {
+    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: OldMoyaComponent},
+      {path: 'old', component: OldMoyaComponent},
+      {path: 'viplist', component: ViplistComponent},
+    ]
+  },
+  {
+    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,
+    OldMoyaComponent,
+    TestComponent,
+    TopMenuComponent,
+    LeftMenuComponent,
+    AdminMenuComponent,
+    InfoMenuComponent,
+    UserMenuComponent,
+    UserComponent,
+    InfoComponent,
+    AdminComponent,
+    SafePipe
+
+  ],
+  imports: [
+    CommonModule,
+    BrowserModule,
+    FormsModule,
+    HttpClientModule,
+    AlertModule.forRoot(),
+    MoyaRestModule,
+    //MoyaRestModule.forRoot(),
+    RouterModule.forRoot(appRoutes)
+  ],
+  providers: [CacheService],
+  bootstrap: [AppComponent]
+})
+export class AppModule {
+}

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

+<left-menu [menu]="menu" styleClass="adminMenu"></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} 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.scss']
+})
+export class AdminMenuComponent {
+
+  menu: MenuGroup[] = MENU.ADMIN;
+}

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 {
+
+  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'} },
+        { 'path': '/info/viplist', 'name': 'VipList'}
+      ]}
+  ];
+
+  static USER: MenuGroup[] = [
+    {
+      'name': 'Event',
+      'items': [
+        { 'path': '/user/old', 'name': 'Poll', 'params': {p: 'poll/index.jsf'} },
+        { 'path': '/user/old', 'name': 'Invite friends', 'params': {p: 'user/invite.jsf'} },
+      ]},
+    {
+      'name': 'Shop',
+      'items': [
+        { 'path': '/user/old', 'name': 'Buy Tickets', 'params': {p: 'shop/createBill.jsf'} },
+        { 'path': '/user/old', 'name': 'Reserve Places', 'params': {p: 'neomap/reserve.jsf'} },
+        { 'path': '/user/old', 'name': 'Change Places', 'params': {p: 'neomap/moveplaces.jsf'} },
+        { 'path': '/user/old', 'name': 'Food Orders', 'params': {p: 'foodwave/list.jsf'} },
+        { 'path': '/user/old', 'name': 'Own Orders', 'params': {p: 'bill/list.jsf'} },
+        { 'path': '/user/old', 'name': 'Account Events', 'params': {p: 'user/accountEvents.jsf'} },
+      ]},
+    {
+      'name': 'Computerplaces',
+      'items': [
+        { 'path': '/user/old', 'name': 'Own Places', 'params': {p: 'place/myGroups.jsf'} },
+        { 'path': '/user/old', 'name': 'Placemap', 'params': {p: 'neomap/view.jsf'} },
+      ]},
+    {
+      'name': 'Competitions',
+      'items': [
+        { 'path': '/user/old', 'name': 'Compos', 'params': {p: 'voting/compolist.jsf'} },
+        { 'path': '/user/old', 'name': 'My entries', 'params': {p: 'voting/myEntries.jsf'} },
+      ]},
+    {
+      'name': 'Profile',
+      'items': [
+        { 'path': '/user/old', 'name': 'My Information', 'params': {p: 'user/edit.jsf'} },
+        { 'path': '/user/old', 'name': 'Request Role', 'params': {p: 'orgrole/requestRole.jsf'} },
+        { 'path': '/user/old', 'name': 'Change password', 'params': {p: 'user/changePassword.jsf'} },
+        { 'path': '/user/old', 'name': 'Set GameIDs', 'params': {p: 'user/gameids.jsf'} },
+      ]},
+    {
+      'name': 'Tournaments',
+      'items': [
+        { 'path': '/user/old', 'name': 'Tournaments List', 'params': {p: 'tournaments/index.jsf'} },
+        { 'path': '/user/old', 'name': 'My Participations', 'params': {p: 'tournaments/myparticipations.jsf'} },
+      ]},
+    {
+      'name': 'Lectures and Courses',
+      'items': [
+        { 'path': '/user/old', 'name': 'Participate', 'params': {p: 'lectures/viewLectures.jsf'} },
+      ]},
+  ];
+
+
+
+
+}

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

+<left-menu [menu]="menu" styleClass="infoMenu"></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.scss']
+})
+export class InfoMenuComponent implements OnInit {
+
+  menu: MenuGroup[]= MENU.INFO;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

+
+
+<div id="leftNavTop"  [class]="styleClass">
+
+  <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>
+
+  <a href="http://codecrew.fi" alt="Codecrew homepage" target="_blank"><img id="moya-logo" src="assets/moya-logo.svg" /></a>
+</div>
+

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

+@import "../../scss/main.scss";
+
+#leftNavTop {
+  min-height: 100vh;
+  width: 255px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#moya-logo {
+  width: 130px;
+  margin-bottom: 20px;
+}
+
+
+#leftNav {
+  display: flex;
+  flex-direction: column;
+  width: inherit;
+}
+
+.leftNavItem {
+  font-family: Roboto;
+  font-size: 14px;
+  color: #FFFFFF;
+  text-align: center;
+  padding-bottom: 12px;
+  padding-top: 12px;
+  border-left: 3px solid transparent;
+  left: 0px;
+  right: 0px;
+  width: auto;
+}
+
+.leftNavItem.active {
+  background-image: linear-gradient(90deg, rgba(126, 142, 218,0.13) 0%, rgba(255,255,255,0.00) 92%);
+  border-left: 3px solid #69B1A1;
+  text-decoration: none;
+}
+
+.leftNavItem:hover {
+  //background-image: linear-gradient(90deg, rgba(126, 142, 218,0.13) 0%, rgba(255,255,255,0.00) 92%);
+  border-left: 3px solid #69B1A1;
+  text-decoration: none;
+}
+
+
+
+
+.leftNavGroup {
+  display: flex;
+  flex-direction: column;
+
+  font-family: Roboto;
+  font-weight: 500;
+  font-size: 15px;
+
+  color: #E49436;
+  letter-spacing: 1.17px;
+
+  margin-top: 30px;
+  text-align: center;
+  padding-bottom: 12px;
+  padding-top: 12px;
+
+}
+
+.adminMenu  .leftNavGroup {
+  color: $user-color;
+}
+
+
+
+
+.userMenu {
+//  background-color: $user-color;
+  background-image: linear-gradient(0deg, #485173 0%, #141721 100%);
+}
+.adminMenu {
+//  background-color: $info-color;
+  background-image: linear-gradient(0deg, #fad9b1 0%, #de821f 100%);
+}
+.infoMenu{
+//  background-color: $admin-color;
+  background-image: linear-gradient(0deg, #569f8e 0%, #11141b 100%);
+}

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.scss']
+})
+export class LeftMenuComponent implements OnInit {
+
+  @Input()
+  menu: MenuGroup[];
+
+  @Input()
+  styleClass: string;
+
+  constructor() {
+
+  }
+
+  ngOnInit() {
+  }
+
+}

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

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

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

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

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

+
+<nav id="topNav">
+  <a  class="topNavItem" id="userTopNav" routerLink="/user" routerLinkActive="active"  i18n>Kävijänäkymä</a>
+  <a  class="topNavItem" id="infoTopNav" routerLink="/info" routerLinkActive="active" [queryParams]="{p: 'useradmin/list.jsf'}"  i18n>Infonäkymä</a>
+  <a  class="topNavItem" id="adminTopNav" routerLink="/admin" routerLinkActive="active"  i18n>Ylläpitonäkymä</a>
+</nav>

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

+@import "../../scss/main.scss";
+
+#topNav {
+  padding: 10px 10px 10px 30px;
+  display: flex;
+  background-color: white;
+}
+
+.topNavItem {
+  display: inline-block;
+  padding: 10px 20px 10px 20px;
+  margin-right: 10px;
+
+  font-family: Roboto;
+
+
+  font-size: 14px;
+  color: #FFFFFF;
+  letter-spacing: 0;
+
+  opacity: 0.5;
+  min-width: 100px;
+  text-align: center;
+
+}
+
+.topNavItem.active {
+  opacity: 1.0;
+}
+
+#userTopNav {
+  background: $user-color;
+}
+
+#infoTopNav {
+  background: $info-color;
+}
+
+#adminTopNav {
+  background: $admin-color;
+}

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.scss']
+})
+export class TopMenuComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

+<left-menu [menu]="menu" styleClass="userMenu"></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.scss']
+})
+export class UserMenuComponent implements OnInit {
+
+  menu: MenuGroup[]= MENU.USER;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

code/moya-angular/src/app/moya-rest/index.ts

+export * from "./moya-rest.module"

code/moya-angular/src/app/moya-rest/moya-rest.module.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 common_1 = require('@angular/common');
+var http_1 = require("@angular/http");
+var moya_rest_service_1 = require("../shared/services/moya-rest.service");
+var viplist_service_1 = require("../shared/services/viplist.service");
+var cache_service_1 = require("../shared/services/cache.service");
+var user_service_1 = require("../shared/services/user.service");
+var MoyaRestModule = (function () {
+    function MoyaRestModule() {
+    }
+    MoyaRestModule.forRoot = function () {
+        return {
+            ngModule: MoyaRestModule,
+            providers: [
+                moya_rest_service_1.MoyaRestService,
+                viplist_service_1.ViplistService,
+                cache_service_1.CacheService,
+                user_service_1.UserService
+            ]
+        };
+    };
+    MoyaRestModule = __decorate([
+        core_1.NgModule({
+            imports: [
+                common_1.CommonModule,
+                http_1.HttpModule
+            ],
+            declarations: []
+        })
+    ], MoyaRestModule);
+    return MoyaRestModule;
+}());
+exports.MoyaRestModule = MoyaRestModule;

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

+import {NgModule, ModuleWithProviders, NgZone, Injector} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {MoyaRestService} from "../shared/services/moya-rest.service";
+import {ViplistService} from "../shared/services/viplist.service";
+import {CacheService} from "../shared/services/cache.service";
+import {UserService} from "../shared/services/user.service";
+import {HttpClientModule} from "@angular/common/http";
+import {HttpModule} from "@angular/http";
+
+export * from "../shared/services/moya-rest.service";
+export * from "../shared/services/viplist.service";
+export * from "../shared/services/cache.service";
+export * from "../shared/services/user.service";
+
+export * from "../shared/models/user.model";
+export * from "../shared/models/vip.model";
+export * from "../shared/models/vip-product.model";
+export * from "../shared/models/vip-product-delivery.model";
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    HttpClientModule
+  ],
+  declarations: [ ],
+  providers: [
+    MoyaRestService,
+    ViplistService,
+    CacheService,
+    UserService,
+    HttpClientModule
+    /*{ provide: NgZone, useFactory: () => new NgZone({}) },
+    { provide: Injector, useFactory: () => Injector.create({providers: []}) } */
+  ],
+  exports: [
+  ],
+})
+
+export class MoyaRestModule {
+
+/*
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: MoyaRestModule,
+      providers: [
+        MoyaRestService,
+        ViplistService,
+        CacheService,
+        UserService,
+        HttpClientModule
+        /*{ provide: NgZone, useFactory: () => new NgZone({}) },
+        { provide: Injector, useFactory: () => Injector.create({providers: []}) }
+      ]
+    };
+  }*/
+
+}

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

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

code/moya-angular/src/app/pages/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/pages/admin/admin.component.ts

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

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

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

code/moya-angular/src/app/pages/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/pages/info/info.component.ts

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

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

+<iframe id="oldMoyaFrame" [src]="frameUrl | safe" [height]="height" #iframe (load)="changeUrl()" frameborder="0"></iframe>

code/moya-angular/src/app/pages/old-moya/old-moya.component.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 common_1 = require("@angular/common");
+var OldMoyaComponent = (function () {
+    function OldMoyaComponent(location) {
+        this.location = location;
+        this.frameUrl = "/MoyaWeb/";
+    }
+    OldMoyaComponent.prototype.ngOnInit = function () {
+    };
+    OldMoyaComponent.prototype.logIt = function () {
+        console.log(this.frameUrl);
+        console.log(this.frametus.nativeElement.contentWindow.location.href);
+        console.log(location.path(true));
+    };
+    __decorate([
+        core_1.ViewChild('frametus')
+    ], OldMoyaComponent.prototype, "frametus", void 0);
+    OldMoyaComponent = __decorate([
+        core_1.Component({
+            selector: 'app-old-moya',
+            providers: [common_1.Location, { provide: common_1.LocationStrategy, useClass: common_1.PathLocationStrategy }],
+            templateUrl: './old-moya.component.html',
+            styleUrls: ['./old-moya.component.css']
+        })
+    ], OldMoyaComponent);
+    return OldMoyaComponent;
+}());
+exports.OldMoyaComponent = OldMoyaComponent;

code/moya-angular/src/app/pages/old-moya/old-moya.component.scss

+:host {
+  display: flex;
+  flex-grow: 1;
+}
+
+
+#oldMoyaFrame {
+  flex-grow: 1;
+}

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

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

code/moya-angular/src/app/pages/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, Router} from '@angular/router';
+
+@Component({
+  selector: 'old-moya',
+  providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}],
+  templateUrl: './old-moya.component.html',
+  styleUrls: ['./old-moya.component.scss']
+})
+export class OldMoyaComponent implements OnInit {
+
+
+  frameUrl: String = '/MoyaWeb/';
+
+
+
+  @ViewChild('iframe') iframe: any;
+  height = '700px';
+
+
+
+  constructor(private location: Location, private route: ActivatedRoute) {
+
+    route.queryParamMap.map(a => a.get('p')).subscribe(x => {
+      console.log(x);
+      if (x) {
+        this.frameUrl = '/MoyaWeb/' + x.replace("::", "?");
+      }
+    });
+  }
+
+
+  ngOnInit() { }
+
+  changeUrl() {
+    let tmpFrameUrl = this.iframe.nativeElement.contentWindow.location.href.split('/MoyaWeb/', 2);
+
+    if (tmpFrameUrl.length > 1) {
+      this.location.replaceState(this.location.path(false).split('?', 1)[0] + '?p=' + tmpFrameUrl[1].replace("?", "::") );
+    }
+
+
+    console.log(this.iframe.nativeElement.contentWindow.document.body.height);
+
+    this.height = (this.iframe.nativeElement.contentWindow.document.body.scrollHeight + 50) + 'px';
+
+
+
+
+  }
+
+}

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

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

code/moya-angular/src/app/pages/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/pages/user/user.component.ts

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

code/moya-angular/src/app/scss/main.scss

+
+$user-color: #2b2c3a;
+$admin-color: #de821f;
+$info-color: #69B1A1;
+

code/moya-angular/src/app/shared/models/user.model.js

+/**
+ * Created by tuukka on 15/02/17.
+ */
+"use strict";
+// vim magic: %s/^\s*\w\+\s\+\(\w\+\)\s\+\(\w\+\)\s*.*;$/  \2: \L\1;/
+(function (UserGender) {
+    UserGender[UserGender["MALE"] = 0] = "MALE";
+    UserGender[UserGender["FEMALE"] = 1] = "FEMALE";
+    UserGender[UserGender["UNSPECIFIED"] = 2] = "UNSPECIFIED";
+})(exports.UserGender || (exports.UserGender = {}));
+var UserGender = exports.UserGender;
+var User = (function () {
+    function User() {
+    }
+    return User;
+}());
+exports.User = User;

code/moya-angular/src/app/shared/models/user.model.ts

+/**
+ * Created by tuukka on 15/02/17.
+ */
+
+// vim magic: %s/^\s*\w\+\s\+\(\w\+\)\s\+\(\w\+\)\s*.*;$/  \2: \L\1;/
+
+export enum UserGender {
+  MALE,
+  FEMALE,
+  UNSPECIFIED
+}
+
+export class User {
+
+  nick: string;
+  login: string;
+  eventuserId: number;
+  userId: number;
+  firstname: string;
+  lastname: string;
+  password: string;
+
+  birthday: Date;
+  gender: UserGender;
+
+  phoneNumber: string;
+  email: string;
+
+  streetAddress: string;
+  zipCode: string;
+  postOffice: string;
+
+
+  constructor() { }
+}

code/moya-angular/src/app/shared/models/vip-product-delivery.model.js

+/**
+ * Created by tuukka on 04/02/17.
+ */
+"use strict";
+var VipProductDelivery = (function () {
+    function VipProductDelivery() {
+    }
+    return VipProductDelivery;
+}());
+exports.VipProductDelivery = VipProductDelivery;

code/moya-angular/src/app/shared/models/vip-product-delivery.model.ts

+/**
+ * Created by tuukka on 04/02/17.
+ */
+
+
+export class VipProductDelivery {
+
+  /*
+   public Integer id;
+   public Integer delivererId;
+   public BigDecimal quantity;
+   public Date deliveryTime;
+   public String notes;
+   */
+
+  id: number;
+  delivererId: number;
+  quantity: number;
+  deliveryTime: Date;
+  notes: string;
+
+
+  constructor() {}
+
+}

code/moya-angular/src/app/shared/models/vip-product.model.js

+"use strict";
+/**
+ * Created by tuukka on 04/02/17.
+ */
+var VipProduct = (function () {
+    function VipProduct() {
+    }
+    return VipProduct;
+}());
+exports.VipProduct = VipProduct;

code/moya-angular/src/app/shared/models/vip-product.model.ts

+import {VipProductDelivery} from "./vip-product-delivery.model";
+/**
+ * Created by tuukka on 04/02/17.
+ */
+
+
+export class VipProduct {
+
+
+  /*
+
+   public Integer id;
+   public String name;
+   public Integer productId;
+   public String notes;
+   public BigDecimal quantity;
+   public BigDecimal delivered;
+   public List<VipProductDeliveryPojo> deliveries = new ArrayList<>();
+
+   */
+
+  id: number;
+  name: string;
+  productId: number;
+  notes: string;
+  quantity: number;
+  delivered: number;
+  deliveries : VipProductDelivery[];
+
+
+  constructor() {}
+
+}

code/moya-angular/src/app/shared/models/vip.model.js

+"use strict";
+/**
+ * Created by tuukka on 04/02/17.
+ */
+var Vip = (function () {
+    function Vip() {
+    }
+    return Vip;
+}());
+exports.Vip = Vip;

code/moya-angular/src/app/shared/models/vip.model.ts

+import {VipProduct} from "./vip-product.model";
+import {User} from "./user.model";
+/**
+ * Created by tuukka on 04/02/17.
+ */
+
+
+export class Vip {
+
+
+  /*
+
+   public Integer id;
+   public String description;
+   public String shortdescr;
+   public Date created;
+   public Integer eventuserId;
+   public Integer creatorId;
+   public Integer hostId;
+   public List<VipProductPojo> products = new ArrayList<>();
+   */
+
+  id: number;
+  description: string;
+  shortdescr: string;
+  created: Date;
+  eventuserId: number;
+  creatorId: number;
+  host: User;
+
+  products: VipProduct[];
+
+
+  constructor() {
+  }
+
+}

code/moya-angular/src/app/shared/pipes/safe.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer} from '@angular/platform-browser';
+
+
+@Pipe({
+  name: 'safe'
+})
+export class SafePipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) {}
+  transform(url) {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+  }
+}

code/moya-angular/src/app/shared/services/cache.service.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 rxjs_1 = require("rxjs");
+var DEFAULT_EXPIRE_MS = 300000; // 5min
+var CachedItem = (function () {
+    function CachedItem(moduleName, path, value, isObservable) {
+        this.moduleName = moduleName;
+        this.path = path;
+        this.value = value;
+        this.expires = new Date();
+        this.expires.setTime(Date.now() + DEFAULT_EXPIRE_MS);
+        this.isObservable = isObservable;
+    }
+    CachedItem.prototype.isExpired = function () {
+        return this.expires.getTime() < Date.now();
+    };
+    return CachedItem;
+}());
+/**
+ * Basic cacheService.
+ *
+ * First this was part of moyaRestService, but I thinked that if cache is too easy to use, someone will kill this application with it.
+ * So let's make it litlebit harder
+ */
+var CacheService = (function () {
+    // TODO: timed clearup for cache to save memory
+    function CacheService(zone) {
+        this.zone = zone;
+        this.cache = new Map();
+        this.timerObservable = rxjs_1.Observable.timer(30000, 30000); // afther 0.5min, every 0.5min.
+    }
+    /**
+     * This will return observable with value from cache, or cache value from your observable and return it in observable.
+     *
+     * example: return cacheService.cacheObservable("mymodule",<url>, http.get(<url>).map(v => v.json()));
+     *
+     * @param moduleName
+     * @param cachePath
+     * @param source: {Observable<any>} Observable where the values, which are cached, is coming from
+     * @return {Observable<any>}: if value is in cache, this is observable made from this value. Otherwise this is source observable.
+     */
+    CacheService.prototype.cacheObservable = function (moduleName, cachePath, source) {
+        var _this = this;
+        var cacheName = this.generateCachename(moduleName, cachePath);
+        if (this.cache.has(cacheName) && this.cache.get(cacheName).expires.getTime() < Date.now()) {
+            console.log(cacheName, " Expired version in cache");
+            this.cache.delete(cacheName);
+        }
+        if (!this.cache.has(cacheName)) {
+            /*
+             not in cache, let's change source to hot -observable, and return one instance from it
+             problem is, that before this observable is runned, there can be queries for this value from cache.
+             So, let's change this to hot-observable, and put that hot-observable into the cache.
+             And in first run, we change this hot observable to it's value.
+      
+             Javascript is asynchronous, so there is no need to worry some weird things that could happen in multithreaded languages.
+             */
+            console.log(cacheName, " not in cache");
+            var hotSource = source
+                .do(function (val) { return _this.cache.set(cacheName, new CachedItem(moduleName, cachePath, val)); })
+                .publishLast().refCount();
+            this.cache.set(cacheName, new CachedItem(moduleName, cachePath, hotSource, true));
+            this.checkCleanTimer();
+            return hotSource;
+        }
+        var cacheItem = this.cache.get(cacheName);
+        // if value is hotObservable, return it, otherwise create observable from value
+        if (cacheItem.isObservable) {
+            console.log(cacheName, " hot observable in cache ");
+            return cacheItem.value;
+        }
+        console.log(cacheName, " value in cache");
+        this.checkCleanTimer();
+        return rxjs_1.Observable.of(cacheItem.value);
+    };
+    CacheService.prototype.clean = function () {
+        this.cache.clear();
+        this.checkCleanTimer();
+    };
+    CacheService.prototype.cleanExpired = function () {
+        var _this = this;
+        this.cache.forEach(function (v, k) {
+            if (v.isExpired()) {
+                console.log(k, " Cache expired");
+                _this.cache.delete(k);
+            }
+        });
+        this.checkCleanTimer();
+    };
+    CacheService.prototype.checkCleanTimer = function () {
+        var _this = this;
+        if (this.cache.size > 0) {
+            if (!this.timerSubscription) {
+                console.log("adding clearing timer");
+                this.zone.runOutsideAngular(function () {
+                    _this.timerSubscription = _this.timerObservable.subscribe(function (v) {
+                        _this.cleanExpired();
+                    });
+                });
+            }
+        }
+        else {
+            if (this.timerSubscription) {
+                console.log("removing clearing timer");
+                this.timerSubscription.unsubscribe();
+            }
+        }
+    };
+    /**
+     *
+     * @param moduleName
+     * @param cachePath
+     * @param value
+     */
+    CacheService.prototype.set = function (moduleName, cachePath, value) {
+        var cacheName = this.generateCachename(moduleName, cachePath);
+        this.cache.set(cacheName, new CachedItem(moduleName, cachePath, value));
+    };
+    /**
+     * Get one value from cache.
+     *
+     * Now when there is this observablethingy. Make public afther rethinking this.
+     *
+     * @param moduleName
+     * @param cachePath
+     * @return {any|null} Null if nothing is in cache.
+     */
+    CacheService.prototype.get = function (moduleName, cachePath) {
+        var cacheName = this.generateCachename(moduleName, cachePath);
+        if (this.cache.has(cacheName) && this.cache.get(cacheName).expires.getTime() < Date.now()) {
+            this.cache.delete(cacheName);
+        }
+        if (this.cache.has(cacheName)) {
+            return this.cache.get(cacheName);
+        }
+        return null;
+    };
+    CacheService.prototype.generateCachename = function (moduleName, cachePath) {
+        return moduleName + "::" + cachePath;
+    };
+    CacheService = __decorate([
+        core_1.Injectable()
+    ], CacheService);
+    return CacheService;
+}());
+exports.CacheService = CacheService;

code/moya-angular/src/app/shared/services/cache.service.spec.ts

+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { CacheService } from './cache.service';
+
+describe('CacheService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [CacheService]
+    });
+  });
+
+  it('should ...', inject([CacheService], (service: CacheService) => {
+    expect(service).toBeTruthy();
+  }));
+});

code/moya-angular/src/app/shared/services/cache.service.ts

+import {Injectable, NgZone} from "@angular/core";
+import {Observable} from "rxjs/Observable";
+import 'rxjs/add/observable/timer';
+import {forkJoin} from "rxjs/observable/forkJoin";
+import "rxjs/add/operator/do";
+import "rxjs/add/operator/publishLast";
+import "rxjs/add/observable/of";
+import {Subscription} from "rxjs/Subscription";
+
+const DEFAULT_EXPIRE_MS = 300000; // 5min
+
+class CachedItem {
+
+  moduleName: string;
+  path: string;
+  value: any;
+  expires: Date;
+  isObservable: boolean;
+
+  constructor(moduleName: string, path: string, value: any, isObservable? : boolean) {
+    this.moduleName = moduleName;
+    this.path = path;
+    this.value = value;
+    this.expires = new Date();
+
+    this.expires.setTime(Date.now() +  DEFAULT_EXPIRE_MS);
+    this.isObservable = isObservable;
+  }
+
+  public isExpired(): boolean {
+    return this.expires.getTime() < Date.now();
+  }
+}
+
+
+/**
+ * Basic cacheService.
+ *
+ * First this was part of moyaRestService, but I thinked that if cache is too easy to use, someone will kill this application with it.
+ * So let's make it litlebit harder
+ */
+@Injectable()
+export class CacheService {
+
+  private timerSubscription : Subscription;
+  private timerObservable: Observable<any>;
+
+
+  private cache: Map<string, CachedItem>;
+  // TODO: timed clearup for cache to save memory
+
+
+  constructor(private zone : NgZone) {
+    this.cache = new Map<string, CachedItem>();
+
+    this.timerObservable = Observable.timer(30000, 30000); // afther 0.5min, every 0.5min.
+  }
+
+
+  /**
+   * This will return observable with value from cache, or cache value from your observable and return it in observable.
+   *
+   * example: return cacheService.cacheObservable("mymodule",<url>, http.get(<url>).map(v => v.json()));
+   *
+   * @param moduleName
+   * @param cachePath
+   * @param source: {Observable<any>} Observable where the values, which are cached, is coming from
+   * @return {Observable<any>}: if value is in cache, this is observable made from this value. Otherwise this is source observable.
+   */
+  public cacheObservable(moduleName: string, cachePath: string, source: Observable<any>): Observable<any> {
+    let cacheName = this.generateCachename(moduleName, cachePath);
+
+    if(this.cache.has(cacheName) && this.cache.get(cacheName).expires.getTime() < Date.now()) {
+      console.log(cacheName, " Expired version in cache");
+      this.cache.delete(cacheName);
+    }
+
+
+    if(!this.cache.has(cacheName)) {
+      /*
+       not in cache, let's change source to hot -observable, and return one instance from it
+       problem is, that before this observable is runned, there can be queries for this value from cache.
+       So, let's change this to hot-observable, and put that hot-observable into the cache.
+       And in first run, we change this hot observable to it's value.
+
+       Javascript is asynchronous, so there is no need to worry some weird things that could happen in multithreaded languages.
+       */
+
+      console.log(cacheName," not in cache");
+
+      let hotSource = source
+        .do(val => this.cache.set(cacheName, new CachedItem(moduleName,cachePath, val)))
+        .publishLast().refCount();
+
+      this.cache.set(cacheName, new CachedItem(moduleName,cachePath, hotSource, true));
+
+      this.checkCleanTimer();
+
+      return hotSource;
+    }
+
+
+
+    let cacheItem = this.cache.get(cacheName);
+
+    // if value is hotObservable, return it, otherwise create observable from value
+    if(cacheItem.isObservable) {
+      console.log(cacheName, " hot observable in cache ");
+      return cacheItem.value;
+    }
+
+    console.log(cacheName, " value in cache");
+
+    this.checkCleanTimer();
+    return Observable.of(cacheItem.value);
+  }
+
+
+  public clean(): void {
+    this.cache.clear();
+
+    this.checkCleanTimer();
+  }
+
+  public cleanExpired(): void {
+
+    this.cache.forEach((v,k) => {
+      if(v.isExpired()) {
+        console.log(k, " Cache expired");
+        this.cache.delete(k);
+      }});
+
+    this.checkCleanTimer();
+  }
+
+  private checkCleanTimer() {
+    if(this.cache.size > 0) {
+      if(!this.timerSubscription) {
+        console.log("adding clearing timer");
+
+        this.zone.runOutsideAngular(() => {
+          this.timerSubscription = this.timerObservable.subscribe(v => {
+            this.cleanExpired();
+          });
+        });
+
+      }
+    } else {
+      if(this.timerSubscription) {
+
+        console.log("removing clearing timer");
+        this.timerSubscription.unsubscribe();
+      }
+    }
+  }
+
+
+
+  /**
+   *
+   * @param moduleName
+   * @param cachePath
+   * @param value
+   */
+  private set(moduleName: string, cachePath: string, value: any): void {
+    let cacheName = this.generateCachename(moduleName, cachePath);
+
+    this.cache.set(cacheName, new CachedItem(moduleName,cachePath, value));
+  }
+
+  /**
+   * Get one value from cache.
+   *
+   * Now when there is this observablethingy. Make public afther rethinking this.
+   *
+   * @param moduleName
+   * @param cachePath
+   * @return {any|null} Null if nothing is in cache.
+   */
+  private get(moduleName: string, cachePath: string): CachedItem {
+    let cacheName = this.generateCachename(moduleName, cachePath);
+
+
+    if(this.cache.has(cacheName) && this.cache.get(cacheName).expires.getTime() < Date.now()) {
+      this.cache.delete(cacheName);
+    }
+
+    if(this.cache.has(cacheName)) {
+      return this.cache.get(cacheName);
+    }
+
+    return null;
+  }
+
+
+  private generateCachename(moduleName: string, cachePath: string): string {
+    return moduleName + "::" + cachePath;
+  }
+
+}

code/moya-angular/src/app/shared/services/moya-rest.service.spec.ts

+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { MoyaRestService } from './moya-rest.service';
+
+describe('MoyaRestService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MoyaRestService]
+    });
+  });
+
+  it('should ...', inject([MoyaRestService], (service: MoyaRestService) => {
+    expect(service).toBeTruthy();
+  }));
+});

code/moya-angular/src/app/shared/services/moya-rest.service.ts

+import { Injectable } from '@angular/core';
+import {Observable} from "rxjs/Observable";
+import {HttpClient, HttpResponse} from "@angular/common/http";
+import "rxjs/add/operator/catch";
+import "rxjs/add/observable/throw";
+
+
+@Injectable()
+export class MoyaRestService {
+
+
+  constructor(private http: HttpClient) { }
+
+
+  post(subUrl: string, body: any, pathParameters?: Map<string, string>): Observable<any>  {
+    return this.http.post(this.genUrl(subUrl, pathParameters), body)
+      .catch(this.handleException);
+  }
+
+  put(subUrl: string, body: any, pathParameters?: Map<string, string>): Observable<any> {
+    return this.http.put(this.genUrl(subUrl, pathParameters), body)
+      .catch(this.handleException);
+  }
+
+  delete(subUrl: string, pathParameters?: Map<string, string>): Observable<any>  {
+    return this.http.delete(this.genUrl(subUrl, pathParameters))
+      .catch(this.handleException);
+  }
+
+  get(subUrl: string, pathParameters?: Map<string, string>): Observable<any> {
+    return this.http.get(this.genUrl(subUrl, pathParameters))
+      .catch(this.handleException);
+  }
+
+
+  private genUrl(subUrl: string, urlParams?: Map<string, string>): string {
+
+    let suffix = "";
+
+    if(urlParams) {
+      urlParams.forEach(function(value: string, key: string) {
+        if(suffix.length <= 0) {
+          suffix = "?";
+        } else {
+          suffix += "&";
+        }
+
+        suffix += key + "=" + value;
+      });
+    }
+
+    return "/MoyaWeb/rest/" + subUrl + suffix; // <-- TODO: kauneista
+  }
+
+
+/*
+  private handleResponse(res: HttpResponse<any>) {
+
+    console.log(res);
+
+    // basicly, 200 statuscodes means success
+    if(!(res.status >= 200 && res.status <= 299 )) {
+      console.log("statuscode not between 200 and 299", res.status);
+
+      // next stop: handlerException
+      throw res;
+    }
+
+    return res;
+  }*/
+
+  private handleException(error: HttpResponse<any> | any) {
+
+    console.log("error on jira rest connection", error);
+
+    // TODO: add handlers to 403's and other "not logged in" or "invalid permissions"
+    // -statuscodes, and route them using some nice global parameter
+
+    return Observable.throw(error);
+  }
+
+
+}

code/moya-angular/src/app/shared/services/user.service.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 rxjs_1 = require("rxjs");
+var UserService = (function () {
+    function UserService(moyaRest, cacheService) {
+        this.moyaRest = moyaRest;
+        this.cacheService = cacheService;
+    }
+    UserService.prototype.get = function (id) {
+        if (!id || id < 0) {
+            return rxjs_1.Observable.throw("There should be userid");
+        }
+        var path = "v2/user/" + id;
+        return this.cacheService.cacheObservable("moya:UserService", path, this.moyaRest.get(path)
+            .do(function (v) { console.log("getting user outside of cache", path); })
+            .map(function (res) { return (res.json()); }));
+    };
+    UserService = __decorate([
+        core_1.Injectable()
+    ], UserService);
+    return UserService;
+}());
+exports.UserService = UserService;

code/moya-angular/src/app/shared/services/user.service.spec.ts

+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { UserService } from './user.service';
+
+describe('UserService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [UserService]
+    });
+  });
+
+  it('should ...', inject([UserService], (service: UserService) => {
+    expect(service).toBeTruthy();
+  }));
+});

code/moya-angular/src/app/shared/services/user.service.ts

+import {Injectable} from "@angular/core";
+import {User} from "../models/user.model";
+import {MoyaRestService} from "./moya-rest.service";
+import {CacheService} from "./cache.service";
+import {Observable} from "rxjs/Observable";
+
+
+@Injectable()
+export class UserService {
+
+  constructor(private moyaRest : MoyaRestService, private cacheService : CacheService) { }
+
+  public get(id: number): Observable<User> {
+
+    if(!id || id < 0) {
+      return Observable.throw("There should be userid");
+    }
+
+    let path = "v2/user/" + id;
+
+    return this.cacheService.cacheObservable("moya:UserService", path,
+      this.moyaRest.get(path)
+      .do(v => {console.log("getting user outside of cache", path)})
+      .map(res => (<User> res.body)));
+  }
+
+}

code/moya-angular/src/app/shared/services/viplist.service.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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator.throw(value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments)).next());
+    });
+};
+var core_1 = require('@angular/core');
+var rxjs_1 = require("rxjs");
+var ViplistService = (function () {
+    function ViplistService(moyaRestService, userService) {
+        this.moyaRestService = moyaRestService;
+        this.userService = userService;
+    }
+    /**
+     * get vips
+     * @param searchString: searchString, skip to return all vips
+     */
+    ViplistService.prototype.get = function (searchString) {
+        var _this = this;
+        if (!searchString) {
+            return this.moyaRestService.get("v3/vip/all")
+                .switchMap(function (res) { return rxjs_1.Observable.forkJoin.apply(rxjs_1.Observable, res.json().map(function (apiRow) { return _this.hostPopulator(apiRow); })); });
+        }
+        return this.moyaRestService.get("v3/vip/search/" + searchString)
+            .switchMap(function (v) { return rxjs_1.Observable.forkJoin.apply(rxjs_1.Observable, v.json().map(function (x) { return _this.hostPopulator(x); })); });
+    };
+    /**
+     * Delete vip.
+     *
+     * @param vip
+     * @return Observable
+     */
+    ViplistService.prototype.delete = function (vip) {
+        return __awaiter(this, void 0, Promise, function* () {
+            if (!vip.id)
+                throw new Error("TODO: errori, tyhmä vippi");
+            var res = yield this.moyaRestService.delete("v3/vip/" + vip.id)
+                .first()
+                .toPromise();
+            return res.ok;
+        });
+    };
+    /*
+      public deleteProm(vip: Vip): Promise<boolean> {
+    
+        if (!vip.id)
+          throw new Error("TODO: errori, tyhmä vippi");
+    
+        return this.moyaRestService.delete("v3/vip/" + vip.id)
+          .first()
+          .toPromise()
+          .then(r => r.ok);
+    
+      }
+    
+    */
+    ViplistService.prototype.getWithId = function (id) {
+        return this.moyaRestService.get("v3/vip/" + id)
+            .map(function (v) { return v.json(); });
+    };
+    ViplistService.prototype.create = function (vip) {
+        return this.moyaRestService.post("v3/vip/create", vip)
+            .map(function (v) { return v.json(); });
+    };
+    ViplistService.prototype.hostPopulator = function (rawVip) {
+        return this.userService.get(rawVip.hostId)
+            .map(function (u) { rawVip.host = u; return rawVip; });
+    };
+    ViplistService = __decorate([
+        core_1.Injectable()
+    ], ViplistService);
+    return ViplistService;
+}());
+exports.ViplistService = ViplistService;

code/moya-angular/src/app/shared/services/viplist.service.spec.ts

+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async, inject } from '@angular/core/testing';
+import { ViplistService } from './viplist.service';
+
+describe('ViplistService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ViplistService]
+    });
+  });
+
+  it('should ...', inject([ViplistService], (service: ViplistService) => {
+    expect(service).toBeTruthy();
+  }));
+});

code/moya-angular/src/app/shared/services/viplist.service.ts

+import {Injectable} from '@angular/core';
+import {MoyaRestService} from "./moya-rest.service";
+import {Vip} from "../models/vip.model";
+import {Response} from "@angular/http";
+import {User} from "../models/user.model";
+import {UserService} from "./user.service";
+import {Observable} from "rxjs/Observable";
+import "rxjs/add/operator/map";
+import "rxjs/add/operator/switchMap";
+import "rxjs/add/observable/forkJoin";
+import "rxjs/add/operator/first";
+import {HttpResponse} from "@angular/common/http";
+
+@Injectable()
+export class ViplistService {
+
+  constructor(private moyaRestService: MoyaRestService, private userService : UserService) {
+
+  }
+
+
+  /**
+   * get vips
+   * @param searchString: searchString, skip to return all vips
+   */
+  public get(searchString?: string): Observable<Array<Vip>> {
+
+    if (!searchString) {
+      return this.moyaRestService.get("v3/vip/all")
+        .switchMap(res => Observable.forkJoin(...res.map(apiRow => this.hostPopulator(apiRow))));
+    }
+
+    return this.moyaRestService.get("v3/vip/search/" + searchString)
+      .switchMap(v => Observable.forkJoin(...v.map(x => this.hostPopulator(x))));
+  }
+
+
+  /**
+   * Delete vip.
+   *
+   * @param vip
+   * @return Promise
+   */
+  public async delete(vip: Vip): Promise<boolean> {
+
+    if (!vip.id)
+      throw new Error("TODO: errori, tyhmä vippi");
+
+    let res: HttpResponse<any> = await this.moyaRestService.delete("v3/vip/" + vip.id)
+      .first()
+      .toPromise();
+
+    return res.ok;
+  }
+
+
+  public getWithId(id: number): Observable<Vip> {
+    return this.moyaRestService.get("v3/vip/" + id)
+
+  }
+
+
+  public create(vip: Vip): Observable<Vip> {
+    return this.moyaRestService.post("v3/vip/create", vip)
+
+  }
+
+  private hostPopulator(rawVip : any): Observable<Vip> {
+    return this.userService.get(rawVip.hostId)
+      .map((u: User) => {rawVip.host = u; return <Vip> rawVip });
+  }
+
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

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

+
+  <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>
+
+

code/moya-angular/src/app/test/test.component.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 TestComponent = (function () {
+    function TestComponent() {
+        this.counter = 0;
+    }
+    TestComponent.prototype.ngOnInit = function () {
+    };
+    TestComponent.prototype.addOne = function () {
+        this.counter++;
+    };
+    __decorate([
+        core_1.Input()
+    ], TestComponent.prototype, "counter", void 0);
+    TestComponent = __decorate([
+        core_1.Component({
+            selector: 'app-test',
+            templateUrl: './test.component.html',
+            styleUrls: ['./test.component.css']
+        })
+    ], TestComponent);
+    return TestComponent;
+}());
+exports.TestComponent = TestComponent;

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

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { TestComponent } from './test.component';
+
+describe('TestComponent', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TestComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import {Component, OnInit, Input} from '@angular/core';
+
+@Component({
+  selector: 'app-test',
+  templateUrl: './test.component.html',
+  styleUrls: ['./test.component.scss']
+})
+export class TestComponent implements OnInit {
+
+  @Input() counter: number;
+  constructor() {
+    this.counter = 0;
+  }
+
+  ngOnInit() {
+  }
+
+  addOne() {
+    this.counter++;
+  }
+
+}

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

+
+
+<div class="container-fluid">
+
+  <div class="row bg-primary text-white titlerow">
+    <div class="col">Isäntä</div>
+    <div class="col-3">Nimi</div>
+    <div class="col">Kuvaus</div>
+    <div class="col-4">Tuotteet</div>
+    <div class="col">Muokkaa</div>
+  </div>
+
+  <div  *ngFor="let vip of vips | async" class="row contentrow">
+
+
+      <div class="col">{{vip.host.firstname}}</div>
+      <div class="col-3"><b>{{vip.shortdescr}}</b></div>
+      <div class="col">{{vip.description}}</div>
+      <div class="col-4">
+        <div *ngFor="let p of vip.products" class="row">
+
+          <div style="display: inline-block;">{{p.name}}</div>
+          <div style="display: inline-block;">{{p.quantity}}</div>
+          <div style="display: inline-block; flex: 1;"> </div>
+          <div style="display: inline-block;"><button type="button" class="btn btn-default">Toimita</button></div>
+
+        </div>
+      </div>
+
+      <div class="col">todo</div>
+
+  </div>
+
+
+
+  <div  *ngFor="let vip of vips | async" class="row contentrow">
+
+
+    <div class="col">{{vip.host.firstname}}</div>
+    <div class="col-3"><b>{{vip.shortdescr}}</b></div>
+    <div class="col">{{vip.description}}</div>
+    <div class="col-4">
+      <div *ngFor="let p of vip.products" class="row">
+
+        <div style="display: inline-block;">{{p.name}}</div>
+        <div style="display: inline-block;">{{p.quantity}}</div>
+        <div style="display: inline-block; flex: 1;"> </div>
+        <div style="display: inline-block;"><button type="button" class="btn btn-default">Toimita</button></div>
+
+      </div>
+    </div>
+
+    <div class="col">todo</div>
+
+  </div>
+
+
+</div>
+<br /><br />
+<br /><br />
+<br /><br />
+
+<!--
+
+<table class="table table-striped">
+
+  <thead>
+  <tr class="bg-primary text-white">
+    <th>Isäntä</th>
+    <th>Nimi</th>
+    <th>Kuvaus</th>
+    <th>Tuotteet</th>
+    <th>Muokkaa</th>
+  </tr>
+  </thead>
+  <tbody>
+    <tr  *ngFor="let vip of vips | async" >
+
+      <td class="">Kekkonen kekkonen</td>
+      <td class=""><b>{{vip.shortdescr}}</b></td>
+      <td class="">{{vip.description}}</td>
+      <td class="">
+        <div *ngFor="let p of vip.products" class="productsRow">
+
+          <div>{{p.name}}</div>
+          <div>{{p.quantity}}</div>
+          <div style="flex: 1;"> </div>
+          <div><button type="button" class="btn btn-default">Toimita</button></div>
+
+        </div>
+      </td>
+
+      <td class="">todo</td>
+
+    </tr>
+
+  </tbody>
+
+</table>
+-->

code/moya-angular/src/app/viplist/viplist.component.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 ViplistComponent = (function () {
+    function ViplistComponent(viplistService) {
+        this.viplistService = viplistService;
+    }
+    ViplistComponent.prototype.ngOnInit = function () {
+        this.vips = this.viplistService.get();
+    };
+    ViplistComponent = __decorate([
+        core_1.Component({
+            selector: 'moya-viplist',
+            templateUrl: './viplist.component.html',
+            styleUrls: ['./viplist.component.css']
+        })
+    ], ViplistComponent);
+    return ViplistComponent;
+}());
+exports.ViplistComponent = ViplistComponent;

code/moya-angular/src/app/viplist/viplist.component.scss

+.row {
+  display: flex;
+  flex-direction: row;
+}
+
+.productsRow {
+  display: flex;
+  flex-direction: row;
+}
+
+.productsRow:not(:last-child) {
+
+  margin-bottom: 3px;
+  border-bottom: 1px solid darkgray;
+  padding-bottom: 3px;
+
+}
+
+.kissa:nth-child(even) {
+  background-color: grey;
+}

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

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ViplistComponent } from './viplist.component';
+
+describe('ViplistComponent', () => {
+  let component: ViplistComponent;
+  let fixture: ComponentFixture<ViplistComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ViplistComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViplistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+import {Component, NgZone, OnInit} from '@angular/core';
+import {Observable} from "rxjs/Observable";
+import {Vip} from "../shared/models/vip.model";
+import {ViplistService} from "../shared/services/viplist.service";
+
+@Component({
+  selector: 'moya-viplist',
+  templateUrl: './viplist.component.html',
+  styleUrls: ['./viplist.component.scss']
+})
+export class ViplistComponent implements OnInit {
+
+  vips: Observable<Array<Vip>>;
+
+  constructor(private viplistService: ViplistService) {
+  }
+
+  ngOnInit() {
+    this.vips = this.viplistService.get();
+  }
+
+}

code/moya-angular/src/assets/moya-logo.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="695px" height="695px" viewBox="0 0 695 695" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>Moya-logo</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <circle id="path-1" cx="347.5" cy="347.5" r="347.5"></circle>
+    </defs>
+    <g id="Exportjutut" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Moya-logo">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="bg" fill="#FFFFFF" xlink:href="#path-1"></use>
+            <g id="M" mask="url(#mask-2)">
+                <g transform="translate(83.548905, 190.045179)">
+                    <polygon id="Path-3" fill="#4B4C53" points="449.867332 270.902613 517.324914 270.902613 406.84118 53.2464587 371.719459 117.206946"></polygon>
+                    <polygon id="Path-3-Copy-2" fill="#4B4C53" points="223.003097 270.974179 289.369783 270.974179 178.108226 54.5480655 145.166718 118.284879"></polygon>
+                    <polygon id="Path-4" fill="#69B1A1" points="289.323585 270.910137 406.906864 53.2748731 377.342132 0.153414611 370.090013 0.153414611 258.195348 210.246315"></polygon>
+                    <polygon id="Path-4-Copy" fill="#69B1A1" points="64.9703444 270.836635 90.5241976 222.417957 58.5326149 161.068771 0.713589374 270.836635"></polygon>
+                    <polygon id="Path-4-Copy-2" fill="#69B1A1" points="123.667349 159.935465 178.141888 54.53719 150.541837 0.0852033358 143.317376 0.0852033358 90.7363389 99.801993"></polygon>
+                    <polygon id="Path-3-Copy" fill="#4B4C53" points="341.497382 270.837809 406.048634 270.837809 267.612338 0.141904677 260.333163 0.141904677 229.691259 51.3758733"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

code/moya-angular/src/environments/environment.hmr.ts

+
+export const environment = {
+  production: false,
+  hmr: true
+};

code/moya-angular/src/environments/environment.prod.ts

+
+export const environment = {
+  production: true,
+  hmr: false
+};

code/moya-angular/src/environments/environment.ts

+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `angular-cli.json`.
+
+export const environment = {
+  production: false,
+  hmr: false
+};