Methods for comparing the current date and time to a specific time stored in a database

Question

Methods for comparing the current date and time to a specific time stored in a database

A database table contains the following values:

 "295fc51f6b02d01d54a808938df736ed" : {
    "author" : "James Iva",
    "authorID" : "JBvLC3tCYCgFeIpKjGtSwBJ2scu1",
    "geometry" : {
      "latitude" : 29.4241219,
      "longitude" : -98.49362819999999
    },
    "listDate" : 1482331706209,
    "openHours" : {
      "Friday" : {
        "closeTime" : "17:00",
        "openTime" : "09:00",
        "status" : true
      },
      "Monday" : {
        "closeTime" : "17:08",
        "openTime" : "09:00",
        "status" : true
      },
      "Saturday" : {
        "closeTime" : "17:00",
        "openTime" : "09:00",
        "status" : true
      },
      "Sunday" : {
        "closeTime" : "17:00",
        "openTime" : "10:00",
        "status" : true
      },
      "Thursday" : {
        "closeTime" : "17:00",
        "openTime" : "09:21",
        "status" : true
      },
      "Tuesday" : {
        "closeTime" : "17:00",
        "openTime" : "04:00",
        "status" : false
      },
      "Wednesday" : {
        "closeTime" : "17:00",
        "openTime" : "10:00",
        "status" : false
      }
    },
    "pPhone" : "no_phone",
    "placeAdd" : "San Antonio, TX, USA",
    "placeCat" : "Education"
  }
}

The task at hand is to determine if the place is currently open (status is true) and display a message like the following in the template:

IT'S THURSDAY 4:12PM - WE'RE OPEN!

How can this be achieved using angular2?

Below is the code used to subscribe and retrieve data from a service:

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
        this.id = params['id'];
        let str = params['string'];
       // Retrieve Pet with Id route param
       this._placesService.findPetById(this.id).subscribe(place => {
         this.place = place; //Here should be the opening data!

       });
});
}

javascript angular typescript

Answer 1

Answer №1

To gain insights on how to complete this task, refer to the following:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <br />
      {{ opening }}
    </div>
  `,
})
export class App {
  name:string;
  opening: string;

  constructor() {
    this.name = 'Angular2'

    this._refresh();
  }

  private _getDayName(): string {
    return new Date().toLocaleString("en-us", { weekday: 'long' });
  }

  // converts string-times into Date and checks if its opened ..
  private _isOpen(todaysOpeningData: any): bool {
    const curDate = new Date();
    const open = new Date();
    const close = new Date();

    // set opening time
    open.setHours(+todaysOpeningData.openTime.split(':')[0]);
    open.setMinutes(+todaysOpeningData.openTime.split(':')[1]);

    // set closing time
    close.setHours(+todaysOpeningData.closeTime.split(':')[0]);
    close.setMinutes(+todaysOpeningData.closeTime.split(':')[1]);

    // check if its opened !
    return curDate >= open && curDate <= close;
  }

  // check and build string ..
  private _checkOpeningHours(data: any): string {
    const curDayName = this._getDayName(); // get current day name
    const todaysOpeningData = openingdata.openHours[curDayName]; // get opening time for today with current day name

    if (!todaysOpeningData) return "ERROR!"; // there are no opening-times for today?
    if (!todaysOpeningData.status) return `IT'S ${curDayName.toUpperCase()} - WE ARE CLOSED TODAY!`; // we are closed entirely today !

    return `IT'S ${curDayName.toUpperCase()}, ${new Date().toLocaleString("en-US", { hour: '2-digit', minute: '2-digit' })} - ${this._isOpen(todaysOpeningData) ? 'WE ARE OPEN' : 'SORRY, WE ARE CLOSED'}!`;
  }

  private _refresh() {
    this.opening = this._checkOpeningHours(openingdata.openHours[this._getDayName()]);
    console.log(this.opening);

    setTimeout(() => this._refresh(), 60 * 1000);
  }
}

live-demo: https://plnkr.co/edit/R5fk7eJrltGx2zOuVhuz?p=preview

UPDATE:

Utilize the code snippet below:

