diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 7ecde40..a5b909f 100644 --- a/src/app/app-routing.module.ts +++ b/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)], diff --git a/src/app/app.component.html b/src/app/app.component.html index 4485195..b96d431 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,3 +1,7 @@ - - - +
+ +
+ + + + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index d0ce15c..95ddda6 100644 --- a/src/app/app.component.ts +++ b/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'; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 019a14a..98c3bb7 100644 --- a/src/app/app.module.ts +++ b/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 { } diff --git a/src/app/client.service.spec.ts b/src/app/client.service.spec.ts new file mode 100644 index 0000000..776372f --- /dev/null +++ b/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(); + }); +}); diff --git a/src/app/client.service.ts b/src/app/client.service.ts new file mode 100644 index 0000000..77b14ae --- /dev/null +++ b/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 { + return this.http.get( + this.apiUrl+'/items/index.json',{ + params:query + } + ) + } + + getItem(name:string) : Observable { + return this.http.get( + this.apiUrl+'/items/'+name+'/index.json', {} + ) + } + +} diff --git a/src/app/init/init.component.html b/src/app/init/init.component.html new file mode 100644 index 0000000..b2a3fa1 --- /dev/null +++ b/src/app/init/init.component.html @@ -0,0 +1,5 @@ +
+
+
+
+
diff --git a/src/app/init/init.component.scss b/src/app/init/init.component.scss new file mode 100644 index 0000000..8246d94 --- /dev/null +++ b/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; +} diff --git a/src/app/navigation/navigation.component.spec.ts b/src/app/init/init.component.spec.ts similarity index 54% rename from src/app/navigation/navigation.component.spec.ts rename to src/app/init/init.component.spec.ts index 23438b0..06c7561 100644 --- a/src/app/navigation/navigation.component.spec.ts +++ b/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; +describe('InitComponent', () => { + let component: InitComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ NavigationComponent ] + declarations: [ InitComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(NavigationComponent); + fixture = TestBed.createComponent(InitComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/init/init.component.ts b/src/app/init/init.component.ts new file mode 100644 index 0000000..0256e38 --- /dev/null +++ b/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 { + } + +} diff --git a/src/app/navigation/navigation.component.html b/src/app/navigation/navigation.component.html deleted file mode 100644 index de25b92..0000000 --- a/src/app/navigation/navigation.component.html +++ /dev/null @@ -1,6 +0,0 @@ -
-
-
-
-
-
diff --git a/src/app/navigation/navigation.component.scss b/src/app/navigation/navigation.component.scss deleted file mode 100644 index 88a255a..0000000 --- a/src/app/navigation/navigation.component.scss +++ /dev/null @@ -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;} diff --git a/src/app/navigation/navigation.component.ts b/src/app/navigation/navigation.component.ts deleted file mode 100644 index 18be053..0000000 --- a/src/app/navigation/navigation.component.ts +++ /dev/null @@ -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 { - } - -} diff --git a/src/app/slide/slide.component.html b/src/app/slide/slide.component.html index 66535d0..20ce459 100644 --- a/src/app/slide/slide.component.html +++ b/src/app/slide/slide.component.html @@ -1,7 +1,14 @@ -
+
-
Beire
-
Mar de tierra
- +
+
+
+ +
+
+
+
+
+
diff --git a/src/app/slide/slide.component.scss b/src/app/slide/slide.component.scss index 94d056b..80f7bec 100644 --- a/src/app/slide/slide.component.scss +++ b/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; +} diff --git a/src/app/slide/slide.component.ts b/src/app/slide/slide.component.ts index e50d275..90183c3 100644 --- a/src/app/slide/slide.component.ts +++ b/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]); } + } diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 7b4f817..a2e1609 100644 --- a/src/environments/environment.ts +++ b/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/" }; /*