lrullo/tau_frontend
1
0
Fork 0
Code

Update reader for Collective Access and README proxy info

Browse Source
This commit is contained in:
Siroco 2019-05-14 17:26:12 +02:00
parent 93c9d50151
commit 4fc93f9a97
7 changed files with 103 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
README.md
View File

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

9
src/app/grid/grid.component.css
View File

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

15
src/app/grid/grid.component.html
View File

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

81
src/app/grid/grid.component.ts
View File

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

7
src/app/item.ts Normal file
View File

@ -0,0 +1,7 @@
export interface Item {
id:string;
title: string;
description: string;
link: string;
thumbnail: string;
}

6
src/app/omeka-classic.service.ts
View File

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

7
src/app/wordpress.service.ts
View File

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