Merge pull request #381 from ScienceForChange/develop

Publicar cambios
ScienceForChange · Nov 27, 2024 · 47ab782 · 47ab782
2 parents 58fbde6 + ff895ed
commit 47ab782
Show file tree

Hide file tree

Showing 27 changed files with 301 additions and 195 deletions.
diff --git a/src/app/modules/admin/study-zone/components/map/study-zone-map.component.ts b/src/app/modules/admin/study-zone/components/map/study-zone-map.component.ts
@@ -3,6 +3,7 @@ import {
   ElementRef,
   EventEmitter,
   inject,
+  OnDestroy,
   Output,
   signal,
   ViewChild,
@@ -19,7 +20,7 @@ import { StudyZoneMapService } from '../../service/study-zone-map.service';
   templateUrl: './study-zone-map.component.html',
   styleUrl: './study-zone-map.component.scss',
 })
-export class StudyZoneMapComponent {
+export class StudyZoneMapComponent  implements OnDestroy{
   private studyZoneMapService = inject(StudyZoneMapService);
 
   @ViewChild('map') mapContainer!: ElementRef;
@@ -126,4 +127,9 @@ export class StudyZoneMapComponent {
       );
     });
   }
+
+  ngOnDestroy(): void {
+    this.studyZoneMapService.map.remove();
+  };
+
 }
diff --git a/src/app/modules/admin/study-zone/components/study-zone-form/study-zone-form.component.html b/src/app/modules/admin/study-zone/components/study-zone-form/study-zone-form.component.html
@@ -259,7 +259,6 @@ <h5 class="m-0">
                             "admin.studyZone.form.contactPhone" | translate
                           }}</label>
                         </span>
