DE MEX Ricardo Campos

starter-code/src/app/app.component.html

@@ -1,3 +1 @@
-<h1>
-  {{title}}
-</h1>
+<router-outlet></router-outlet>

starter-code/src/app/app.module.ts

@@ -2,19 +2,32 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
+import { Routes, RouterModule } from '@angular/router'
 
 import { AppComponent } from './app.component';
+import { MyHomeComponent } from './my-home/my-home.component';
+import { MyMoviesComponent } from './my-movies/my-movies.component';
+import { MoviesService } from './movies.service'
+
+const routes: Routes = [
+  {path: '', redirectTo: 'home', pathMatch:'full'},
+  {path: 'home', component: MyHomeComponent},
+  {path: 'movie/:id', component:MyMoviesComponent}
+]
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    MyHomeComponent,
+    MyMoviesComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    RouterModule.forRoot(routes)
   ],
-  providers: [],
+  providers: [MoviesService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

starter-code/src/app/movies.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { MoviesService } from './movies.service';
+
+describe('MoviesService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MoviesService]
+    });
+  });
+
+  it('should be created', inject([MoviesService], (service: MoviesService) => {
+    expect(service).toBeTruthy();
+  }));
+});

starter-code/src/app/movies.service.ts

@@ -0,0 +1,139 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class MoviesService {
+
+  movies = [
+      {
+        id: 1,
+        room:1,
+        title: "The Shawshank Redemption",
+        poster: "https://i.imgur.com/SuW2ZlC.jpg",
+        synopsis: "In 1947, Andy Dufresne (Tim Robbins), a banker in Maine, is convicted of murdering his wife and her lover, a golf pro. Since the state of Maine has no death...",
+        genres: [
+          "Crime", "Drama"
+        ],
+        year: 1994,
+        director: "Frank Darabont",
+        actors: [
+          "Tim Robbins",
+          "Morgan Freeman",
+          "Bob Gunton",
+          "William Sadler",
+          "Clancy Brown",
+          "Gil Bellows"
+        ],
+        schedules:[
+          'Wednesday - 19:45',
+          'Thursday - 20:00',
+          'Friday - 22:00'
+        ]
+      }, {
+        id: 2,
+        room: 2,
+        title: "The Godfather",
+        poster: "https://i.imgur.com/Uzvny9I.jpg",
+        synopsis: "In late summer 1945, guests are gathered for the wedding reception of Don Vito Corleone's daughter Connie (Talia Shire) and Carlo Rizzi (Gianni Russo). Vito...",
+        genres: [
+          "Crime", "Drama"
+        ],
+        year: 1972,
+        director: "Francis Ford Coppola",
+        actors: [
+          "Marlon Brando",
+          "Al Pacino",
+          "James Caan",
+          "Richard S. Castellano",
+          "Robert Duvall",
+          "Sterling Hayden"
+        ],
+        schedules:[
+          'Wednesday - 19:45',
+          'Thursday - 20:00',
+          'Friday - 22:00'
+        ]
+      }, {
+        id: 3,
+        room: 3,
+        title: "The Godfather Part II",
+        poster: "https://i.imgur.com/abJNkWI.jpg",
+        synopsis: "The Godfather Part II presents two parallel storylines. One involves Mafia chief Michael Corleone in 1958/1959 after the events of the first movie; the othe...",
+        genres: [
+          "Crime", "Drama"
+        ],
+        year: 1974,
+        director: "Francis Ford Coppola",
+        actors: [
+          "Al Pacino",
+          "Robert Duvall",
+          "Diane Keaton",
+          "Robert De Niro",
+          "John Cazale",
+          "Talia Shire"
+        ],
+        schedules:[
+          'Wednesday - 19:45',
+          'Thursday - 20:00',
+          'Friday - 22:00'
+        ]
+      }, {
+        id: 4,
+        room:4,
+        title: "The Dark Knight",
+        poster: "https://i.imgur.com/3jLPB46.jpg",
+        synopsis: "The movie begins with a gang of men with clown masks breaking into the bank where the mob has a large portion of their money stashed. It begins with five cl...",
+        genres: [
+          "Action", "Crime", "Drama", "Thriller"
+        ],
+        year: 2008,
+        director: "Christopher Nolan",
+        actors: [
+          "Christian Bale",
+          "Heath Ledger",
+          "Aaron Eckhart",
+          "Michael Caine",
+          "Maggie Gyllenhaal",
+          "Gary Oldman"
+        ],
+        schedules:[
+          'Wednesday - 19:45',
+          'Thursday - 20:00',
+          'Friday - 22:00'
+        ]
+      }, {
+        id: 5,
+        room:5,
+        title: "Schindler's List",
+        poster: "https://i.imgur.com/IWZJOmu.jpg",
+        synopsis: "The relocation of Polish Jews from surrounding areas to Krakow begins in late 1939, shortly after the outbreak of World War II, when the German Army defeats...",
+        genres: [
+          "Biography", "Drama", "History"
+        ],
+        year: 1993,
+        director: "Steven Spielberg",
+        actors: [
+          "Liam Neeson",
+          "Ben Kingsley",
+          "Ralph Fiennes",
+          "Caroline Goodall",
+          "Jonathan Sagall",
+          "Embeth Davidtz"
+        ],
+        schedules:[
+          'Wednesday - 19:45',
+          'Thursday - 20:00',
+          'Friday - 22:00'
+        ]
+      }
+  ]
+
+  constructor() { }
+
+  getMovies(){
+    return this.movies
+  }
+
+  getMovie(id){
+   return this.movies.find(movie => movie.id == id)
+  }
+}

