Skip to content

Codecrew / Moya

Go to a project
Commit 73bb04a9 by Tuukka Kivilahti
Options

moar changes

1 parent 492d230f
Inline Side-by-side
Showing with 152 additions and 173 deletions
code/moya-angular/README.md
......@@ -6,45 +6,51 @@
## Devaus
### devaus workflow
### Testaus
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.
Kehittämisen nopeuttamiseksi kannattaa frontti käynnistää erikseen ja ajaa sitä proxyn läpi halutulle backendille.
ng-palvelimessa on bugi, ja se ei osaa jakaa tavaraa muusta hakemistosta kuin /.
* `moyaproxy.conf.json` sisältää proxyasetukset localhostin porttiin 8080.
* `test-moya-proxy.conf.json` sisältää proxyasetukset ng.test.moya.fi:n
Käyttö:
`npm run start`
* `npm run localhost` : Käynnistä frontend paikallista palvelinta vasten (localhost:8080)
* `npm run testserver` : Käynnistä frontend meidän testipalvelinta vasten (https://ng.test.moya.fi)
Tämän jälkeen surffaa selaimellasi sisään moyaan: `http://localhost:4200/MoyaWeb/`
Tämän jälkeen surffaa selaimellasi moyaan: `http://localhost:4200/`
### HMR
### Esteettömyys
HMR -asetukset löytyy, niistä ei nykyisellään ole mitään hyötyä. Saa poistaa.
#### Tabindex
Tehtyjä sivuja pitää kokeilla myös surffaamalla niitä läpi tabilla. Jos järjestys on outo, niin tabindex -elementti on avuksi.
Sivun menuvalikot käyttävät indexejä 10:n alta. (8: Login & kieli, 9: ylämenu, 10: vasenmenu).
#### click
Jos pistät linkkiin pelkän (click) -tagin, sitä ei voi painaa näppäimistöllä. (esim: `<a (click)=...><img>...</>`), Tyhjällä `[routerLink]=""` -tagilla saat kerrottua selaimelle "tähän voi mennä ja tätä voi painaa".
## Koodijuttuja
### Muuta
Jos tulee muita järkeviä kokonaisuuksia, joita voi käyttää muualla, jaa omaan moduuliinsa.
### Koodaustyyli
## Hakemistohierarkia
Meillä on käytössä kohtuu tiukka lintteri, ennen committamista kannattaa ajaa `ng lint` ja korjata virheet. `ng lint moya-angular --fix` on ystävämme.
## Hakemistohierarkia
* app
* modules `as`
* viplist
* viplist-manager.module
* viplist-manager
* viplist-info.component
* viplist-admin.component
* components `Componentit joidenka ei ole järkeä olla omia lazyloadattavia moduuleita`
* modules `Kokonaisuuksia jotka on järkeä jakaa omaksi lazyloadattavaksi kokonaisuudekseen.`
* viplist `Esimerkki vain info ja admin -puoella näkyvästä vippilista -moduulista`
* viplist.module
* info
* info-viplist-page.component `Infopuolen landing -sivu. Tämä on routing component info -vippilistasta`
* admin
* admin-viplist-page.component
* models
* viplist.model
* pizza
* pizza-user
* pizza `Esimerkki moduulista joka näkyy kaikilla puolilla`
* pizza-user
* pizza-user.component
* pizza-user.service
* pizza-user.module
......@@ -57,13 +63,14 @@ Jos tulee muita järkeviä kokonaisuuksia, joita voi käyttää muualla, jaa oma
* pizza-list.component (shared for user / admin pizza)
* models
* pizza.model
* shared
* shared `Resurssit jotka ovat käytössä vähän kaikkialla. Esim. käyttäjää on turha jakaa minkään erillisen moduulin alle`
* components
* services
* models
* auth
##Routing
Tämä pitää vielä miettä läpi
* info
* info routing johon tulee pizza-user.module LL
......@@ -74,58 +81,6 @@ Jos tulee muita järkeviä kokonaisuuksia, joita voi käyttää muualla, jaa oma
* pizza-user.component & pizza-user.service
## OLD PLAN
* 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
* info-viplist-page.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. Tänne voi myös pistää älykkäitä pieniä komponentteja `
* viplist
* list.component.ts
* add.component.ts
* moya-locale
* moya-locale.service.ts
* moya-locale.model.ts `model -tiedosto joka on käytössä vaan moya-locale -servicessä`
* modules `Kokonaiset, monessa paikassa olevat 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
......@@ -157,38 +112,10 @@ Integraatio jne. testit, aloitteliat ei riko asioita niin todennäköisesti.
### WebPack ja buildin minimointi
aot-kääntäminen ja siihen comperssointia jne.
### HMR
HMR -asetukset löytyy, niistä ei nykyisellään ole mitään hyötyä. Saa poistaa.
# 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/moyaproxy.conf.json deleted 100644 → 0
{
"/MoyaWeb": {
"target": "http://localhost:8080",
"secure": false
}
}
code/moya-angular/package.json
......@@ -5,7 +5,8 @@
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config=moyaproxy.conf.json --base-href=/ && ng lint",
"localhost": "ng serve --proxy-config=localhost-moyaproxy.conf.json --base-href=/",
"testserver": "ng serve --proxy-config=test-moyaproxy.conf.json --base-href=/",
"build": "ng build",
"aot": "ng build --aot",
"test": "ng test",
......
code/moya-angular/src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import {Routes, RouterModule, PreloadAllModules, NoPreloading} from '@angular/router';
import { LoginComponent } from './modules/login/login.component';
import {FrontpageComponent} from './components/frontpage/frontpage.component';
import {LoginPageComponent} from "./modules/login/login-page/login-page.component";
const APP_ROUTES: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'login', component: LoginPageComponent },
{ path: 'viplist', loadChildren: 'app/modules/viplist/viplist.module#ViplistModule' },
{ path: 'old', loadChildren: 'app/modules/old-moya/old-moya.module#OldMoyaModule' },
{ path: 'index', component: FrontpageComponent },
......
code/moya-angular/src/app/app.component.html
......@@ -6,6 +6,7 @@
<div id="contentarea">
<div id="topbar">
<moya-top-menu></moya-top-menu>
<button mat-raised-button (click)="openLoginDialog()" tabindex="8">{{ "login.login" | translate}}</button>
<moya-locale></moya-locale>
</div>
<div id="content">
......
code/moya-angular/src/app/app.component.ts
import {Component, NgZone} from '@angular/core';
import {Router} from '@angular/router';
import {MatDialog, MatDialogConfig} from "@angular/material";
import {LoginComponent} from "./modules/login/login-component/login.component";
declare var window: any;
......@@ -10,7 +12,7 @@ declare var window: any;
})
export class AppComponent {
constructor(private router: Router, private zone: NgZone) {
constructor(private router: Router, private zone: NgZone, private dialog: MatDialog) {
window.angularRoute = (url => {
zone.run(() => {
......@@ -20,5 +22,25 @@ export class AppComponent {
}
openLoginDialog(): void {
let conf = new MatDialogConfig();
conf.autoFocus = true;
/*conf.height = "800px";
conf.width = "500px";*/
let dialogRef = this.dialog.open(LoginComponent, conf);
dialogRef.componentInstance.loginEvent.subscribe((success) => {
if(success) {
dialogRef.close();
} else {
dialogRef.close();
this.router.navigateByUrl("/login");
}
});
}
}
code/moya-angular/src/app/app.module.ts
......@@ -19,13 +19,15 @@ import { FrontpageComponent } from './components/frontpage/frontpage.component';
import {HttpLink, HttpLinkModule} from 'apollo-angular-link-http';
import {APOLLO_OPTIONS, ApolloModule} from 'apollo-angular';
import {createApollo} from './shared/config/moya.config';
import {MatButtonModule} from "@angular/material";
import {LoginComponent} from "./modules/login/login-component/login.component";
@NgModule({
declarations: [
AppComponent,
TopMenuComponent,
MoyaLocaleComponent,
FrontpageComponent
FrontpageComponent,
],
imports: [
BrowserModule,
......@@ -34,6 +36,7 @@ import {createApollo} from './shared/config/moya.config';
HttpClientModule,
LoginModule,
LeftMenuModule,
MatButtonModule,
ApolloModule,
......
code/moya-angular/src/app/components/moya-locale/moya-locale.component.html
<div id="flagBond">
<img src="assets/Flag_of_Finland.svg" [className]="(fiSelected)? 'disabledFlag':'flag' "height="20px" (click)="selectFinnish()" />
<img src="assets/Flag_of_Britain.svg" [className]="(enSelected)? 'disabledFlag':'flag'" height="20px" (click)="selectEnglish()" />
<img src="assets/Flag_of_Sweden.svg" [className]="(svSelected)? 'disabledFlag':'flag'" height="20px" (click)="selectSwedish()" />
<a (click)="selectFinnish()" [routerLink]="" tabindex="8"><img src="assets/Flag_of_Finland.svg" [className]="(fiSelected)? 'disabledFlag':'flag' "height="20px" alt="Suomeksi {{ (fiSelected)? 'valittu':'' }}" /></a>
<a (click)="selectEnglish()" [routerLink]="" tabindex="8"><img src="assets/Flag_of_Britain.svg" [className]="(enSelected)? 'disabledFlag':'flag'" height="20px" alt="In english {{ (enSelected)? 'selected':'' }}" /></a>
<a (click)="selectSwedish()" [routerLink]="" tabindex="8" ><img src="assets/Flag_of_Sweden.svg" [className]="(svSelected)? 'disabledFlag':'flag'" height="20px" alt="Svenska {{ (svSelected)? 'vald':'' }}" /></a>
</div>
code/moya-angular/src/app/menu/top-menu/top-menu.component.html
<nav id="topNav">
<a class="topNavItem" id="userTopNav" routerLink="/index" routerLinkActive="active" translate>menu.top.user</a>
<a class="topNavItem" id="infoTopNav" routerLink="/old/info" routerLinkActive="active" [queryParams]="{p: 'useradmin/list.jsf'}" translate>menu.top.info</a>
<a class="topNavItem" id="adminTopNav" routerLink="/old/admin" routerLinkActive="active" [queryParams]="{p: 'product/list.jsf'}" translate>menu.top.admin</a>
<a tabindex="9" class="topNavItem" id="userTopNav" routerLink="/index" routerLinkActive="active" translate>menu.top.user</a>
<a tabindex="9" class="topNavItem" id="infoTopNav" routerLink="/old/info" routerLinkActive="active" [queryParams]="{p: 'useradmin/list.jsf'}" translate>menu.top.info</a>
<a tabindex="9" class="topNavItem" id="adminTopNav" routerLink="/old/admin" routerLinkActive="active" [queryParams]="{p: 'product/list.jsf'}" translate>menu.top.admin</a>
</nav>
code/moya-angular/src/app/modules/login/login-component/login.component.html 0 → 100644
<form class="loginarea" #logindetails="ngForm" (ngSubmit)="login(logindetails)" >
<mat-form-field>
<input matInput ngModel name="username" placeholder="{{ 'user.username' | translate }}">
</mat-form-field>
<mat-form-field>
<input matInput type="password" ngModel name="password" placeholder="{{ 'user.password' | translate }}">
</mat-form-field>
<button type="submit" mat-button color="primary" >{{ 'login.login' | translate }}</button>
<span *ngIf="loginError" class="loginError">{{ 'login.error'|translate }}</span>
<span *ngIf="loginOk" class="loginOk"> {{ 'login.ok'|translate }}</span>
<span *ngIf="submitting" class="loginInProgress"> {{ 'login.submitting'|translate }}</span>
</form>
code/moya-angular/src/app/modules/login/login.component.ts → code/moya-angular/src/app/modules/login/login-component/login.component.ts
import { Component, OnInit } from '@angular/core';
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {TranslatePipe} from '@ngx-translate/core';
import {SessionServiceService} from '../../shared/services/session-service.service';
import {SessionServiceService} from '../../../shared/services/session-service.service';
import {FormGroup, NgForm} from "@angular/forms";
......@@ -12,23 +13,34 @@ import {SessionServiceService} from '../../shared/services/session-service.servi
})
export class LoginComponent implements OnInit {
username: string = "";
password: string = "";
@Output()
loginEvent = new EventEmitter<boolean>();
loginError = false;
loginOk = false;
submitting = false;
constructor(private sessionService: SessionServiceService) { }
ngOnInit() {
this.loginError = this.loginOk = this.submitting = false;
}
login() {
this.sessionService.doLogin(this.username, this.password).subscribe((x) => {
this.loginError = false;
login(userDetails: NgForm) {
this.loginError = this.loginOk = false;
this.submitting = true;
this.sessionService.doLogin(userDetails.value.username, userDetails.value.password).subscribe((x) => {
this.loginError = this.loginOk = this.submitting = false;
this.loginOk = true;
this.loginEvent.emit(true);
}, (error) => {
this.loginError = this.loginOk = this.submitting = false;
this.loginError = true;
this.loginEvent.emit(false);
});
}
......
code/moya-angular/src/app/modules/login/login-routing.module.ts deleted 100644 → 0
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login.component';
const routes: Routes = [
{ path: '', component: LoginComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class LoginRoutingModule { }
code/moya-angular/src/app/modules/login/login.component.html deleted 100644 → 0
<div class="loginarea">
<mat-form-field>
<input matInput [(ngModel)]="username" placeholder="{{ 'user.username' | translate }}">
</mat-form-field>
<mat-form-field>
<input matInput type="password" [(ngModel)]="password" placeholder="{{ 'user.password' | translate }}">
</mat-form-field>
<button mat-button (click)="login()" >{{ 'login.login' | translate }}</button>
<span *ngIf="loginError">ERROR</span>
<span *ngIf="loginOk">OK</span>
</div>
code/moya-angular/src/app/modules/login/login.module.ts
import { LoginRoutingModule } from './login-routing.module';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {LoginComponent} from './login.component';
import {MatButtonModule, MatFormFieldModule, MatInputModule} from '@angular/material';
import {MatButtonModule, MatCardModule, MatDialogModule, MatFormFieldModule, MatInputModule, MatToolbarModule} from '@angular/material';
import {TranslateModule} from '@ngx-translate/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule} from "@angular/forms";
import {FormsModule} from '@angular/forms';
import { LoginPageComponent } from './login-page/login-page.component';
import {LoginComponent} from './login-component/login.component';
import { LoginDialogComponent } from './login-dialog/login-dialog.component';
@NgModule({
imports: [
CommonModule,
LoginRoutingModule,
MatFormFieldModule,
MatInputModule,
MatButtonModule,
TranslateModule,
BrowserAnimationsModule,
FormsModule,
MatCardModule,
MatDialogModule,
MatToolbarModule,
],
declarations: [LoginComponent],
entryComponents: [LoginComponent],
declarations: [LoginComponent, LoginPageComponent, LoginDialogComponent],
exports: [
LoginComponent
]
......
code/moya-angular/src/app/shared/services/session-service.service.ts
......@@ -2,11 +2,13 @@ import {Injectable} from '@angular/core';
import gql from 'graphql-tag';
import {Permissions} from '../models/permissions.model';
import {Apollo, QueryRef} from 'apollo-angular';
import {Observable} from 'rxjs';
import {Observable, Observer} from 'rxjs';
import {MOYA_BASE_URL, MOYA_REST_URL} from '../config/moya.config';
import {map, share} from 'rxjs/operators';
import {Vip} from '../../modules/viplist/models/vip.model';
import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
import {EventUser} from "../models/event-user.model";
const __REFRESH_TIME_MINUTES = 5;
......@@ -43,8 +45,12 @@ export class SessionServiceService {
private permissionsObservable: Observable<Permissions>;
private permissionsApollo: QueryRef<ApiPermissionRoot>;
private currentuserObservable: Observable<EventUser>;
private currentuserObserver: Observer<EventUser>;
constructor(private apollo: Apollo, private http: HttpClient) {
// Permissions apollo call.
// rewrite permissions from API -format to moya-angular -format
//
// From:
......@@ -56,12 +62,28 @@ export class SessionServiceService {
this.permissionsObservable = this.permissionsApollo.valueChanges
.pipe(map((perms) => perms.data.currentuser.permissions
.reduce((permObject, perm) => (permObject[perm.feature] = {'ADMIN': perm.admin, 'USER': perm.user, 'INFO': perm.info}), {}) as Permissions));
// currentUserObservable
Observable.create()
this.currentuserObservable = this.http.get<EventUser>(MOYA_REST_URL + "/v2/user/current").pipe(share());
}
public getPermissions(): Observable<Permissions> {
return this.permissionsObservable;
}
public getCurrentUser() {
}
public updateCurrentUser() {
this.currentuserObservable.
}
/**
* Check loginerrors from returned observable
*
......@@ -71,8 +93,8 @@ export class SessionServiceService {
public doLogin(username: string, password: string): Observable<Object> {
let params = new HttpParams();
params = params.set("username", username);
params = params.set("password", password);
params = params.set('username', username);
params = params.set('password', password);
const apolloObservable = this.http.post(MOYA_REST_URL + '/user/auth', params, {
......@@ -87,6 +109,7 @@ export class SessionServiceService {
this.permissionsApollo.refetch();
});
return apolloObservable;
}
......
code/moya-angular/src/assets/i18n/fi.json
......@@ -9,7 +9,11 @@
},
"login": {
"login": "Kirjaudu"
"login": "Kirjaudu",
"error": "Virhe sisäänkirjautumisessa",
"ok": "Kirjautuminen onnistui",
"title": "Kirjaudu",
"submitting": "Kirjaudutaan"
},
"general": {
......
code/moya-angular/src/styles.scss
......@@ -2,6 +2,7 @@
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
/*@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';*/
body {
background-color: #f2f3f9;
......
code/moya-angular/test-moya-proxy.conf.json deleted 100644 → 0
{
"/MoyaWeb": {
"target": "https://ng.test.moya.fi",
"secure": true,
"headers": {"host":"ng.test.moya.fi" }
}
}
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!