cfd-tribute.js
// Add cfd tribute initialization function to onload
window.onload = function() {
cfdInit();
};
var cfdTributeMap;
var cfdData = [];
var cfdMarkers = [];
var CFD_SPREADSHEET = 'https://docs.google.com/spreadsheets/d/1rOgUf2f6PwxUKVUZ9RgmO6Ulhh5PquNuFvNROovvd1w/pubhtml';
// Called on page load
function cfdInit() {
Tabletop.init({
key: CFD_SPREADSHEET,
callback: cfdShowInfo,
simpleSheet: true
});
jQuery('.data-filter').change(function() {
cfdUpdateInfo({
park: jQuery('#shelter-filter-parks').val(),
type: jQuery('#shelter-filter-types').val()
});
})
}
function cfdInitMap() {
cfdTributeMap = new google.maps.Map(document.getElementById('insivia-frmp-shelter-map'), {
center: { lat: 39.715654, lng: -84.191239 },
zoom: 8
});
}
function cfdUpdateInfo(dataFilters) {
let filters = Object.assign({}, dataFilters);
for (var i = 0; i < cfdMarkers.length; i++) {
if ((filters.park && filters.park !== cfdData[cfdMarkers[i].elementIndex].MetroPark) ||
(filters.type && filters.type !== cfdData[cfdMarkers[i].elementIndex].Type)) {
cfdMarkers[i].setMap(null);
}
else {
cfdMarkers[i].setMap(cfdTributeMap);
}
}
jQuery('.cfd-result-row').addClass('hidden-row');
jQuery('.cfd-result-row' + (filters.park ? '[data-park="' + filters.park + '"]' : '') + (filters.type ? '[data-type="' + filters.type + '"]' : '')).removeClass('hidden-row');
}
function cfdShowInfo(data, tabletop) {
console.log('Loaded ' + data.length + ' tribute items...');
let uniqueParks = [];
let uniqueTypes = [];
let bounds = new google.maps.LatLngBounds();
data.forEach(function(elem) {
if (elem) {
cfdData.push(elem);
let lat = parseFloat(elem.Latitude);
let lon = parseFloat(elem.Longitude);
if (lat && lon) {
var marker = new google.maps.Marker({
position: {lat: lat, lng: lon},
map: cfdTributeMap,
title: elem.MetroPark + " " + elem.Type + ': ' + elem['Location Description'],
});
marker.elementIndex = cfdData.length - 1;
var img_html = '';
if (elem['Photo link'] !== '') {
var file_id = elem['Photo link'].slice(elem['Photo link'].indexOf("=") + 1); // exploiting the fact the file id is the only query parameter
var asset_url = "https://drive.google.com/uc?export=view&id=" + file_id;
img_html = '<a href="'+ asset_url + '" data-lightbox="image-1" data-title="'+elem['Location Description']+'"><img src="' + asset_url + '"" width="64" height="48"></img></a>';
}
var purchase_html = '<a class="blue-btn btn reserve-now" href="tribute-checkout?item='+elem['MetroPark']+elem['Type']+elem['Location Description']+'&price='+elem['Cost']+'">Purchase Now</a>';
var contentString =
'<div class="marker-content">' +
'<h1>' + elem.Type + '</h1>' +
'<span>' + elem.Cost + '</span><br>' +
'<span><strong>' + elem.MetroPark + '</strong></span><br>' +
'<span>' + elem['Location Description'] + '</span><br>' +
'<span><strong>Status:</strong> ' + elem.Status + '</span><br>' +
'<div>' + img_html + '</div>' +
'<div>' + purchase_html + '</div>'
'</div>';
marker.infowindow = new google.maps.InfoWindow({
content: contentString
});
marker.addListener('click', function() {
for (var i = 0; i < cfdMarkers.length; i++) {
cfdMarkers[i].infowindow.close()
}
if (marker.infowindow.map) {
marker.infowindow.close();
} else {
marker.infowindow.open(cfdTributeMap, marker);
}
});
cfdMarkers.push(marker);
bounds.extend({lat: lat, lng: lon});
}
// track unique parks and add an item to the filter for each
if (elem.MetroPark && uniqueParks.indexOf(elem.MetroPark) === -1) {
uniqueParks.push(elem.MetroPark);
jQuery('#shelter-filter-parks').append('<option value="' + elem.MetroPark + '">' + elem.MetroPark + '</option>');
}
// track unique types and add an item to the filter for each
if (elem.Type && uniqueTypes.indexOf(elem.Type) === -1) {
uniqueTypes.push(elem.Type);
jQuery('#shelter-filter-types').append('<option value="' + elem.Type + '">' + elem.Type + '</option>');
}
}
var template = jQuery('#cfd-tribute-result-template').html();
var row = jQuery(template);
row.find('.insivia-frmp-list-item-type').text(elem.Type);
row.find('.insivia-frmp-list-item-location').text('at ' + elem.MetroPark);
row.find('.insivia-frmp-list-item-cost').text(elem.Cost);
row.find('.insivia-frmp-list-item-location-description').html('<strong>Location:</strong> ' + elem['Location Description']);
row.find('.insivia-frmp-list-item-location-status').html('<strong>Status:</strong> ' + elem.Status);
row.find('.insivia-frmp-list-item-reserve-now-wrapper').html('<a class="blue-btn btn reserve-now" href="tribute-checkout?item='+elem['MetroPark']+elem['Type']+elem['Location Description']+'&price='+elem['Cost']+'">Purchase Now</a>');
if (elem['Photo link'] !== '') {
var file_id = elem['Photo link'].slice(elem['Photo link'].indexOf("=") + 1); // exploiting the fact the file id is the only query parameter
var asset_url = "https://drive.google.com/uc?export=view&id=" + file_id;
row.find('.insivia-frmp-gallery-link').html('<a href="'+ asset_url + '" data-lightbox="image-1" data-title="'+elem['Location Description']+'"><img src="' + asset_url + '"" width="64" height="48"></img></a>');
} else{
row.find('.insivia-frmp-gallery-link').remove();
}
row.attr('data-type', elem.Type);
row.attr('data-park', elem.MetroPark);
if (elem.Status !== 'Taken') {
jQuery('#tribute-searchresults').append(row);
}
});
if (!bounds.isEmpty()) {
cfdTributeMap.fitBounds(bounds);
}
}