index.js6

// this page's HTML template with the [hash] cache-buster
// and the only stylesheet
require('./index.scss');
require('./index.src.html');

//
// detect someone using this URL without HTTPS and redirect them to the HTTPS site
//

if (window.location.protocol == 'http:' && window.location.hostname != 'localhost') {
    const newurl = window.location.href.replace(/^http:/, 'https:');
    window.location.href = newurl;
}

//
// some polyfills and extensions
//

// JS's Date objects are weak: only way to get YYYY-MM-DD string is to use toISOFormat() which fudges the time zone...
Date.prototype.YMD = function () {
    const y = 1900 + this.getYear();
    const m = 1 + this.getMonth();
    const d = this.getDate();
    return `${y}-${m >= 10 ? m : '0'+m}-${d >= 10 ? d : '0'+d}`;
};

// a function for calculating distance between two [lat, lng] tuples
function haversineDistance(latlng1, latlng2) {
    function toRad(x) {
        return x * Math.PI / 180;
    }

    const dLat = toRad(latlng2[0] - latlng1[0]);
    const dLon = toRad(latlng2[1] - latlng1[1]);
    const lat1 = toRad(latlng1[0]);
    const lat2 = toRad(latlng2[0]);

    //const R = 6371000; // meters
    const R = 3960; // miles

    const a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    return R * c;
}

//
// constants
//

