audiolab/sartaguda-suena
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Cambios en la interfaz y pruebas en el formulario de publicación de archivos

Browse Source
This commit is contained in:
Siroco 2018-09-24 19:56:59 +02:00
parent 46d4c450a1
commit 0a55af2cbd
9 changed files with 113 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/add-content/add-content.component.html
View File

@ -1,13 +1,17 @@
<div class="container" [hidden]="!appService.markers.length">
<div [hidden]="!loading">
Enviando...
</div>
<div [hidden]="!submitted">
<p>Gracias por participar</p>
{{diagnostic}}
</div>
<div [hidden]="submitted">
<h1>Agrega un nuevo sonido</h1>
<p>Publica nuevos contenidos</p>
<h2>Coord: {{appService.markers}}</h2>
{{diagnostic}}
<form (ngSubmit)="onSubmit()" #documentForm="ngForm">
<form (ngSubmit)="onSubmit()" #documentForm="ngForm">
<div class="form-group">
<label for="title">Título</label>
<input type="text" id="title" [(ngModel)]="document.title" name="title" required/>
@ -26,7 +30,11 @@
<option *ngFor="let cat of categories" [value]="cat">{{cat}}</option>
</select>
</div>
<button type="submit" [disabled]="!documentForm.form.valid">Envía</button>
<div class="form-group">
<label for="file">Fichero</label>
<input type="file" id="file" name="file" (change)="onFileChange($event)" required/>
</div>
<button type="submit" [disabled]="documentForm.form.invalid">Envía</button>
<button type="button" (click)="appService.clearMarker()">Cancela</button>
</form>
</div>

65
src/app/add-content/add-content.component.ts
View File

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

2
src/app/app.component.ts
View File

@ -24,7 +24,7 @@ export class AppComponent {
}
listenStream() {
let streamMessage = "<p>Escucha en directo lo que suena en Sartaguda</p><audio controls autoplay preload width=100% class=\"simple-audioplayer\" src=\"http://irratia.zintzilik.net\"></audio>"
let streamMessage = "<p>Escucha en directo lo que suena en Sartaguda</p><audio controls autoplay preload width=100% class=\"simple-audioplayer\" src=\"http://stream.piperrak.cc/sartaguda\"></audio>"
this.appService.add(streamMessage)
}

40
src/app/map-box/map-box.component.ts
View File

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

6
src/app/map.ts
View File

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

BIN
src/app/messages/.messages.component.ts.swp
View File

Binary file not shown.

5
src/app/messages/messages.component.css
View File

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

1
src/app/messages/messages.component.html
View File

@ -1,5 +1,6 @@
<div *ngIf="appService.messages.length" class="messages-container">
<div class="content">
<p><button class="close" (click)="appService.clear()">X</button></p>
<p *ngFor="let m of appService.messages" [innerHTML]="m"></p>
<button *ngIf="appService.button" class="clear" (click)="appService.clear()" title="Confirmación">Entendido</button>
</div>

14
src/styles.css
View File

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