Routing and loading content from API.

Remove Navitagion component, included on Slide

src/app/app-routing.module.ts

@@ -1,9 +1,13 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { SlideComponent } from './slide/slide.component';
+import { InitComponent} from './init/init.component';
 
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: ':name', component: SlideComponent },
+  { path: '', component: InitComponent }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

@@ -1,3 +1,7 @@
-<app-navigation></app-navigation>
-<router-outlet></router-outlet>
-<app-slide></app-slide>
+<div [@myAnimation]="o.isActivated ? o.activatedRoute : ''">
+  <router-outlet #o="outlet"></router-outlet>
+</div>
+
+
+<!-- <router-outlet></router-outlet> -->
+<!-- <app-slide></app-slide> -->

src/app/app.component.ts

@@ -1,10 +1,30 @@
 import { Component } from '@angular/core';
 
+import {
+  transition,
+  trigger,
+  query,
+  style,
+  animate,
+  group,
+  animateChild
+} from '@angular/animations';
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
-})
+  styleUrls: ['./app.component.scss'],
+  animations: [
+    trigger('myAnimation', [
+      transition('* <=> *', [
+        query (':enter', [style({opacity:0})], {optional:true}),
+        query(':leave',[style({ opacity: 1 }), animate('0.3s', style({ opacity: 0 }))],{ optional: true }),
+        query(':enter',[style({ opacity: 0 }), animate('0.3s', style({ opacity: 1 }))],{ optional: true })
+      ])
+    ])
+  ],
+  })
+
 export class AppComponent {
   title = 'beire-frontend';
 }

src/app/app.module.ts

@@ -1,22 +1,32 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { SlideComponent } from './slide/slide.component';
 import { NavigationComponent } from './navigation/navigation.component';
 