// map JS Date weekday (0-6, 0=Sunday) to match our table values (Sun, Wed, Fri, etc)
const WEEKDAYS_LOOKUP = [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', ];

// API key for Airtable
// USE A READ-ONLY USER because this could become visible to anyone who views the source
const AIRTABLE_API_KEY = "keybrmB5yUbxu9uRU";

// the URL of the table
// which includes the account hash and URL-encoded table name
const AIRTABLE_SEARCH_URL = "https://api.airtable.com/v0/appHz8xpayH3nmscX/All%20Services";

// escapes airtable injection and xss
const DISALLOWED_SEARCH_TERMS = ['(', ')', '<', '>'];

// the list of services offered for selection
// this MUST match the domain values in the Airtable
// DANGER! Airtable uses substring matching so one could get false matches,
// e.g. Health and Mental Health would both match "Health", and there would be no way to fetch only Health records (maybe some postprocessing?)
// so just don't do it! use distinct-enough values that substrings won't match
// sorry but that's the degree of Airtable's support for multiple-choice values
const SERVICES_OFFERED = [
    "Health Care",
    "Restroom / Shower",
    "Bedding / Clothing",
    "Phone / Computer",
    "Housing / Shelter",
    "Legal",
    "Drop In",
    "Food",
    "Mail",
    "Referrals"
];

const SERVICES_MAP = {
    "Health Care" : ["Dental", "Health Care", "Medical", "Mental Health", "Substance Abuse"],
    "Restroom / Shower" : ["Restroom", "Shower"],
    "Bedding / Clothing" : ["Clothing/Blankets/Sleeping Bag", "Laundry"],
    "Phone / Computer" : ["Phone", "Computer"],
    "Housing / Shelter" : ["Housing", "Shelter"],
    "Legal" : ["Case Management", "Legal"],
    "Drop In" : ["Drop In"],
    "Food" : ["Food"],
    "Mail" : ["Mail"],
    "Referrals" : ["Referrals"]
};


// the URL where one may contact to report bugs; we just use a mailto link whichnwork A-OK on mobile
const CONTACT_URL = "mailto:dorothydayhouse@gmail.com?subject=Feedback on eastbay.homeless-connection.org";

//
// AngularJS with a controller in ES2015 class syntax
//

class PageController {
    // match this argument list to the $inject list provided below... or weird things will happen
    constructor($scope, $http, $window, $timeout) {
        // injections we want to pass into other methods (sigh)
        this.$scope = $scope;
        this.$http = $http;
        this.$timeout = $timeout;
        this.$window = $window;

        // cache some dates used for calendar date picker and date buttons
        // used for a minimum date allowed, as well as "is the selected date tomorrow?"
        this.today = new Date();

        this.tomorrow = new Date();
        this.tomorrow.setDate(this.tomorrow.getDate() + 1);

        // initial search-and-results state
        this.search = {
            // search params: date and services
            services: [],
            date: null,
            // search results and having in fact ever performed a search
            results: [],
            sortby: 'time',  // "time" or "distance"
            done: false,
        };
        // application state stuff
        this.busy    = false;       // are we busy?
        this.showmap = false;       // should we be showing results the map? if not, then the list

        // assign some constants into scope so we can use them to build the UI
        this.services_list = SERVICES_OFFERED;
        this.email_contact = CONTACT_URL;

        // start watching our location: null for unknown, or [ lat, lng ]
        // we use this to update a marker on the map, and to sort the list by what's closest
        this.geolocation = [ 0, 0 ];
        navigator.geolocation.watchPosition(
            (position) => {
                $scope.$evalAsync(() => {
                    this.geolocation = [ parseFloat(position.coords.latitude), parseFloat(position.coords.longitude) ];
                });
            },
            (error) => {
              console.warn(`Geolocation: ${error.message}`);
            },
            {
                enableHighAccuracy: true,
            }
        );

        $scope.$watchCollection(() => this.geolocation, this.updateGeolocationResultsList(), true);
        $scope.$watchCollection(() => this.geolocation, this.updateGeolocationMapmarker(), true);

        // start the map
        this.resultsmap = new google.maps.Map(document.getElementById('resultsmap'), {
            center: new google.maps.LatLng(0, 0),
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            scrollwheel: false,
            fullscreenControl: false,
            streetViewControl: false,
            zoomControlOptions: {
                position: google.maps.ControlPosition.TOP_RIGHT,
            },
            mapTypeControlOptions: {
                position: google.maps.ControlPosition.TOP_RIGHT,
                mapTypeIds: [google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.HYBRID ]
            },
            gestureHandling: "greedy",
        });

        google.maps.event.addListenerOnce(this.resultsmap, 'idle', function() {
            this.mapTypes[google.maps.MapTypeId.HYBRID].name = 'Photo'; // hack to rename the layer's name in the control
        });

        this.resultsmap.youarehere = new google.maps.Marker({
            position: { lat: 0, lng: 0 },
            title: "You Are Here",
            icon: 'images/youarehere.svg',
        });

        this.resultsmap.locations = [];
        $scope.$watch(() => this.search.results, this.redrawLocationMarkers(), true);

        // map custom controls: zoom to my location, zoom to region, Mapbox + OSM credits
        function makeCustomControl(controlDiv, map) {}

        var controlDiv1 = document.getElementById('GeolocationControl');
        var newControl1 = new makeCustomControl(controlDiv1, this.map);
        this.resultsmap.controls[google.maps.ControlPosition.RIGHT_TOP].push(controlDiv1);

        var controlDiv2 = document.getElementById('DetailsControl');
        var newControl2 = new makeCustomControl(controlDiv2, this.map);
        this.resultsmap.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(controlDiv2);

        // add map workarounds: they hate being invisible and malfunction strangely
        // tell GMap that its size has changed (even though it has not)
        angular.element($window).on('resize', () => {
            if (! this.showmap) return;

            $timeout(() => {
                google.maps.event.trigger(this.resultsmap, 'resize');
                this.resultsmap.setCenter( this.resultsmap.getCenter() );
            }, 100);
        });

        $scope.$watch(() => this.showmap, () => {
            if (this.showmap) {
                angular.element($window).triggerHandler('resize');
            }
        });
    }

    openDatePicker () {
        $('#modal_datepicker').modal('show');
    }
    closeDatePicker () {
        $('#modal_datepicker').modal('hide');
    }
    pickDate (which) {
        // accepts a named day (today or tomorrow) or "date" to pick one
        switch (which) {
            case 'today':
                this.search.date = this.today;
                break;
            case 'tomorrow':
                this.search.date = this.tomorrow;
                break;
            case 'date':
                this.openDatePicker(); // has a change handler which will set search.date
                break;
            case 'clear':
                this.search.date = null;
                break;
        }
    }

    decreaseFontSize() {
        if (this.search.done === false) {
            return;
        }
        var fields = ['div.times', 'div.name', 'div.address'];
        for (var f = 0; f < fields.length; f++) {
            var li = document.getElementById('resultslist').querySelectorAll('ul li ' + fields[f]);
            for (var i = 0; i < li.length; i++) {
                if (li[i].style.fontSize === '') {
                    li[i].style.fontSize = '18px';
                }
                if (li[i].style.fontSize === '18px') {
                    continue;
                }
                var dec1 = parseInt(li[i].style.fontSize.slice(0, li[i].style.fontSize.indexOf('p'))) - 3;
                li[i].style.fontSize = dec1.toString() + 'px';
            }
        }
        var details = document.getElementById('resultslist').querySelectorAll('ul li div.details');
        for (var j = 0; j < details.length; j++) {
            if (details[j].style.fontSize === '') {
                details[j].style.fontSize = '15px';
            }
            if (details[j].style.fontSize === '15px') {
                continue;
            }
            var dec2 = parseInt(details[j].style.fontSize.slice(0, details[j].style.fontSize.indexOf('p'))) - 3;
            details[j].style.fontSize = dec2.toString() + 'px';
        }
        var services = document.getElementsByClassName('serviceterms indent');
        for (var k = 0; k < services.length; k++) {
            for (var l = 0; l < services[k].children.length; l++) {
                if (services[k].children[l].style.fontSize === '') {
                    services[k].children[l].style.fontSize = '13px';
                }
                if (services[k].children[l].style.fontSize === '13px') {
                    continue;
                }
                var dec3 = parseInt(services[k].children[l].style.fontSize.slice(0, services[k].children[l].style.fontSize.indexOf('p'))) - 3;
                services[k].children[l].style.fontSize = dec3.toString() + 'px';
            }
        }
    }

    increaseFontSize() {
        if (this.search.done === false) {
            return;
        }
        var fields = ['div.times', 'div.name', 'div.address'];
        for (var f = 0; f < fields.length; f++) {
            var li = document.getElementById('resultslist').querySelectorAll('ul li ' + fields[f]);
            for (var i = 0; i < li.length; i++) {
                if (li[i].style.fontSize === '') {
                    li[i].style.fontSize = '18px';
                }
                var inc1 = parseInt(li[i].style.fontSize.slice(0, li[i].style.fontSize.indexOf('p'))) + 3;
                li[i].style.fontSize = inc1.toString() + 'px';
            }
        }
        var details = document.getElementById('resultslist').querySelectorAll('ul li div.details');
        for (var j = 0; j < details.length; j++) {
            if (details[j].style.fontSize === '') {
                details[j].style.fontSize = '15px';
            }
            var inc2 = parseInt(details[j].style.fontSize.slice(0, details[j].style.fontSize.indexOf('p'))) + 3;
            details[j].style.fontSize = inc2.toString() + 'px';

        }
        var services = document.getElementsByClassName('serviceterms indent');
        for (var k = 0; k < services.length; k++) {
            for (var l = 0; l < services[k].children.length; l++) {
                if (services[k].children[l].style.fontSize === '') {
                    services[k].children[l].style.fontSize = '13px';
                }
                var inc3 = parseInt(services[k].children[l].style.fontSize.slice(0, services[k].children[l].style.fontSize.indexOf('p'))) + 3;
                services[k].children[l].style.fontSize = inc3.toString() + 'px';
            }
        }
    }

    performSearch () {
        // check required
        if (! this.search.services.length && !this.search.searchword) return alert("Select the help you are trying to find.");
        if (! this.search.date) return alert("Select a date.");
        if (this.search.services.length && this.search.searchword) {
            this.search.searchword = '';
        }
        if (this.search.searchword) {
            for (let i = 0; i < this.search.searchword.length; i++) {
                if (DISALLOWED_SEARCH_TERMS.includes(this.search.searchword.charAt(i))) {
                    return alert("Invalid search. Please try again.");
                }
            }
        }

        // about to do a search; if we're showing any details for a location, they're no longer useful
        this.resultdetails = null;

        // compose the filter formula
        // the syntax is weird, and the documentation is quite poor, but here's a start...
        // https://support.airtable.com/hc/en-us/articles/203255215-Formula-Field-Reference
        // super brief overviews of some gotchas:
        // * syntax for a giant and is: AND( clause1, clause2, clause3, ...)
        // * field names with spaces should be wrapped in {}
        // * there is no IN operator for arrays, just substring matching; see the note in SERVICES_OFFERED about overlapping substrings
        let formula = [];

        const weekday = WEEKDAYS_LOOKUP[this.search.date.getDay()];
        let day = `FIND("${weekday}", Day) > 0`;

        this.search.services.forEach(function (wanted) {
            var mapped = SERVICES_MAP[wanted];
            mapped.forEach(function(m) {
                formula.push(`FIND("${m}", {Services Offered}) > 0`);
            });
        });

        // search for specific word
        if (this.search.searchword) {
            var fields = ["Agency",
                          "AgencyName",
                          "Services Offered",
                          "Details"
            ];
            var term = this.search.searchword;
            var lowerTerm = term.toLowerCase();
            var upperTerm = term.toUpperCase();
            var upperFirst = lowerTerm.charAt(0).toUpperCase() + lowerTerm.slice(1);
            var indicesOfSpace = [];
            var firstLetterUpper = '';
            for (var i = 0; i < term.length; i++) {
                if (term[i].match(/[a-zA-z]/)) {
                    if (i === 0 || term[i - 1] === ' ') {
                        firstLetterUpper = firstLetterUpper.concat(term.charAt(i).toUpperCase());
                    } else {
                        firstLetterUpper = firstLetterUpper.concat(term[i]);
                    }
                } else {
                    firstLetterUpper = firstLetterUpper.concat(term[i]);
                }
            }
            fields.forEach(function(field) {
                formula.push(`FIND("${term}", {${field}}) > 0`);
                formula.push(`FIND("${lowerTerm}", {${field}}) > 0`);
                formula.push(`FIND("${upperTerm}", {${field}}) > 0`);
                formula.push(`FIND("${upperFirst}", {${field}}) > 0`);
                formula.push(`FIND("${firstLetterUpper}", {${field}}) > 0`);
            });
        }
        formula = `AND(${day}, OR(${formula.join(", ")}))`;
        // compose the query and send it off
        var params = {
            filterByFormula: formula,
        };
        this.busy = true;
        this.$http({
            method: 'GET',
            url: AIRTABLE_SEARCH_URL,
            params: params,
            headers: {
                "Authorization": `Bearer ${AIRTABLE_API_KEY}`
            },
        })
        .then(
            (response) => {
                // UI is no longer busy; dismiss spinner
                this.busy = false;

                // massage the records into shape: fix some array fields, cast some float data seen as lists of strings, etc
                this.search.results = response.data.records.map(item => {
                    // extract the fields, then do some data corrections
                    // many of the fields come out as arrays of strings, instead of single values
                    if (item.fields.Address) {
                        item.fields.Address = item.fields.Address[0];
                    }
                    if (item.fields.AgencyName) {
                        item.fields.AgencyName  = item.fields.AgencyName[0];
                    }
                    item.fields.LatLng      = item.fields.lat && item.fields.lng ? [ parseFloat(item.fields.lat[0]), parseFloat(item.fields.lng[0]) ] : null; // can be empty!
                    item.fields.Services = item.fields['Services Offered']; // rename just to be less nuisance

                    // new synthetic field: DistanceMiles from your location; to be filled in afterward, declared here for clarity + documentation
                    item.fields.DistanceMiles = null;

                    // new synthetic field: Start and End times, prettier version for rendering
                    item.fields.StartTime = item.fields['Start Hour'] ? `${item.fields['Start Hour'] >= '10' ? item.fields['Start Hour']: item.fields['Start Hour'].substr(1)}:${item.fields['Start Minute']} ${item.fields['Start AM-PM']}` : '';
                    item.fields.EndTime   = item.fields['End Hour'] ? `${item.fields['End Hour'] >= '10' ? item.fields['End Hour'] : item.fields['End Hour'].substr(1)}:${item.fields['End Minute']} ${item.fields['End AM-PM']}` : '';
                    // new synthetic fields: Start and End time as a JS Date objects usable for sorting and filtering
                    if (item.fields['Start Hour'] && item.fields['Start Minute'] && item.fields['Start AM-PM']) {
                        item.fields.StartTimeObject = new Date();
                        item.fields.StartTimeObject.setSeconds(0);
                        item.fields.StartTimeObject.setMilliseconds(0);
                        item.fields.StartTimeObject.setHours(item.fields['Start AM-PM'] == 'PM' && item.fields['Start Hour'] != '12' ? 12 + parseInt(item.fields['Start Hour']) : parseInt(item.fields['Start Hour']));
                        item.fields.StartTimeObject.setMinutes(parseInt(item.fields['Start Minute']));
                    }
                    if (item.fields['End Hour'] && item.fields['End Minute'] && item.fields['End AM-PM']) {
                        item.fields.EndTimeObject = new Date();
                        item.fields.EndTimeObject.setSeconds(0);
                        item.fields.EndTimeObject.setMilliseconds(0);
                        item.fields.EndTimeObject.setHours(item.fields['End AM-PM'] == 'PM' && item.fields['End Hour'] != '12' ? 12 + parseInt(item.fields['End Hour']) : parseInt(item.fields['End Hour']));
                        item.fields.EndTimeObject.setMinutes(parseInt(item.fields['End Minute']));
                    }

                    // finally, ready for use
                    return item.fields;
                });

                // if the search was for Today we can filter out already-finished events
                // do this after the data massaging so we have usable Date objects for comparison
                // if (this.today == this.search.date) {
                //     const rightnow = new Date();
                //     this.search.results = this.search.results.filter(item => {
                //         if (! item.EndTimeObject) return true;  // no end time given, so it has not ended (overnight events)
                //         return item.EndTimeObject > rightnow;
                //     });
                // }

                // add distance decorators and sort by distance from me; note the wrapped nature here
                this.updateGeolocationResultsList()();
                this.updateSort();

                // center the map on our own location
                this.resultsmap.setCenter({ lat: this.geolocation[0], lng: this.geolocation[1] });
                this.resultsmap.setZoom(14);

                // we have now performed a search; results or no, it's done
                // force them over to the listing view and scroll to the top of that listing
                this.search.done = true;
                this.showmap = false;
                this.performScrollTop();
            },
            (error) => {
                this.busy = false;
                alert("Could not connect to the site. Check your connection and try again.");
            }
        );
    }

    performScrollTop () {
        window.scrollTo(0, 0);
    }

    updateGeolocationMapmarker () {
        // wrapped function for use with $watch
        return () => {
            // update the You Are Here map marker and recenter
            if (this.resultsmap) {
                this.resultsmap.youarehere.setPosition({ lat: this.geolocation[0], lng: this.geolocation[1] });
                this.resultsmap.youarehere.setMap(this.resultsmap);
            }
        };
    }

    updateGeolocationResultsList () {
        // wrapped function for use with $watch
        return () => {
            // tag each result with its distance from my geolocation
            this.search.results.forEach(item => {
                item.DistanceMiles = (item.LatLng && this.geolocation) ? haversineDistance(this.geolocation, item.LatLng) : null;
                if (item.DistanceMiles != null && item.DistanceMiles > 10) {
                    item.IsClose = false;
                } else {
                    item.IsClose = true;
                }
            });

            // then sort the list so closest locations come first
            // in event of a tie (same location, listed multiple times for different service-times) sort by starting time
        };
    }

    updateSort () {
        this.search.results.sort((p, q) => {
            // sorting depends on their choice
            if (this.search.sortby == 'distance') {
                if (!p.DistanceMiles && q.DistanceMiles) return 1; // no location = send to the end of the list
                else if (!q.DistanceMiles && p.DistanceMiles) return -1; // no location = send to the end of the list
                else if (p.DistanceMiles != q.DistanceMiles) {
                    return p.DistanceMiles > q.DistanceMiles ? 1 : -1;
                }

                if (!p.StartTimeObject && q.StartTimeObject) return 1; // no start time = send to start of these tied locations
                else if (!q.StartTimeObject && p.StartTimeObject) return -1; // no start time = send to start of these tied locations
                else if (p.StartTimeObject != q.StartTimeObject) {
                    return p.StartTimeObject > q.StartTimeObject ? 1 : -1;
                }
                return 0;
            } else if (this.search.sortby == 'time') {
                if (!p.StartTimeObject && q.StartTimeObject) return 1; // no start time = send to start of list
                else if (!q.StartTimeObject && p.StartTimeObject) return -1; // no start time = send to start of list
                else if (p.StartTimeObject != q.StartTimeObject) {
                    return p.StartTimeObject > q.StartTimeObject ? 1 : -1;
                }

                if (!p.DistanceMiles && q.DistanceMiles) return 1; // no location = send to the end of the list
                else if (!q.DistanceMiles && p.DistanceMiles) return -1; // no location = send to the end of the list
                else if (p.DistanceMiles != q.DistanceMiles) {
                    return p.DistanceMiles > q.DistanceMiles ? 1 : -1;
                }
                return 0;
            } else {
                throw `updateGeolocationResultsList: unknown sorting: ${this.search.sortby}`;
            }
        });
    }

    redrawLocationMarkers () {
        // wrapped function for use with $watch
        return () => {
            // empty current markers
            this.resultsmap.locations.forEach(marker => {
                marker.setMap(null);
            });
            this.resultsmap.locations = [];

            // load the new ones
            this.search.results.forEach(item => {
                if (! item.LatLng) return; // some lack a location

                const marker = new google.maps.Marker({
                    icon: 'images/location.svg',
                    position: { lat: item.LatLng[0], lng: item.LatLng[1] },
                    title: item.AgencyName,
                    map: this.resultsmap,
                    details: item, // the raw attribute details
                });

                this.resultsmap.locations.push(marker);

                google.maps.event.addListener(marker, 'click', () => {
                    this.$scope.$evalAsync(() => {
                        this.resultdetails = marker.details;
                    });
                });
            });
        };
    }

    searchBack () {
        // empty our results and done flag so we go back to the search panel
        this.search.done = false;
        this.search.services = [];
        this.search.results = [];
        this.search.searchword = '';
    }

    zoomMapToGeolocation () {
        if (! this.geolocation) return alert("Still searching for location.");
        this.zoomMapToLatLng(this.geolocation);
    }

    zoomMapToLatLng (latlng, switchtomap) {
        const doit = () => {
            this.resultsmap.setCenter({ lat: latlng[0], lng: latlng[1] });
            this.resultsmap.setZoom(16);
        };

        if (switchtomap && ! this.showmap) {
            this.showmap = true;
            this.$timeout(doit, 500);
        }
        else {
            doit();
        }
    }

    makeDirectionsLink (stringwords, latlng) {
        // try to use Apple Maps if we detect iOS; everyone else gets Google which will either open navigation, or be a good desktop site anyway
        let url = `https://maps.google.com/?daddr=loc:${latlng[0]},${latlng[1]}`;
        if(/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
            url = `https://maps.apple.com/?daddr=loc:${latlng[0]},${latlng[1]}`;
        }
        return `<a target="_blank" href="${url}">${stringwords}</a>`;
    }

    // why we can't have simple things like ng-model on a checkbox: they want this totally outre method of removing single terms in multiple different UIs
    // remove the given service from our search list, and optionally perform a new search
    removeSearchService (servicename, options={ thensearch: true, exitifnoselections: true}) {
        this.search.services = this.search.services.filter((thisterm) => {
            return thisterm != servicename;
        });

        if (options.exitifnoselections && ! this.search.services.length && !this.search.searchword) {
            this.searchBack();
            return;
        }

        if (options.thensearch) {
            this.performSearch();
        }
    }

    removeSearchTerm() {
        this.search.searchword = "";
        if (!this.search.services.length) {
            this.searchBack();
            return;
        }
        this.performSearch();
    }
}

PageController.$inject = [ '$scope', '$http', '$window', '$timeout' ];

angular.module('app', [
    'checklist-model',
    'ui.bootstrap',
    'ngSanitize',
])
.controller('PageController', PageController);