From 0d709bc1a730a018cc79af906868802ab2126a82 Mon Sep 17 00:00:00 2001 From: Siroco Date: Wed, 6 Feb 2019 14:36:51 +0100 Subject: [PATCH] Upgrade Febrary --- src/app/app-routing.module.ts | 5 ++- src/app/app.component.css | 15 +++++++- src/app/app.component.html | 7 +++- src/app/app.component.ts | 45 +++++++++++++++++----- src/app/app.module.ts | 7 +++- src/app/map-box/map-box.component.css | 6 ++- src/app/map-box/map-box.component.ts | 19 +++++++-- src/app/map.service.ts | 45 +++++++++++++++++++--- src/app/message.service.ts | 6 ++- src/app/pages/pages.component.css | 28 ++++++++++++++ src/app/pages/pages.component.html | 14 +++++++ src/app/pages/pages.component.spec.ts | 25 ++++++++++++ src/app/pages/pages.component.ts | 24 ++++++++++++ src/app/text-info/text-info.component.css | 6 +++ src/app/text-info/text-info.component.html | 9 +++-- src/app/text-info/text-info.component.ts | 12 +++++- src/app/wordpress.service.ts | 9 ++++- src/environments/environment.prod.ts | 5 ++- src/index.html | 1 - src/styles.css | 28 +++++++++++--- 20 files changed, 274 insertions(+), 42 deletions(-) create mode 100644 src/app/pages/pages.component.css create mode 100644 src/app/pages/pages.component.html create mode 100644 src/app/pages/pages.component.spec.ts create mode 100644 src/app/pages/pages.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 5455880..9c96689 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -2,10 +2,11 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './app.component'; +import { TextInfoComponent } from './text-info/text-info.component'; const routes: Routes = [ - { path: '', component: AppComponent }, - { path: ':slug', component: AppComponent }, + // { path: '', component: AppComponent }, + // { path: 'sound/:slug', component: TextInfoComponent } // { path: '/test/', component: PageComponent}. // { path: '/item/:idno', component: AppComponent} ]; diff --git a/src/app/app.component.css b/src/app/app.component.css index b16f453..5989f0f 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -1,8 +1,19 @@ @import url('https://fonts.googleapis.com/css?family=Open+Sans:700|Raleway'); * { font-family:"Raleway",sans-serif;} map-box {margin:0;} +div.title {position:absolute;z-index:10;} div.title {font-size:1em;text-align:left;padding:10px;position:absolute;bottom:0;left:0;width:30vw;background-color:rgba(0,0,0,0);color:#fff;} -div.title h1 {font-family:"Open Sans";font-size:4em;} +div.title h1 {font-family:"Open Sans";font-size:4em;width:30vw;} div.title h1 span {background:#d52b1e;padding:0 10px;} -div.title h2 span {background:#fff;padding:2px;color:#000;} +div.title h2 span {background:#fff;padding:2px;color:#000;cursor:pointer;background-color:#333;padding:5px 15px;margin:0 5px;} div.title p span {line-height:1.4;background:#021011;} + +div.title h3 {position:absolute;max-width:50vw;} +div.title h3 span.tablet-term { background:#d52b1e;color:#fff; padding:2px 10px;} +div.title h3 span.tablet-term b {font-weight:bold;cursor:pointer;} +div.title h3 span.tablet-term b:hover {transform:rotate(-45deg);opacity:0.6;} + +@media screen and (max-device-width: 720px) { + div.title {position:relative;width:100vw;padding:10px 0; background:#d52b1e;} + div.title h2 span {float:left;width:40%;margin:5px 5px;text-align:center;} +} diff --git a/src/app/app.component.html b/src/app/app.component.html index 471e274..34cd7ff 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,8 +1,11 @@
-

Ticino Soundmap

- +

Filtered by : {{filter.name}} x

+

Ticino Soundmap

+

+ + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 02fe28a..5350ffe 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -2,6 +2,7 @@ import { Component } from '@angular/core'; import { WordpressService } from './wordpress.service'; import { ActivatedRoute,Router, NavigationEnd } from "@angular/router"; import {PageItem} from './page'; +import {MapService} from './map.service'; @Component({ @@ -11,20 +12,44 @@ import {PageItem} from './page'; }) export class AppComponent { - pages:PageItem[]; + pages:PageItem[] = []; + public filter; constructor( private route: ActivatedRoute, private wordpressService:WordpressService, + private mapService:MapService ) { - this.route.params.subscribe( params => { - let slug = params.slug; - console.log(slug) - this.wordpressService.getPage(slug) - .subscribe(data=> { - this.pages = data; - console.log(data) - }) - }) + + this.mapService.filter$ + .subscribe( (term) => { + this.filter = term + }) + + this.wordpressService.getPage() + .subscribe( data => { + this.pages = data as PageItem[]; + }) + this.route.params.subscribe(); + // this.route.params.subscribe( params => { + // console.log(params) + // if (params) { + // this.wordpressService.getPage(params.slug) + // .subscribe(data=> { + // this.pages = data; + // console.log(data) + // }) + // } + // }) + } + + goToAnchor(e) { + // console.log(e); + let loc = document.getElementById(e); + loc.scrollIntoView({block:"start"}); + } + + delFilter(filter) { + this.mapService.delFilter(filter); } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f4b9bb1..4974576 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,6 +1,6 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; - +import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './app.component'; import { MapBoxComponent } from './map-box/map-box.component'; @@ -11,6 +11,7 @@ import { MessageService } from './message.service'; import { TextInfoComponent } from './text-info/text-info.component'; import { AppRoutingModule } from './app-routing.module'; import { HttpClientModule } from '@angular/common/http'; +import { PagesComponent } from './pages/pages.component'; @@ -18,13 +19,15 @@ import { HttpClientModule } from '@angular/common/http'; declarations: [ AppComponent, MapBoxComponent, - TextInfoComponent + TextInfoComponent, + PagesComponent ], imports: [ BrowserModule, HttpClientModule, AppRoutingModule, ], + exports: [ RouterModule ], providers: [ MapService, WordpressService, diff --git a/src/app/map-box/map-box.component.css b/src/app/map-box/map-box.component.css index 8ae8683..3523015 100644 --- a/src/app/map-box/map-box.component.css +++ b/src/app/map-box/map-box.component.css @@ -1 +1,5 @@ -div.map {z-index:-10;position:absolute;top:0;left:0;width:100%;width:100vw;height:100%;height:100vh; } +div.map {z-index:1;position:absolute;top:0;left:0;width:100%;width:100vw;height:100%;height:100vh; } + +@media screen and (max-device-width: 720px) { + div.map {position:relative;} +} diff --git a/src/app/map-box/map-box.component.ts b/src/app/map-box/map-box.component.ts index 06d8625..dd69d79 100644 --- a/src/app/map-box/map-box.component.ts +++ b/src/app/map-box/map-box.component.ts @@ -31,12 +31,24 @@ export class MapBoxComponent implements OnInit { public source:any; private popup = new mapboxgl.Popup({closeButton: true, closeOnClick: true, offset: 0}); + public filter; + + + // this.data = new FeatureCollection; + constructor( private mapService: MapService, private wordpressService:WordpressService, private mService:MessageService ) { this.featurecollection = new FeatureCollection([]); + // this.mapService.featureCollection$.subscribe() + this.mapService.filter$ + .subscribe( (term) => { + this.source.setData(new FeatureCollection([])) + if( term!="") this.getSource(term); + this.filter = term; + }) } ngOnInit() { @@ -103,6 +115,7 @@ export class MapBoxComponent implements OnInit { this.source = this.map.getSource('ticino') //set srouce from wordpress map this.getSource(); + //this.source.setData() //layers this.map.addLayer({ @@ -143,10 +156,10 @@ export class MapBoxComponent implements OnInit { }) } - private getSource():void { + private getSource(term:any=''):void { //get All markers and converto to geoJSON for map Source let fc = new FeatureCollection([]); - this.wordpressService.getMarker() + this.wordpressService.getMarker("",term) .subscribe( data => { data.map( marker => { @@ -165,8 +178,8 @@ export class MapBoxComponent implements OnInit { ); this.featurecollection = fc; this.source.setData(fc) - console.log(fc); }); + //this.source.setData(this.mapService.getSource(term)) } diff --git a/src/app/map.service.ts b/src/app/map.service.ts index deca741..6cbec73 100644 --- a/src/app/map.service.ts +++ b/src/app/map.service.ts @@ -1,20 +1,55 @@ import { Injectable } from '@angular/core'; import { environment } from '../environments/environment'; +import { WordpressService } from './wordpress.service'; +import { GeoJson, FeatureCollection } from './map'; +import { Subject,of } from 'rxjs'; -import { GeoJson } from './map'; import * as mapboxgl from 'mapbox-gl'; @Injectable() export class MapService { - constructor() { + private featureCollectionSource = new Subject(); + public filterSource = new Subject(); + + constructor( + private wordpressService:WordpressService, + ) { mapboxgl.accessToken = environment.mapbox.accessToken } + filter$ = this.filterSource.asObservable(); + featureCollection$ = this.featureCollectionSource.asObservable(); - // getMarkers(): Observable { - // return this.db.list('/markers') - // } + setFeatureCollection() { + let fc = new FeatureCollection([]); + this.wordpressService.getMarker() + .subscribe( data => { + data.map( + marker => { + let geojson = new GeoJson( + [marker.georeference[0],marker.georeference[1]], + { + title:marker.title.rendered, + content:marker.content.rendered, + id:marker.id, + slug:marker.slug, + } + ); + geojson['id']=marker.id; + fc.features.push(geojson) + } + ); + this.featureCollectionSource.next(fc) + }); + } + public setFilter(filter:any) { + this.filterSource.next(filter); + } + + public delFilter(filter:any) { + this.filterSource.next() + } } diff --git a/src/app/message.service.ts b/src/app/message.service.ts index c834db6..4d8deea 100644 --- a/src/app/message.service.ts +++ b/src/app/message.service.ts @@ -10,12 +10,14 @@ export class MessageService { constructor() { } public addMessage(pageItem:PageItem):void { - console.log('addPage'); - console.log(pageItem); + let b = document.getElementsByTagName('body') + b[0].style.overflowY = 'hidden'; this.message = [pageItem]; } public clean() { + let b = document.getElementsByTagName('body') + b[0].style.overflowY = 'scroll'; this.message = []; } diff --git a/src/app/pages/pages.component.css b/src/app/pages/pages.component.css new file mode 100644 index 0000000..46ce356 --- /dev/null +++ b/src/app/pages/pages.component.css @@ -0,0 +1,28 @@ +div.container {background-color:#d52b1e;} +div.page-container {min-height:100vh; background-color:#d52b1e;padding-top:15px;position:relative;clear:both;} +div.page-container h1 {font-family:"Raleway"; font-size:2.5rem;font-weight:bold;color:#fff; padding:0;border:5px solid #fff;width:80%;text-align:center;margin:15px 15px;} + +div.page-container div.col-left { text-align:center; min-height:100vh; position:relative;float:left;width:45%;max-width:500px;min-width:320px;} +div.page-container div.col-right { position:relative; color:#fff !important;font-size:14pt;float:left;width:45%;min-width:320px;} +div.page-container div.col-right a {text-decoration:none; padding:0 5px; margin:2px 0; background-color:#333; color:#fff !important;font-weight:bold;} + +div.middle-container {max-width:1000px;margin:auto;} + +div.page-header {clear:both;width:100%;text-align:center;color:#fff;padding-top:20px;} + +/* tricks */ +.up_arrow {transform:rotate(-90deg); display: block; font-size:3em; color:#fff;} +.arrow { cursor:pointer; border: solid black; transition:0.3s; border-width: 0 5px 5px 0; display: inline-block; padding: 10px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); border-color:#fff;} +.arrow:hover { border-width:0 5px 5px 0; opacity:0.8;} + +footer {width:100%;padding:20px 0;clear:both;} +footer div.info-footer {max-width:1000px;font-size:0.8rem;text-align:center;margin:auto;} + +/* media query */ +@media screen and (max-device-width: 720px) { + div.page-container div.col-left {margin:auto; width:100%;width:100%; min-height:0;clear:both;} + div.page-container div.col-right {background-color:#d52b1e;margin:auto; width:100%;width:80vw;clear:both;} + div.page-container h1 {min-width:0;width:100%;height:80%;margin:auto;padding:0;text-align:center;} + div.page-container {padding:0 20px;} + div.container-map-pages {background-color:#d52b1e;} +} diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html new file mode 100644 index 0000000..de625f1 --- /dev/null +++ b/src/app/pages/pages.component.html @@ -0,0 +1,14 @@ +
+
+ +
+
+

{{page.title.rendered}}

+
+
+ +
+
+ diff --git a/src/app/pages/pages.component.spec.ts b/src/app/pages/pages.component.spec.ts new file mode 100644 index 0000000..7a864ac --- /dev/null +++ b/src/app/pages/pages.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PagesComponent } from './pages.component'; + +describe('PagesComponent', () => { + let component: PagesComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PagesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PagesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts new file mode 100644 index 0000000..d2b9c3e --- /dev/null +++ b/src/app/pages/pages.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { WordpressService } from '../wordpress.service'; +import { PageItem } from '../page'; + +@Component({ + selector: 'app-pages', + templateUrl: './pages.component.html', + styleUrls: ['./pages.component.css'] +}) +export class PagesComponent implements OnInit { + + @Input() pages:PageItem[] = [] + + constructor( + private wordpressService:WordpressService, + ) { } + + ngOnInit() {} + + goUp() { + window.scrollTo(0,0) + } + +} diff --git a/src/app/text-info/text-info.component.css b/src/app/text-info/text-info.component.css index e69de29..cbef390 100644 --- a/src/app/text-info/text-info.component.css +++ b/src/app/text-info/text-info.component.css @@ -0,0 +1,6 @@ +ul.categories li , +ul.tags li +{ cursor:pointer; transition:0.3s; } + +ul.categories li:hover, +ul.tags li:hover { color:#d52b1e; font-weight: bold; background:#fff;} diff --git a/src/app/text-info/text-info.component.html b/src/app/text-info/text-info.component.html index 15565f5..720f716 100644 --- a/src/app/text-info/text-info.component.html +++ b/src/app/text-info/text-info.component.html @@ -13,6 +13,9 @@
+
+ +
Date:

{{ page.date | date }}

@@ -21,14 +24,14 @@
Categories -
  • {{cat.name}}
+
  • {{cat.name}}
Tags -
  • {{cat.name}}
+
  • {{cat.name}}
- +
Metadata ↓↑
  • Title: {{m.title}}
    • diff --git a/src/app/text-info/text-info.component.ts b/src/app/text-info/text-info.component.ts index 0fdbbea..06455e8 100644 --- a/src/app/text-info/text-info.component.ts +++ b/src/app/text-info/text-info.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MessageService } from '../message.service' +import {MapService} from '../map.service' @Component({ selector: 'text-info', @@ -9,10 +10,19 @@ import { MessageService } from '../message.service' export class TextInfoComponent implements OnInit { constructor( - public mService:MessageService + public mService:MessageService, + public mapService:MapService ) { } ngOnInit() { } + setTerm(term) { + // console.log("setTerm: "+term); + //this.mapService.filter = term; + this.mapService.setFilter(term); + this.mService.clean(); + // this.wordpressService.getMarker('',term); + } + } diff --git a/src/app/wordpress.service.ts b/src/app/wordpress.service.ts index 73d46cb..cc9705d 100644 --- a/src/app/wordpress.service.ts +++ b/src/app/wordpress.service.ts @@ -6,7 +6,7 @@ import {PageItem} from './page'; @Injectable() export class WordpressService { - apiUrl : string = "https://chiasso.soinumapa.net/wp-json/wp/v2" + apiUrl : string = "https://ticino.soinumapa.net/wp-json/wp/v2" constructor( private http:HttpClient, @@ -29,9 +29,14 @@ export class WordpressService { return this.http.get(url,{ headers:headers, params: searchParams }) } - public getMarker(slug:string = ""):Observable { + public getMarker(slug:string = "", term:any = ''):Observable { let params = "?_embed"; if (slug!="") params = params+"&slug="+slug; + if (term!="") { + let collection = term["_links"]['collection'][0]['href'] + let collectionStr = collection.split("/").slice(-1)[0] + params = params+"&"+collectionStr+"="+term.id + } let url = this.apiUrl+"/marker"+params; return this.http.get(url); } diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 3612073..0bc05d7 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -1,3 +1,6 @@ export const environment = { - production: true + production: true, + mapbox: { + accessToken: 'pk.eyJ1IjoibHJ1bGxvIiwiYSI6ImNpaDUydjdoNTAwd3BzdGx5bGlhOTh6bXYifQ.tE8QgNbVSgwP8V5LnJWA3w' + } }; diff --git a/src/index.html b/src/index.html index 4613ac6..1da15e8 100644 --- a/src/index.html +++ b/src/index.html @@ -4,7 +4,6 @@ Ticino Soundmap - diff --git a/src/styles.css b/src/styles.css index 7e35147..6dc8d84 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,14 +1,17 @@ /* You can add global styles to this file, and also import other style files */ @import url('https://fonts.googleapis.com/css?family=Oswald|Raleway'); -body {padding:0;font-size:12pt;overflow:hidden;font-family:'Raleway',sans-serif;} +html { scroll-behavior: smooth;} +body {padding:0;font-size:12pt;overflow-x:hidden;font-family:'Raleway',sans-serif;margin:0} +a {color:#fff;padding:0 5px;background-color:#333;font-weight:bold;text-decoration:none;} h1,h2,h3,h4,h5,h6 {font-family:'Oswald';} -div.modal {display:block;position:absolute;top:0;left:0;width:100vw;height:100vh;width:100%;height:100%; background-color:rgba(255,255,255,0.8);overflow-y:scroll;} -div.content { position:relative;display:block;height:100%;overflow:auto;font-size:1em;background:#fff;border:1px solid #eee;padding:30px;border-radius:1px; position:relative; width:80vw;min-height:50vh;margin:auto;margin-top:10vh;margin-bottom:10vh;} +div.modal {z-index:20;display:block;position:absolute;top:0;left:0;width:100vw;height:100vh;width:100%;height:100%; background-color:rgba(255,255,255,0.8);overflow-y:scroll;} +div.content { position:relative;display:block;height:100%;overflow:auto;font-size:1em;background:#fff;border:1px solid #eee;padding:30px;border-radius:1px; position:relative; width:80vw;min-height:50vh;margin:auto;margin-top:2vh;margin-bottom:10vh;} div.col-left-70 {position:relative;float:right;width:66%;padding-left:1%;padding-right:1%;} div.col-right-30 {border-right:1px solid #ccc;position:relative;float:right;width:28%;padding-left:1%;padding-right:1%;} -div.content h1 span {background-color:#d52b1e;color:#fff;font-size:3em;padding:0 20px;} -div.content h1,h2,h3,h4,h5 {font-size:1em;color:#d52b1e;} +div.content h1 span {font-size:3em;padding:0 20px;} +div.title h2 span { background:#ccc; color:#fff; padding:0 20px;} +div.content h1,h2,h3,h4,h5 {text-decoration:none; font-size:1em;color:#d52b1e;} div.content div.content-col > * {margin:0 20px;height:100%;display:block;} div.content div.col-right-30 > * {margin-bottom:20px;} div.content div.tags-container, @@ -24,3 +27,18 @@ div.content ul.tags li {float:left;padding:5px;margin:2px;background-color:#d52b div.content div.audio-box audio {margin-top:10px;margin-bottom:10px;} div.close-button {cursor:pointer;position:absolute;right:0;top:0;z-index:100;padding:10px;} div close-button:hover {background:#eee;} +div.content div.audio-box {clear:both;} +div.content-metadata {top:20px;position:relative;} +div.content div.audio-box ul li {padding:3px 0;font-size:0.8em;} + + +/* pages */ +app-pages div.container-map-pages {padding-top:100vh;background-color:#d52b1e;} + +/* trick */ +div.mapboxgl-ctrl-bottom-right, +div.mapboxgl-ctrl-bottom-left { display:none;} + +@media screen and (max-device-width: 720px) { + body { background-color:#d52b1e} +}