From 0a55af2cbd7c37d1e6afc91efc831112637009cf Mon Sep 17 00:00:00 2001 From: Siroco Date: Mon, 24 Sep 2018 19:56:59 +0200 Subject: [PATCH] =?UTF-8?q?Cambios=20en=20la=20interfaz=20y=20pruebas=20en?= =?UTF-8?q?=20el=20formulario=20de=20publicaci=C3=B3n=20de=20archivos?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../add-content/add-content.component.html | 12 +++- src/app/add-content/add-content.component.ts | 65 ++++++++++++++++-- src/app/app.component.ts | 2 +- src/app/map-box/map-box.component.ts | 40 ++++++----- src/app/map.ts | 6 +- src/app/messages/.messages.component.ts.swp | Bin 12288 -> 0 bytes src/app/messages/messages.component.css | 5 +- src/app/messages/messages.component.html | 1 + src/styles.css | 14 ++-- 9 files changed, 113 insertions(+), 32 deletions(-) delete mode 100644 src/app/messages/.messages.component.ts.swp 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 130e09ac469c761db51ec27d8e0491ced4ec3876..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 12288 zcmeI2y>1jS5XT+56yfs)CIN95l-tcm6J3rd?~ zcmbfG;|)MG5l9r&JOw-hv$>BT6s4j;jHSQqS&wJNztt6|ot@bS>l?5b%?cV9g?PF8 zZu|QUA+AS4ctT)Di( zaF_rSU;<2l2`~XBzyz286Znq^gkns*p!=R1-1*XA9{Xb+m^?87Ccp%k025#WOn?b6 z0Vco%m;e)C0{m?TbO;$jt{z!hC8{#C3Cf`idS54)REI!i zQ2G*`wh^=`2<_VAjTS=Jsok4X-4F`jjN^lYg9yt++eU^vk#*_Rva#LYI;ckm~_*u8y)J?a45*8+Q_M- zYFxc2cQP&E1V9sRjbM;J5GVDdur7ei(0kYzw3WAq&E%l-B2ziFm3!#tp)9>=%HzY+ zOl`T$H(|RLoz{mgy{|na&!8vEt+Uai`}iqk8IeM=GhR s`0%&8Ko54E%_(|RwZ})k|GsNWC(fe~GsBAv&#a(H%M4vCty6U57bQvwrT_o{ 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;}