hecate 0.62.0

OpenStreetMap Inspired Data Storage Backend Focused on Performance and GeoJSON Interchange
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

<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'>Feature <span v-text='feature.id'></span></h3>
        <button @click='close()' class='btn round bg-gray-light bg-darken25-on-hover color-gray-dark fr'><svg class='icon'><use href='#icon-close'/></button>
    </div>

    <template v-if='loading'>
        <div class='flex-child loading h60'></div>
    </template>
    <template v-else>
        <div class="flex-child scroll-auto">
            <table class='table txt-xs'>
                <thead><tr><th>Key</th><th>Value</th></tr></thead>
                <tbody>
                    <tr v-for="prop in Object.keys(feature.properties)">
                        <td v-text="prop"></td>

                        <!-- element: (Array) -->
                        <td v-if="Array.isArray(feature.properties[prop])">
                            <template v-for="element in feature.properties[prop]" style="border-bottom: dotted;">
                                <!-- element: Array: (Object) -->
                                <template v-if="typeof element === 'object' && !Array.isArray(element)">
                                    <tr v-for="key in Object.keys(element)">
                                        <td v-text="key"></td>
                                        <td v-text="element[key]"></td>
                                    </tr>
                                </template>
                                <!-- element: Array: (Array, String, Number) -->
                                <template v-else>
                                    <td v-text="JSON.stringify(element)"></td>
                                </template>

                                <div style="border-bottom: solid #CBCBCB 1px;"></div>
                            </template>
                        </td>

                        <!-- element: (Object, String, Number) -->
                        <td v-else v-text="JSON.stringify(feature.properties[prop])"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </template>

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

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

export default {
    name: 'feature',
    data: function() {
        return {
            feature: false,
            loading: false
        }
    },
    components: {
        foot: Foot
    },
    watch: {
        id: function() {
            this.get(this.id);
        }
    },
    created: function() {
        this.get(this.id);
    },
    methods: {
        close: function() {
            this.$emit('close');
        },
        get: function(id) {
            if (!id) return;
            if (typeof id === 'number' || typeof id === 'string') {
                this.loading = true;
            }

            fetch(`${window.location.protocol}//${window.location.host}/api/data/feature/${id}`, {
                method: 'GET',
                credentials: 'same-origin'
            }).then((response) => {
                  return response.json();
            }).then((body) => {
                this.feature = body;
                this.loading = false;
            });
        }
    },
    render: h => h(App),
    props: ['id', 'map']
}
</script>