From b34e5155b21d681a39f2525010d6a08587ad73a0 Mon Sep 17 00:00:00 2001
From: Raymonf <8991740+Raymonf@users.noreply.github.com>
Date: Sun, 1 Mar 2020 00:05:33 -0500
Subject: [PATCH] Frontend fixes

---
 app/controllers/marks_controller.rb           |  4 +-
 .../app/views/home/components/HomeMap.vue     | 13 ++-
 app/javascript/app/views/location/Index.vue   | 99 +++++++++++--------
 app/models/mark.rb                            |  1 +
 app/views/marks/_form.html.erb                | 10 ++
 app/views/marks/_mark.json.jbuilder           |  2 +-
 app/views/marks/index.html.erb                |  2 +
 app/views/marks/show.html.erb                 |  5 +
 ...arks.rb => 20200301045325_create_marks.rb} |  1 +
 db/schema.rb                                  |  5 +-
 test/controllers/marks_controller_test.rb     |  4 +-
 test/fixtures/marks.yml                       |  2 +
 test/system/marks_test.rb                     |  2 +
 13 files changed, 99 insertions(+), 51 deletions(-)
 rename db/migrate/{20200301001717_create_marks.rb => 20200301045325_create_marks.rb} (84%)

diff --git a/app/controllers/marks_controller.rb b/app/controllers/marks_controller.rb
index b8f74c8..1bf0630 100644
--- a/app/controllers/marks_controller.rb
+++ b/app/controllers/marks_controller.rb
@@ -25,7 +25,7 @@ def edit
   # POST /marks.json
   def create
     @mark = Mark.new(mark_params)
-    @mark.user = current_user
+
     respond_to do |format|
       if @mark.save
         format.html { redirect_to @mark, notice: 'Mark was successfully created.' }
@@ -69,6 +69,6 @@ def set_mark
 
     # Only allow a list of trusted parameters through.
     def mark_params
-      params.require(:mark).permit(:name, :mark_type_id, :description, :lat, :long)
+      params.require(:mark).permit(:name, :mark_type_id, :description, :lat, :long, :user_id, :location_id)
     end
 end
diff --git a/app/javascript/app/views/home/components/HomeMap.vue b/app/javascript/app/views/home/components/HomeMap.vue
index 141d5ae..babb9a6 100644
--- a/app/javascript/app/views/home/components/HomeMap.vue
+++ b/app/javascript/app/views/home/components/HomeMap.vue
@@ -12,6 +12,8 @@
 <script>
     import 'ol/ol.css';
 
+    import axios from 'axios';
+
     import {fromLonLat} from 'ol/proj';
     import Map from 'ol/Map.js';
     import View from 'ol/View.js';
@@ -66,14 +68,15 @@
             }
         },
         mounted() {
-            fetch('/locations.json')
+            axios.get('/locations.json')
                 .then((response) => {
-                    return response.json();
-                })
-                .then((data) => {
-                    this.locations = data;
+                    this.locations = response.data;
 
                     this.setupMap();
+                })
+                .catch((error) => {
+                    alert('Unable to fetch locations :(');
+                    console.log(error);
                 });
         }
     }
diff --git a/app/javascript/app/views/location/Index.vue b/app/javascript/app/views/location/Index.vue
index a7b4c43..b553a5b 100644
--- a/app/javascript/app/views/location/Index.vue
+++ b/app/javascript/app/views/location/Index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="container-fluid pt-4">
-        <div class="row" v-if="!loading">
+        <div class="row" v-if="!loading && markTypes !== null && marks !== null">
             <div class="col-md-9 pl-4">
                 <div id="map-loc" class="shadow"></div>
             </div>
@@ -34,15 +34,18 @@
     import {OSM, Vector as VectorSource} from 'ol/source.js';
     import {Feature} from "ol";
     import Circle from "ol/geom/Circle";
+    import axios from "axios";
+    import Point from "ol/geom/Point";
 
     export default {
         data() {
             return {
-                lon: null,
-                lat: null,
-                radius: null,
+                coordinates: null,
+                loading: true,
+                markTypes: null,
                 location: null,
-                loading: true
+                marks: null,
+                map: null
             }
         },
         computed: {
@@ -51,8 +54,7 @@
             }
         },
         methods: {
-            setupMap()
-            {
+            setupMap() {
                 var raster = new TileLayer({
                     source: new OSM()
                 });
@@ -73,29 +75,22 @@
                 });
 
                 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();
+                    let draw = new Draw({
+                        source: source,
+                        type: "Point"
+                    });
+                    map.addInteraction(draw);
 
                     draw.on('drawend', async () => {
                         /*
-                     WARNING: HACK!!!!!!!!!!!
-                     BAD HACK!!!!!!!!!!!!!!!!
-                     BAD!!!!!!!!!!!!!!!!!!!!!
-                     NOT GOOD!!!!!!!!!!!!!!!!
+                         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.
-                    */
+                         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;
@@ -103,38 +98,63 @@
                         let tries = 0;
                         // Has the length changed yet?
                         while (vector.getSource().getFeatures().length === cur &&
-                        tries <= 40 /* 40*25=1000; 1s */) {
+                            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];
+                        this.coordinates = JSON.parse(JSON.stringify(feature.values_.geometry.transform('EPSG:3857', 'EPSG:4326').getCoordinates()));
 
-                        console.log("lon: " + lon);
-                        console.log("lat: " + lat);
-                        console.log("radius: " + radius);
+                        console.log(vector);
+                        source.removeFeature(feature);
                     });
                 }
 
                 let coordinate = fromLonLat([this.lon, this.lat]);
                 source.addFeature(new Feature(new Circle(coordinate, this.radius)));
