Compare commits

...

2 Commits

Author SHA1 Message Date
Siroco
695751627a Clean imports 2020-10-23 18:24:40 +02:00
Siroco
6ae592447a Routing and loading content from API.
Remove Navitagion component, included on Slide
2020-10-23 18:23:28 +02:00
17 changed files with 242 additions and 55 deletions

View File

@ -1,9 +1,13 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
import { SlideComponent } from './slide/slide.component'; 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({ @NgModule({
imports: [RouterModule.forRoot(routes)], imports: [RouterModule.forRoot(routes)],

View File

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

View File

@ -1,10 +1,30 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import {
transition,
trigger,
query,
style,
animate,
group,
animateChild
} from '@angular/animations';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', 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 { export class AppComponent {
title = 'beire-frontend'; title = 'beire-frontend';
} }

View File

@ -1,22 +1,30 @@
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; 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 { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { SlideComponent } from './slide/slide.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({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
SlideComponent, SlideComponent,
NavigationComponent InitComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
AppRoutingModule BrowserAnimationsModule,
AppRoutingModule,
HttpClientModule
],
providers: [
ClientService
], ],
providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
export class AppModule { } export class AppModule { }

View File

@ -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();
});
});

31
src/app/client.service.ts Normal file
View File

@ -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', {}
)
}
}

View File

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

View File

@ -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;
}

View File

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

View File

@ -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 {
}
}

View File

@ -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>

View File

@ -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;}

View File

@ -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 {
}
}

View File

@ -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="content">
<div class="element big-title">Beire</div> <div class="element big-title" [innerHTML]="slide.title"></div>
<div class="element second-title">Mar de tierra</div> <div class="element second-title" [innerHTML]="slide.content"></div>
<div class="element logo"><img style="padding-top:30px;max-width:100px;" src="/assets/img/landarte_logo.png"/></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> </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>

View File

@ -2,7 +2,6 @@ div.slide {
color:#fff; color:#fff;
width:100vw; width:100vw;
height:100vh; height:100vh;
background-image:url("/assets/img/output.gif");
background-size:cover; background-size:cover;
background-color:#f90; background-color:#f90;
background-blend-mode: luminosity; background-blend-mode: luminosity;
@ -10,6 +9,7 @@ div.slide {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
overflow:crosshair;
} }
div.element { div.element {
@ -28,3 +28,21 @@ div.second-title {
font-size:3rem; font-size:3rem;
font-family:"Reenie Beanie",serif; 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;
}

View File

@ -1,4 +1,11 @@
import { Component, OnInit } from '@angular/core'; 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({ @Component({
selector: 'app-slide', selector: 'app-slide',
@ -7,13 +14,58 @@ import { Component, OnInit } from '@angular/core';
}) })
export class SlideComponent implements OnInit { export class SlideComponent implements OnInit {
constructor() { } slide: any;
constructor(
private clientService:ClientService,
private route: ActivatedRoute,
private router: Router,
) {}
ngOnInit(): void { ngOnInit(): void {
} document.addEventListener('keydown', (e) => { this.onKeydown(e) });
//document.addEventListener('keydown', (e) => { console.log(e)})
onKeydown(event) { this.route.params.subscribe(
console.log(event) params => {
if (params.name) {
this.clientService.getItem(params.name).subscribe(
(r) => { this.slide = r.data;}
)
} }
}
)
}
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]); }
} }

View File

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