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

src/app/app-routing.module.ts

@@ -8,8 +8,8 @@ import { InterviewComponent } from './interview/interview.component';
 const routes: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full'},
   { path: 'home', component: HomeComponent },
-  { path: 'entrevista', component: InterviewComponent },
-  { path: 'entrevista/:id', component: InterviewComponent },
+  { path: 'entrevistas', component: InterviewComponent },
+  { path: 'entrevistas/:id', component: InterviewComponent },
   { path: ':id', component: PageComponent },
   { path: ':parent/intro', redirectTo:':parent'},
   { path: ':parent/:id', component: PageComponent},

src/app/app.component.html

@@ -1,3 +1,7 @@
 <router-outlet></router-outlet>
 <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>

src/app/dedalo.service.ts

@@ -3,18 +3,25 @@ import { Http, Response, RequestOptions, Headers, URLSearchParams } from '@angul
 import { Observable } from 'rxjs';
 import 'rxjs/add/operator/map';
 import { InterviewItem } from './interview';
+import { Entrevistas, Entrevista, ImageDedalo, Informant, Audiovisual} from './entrevista'
 
 @Injectable()
 export class DedaloService {
 
-  apiUrl : string = "https://localhost:3000/interview"
+  apiUrl : string = "https://api.industriapaisaia.eus/interviews"
+  entrevistas : Entrevista[]
 
   constructor(
     private http: Http
   ) {}
 
-  getInterviews() : Observable<InterviewItem> {
-    return this.http.get(this.apiUrl);
+  getInterviews() : Observable<Entrevistas> {
+    return this.http.get(this.apiUrl)
+      .map( (res: Response)=> {
+        //console.log('response :')
+        // console.log(res.json())
+        return res.json()
+      })
   }
 
 }

src/app/entrevista.ts

@@ -0,0 +1,42 @@
+export class Entrevistas {
+  constructor (
+    public count: number,
+    public result: Entrevista[]
+  ) {}
+}
+
+export class Entrevista {
+  constructor(
+    public id : string,
+    public lang? : string,
+    public title? : string,
+    public abstract? : string,
+    public date? : string,
+    public informant?: Informant[],
+    public image?: ImageDedalo[],
+    public audiovisual?: Audiovisual[],
+  ) {}
+}
+
+export class Informant {
+  constructor(
+    public id: string,
+    public name: string,
+    public surname: string
+  ) {}
+}
+
+export class ImageDedalo {
+  constructor(
+    public id: string,
+    public src: string
+  ){}
+}
+
+export class Audiovisual {
+  constructor(
+    public id: string,
+    public video: string,
+    public rsc36: string
+  ){}
+}

src/app/home/home.component.ts

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

src/app/interview-grid/interview-grid.component.html

@@ -1,11 +1,57 @@
+<!-- <div class="row" *ngFor="let entrevista of entrevistas">
+  <div class="col-md-12">
+    <div *ngIf="entrevista.audiovisual">
+      <div *ngFor="let audiovisual of entrevista.audiovisual" [innerHTML]="audiovisual.rsc36"></div>
+    </div>
+    <video controls src="https://media.">
+    </video>
+  </div>
+</div> -->
+<section *ngIf="entrevistas && single">
+  <div class="row" *ngFor="let entrevista of entrevistas">
+<div class="col-md-3 offset-md-1 info">
+  <h3 class="parent-header"><a href="entrevistas">Entrevistas</a></h3>
+  <h1><span>{{entrevista.title}}</span></h1>
+  <!-- <h3>{{entrevista.date}}</h3> -->
+  <h2>{{entrevista.abstract}}</h2>
+  <!-- <ul class="filters">
+    <li class="active"><a href="entrevistas">Entrevistas</a></li>
+  </ul> -->
+  <!-- <ul class="informant filters">
+    <li *ngFor="let i of entrevista.informant">{{i.surname}}, {{i.name}}</li>
+  </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 -->
+      <div *ngFor="let video of entrevista.audiovisual; let i = index">
+        <div class="row" *ngIf="i==0">
+          <video controls style="width:auto;max-height:40vh; margin:auto;">
+            <source [src]="'http://dedalo.anorgatarrak.eus'+video.video" type="video/mp4">
+          </video>
+        </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>
+</section>
+<section class="entrevista" *ngIf="entrevistas && !single">
  <div class="row item-container-wrapper">
-  <div class="item-container">
-         <h3>Trabajo</h3>
-         <div class="thumbnail-image">
-                 <a href="item.html"><h2>Juan Garcia</h2></a>
-         </div>
-         <div class="content">
-           <p>Breve intro de la entrevista aquí disponible.</p>
+   <div class="col-md-10 offset-md-1">
+   <div class="item-container" *ngFor="let entrevista of entrevistas">
+          <!-- <div *ngFor="let image of entrevista.image" class="thumbnail-image" [ngStyle]="{backgroundImage:'url()'}">{{image.src}}</div> -->
+          <h2 class="thumbtitle"><a [routerLink]="entrevista.id">{{entrevista.title}}</a></h2>
+          <h3 [innerHTML]="entrevista.abstract"></h3>
    </div>
  </div>
   </div>
+</section>

src/app/interview-grid/interview-grid.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit, Input} from '@angular/core';
 import { InterviewItem } from '../interview';
+import { Entrevista } from '../entrevista';
+
 
 @Component({
   selector: 'app-interview-grid',
@@ -8,11 +10,11 @@ import { InterviewItem } from '../interview';
 })
 export class InterviewGridComponent implements OnInit {
 
-  @Input() interviews : InterviewItem[]
+  @Input() entrevistas : Entrevista[]
+  @Input() single: boolean
 
   constructor() {}
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 
 }

