Javascript, hide/show div based on array of dates-CodePudding

I'm working for a delivery company and the boss wants me to add the daily schedule of the "delivery bus" to the website. The boss wants it to only show the schedule ("bus stops") for the current day. While not a programer myself I found some code online and adjusted it to what I need.

So what I did is put the schedule in different divs, hid them all and use jquery to only show divs based on the date.

The thing is the way I did it, each day is a new date() and I'd need to add about 150 lines of code for each day the bus goes on the road. So, I'm looking for a better solution, perferably to the existing code, because I sort of understand it. I'm looking into creating a array of dates, but so far I'm hitting a wall. As I said I'm not a programer. Any ideas?

window.setInterval(function() {

  var current = new Date();
  var day = new Date("August 22, 2022")
  var day2 = new Date("August 23, 2022")
  var day3 = new Date("August 24, 2022")
  var day4 = new Date("August 25, 2022")

  if (current.getDate() == day.getDate()) {
    $('.Poljubinj').show();
    
  }  else if (current.getDate() == day2.getDate()) {
    $('.Čezsoča').show();
    
  } else if (current.getDate() == day3.getDate()) {
    $('.Podmelec').show();
    
    } else if (current.getDate() == day4.getDate()) {
    $('.Smast').show();

  } else if (current.getDate() != day.getDate()) {
    $('.nic').show();
  }

}, 0);

Working fiddle https://jsfiddle.net/ezdv8rwL/

Just change the date if you're not looking at it today.

CodePudding user response：

The JavaScript Date constructor accepts the following for dates based on numbers: new Date(year, monthIndex, day). You may be able to use a for loop to more dynamically create a bunch of dates.

const days = {}
const today = new Date();

for(let i = 0; i < 7; i  ) {
    day[i]= today.getTime()   i * 24 * 60 * 60 * 1000
}

I'm guessing though this is a weekly schedule, so it may be easier to set it to figure the weekday?

const schedule = {
    0: Poljubinj,
    1: Čezsoča,
    2: Podmelec,
    3: Volce,
    4: nic
}

const today = new Date().getDay();

The .getDay() function gets the day as an integer, where Sunday is considered the first day (with value 0).

Quick lookup:

Sunday: 0
Monday: 1
Tuesday: 2
Wednesday: 3
Thursday: 4
Friday: 5
Saturday: 6

You can replace the check if (current.getDate() == day.getDate()) with a simple if (schedule[today] === [name of the day).

More advanced would be to replace all the if statements with a switch - case

switch(schedule[today]) {
    case [name of the day]:
        showDay(today);
        break;
    default:
        showDay(// number of default day?);
        break;
}

You may add as many "case" lines as you want. A common pitfall with switch-case is that the break is required, as a thing called fallhrough would allow to have code of multiple consecutive cases executed until a break or return is reached.

----- Edit to display the schedule for today, in month -----

To have the schedule display for every day of the month, a lot more data will need to be handled. Below example will assume the schedule is the same every month, disregarding the weekday. Within the schedule object, you may add the number of the day for which the schedule is applicable, followed by the name of the schedule. It is possible to have the same name multiple times, but the number of the day must be unique. Keep in mind to put the name of the schedule in quotes.

const schedule = {
    0: "Poljubinj",
    1: "Čezsoča",
    2: "Podmelec",
    3: "Volce",
    4: ... // keep it going!
}
const today = new Date().getDate(); // Returns the date of month, for example today it would print 22

Using this, all you need to do is this:

${"."   schedule[today]}.show()

Please keep in mind that this breaks if the number is not in the schedule object, so you must ensure everything has been added.

To add a default, which would give you some more freedom:

const schedule = {
    0: "Poljubinj",
    1: "Čezsoča",
    2: "Podmelec",
    3: "Volce",
    4: ... // keep it going!
}
const today = new Date().getDate();
let selectedSchedule = schedule[0] // Set your default

if (today in schedule) {
    selectedSchedule = schedule[today];
}

${"."   selectedSchedule}.show()

It is also possible to add the following optimization to the last line

${`.${selectedSchedule}`}.show()

But I'm well aware this may look confusing, as jquery uses the same symbols as javascript string interpolation.

CodePudding user response：

Here is a potentially simpler solution.

As before you get the current date: const current = new Date();

Then you add an object for each month's schedule:

const scheduleAug = {
22: "Poljubinj", 
23: "Čezsoča", 
// etc. 
};

Then you need just the following to show each day's schedule (using template literals to fetch the relevant city dynamically):

$(`.${scheduleAug[current.getDate()]}`).show();