TimezoneInput.vue

<template>
    <div @click="click" class="timezone">

        <simple-svg
            :filepath="'/static/images/timezones-clean-min.svg'"
            :width="'100%'"
            :height="'100%'"
            @ready="selectElement" />
        <img class="timezone__map" src="/static/images/map.png">

        <h1 class="timezone__name">{{ name }}</h1>
        <h2 class="timezone__offset">{{ offset }}</h2>

        <input :value="value" type="hidden" id="id_timezone" name="timezone">

    </div>

</template>

<style lang="scss">
.timezone {
    position: relative;
    cursor: pointer;

    svg {
        z-index: 1;
        width: 100%;
        height: 100%;
    }

    &__name {
        font-size: 2em;
        color: #292f33;
        margin: 0;
        text-align: center;
    }

    &__offset {
        font-size: 1.5em;
        margin: 0;
        margin-bottom: 2em;
        text-align: center;
        color: #589da8;
    }

    &__map {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: -1;
    }
}



.utc-tz {
    opacity: 0;

    &:hover {
        opacity: 0.2;
    }

    &--select {
        opacity: 0.75 !important;
        stroke: #999;
        stroke-width: 3px;
    }
}
</style>

<script>
import Vue from 'vue'
import VueSimpleSVG from 'vue-simple-svg'
Vue.use(VueSimpleSVG)

const timezoneData = {
    'utc-minus-12': '',
    'Pacific/Pago_Pago': { 'selector': 'utc-minus-11', 'offset': 'GMT -11' },
    'Pacific/Honolulu': { 'selector': 'utc-minus-10', 'offset': 'GMT -10' },
    'America/Anchorage': { 'selector': 'utc-minus-9', 'offset': 'GMT -9' },
    'America/Los_Angeles': { 'selector': 'utc-minus-8', 'offset': 'GMT -8' },
    'America/Phoenix': { 'selector': 'utc-minus-7', 'offset': 'GMT -7' },
    'America/Chicago': { 'selector': 'utc-minus-6', 'offset': 'GMT -6' },
    'America/New_York': { 'selector': 'utc-minus-5', 'offset': 'GMT -5' },
    'America/Puerto_Rico': { 'selector': 'utc-minus-4', 'offset': 'GMT -4' },
    'America/Buenos_Aires': { 'selector': 'utc-minus-3', 'offset': 'GMT -3' },
    'America/Noronha': { 'selector': 'utc-minus-2', 'offset': 'GMT -2' },
    'Atlantic/Azores': { 'selector': 'utc-minus-1', 'offset': 'GMT -1' },
    'Europe/London': {'selector': 'utc-0', 'offset': 'GMT' },
    'Europe/Paris': { 'selector': 'utc-plus-1', 'offset': 'GMT +1' },
    'Europe/Helsinki': { 'selector': 'utc-plus-2', 'offset': 'GMT +2' },
    'Europe/Moscow': { 'selector': 'utc-plus-3', 'offset': 'GMT +3' },
    'Asia/Dubai': { 'selector': 'utc-plus-4', 'offset': 'GMT +4' },
    'Asia/Kolkata': { 'selector': 'utc-plus-5', 'offset': 'GMT +5' },
    'Indian/Chagos': { 'selector': 'utc-plus-6', 'offset': 'GMT +6' },
    'Asia/Bangkok': { 'selector': 'utc-plus-7', 'offset': 'GMT +7' },
    'Asia/Shanghai': { 'selector': 'utc-plus-8', 'offset': 'GMT +8' },
    'Asia/Tokyo': { 'selector': 'utc-plus-9', 'offset': 'GMT +9' },
    'Australia/Sydney': { 'selector': 'utc-plus-10', 'offset': 'GMT +10' },
    'Pacific/Guadalcanal': { 'selector': 'utc-plus-11', 'offset': 'GMT +11' },
    'Pacific/Fiji': { 'selector': 'utc-plus-12', 'offset': 'GMT +12' },
    'Pacific/Enderbury': { 'selector': 'utc-plus-13', 'offset': 'GMT +13' },
}

const selectorKeyToObj = (acc, i) => {
    const [key, value] = i
    acc[value.selector] = key
    return acc
}

const selectorToTimezoneMap = Object.entries(timezoneData)
                                    .reduce(selectorKeyToObj, {})


export default {
    name: 'TimezoneInput',

    props: {
        timezone: {
            type: String,
            required: true
        }
    },

    components: {
    },

    data() {
        return {
            value: this.timezone
        }
    },

    watch: {
        value() {
            this.selectElement()
        }
    },

    computed: {
        name() {
            return this.value.replace('_', ' ').replace('/', ' / ')
        },

        offset() {
            return timezoneData[this.value].offset
        },

        selector() {
            return `.${timezoneData[this.value].selector}`
        },
    },

    methods: {
        click(e) {
            const el = e.srcElement.closest('.utc-tz')

            if (el === null) { return }

            const selectorToTimezone = s => selectorToTimezoneMap[s]
            const getSelector = e => e.getAttribute('class').split(' ')
                                                            .filter(e => e != 'utc-tz')
                                                            .pop()

            const selector = getSelector(el)
            this.value = selectorToTimezone(selector)
        },

        selectElement() {
            // unselect all .utc-tz
            [...document.querySelectorAll('.utc-tz')].map(el => el.classList.remove('utc-tz--select'))


            // select the current .utc-tz
            document.querySelector(this.selector).classList.add('utc-tz--select')
        },

    },

}
</script>