From 4fc93f9a973603a66c2b93394bb471edc472c805 Mon Sep 17 00:00:00 2001
From: Siroco <siroco@piperrak.cc>
Date: Tue, 14 May 2019 17:26:12 +0200
Subject: [PATCH] Update reader for Collective Access and README proxy info

---
 README.md                        | 27 ++++++-----
 src/app/grid/grid.component.css  |  9 ++--
 src/app/grid/grid.component.html | 15 ++++--
 src/app/grid/grid.component.ts   | 81 +++++++++++++++++++++++---------
 src/app/item.ts                  |  7 +++
 src/app/omeka-classic.service.ts |  6 +--
 src/app/wordpress.service.ts     |  7 +--
 7 files changed, 103 insertions(+), 49 deletions(-)
 create mode 100644 src/app/item.ts

diff --git a/README.md b/README.md
index 06d92a9..1430739 100644
--- a/README.md
+++ b/README.md
@@ -1,27 +1,30 @@
 # TauFrontend
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.4.
+App for read Tramontana feeds.
 
 ## Development server
 
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
 ## Build
 
 Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
 
-## Running unit tests
+## Create Nginx Proxy for CORS in Omeka
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers
 
-## Running end-to-end tests
+```javascript
+server {
+  listen 80;
+  server_name oralitat;
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+  access_log /var/log/nginx/omekaApiProxy.access.log;
 
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+  location / {
+      add_header 'Access-Control-Allow-Origin' '*';
+      add_header 'Access-Control-Expose-Headers' 'Omeka-Total-Results,Link';
+      proxy_pass http://oralitatdegasconha.net/culturaviva/;
+  }
+}
+```
diff --git a/src/app/grid/grid.component.css b/src/app/grid/grid.component.css
index 4765282..f9c28b3 100644
--- a/src/app/grid/grid.component.css
+++ b/src/app/grid/grid.component.css
@@ -1,11 +1,12 @@
 * {font-family:Montserrat,sans-serif;transition: opacity 1s ease-in-out;}
 
