Homework 11

homeworks/ihor.tkachuk_ihortkachuk/homework_10/package.json

@@ -17,12 +17,13 @@
     "@angular/platform-browser": "~2.4.0",
     "@angular/platform-browser-dynamic": "~2.4.0",
     "@angular/router": "~3.4.0",
+    "angular-in-memory-web-api": "^0.2.4",
     "core-js": "~2.4.1",
+    "ng2-toastr": "~1.3.6",
+    "primeng": "~1.0.1",
     "reflect-metadata": "~0.1.3",
     "rxjs": "5.0.1",
-    "zone.js": "~0.7.2",
-    "ng2-toastr": "~1.3.6",
-    "primeng": "~1.0.1"
+    "zone.js": "~0.7.2"
   },
   "devDependencies": {
     "@angular/compiler-cli": "~2.4.0",

homeworks/ihor.tkachuk_ihortkachuk/homework_10/public/css/styles.css

@@ -0,0 +1,129 @@
+/* Master Styles */
+h1 {
+  color: #369;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 250%;
+}
+
+h2, h3 {
+  color: #444;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: lighter;
+}
+
+body {
+  margin: 2em;
+}
+
+body, input[text], button {
+  color: #888;
+  font-family: Cambria, Georgia;
+}
+
+a {
+  cursor: pointer;
+  cursor: hand;
+}
+
+button {
+  font-family: Arial;
+  background-color: #eee;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: hand;
+}
+
+button:hover {
+  background-color: #cfd8dc;
+}
+
+button:disabled {
+  background-color: #eee;
+  color: #aaa;
+  cursor: auto;
+}
+
+/* Navigation link styles */
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-right: 10px;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+
+nav a:visited, a:link {
+  color: #607D8B;
+}
+
+nav a:hover {
+  color: #039be5;
+  background-color: #CFD8DC;
+}
+
+nav a.active {
+  color: #039be5;
+}
+
+/* items class */
+.items {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 24em;
+}
+
+.items li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+
+.items li:hover {
+  color: #607D8B;
+  background-color: #DDD;
+  left: .1em;
+}
+
+.items li.selected {
+  background-color: #CFD8DC;
+  color: white;
+}
+
+.items li.selected:hover {
+  background-color: #BBD8DC;
+}
+
+.items .text {
+  position: relative;
+  top: -3px;
+}
+
+.items .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: #607D8B;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+
+/* everywhere else */
+* {
+  font-family: Arial, Helvetica, sans-serif;
+}

homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/app-routing.module.ts

@@ -0,0 +1,22 @@
+import { NgModule }             from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { DashboardComponent }   from './components/dashboard/dashboard.component';
+import { HeroesComponent }      from './components/heroes/heroes.component';
+import { HeroDetailComponent }  from './components/hero-detail/hero-detail.component';
+import { HeroEditComponent }    from './components/hero-edit/hero-edit.component';
+
+const routes: Routes = [
+    { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
+    { path: 'dashboard', component: DashboardComponent },
+    { path: 'detail/:id', component: HeroDetailComponent },
+    { path: 'edit/:id', component: HeroEditComponent },
+    { path: 'heroes', component: HeroesComponent }
+];
+
+@NgModule({
+    imports: [ RouterModule.forRoot(routes) ],
+    exports: [ RouterModule ]
+})
+
+export class AppRoutingModule {}

homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/app.component.html

@@ -1,12 +1,6 @@
-<h2>My Heroes</h2>
-
-<ul class="heroes">
-    <li *ngFor="let hero of heroes" [class.selected]="hero === selectedHero">
-        <span class="badge">{{hero.id}}</span>
-        <span (click)="onSelect(hero)">{{hero.name}}</span>
-        <i class="material-icons" (click)="onEdit(hero)">mode_edit</i>
-    </li>
-</ul>
-
-<hero-detail [hero]="selectedHero"></hero-detail>
-<hero-edit [hero]="editHero" (save)="clear()"></hero-edit>
+<h1>{{title}}</h1>
+<nav>
+    <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
+    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
+</nav>
+<router-outlet></router-outlet>

homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/app.component.scss

@@ -1,61 +1,33 @@
-.selected {
-  background-color: #CFD8DC !important;
-  color: white;
+h1 {
+  font-size: 1.2em;
+  color: #999;
+  margin-bottom: 0;
 }
 
-.heroes {
-  margin: 0 0 2em 0;
-  list-style-type: none;
-  padding: 0;
-  width: 15em;
-
-  li {
-    cursor: pointer;
-    position: relative;
-    left: 0;
-    background-color: #EEE;
-    margin: .5em;
-    padding: .3em 0;
-    height: 1.6em;
-    border-radius: 4px;
-
-    &.selected:hover {
-      background-color: #BBD8DC !important;
-      color: white;
-    }
+h2 {
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}
 
-    &:hover {
-      color: #607D8B;
-      background-color: #DDD;
-      left: .1em;
-    }
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
 
-    i {
-      position: absolute;
-      right: 6px;
-      color: darkgrey;
-      border-left: 1px solid;
-      padding-left: 5px;
-    }
+  &:visited, &:link {
+    color: #607D8B;
   }
 
-  .text {
-    position: relative;
-    top: -3px;
+  &:hover {
+    color: #039be5;
+    background-color: #CFD8DC;
   }
 
-  .badge {
-    display: inline-block;
-    font-size: small;
-    color: white;
-    padding: 0.8em 0.7em 0 0.7em;
-    background-color: #607D8B;
-    line-height: 1em;
-    position: relative;
-    left: -1px;
-    top: -4px;
-    height: 1.8em;
-    margin-right: .8em;
-    border-radius: 4px 0 0 4px;
+  &.active {
+    color: #039be5;
   }
-}
+}

homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/app.component.ts

@@ -1,41 +1,11 @@
-import { Component, OnInit } from '@angular/core';
-
-import { Hero }      from './shared/hero';
-import { HeroService } from './services/hero.service';
+import { Component } from '@angular/core';
 
 @Component({
-    selector: 'hero-app',
+    selector: 'my-app',
     templateUrl: 'app.component.html',
-    styleUrls: ['app.component.scss'],
+    styleUrls: ['app.component.scss']
 })
 
-export class AppComponent implements OnInit {
-    heroes: Hero[];
-    selectedHero: Hero;
-    editHero: Hero;
-
-    constructor(private heroService: HeroService) {}
-
-    getHeroes(): void {
-        this.heroes = this.heroService.getHeroes();
-    }
-
-    ngOnInit(): void {
-        this.getHeroes();
-    }
-
-    onSelect(hero: Hero): void {
-        this.editHero = null;
-        this.selectedHero = hero;
-    }
-
-    onEdit(hero: Hero): void {
-        this.selectedHero = null;
-        this.editHero = hero;
-    }
-
-    clear() {
-        this.selectedHero = null;
-        this.editHero = null;
-    }
+export class AppComponent {
+    title = 'Tour of Heroes';
 }

homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/app.module.ts

@@ -1,22 +1,37 @@
-import { NgModule }               from '@angular/core';
-import { BrowserModule }          from '@angular/platform-browser';
-import { FormsModule }            from '@angular/forms';
+import { NgModule }                         from '@angular/core';
+import { BrowserModule }                    from '@angular/platform-browser';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { AppRoutingModule }                 from './app-routing.module';
+import { HttpModule }                       from '@angular/http';
 
-import { AppComponent }           from './app.component';
-import { HeroDetailComponent }    from './components/hero-detail/hero-detail.component';
-import { HeroEditComponent }      from './components/hero-edit/hero-edit.component';
+import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
+import { InMemoryDataService }  from './in-memory-data.service';
+
+import { AppComponent }        from './app.component';
+import { HeroesComponent }     from './components/heroes/heroes.component';
+import { HeroDetailComponent } from './components/hero-detail/hero-detail.component';
+import { HeroEditComponent }   from './components/hero-edit/hero-edit.component';
+import { DashboardComponent }  from './components/dashboard/dashboard.component';
+import { HeroSearchComponent } from './components/hero-search/hero-search.component';
 
 import { HeroService } from './services/hero.service';
 
 @NgModule({
     declarations: [
         AppComponent,
+        HeroesComponent,
         HeroDetailComponent,
-        HeroEditComponent
+        HeroEditComponent,
+        DashboardComponent,
+        HeroSearchComponent
     ],
     imports: [
         BrowserModule,
-        FormsModule
+        FormsModule,
+        HttpModule,
+        InMemoryWebApiModule.forRoot(InMemoryDataService),
+        AppRoutingModule,
+        ReactiveFormsModule
     ],
     bootstrap: [
         AppComponent

homeworks/ihor.tkachuk_ihortkachuk/homework_10/src/app/components/dashboard/dashboard.component.html

@@ -0,0 +1,10 @@
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+    <a *ngFor="let hero of heroes" [routerLink]="['/detail', hero.id]" class="col-1-4">
+        <div class="module hero">
+            <h4>{{hero.name}}</h4>
+        </div>
+    </a>
+</div>
+
+<hero-search></hero-search>