+import { ClientService } from './client.service';
+import { InitComponent } from './init/init.component';
+
 @NgModule({
   declarations: [
     AppComponent,
     SlideComponent,
-    NavigationComponent
+    NavigationComponent,
+    InitComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    BrowserAnimationsModule,
+    AppRoutingModule,
+    HttpClientModule
+  ],
+  providers: [
+    ClientService
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/client.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ClientService } from './client.service';
+
+describe('ClientService', () => {
+  let service: ClientService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ClientService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/client.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { HttpClient,HttpResponse } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import {environment} from '../environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ClientService {
+
+  apiUrl:string
+
+  constructor(private http: HttpClient) {
+    this.apiUrl = environment.uriAPI
+  }
+
+  getItems(query:any=""): Observable<any> {
+    return this.http.get<any>(
+      this.apiUrl+'/items/index.json',{
+        params:query
+      }
+    )
+  }
+
+  getItem(name:string) : Observable<any> {
+    return this.http.get<any>(
+      this.apiUrl+'/items/'+name+'/index.json', {}
+    )
+  }
+
+}

src/app/init/init.component.html

@@ -0,0 +1,5 @@
+<div class="slide">
+  <div class="element">
+    <div class="round-button" title="Pulsa para iniciar" routerLink="home"></div>
+  </div>
+</div>

src/app/init/init.component.scss

@@ -0,0 +1,36 @@
+div.slide {
+  color:#fff;
+  width:100vw;
+  height:100vh;
+  background-size:cover;
+  background-color:#f90;
+  background-blend-mode: luminosity;
+  display:flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  overflow:hidden;
+  cursor:crosshair;
+}
+
+div.element {
+  width:50vw;
+  margin:auto;
+  text-align:center;
+}
+
+div.round-button {
+  cursor:pointer;
+  margin:auto;
+  font-size:2em;
+  border:5px solid #fff;
+  color:#fff;
+  border-radius:100%;
+  width:10vw;
+  height:10vw;
+  transition:1s;
+}
+
+div.round-button:hover {
+  background:#fff;
+}

src/app/init/init.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NavigationComponent } from './navigation.component';
+import { InitComponent } from './init.component';
 
-describe('NavigationComponent', () => {
-  let component: NavigationComponent;
-  let fixture: ComponentFixture<NavigationComponent>;
+describe('InitComponent', () => {
+  let component: InitComponent;
+  let fixture: ComponentFixture<InitComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ NavigationComponent ]
+      declarations: [ InitComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(NavigationComponent);
+    fixture = TestBed.createComponent(InitComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/init/init.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-init',
+  templateUrl: './init.component.html',
+  styleUrls: ['./init.component.scss']
+})
+export class InitComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/navigation/navigation.component.html

@@ -1,6 +0,0 @@
-<div class="controls">
-  <div class="left control"><div class="arrow"><img src="/assets/img/left.svg"/></div></div>
-  <div class="right control"><div class="arrow"><img src="/assets/img/right.svg"/></div></div>
-  <div class="top control"><div class="arrow"><img src="/assets/img/top.svg"/></div></div>
-  <div class="bottom control"><div class="arrow"><img src="/assets/img/down.svg"/></div></div>
-</div>

src/app/navigation/navigation.component.scss

@@ -1,9 +0,0 @@
-div.controls{
-  div.control {position:absolute;z-index:100;width:10vw;height:20vh;display:flex;justify-content: center; align-items: center;}
-  div.left { top:0;left:0;height:100vh; }
-  div.right { top:0;right:0;height:100vh; }
-  div.top { top:0;left:0;width:100vw; }
-  div.bottom { bottom:0;left:0;width:100vw; }
-}
-
-div.arrow { cursor:crosshair;}

src/app/navigation/navigation.component.ts

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

src/app/slide/slide.component.html

@@ -1,7 +1,14 @@
-<div class="slide" (mouseenter)="onKeydown($event)" (click)="onKeydown($event)">
+<div class="slide" *ngIf="slide" [ngStyle]="{'background-image':'url('+getFeaturedImage()+')'}">
   <div class="content">
-    <div class="element big-title">Beire</div>
-    <div class="element second-title">Mar de tierra</div>
-    <div class="element logo"><img style="padding-top:30px;max-width:100px;" src="/assets/img/landarte_logo.png"/></div>
+    <div class="element big-title" [innerHTML]="slide.title"></div>
+    <div class="element second-title" [innerHTML]="slide.content"></div>
+    <div class="element logo" *ngIf="slide.name=='home'"><img style="padding-top:30px;max-width:100px;" src="assets/img/landarte_logo.png"/></div>
   </div>
 </div>
+
+<div class="controls" *ngIf="slide">
+  <div class="left control"><div class="arrow" [id]="slide.o" (click)="left($event)"><img src="assets/img/left.svg"/></div></div>
+  <div class="right control"><div class="arrow" [id]="slide.e" (click)="right($event)"><img src="assets/img/right.svg"/></div></div>
+  <div class="top control"><div class="arrow" [id]="slide.n" (click)="up($event)"><img src="assets/img/top.svg"/></div></div>
+  <div class="bottom control"><div class="arrow" [id]="slide.s" (click)="down($event)"><img src="assets/img/down.svg"/></div></div>
+</div>

src/app/slide/slide.component.scss

@@ -2,7 +2,6 @@ div.slide {
   color:#fff;
   width:100vw;
   height:100vh;
-  background-image:url("/assets/img/output.gif");
   background-size:cover;
   background-color:#f90;
   background-blend-mode: luminosity;
@@ -10,6 +9,7 @@ div.slide {
   justify-content: center;
   align-items: center;
   text-align: center;
+  overflow:crosshair;
 }
 
 div.element {
@@ -28,3 +28,21 @@ div.second-title {
   font-size:3rem;
   font-family:"Reenie Beanie",serif;
 }
+
+/* controls */
+div.controls{
+  div.control {position:absolute;z-index:100;width:10vw;height:20vh;display:flex;justify-content: center; align-items: center;}
+  div.left { top:0;left:0;height:100vh; }
+  div.right { top:0;right:0;height:100vh; }
+  div.top { top:0;left:0;width:100vw; }
+  div.bottom { bottom:0;left:0;width:100vw; }
+}
+
+div.arrow {
+  cursor:pointer;
+  min-width:75px;
+  min-height:75px;
+  align-items: center;
+  align-content: center;
+  text-align: center;
+}

src/app/slide/slide.component.ts

@@ -1,4 +1,11 @@
 import { Component, OnInit } from '@angular/core';
+import { ClientService } from '../client.service';
+import { Observable } from 'rxjs';
+import {environment} from '../../environments/environment';
+import { ActivatedRoute, Router } from '@angular/router';
+
+
+
 
 @Component({
   selector: 'app-slide',
@@ -7,13 +14,58 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SlideComponent implements OnInit {
 
-  constructor() { }
+  slide: any;
+
+  constructor(
+    private clientService:ClientService,
+    private route: ActivatedRoute,
+    private router: Router,
+  ) {}
 
   ngOnInit(): void {
+    document.addEventListener('keydown', (e) => { this.onKeydown(e) });
+    //document.addEventListener('keydown', (e) => { console.log(e)})
+
+    this.route.params.subscribe(
+      params => {
+        if (params.name) {
+          this.clientService.getItem(params.name).subscribe(
+            (r) => { this.slide = r.data;}
+          )
+        }
+      }
+    )
+
   }
 
-  onKeydown(event) {
-    console.log(event)
+  getFeaturedImage(): string {
+    return environment.uriAPI+"items/"+this.slide.name+"/"+this.slide.featuredImage;
   }
 
+  onKeydown(e) {
+    //e.code
+    //ArrowLeft
+    //ArrowRight
+    //ArrowUp
+    //ArrowDown
+    console.log(e)
+    switch (e.code) {
+      case "ArrowLeft" :
+        this.left(e);
+        break;
+      case "ArrowRight" :
+        this.right(e);
+        break;
+      case "ArrowUp" :
+        this.up(e); break;
+      case "ArrowDown" :
+        this.down(e); break;
+    }
+  }
+
+  left(e) { this.router.navigate(['/', this.slide.o]);}
+  right(e) { this.router.navigate(['/', this.slide.e]); }
+  up(e) { this.router.navigate(['/', this.slide.n]); }
+  down(e) { this.router.navigate(['/', this.slide.s]); }
+
 }

src/environments/environment.ts

@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  uriAPI: "https://public.audio-lab.org/beireapi/"
 };
 
 /*