<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<a id="Day1" href="javascript:selectDay(1)">Sunday</a>
<a id="Day2" href="javascript:selectDay(2)">Monday</a>
<a id="Day3" href="javascript:selectDay(3)">Tuesday</a>
<a id="Day4" href="javascript:selectDay(4)">Wednesday</a>
<a id="Day5" href="javascript:selectDay(5)">Thursday</a>
<a id="Day6" href="javascript:selectDay(6)">Friday</a>
<a id="Day7" href="javascript:selectDay(7)">Saturday</a>

<select id="language">
  <option value="47">English</option>
  <option value="52">French</option>
</select>

<hr/>
<div id="results" />
$(function() {
  bmltClientInit('https://virtual.archsearch.org/main_server');
  getServiceBodies(function(serviceBodiesData) {
    serviceBodies = serviceBodiesData;  
    getFormats(function(formatsData) {
      formats = formatsData;
      selectDay(getTodayDayOfWeek()); 
    })
  })
})

var baseURL;
var searchEndpoint = "/client_interface/jsonp/?switcher=";
var myTZ = (new Date()).getTimezoneOffset();
console.log(myTZ)

var bmltClientInit = function(host) {
    this.baseURL = host;
}

var getServiceBodyById = function(id) {
  for (item of serviceBodies) {
    if (item.id == id) {
      return item;
    }
  }
}

var getFormatsFullname = function(formatsAbbreviations) {
  formatsAbbreviationsArray = formatsAbbreviations.split(",");
  formatsFullnameArray = [];
  for (format_key_string of formatsAbbreviationsArray) {
    for (item of formats) {
      if (item.key_string == format_key_string) {
        formatsFullnameArray.push(item["name_string"]);
        continue;
      }
    }
  }
                                       
  return formatsFullnameArray.join(" / ");
}

var getMyTimezone = function() {
  return myTZ;
}

var getDayOfWeek = function(dayint) {
    return ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][dayint];
};

var getTodayDayOfWeek = function() {
    return (new Date()).getDay() + 1;
};

var militaryToStandard = function(value) {
    if (value !== null && value !== undefined){ //If value is passed in
        if(value.indexOf('AM') > -1 || value.indexOf('PM') > -1){ //If time is already in standard time then don't format.
            return value;
        }
        else {
            if(value.length == 8){ //If value is the expected length for military time then process to standard time.
                var hour = value.substring ( 0,2 ); //Extract hour
                var minutes = value.substring ( 3,5 ); //Extract minutes
                var identifier = 'AM'; //Initialize AM PM identifier

                if(hour == 12){ //If hour is 12 then should set AM PM identifier to PM
                    identifier = 'PM';
                }
                if(hour == 0){ //If hour is 0 then set to 12 for standard time 12 AM
                    hour=12;
                }
                if(hour > 12){ //If hour is greater than 12 then convert to standard 12 hour format and set the AM PM identifier to PM
                    hour = hour - 12;
                    identifier='PM';
                }            
                return hour + ':' + minutes + ' ' + identifier; //Return the constructed standard time
            }
            else { //If value is not the expected length than just return the value as is
                return value;
            }
        }
    }
};

var getUTCDate = function() {
  var date = new Date();

  var year = date.getUTCFullYear();
  var month = date.getUTCMonth() + 1; // getMonth() is zero-indexed
  var day = date.getUTCDate();

  month = (month < 10) ? '0' + month : month;
  day = (day < 10) ? '0' + day : day;

  return {
    "year" : year, "month" : month, "day" : day
  };
};

var formatTime = function(time) {
  timearr = time.split(":")
  return timearr[0].length == 1 
    ? "0" + timearr[0] + ":" + timearr[1]
    : timearr[0] + ":" + timearr[1]
};

var parseTime = function(d) {
  var hours = d.getHours();
  var minutes = d.getMinutes();
  
  if (minutes == '59') {
    hours++;
    minutes = 0;
  }

  hours = (hours < 10) ? '0' + hours : hours;
  minutes = (minutes < 10) ? '0' + minutes : minutes;    
  
  return hours + ':' + minutes;
};

var getMeetingsByCity = function(city, callback) {
    getJSON(baseURL + searchEndpoint + "GetSearchResults&meeting_key=location_municipality&meeting_key_value=" + city + "&callback=?", callback);
};

var getMeetingsByServiceBodyId = function(serviceBodyId, callback) {
    getJSON(baseURL + searchEndpoint + "GetSearchResults" + getArrayQueryString(serviceBodyId, "services") + "&callback=?", callback);
};

