From d44d970d9f489016904d6d61cd7ea256dbf0c618 Mon Sep 17 00:00:00 2001 From: Raymonf <8991740+Raymonf@users.noreply.github.com> Date: Sat, 29 Feb 2020 22:39:17 -0500 Subject: [PATCH] Frontend: Style changes and usability --- .DS_Store | Bin 0 -> 6148 bytes app/assets/images/.DS_Store | Bin 0 -> 6148 bytes app/javascript/app/views/home/Index.vue | 54 +++++--- .../app/views/home/components/HomeMap.vue | 80 ++++++++++++ app/javascript/app/views/location/Index.vue | 117 +++++++++++------- app/javascript/app/views/location/New.vue | 14 ++- app/javascript/packs/vue.js | 4 + app/views/layouts/application.html.erb | 8 ++ public/.DS_Store | Bin 0 -> 6148 bytes 9 files changed, 208 insertions(+), 69 deletions(-) create mode 100644 .DS_Store create mode 100644 app/assets/images/.DS_Store create mode 100644 app/javascript/app/views/home/components/HomeMap.vue create mode 100644 public/.DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..da07aa6853bb7b7687f6e861317c0d52c61a4ec7 GIT binary patch literal 6148 zcmeH~J!%6%427R!7lt%jx}3%b$PET#pTHN0A&|z{CXm!~^gR7ES*H$5cmnB-G%I%Z zD|S`@Z2$T80!#olbXV*=%*>dtaK;_?uhYl%a=X5>;#J@&VrHyNnC;iLL0pQvfVyTmjO&;ssLc!1UOG})p;=82 zR;?Ceh}WZ?+UmMqI#RP8R>OzYoz15hnq@nzF`-!xQ4j$Um=RcIKKc27r2jVm&svm< zfC&6E0=7P!4tu^-ovjbA=k?dB`g+i*aXG_}p8zI)6mRKa+;6_1_R^8c3Qa!(fk8n8 H{*=Hspa&6( literal 0 HcmV?d00001 diff --git a/app/assets/images/.DS_Store b/app/assets/images/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 GIT binary patch literal 6148 zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0 -
-

Welcome to Inclusive Access!

-

Please select a location to continue, or create a location:

+
Please wait for the locations to load...
-
-
- There are no locations to display. +
+
+
-
    -
  • - - {{ loc.name }} +
    +

    Welcome to Inclusive Access!

    +

    + + + Create Location -

    • -
+ + Log in to create a location. + +

+
+ There are no locations to display. +
+
    +
  • + + {{ loc.name }} + +
    • +
+
\ No newline at end of file diff --git a/app/javascript/app/views/location/Index.vue b/app/javascript/app/views/location/Index.vue index 4acb1ca..a7b4c43 100644 --- a/app/javascript/app/views/location/Index.vue +++ b/app/javascript/app/views/location/Index.vue @@ -1,11 +1,25 @@ @@ -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(); + }); }); } } diff --git a/app/javascript/app/views/location/New.vue b/app/javascript/app/views/location/New.vue index a2168c3..fb8437e 100644 --- a/app/javascript/app/views/location/New.vue +++ b/app/javascript/app/views/location/New.vue @@ -1,8 +1,12 @@ @@ -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 diff --git a/app/javascript/packs/vue.js b/app/javascript/packs/vue.js index 1ed8719..a11cdb6 100644 --- a/app/javascript/packs/vue.js +++ b/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({ diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 6cd67b4..2edc2ca 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,12 +1,20 @@ + + App + <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all' %> <%= stylesheet_pack_tag 'vue' %> + + + + + diff --git a/public/.DS_Store b/public/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..c22a7562982132d29d7e001c375706464d010024 GIT binary patch literal 6148 zcmeHKJ5Iwu5S<}GvP6@Ta<7n{!bGM=$^}q}6p&&$O?r2nhXc@X3{JzF51(j-ON!`? zH1oXk*|lG>;}H>E9k)x7g@`mzLwPY%i^WYVxk%3(sJ6#){W$c8DsReRwKI8^UUvIk zRiBZ5=(^2**dVvL|G0U3y?np@sq2UBMD*}f?K<^7jFAB{KnBPF88~+a(6ddNt3X;Z zKnBRbHv@J*6sTdFI0pLF0plY8(0=1x@a(e$u$TkbCXRvdKr~8$QK~s&Xq3ZWGOtY> z1EXBjPsToZvgU-MemeZc(?#1rS~5TeP8pcRa$)`d4*JLZe_F&986X2^#emMcb+^JN zWpAxM&U$TuK0v<&xt