Frontend: /location

app/javascript/app/app.vue

@@ -6,9 +6,39 @@
 
 <script>
     export default {
-        data: function () {
-            return {
-            }
+        mounted() {
+
+            // https://dennisreimann.de/articles/delegating-html-links-to-vue-router.html
+            window.addEventListener('click', event => {
+                // ensure we use the link, in case the click has been received by a subelement
+                let { target } = event // $event
+                while (target && target.tagName !== 'A') target = target.parentNode
+                // handle only links that do not reference external resources
+                if (target && target.matches("a[href*='/']") && target.href) {
+                    // some sanity checks taken from vue-router:
+                    // https://github.com/vuejs/vue-router/blob/dev/src/components/link.js#L106
+                    const { altKey, ctrlKey, metaKey, shiftKey, button, defaultPrevented } = event
+                    // don't handle with control keys
+                    if (metaKey || altKey || ctrlKey || shiftKey) return
+                    // don't handle when preventDefault called
+                    if (defaultPrevented) return
+                    // don't handle right clicks
+                    if (button !== undefined && button !== 0) return
+                    // don't handle if `target="_blank"`
+                    if (target && target.getAttribute) {
+                        const linkTarget = target.getAttribute('target')
+                        if (/\b_blank\b/i.test(linkTarget)) return
+                    }
+                    // don't handle same page links/anchors
+
+                    const url = new URL(target.href)
+                    const to = url.pathname
+                    if (window.location.pathname !== to && event.preventDefault) {
+                        event.preventDefault()
+                        this.$router.push(to)
+                    }
+                }
+            })
         }
     }
 </script>

app/javascript/app/router/index.js

@@ -4,11 +4,13 @@ import VueRouter from 'vue-router';
 Vue.use(VueRouter);
 
 import Home from '../../app/views/home/Index.vue';
-import Test from '../../app/views/test/Index.vue';
+import LocationIndex from '../../app/views/location/Index.vue';
+import LocationNew from '../../app/views/location/New.vue';
 
 const routes = [
     { path: '/', component: Home },
-    { path: '/test', component: Test }
+    { path: '/location/new', component: LocationNew },
+    { path: '/location/:id', component: LocationIndex },
 ];
 
 export default new VueRouter({

app/javascript/app/views/home/Index.vue

@@ -1,11 +1,48 @@
 <template>
-    <div>
-        Hello! I am / :)
+    <div class="container pt-4">
+        <h4>Welcome to Inclusive Access!</h4>
+        <p>Please select a location to continue, or <router-link to="/location/new">create a location</router-link>:</p>
+        <div v-if="loading">
+            Please wait for the locations to load...
+        </div>
+        <div v-else>
+            <div v-if="data.length < 1">
+                There are no locations to display.
+            </div>
+            <ul v-else>
+                <li
+                    v-for="loc in data"
+                    :key="'location-' + loc.id"
+                >
+                    <router-link
+                        :to="'/location/' + loc.id"
+                    >
+                        {{ loc.name }}
+                    </router-link>
+                </li>
+            </ul>
+        </div>
     </div>
 </template>
 
 <script>
     export default {
-
+        data() {
+            return {
+                loading: true,
+                data: []
+            }
+        },
+        mounted() {
+            console.log("fetching");
+            fetch('/locations.json')
+                .then((response) => {
+                    return response.json();
+                })
+                .then((data) => {
+                    this.data = data;
+                    this.loading = false;
+                });
+        }
     }
 </script>

app/javascript/app/views/location/Index.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="pt-4">
+        <div id="map"></div>
+    </div>
+</template>
+<style>
+    #map {
+        height: calc(100vh - 200px);
+    }
+</style>
+
+<script>
+    import 'ol/ol.css';
+
+    import {fromLonLat} from 'ol/proj';
+    import Map from 'ol/Map.js';
+    import View from 'ol/View.js';
+    import Draw from 'ol/interaction/Draw.js';
+    import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
+    import {OSM, Vector as VectorSource} from 'ol/source.js';
+    import {Feature} from "ol";
+    import Circle from "ol/geom/Circle";
+
+    export default {
+        data() {
+            return {
+                lat: null,
+                lon: null,
+                radius: null,
+            }
+        },
+        computed: {
+            id() {
+                return this.$route.params.id;
+            }
+        },
+        methods: {
+            setupMap()
+            {
+                var raster = new TileLayer({
+                    source: new OSM()
+                });
+
+                var source = new VectorSource({wrapX: false});
+
+                var vector = new VectorLayer({
+                    source: source
+                });
+
+                var map = new Map({
+                    layers: [raster, vector],
+                    target: 'map',
+                    view: new View({
+                        center: fromLonLat([this.lon, this.lat]),
+                        zoom: 16
+                    })
+                });
+
+                var draw; // global so we can remove it later
+                function addInteraction() {
+                    var geometryFunction;
+                    draw = new Draw({
+                        source: source,
+                        type: 'Circle',
+                        geometryFunction: geometryFunction
+                    });
+                    map.addInteraction(draw);
+                }
+
+                addInteraction();
+
+                draw.on('drawend', async () => {
+                    /*
+                     WARNING: HACK!!!!!!!!!!!
+                     BAD HACK!!!!!!!!!!!!!!!!
+                     BAD!!!!!!!!!!!!!!!!!!!!!
+                     NOT GOOD!!!!!!!!!!!!!!!!
+
+                     Seemingly, drawend is fired before the feature array is updated.
+                     We have to wait for a change, probably. So let's do that. Probably.
+                    */
+
+                    // Save the current feature array length
+                    let cur = vector.getSource().getFeatures().length;
+
+                    let tries = 0;
+                    // Has the length changed yet?
+                    while (vector.getSource().getFeatures().length === cur &&
+                    tries <= 40 /* 40*25=1000; 1s */) {
+                        await new Promise(r => setTimeout(r, 25));
+                        tries++;
+                        console.log(tries);
+                    }
+
+                    let features = vector.getSource().getFeatures();
+                    let feature = features[features.length - 1];
+                    console.log(feature);
+                    console.log(feature.values_.geometry);
+
+                    let radius = feature.values_.geometry.getRadius();
+                    let center = feature.values_.geometry.transform('EPSG:3857', 'EPSG:4326').getCenter();
+                    let lon = center[0];
+                    let lat = center[1];
+
+                    console.log("lon: " + lon);
+                    console.log("lat: " + lat);
+                    console.log("radius: " + radius);
+                });
+
+                let coordinate = fromLonLat([this.lon, this.lat]);
+                source.addFeature(new Feature(new Circle(coordinate, this.radius)));
+            }
+        },
+        mounted() {
+            fetch('/locations/' + this.id + '.json')
+                .then((response) => {
+                    return response.json();
+                })
+                .then((data) => {
+                    this.lon = parseFloat(data.long);
+                    this.lat = parseFloat(data.lat);
+                    this.radius = parseFloat(data.radius);
+
+                    this.setupMap();
+                });
+        }
+    }
+</script>