src/app/interview/interview.component.html

@@ -1,20 +1,24 @@
-<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>
   <article>
 		<div class="row">
       <!--colmenu-->
-			<div class="col-md-3 offset-md-1 info">
+			<!-- <div class="col-md-3 offset-md-1 info">
 				<ul class="filters">
-					<li class="active">All</li>
-					<li>Trabajo</li>
-					<li>Familia</li>
-					<li>Otra Materia</li>
+					<li class="active"><a href="entrevistas">Entrevistas</a></li>
 				</ul>
-			</div>
+			</div> -->
       <!--colcontent-->
-			<div class="col-md-7">
-        <app-interview-grid [interviews]=interviews></app-interview-grid>
+			<div class="col-md-10 offset-md-1">
+        <app-interview-grid [entrevistas]="entrevistas" [single]="single"></app-interview-grid>
 			</div>
 		</div>
 </article>

src/app/interview/interview.component.ts

@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { PageItem } from '../page';
 import { InterviewItem } from '../interview';
 import { DedaloService } from '../dedalo.service';
+import { Entrevista } from '../entrevista';
+import { ActivatedRoute,Router, NavigationEnd } from "@angular/router";
 
 @Component({
   selector: 'app-interview',
@@ -12,19 +14,19 @@ export class InterviewComponent implements OnInit {
 
   pages : PageItem[];
   interviews : InterviewItem[];
+  entrevistas : Entrevista[]
+  entrevistaID: string
+  single: boolean = false
 
   constructor(
-    private dedaloService : DedaloService
+    private entrevistaService : DedaloService,
+    private route: ActivatedRoute,
   ) {
-    let p = new PageItem(
-      '0',
-      'Entrevistas',
-      'Una colección de entrevistas',
-      '',
-      'entrevistas',
-      '0'
-    );
-    this.pages = [p];
+    this.getEntrevistas()
+    this.route.params.subscribe( params => {
+      this.entrevistaID = params.id
+      if (params.id) this.single = true
+    });
   }
 
   ngOnInit() {
@@ -34,4 +36,38 @@ export class InterviewComponent implements OnInit {
     this.interviews = [];
   }
 
+  getEntrevistas() {
+    this.entrevistaService.getInterviews()
+    .subscribe(data => {
+      // data.result.forEach( (e) => {
+      //   e.audiovisal.forEach( (v) => {
+      //     v.video = v.video.replace(/^.*[\\\/]/, '')
+      //   })
+      // })
+      this.entrevistas = data.result
+      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) {
+        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; }
+      }
+    })
+  }
+
 }

src/app/page/page.component.html

@@ -1,8 +1,12 @@
 <app-header [pages]=pages></app-header>
 <!-- <app-section [pages]=pages></app-section> -->
-<article *ngIf="pages.length==0">
+<!-- <article *ngIf="pages.length==0">
 	<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">
 		<div class="row">
 			<div class="col-md-3 offset-md-1 info col-xm-12">

src/app/page/page.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { PageService } from '../page.service';
+import { DedaloService } from '../dedalo.service';
+import { Entrevista } from '../entrevista';
 import { PageItem } from '../page';
 import { ActivatedRoute,Router, NavigationEnd } from "@angular/router";
 import { SafeResourceUrl, DomSanitizer,SafeUrl } from '@angular/platform-browser';
@@ -34,7 +36,8 @@ import * as $ from 'jquery';
 })
 export class PageComponent implements OnInit {
 
-  pages : PageItem[] = [];
+  pages : PageItem[] = []
+  entrevistas : Entrevista[]
   slug : string;
   parent : string;
   imageIndex = 1;
@@ -47,12 +50,14 @@ export class PageComponent implements OnInit {
     private pageService: PageService,
     private galleryService: GalleryService,
     private sanitizer: DomSanitizer,
-    private router: Router
+    private router: Router,
+    private entrevistaService : DedaloService
   ){
         this.route.params.subscribe( params => {
           this.slug = params.id;
-          this.parent = params.parent;
-          this.getPage();
+          this.parent = params.parent
+          this.getPage()
+          // this.getEntrevistas()
         } );
   }
 
@@ -68,6 +73,17 @@ export class PageComponent implements OnInit {
         });
   }
 
+  get diagnosticEntrevistas() {
+    return JSON.stringify(this.entrevistas)
+  }
+
+  // getEntrevistas() {
+  //   this.entrevistaService.getInterviews()
+  //   .subscribe(data => {
+  //     this.entrevistas = data.result
+  //   })
+  // }
+
   getPage() {
     // console.log(this.slug);
     this.pageService.getPage(this.slug)

src/styles.css

@@ -17,7 +17,7 @@
 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;}
 
-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;}
 
@@ -98,14 +98,16 @@ footer.single { min-height:100px; height:100%; margin-top:30px; padding:20px; co
 /* item continaer */
 .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 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 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 .thumbnail-image { transition:2s;padding:5px; min-height:150px;background:#fff; background-size:cover; background-size:120%; }
+.item-container h2 a { color:#f7886c;}
+.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 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 > a,
 .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;}
 
 /* barra lateral item / media */
-.info h1 {margin:20px auto;}
-.info h1 span {background-color:#d2e8eb;padding:5px;}
+.info h1 {margin:20px auto; word-wrap:break-word;}
+.info h1 span {line-height: 1.8; background-color:#d2e8eb;padding:5px;}
 .info h2 {color:#f7886c;}
 .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;}
@@ -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) {
   div.menu { position:relative;}
   div.menu * { width:100%;background:#fff; }