I am attempting to retrieve all bookings from firebase that match today's date.
Using an *ngFor loop in my HTML, I am displaying all returned orders.
In the firebase database, there are 7 saved bookings, with 2 of them being for today's date. Therefore, all 7 bookings are currently appearing on the screen. However, when I click the button to execute the following function, I only want to display bookings for today.
todayBookings() {
this.ordersData = this.af.list('/orders', {
query: {
orderByChild: 'start',
// equalTo: today
}
});
this.ordersData.subscribe((res) => {
this.orders = res;
});
this.orders.forEach(order => {
var d = new Date();
var curr_date = ("0" + (d.getDate() + 0)).slice(-2);
var curr_month = ("0" + (d.getMonth() + 1)).slice(-2)
var curr_year = d.getFullYear();
var today = `${curr_year}-${curr_month}-${curr_date}`;
var dateOfBooking = order.start.substr(0, 10);
if (dateOfBooking == today) {
this.todaysOrders = order;
var index = this.orders.indexOf(order, 0);
if (index > -1) {
this.orders.splice(index, 1);
}
}
});
this.orders = this.todaysOrders
}
When I console log this: console.log(this.todaysOrders);
I can see the 2 bookings for today displayed in the console:
https://i.sstatic.net/iaRGu.png
Now, the challenge is how to pass these todaysOrders back into the orders array.
I attempted the following:
this.orders.push(this.todaysOrders);
However, it appended all entries and added today's bookings to the list, resulting in 9 entries instead of the expected 7. (all bookings + the 2 bookings for today).
Orders in the database
orders
-Ko2a0zwYPQc-ocfJ1cF
createdAt: 1499003887000
orderId: 34681
partySize: "1"
requirements: "none"
start: "2017-07-02T15:00:44+01:00"
status: "Accepted"
type: "tablebooking"
+ userDetails
userId: "CQbDG6H8ENStlZiaNOGNsvbw2GL2"
-Ko2ay19E7b17UhZ9HAf
-Ko2pmavUZNTKdsr0pv6
-Ko2t6cm35uOtiROeghG
-Ko2tn6iRmkG7Y-OfAcJ
-Ko2u5FrD5ZnIphL9Vno
-KoBtilv2-dj-XmQSQBf
This is the complete class. I have removed other functions used for other tasks on the page.
import { Component, OnInit, AfterViewInit, ElementRef, ViewChild, OnDestroy, OnChanges } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database';
import { Router, ActivatedRoute } from "@angular/router";
import { NgForm } from '@angular/forms';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase';
import { ToastrService } from 'toastr-ng2';
import * as moment from 'moment';
@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.scss']
})
export class CalendarComponent implements OnInit, AfterViewInit, OnChanges {
order: Array<any>;
orders: Array<any>;
ordersData: FirebaseListObservable<any>;
todaysOrders: Array<any>;
color: any;
orderId: any;
@ViewChild('fullcalendar') fullcalendar: ElementRef;
constructor(public af: AngularFireDatabase, public toastr: ToastrService, public router: Router, public authentication: AngularFireAuth) {
this.ordersData = af.list('/orders', {
query: {
orderByChild: 'start',
}
});
this.ordersData.subscribe((res) => {
this.orders = res;
});
}
//Get Todays Bookings
todayBookings() {
this.ordersData = this.af.list('/orders', {
query: {
orderByChild: 'start',
// equalTo: today
}
});
this.ordersData.subscribe((res) => {
this.orders = res;
});
this.orders.forEach(order => {
var d = new Date();
var curr_date = ("0" + (d.getDate() + 0)).slice(-2);
var curr_month = ("0" + (d.getMonth() + 1)).slice(-2)
var curr_year = d.getFullYear();
var today = `${curr_year}-${curr_month}-${curr_date}`;
var dateOfBooking = order.start.substr(0, 10);
if (dateOfBooking == today) {
this.todaysOrders = order;
var index = this.orders.indexOf(order, 0);
if (index > -1) {
this.orders.splice(index, 1);
}
}
});
}
}