feat: implement previous and next for reservations chart

RefuAPP · Dec 13, 2023 · f262d4d · f262d4d
1 parent 98d5f43
commit f262d4d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/app/src/app/components/reservations-chart/reservations-chart.component.html b/app/src/app/components/reservations-chart/reservations-chart.component.html
@@ -1,6 +1,14 @@
 <h3 class="ion-padding-start" style="margin-bottom: 30px">
   {{ "REFUGE.OCCUPATION.HISTORIAL" | translate }}
 </h3>
+<ion-row style="margin-bottom: 10px">
+    <ion-button class="close-button" (click)="previousWeek()">
+      <ion-icon name="caret-back-outline"></ion-icon>
+    </ion-button>
+    <ion-button class="close-button" (click)="nextWeek()">
+      <ion-icon name="caret-forward-outline"></ion-icon>
+    </ion-button>
+</ion-row>
 <div class="modal-card">
   <ngx-charts-bar-vertical
     #verticalBarChart

diff --git a/app/src/app/components/reservations-chart/reservations-chart.component.ts b/app/src/app/components/reservations-chart/reservations-chart.component.ts
@@ -24,6 +24,8 @@ export class ReservationsChartComponent implements OnInit {
   todayMonth = new Date().getMonth() + 1;
   today = new Date().getDate().toString() + '/' + this.todayMonth.toString() + '/' + new Date().getFullYear().toString();
 
+  offset = 0;
+
   formattedChartReservations: {
     name: string;
     value: number;
@@ -68,8 +70,11 @@ export class ReservationsChartComponent implements OnInit {
   }
 
   ngOnInit() {
+    this.updateChart()
+  }
 
-    this.reservationService.getWeekReservationsForRefuge(this.refuge.id, 0).subscribe({
+  private updateChart() {
+    this.reservationService.getWeekReservationsForRefuge(this.refuge.id, this.offset).subscribe({
       next: (response) => {
         this.chartReservations = response;
         this.formatChartReservations();
@@ -80,4 +85,14 @@ export class ReservationsChartComponent implements OnInit {
       }
     });
   }
+
+  previousWeek() {
+    this.offset--;
+    this.updateChart()
+  }
+
+  nextWeek() {
+    this.offset++;
+    this.updateChart()
+  }
 }