diff --git a/src/app/add-content/add-content.component.html b/src/app/add-content/add-content.component.html index ae0810b..6d2b30a 100644 --- a/src/app/add-content/add-content.component.html +++ b/src/app/add-content/add-content.component.html @@ -1,13 +1,17 @@
+
+ Enviando... +

Gracias por participar

+ {{diagnostic}}

Agrega un nuevo sonido

Publica nuevos contenidos

Coord: {{appService.markers}}

{{diagnostic}} -
+
@@ -26,7 +30,11 @@
- +
+ + +
+
diff --git a/src/app/add-content/add-content.component.ts b/src/app/add-content/add-content.component.ts index f37b511..6da172a 100644 --- a/src/app/add-content/add-content.component.ts +++ b/src/app/add-content/add-content.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { Documento, GeoJson } from '../map'; import { AppService } from '../app.service'; +import { HttpClient, HttpRequest } from '@angular/common/http'; @Component({ @@ -12,18 +13,69 @@ export class AddContentComponent implements OnInit { categories = ['bioacustica', 'social', 'urbano', 'natural']; - document = new Documento(1,new GeoJson([0,0]),'', '', '', this.categories[0], ''); + document = new Documento(1,new GeoJson([0,0]),'', '', '', this.categories[0], null); submitted = false; + loading = false; - constructor(public appService : AppService) { + constructor( + public appService : AppService, + public http: HttpClient + ) { console.log('onConstruct') } + onFileChange(event) { + console.log(event) + let reader = new FileReader(); + if (event.target.files && event.target.files.length) { + const [file] = event.target.files; + reader.readAsDataURL(file); + reader.onload = () => { + var r = reader.result + console.log(r) + this.document.file = r; + console.log("File loaded"); + } + } + } + + public sendEmail(document:Documento):void { + const formData: FormData = new FormData(); + console.log(document.file) + formData.append('file', document.file, 'test') + formData.append('id',(document.id).toString()) + formData.append('title', document.title) + formData.append('author', document.author) + formData.append('coord',JSON.stringify(document.coord)) + formData.append('description', document.description) + formData.append('category', document.category) + console.log(formData) + + const req = new HttpRequest('POST', 'http://localhost:3000/soinumapa/add', formData) + this.http.request(req) + .subscribe( + res => { + console.log(res) + } + ) + // + // this.http.post("http://localhost:3000/soinumapa/add",formData) + // .subscribe( + // res => { + // this.loading=false; + // this.appService.add(res['result'],true); + // console.log(res); + // } + // ); + } + onSubmit() { this.document.setCoord(this.appService.markers) - console.log(this.document); - this.submitted = false + //console.log(this.document); + this.sendEmail(this.document); + this.loading = true; + this.submitted = true } ngOnInit() { @@ -34,3 +86,8 @@ export class AddContentComponent implements OnInit { get diagnostic() { return JSON.stringify(this.document) } } + +/* documentatoin */ +/* +https://nehalist.io/uploading-files-in-angular2/ +*/ diff --git a/src/app/app.component.ts b/src/app/app.component.ts index ba14977..9573dee 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -24,7 +24,7 @@ export class AppComponent { } listenStream() { - let streamMessage = "

Escucha en directo lo que suena en Sartaguda

" + let streamMessage = "

Escucha en directo lo que suena en Sartaguda

" this.appService.add(streamMessage) } diff --git a/src/app/map-box/map-box.component.ts b/src/app/map-box/map-box.component.ts index 8f09f6b..68af423 100644 --- a/src/app/map-box/map-box.component.ts +++ b/src/app/map-box/map-box.component.ts @@ -41,6 +41,10 @@ export class MapBoxComponent implements OnInit { this.buildMap() } + public cleanMarker() { + if (this.activeMarker!=undefined) this.activeMarker.remove() + } + buildMap() { this.map = new mapboxgl.Map({ container: 'map', @@ -82,24 +86,24 @@ export class MapBoxComponent implements OnInit { }); }) }) - - this.map.on('click',(event)=> { - if (this.newMarker!=undefined) this.newMarker.remove() - - var features = this.map.queryRenderedFeatures(event.point, {layers:['clusters','soinumapa']}); - //console.log(features); - if (features.length==0) { - var el = document.createElement('div'); - el.className = 'marker new-marker'; - const coordinates = [event.lngLat.lng, event.lngLat.lat] - // const newMarker = new GeoJson(coordinates, { message : 'new marker' }) - this.appService.addMarker('new marker',coordinates) - this.newMarker = new mapboxgl.Marker(el) - .setLngLat(coordinates) - .addTo(this.map); - } - //console.log(event) - }) + // + // this.map.on('contextmenu',(event)=> { + // if (this.newMarker!=undefined) this.newMarker.remove() + // + // var features = this.map.queryRenderedFeatures(event.point, {layers:['clusters','soinumapa']}); + // //console.log(features); + // if (features.length==0) { + // var el = document.createElement('div'); + // el.className = 'marker new-marker'; + // const coordinates = [event.lngLat.lng, event.lngLat.lat] + // // const newMarker = new GeoJson(coordinates, { message : 'new marker' }) + // this.appService.addMarker('new marker',coordinates) + // this.newMarker = new mapboxgl.Marker(el) + // .setLngLat(coordinates) + // .addTo(this.map); + // } + // //console.log(event) + // }) this.map.on('click','soinumapa', (event) => { // clean old markers diff --git a/src/app/map.ts b/src/app/map.ts index 174177d..940f4e1 100644 --- a/src/app/map.ts +++ b/src/app/map.ts @@ -79,11 +79,15 @@ export class Documento { public author: string, public email: string, public category: string, - public file: string, + public file: File, public description?: string ) {} public setCoord(coord:number[]) { this.coord = new GeoJson(coord) } + + public setFile(file:File) { + this.file = file; + } } diff --git a/src/app/messages/.messages.component.ts.swp b/src/app/messages/.messages.component.ts.swp deleted file mode 100644 index 130e09a..0000000 Binary files a/src/app/messages/.messages.component.ts.swp and /dev/null differ diff --git a/src/app/messages/messages.component.css b/src/app/messages/messages.component.css index 3873f06..0a971ec 100644 --- a/src/app/messages/messages.component.css +++ b/src/app/messages/messages.component.css @@ -9,7 +9,7 @@ div.messages-container { border:#fff solid 0px; margin:20px; color:#fff; - padding:30px 10px; + padding:10px 10px; font-size:0.8em; } @@ -30,7 +30,8 @@ div.messages-container::before { h1 { font-size:1em; } -button { font-family:'Raleway',sans-serif; background:transparent; padding:5px; width:100%; color:#fff; border:#fff solid 2px;} +button.clear { font-family:'Raleway',sans-serif; background:transparent; padding:5px; width:100%; color:#fff; border:#fff solid 2px;} button:hover {background:#fff;color:#000;cursor:pointer;} audio { max-width:90%; margin:auto;} .simple-audioplayer { width:100% !important;max-width:90%;} +button.close { color:#fff; width:100%;padding:5px; margin-bottom:10px; border:0; background:transparent; text-align:right;} diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html index be66584..2c2e6ea 100644 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -1,5 +1,6 @@
+

diff --git a/src/styles.css b/src/styles.css index 5853763..4d9893e 100644 --- a/src/styles.css +++ b/src/styles.css @@ -10,12 +10,13 @@ a { color:#fff; font-weight:bold; cursor:pointer; text-decoration:none;} #map { width:100%;height:100%; position:absolute; top:0; left:0;} .active-marker { - width:50px; - height:50px; + width:5px; + height:5px; border-radius:100%; border:#000 solid 2px; - border-top:0; - animation: hideshow 3s ease infinite; + background:#000; + opacity:0.5; + animation: expand 1s ease infinite; } .new-marker { @@ -45,6 +46,11 @@ box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5); 100% { opacity:0; transform:rotate(360deg);} } +@keyframes expand { + 0% { width:5px; height:5px; } + 100% { width:50px; height:50px; } +} + .marker-player { max-width:100%;margin-top:50px;}