1
0

Compare commits

...

3 Commits

Author SHA1 Message Date
Siroco
d057e11dac Update interface for simplify view and publish to Tramontana Website 2019-07-20 18:57:52 +02:00
Siroco
5e510cb1df Fix count items when is loading 2019-05-14 22:51:31 +02:00
Siroco
57d82596db Add Soinumpa Service (tests) 2019-05-14 22:21:05 +02:00
18 changed files with 2782 additions and 36 deletions

View File

@ -21,6 +21,7 @@
"src/favicon.ico"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css"
],
"scripts": []
@ -71,6 +72,7 @@
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css"
],
"assets": [

30
package-lock.json generated
View File

@ -236,6 +236,23 @@
"tslib": "^1.9.0"
}
},
"@angular/cdk": {
"version": "7.3.7",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-7.3.7.tgz",
"integrity": "sha512-xbXxhHHKGkVuW6K7pzPmvpJXIwpl0ykBnvA2g+/7Sgy5Pd35wCC+UtHD9RYczDM/mkygNxMQtagyCErwFnDtQA==",
"requires": {
"parse5": "^5.0.0",
"tslib": "^1.7.1"
},
"dependencies": {
"parse5": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
"integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
"optional": true
}
}
},
"@angular/cli": {
"version": "7.3.9",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-7.3.9.tgz",
@ -370,6 +387,14 @@
"integrity": "sha512-Ig5Jr7mnDelaZvSbUd9YhI5am3q1ku9xelAuwvtyDKvQJeKQj3BtTagcOgWrnQBfrJ/FsA/M5Zo48ncSsV0tqQ==",
"dev": true
},
"@angular/material": {
"version": "7.3.7",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-7.3.7.tgz",
"integrity": "sha512-Eq+7frkeNGkLOfEtmkmJgR+AgoWajOipXZWWfCSamNfpCcPof82DwvGOpAmgGni9FuN2XFQdqP5MoaffQzIvUA==",
"requires": {
"tslib": "^1.7.1"
}
},
"@angular/platform-browser": {
"version": "7.2.15",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-7.2.15.tgz",
@ -4388,6 +4413,11 @@
"integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==",
"dev": true
},
"hammerjs": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
"integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
},
"handle-thing": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",

View File

@ -12,16 +12,19 @@
},
"private": true,
"dependencies": {
"@angular/animations": "7.2.15",
"@angular/animations": "^7.2.15",
"@angular/cdk": "^7.3.7",
"@angular/common": "7.2.15",
"@angular/compiler": "7.2.15",
"@angular/core": "7.2.15",
"@angular/forms": "7.2.15",
"@angular/http": "7.2.15",
"@angular/material": "^7.3.7",
"@angular/platform-browser": "7.2.15",
"@angular/platform-browser-dynamic": "7.2.15",
"@angular/router": "7.2.15",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^6.5.2",
"tslib": "^1.9.0",
"zone.js": "^0.8.29"

View File

@ -0,0 +1,28 @@
import { NgModule } from '@angular/core';
import { MatSelectModule,MatStepperModule,MatCheckboxModule,MatPaginatorModule,MatFormFieldModule,MatTabsModule, MatDialogModule, MatProgressBarModule, MatInputModule, MatToolbarModule,MatMenuModule, MatTableModule, MatCardModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule, } from '@angular/material';
const materialModules = [
MatTabsModule,
MatToolbarModule,
MatCardModule,
MatButtonModule,
MatTableModule,
MatSidenavModule,
MatIconModule,
MatListModule,
MatMenuModule,
MatInputModule,
MatFormFieldModule,
MatProgressBarModule,
MatDialogModule,
MatPaginatorModule,
MatCheckboxModule,
MatStepperModule,
MatSelectModule,
];
@NgModule({
imports: materialModules,
exports: materialModules
})
export class AppMaterialModule { }

View File

@ -1,11 +1,13 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import {AppMaterialModule} from './app-material.module';
import {WordpressService} from './wordpress.service';
import { AppComponent } from './app.component';
import { GridComponent } from './grid/grid.component';
import {SlicePipe } from '@angular/common';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
@ -15,10 +17,14 @@ import { GridComponent } from './grid/grid.component';
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
FormsModule,
AppMaterialModule,
],
providers: [
WordpressService,
SlicePipe,
],
bootstrap: [AppComponent]
})

View File