-ul { list-style:none;padding:0;margin:0;width:720px;margin:auto;clear:both;min-height:100px;}
-ul li {padding:0;margin:0; max-width:100px;float:left;}
+ul { display:flex; flex-wrap:wrap; list-style:none;padding:0;margin:0;width:720px;margin:auto;clear:both;min-height:100px;}
+ul li {padding:0;margin:0; width:10vw;float:left;}
+ul li a {text-decoration:none;color:#000;}
 ul li a:hover {opacity:0.8;}
 
 span.big-number {font-size:20vmin;transition:1s;font-weight:bold;color:#000;}
 span.active {color:#000 !important;text-decoration:none !important;}
 span.feeder {font-weight:bold;font-size:0.8em;color:#ccc;text-decoration:line-through;padding:10px 5px;}
-span.term {padding:10px 5px;text-transform:uppercase;}
-span.term:hover {text-decoration:line-through;cursor:pointer;}
+div.term {transition:0.5s; padding:5px 5px;margin:5px;text-transform:lowercase;background:#000;color:#fff;font-size:0.8em;}
+div.term:hover {font-weight:bold;background-color:#333;cursor:pointer;}
diff --git a/src/app/grid/grid.component.html b/src/app/grid/grid.component.html
index f48e8fd..21445ef 100644
--- a/src/app/grid/grid.component.html
+++ b/src/app/grid/grid.component.html
@@ -1,17 +1,22 @@
 <ul>
   <li *ngFor="let feed of feeds">
-    <span class="feeder" [ngClass]="{'active':feed.status}">{{feed.name}}</span>
+    <span class="feeder" [ngClass]="{'active':feed.status}">{{feed.name}} [{{feed.page}}/{{feed.total_pages}}]</span>
   </li>
 </ul>
+
 <ul><p><span class="big-number">{{countItems}}</span></p></ul>
-<ul>
-  <li *ngFor="let term of terms"><span class="term" (click)="filterByTerm(term.id)">{{term.name}}</span></li>
+
+<ul><h2 style="cursor:pointer;" (click)="showCategories=!showCategories">Categories</h2></ul>
+<ul *ngIf="showCategories">
+  <li *ngFor="let term of terms"><div [id]="term.id" class="term" (click)="filterByTerm(term.id)">{{term.name}}</div></li>
 </ul>
+<ul><h2>Items</h2></ul>
 <ul>
   <li *ngIf="items.length<=0">Loading</li>
-  <li *ngFor="let item of items" style="cursor:pointer;">
+  <li *ngFor="let item of items" style="cursor:pointer;" [id]="item.id">
     <a [href]="item.link" target="_blank">
-    <img *ngIf="item['_embedded']['wp:featuredmedia']" [title]="item.title.rendered" style="max-width:100px" [src]="item['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['thumbnail']['source_url']"/>
+      <img *ngIf="item.thumbnail" [title]="item.title" style="max-width:100px" [src]="item.thumbnail"/>
+      <strong [innerHTML]="item.title"></strong>
     </a>
   </li>
 </ul>
diff --git a/src/app/grid/grid.component.ts b/src/app/grid/grid.component.ts
index 194a828..6febeac 100644
--- a/src/app/grid/grid.component.ts
+++ b/src/app/grid/grid.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { WordpressService } from '../wordpress.service';
 import { OmekaClassicService } from '../omeka-classic.service';
 import { Observable } from 'rxjs';
+import { Item } from '../item';
 
 
 @Component({
@@ -12,21 +13,22 @@ import { Observable } from 'rxjs';
 export class GridComponent implements OnInit {
 
   /* DEBEMOS CREAR UN PROXY CON NGINX PARA HACER LECTURAS Y EVITAR CORS ..*/
+  /* DEBEMOS CREAR UN ITEM TYPE BASICO PARA TODOS Y ASÍ CARGAR LOS DATOS DE MANERA MÁS CONTROLADA SEGUN EL CONTENT MANAGER */
 
   posts$:Observable<any[]>;
-  items:any[]=[];
+  items:Item[]=[];
   feeds = [
-    {type:"wordpress", url:"https://www.gransassolagaich.it/wp-json/wp/v2/posts?_embed",name:"Bambun",status:0},
-    {type:"wordpress", url:"https://www.archive.binauralmedia.org/wp-json/wp/v2/avada_portfolio?_embed",name:"Binaural",status:0},
+    {type:"wordpress", categories:"https://www.gransassolagaich.it/wp-json/wp/v2/categories", url:"https://www.gransassolagaich.it/wp-json/wp/v2/posts?_embed",slug:'bambun',name:"Bambun",status:0,per_page:10,page:1,total_pages:0},
+    {type:"wordpress", categories:"https://www.archive.binauralmedia.org/wp-json/wp/v2/categories", url:"https://www.archive.binauralmedia.org/wp-json/wp/v2/avada_portfolio?_embed",slug:'binauralnodar',name:"Binaural",status:0,per_page:10,page:1,total_pages:0},
     // {type:"wordpress", url:"http://backend.industriapaisaia.eus/wp-json/wp/v2/posts?_embed",name:"Local",status:0},
-    {type:"omeka", url:"http://oralitatdegasconha.net/culturaviva/",name:"Oralitat de Gasconha",status:0}
-  ]
-  feedsCategories = [
-    {type:"wordpress", url:"https://www.gransassolagaich.it/wp-json/wp/v2/categories",name:"Bambun",status:0},
-    {type:"wordpress", url:"https://www.archive.binauralmedia.org/wp-json/wp/v2/categories",name:"Binaural",status:0},
-    // {type:"wordpress", url:"http://backend.industriapaisaia.eus/wp-json/wp/v2/categories",name:"Local",status:0},
-    {type:"omeka", url:"http://oralitatdegasconha.net/culturaviva/",name:"Oralitat de Gasconha",status:0}
+    {type:"omeka", categories:"http://oralitat", url:"http://oralitat/",name:"Oralitat de Gasconha",slug:'oralitatgasconha',status:0,per_page:10,page:1,total_pages:0}
   ]
+  // feedsCategories = [
+  //   {type:"wordpress", url:"https://www.gransassolagaich.it/wp-json/wp/v2/categories",name:"Bambun",status:0},
+  //   {type:"wordpress", url:"https://www.archive.binauralmedia.org/wp-json/wp/v2/categories",name:"Binaural",status:0},
+  //   // {type:"wordpress", url:"http://backend.industriapaisaia.eus/wp-json/wp/v2/categories",name:"Local",status:0},
+  //   {type:"omeka", url:"http://oralitat/",name:"Oralitat de Gasconha",status:0}
+  // ]
   terms:any[]=[];
   countItems:number = 0;
 
@@ -46,29 +48,35 @@ export class GridComponent implements OnInit {
   }
 
   loadCategories() {
-    this.feedsCategories.map(
+    this.feeds.map(
       (feed) => {
         /* wordpress */
         if (feed.type==="wordpress") {
-          this.wService.getCategories(feed.url)
+          this.wService.getCategories(feed.categories)
           .subscribe(
             res => {
               res.body.map(
-                (cat)=> this.terms.push({name:cat.name,id:cat.id})
+                (cat)=> this.terms.push({name:cat.name,id:feed.slug+":"+cat.id})
               )
+              this.terms.sort( (a,b) => {
+                console.log(a.name.toUpperCase().localeCompare(b.name.toUpperCase()))
+                return a.name.toUpperCase().localeCompare(b.name.toUpperCase())
+              });
             }
           )
         }
         /* Omeka */
         else if (feed.type==="omeka") {
-          console.log("isOmeka "+feed.url)
           this.oService.getTags(feed.url)
           .subscribe(
             res => {
-              console.log(res)
               res.body.map(
-                (tag) => this.terms.push({name:tag.name,id:tag.id})
+                (tag) => this.terms.push({name:tag.name,id:feed.slug+":"+tag.id})
               )
+              this.terms.sort( (a,b) => {
+                console.log(a.name.toUpperCase().localeCompare(b.name.toUpperCase()))
+                return a.name.toUpperCase().localeCompare(b.name.toUpperCase())
+              });
             }
           )
         }
@@ -80,25 +88,54 @@ export class GridComponent implements OnInit {
     this.feeds.map(
       (feed) => {
         if (feed.type==="wordpress") {
-          this.wService.getPosts(feed.url)
+          this.wService.getPosts(feed)
             .subscribe(
               (res)=> {
+                console.log(res.headers.keys())
                 let numItems = +res.headers.get('X-WP-Total')
+                let totalPages = res.headers.get('X-WP-TotalPages')
+                feed.total_pages = +totalPages
                 this.countItems+=numItems
-                feed.status = 1;
+                feed.status = 1
                 res.body.map(
-                  (i) => {  this.items.push(i) }
+                  (i) => {
+                    let item:Item = {
+                      id:feed.slug+"_"+i['id'],
+                      title:i.title.rendered,
+                      description:i.content.rendered,
+                      link:i.link,
+                      thumbnail:i['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['thumbnail']['source_url']
+                    }
+                    this.items.push(item)
+                  }
                 );
-                this.items.sort( (a,b) => a.title.rendered.localeCompare(b.title.rendered));
+                this.items.sort( (a,b) => a.title.localeCompare(b.title));
               }
             )
         }
         /** omeka **/
         else if (feed.type==="omeka") {
-          this.oService.getItems(feed.url)
+          this.oService.getItems(feed)
             .subscribe(
               (res)=> {
-                console.log(res.headers)
+                let numItems = +res.headers.get('Omeka-Total-Results')
+                let pages = numItems/feed.per_page
+                if (pages%1!=0) pages=Math.floor(pages)+1;
+                feed.total_pages = pages
+                this.countItems+=numItems
+                feed.status = 1
+                res.body.map(
+                  (i)=> {
+                    let item:Item = {
+                      id:feed.slug+"_"+i['id'],
+                      title:i['element_texts'][0]['text'],
+                      description:'none',
+                      link:feed.url+"items/show/"+i['id'],
+                      thumbnail:'http://oralitatdegasconha.net/culturaviva/files/theme_uploads/577dc3ddb797af39c4d39d324893d767.jpg'
+                    }
+                    this.items.push(item)
+                  }
+                )
               }
             )
         }
diff --git a/src/app/item.ts b/src/app/item.ts
new file mode 100644
index 0000000..aa48b34
--- /dev/null
+++ b/src/app/item.ts
@@ -0,0 +1,7 @@
+export interface Item {
+  id:string;
+  title: string;
+  description: string;
+  link: string;
+  thumbnail: string;
+}
diff --git a/src/app/omeka-classic.service.ts b/src/app/omeka-classic.service.ts
index 0b79791..cbaa5d1 100644
--- a/src/app/omeka-classic.service.ts
+++ b/src/app/omeka-classic.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { HttpClient,HttpResponse } from '@angular/common/http';
+import { HttpClient,HttpResponse,HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs';
 
 @Injectable({
@@ -23,8 +23,8 @@ export class OmekaClassicService {
     });
   }
 
-  getItems(url:string):Observable<HttpResponse<any[]>> {
-    return this.http.get<any>(url+this.itemsUrl, {
+  getItems(feed):Observable<HttpResponse<any[]>> {
+    return this.http.get<any>(feed.url+this.itemsUrl+"?per_page="+feed.per_page+"&page="+feed.page, {
       observe: 'response',
     })
   }
diff --git a/src/app/wordpress.service.ts b/src/app/wordpress.service.ts
index 2329315..b2e4c38 100644
--- a/src/app/wordpress.service.ts
+++ b/src/app/wordpress.service.ts
@@ -7,10 +7,11 @@ export class WordpressService {
 
   constructor(private http: HttpClient) { }
 
-  getPosts(url:string): Observable<HttpResponse<any[]>> {
-    return this.http.get<any>(url, {
+  getPosts(feed): Observable<HttpResponse<any[]>> {
+    return this.http.get<any>(feed.url, {
       params: {
-        per_page: '10',
+        per_page: feed.per_page,
+        page: feed.page,
       },
       observe: 'response',
     });