hecate 0.62.0

OpenStreetMap Inspired Data Storage Backend Focused on Performance and GeoJSON Interchange
<template>
<div class='flex-parent flex-parent--column viewport-third h-auto-ml bg-white round-ml shadow-darken10' style="pointer-events:auto; max-height: calc(100% - 80px);">
    <div class='flex-child px12 py12'>
        <h3 class='fl py6 txt-m txt-bold'>Bounds</h3>
        <button @click="getBounds" class='btn round bg-gray-light bg-darken25-on-hover color-gray-dark fr'><svg class='icon'><use href='#icon-refresh'/></button>
    </div>

    <div class="flex-child scroll-auto">
        <div v-if="!bounds.length" class="px12 py3 clearfix bg-white">
            <div align="center">No Boundaries</div>
        </div>

        <div v-for="(bound, bound_it) in bounds" class="w-full py3 clearfix bg-white bg-darken25-on-hover cursor-pointer">
            <a v-bind:href="`/api/data/bounds/${bound}`" target="_blank" class="w-full clearfix">
                <span class="fl py6 px6"><svg class='icon'><use href='#icon-database'/></span>
                <span class="fl" v-text="bound"></span>
            </a>
        </div>
    </div>

    <foot/>
</div>
</template>

<script>
import Foot from '../components/Foot.vue';

export default {
    name: 'bounds',
    data: function() {
        return {
            bounds: []
        }
    },
    created: function() {
        this.getBounds();
    },
    components: {
        foot: Foot
    },
    methods: {
        getBounds: function() {
            fetch(`${window.location.protocol}//${window.location.host}/api/data/bounds`, {
                method: 'GET',
                credentials: 'same-origin'
            }).then((response) => {
                  return response.json();
            }).then((body) => {
                this.bounds = body;
            });
        }
    },
    render: h => h(App),
    props: []
}
</script>