Added basic routing

code/moya-management-portal/src/app/app.component.html

 <!--The content below is only a placeholder and can be replaced.-->
 <!--The content below is only a placeholder and can be replaced.-->
-<moya-organization></moya-organization>
+<router-outlet></router-outlet>
\ No newline at end of file

code/moya-management-portal/src/app/app.mock.module.ts

+import { OrganizationComponent } from './organization/organization.component';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 import { AppComponent } from './app.component';
@@ -5,6 +6,9 @@ import { AppMockService } from './shared/app.mock.service';
 import { AppService } from './shared/app.service';
 import { AppService } from './shared/app.service';
 import { OrganizationModule } from './organization/organization.module';
 import { OrganizationModule } from './organization/organization.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterModule } from '@angular/router';
+import { NewOrganizationComponent } from './organization/new-organization/new-organization.component';
+import { NewEventComponent } from './organization/new-event/new-event.component';
 
 
 
 
 @NgModule({
 @NgModule({
@@ -14,7 +18,13 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   imports: [
   imports: [
     BrowserModule,
     BrowserModule,
     BrowserAnimationsModule,
     BrowserAnimationsModule,
-    OrganizationModule
+    OrganizationModule,
+    RouterModule.forRoot([
+      {path: 'new-organization', component: NewOrganizationComponent},
+      {path: 'organization', component: OrganizationComponent},
+      {path: 'new-event', component: NewEventComponent},
+      {path: '', redirectTo: 'organization', pathMatch: 'full'}
+    ], { useHash: true})
   ],
   ],
   providers: [{ provide: AppService, useClass: AppMockService}],
   providers: [{ provide: AppService, useClass: AppMockService}],
   bootstrap: [AppComponent]
   bootstrap: [AppComponent]

code/moya-management-portal/src/app/organization/new-event/new-event.component.html

@@ -6,7 +6,7 @@
   <mat-divider [vertical]="true"></mat-divider>
   <mat-divider [vertical]="true"></mat-divider>
 
 
   <mat-form-field>
   <mat-form-field>
-    <input matInput placeholder="Address" formControlName="address">
+    <input matInput required placeholder="Url" formControlName="url">
   </mat-form-field>
   </mat-form-field>
 
 
   <button mat-button type="submit">Submit</button>
   <button mat-button type="submit">Submit</button>

code/moya-management-portal/src/app/organization/new-event/new-event.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 
 
 @Component({
 @Component({
   selector: 'moya-new-event',
   selector: 'moya-new-event',
@@ -7,9 +8,21 @@ import { Component, OnInit } from '@angular/core';
 })
 })
 export class NewEventComponent implements OnInit {
 export class NewEventComponent implements OnInit {
 
 
+  public eventForm = new FormGroup({
+    name: new FormControl(),
+    url: new FormControl()
+  });
+
   constructor() { }
   constructor() { }
 
 
   ngOnInit() {
   ngOnInit() {
   }
   }
 
 
+  onSubmit() {
+    const values = {
+      'name': this.eventForm.get('name').value,
+      'url': this.eventForm.get('url').value,
+    };
+  }
+
 }
 }

code/moya-management-portal/src/app/organization/organization.component.html

@@ -6,12 +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">
-  <h2 style="margin-left: 10px">Tulevat tapahtumat</h2>
+  <h2 style="margin-left: 10px">Coming events</h2>
   <moya-event-list [organisation]="currentOrganisation" style="margin-top:5em;"></moya-event-list>
   <moya-event-list [organisation]="currentOrganisation" style="margin-top:5em;"></moya-event-list>
 </div>
 </div>
 <div style="width:50%; float:right">
 <div style="width:50%; float:right">
   <h2>Ei omaa organisaatiota?</h2>
   <h2>Ei omaa organisaatiota?</h2>
-  <button mat-button (click)="newOrg()">Create new organization</button>
-  <moya-new-organization></moya-new-organization>
-  <moya-new-event></moya-new-event>
+  <a [routerLink]="['/new-organization']"><button mat-button >Create new organization</button></a>
+  <a [routerLink]="['/new-event']"><button mat-button >Create new event</button></a>
 </div>
 </div>

code/moya-management-portal/src/app/organization/organization.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Component, OnInit } from '@angular/core';
-import {  EventListComponent} from './event-list/event-list.component';
 
 
 @Component({
 @Component({
   selector: 'moya-organization',
   selector: 'moya-organization',

code/moya-management-portal/src/app/organization/organization.module.ts

@@ -13,6 +13,8 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule, MatDividerModule } from '@angular/material';
 import { MatButtonModule, MatDividerModule } from '@angular/material';
 import { NewEventComponent } from './new-event/new-event.component';
 import { NewEventComponent } from './new-event/new-event.component';
+import { RouterModule } from '@angular/router';
+
 
 
 @NgModule({
 @NgModule({
   imports: [
   imports: [
@@ -23,7 +25,8 @@ import { NewEventComponent } from './new-event/new-event.component';
     MatInputModule,
     MatInputModule,
     MatButtonModule,
     MatButtonModule,
     MatDividerModule,
     MatDividerModule,
-    FormsModule
+    FormsModule,
+    RouterModule
   ],
   ],
   providers: [OrganizationListService, EventsService],
   providers: [OrganizationListService, EventsService],
   declarations: [NewOrganizationComponent, OrganizationListComponent, EventListComponent, OrganizationComponent, NewEventComponent],
   declarations: [NewOrganizationComponent, OrganizationListComponent, EventListComponent, OrganizationComponent, NewEventComponent],