lrullo/industriapaisaia-frontend
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

visualización de entrevistas a traves de la api generada en Dedalo.

Browse Source
This commit is contained in:
Siroco 2018-10-10 17:14:00 +02:00
parent 24541ba0d9
commit f198175820
8 changed files with 104 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.component.html
View File

@ -1,3 +1,7 @@
<router-outlet></router-outlet> <router-outlet></router-outlet>
<app-menu [pages]=pages></app-menu> <app-menu [pages]=pages></app-menu>
<!-- <div class="loading-block" *ngIf="!pages">
<div class="progress-bar-load blue"></div>
<div class="progress-bar-load"></div>
</div> -->
<app-footer></app-footer> <app-footer></app-footer>

4
src/app/dedalo.service.ts
View File

@ -8,7 +8,7 @@ import { Entrevistas, Entrevista, ImageDedalo, Informant, Audiovisual} from './e
@Injectable() @Injectable()
export class DedaloService { export class DedaloService {
apiUrl : string = "http://api.industriapaisaia.eus/interviews" apiUrl : string = "https://api.industriapaisaia.eus/interviews"
entrevistas : Entrevista[] entrevistas : Entrevista[]
constructor( constructor(
@ -19,7 +19,7 @@ export class DedaloService {
return this.http.get(this.apiUrl) return this.http.get(this.apiUrl)
.map( (res: Response)=> { .map( (res: Response)=> {
//console.log('response :') //console.log('response :')
console.log(res.json()) // console.log(res.json())
return res.json() return res.json()
}) })
} }

2
src/app/home/home.component.ts
View File

@ -17,7 +17,7 @@ export class HomeComponent implements OnInit {
private pageService: PageService private pageService: PageService
) )
{ {
this.route.params.subscribe( params => console.log(params.id) ); // this.route.params.subscribe( params => console.log(params.id) );
} }
ngOnInit() { ngOnInit() {

51
src/app/interview-grid/interview-grid.component.html
View File

@ -7,34 +7,49 @@
</video> </video>
</div> </div>
</div> --> </div> -->
<section class="entrevista" *ngIf="entrevistas && single"> <section *ngIf="entrevistas && single">
<div class="row" *ngFor="let entrevista of entrevistas"> <div class="row" *ngFor="let entrevista of entrevistas">
<div *ngFor="let i of entrevista"> <div class="col-md-3 offset-md-1 info">
<img [src]="i.src"/> <h3 class="parent-header"><a href="entrevistas">Entrevistas</a></h3>
</div> <h1><span>{{entrevista.title}}</span></h1>
<h1>{{entrevista.title}}</h1> <!-- <h3>{{entrevista.date}}</h3> -->
<h3>{{entrevista.date}}</h3> <h2>{{entrevista.abstract}}</h2>
<blockquote>{{entrevista.abstract}}</blockquote> <!-- <ul class="filters">
<!-- informant --> <li class="active"><a href="entrevistas">Entrevistas</a></li>
<ul class="informant"> </ul> -->
<!-- <ul class="informant filters">
<li *ngFor="let i of entrevista.informant">{{i.surname}}, {{i.name}}</li> <li *ngFor="let i of entrevista.informant">{{i.surname}}, {{i.name}}</li>
</ul> </ul> -->
</div>
<div class="col-md-7" style="padding-left:40px;">
<section class="entrevista">
<div class="row">
<!-- <div *ngFor="let i of entrevista.image">
<img [src]="'http://dedalo.anorgatarrak.eus'+i.src"/>
</div> -->
<!-- informant -->
<!-- audiovisual --> <!-- audiovisual -->
<div *ngFor="let video of entrevista.audiovisual"> <div *ngFor="let video of entrevista.audiovisual; let i = index">
<video controls> <div class="row" *ngIf="i==0">
<source [src]="'http://media.anorgatarrak.eus'+video.video" type="video/mp4"> <video controls style="width:auto;max-height:40vh; margin:auto;">
<source [src]="'http://dedalo.anorgatarrak.eus'+video.video" type="video/mp4">
</video> </video>
<div class="transcrip" [innerHTML]="video.rsc36"></div> </div>
<div class="row" *ngIf="i==0">
<div class="transcrip" style="max-height:40vh;overflow-y:scroll;margin-top:20px;" [innerHTML]="video.rsc36"></div>
</div>
</div>
</div>
</section>
</div> </div>
</div> </div>
</section> </section>
<section class="entrevista" *ngIf="entrevistas && !single"> <section class="entrevista" *ngIf="entrevistas && !single">
<div class="row item-container-wrapper"> <div class="row item-container-wrapper">
<div class="col-md-10 offset-md-1">
<div class="item-container" *ngFor="let entrevista of entrevistas"> <div class="item-container" *ngFor="let entrevista of entrevistas">
<div class="thumbnail-image"> <!-- <div *ngFor="let image of entrevista.image" class="thumbnail-image" [ngStyle]="{backgroundImage:'url()'}">{{image.src}}</div> -->
<a [routerLink]="entrevista.id"><h2>X{{entrevista.title}}</h2></a> <h2 class="thumbtitle"><a [routerLink]="entrevista.id">{{entrevista.title}}</a></h2>
</div>
<div class="content">
<h3 [innerHTML]="entrevista.abstract"></h3> <h3 [innerHTML]="entrevista.abstract"></h3>
</div> </div>
</div> </div>

22
src/app/interview/interview.component.html
View File

@ -1,19 +1,23 @@
<app-header [pages]=pages></app-header> <app-header [pages]=pages *ngIf="pages"></app-header>
<div class="loading-block" *ngIf="!pages">
<div class="progress-bar-load blue"></div>
<div class="progress-bar-load"></div>
</div>
<div class="loading-block" *ngIf="!entrevistas">
<div class="progress-bar-load blue"></div>
<div class="progress-bar-load"></div>
</div>
<div class="more" id="more"></div> <div class="more" id="more"></div>
<article> <article>
<div class="row"> <div class="row">
<!--colmenu--> <!--colmenu-->
<div class="col-md-3 offset-md-1 info"> <!-- <div class="col-md-3 offset-md-1 info">
<ul class="filters"> <ul class="filters">
<li class="active">All</li> <li class="active"><a href="entrevistas">Entrevistas</a></li>
<li>Trabajo</li>
<li>Familia</li>
<li>Otra Materia</li>
</ul> </ul>
</div> </div> -->
<!--colcontent--> <!--colcontent-->
<div class="col-md-7"> <div class="col-md-10 offset-md-1">
<app-interview-grid [entrevistas]="entrevistas" [single]="single"></app-interview-grid> <app-interview-grid [entrevistas]="entrevistas" [single]="single"></app-interview-grid>
</div> </div>
</div> </div>

27
src/app/interview/interview.component.ts
View File

@ -22,15 +22,6 @@ export class InterviewComponent implements OnInit {
private entrevistaService : DedaloService, private entrevistaService : DedaloService,
private route: ActivatedRoute, private route: ActivatedRoute,
) { ) {
let p = new PageItem(
'0',
'Entrevistas',
'Una colección de entrevistas',
'',
'entrevistas',
'0'
);
this.pages = [p];
this.getEntrevistas() this.getEntrevistas()
this.route.params.subscribe( params => { this.route.params.subscribe( params => {
this.entrevistaID = params.id this.entrevistaID = params.id
@ -55,8 +46,26 @@ export class InterviewComponent implements OnInit {
// }) // })
this.entrevistas = data.result this.entrevistas = data.result
this.entrevistas = this.entrevistas.filter(entrevista => entrevista.lang == 'lg-spa') this.entrevistas = this.entrevistas.filter(entrevista => entrevista.lang == 'lg-spa')
let p = new PageItem(
'0',
'Entrevistas',
'Archivo en contrucción de entrevistas realizadas en el proyecto Industria Paisaia',
'',
'entrevistas',
'0'
);
p['background_image']="https://backend.industriapaisaia.eus/wp-content/uploads/2018/06/ZM_Made_in_Ormaiztegi_erakusketa_Irati-Otamendi_Hitzaldia-2016_02.jpg"
this.pages = [p];
// console.log(this.entrevistas)
// console.log(this.pages)
if (this.entrevistaID) { if (this.entrevistaID) {
this.entrevistas = this.entrevistas.filter(entrevista => entrevista.id == this.entrevistaID) this.entrevistas = this.entrevistas.filter(entrevista => entrevista.id == this.entrevistaID)
if(this.entrevistas[0].title) { this.pages[0].title = this.entrevistas[0].title; }
if(this.entrevistas[0].abstract) { this.pages[0].excerpt = this.entrevistas[0].abstract; }
if(this.entrevistas[0].image) { this.pages[0].background_image = "http://dedalo.anorgatarrak.eus"+this.entrevistas[0].image[0].src; }
} }
}) })
} }

8
src/app/page/page.component.html
View File

@ -1,8 +1,12 @@
<app-header [pages]=pages></app-header> <app-header [pages]=pages></app-header>
<!-- <app-section [pages]=pages></app-section> --> <!-- <app-section [pages]=pages></app-section> -->
<article *ngIf="pages.length==0"> <!-- <article *ngIf="pages.length==0">
<h1>Cargando...</h1> <h1>Cargando...</h1>
</article> </article> -->
<div class="loading-block" *ngIf="!pages">
<div class="progress-bar-load blue"></div>
<div class="progress-bar-load"></div>
</div>
<article *ngFor="let page of pages"> <article *ngFor="let page of pages">
<div class="row"> <div class="row">
<div class="col-md-3 offset-md-1 info col-xm-12"> <div class="col-md-3 offset-md-1 info col-xm-12">

26
src/styles.css
View File

@ -17,7 +17,7 @@
body { font-family:"Raleway",serif; overflow-x:hidden;background:#efefef;margin:0; font-size:14pt;font-size:1rem;} body { font-family:"Raleway",serif; overflow-x:hidden;background:#efefef;margin:0; font-size:14pt;font-size:1rem;}
h1,h2 { font-family: "Oswald", sans-serif; text-transform:uppercase; font-weight:bold;} h1,h2 { font-family: "Oswald", sans-serif; text-transform:uppercase; font-weight:bold;}
app-home header { overflow:hidden; width:100%;height:100%;height:100vh;text-align:center;position:relative;} app-home header { overflow:hidden; width:100%;height:100%;height:98vh;text-align:center;position:relative;}
header.homepage { background:url('./assets/industria-paisaia.svg'); background-size:contain; background-repeat:no-repeat; background-position:center center;} header.homepage { background:url('./assets/industria-paisaia.svg'); background-size:contain; background-repeat:no-repeat; background-position:center center;}
@ -98,14 +98,16 @@ footer.single { min-height:100px; height:100%; margin-top:30px; padding:20px; co
/* item continaer */ /* item continaer */
.item-container {width:27%;margin:15px 15px 25px 15px;float:left;padding:0px; border:0px solid #E12323;trans ition:1s;} .item-container {width:27%;margin:15px 15px 25px 15px;float:left;padding:0px; border:0px solid #E12323;trans ition:1s;}
.item-container:hover {transform:translateY(-5px);} .item-container:hover {transform:translateY(-5px);}
.item-container h3 {font-family:"Raleway";text-transform:uppercase;color:#f7886c; margin-bottom:0; font-size:0.8em; text-align:right;padding:2px;cursor:pointer;} .item-container h3 {font-family:"Raleway";text-transform:uppercase;color:#000; margin-bottom:0; font-size:0.8em; text-align:right;padding:2px;cursor:pointer;}
.item-container h3::after {content:'';} .item-container h3::after {content:'';}
.item-container h2 {font-size:2em; text-align:center;padding:2px;} .item-container h2 {font-size:2em; text-align:center;padding:2px;}
.item-container h2.thumbtitle {position:relative;width:100%;text-align:center;padding-top:15%;} .item-container h2 a { color:#f7886c;}
.item-container .thumbnail-image { transition:2s;padding:5px; min-height:150px;background:#fff; background-size:cover; background-size:120%; } .item-container h2.thumbtitle {position:relative;width:100%;text-align:center;}
.item-container .thumbnail-image { transition:2s;padding:5px; min-height:150px;background:#fff; background-size:cover; background-size:120%; background-repeat:no-repeat;}
.item-container .thumbnail-image.last { background:#E12323;color:#fff; } .item-container .thumbnail-image.last { background:#E12323;color:#fff; }
.item-container .thumbnail-image a, .item-container .thumbnail-image a,
.item-container .thumbnail-image h2 {color:#000;transition:1s;transform-origin:left;text-align:left;} .item-container .thumbnail-image h2 {color:#d2e8eb;transition:1s;transform-origin:left;text-align:left;}
.item-container .thumbnail-image h2 a {color:#d2e8eb; }
.item-container .thumbnail-image:hover { background-position:-10%;cursor:pointer; } .item-container .thumbnail-image:hover { background-position:-10%;cursor:pointer; }
.item-container .thumbnail-image:hover > a, .item-container .thumbnail-image:hover > a,
.item-container .thumbnail-image:hover h2 { opacity:1;transform:rotate(5deg); } .item-container .thumbnail-image:hover h2 { opacity:1;transform:rotate(5deg); }
@ -132,8 +134,8 @@ header.item { margin-top:50px;height:0;}
.arrow-down:hover { transform:scale(1.5); margin-top:20px;} .arrow-down:hover { transform:scale(1.5); margin-top:20px;}
/* barra lateral item / media */ /* barra lateral item / media */
.info h1 {margin:20px auto;} .info h1 {margin:20px auto; word-wrap:break-word;}
.info h1 span {background-color:#d2e8eb;padding:5px;} .info h1 span {line-height: 1.8; background-color:#d2e8eb;padding:5px;}
.info h2 {color:#f7886c;} .info h2 {color:#f7886c;}
.info ul.filters {list-style:none; margin:0;padding:0; margin-bottom:50px;} .info ul.filters {list-style:none; margin:0;padding:0; margin-bottom:50px;}
.info ul.filters li { word-wrap:break-word; cursor:pointer; border-right:5px solid #f7886c; padding:5px 30px; text-transform:uppercase;font-family:"Raleway";text-align:right;} .info ul.filters li { word-wrap:break-word; cursor:pointer; border-right:5px solid #f7886c; padding:5px 30px; text-transform:uppercase;font-family:"Raleway";text-align:right;}
@ -198,6 +200,16 @@ ks-current-image img { filter:none; }
} }
} }
/* loading block */
div.loading-block {width:100%;}
div.loading-block div.progress-bar-load { width:0%; height:10px; background:#f7886c;animation: expand 1s ease infinite;}
div.loading-block div.progress-bar-load.blue {background:#d2e8eb;animation: expand 10s ease infinite;}
@keyframes expand {
0% { width:0%; }
100% {width:100%; }
}
@media (max-width:480px) { @media (max-width:480px) {
div.menu { position:relative;} div.menu { position:relative;}
div.menu * { width:100%;background:#fff; } div.menu * { width:100%;background:#fff; }