-                        <!-- TODO SOLUCIONAR ESTO -->
                         @if(!collaborator.value.logo_data){
                           <p-fileUpload
                             mode="basic"

diff --git a/src/app/modules/map/components/map-layers/map-layers.component.html b/src/app/modules/map/components/map-layers/map-layers.component.html
@@ -20,7 +20,7 @@
       name="files[]"
       chooseLabel="{{ 'map.filters.addGPKP' | translate }}"
       accept=".gpkg,.kml"
-      maxFileSize="20000000"
+      maxFileSize="100000000"
       [multiple]="true"
       [url]="environment.BACKEND_BASE_URL + '/map/gpkg-kml-to-geojson'"
       [auto]="true"

diff --git a/src/app/modules/map/components/map-study-zone-layers/map-study-zone-layers.component.html b/src/app/modules/map/components/map-study-zone-layers/map-study-zone-layers.component.html
@@ -7,7 +7,7 @@
   [closeOnEscape]="true"
 >
 <div
-  class="flex align-items-center mt-3"
+  class="flex align-items-center mt-3 mb-5"
 >
   <p-radioButton
     [inputId]="'studyZoneNull'"
@@ -22,7 +22,7 @@
 </div>
 @for(studyZone of studyZones; track trackById; let i = $index){
   @if(studyZone.is_visible){
-    <div class="flex align-items-center mt-3">
+    <div class="flex align-items-center">
       <p-radioButton
         [inputId]="'studyZone' + studyZone.id"
         name="studyZone"

diff --git a/src/app/modules/map/components/map-study-zone-layers/map-study-zone-layers.component.ts b/src/app/modules/map/components/map-study-zone-layers/map-study-zone-layers.component.ts
@@ -54,7 +54,7 @@ export class MapZoneStudyLayersComponent implements OnInit, OnDestroy {
     this.mapService.eraseAllSZPolygons();
 
     if (layerId === null) {
-      this.observationsService.getAllObservations();
+      this.mapService.getAllMapObservations();
       this.mapService.flyToDefaultBbox();
       return;
     }
@@ -73,12 +73,7 @@ export class MapZoneStudyLayersComponent implements OnInit, OnDestroy {
     let poligonCoordiantes = studyZoneSelected.boundaries.coordinates[0].map((coo:any) => {
       return `${coo[1]} ${coo[0]}`;
     });
-    this.observationsService.getObservationsByPolygonAndDates( poligonCoordiantes, [String(studyZoneSelected.start_date), String(studyZoneSelected.end_date)]).subscribe({
-      error: (error) => {
-        console.error(error);
-      }
-    });
-
+    this.mapService.getObservationsByPolygonAndDates(poligonCoordiantes, [String(studyZoneSelected.start_date), String(studyZoneSelected.end_date)]);
   }
 
   private getBboxFromPolygon(polygon: Number[][]): [[number, number], [number, number]] {

diff --git a/src/app/modules/map/page/map.component.ts b/src/app/modules/map/page/map.component.ts
@@ -30,8 +30,6 @@ export class MapComponent implements AfterViewInit, OnDestroy {
   @ViewChild('mapDiv') mapDivElement!: ElementRef;
   private mapService = inject(MapService);
   private studyZoneService = inject(StudyZoneService);
-  private observationsService = inject(ObservationsService);
-
 
   public showFilters: WritableSignal<boolean> = signal<boolean>(false);
   public showMapLayers: WritableSignal<boolean> = signal<boolean>(false);
@@ -124,8 +122,7 @@ export class MapComponent implements AfterViewInit, OnDestroy {
   }
   ngOnDestroy(): void {
     this.subscriptions.unsubscribe();
-    this.mapService.map = null;
+    this.mapService.map.remove();
     this.mapService.studyZoneDialogVisible$.next(false);
-    this.observationsService.getAllObservations();
   }
 }
diff --git a/src/app/modules/map/service/map.service.ts b/src/app/modules/map/service/map.service.ts
@@ -69,13 +69,10 @@ export class MapService {
     clusterMaxZoom: 17,
   };
   public observationSelected!: Observations;
-  public isOpenObservationInfoModal: BehaviorSubject<boolean> =
-    new BehaviorSubject<boolean>(false);
 
-  public studyZoneSelected$: BehaviorSubject<StudyZone | null> =
-    new BehaviorSubject<StudyZone | null>(null);
-  public studyZoneDialogVisible$: BehaviorSubject<boolean> =
-    new BehaviorSubject<boolean>(false);
+  public isOpenObservationInfoModal: BehaviorSubject<boolean>   = new BehaviorSubject<boolean>(false);
+  public studyZoneSelected$: BehaviorSubject<StudyZone | null>  = new BehaviorSubject<StudyZone | null>(null);
+  public studyZoneDialogVisible$: BehaviorSubject<boolean>      = new BehaviorSubject<boolean>(false);
 
   private defaultBbox:[[number, number], [number, number]] = [[0.048229834542042, 40.416428760865], [3.3736729893935, 42.914194523824]]; // Catalonia bbox
 
@@ -98,37 +95,43 @@ export class MapService {
 
   //Conseguir todos los sonidos en el constructor
   public getAllMapObservations(): void {
-    if (this.mapObservations.length > 0) {
-      this.updateSourceObservations(this.features$.getValue(), this.startPointsFeatures$.getValue());
+    if(this.observationsService.observations$.getValue().length === 0) {      
+      this.observationsService.observations$.subscribe((data) => {
+        this.prepareDataForMap(data);
+      })
       return;
     }
+
+    this.prepareDataForMap(this.observationsService.observations$.getValue());
+
+  }
 
-    this.observationsService.observations$.subscribe((data) => {
-      try {
-        const features = this.observationsService.getLineStringFromObservations(data);
-        const startPoints = this.observationsService.getStartPointsFromObservations(data);
-        this.mapObservations = data.map((obs) => ({
-          id:         obs.id,
-          user_id:    obs.relationships.user.id,
-          user_level: obs.relationships.user.attributes.level,
-          latitude:   obs.attributes.latitude,
-          longitude:  obs.attributes.longitude,
-          created_at: new Date(obs.attributes.created_at),
-          types:      obs.relationships.types.map((type) => type.id),
-          Leq:        obs.attributes.Leq,
-          userType:   obs.relationships.user.type,
-          quiet:      obs.attributes.quiet,
-          influence:  +obs.attributes.influence,
-          path:       obs.relationships.segments,
-        }));
-        this.features$.next(features as Feature[]);
-        this.updateSourceObservations(features as Feature[], startPoints as Feature[]);
-      } catch (error) {
-        console.error(error);
-        throw Error(`Error getting all observations ${error}`);
-      }
-    });
+  private prepareDataForMap(data: Observations[]): void {
+    try {
+      const features = this.observationsService.getLineStringFromObservations(data);
+      const startPoints = this.observationsService.getStartPointsFromObservations(data);
+      this.mapObservations = data.map((obs) => ({
+        id:         obs.id,
+        user_id:    obs.relationships.user.id,
+        user_level: obs.relationships.user.attributes.level,
+        latitude:   obs.attributes.latitude,
+        longitude:  obs.attributes.longitude,
+        created_at: new Date(obs.attributes.created_at),
+        types:      obs.relationships.types.map((type) => type.id),
+        Leq:        obs.attributes.Leq,
+        userType:   obs.relationships.user.type,
+        quiet:      obs.attributes.quiet,
+        influence:  +obs.attributes.influence,
+        path:       obs.relationships.segments,
+      }));
+      this.features$.next(features as Feature[]);
+      this.updateSourceObservations(features as Feature[], startPoints as Feature[]);
+    } catch (error) {
+      console.error(error);
+      throw Error(`Error getting all observations ${error}`);
+    }
   }
+
 
   public updateSourceObservations(features: Feature[], startPointFeatures: Feature[]): void {
     if (!this.isMapReady) return;
@@ -538,13 +541,13 @@ export class MapService {
     // Add event listeners for 'mouseenter' and 'mouseleave' events on layers
     this.map.on('mouseenter', 'LineString', this.mouseEvent.bind(this));
     this.map.on('mouseleave', 'LineString', this.mouseEvent.bind(this));
-    this.map.on('mouseenter', 'studyZone', (e: any) => {
+    /*this.map.on('mouseenter', 'studyZone', (e: any) => {
       this.map.getCanvas().style.cursor = 'pointer';
     });
 
     this.map.on('mouseleave', 'studyZone', (e: any) => {
       this.map.getCanvas().style.cursor = 'inherit';
-    });
+    });*/
 
     this.map.on('click', 'LineString', (e) => {
       const feature = e.features[0];
@@ -556,12 +559,12 @@ export class MapService {
       this.isOpenObservationInfoModal.next(true);
     });
 
-    this.map.on('click', 'studyZone', (e: any) => {
+    /*this.map.on('click', 'studyZone', (e: any) => {
       this.map.getCanvas().style.cursor = 'inherit';
       if (e.features.length > 0) {
         this.showStudyZoneModal(e.features[0].properties.id);
       }
-    });
+    });*/
   }
 
   public flyToDefaultBbox() {
@@ -813,4 +816,10 @@ export class MapService {
     this.selectStudyZone(id);
     this.studyZoneDialogVisible$.next(true);
   }
+
+  getObservationsByPolygonAndDates( polygon: string[], hourDates: [string, string] ){
+    this.observationsService.getObservationsByPolygonAndDates( polygon, hourDates ).subscribe((data) => {
+      this.prepareDataForMap(data);
+    });
+  }
 }
diff --git a/src/app/modules/overview/components/bar-chart/bar-chart.component.html b/src/app/modules/overview/components/bar-chart/bar-chart.component.html
@@ -19,7 +19,7 @@ <h2>{{'overview.barChart.title' | translate}}</h2>
         [maxDate]="today"
       />
     </form>
-    <p-button  label="{{'app.weekdays' | translate }}" [disabled]="timeFilterSelected === timesFilter.WEEKDAYS || !obsFiltered.length" (onClick)="timeFilter(timesFilter.WEEKDAYS)" />
+    <!--p-button  label="{{'app.weekdays' | translate }}" [disabled]="timeFilterSelected === timesFilter.WEEKDAYS || !obsFiltered.length" (onClick)="timeFilter(timesFilter.WEEKDAYS)" /-->
     <p-button  label="{{'app.weeks' | translate }}" [disabled]="timeFilterSelected === timesFilter.WEEKS || !obsFiltered.length" (onClick)="timeFilter(timesFilter.WEEKS)" />
     <p-button  label="{{'app.months' | translate }}" [disabled]="timeFilterSelected === timesFilter.MONTH || !obsFiltered.length" (onClick)="timeFilter(timesFilter.MONTH)" />
     <p-button  label="{{'app.years' | translate }}" [disabled]="timeFilterSelected === timesFilter.YEAR || !obsFiltered.length" (onClick)="timeFilter(timesFilter.YEAR)" />

diff --git a/src/app/modules/soundscape/components/perception-chart/perception-chart.component.ts b/src/app/modules/soundscape/components/perception-chart/perception-chart.component.ts
@@ -1,6 +1,6 @@
-import { Component, HostListener, OnDestroy, OnInit, inject } from '@angular/core';
+import { Component, HostListener, Input, OnDestroy, OnInit, inject } from '@angular/core';
 
-import { Subscription } from 'rxjs';
+import { BehaviorSubject, Subscription } from 'rxjs';
 
 import { TranslateService } from '@ngx-translate/core';
 
@@ -25,12 +25,17 @@ export class PerceptionChartComponent implements OnInit, OnDestroy{
   onResize(event: any) {
     this.chart.resize();
   }
-  private observations!: Observations[];
+
+  private observationsSubject =  new BehaviorSubject<Observations[]>([]);
+  @Input() set filteredObs(value: Observations[]) {
+    this.observationsSubject.next(value);
+  }
+  private observations: Observations[];
+
   private chart: echarts.ECharts;
   private option!: echarts.EChartsCoreOption;
   private data: number[][] = [];
   public pie: number = 0;
-  private observationsService = inject(ObservationsService);
   private translations = inject(TranslateService);
   private observations$!: Subscription;
 
@@ -75,7 +80,7 @@ export class PerceptionChartComponent implements OnInit, OnDestroy{
   ngOnInit(): void {
     let chartDom = document.getElementById('perceptionChart')!;
     this.chart = echarts.init(chartDom);
-    this.observations$ = this.observationsService.observations$.subscribe((observations: Observations[]) => {
+    this.observations$ = this.observationsSubject.subscribe((observations: Observations[]) => {
       this.observations = observations;
       this.data = this.getDataFromObservations();
       this.updateChart();

diff --git a/src/app/modules/soundscape/components/phychoacustics/phychoacustics.component.html b/src/app/modules/soundscape/components/phychoacustics/phychoacustics.component.html
@@ -6,14 +6,13 @@ <h3 class="text-lg">{{'soundscape.physcoAcustic.content.title1' | translate}}</h
         <p>{{'soundscape.physcoAcustic.content.content1' | translate}}</p>
         <h3 class="text-lg">{{'soundscape.physcoAcustic.content.title2' | translate}}</h3>
         <p>{{'soundscape.physcoAcustic.content.content2' | translate}}</p>
-        <h3 class="text-lg">{{'soundscape.physcoAcustic.content.title3' | translate}}</h3>
-        <p>{{'soundscape.physcoAcustic.content.content3' | translate}}</p>
+        <!--h3 class="text-lg">{{'soundscape.physcoAcustic.content.title3' | translate}}</h3-->
+        <!--p>{{'soundscape.physcoAcustic.content.content3' | translate}}</p-->
         <h3 class="text-lg">{{'soundscape.physcoAcustic.content.title4' | translate}}</h3>
         <p>{{'soundscape.physcoAcustic.content.content4' | translate}}</p>
       </div>
     </app-info-modal>
   </div>
-  {{selectedType}}
   <div class="mt-5 flex justify-content-center">
     <p-selectButton
       [options]="buttonOptions"

diff --git a/src/app/modules/soundscape/components/phychoacustics/phychoacustics.component.ts b/src/app/modules/soundscape/components/phychoacustics/phychoacustics.component.ts
@@ -3,10 +3,11 @@ import {
   Component,
   HostListener,
   inject,
+  Input,
   OnDestroy,
   OnInit,
 } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { BehaviorSubject, Subscription } from 'rxjs';
 
 import { TranslateService } from '@ngx-translate/core';
 
@@ -77,13 +78,16 @@ export class PhychoacusticsComponent
   implements OnInit, AfterViewInit, OnDestroy
 {
   private translations = inject(TranslateService);
-  private observationsService = inject(ObservationsService);
 
   @HostListener('window:resize', ['$event'])
   onResize(event: any) {
     this.myChart.resize();
   }
-  private observations: Observations[] = [];
+  private observationsSubject =  new BehaviorSubject<Observations[]>([]);
+  @Input() set filteredObs(value: Observations[]) {
+    this.observationsSubject.next(value);
+  }
+  private observations: Observations[];
   private myChart!: echarts.ECharts;
   private options: EChartsOption;
   private loadingOptions = {
@@ -105,12 +109,12 @@ export class PhychoacusticsComponent
         'soundscape.physcoAcustic.types.sharpness'
       ),
     },
-    {
+    /*{
       value: 'ROUGHNESS',
       label: this.translations.instant(
         'soundscape.physcoAcustic.types.roughtness'
       ),
-    },
+    },*/
     {
       value: 'LOUDNESS',
       label: this.translations.instant(
@@ -134,7 +138,7 @@ export class PhychoacusticsComponent
       BarChart,
       CanvasRenderer,
     ]);
-    const obsSubscription = this.observationsService.observations$.subscribe(
+    const obsSubscription = this.observationsSubject.subscribe(
       (observations: Observations[]) => {
         try {
           this.observations = observations;

diff --git a/src/app/modules/soundscape/components/pressure-chart/pressure-chart.component.ts b/src/app/modules/soundscape/components/pressure-chart/pressure-chart.component.ts
@@ -1,6 +1,6 @@
-import { Component, HostListener, OnDestroy, OnInit, inject } from '@angular/core';
+import { Component, HostListener, Input, OnDestroy, OnInit, inject } from '@angular/core';
 
-import { Subscription } from 'rxjs';
+import { BehaviorSubject, Subscription } from 'rxjs';
 
 import { TranslateService } from '@ngx-translate/core';
 
@@ -25,10 +25,13 @@ export class PressureChartComponent implements OnInit, OnDestroy{
   onResize(event: any) {
     this.chart.resize();
   }
-  private observations!: Observations[];
+  private observationsSubject =  new BehaviorSubject<Observations[]>([]);
+  @Input() set filteredObs(value: Observations[]) {
+    this.observationsSubject.next(value);
+  }
+  private observations: Observations[];
   private chart: echarts.ECharts;
   private option! : echarts.EChartsCoreOption;
-  private observationsService = inject(ObservationsService);
   private translate = inject(TranslateService);
   private observations$!: Subscription;
   public totalObservationTypes:number = 0
@@ -42,7 +45,7 @@ export class PressureChartComponent implements OnInit, OnDestroy{
   ngOnInit(): void {
     let chartDom = document.getElementById('pressureChart')!;
     this.chart = echarts.init(chartDom);
-    this.observations$ = this.observationsService.observations$.subscribe((observations: Observations[]) => {
+    this.observations$ = this.observationsSubject.subscribe((observations: Observations[]) => {
       this.observations = observations;
       this.updateChart();
     });