@ -0,0 +1,12 @@
import { TestBed } from '@angular/core/testing';
import { GeojsonService } from './geojson.service';
describe('GeojsonService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: GeojsonService = TestBed.get(GeojsonService);
expect(service).toBeTruthy();
});
});

View File

@ -0,0 +1,58 @@
import { Injectable } from '@angular/core';
import { HttpClient,HttpResponse } from '@angular/common/http';
import { Observable,of } from 'rxjs';
import soinumapa from "../assets/geojson/soinumapa.json";
import { SlicePipe } from "@angular/common";
@Injectable({
providedIn: 'root'
})
export class GeojsonService {
constructor(private http: HttpClient,
private slicePipe:SlicePipe) {
let items = soinumapa.features as any[]
// only gizartea (sociedad)
this.items = items.filter( (i) => {
if (i.properties) {
let category = i.properties.category
if (category==="Gizartea") { return true }
}
return false
})
this.total_pages
let pages = Object.keys(this.items).length/this.per_page
if (pages%1!=0) pages=Math.floor(pages)+1
this.total_pages = pages
}
items:any[]
per_page:number=10
total_pages:number=0
getTotalPages():number { return this.total_pages }
getItems(feed:any):any {
let page = feed.page
let start:number = (page-1)*this.per_page
let end:number = (page-1)*this.per_page+this.per_page
let items:any[] = this.items
if (feed.search) {
items = this.items.filter( (i) => {
if (i.properties) {
let title = i.properties.title
if (title.toLowerCase().search(feed.search.toLowerCase())>=0) return true
return false
} else { return false }
})
}
// if (feed.search!='') items = items.filter( (i) => {i.title.search(feed.search)})
return this.slicePipe.transform(items, start, end);
}
getCount():any {
return Object.keys(this.items).length
}
}

View File

