index.html

---
layout: default
title: Global Day of Coderetreat Events
description: List of events around the world!
---

<div id="map">
    <div id="popup"></div>
</div>

<a href="/register-event/"><i class="fa fa-info-circle"></i> Register your event</a>
<h2>GDCR events in 2019</h2>

{% assign events_with_location = site.data.events_gdcr2019 | where_exp: 'event', 'event.location != "virtual"'  %}
{% assign virtual_events = site.data.events_gdcr2019 | where_exp: 'event', 'event.location == "virtual"'  %}
{% assign countries = events_with_location | map: 'location' | map: 'country' | uniq | sort %}

<form class="pure-form">
    <fieldset>
        <select id="gdcrCountry" style="font-family: sans-serif;">
            <option selected disabled>Select your country...</option>
            <option value="none">Show All</option>
            <option disabled>-------------</option>
            <option value="virtual">Virtual Events</option>
            {% for country in countries %}
            <option>{{ country }}</option>
            {% endfor %}
        </select>
    </fieldset>
</form>
<table class="events-by-country">
    <tbody>
    {% for event in virtual_events %}
    <tr data-country="virtual">
        <td>Virtual</td>
        {% include event-table-row.html event=event %}
    </tr>
    {% endfor %}
    {% assign events = events_with_location | where_exp: 'name', '1' | sort: 'location.city' | sort: 'location.country' %}
    {% for event in events %}
    <tr data-country="{{event.location.country}}">
        <td>{{ event.location.city }}, {{ event.location.country }}</td>
        {% include event-table-row.html event=event %}
    </tr>
    {% endfor %}
    </tbody>
</table>

<p class="last-section">
  <a href="{% link register-event.md %}">Register your event</a>
</p>

<script>
    $(function () {
        var eventsURL = window.location.protocol + "//" + window.location.host + window.location.pathname;

        var init = function() {
            var countryURLSearchParam = new RegExp('[\?&]country=([^&#]*)').exec(window.location.search);
            var currentFilter = countryURLSearchParam ? decodeURIComponent(countryURLSearchParam[1]) : 0;

            if(currentFilter) {
                $('#gdcrCountry').val(currentFilter);
                filterRows(currentFilter);
            }

            window.onpopstate = function(e) {
                var prevCountry = e.state.country ? decodeURIComponent(e.state.country) : 'none';
                $('#gdcrCountry').val(prevCountry);
                filterRows(prevCountry, prevCountry === 'none');
            };
        };

        var filterRows = function(filter, showAll = false) {
            var rows = $('tbody tr');
            for (var i = 0; i < rows.length; i++) {
                row = rows[i];
                ctry = row.getAttribute("data-country");
                row.classList.toggle('hidden', !(showAll || ctry === filter));
            }
        };

        var setCountryInURL = function(country) {
            var encodedCountry = encodeURIComponent(country);
            var newUrl = eventsURL + '?country=' + encodedCountry;
            window.history.pushState({ path: newUrl, country: encodedCountry }, '', newUrl);
        };

        var resetCountryInURL = function() {
            window.history.pushState({ path: eventsURL }, '', eventsURL);
        };

        $.get('/events/gdcr2019.json', function (eventsJson) {
            var gdcrEvents = mapEventsDataToMapFormat(eventsJson);
            addEventsToMap(gdcrEvents);
        });

        $('#gdcrCountry').on('change', function (e) {
            var filter = e.target.value;
            var showAll = filter === 'none';

            if(showAll) {
                resetCountryInURL();
            } else {
                setCountryInURL(filter);
            }

            filterRows(filter, showAll);
        });

        init();
    });
</script>