Base code for develop feed reader from APIs Tramontana Partners

.angular-cli.json

@@ -1,60 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "tau-frontend"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "styles.css"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "src/tsconfig.spec.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json",
-      "exclude": "**/node_modules/**"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "css",
-    "component": {}
-  }
-}

angular.json

@@ -0,0 +1,132 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "tau-frontend": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "tau-frontend:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "tau-frontend:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "tau-frontend:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "tau-frontend-e2e": {
+      "root": "e2e",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "tau-frontend:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "tau-frontend",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "css"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}

karma.conf.js

@@ -4,24 +4,22 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
-    angularCli: {
+    
-      environment: 'dev'
-    },
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,

package.json

@@ -12,37 +12,39 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.2.0",
+    "@angular/animations": "7.2.15",
-    "@angular/common": "^5.2.0",
+    "@angular/common": "7.2.15",
-    "@angular/compiler": "^5.2.0",
+    "@angular/compiler": "7.2.15",
-    "@angular/core": "^5.2.0",
+    "@angular/core": "7.2.15",
-    "@angular/forms": "^5.2.0",
+    "@angular/forms": "7.2.15",
-    "@angular/http": "^5.2.0",
+    "@angular/http": "7.2.15",
-    "@angular/platform-browser": "^5.2.0",
+    "@angular/platform-browser": "7.2.15",
-    "@angular/platform-browser-dynamic": "^5.2.0",
+    "@angular/platform-browser-dynamic": "7.2.15",
-    "@angular/router": "^5.2.0",
+    "@angular/router": "7.2.15",
     "core-js": "^2.4.1",
-    "rxjs": "^5.5.6",
+    "rxjs": "^6.5.2",
-    "zone.js": "^0.8.19"
+    "tslib": "^1.9.0",
+    "zone.js": "^0.8.29"
   },
   "devDependencies": {
-    "@angular/cli": "~1.7.4",
+    "@angular-devkit/build-angular": "~0.13.0",
-    "@angular/compiler-cli": "^5.2.0",
+    "@angular/cli": "7.3.9",
-    "@angular/language-service": "^5.2.0",
+    "@angular/compiler-cli": "7.2.15",
+    "@angular/language-service": "7.2.15",
     "@types/jasmine": "~2.8.3",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
     "codelyzer": "^4.0.1",
     "jasmine-core": "~2.8.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~2.0.0",
+    "karma": "^4.1.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.2",
+    "protractor": "^6.0.0",
     "ts-node": "~4.1.0",
     "tslint": "~5.9.1",
-    "typescript": "~2.5.3"
+    "typescript": "3.2.4"
   }
 }

src/app/app.component.html

@@ -1,20 +1 @@
-<!--The content below is only a placeholder and can be replaced.-->
+<app-grid></app-grid>
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-

src/app/app.module.ts

@@ -1,18 +1,25 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
 
+import {WordpressService} from './wordpress.service';
 
 import { AppComponent } from './app.component';