@ -2,6 +2,7 @@
* {font-family:"Nunito",sans-serif;transition: opacity 1s ease-in-out;}
a { text-decoration:none;color:#333;}
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:100vw;float:left;margin-bottom:20px;}
@ -9,7 +10,7 @@ ul.feeds li {width:10vw;}
ul li a {text-decoration:none;color:#000;}
ul li a:hover {opacity:0.8;}
ul li a img {max-width:100px;float:left;}
ul li a div.content-right {width:550px;padding:0 20px;float:left;}
ul li a div.content-right {width:500px;padding:0 20px;float:left;}
ul li a div.content-right p {margin-top:0;}
ul li.more {border:2px solid transparent; font-weight:bold;width:100%;text-align:center;background-color:#000;color:#fff;padding:5px 0;cursor:pointer;}
ul li.more:hover { opacity:0.8;}
@ -22,17 +23,18 @@ div.term:hover {font-weight:bold;background-color:#333;cursor:pointer;}
ul.counter {position:fixed;top:0;left:0;background:#ccc;z-index:-100;padding:30px;}
span.big-number {font-size:10vmin;transition:1s;font-weight:bold;color:#fff;}
ul.footer {position:fixed;bottom:0;right:0;background:#ccc;z-index:-100;padding:30px;}
ul.footer {position:fixed;bottom:0;right:0;z-index:-100;padding:30px;}
ul li.item {border:2px solid transparent;background:#fff;padding:10px;transition:1s;}
ul li.item:hover {border:2px solid #000;background:#fefefe;}
ul li.item {border-left:20px solid;background:#fff;padding:10px;transition:1s;}
ul li.item:hover {background:#eee;}
.oralitatgasconha {color:#F29A14 !important;}
.oralitatgasconha:hover {border-color:#F29A14 !important;}
.oralitatgasconha {border-color:#F29A14 !important;}
.bambun {color:#FA2D49 !important;}
.bambun:hover {border-color:#FA2D49 !important;}
.bambun {border-color:#FA2D49 !important;}
.binauralnodar {color:#559D30 !important;}
.binauralnodar:hover {border-color:#559D30 !important;}
.binauralnodar {border-color:#559D30 !important;}
.soinumapa {color:#913BBB !important; border-color:#913BBB !important;}
.blink {
animation: opacityLoading 2s 2s infinite linear;

View File

@ -1,17 +1,22 @@
<ul class="feeds" style="display:none;">
<!-- <ul class="feeds" style="display:none;">
<li *ngFor="let feed of feeds">
<span class="feeder blink" [ngClass]="{'active':feed.status}"><span *ngIf="!feed.status">Loading</span> {{feed.name}} <span style="display:none">[{{feed.page}}/{{feed.total_pages}}]</span></span>
<span class="feeder blink" [ngClass]="{'active':feed.status}"><span *ngIf="!feed.status">Loading</span> {{feed.name}} <span style="display:block">({{feed.page}}/{{feed.total_pages}})</span></span>
</li>
</ul>
</ul> -->
<ul class="counter">
<!-- <ul class="counter">
<p><span class="big-number">{{items.length}}/{{countItems}}</span></p>
</ul>
</ul> -->
<!-- <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>
<label>Search</label>
<input type="text" name="search" [(ngModel)]="search">
<button type="button" name="search_button" value="Search" (click)="updateSearch()">Search</button>
</ul> -->
<ul>
<li *ngIf="items.length<=0">Loading</li>
<li class="item" *ngFor="let item of items" style="cursor:pointer;" [id]="item.id" [ngClass]="item.repositorySlug" [title]="item.title">
@ -27,7 +32,42 @@
<li class="more" (click)="showMore()">Show mores</li>
</ul>
<ul class="footer">
<ul><li *ngFor="let feed of feeds" style="text-align:right;font-size:2em;" [ngClass]="feed.slug"><span class="feeder blink" [ngClass]="{'active':feed.status}"><span *ngIf="!feed.status">Loading</span> {{feed.name}} <span style="display:none">[{{feed.page}}/{{feed.total_pages}}]</span></span></li></ul>
<p style="text-align:right;width:100%;font-size:0.8em;font-weight:bold;">Tramontana Archive - <a href="https://git.audio-lab.org/">Fork me</a></p>
</ul>
<!-- <ul class="footer">
<ul><li *ngFor="let feed of feeds" style="text-align:right;font-size:2em;" [ngClass]="feed.slug"><span class="feeder blink" [ngClass]="{'active':feed.status}"><span *ngIf="!feed.status">Loading</span> {{feed.name}} <span style="display:block">({{feed.page}}/{{feed.total_pages}})</span></span></li></ul>
<p style="text-align:right;width:100%;font-size:0.8em;font-weight:bold;">Tramontana Archive - <a href="https://git.audio-lab.org/lrullo/tau_frontend">Fork me</a></p>
</ul> -->
<!--
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field> -->
<div class="mat-elevation-z8">
<!-- <mat-table [dataSource]="dataSource"> -->
<!-- <ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container> -->
<!-- <ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef> Date. </th>
<td mat-cell *matCellDef="let element"> {{element.date | date}} </td>
</ng-container> -->
<!-- <ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef> Title. </th>
<td mat-cell *matCellDef="let element"> {{element.title}} </td>
</ng-container>
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef> Description. </th>
<td mat-cell *matCellDef="let element"> {{element.description}} </td>
</ng-container> -->
<!-- <ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Actions. </th>
<td mat-cell *matCellDef="let element"> <button>Actions</button> </td>
</ng-container> -->
<!-- <ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.title}} </td>
</ng-container> -->
<!-- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> -->
<!-- </mat-table> -->
<!-- <mat-paginator [pageSizeOptions]="[5]"></mat-paginator> -->
</div>

View File

@ -1,8 +1,12 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { WordpressService } from '../wordpress.service';
import { OmekaClassicService } from '../omeka-classic.service';
import { GeojsonService } from '../geojson.service';
import { Observable } from 'rxjs';
import { Item } from '../item';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';
// import {MatTableDataSource} from '@angular/material';
@Component({
@ -15,28 +19,35 @@ 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[]>;
// @ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatPaginator) paginator: MatPaginator;
search:string = ""
items:Item[]=[];
feeds = [
{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", search:"", 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:-1,per_page:10,page:1,total_pages:0},
// {type:"wordpress", search:"", 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:-1,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", categories:"http://oralitat", url:"https://tramontana.audio-lab.org/oralitatdegasconha/",name:"Oralitat de Gasconha",slug:'oralitatgasconha',status:0,per_page:10,page:1,total_pages:0}
{type:"geojson", search:"", categories:"",url:"http://www.soinumapa.net/geojson/",name:"Audiolab",slug:"soinumapa",status:0,per_page:20,page:1,total_pages:0},
{type:"omeka", search:"", categories:"http://oralitat", url:"https://tramontana.audio-lab.org/oralitatdegasconha/",name:"Oralitat de Gasconha",slug:'oralitatgasconha',status:-1,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;
displayedColumns: string[] = ['title','description'];
dataSource = new MatTableDataSource<Item>(this.items);
constructor(
private wService:WordpressService,
private oService:OmekaClassicService,
private gService:GeojsonService,
) { }
AfterViewInit() {
}
ngOnInit() {
//this.posts$ = this.wService.getPosts()
// .subscribe(
@ -45,6 +56,7 @@ export class GridComponent implements OnInit {
// )
this.loadFeeds();
this.loadCategories();
this.dataSource.paginator = this.paginator;
}
loadCategories() {
@ -82,10 +94,21 @@ export class GridComponent implements OnInit {
)
}
updateSearch() {
this.feeds.map(
(feed) => {
feed.search = this.search
feed.total_pages = 0
}
)
this.loadFeeds()
}
showMore() {
// nextpage
this.feeds.map(
(feed) => {
if (feed.status==0) return // is loading
if (feed.page<=feed.total_pages) {
feed.page++;
this.loadFeed(feed)
@ -96,6 +119,8 @@ export class GridComponent implements OnInit {
}
loadFeeds(){
this.items = []
this.countItems = 0
this.feeds.map(
(feed) => { this.loadFeed(feed) }
);
@ -116,6 +141,8 @@ export class GridComponent implements OnInit {
feed.status = 1
res.body.map(
(i) => {
let thumbnail = ""
if (i['_embedded']['wp:featuredmedia']) thumbnail = i['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['thumbnail']['source_url']
let item:Item = {
id:feed.slug+"_"+i['id'],
repository:feed.name,
@ -123,7 +150,7 @@ export class GridComponent implements OnInit {
title:i.title.rendered,
description:i.excerpt.rendered,
link:i.link,
thumbnail:i['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['thumbnail']['source_url']
thumbnail:thumbnail
}
this.items.push(item)
}
@ -132,8 +159,36 @@ export class GridComponent implements OnInit {
}
)
}
else if (feed.type==="geojson") {
feed.status = 0
let features = this.gService.getItems(feed)
if (feed.total_pages==0) {
feed.total_pages = this.gService.getTotalPages()
let numItems = this.gService.getCount()
this.countItems+=numItems
}
features.map(
(feature) => {
let i = feature.properties
if (i) {
let item:Item = {
id:feed.slug+"_"+i.id,
repository:feed.name,
repositorySlug:feed.slug,
title:i.title,
description:i.content.replace(/(<([^>]+)>)/ig,""),
link:i.href,
thumbnail:'',
}
this.items.push(item)
}
}
)
feed.status = 1
}
/** omeka **/
else if (feed.type==="omeka") {
feed.status = 0
this.oService.getItems(feed)
.subscribe(
(res)=> {
@ -154,7 +209,7 @@ export class GridComponent implements OnInit {
repositorySlug:feed.slug,
title:i['element_texts'][0]['text'],
description:subjects.toString(),
link:feed.url+"items/show/"+i['id'],
link:"http://oralitatdegasconha.net/culturaviva/items/show/"+i['id'],
thumbnail:'http://oralitatdegasconha.net/culturaviva/files/theme_uploads/577dc3ddb797af39c4d39d324893d767.jpg'
}
this.items.push(item)

View File

@ -23,8 +23,16 @@ export class OmekaClassicService {
});
}
// TODO: Upgrade omeka to +2.5 ...
getItems(feed):Observable<HttpResponse<any[]>> {
return this.http.get<any>(feed.url+this.itemsUrl+"?per_page="+feed.per_page+"&page="+feed.page, {
return this.http.get<any>(feed.url+this.itemsUrl, {
//+"?per_page="+feed.per_page+"&page="+feed.page
params: {
per_page:feed.per_page,
page:feed.page,
// search:feed.search, // v+2.5
},
observe: 'response',
})
}

View File

@ -12,6 +12,7 @@ export class WordpressService {
params: {
per_page: feed.per_page,
page: feed.page,
search: feed.search,
},
observe: 'response',
});

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -7,6 +7,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>

View File

@ -1,3 +1,4 @@
import 'hammerjs';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

View File

@ -1 +1,9 @@
/* You can add global styles to this file, and also import other style files */
/* @import '~@angular/material/theming';
@include mat-core(); */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

5
src/typings.d.ts vendored
View File

@ -3,3 +3,8 @@ declare var module: NodeModule;
interface NodeModule {
id: string;
}
declare module "*.json" {
const value: any;
export default value;
}