starter-code/src/app/my-home/my-home.component.css

@@ -0,0 +1,10 @@
+img{
+  width: 150px;
+  height: 250px;
+}
+
+section{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}

starter-code/src/app/my-home/my-home.component.html

@@ -0,0 +1,8 @@
+
+<section >
+  <div *ngFor="let movie of movies">
+    <h2>Room: {{movie.room}}</h2>
+    <a [routerLink]="['/movie', movie.id]" ><img src="{{movie.poster}}" ></a> <br>
+    <a [routerLink]="['/movie', movie.id]" >{{movie.title}}</a>
+  </div>
+</section>

starter-code/src/app/my-home/my-home.component.spec.ts

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

starter-code/src/app/my-home/my-home.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { MoviesService } from '../movies.service'
+
+@Component({
+  selector: 'app-my-home',
+  templateUrl: './my-home.component.html',
+  styleUrls: ['./my-home.component.css']
+})
+export class MyHomeComponent implements OnInit {
+
+  constructor(
+    private router: Router,
+    private service: MoviesService
+  ){}
+
+  movies = []
+
+  ngOnInit() {
+   this.movies = this.service.getMovies();
+  }
+
+}

starter-code/src/app/my-movies/my-movies.component.css

@@ -0,0 +1,25 @@
+img{
+  width: 300px;
+  height: 500px;
+}
+
+section{
+  display:flex;
+}
+div{
+  margin-left: 100px;
+}
+a{
+  display: block;
+  color: white;
+  background-color: blue;
+  width: 50px;
+  height:30px;
+  text-align: center;
+  border-radius: 5px;
+  padding-top:1%;
+  text-decoration: none;
+  font-size: 1em; 
+  margin-left: 8%;
+  margin-top: 2%;
+}

starter-code/src/app/my-movies/my-movies.component.html

@@ -0,0 +1,38 @@
+<section>
+  <div>
+    <h2>Room: {{movie.room}}</h2>
+    <h2>{{movie.title}}</h2>
+    <img src="{{movie.poster}}" alt="">
+  </div>
+  <div>
+  <h3>Genre:</h3>
+    <ul>
+      <li *ngFor="let genre of movie.genres">
+        {{genre}}
+      </li>
+    </ul>
+    <h4>
+      <h3>Year:</h3>
+      {{movie.year}}
+    </h4>
+    <h4>
+      <h3>Director:</h3>
+      {{movie.director}}
+    </h4>
+    <h3>Actores:</h3>
+    <ul>
+      <li *ngFor="let actor of movie.actors">
+        {{actor}}
+      </li>
+    </ul>
+    <h3>Schedule:</h3>
+    <ul>
+      <li *ngFor="let schedule of movie.schedules" >{{schedule}}</li>
+    </ul>
+    <h3>Synopsis:</h3>
+    <p>
+      {{movie.synopsis}}
+    </p>
+  </div>
+</section>
+<a [routerLink]="['/home']">Home</a>

starter-code/src/app/my-movies/my-movies.component.spec.ts

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

starter-code/src/app/my-movies/my-movies.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router'
+import { MoviesService } from '../movies.service'
+
+@Component({
+  selector: 'app-my-movies',
+  templateUrl: './my-movies.component.html',
+  styleUrls: ['./my-movies.component.css']
+})
+export class MyMoviesComponent implements OnInit {
+
+  constructor(
+    private router: Router,
+    private activeRoute: ActivatedRoute,
+    private service: MoviesService
+  ) { }
+
+  movie = {}
+
+  ngOnInit() {
+    this.activeRoute.params
+    .subscribe(params=>{
+      this.movie = this.service.getMovie(params.id)
+    })
+  }
+
+}