Commit 200495bc by Tuukka Kivilahti

ohjelman runkoa

1 parent a75bd57c
Pipeline #3 passed
in 0 seconds
Showing with 585 additions and 77 deletions
...@@ -6,21 +6,20 @@ ...@@ -6,21 +6,20 @@
### devaus workflow ### 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/ Tämän jälkeen kirjaa selaimesi sisään moyaan: http://localhost:4200/MoyaWeb/ ja surffata softaan: http://localhost:4200/MoyaNG/
### HMR ### HMR
Hot Module replacement. HMR -asetukset löytyy, niistä ei nykyisellään ole mitään hyötyä. Saa poistaa.
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`
## Koodijuttuja ## Koodijuttuja
......
...@@ -16,12 +16,14 @@ ...@@ -16,12 +16,14 @@
"@angular/animations": "^4.1.2", "@angular/animations": "^4.1.2",
"@angular/common": "^4.1.2", "@angular/common": "^4.1.2",
"@angular/compiler": "^4.1.2", "@angular/compiler": "^4.1.2",
"@angular/compiler-cli": "^4.1.2",
"@angular/core": "^4.1.2", "@angular/core": "^4.1.2",
"@angular/forms": "^4.1.2", "@angular/forms": "^4.1.2",
"@angular/http": "^4.1.2", "@angular/http": "^4.1.2",
"@angular/material": "^2.0.0-beta.1", "@angular/material": "^2.0.0-beta.1",
"@angular/platform-browser": "^4.1.2", "@angular/platform-browser": "^4.1.2",
"@angular/platform-browser-dynamic": "^4.1.2", "@angular/platform-browser-dynamic": "^4.1.2",
"@angular/platform-server": "^4.1.2",
"@angular/router": "^4.1.2", "@angular/router": "^4.1.2",
"bootstrap": "^4.0.0-alpha.6", "bootstrap": "^4.0.0-alpha.6",
"core-js": "^2.4.1", "core-js": "^2.4.1",
......
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();
});
});
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() {
}
}
nav a.active { #top-container {
color: red; 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;
} }
<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>
...@@ -3,6 +3,8 @@ import {Router} from "@angular/router"; ...@@ -3,6 +3,8 @@ import {Router} from "@angular/router";
declare var window: any; declare var window: any;
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
...@@ -10,9 +12,6 @@ declare var window: any; ...@@ -10,9 +12,6 @@ declare var window: any;
}) })
export class AppComponent { export class AppComponent {
counter = 4;
constructor(private router : Router, private zone : NgZone) { constructor(private router : Router, private zone : NgZone) {
window.angularRoute = (url => { window.angularRoute = (url => {
...@@ -20,18 +19,6 @@ export class AppComponent { ...@@ -20,18 +19,6 @@ export class AppComponent {
router.navigateByUrl(url); 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!';
} }
...@@ -9,24 +9,63 @@ import {AlertModule} from "ng2-bootstrap"; ...@@ -9,24 +9,63 @@ import {AlertModule} from "ng2-bootstrap";
import {MoyaRestModule} from "moya-angular-common"; import {MoyaRestModule} from "moya-angular-common";
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import {TestComponent} from "./test/test.component";
import { OldMoyaComponent } from './old-moya/old-moya.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 = [ const appRoutes: Routes = [
{ path: 'vip/viplist', component: ViplistComponent }, { path: 'user',
{ path: 'test', component: TestComponent }, children: [
{ path: 'old', pathMatch: 'prefix',component: OldMoyaComponent } { 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({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
ViplistComponent, ViplistComponent,
TestComponent,
OldMoyaComponent, OldMoyaComponent,
SafePipe, SafePipe,
I18nDirective,
TestComponent,
TopMenuComponent,
LeftMenuComponent,
AdminMenuComponent,
InfoMenuComponent,
UserMenuComponent,
UserComponent,
InfoComponent,
AdminComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
......
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);
}
}
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();
});
});
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() {
}
}
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();
});
});
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() {
}
}
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'} },
]},
];
}
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();
});
});
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() {
}
}
.leftNavGroup a.active {
color: red;
}
#leftNav {
display: flex;
flex-direction: column;
}
.leftNavGroup {
display: flex;
flex-direction: column;
}
<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>
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();
});
});
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() {
}
}
<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>
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();
});
});
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() {
}
}
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();
});
});
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() {
}
}
import {MenuItem} from "./menu-item.model";
export interface MenuGroup {
name: string;
items: MenuItem[];
}
export interface MenuItem {
path: string;
name: string;
params?: any;
}
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import {Location, LocationStrategy, HashLocationStrategy, PathLocationStrategy} from "@angular/common"; 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"; import {Observable} from "rxjs";
@Component({ @Component({
...@@ -28,22 +28,23 @@ export class OldMoyaComponent implements OnInit { ...@@ -28,22 +28,23 @@ export class OldMoyaComponent implements OnInit {
this.frameUrl = "/MoyaWeb/" + x; this.frameUrl = "/MoyaWeb/" + x;
} }
}); });
} }
ngOnInit() { } ngOnInit() { }
changeUrl() { 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) { if(tmpFrameUrl.length > 1) {
this.location.replaceState("/old?p=" + tmpUrl[1]); this.location.replaceState(this.location.path(false).split("?", 1)[0] + "?p=" + tmpFrameUrl[1]);
} }
this.height = this.iframe.nativeElement.contentWindow.document.body.scrollHeight + "px"; this.height = this.iframe.nativeElement.contentWindow.document.body.scrollHeight + "px";
console.log(this.height);
} }
} }
"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;
"use strict";
describe('SafePipe', function () {
it('create an instance', function () {
});
});
<p>
HMR TEST <span i18n>This is testfile</span>
<br /> <br />
<br /> <br />
<br /> <br />
<h1 i18n>Counter value</h1>
{{counter}} {{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>
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();
});
});
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() {
}
}
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!