Navigation, Routing and Theming added

angular.json

@@ -24,7 +24,7 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/custom-theme.scss"
             ],
             "scripts": []
           },
@@ -88,7 +88,7 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.css"
+              "src/custom-theme.scss"
             ],
             "scripts": []
           }
@@ -119,6 +119,7 @@
           }
         }
       }
-    }},
+    }
+  },
   "defaultProject": "mit-ws"
-}
+}
\ No newline at end of file

mit-ws-20-21.wiki @ 1add6da6

-Subproject commit 415a42c04471c795c74c2e9793dfca93d2d88017
+Subproject commit 1add6da6c629add4d119475c8c713eaf290008ef

package.json

@@ -12,10 +12,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~10.0.5",
+    "@angular/cdk": "^10.2.7",
     "@angular/common": "~10.0.5",
     "@angular/compiler": "~10.0.5",
     "@angular/core": "~10.0.5",
     "@angular/forms": "~10.0.5",
+    "@angular/material": "^10.2.7",
     "@angular/platform-browser": "~10.0.5",
     "@angular/platform-browser-dynamic": "~10.0.5",
     "@angular/router": "~10.0.5",
@@ -43,4 +45,4 @@
     "tslint": "~6.1.0",
     "typescript": "~3.9.5"
   }
-}
\ No newline at end of file
+}

src/app/app.component.css

+.main {
+    margin: 10px;
+}
+
+.flexSpaceBetween {
+  justify-content: space-around;
+}
\ No newline at end of file

src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'mit-ws';
+  title = 'mit-ws-20-21';
 }

src/app/app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+/**
+ * Project was created without Routing option
+ * so Routing will be setup here (otherwise in app-routing.module.ts)
+ * followed https://angular.io/start/start-routing
+ * used structure from mit-ws-20-21-requests.pdf
+ * so components needed are: Start, Navigation, Room Info, Int. Office, Login
+ * difference to structure image: gave navigation higher prio than room info
+ * 
+*/
 
 import { AppComponent } from './app.component';
+import { RouterModule } from '@angular/router';
+import { StartComponent } from './start/start.component';
+import { NavigationComponent } from './navigation/navigation.component';
+import { RoomsComponent } from './rooms/rooms.component';
+import { InternationalComponent } from './international/international.component';
+import { LoginComponent } from './login/login.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+// Material Components
+import { MatButtonModule } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    StartComponent,
+    NavigationComponent,
+    RoomsComponent,
+    InternationalComponent,
+    LoginComponent
   ],
   imports: [
-    BrowserModule
-  ],
+    BrowserModule,
+    RouterModule.forRoot([
+      { path: '', component: StartComponent },
+      { path: 'navigation', component: NavigationComponent },
+      { path: 'rooms', component: RoomsComponent },
+      { path: 'international', component: InternationalComponent },
+      { path: 'login', component: LoginComponent }
+    ]),
+    MatButtonModule,
+    MatToolbarModule,
+    BrowserAnimationsModule],
   providers: [],
   bootstrap: [AppComponent]
 })

src/app/international/international.component.html

+<p>international works!</p>

src/app/international/international.component.spec.ts

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

src/app/international/international.component.ts

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

src/app/login/login.component.html

+<p>login works!</p>

src/app/login/login.component.spec.ts

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

src/app/login/login.component.ts

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

src/app/navigation/navigation.component.html

+<p>navigation works!</p>

src/app/navigation/navigation.component.spec.ts

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

src/app/navigation/navigation.component.ts

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