var getMeetingsByServiceBodyIdAndWeekdayId = function(serviceBodyId, weekdayId, callback) {
    getJSON(baseURL + searchEndpoint + "GetSearchResults" + getArrayQueryString(serviceBodyId, "services") + "&weekdays=" + weekdayId + "&callback=?", callback);
};

var getMeetingsByServiceBodyIdAndCity = function(serviceBodyId, city, callback) {
    getJSON(baseURL + searchEndpoint + "GetSearchResults" + getArrayQueryString(serviceBodyId, "services") + "&meeting_key=location_municipality&meeting_key_value=" + city + "&callback=?", callback);
};

var getMeetingsByFormatAndDay = function(formatId, weekdayId, callback) {
    getJSON(baseURL + searchEndpoint + "GetSearchResults" + getArrayQueryString(formatId, "formats") + "&weekdays=" + weekdayId + "&callback=?", callback);
}

var getServiceBodies = function(callback) {
    getJSON(baseURL + searchEndpoint + "GetServiceBodies&callback=?", callback);
};

var getFormats = function(callback) {
    getJSON(baseURL + searchEndpoint + "GetFormats&callback=?", callback);
}

var getArrayQueryString = function(ids, arrayType) {
    var idString = "";
    if (Array.isArray(ids)) {
        for (var i = 0; i < ids.length; i++) {
            idString += "&" + arrayType + "[]=" + ids[i];
        }
    } else {
        idString = "&" + arrayType + "=" + ids;
    }

    return idString;
};

var getJSON = function(url, callback) {
    var random = Math.floor(Math.random() * 999999);
    var callbackFunctionName = "cb_" + random
    url = url.replace("callback=?", "callback=" + callbackFunctionName);

    window[callbackFunctionName] = function(data) {
        callback(data);
    };

    var scriptItem = document.createElement('script');
    scriptItem.setAttribute('src', url);
    document.body.appendChild(scriptItem);
}

// TODO: There is a bug in that if the date crosses over to tomorrow it displays under the original UTC day.  We should query back one day + also check to see if anything that doesn't match today's day is excluded.
function selectDay(day) {
    $("[id^=Day]").css("font-weight", "")
    $("#Day" + day).css("font-weight", "bold")
    
    getMeetingsByFormatAndDay($("#language").val(), day, function(data) {
        var results = "<h3>Meetings in " + $("#language option:selected").text() + " (Times Are Always Shown In Your Local Time Zone)</h3>"
        var utcDate = getUTCDate();
        for (var i = 0; i < data.length; i++) {
            utcDate = getUTCDate();
            currentDate = new Date();
            meetingTime = utcDate.year + "-" + utcDate.month + "-" + utcDate.day + "T" + formatTime(data[i].start_time) + ":00Z";
            localDate = new Date(meetingTime);
            localTime = parseTime(localDate);            
            sooner = utcDate.day > localDate.getDate();
            later = utcDate.day < localDate.getDate();
          
            day = data[i].weekday_tinyint - 1;
          
            if (sooner) {
              day--;
            } else if (later) {
              day++;
            }
          
            if (day > 6) day = 0;
            if (day < 0) day = 6;
          
            results += "<div id='meeting_name'><b>" + data[i].meeting_name + "</b></div>";
            //results += "<div id='service_body'>" + getServiceBodyById(data[i].service_body_bigint)['name'] + "</div>";
            results += "<div id='day_and_time'>" + getDayOfWeek(day) + " " + militaryToStandard(localTime) + "</div>";
            results += "<div id='formats'>" + getFormatsFullname(data[i].formats) + "</div>";
            results += "<div id='info'>" + infoLinkFormat(data[i].location_info, data[i].formats) + "</div>";
            results += "<div id='comments'>Connection Details: <a target='_blank' href='" + data[i].comments + "'>" + data[i].comments + "</a></div>";
            results += "<p/>";
        }

        $("#results").html(results)
    })
}

function infoLinkFormat(data, dataType) {
  if (dataType.indexOf("PHONE") >= 0) {
    return "<a href='tel:" + data + "'>" + data + "</a>";
  } else if (dataType.indexOf("WEB") >= 0) {
    return "<a href='" + data + "' target='_blank'>" + data + "</a>";
  } else if (dataType.indexOf("SKYPE") >= 0) {
    return "<a href='skype:" + data + "' target='_blank'>skype:" + data + "</a>";
  } else {
    return data;
  }
}


Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.