this.sub = this.route.params.subscribe(params => {
   this.id = params['id'];
   let str = params['string'];

   // Retrieve Pet with Id route param
   this._placesService
      .findPetById(this.id)
      .subscribe(place => {
         this.place = place; //Here should be the opening data!

         // assuming that 'this.id' is '295fc51f6b02d01d54a808938df736ed'
         this.yourTargetVariable = this._checkOpeningHours(place[this.id]);
   });
});

Answer 2

To gain insights on how to complete this task, refer to the following:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <br />
      {{ opening }}
    </div>
  `,
})
export class App {
  name:string;
  opening: string;

  constructor() {
    this.name = 'Angular2'

    this._refresh();
  }

  private _getDayName(): string {
    return new Date().toLocaleString("en-us", { weekday: 'long' });
  }

  // converts string-times into Date and checks if its opened ..
  private _isOpen(todaysOpeningData: any): bool {
    const curDate = new Date();
    const open = new Date();
    const close = new Date();

    // set opening time
    open.setHours(+todaysOpeningData.openTime.split(':')[0]);
    open.setMinutes(+todaysOpeningData.openTime.split(':')[1]);

    // set closing time
    close.setHours(+todaysOpeningData.closeTime.split(':')[0]);
    close.setMinutes(+todaysOpeningData.closeTime.split(':')[1]);

    // check if its opened !
    return curDate >= open && curDate <= close;
  }

  // check and build string ..
  private _checkOpeningHours(data: any): string {
    const curDayName = this._getDayName(); // get current day name
    const todaysOpeningData = openingdata.openHours[curDayName]; // get opening time for today with current day name

    if (!todaysOpeningData) return "ERROR!"; // there are no opening-times for today?
    if (!todaysOpeningData.status) return `IT'S ${curDayName.toUpperCase()} - WE ARE CLOSED TODAY!`; // we are closed entirely today !

    return `IT'S ${curDayName.toUpperCase()}, ${new Date().toLocaleString("en-US", { hour: '2-digit', minute: '2-digit' })} - ${this._isOpen(todaysOpeningData) ? 'WE ARE OPEN' : 'SORRY, WE ARE CLOSED'}!`;
  }

  private _refresh() {
    this.opening = this._checkOpeningHours(openingdata.openHours[this._getDayName()]);
    console.log(this.opening);

    setTimeout(() => this._refresh(), 60 * 1000);
  }
}

live-demo: https://plnkr.co/edit/R5fk7eJrltGx2zOuVhuz?p=preview

UPDATE:

Utilize the code snippet below:

this.sub = this.route.params.subscribe(params => {
   this.id = params['id'];
   let str = params['string'];

   // Retrieve Pet with Id route param
   this._placesService
      .findPetById(this.id)
      .subscribe(place => {
         this.place = place; //Here should be the opening data!

         // assuming that 'this.id' is '295fc51f6b02d01d54a808938df736ed'
         this.yourTargetVariable = this._checkOpeningHours(place[this.id]);
   });
});

Methods for comparing the current date and time to a specific time stored in a database

Answer №1

Similar questions

Is there a way to create an HTML select element where each option has a unique background color, and will display properly

How to effectively manage errors in TypeScript using RxJS?

Select checkboxes by clicking a button that matches the beginning of a string in JavaScript

What is the best way to restructure this deeply nested JSON information?

Is it feasible to use JQuery to automatically scroll a DIV with scrollbars to the very bottom?

Developing client-side components with NextJS

How can I switch between different images using jQuery?

Navigating through each element of an array individually by using the onClick function in React

ability to reach the sub-element dictionaries in typescript

Twitter API causing issues with setTimeout function in Node.js

I attempted to implement a CSS and Typescript animation for a sliding effect, but unfortunately, it isn't functioning

Do I need to use Node.js for Angular 2, or can I run it on an Apache server instead

Angular's nested arrays can be transformed into a grid interface with ease

Looking for advice on using the ternary operator in your code? Let us

Turn off Typescript compilation in Visual Studio for a webpage

Jquery problem: dealing with empty spaces

Save a CSV file into a list, locate a specific key within the list, and retrieve the fourth value associated with that key

Is it possible to consolidate geometry in each frame during the rendering process using three.js?

Using window.open and appending a new feature to it

Data is not being displayed in the Angular table