+import { GridComponent } from './grid/grid.component';
 
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    GridComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    HttpClientModule,
+  ],
+  providers: [
+    WordpressService,
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/grid/grid.component.css

@@ -0,0 +1,11 @@
+* {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 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;}

src/app/grid/grid.component.html

@@ -0,0 +1,17 @@
+<ul>
+  <li *ngFor="let feed of feeds">
+    <span class="feeder" [ngClass]="{'active':feed.status}">{{feed.name}}</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>
+<ul>
+  <li *ngIf="items.length<=0">Loading</li>
+  <li *ngFor="let item of items" style="cursor:pointer;">
+    <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']"/>
+    </a>
+  </li>
+</ul>

src/app/grid/grid.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GridComponent } from './grid.component';
+
+describe('GridComponent', () => {
+  let component: GridComponent;
+  let fixture: ComponentFixture<GridComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GridComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GridComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/grid/grid.component.ts

@@ -0,0 +1,113 @@
+import { Component, OnInit } from '@angular/core';
+import { WordpressService } from '../wordpress.service';
+import { OmekaClassicService } from '../omeka-classic.service';
+import { Observable } from 'rxjs';
+
+
+@Component({
+  selector: 'app-grid',
+  templateUrl: './grid.component.html',
+  styleUrls: ['./grid.component.css']
+})
+export class GridComponent implements OnInit {
+
+  /* DEBEMOS CREAR UN PROXY CON NGINX PARA HACER LECTURAS Y EVITAR CORS ..*/
+
+  posts$:Observable<any[]>;
+  items:any[]=[];
+  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", 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}
+  ]
+  terms:any[]=[];
+  countItems:number = 0;
+
+  constructor(
+    private wService:WordpressService,
+    private oService:OmekaClassicService,
+  ) { }
+
+  ngOnInit() {
+    //this.posts$ = this.wService.getPosts()
+    // .subscribe(
+    //   (data)=>{console.log(data)},
+    //   (error)=>{console.error(error)}
+    // )
+    this.loadFeeds();
+    this.loadCategories();
+  }
+
+  loadCategories() {
+    this.feedsCategories.map(
+      (feed) => {
+        /* wordpress */
+        if (feed.type==="wordpress") {
+          this.wService.getCategories(feed.url)
+          .subscribe(
+            res => {
+              res.body.map(
+                (cat)=> this.terms.push({name:cat.name,id:cat.id})
+              )
+            }
+          )
+        }
+        /* 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})
+              )
+            }
+          )
+        }
+      }
+    )
+  }
+
+  loadFeeds(){
+    this.feeds.map(
+      (feed) => {
+        if (feed.type==="wordpress") {
+          this.wService.getPosts(feed.url)
+            .subscribe(
+              (res)=> {
+                let numItems = +res.headers.get('X-WP-Total')
+                this.countItems+=numItems
+                feed.status = 1;
+                res.body.map(
+                  (i) => {  this.items.push(i) }
+                );
+                this.items.sort( (a,b) => a.title.rendered.localeCompare(b.title.rendered));
+              }
+            )
+        }
+        /** omeka **/
+        else if (feed.type==="omeka") {
+          this.oService.getItems(feed.url)
+            .subscribe(
+              (res)=> {
+                console.log(res.headers)
+              }
+            )
+        }
+      }
+    );
+  }
+
+    filterByTerm(term:number) {
+      this.items = this.items.filter( (item)=> {if (item['_embedded']['wp:term']) {item['_embedded']['wp:term'][0].map( (cat)=> {return cat.id==term} )} })
+    }
+
+}

src/app/omeka-classic.service.spec.ts

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

src/app/omeka-classic.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { HttpClient,HttpResponse } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class OmekaClassicService {
+
+  /*
+  http://oralitatdegasconha.net/culturaviva/api/resources?pretty_print
+  */
+
+  url:string = "http://oralitatdegasconha.net/culturaviva/"
+  tagsUrl:string = "api/tags"
+  itemsUrl:string = "api/items"
+
+  constructor(private http: HttpClient) { }
+
+  getTags(url:string):Observable<HttpResponse<any[]>>  {
+    return this.http.get<any>(url+this.tagsUrl, {
+      observe: 'response',
+    });
+  }
+
+  getItems(url:string):Observable<HttpResponse<any[]>> {
+    return this.http.get<any>(url+this.itemsUrl, {
+      observe: 'response',
+    })
+  }
+
+}

src/app/wordpress.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { WordpressService } from './wordpress.service';
+
+describe('WordpressService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [WordpressService]
+    });
+  });
+
+  it('should be created', inject([WordpressService], (service: WordpressService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/wordpress.service.ts

@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+import { HttpClient,HttpResponse } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class WordpressService {
+
+  constructor(private http: HttpClient) { }
+
+  getPosts(url:string): Observable<HttpResponse<any[]>> {
+    return this.http.get<any>(url, {
+      params: {
+        per_page: '10',
+      },
+      observe: 'response',
+    });
+  }
+
+  getCategories(url:string):Observable<HttpResponse<any[]>> {
+    return this.http.get<any>(url,{
+      params: { per_page: '100'},
+      observe: 'response'
+    })
+  }
+
+  getPost(slug:string): Observable<any[]> {
+    return this.http.get<any[]>('http://backend.industriapaisaia.eus/wp-json/wp/v2/posts?_embed', {
+      params: {
+        slug: slug,
+        per_page: '6',
+      }
+    });
+  }
+
+  getPage(slug:string): Observable<any[]> {
+    return this.http.get<any[]>('http://backend.industriapaisaia.eus/wp-json/wp/v2/pages?_embed', {
+      params: {
+        slug: slug,
+        per_page: '6',
+      }
+    });
+  }
+
+
+}

src/environments/environment.ts

@@ -4,5 +4,5 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  production: false
+  production: false,
 };

src/polyfills.ts

@@ -1,49 +1,4 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
- */
 
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es6/reflect';
-
-
-/** Evergreen browsers require these. **/
-// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-import 'core-js/es7/reflect';
 
 
 /**

src/tsconfig.spec.json

@@ -10,7 +10,8 @@
     ]
   },
   "files": [
-    "test.ts"
+    "test.ts",
+    "polyfills.ts"
   ],
   "include": [
     "**/*.spec.ts",

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "importHelpers": true,
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
@@ -14,6 +15,8 @@
     "lib": [
       "es2017",
       "dom"
-    ]
+    ],
+    "module": "es2015",
+    "baseUrl": "./"
   }
-}
+}

tslint.json

@@ -18,7 +18,6 @@
     "forin": true,
     "import-blacklist": [
       true,
-      "rxjs",
       "rxjs/Rx"
     ],
     "import-spacing": true,