Frontend: Style changes and usability

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

@@ -1,36 +1,54 @@
 <template>
-    <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 class="container-fluid pt-2">
         <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 class="row" v-else>
+            <div class="col-md-8 pl-4">
+                <HomeMap />
             </div>
-            <ul v-else>
-                <li
-                    v-for="loc in data"
-                    :key="'location-' + loc.id"
-                >
-                    <router-link
-                        :to="'/location/' + loc.id"
-                    >
-                        {{ loc.name }}
+            <div class="col-md-4 pt-2">
+                <h4>Welcome to Inclusive Access!</h4>
+                <p>
+                    <router-link class="btn btn-outline-primary btn-block" to="/location/new" v-if="loggedIn">
+                        <i class="fas fa-plus fa-fw mr-1"></i>
+                        Create Location
                     </router-link>
-                </li>
-            </ul>
+                    <span v-else>
+                        <a href="/user/sign_in">Log in</a> to create a location.
+                    </span>
+                </p>
+                <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>
     </div>
 </template>
 
 <script>
+    import HomeMap from './components/HomeMap';
     export default {
+        components: {
+            HomeMap
+        },
         data() {
             return {
                 loading: true,
-                data: []
+                data: [],
+                loggedIn: this.isUserLoggedIn()
             }
         },
         mounted() {

app/javascript/app/views/home/components/HomeMap.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="pt-4">
+        <div id="map-home" class="shadow"></div>
+    </div>
+</template>
+<style>
+    #map-home {
+        height: calc(100vh - 125px);
+    }
+</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 {
+                locations: []
+            }
+        },
+        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-home',
+                    view: new View({
+                        center: [-11000000, 4600000],
+                        zoom: 4
+                    })
+                });
+
+                for (let i = 0; i < this.locations.length; i++) {
+                    let loc = this.locations[i];
+                    let lon = parseFloat(loc.long);
+                    let lat = parseFloat(loc.lat);
+                    let radius = parseFloat(loc.radius);
+
+                    let coordinate = fromLonLat([lon, lat]);
+                    source.addFeature(new Feature(new Circle(coordinate, radius)));
+                }
+            }
+        },
+        mounted() {
+            fetch('/locations.json')
+                .then((response) => {
+                    return response.json();
+                })
+                .then((data) => {
+                    this.locations = data;
+
+                    this.setupMap();
+                });
+        }
+    }
+</script>

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

@@ -1,11 +1,25 @@
 <template>
-    <div class="pt-4">
-        <div id="map"></div>
+    <div class="container-fluid pt-4">
+        <div class="row" v-if="!loading">
+            <div class="col-md-9 pl-4">
+                <div id="map-loc" class="shadow"></div>
+            </div>
+            <div class="col-md-3">
+                <h4>{{ location.name }}</h4>
+                <p class="mb-5">{{ location.description }}</p>
+
+                <h5>Markers</h5>
+                <p>i have not implemented this yet leave me alone</p>
+            </div>
+        </div>
+        <div class="container" v-else>
+            <strong>Loading location...</strong>
+        </div>
     </div>
 </template>
 <style>
-    #map {
-        height: calc(100vh - 200px);
+    #map-loc {
+        height: calc(100vh - 150px);
     }
 </style>
 
@@ -24,9 +38,11 @@
     export default {
         data() {
             return {
-                lat: null,
                 lon: null,
+                lat: null,
                 radius: null,
+                location: null,
+                loading: true
             }
         },
         computed: {
@@ -49,28 +65,29 @@
 
                 var map = new Map({
                     layers: [raster, vector],
-                    target: 'map',
+                    target: 'map-loc',
                     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);
-                }
+                if (this.isUserLoggedIn()) {
+                    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();
+                    addInteraction();
 
-                draw.on('drawend', async () => {
-                    /*
+                    draw.on('drawend', async () => {
+                        /*
                      WARNING: HACK!!!!!!!!!!!
                      BAD HACK!!!!!!!!!!!!!!!!
                      BAD!!!!!!!!!!!!!!!!!!!!!
@@ -80,32 +97,33 @@
                      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);
-                });
+                        // 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)));
@@ -117,11 +135,18 @@
                     return response.json();
                 })
                 .then((data) => {
+                    this.location = data;
+
                     this.lon = parseFloat(data.long);
                     this.lat = parseFloat(data.lat);
                     this.radius = parseFloat(data.radius);
 
-                    this.setupMap();
+                    this.loading = false;
+
+
+                    this.$nextTick(() => {
+                        this.setupMap();
+                    });
                 });
         }
     }

app/javascript/app/views/location/New.vue

@@ -1,8 +1,12 @@
 <template>
     <div class="pt-4">
-        <p>To create a location, click the center of the target, and then move your mouse to create a circle.</p>
+        <div class="container">
+            <p>To create a location, click the center of the target, and then move your mouse to create a circle.</p>
+        </div>
 
-        <div id="map"></div>
+        <div class="px-4">
+            <div id="map-loc-new" class="shadow"></div>
+        </div>
 
         <b-modal ref="createModal"
                  title="Create Location"
@@ -47,8 +51,8 @@
     </div>
 </template>
 <style>
-    #map {
-        height: calc(100vh - 200px);
+    #map-loc-new {
+        height: calc(100vh - 150px);
     }
 </style>
 
@@ -159,7 +163,7 @@
 
             var map = new Map({
                 layers: [raster, vector],
-                target: 'map',
+                target: 'map-loc-new',
                 view: new View({
                     center: [-11000000, 4600000],
                     zoom: 4

app/javascript/packs/vue.js

@@ -19,6 +19,10 @@ import 'vuelayers/lib/style.css';
 Vue.use(VueLayers);
 Vue.use(BootstrapVue);
 
+Vue.prototype.isUserLoggedIn = () => {
+    return document.head.querySelector("meta[name='user-logged-in']").content === 'true';
+};
+
 document.addEventListener('DOMContentLoaded', () => {
     if (document.getElementById('app-spa') !== null) {
         const app = new Vue({

app/views/layouts/application.html.erb

@@ -1,12 +1,20 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>App</title>
+
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
 
   <%= stylesheet_link_tag 'application', media: 'all' %>
   <%= stylesheet_pack_tag 'vue' %>
+
+  <meta name="user-logged-in" content="<%= user_signed_in? %>">
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/fontawesome.min.css" integrity="sha256-mM6GZq066j2vkC2ojeFbLCcjVzpsrzyMVUnRnEQ5lGw=" crossorigin="anonymous" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/solid.min.css" integrity="sha256-APTxfVyJgjHUS35EeuRpYs2tAbIQO7UF0nAV6krdYJ0=" crossorigin="anonymous" />
 </head>
 
 <body>