Fix desing and item/feed interafce

src/app/grid/grid.component.css

@@ -1,12 +1,48 @@
-* {font-family:Montserrat,sans-serif;transition: opacity 1s ease-in-out;}
+@import url('https://fonts.googleapis.com/css?family=Nunito');
+
+
+* {font-family:"Nunito",sans-serif;transition: opacity 1s ease-in-out;}
 
 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 {padding:0;margin:0; width:100vw;float:left;margin-bottom:20px;}
+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 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;}
 
-span.big-number {font-size:20vmin;transition:1s;font-weight:bold;color:#000;}
+span.active {animation:none; text-decoration:none !important;opacity:1 !important;}
-span.active {color:#000 !important;text-decoration:none !important;}
+span.feeder {font-weight:bold;font-size:0.8em;padding:10px 5px;opacity:0.3;}
-span.feeder {font-weight:bold;font-size:0.8em;color:#ccc;text-decoration:line-through;padding:10px 5px;}
 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;}
+
+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 li.item {border:2px solid transparent;background:#fff;padding:10px;transition:1s;}
+ul li.item:hover {border:2px solid #000;background:#fefefe;}
+
+.oralitatgasconha {color:#F29A14 !important;}
+.oralitatgasconha:hover {border-color:#F29A14 !important;}
+.bambun {color:#FA2D49 !important;}
+.bambun:hover {border-color:#FA2D49 !important;}
+.binauralnodar {color:#559D30 !important;}
+.binauralnodar:hover {border-color:#559D30 !important;}
+
+.blink {
+	animation: opacityLoading 2s 2s infinite linear;
+}
+
+@keyframes opacityLoading {
+	0% { opacity:0 }
+	10% { opacity:0 }
+	25% { opacity:0.5 }
+	75% { opacity:0.5 }
+	90% { opacity:0 }
+	100% { opacity:0 }
+}

src/app/grid/grid.component.html

@@ -1,22 +1,33 @@
-<ul>
+<ul class="feeds" style="display:none;">
   <li *ngFor="let feed of feeds">
-    <span class="feeder" [ngClass]="{'active':feed.status}">{{feed.name}} [{{feed.page}}/{{feed.total_pages}}]</span>
+    <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>
 
-<ul><p><span class="big-number">{{countItems}}</span></p></ul>
+<ul class="counter">
+  <p><span class="big-number">{{items.length}}/{{countItems}}</span></p>
+</ul>
 
-<ul><h2 style="cursor:pointer;" (click)="showCategories=!showCategories">Categories</h2></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> -->
-<ul><h2>Items</h2></ul>
 <ul>
   <li *ngIf="items.length<=0">Loading</li>
-  <li *ngFor="let item of items" style="cursor:pointer;" [id]="item.id">
+  <li class="item" *ngFor="let item of items" style="cursor:pointer;" [id]="item.id" [ngClass]="item.repositorySlug" [title]="item.title">
     <a [href]="item.link" target="_blank">
       <img *ngIf="item.thumbnail" [title]="item.title" style="max-width:100px" [src]="item.thumbnail"/>
-      <strong [innerHTML]="item.title"></strong>
+      <div class="content-right">
+        <p [ngClass]="item.repositorySlug"><i [innerHTML]="item.repository"></i></p>
+        <p><strong [innerHTML]="item.title"></strong></p>
+        <p [innerHTML]="item.description"></p>
+      </div>
     </a>
   </li>
+  <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>

src/app/grid/grid.component.ts

@@ -21,7 +21,7 @@ export class GridComponent implements OnInit {
     {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", categories:"http://oralitat", url:"http://oralitat/",name:"Oralitat de Gasconha",slug:'oralitatgasconha',status:0,per_page:10,page:1,total_pages: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}
   ]
   // feedsCategories = [
   //   {type:"wordpress", url:"https://www.gransassolagaich.it/wp-json/wp/v2/categories",name:"Bambun",status:0},
@@ -59,7 +59,6 @@ export class GridComponent implements OnInit {
                 (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())
               });
             }
@@ -74,7 +73,6 @@ export class GridComponent implements OnInit {
                 (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())
               });
             }
@@ -84,65 +82,99 @@ export class GridComponent implements OnInit {
     )
   }
 
-  loadFeeds(){
+  showMore() {
+    // nextpage
     this.feeds.map(
       (feed) => {
-        if (feed.type==="wordpress") {
+        if (feed.page<=feed.total_pages) {
-          this.wService.getPosts(feed)
+          feed.page++;
-            .subscribe(
+          this.loadFeed(feed)
-              (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
-                res.body.map(
-                  (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.localeCompare(b.title));
-              }
-            )
-        }
-        /** omeka **/
-        else if (feed.type==="omeka") {
-          this.oService.getItems(feed)
-            .subscribe(
-              (res)=> {
-                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)
-                  }
-                )
-              }
-            )
         }
       }
+
+    )
+  }
+
+  loadFeeds(){
+    this.feeds.map(
+      (feed) => { this.loadFeed(feed) }
     );
   }
 
+  loadFeed(feed) {
+    feed.status=0;
+    if (feed.type==="wordpress") {
+      this.wService.getPosts(feed)
+        .subscribe(
+          (res)=> {
+            let numItems = +res.headers.get('X-WP-Total')
+            let totalPages = res.headers.get('X-WP-TotalPages')
+            if (feed.total_pages==0) {
+              feed.total_pages = +totalPages
+              this.countItems+=numItems
+            }
+            feed.status = 1
+            res.body.map(
+              (i) => {
+                let item:Item = {
+                  id:feed.slug+"_"+i['id'],
+                  repository:feed.name,
+                  repositorySlug:feed.slug,
+                  title:i.title.rendered,
+                  description:i.excerpt.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.localeCompare(b.title));
+          }
+        )
+    }
+    /** omeka **/
+    else if (feed.type==="omeka") {
+      this.oService.getItems(feed)
+        .subscribe(
+          (res)=> {
+            let numItems = +res.headers.get('Omeka-Total-Results')
+            let pages = numItems/feed.per_page
+            if (pages%1!=0) pages=Math.floor(pages)+1;
+            if (feed.total_pages==0) {
+              feed.total_pages = pages
+              this.countItems+=numItems
+            }
+            feed.status = 1
+            res.body.map(
+              (i)=> {
+                let subjects = this.getOmekaSubjects(i);
+                let item:Item = {
+                  id:feed.slug+"_"+i['id'],
+                  repository:feed.name,
+                  repositorySlug:feed.slug,
+                  title:i['element_texts'][0]['text'],
+                  description:subjects.toString(),
+                  link:feed.url+"items/show/"+i['id'],
+                  thumbnail:'http://oralitatdegasconha.net/culturaviva/files/theme_uploads/577dc3ddb797af39c4d39d324893d767.jpg'
+                }
+                this.items.push(item)
+              }
+            )
+          }
+        )
+    }
+  }
+
+  getOmekaSubjects(i:any) {
+    let subjects = []
+    i['element_texts'].map(
+      (e) => {
+        if (e['element']['name'] === "Subject")  subjects.push(e['text'])
+      }
+    )
+    return subjects
+  }
+
     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/item.ts

@@ -1,5 +1,7 @@
 export interface Item {
   id:string;
+  repository:string;
+  repositorySlug:string;
   title: string;
   description: string;
   link: string;