+
+                (async () => {
+                    while (this.marks === null) {
+                        await new Promise(r => setTimeout(r, 25));
+                    }
+                    console.log('bruh');
+                    for (let i = 0; i < this.marks.length; i++) {
+                        let mark = this.marks[i];
+
+                        let coordinate = fromLonLat(mark.long, mark.lat);
+                        console.log(coordinate);
+                        source.addFeature(new Feature(new Point(coordinate)));
+                    }
+                })();
             }
         },
         mounted() {
-            fetch('/locations/' + this.id + '.json')
+            axios.get('/marks.json?location_id=' + this.id)
+                .then((response) => {
+                    this.marks = response.data;
+                })
+                .catch((error) => {
+                    alert('Unable to fetch mark types :(');
+                    console.log(error);
+                });
+
+            axios.get('/mark_types.json')
                 .then((response) => {
-                    return response.json();
+                    this.markTypes = response.data;
                 })
-                .then((data) => {
+                .catch((error) => {
+                    alert('Unable to fetch mark types :(');
+                    console.log(error);
+                });
+
+            axios.get('/locations/' + this.id + '.json')
+                .then((response) => {
+                    let data = response.data;
+
                     this.location = data;
 
                     this.lon = parseFloat(data.long);
@@ -143,7 +163,6 @@
 
                     this.loading = false;
 
-
                     this.$nextTick(() => {
                         this.setupMap();
                     });
diff --git a/app/models/mark.rb b/app/models/mark.rb
index 3db4c42..2a1aad1 100644
--- a/app/models/mark.rb
+++ b/app/models/mark.rb
@@ -1,4 +1,5 @@
 class Mark < ApplicationRecord
   belongs_to :mark_type
   belongs_to :user
+  belongs_to :location
 end
diff --git a/app/views/marks/_form.html.erb b/app/views/marks/_form.html.erb
index 1a8c788..1e4fb6e 100644
--- a/app/views/marks/_form.html.erb
+++ b/app/views/marks/_form.html.erb
@@ -36,6 +36,16 @@
     <%= form.text_field :long %>
   </div>
 
+  <div class="field">
+    <%= form.label :user_id %>
+    <%= form.text_field :user_id %>
+  </div>
+
+  <div class="field">
+    <%= form.label :location_id %>
+    <%= form.text_field :location_id %>
+  </div>
+
   <div class="actions">
     <%= form.submit %>
   </div>
diff --git a/app/views/marks/_mark.json.jbuilder b/app/views/marks/_mark.json.jbuilder
index b7ebcb7..b7f79f9 100644
--- a/app/views/marks/_mark.json.jbuilder
+++ b/app/views/marks/_mark.json.jbuilder
@@ -1,2 +1,2 @@
-json.extract! mark, :id, :name, :mark_type_id, :description, :lat, :long, :user_id, :created_at, :updated_at
+json.extract! mark, :id, :name, :mark_type_id, :description, :lat, :long, :user_id, :location_id, :created_at, :updated_at
 json.url mark_url(mark, format: :json)
diff --git a/app/views/marks/index.html.erb b/app/views/marks/index.html.erb
index 5b52cd3..308bad0 100644
--- a/app/views/marks/index.html.erb
+++ b/app/views/marks/index.html.erb
@@ -11,6 +11,7 @@
       <th>Lat</th>
       <th>Long</th>
       <th>User</th>
+      <th>Location</th>
       <th colspan="3"></th>
     </tr>
   </thead>
@@ -24,6 +25,7 @@
         <td><%= mark.lat %></td>
         <td><%= mark.long %></td>
         <td><%= mark.user_id %></td>
+        <td><%= mark.location_id %></td>
         <td><%= link_to 'Show', mark %></td>
         <td><%= link_to 'Edit', edit_mark_path(mark) %></td>
         <td><%= link_to 'Destroy', mark, method: :delete, data: { confirm: 'Are you sure?' } %></td>
diff --git a/app/views/marks/show.html.erb b/app/views/marks/show.html.erb
index 5ca31af..475a246 100644
--- a/app/views/marks/show.html.erb
+++ b/app/views/marks/show.html.erb
@@ -30,5 +30,10 @@
   <%= @mark.user_id %>
 </p>
 
+<p>
+  <strong>Location:</strong>
+  <%= @mark.location_id %>
+</p>
+
 <%= link_to 'Edit', edit_mark_path(@mark) %> |
 <%= link_to 'Back', marks_path %>
diff --git a/db/migrate/20200301001717_create_marks.rb b/db/migrate/20200301045325_create_marks.rb
similarity index 84%
rename from db/migrate/20200301001717_create_marks.rb
rename to db/migrate/20200301045325_create_marks.rb
index 4bbdc69..3b0daa4 100644
--- a/db/migrate/20200301001717_create_marks.rb
+++ b/db/migrate/20200301045325_create_marks.rb
@@ -7,6 +7,7 @@ def change
       t.decimal :lat
       t.decimal :long
       t.references :user, null: false, foreign_key: true
+      t.references :location, null: false, foreign_key: true
 
       t.timestamps
     end
diff --git a/db/schema.rb b/db/schema.rb
index e2e440c..98556f4 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2020_03_01_003032) do
+ActiveRecord::Schema.define(version: 2020_03_01_045325) do
 
   create_table "locations", force: :cascade do |t|
     t.string "name"
@@ -37,8 +37,10 @@
     t.decimal "lat"
     t.decimal "long"
     t.integer "user_id", null: false
+    t.integer "location_id", null: false
     t.datetime "created_at", precision: 6, null: false
     t.datetime "updated_at", precision: 6, null: false
+    t.index ["location_id"], name: "index_marks_on_location_id"
     t.index ["mark_type_id"], name: "index_marks_on_mark_type_id"
     t.index ["user_id"], name: "index_marks_on_user_id"
   end
@@ -57,6 +59,7 @@
   end
 
   add_foreign_key "locations", "users"
+  add_foreign_key "marks", "locations"
   add_foreign_key "marks", "mark_types"
   add_foreign_key "marks", "users"
 end
diff --git a/test/controllers/marks_controller_test.rb b/test/controllers/marks_controller_test.rb
index 55e8216..bed99cd 100644
--- a/test/controllers/marks_controller_test.rb
+++ b/test/controllers/marks_controller_test.rb
@@ -17,7 +17,7 @@ class MarksControllerTest < ActionDispatch::IntegrationTest
 
   test "should create mark" do
     assert_difference('Mark.count') do
-      post marks_url, params: { mark: { description: @mark.description, lat: @mark.lat, long: @mark.long, mark_type_id: @mark.mark_type_id, name: @mark.name, user_id: @mark.user_id } }
+      post marks_url, params: { mark: { description: @mark.description, lat: @mark.lat, location_id: @mark.location_id, long: @mark.long, mark_type_id: @mark.mark_type_id, name: @mark.name, user_id: @mark.user_id } }
     end
 
     assert_redirected_to mark_url(Mark.last)
@@ -34,7 +34,7 @@ class MarksControllerTest < ActionDispatch::IntegrationTest
   end
 
   test "should update mark" do
-    patch mark_url(@mark), params: { mark: { description: @mark.description, lat: @mark.lat, long: @mark.long, mark_type_id: @mark.mark_type_id, name: @mark.name, user_id: @mark.user_id } }
+    patch mark_url(@mark), params: { mark: { description: @mark.description, lat: @mark.lat, location_id: @mark.location_id, long: @mark.long, mark_type_id: @mark.mark_type_id, name: @mark.name, user_id: @mark.user_id } }
     assert_redirected_to mark_url(@mark)
   end
 
diff --git a/test/fixtures/marks.yml b/test/fixtures/marks.yml
index b657b0b..e9508ef 100644
--- a/test/fixtures/marks.yml
+++ b/test/fixtures/marks.yml
@@ -7,6 +7,7 @@ one:
   lat: 9.99
   long: 9.99
   user: one
+  location: one
 
 two:
   name: MyString
@@ -15,3 +16,4 @@ two:
   lat: 9.99
   long: 9.99
   user: two
+  location: two
diff --git a/test/system/marks_test.rb b/test/system/marks_test.rb
index 1c49396..da5377d 100644
--- a/test/system/marks_test.rb
+++ b/test/system/marks_test.rb
@@ -16,6 +16,7 @@ class MarksTest < ApplicationSystemTestCase
 
     fill_in "Description", with: @mark.description
     fill_in "Lat", with: @mark.lat
+    fill_in "Location", with: @mark.location_id
     fill_in "Long", with: @mark.long
     fill_in "Mark type", with: @mark.mark_type_id
     fill_in "Name", with: @mark.name
@@ -32,6 +33,7 @@ class MarksTest < ApplicationSystemTestCase
 
     fill_in "Description", with: @mark.description
     fill_in "Lat", with: @mark.lat
+    fill_in "Location", with: @mark.location_id
     fill_in "Long", with: @mark.long
     fill_in "Mark type", with: @mark.mark_type_id
     fill_in "Name", with: @mark.name