Ndtyjky

For our digital signage system, I'd like to show how long until the next bus departs. I've built the array that holds all the times and successfully (maybe not elegantly or efficiently) gotten it to change all that to show how much time is remaining (positive or negative) until each listed departure.

I need a nudge in the right direction as to how to determine which bus is next based on the current time. If there is a bus in 7 minutes, I only need to display that one, not the next one that leaves in 20 minutes.

I was thinking perhaps a for loop that looks at the array of remaining times and stops the first time it gets to a positive value. I'm concerned that may cause issues that I'm not considering.

Any assistance would be greatly appreciated.

UPDATE: Unfortunately, all the solutions provided were throwing errors on our signage system. I suspect it is running some limited version of Javascript, but thats beyond me. However, the different solutions were extremely helpful just in getting me to think of another approach. I think I've finally come on one, as this seems to be working. I'm going to let it run over the holiday and check it on Monday. Thanks again!

var shuttleOrange = ["09:01", "09:37", "10:03", "10:29", "10:55", "11:21", "11:47", "12:13", "12:39", "13:05", "13:31", "13:57", "14:23", "14:49", "15:25", "15:51", "16:17", "16:57", "17:37", "18:17"];



var hFirst = shuttleOrange[0].slice(0,2);

var mFirst = shuttleOrange[0].slice(3,5);

var hLast = shuttleOrange[shuttleOrange.length-1].slice(0,2);

var mLast = shuttleOrange[shuttleOrange.length-1].slice(3,5);



var theTime = new Date();

var runFirst = new Date();

var runLast = new Date();



runFirst.setHours(hFirst,mFirst,0);

runLast.setHours(hLast,mLast,0);





if ((runFirst - theTime) >= (30*60*1000)) {

return "The first Orange Shuttle will depart PCN at " + shuttleOrange[0] + "."

} else if (theTime >= runLast) {

return "Orange Shuttle Service has ended for the day."

} else {





for(var i=0, l=shuttleOrange.length; i<l; i++)

{

var h = shuttleOrange[i].slice(0,2);

var m = shuttleOrange[i].slice(3,5); 

var departPCN = new Date();



departPCN.setHours(h,m,0);

shuttleOrange[i] = departPCN;

}





for(var i=shuttleOrange.length-1; i--;)

{



//var theTime = new Date();





if (shuttleOrange[i] < theTime) shuttleOrange.splice(i,1)

}





var timeRem = Math.floor((shuttleOrange[0] - theTime)/1000/60);





if (timeRem >= 2) {

return "Departing in " + timeRem + " minutes."

} else if (timeRem > 0 && timeRem < 2) {

return "Departing in " + timeRem + " minute."

} else {



return "Departing now."

}

}

You only need to search once to find the index of the next scheduled time. Then as each time elapses, increment the index to get the next time. Once you're at the end of the array, start again.

A sample is below, most code is setup and helpers. It creates a dummy schedule for every two minutes from 5 minutes ago, then updates the message. Of course you can get a lot more sophisticated, e.g. show a warning when it's in the last few minutes, etc. But this shows the general idea.

window.addEventListener('DOMContentLoaded', function() {



  // Return time formatted as HH:mm

  function getHHmm(d) {

    return `${('0'+d.getHours()).slice(-2)}:${('0'+d.getMinutes()).slice(-2)}`;

  }



  var sched = ["09:01", "09:37", "10:03", "10:29", "10:55", "11:21", "11:47",

                "12:13", "12:39", "13:05", "13:31", "13:57", "14:23", "14:49",

                "15:25", "15:51", "16:17", "16:57", "17:37", "18:17","21:09"];

  var msg   = '';

  var msgEl = document.getElementById('alertInfo');

  var time  = getHHmm(new Date());

  var index = 0;

  

  // Set index to next scheduled time, stop if reach end of schedule

  while (time.localeCompare(sched[index]) > 0 && index < sched.length) {

    ++index;

  }

  

  function showNextBus(){

    var time = getHHmm(new Date());

    var schedTime;

    

    // If run out of times, next scheduled time must be the first one tomorrow

    if (index == sched.length && time.localeCompare(sched[index - 1]) > 0) {

      msg = `Current time: ${time} - Next bus: ${sched[0]} tomorrow`;

    

    // Otherwise, show next scheduled time today

    } else {

      // Fix index if rolled over a day

      index = index % sched.length;

      schedTime = sched[index];

      msg = `Current time: ${time} - Next bus: ${schedTime}`;

      

      if (schedTime == time) msg += ' DEPARTING!!';

      

      // Increment index if gone past this scheduled time

      index += time.localeCompare(schedTime) > 0? 1 : 0;

    }

    

    msgEl.textContent = msg;

  

    // Update message each second

    // The could be smarter, using setInterval to schedule running at say 95%

    // of the time to the next sched time, but never more than twice a second

    setInterval(showNextBus, 1000);

  }

  

  showNextBus();

}, false);

<div id="alertInfo"></div>

Edit

You're right, I didn't allow for the case where the current time is after all the scheduled times on the first running. Fixed. I also changed all the string comparisons to use localeCompare, which I think is more robust. Hopefully the comments are sufficient.

I have used filter for all shuttle left after the right time and calculated how much time left for the first one.

var shuttleOrange = ["09:01", "09:37", "10:03", "10:29", "10:55", "11:21", "11:47", "12:13", "12:39", "13:05", "13:31", "13:57", "14:23", "14:49", "15:25", "15:51", "16:17", "16:57", "17:37", "18:17"];



var d = new Date();

var h = d.getHours();

var m = d.getMinutes();



var remainShuttle = shuttleOrange.filter(bus => bus.substring(0,2) > h || (bus.substring(0,2) == h && bus.substring(3,5) > m));



var leftMinutes = (parseInt(remainShuttle[0].substring(0,2))*60 + parseInt(remainShuttle[0].substring(3,5))  - (parseInt(h) *60 + parseInt(m)));



console.log(parseInt(leftMinutes / 60) + " hours and " + leftMinutes % 60 +" minutes left for next shuttle");