Update interface for simplify view and publish to Tramontana Website

angular.json

@@ -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": [

package-lock.json

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

package.json

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

src/app/app-material.module.ts

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

src/app/app.module.ts

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

src/app/geojson.service.spec.ts

@@ -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();
+  });
+});

src/app/geojson.service.ts

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

src/app/grid/grid.component.css

@@ -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 {border-left:20px solid;background:#fff;padding:10px;transition:1s;}
-ul li.item:hover {border:2px solid #000;background:#fefefe;}
+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;

src/app/grid/grid.component.html

@@ -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 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>
+  <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/">Fork me</a></p>
+  <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>
+</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>

src/app/grid/grid.component.ts

@@ -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", 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", 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.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)

src/app/omeka-classic.service.ts

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

src/app/wordpress.service.ts

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

src/index.html

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

src/main.ts

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

src/styles.css

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

src/typings.d.ts

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