Commit d3586d07 by Riina Antikainen

Almost done routing

1 parent 1f81dba7
...@@ -22,7 +22,7 @@ import { NewEventComponent } from './organization/new-event/new-event.component' ...@@ -22,7 +22,7 @@ import { NewEventComponent } from './organization/new-event/new-event.component'
RouterModule.forRoot([ RouterModule.forRoot([
{path: 'new-organization', component: NewOrganizationComponent}, {path: 'new-organization', component: NewOrganizationComponent},
{path: 'organization', component: OrganizationComponent}, {path: 'organization', component: OrganizationComponent},
{path: 'new-event', component: NewEventComponent}, {path: 'new-event/:id', component: NewEventComponent},
{path: '', redirectTo: 'organization', pathMatch: 'full'} {path: '', redirectTo: 'organization', pathMatch: 'full'}
], { useHash: true}) ], { useHash: true})
], ],
......
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
\ No newline at end of file
import { Component, OnInit, Input, SimpleChanges } from '@angular/core'; import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
import { EventsService } from './event-service.service'; import { EventsService } from './event-service.service';
import { OnChanges } from '@angular/core/src/metadata/lifecycle_hooks'; import { OnChanges } from '@angular/core/src/metadata/lifecycle_hooks';
import { Organization } from '../organization-list/organization-list.component';
@Component({ @Component({
selector: 'moya-event-list', selector: 'moya-event-list',
...@@ -8,7 +9,7 @@ import { OnChanges } from '@angular/core/src/metadata/lifecycle_hooks'; ...@@ -8,7 +9,7 @@ import { OnChanges } from '@angular/core/src/metadata/lifecycle_hooks';
styleUrls: ['./event-list.component.scss'] styleUrls: ['./event-list.component.scss']
}) })
export class EventListComponent implements OnInit, OnChanges { export class EventListComponent implements OnInit, OnChanges {
@Input() organization: string; @Input() organization: Organization;
public events: any; public events: any;
constructor(private appService: EventsService) { constructor(private appService: EventsService) {
...@@ -19,12 +20,13 @@ export class EventListComponent implements OnInit, OnChanges { ...@@ -19,12 +20,13 @@ export class EventListComponent implements OnInit, OnChanges {
} }
ngOnInit() { ngOnInit() {
console.log(this.organization); console.log('testi', this.organization.name);
this.events = this.appService.get(this.organization); this.events = this.appService.get(this.organization.name);
} }
ngOnChanges(changes: SimpleChanges): void { ngOnChanges(changes: SimpleChanges): void {
console.log(changes); console.log('toimii', changes, this.organization.name);
this.events = this.appService.get(changes.organization.currentValue); this.events = this.appService.get(changes.organization.currentValue);
console.log('ei toi');
} }
} }
...@@ -9,5 +9,5 @@ ...@@ -9,5 +9,5 @@
<input matInput required placeholder="Url" formControlName="url"> <input matInput required placeholder="Url" formControlName="url">
</mat-form-field> </mat-form-field>
<button mat-button type="submit">Submit</button> <button mat-button (click)='onSubmit()'>Submit</button>
</form> </form>
\ No newline at end of file
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms'; import { FormControl, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
@Component({ @Component({
selector: 'moya-new-event', selector: 'moya-new-event',
...@@ -13,7 +14,7 @@ export class NewEventComponent implements OnInit { ...@@ -13,7 +14,7 @@ export class NewEventComponent implements OnInit {
url: new FormControl() url: new FormControl()
}); });
constructor() { } constructor(private _router: Router) { }
ngOnInit() { ngOnInit() {
} }
...@@ -23,6 +24,7 @@ export class NewEventComponent implements OnInit { ...@@ -23,6 +24,7 @@ export class NewEventComponent implements OnInit {
'name': this.eventForm.get('name').value, 'name': this.eventForm.get('name').value,
'url': this.eventForm.get('url').value, 'url': this.eventForm.get('url').value,
}; };
this._router.navigate(['/organization']);
} }
} }
<mat-form-field> <mat-form-field>
<mat-select placeholder="Organization" [(ngModel)]="selectedValue" (ngModelChange)="onChange($event)"> <mat-select placeholder="Organization" [(ngModel)]="selectedValue" (ngModelChange)="onChange($event)">
<mat-option *ngFor="let organization of organizations" value={{organization.name}}>{{organization.name}}</mat-option> <mat-option *ngFor="let organization of organizations" [value]="organization">{{organization.name}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
\ No newline at end of file
import { OrganizationComponent } from './../organization.component';
import { EventsService } from './../event-list/event-service.service'; import { EventsService } from './../event-list/event-service.service';
import { Component, OnInit, Output} from '@angular/core'; import { Component, OnInit, Output} from '@angular/core';
import {OrganizationListService} from './organization-list.service'; import {OrganizationListService} from './organization-list.service';
import { EventEmitter } from '@angular/core'; import { EventEmitter } from '@angular/core';
@Component({ @Component({
selector: 'moya-organization-list', selector: 'moya-organization-list',
templateUrl: './organization-list.component.html', templateUrl: './organization-list.component.html',
...@@ -11,15 +11,15 @@ import { EventEmitter } from '@angular/core'; ...@@ -11,15 +11,15 @@ import { EventEmitter } from '@angular/core';
}) })
export class OrganizationListComponent implements OnInit { export class OrganizationListComponent implements OnInit {
public selectedValue: string; public selectedValue: Organization;
@Output() @Output()
selected = new EventEmitter(); selected = new EventEmitter<Organization>();
public organizations = [ public organizations: Organization[] = [
{name: 'Assembly Organization'}, {id: 1, name: 'Assembly Organization'},
{name: 'Assemly'}, {id: 3, name: 'Assemly'},
{name: 'Organization'} {id: 30, name: 'Organization'}
]; ];
constructor(private organizationListService: OrganizationListService) { constructor(private organizationListService: OrganizationListService) {
...@@ -34,3 +34,8 @@ export class OrganizationListComponent implements OnInit { ...@@ -34,3 +34,8 @@ export class OrganizationListComponent implements OnInit {
} }
} }
export interface Organization {
id: number;
name: string;
}
...@@ -6,16 +6,11 @@ ...@@ -6,16 +6,11 @@
<a style="float:right; font-size:20px; margin-top: 20px" href="#">Moya Login</a> <a style="float:right; font-size:20px; margin-top: 20px" href="#">Moya Login</a>
</div> </div>
<div style="width:50%; float:left"> <div style="width:50%; float:left">
<<<<<<< HEAD
<h2 style="margin-left: 10px">Coming events</h2> <h2 style="margin-left: 10px">Coming events</h2>
<moya-event-list [organisation]="currentOrganisation" style="margin-top:5em;"></moya-event-list> <moya-event-list *ngIf="currentOrganization" [organization]="currentOrganization" style="margin-top:5em;"></moya-event-list>
=======
<h2 style="margin-left: 10px">Tulevat tapahtumat</h2>
<moya-event-list [organization]="currentOrganization" style="margin-top:5em;"></moya-event-list>
>>>>>>> b6bb15bc0dea08e0c1d6588d2424d194218ce163
</div> </div>
<div style="width:50%; float:right"> <div style="width:50%; float:right" >
<h2>Ei omaa organisaatiota?</h2> <h2>Ei omaa organisaatiota?</h2>
<a [routerLink]="['/new-organization']"><button mat-button >Create new organization</button></a> <a [routerLink]="['/new-organization']"><button mat-button >Create new organization</button></a>
<a [routerLink]="['/new-event']"><button mat-button >Create new event</button></a> <a *ngIf="currentOrganization" [routerLink]="['/new-event', currentOrganization.id]"><button mat-button >Create new event</button></a>
</div> </div>
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Organization } from './organization-list/organization-list.component';
@Component({ @Component({
selector: 'moya-organization', selector: 'moya-organization',
...@@ -8,7 +9,7 @@ import { Component, OnInit } from '@angular/core'; ...@@ -8,7 +9,7 @@ import { Component, OnInit } from '@angular/core';
export class OrganizationComponent implements OnInit { export class OrganizationComponent implements OnInit {
title = 'Moay'; title = 'Moay';
public currentOrganization: string; public currentOrganization: Organization;
constructor() { } constructor() { }
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!