refactored how location is stored in database (geocoded before saving)

js/dist/admin.js

@@ -1,2 +1,2 @@
-module.exports=function(t){var e={};function o(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=t,o.c=e,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=11)}([,function(t,e){t.exports=flarum.core.compat["common/extend"]},function(t,e){t.exports=flarum.core.compat["admin/app"]},,,,,,function(t,e){t.exports=flarum.core.compat["admin/components/UserListPage"]},,,function(t,e,o){"use strict";o.r(e);var n=o(2),r=o.n(n),a=o(1),i=o(8),u=o.n(i);r.a.initializers.add("justoverclock/users-map-location",(function(){r.a.extensionData.for("justoverclock-users-map-location").registerSetting({setting:"justoverclock-users-map-location.mapBox-api-key",name:"justoverclock-users-map-location.mapBox-api-key",type:"text",label:r.a.translator.trans("justoverclock-users-map-location.admin.mapBox-api-key"),help:r.a.translator.trans("justoverclock-users-map-location.admin.mapBox-api-key-help")}),Object(a.extend)(u.a.prototype,"columns",(function(t){t.add("location",{name:r.a.translator.trans("justoverclock-users-map-location.admin.adminLocationField"),content:function(t){return m("div",null,t.data.attributes.location)}},-50)}))}))}]);
+module.exports=function(t){var e={};function o(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=t,o.c=e,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=11)}([,function(t,e){t.exports=flarum.core.compat["common/extend"]},,,function(t,e){t.exports=flarum.core.compat["admin/app"]},,,,function(t,e){t.exports=flarum.core.compat["admin/components/UserListPage"]},,,function(t,e,o){"use strict";o.r(e);var n=o(4),r=o.n(n),a=o(1),i=o(8),u=o.n(i);r.a.initializers.add("justoverclock/users-map-location",(function(){r.a.extensionData.for("justoverclock-users-map-location").registerSetting({setting:"justoverclock-users-map-location.mapBox-api-key",name:"justoverclock-users-map-location.mapBox-api-key",type:"text",label:r.a.translator.trans("justoverclock-users-map-location.admin.mapBox-api-key"),help:r.a.translator.trans("justoverclock-users-map-location.admin.mapBox-api-key-help")}),Object(a.extend)(u.a.prototype,"columns",(function(t){t.add("location",{name:r.a.translator.trans("justoverclock-users-map-location.admin.adminLocationField"),content:function(t){return m("div",null,t.data.attributes.location)}},-50)}))}))}]);
 //# sourceMappingURL=admin.js.map

js/src/forum/components/AddLocationComponent.js

@@ -5,7 +5,8 @@ export default class AddLocationComponent extends Component {
   oninit(vnode) {
     super.oninit(vnode);
 
-    this.location = app.session.user.location();
+    this.search_country = app.session.user.location_country() || 'France';
+    this.search_city = ((app.session.user.location_postcode() || '') + ' ' + (app.session.user.location_city() || '')).trim();
   }
 
   view(vnode) {
@@ -13,17 +14,103 @@ export default class AddLocationComponent extends Component {
       <fieldset className="Settings-theme">
         <legend>{app.translator.trans('justoverclock-users-map-location.forum.location')}</legend>
         <p className="location-description">{app.translator.trans('justoverclock-users-map-location.forum.locationDescription')}</p>
-        <input type="text" className="FormControl location" id="location" name="location" value={this.location} onblur={this.saveValue.bind(this)} />
+        <input type="text" className="FormControl search-country" id="search-country" name="search-country" value={this.search_country} onblur={this.countryChanged.bind(this)} />
+        <input type="text" className="FormControl search-city" id="search-city" name="search-city" value={this.search_city} onblur={this.cityChanged.bind(this)} />
       </fieldset>
     );
   }
 
-  saveValue(e) {
+  countryChanged(e) {
+    this.search_country = e.target.value.trim();
+    this.save();
+  }
+    
+  cityChanged(e) {
+    this.search_city = e.target.value.trim();
+    this.save();
+  }
+    
+  save() {
+    if(this.search_country == '' || this.search_city == '')
+      return;
+    
+    let postcodeRegexps = [  
+      '([0-9]{5})',
+      '([0-9]{2} [0-9]{3})'
+    ];
+    
+    let postcode = '';
+    let city = '';
+    for(let postcodeReIdx = 0; postcodeReIdx < postcodeRegexps.length; ++postcodeReIdx) {
+      let postcodeRe = postcodeRegexps[postcodeReIdx];
+      for(let mode = 0; mode <= 2; ++mode) {
+        let re;
+        if(mode == 0) {
+          re = new RegExp('^' + postcodeRe + '$');
+        } else {
+          re = new RegExp('^' + (mode == 1 ? postcodeRe + '[, ]+(.*)' : '(.*)[, ]+' + postcodeRe) + '$');
+        }
+        let match = this.search_city.match(re);
+        if(match) {
+          if(mode == 0) {
+            postcode = match[1];
+            city = '';
+          } else {
+            postcode = match[mode == 1 ? 1 : 2];
+            city = match[mode == 1 ? 2 : 1];
+          }
+          break;
+        }
+      }
+    }
+    
+    if(postcode == '' && city == '')
+      city = this.search_city;
+    
+    if(postcode != '') postcode = 'postalcode='+encodeURI(postcode.split(' ').join(''));
+    if(city != '') city = 'city='+encodeURI(city);
+    
+    let query = postcode == '' ? city : postcode + (city == '' ? '' : '&' + city);
+    query += '&country=' + encodeURIComponent(this.search_country);
+    
+    //console.log(query);
+    fetch('https://nominatim.openstreetmap.org/search?' + query + '&format=json&addressdetails=1')
+      .then((responseText) => responseText.json())
+      .then((response) => {
+        console.log('search reuslts:');
+        console.log(response);
+        
+        let foundResult = false;
+        for(let idx = 0; idx < response.length; ++idx) {
+          let result = response[idx];
+          if((result.class=='place' && result.type=='postcode') || (result.class=='boundary' && result.type=='administrative')) {
+            console.log('found valid result:');
+            console.log(result);
+            foundResult = true;
+            
             const user = app.session.user;
-    user
+            let attributes = {
-      .save({
+              location_country: result.address.country,
-        location: e.target.value,
+              location_countrycode: result.address.country_code,
-      })
+              location_postcode: result.address.postcode,
-      .then(app.alerts.show({ type: 'success' }, app.translator.trans('justoverclock-users-map-location.forum.locationSaved')));
+              location_city: result.address.village || result.address.town || result.address.city,
+              location_latitude: result.lat,
+              location_longitude: result.lon
+            };
+            user.save(attributes)
+            .then(() => {
+              this.search_country = attributes.location_country || 'France';
+              this.search_city = ((attributes.location_postcode || '') + ' ' + (attributes.location_city || '')).trim();
+              app.alerts.show({ type: 'success' }, app.translator.trans('justoverclock-users-map-location.forum.locationSaved'))
+            });
+            
+            break;
+          }
+        }
+        
+        if(!foundResult) {
+          app.alerts.show({ type: 'error' }, app.translator.trans('justoverclock-users-map-location.forum.locationNotFound'))
+        }
+      });
   }
 }

js/src/forum/index.js

@@ -8,10 +8,15 @@ import UserCard from 'flarum/forum/components/UserCard';
 import Leaflet from 'leaflet';
 
 app.initializers.add('justoverclock/users-map-location', () => {
-  User.prototype.location = Model.attribute('location');
+  User.prototype.location_country = Model.attribute('location_country');
+  User.prototype.location_countrycode = Model.attribute('location_countrycode');
+  User.prototype.location_postcode = Model.attribute('location_postcode');
+  User.prototype.location_city = Model.attribute('location_city');
+  User.prototype.location_latitude = Model.attribute('location_latitude');
+  User.prototype.location_longitude = Model.attribute('location_longitude');
 
   extend(UserCard.prototype, 'oncreate', function () {
-    const user = this.attrs.user;
+    /*const user = this.attrs.user;
     let UserLocation = user.location();
     const publicToken = app.forum.attribute('justoverclock-users-map-location.mapBox-api-key');
     const geocode = 'https://nominatim.openstreetmap.org/search?city=' + UserLocation + '&format=json';
@@ -41,10 +46,10 @@ app.initializers.add('justoverclock/users-map-location', () => {
           zoomOffset: -1,
           accessToken: publicToken,
         }).addTo(map2);
-      });
+      });*/
   });
   extend(SettingsPage.prototype, 'oncreate', function () {
-    const location = app.session.user.location();
+    /*const location = app.session.user.location();
     const publicToken = app.forum.attribute('justoverclock-users-map-location.mapBox-api-key');
     const geocode = 'https://nominatim.openstreetmap.org/search?city=' + location + '&format=json';
 
@@ -76,16 +81,16 @@ app.initializers.add('justoverclock/users-map-location', () => {
           zoomOffset: -1,
           accessToken: publicToken,
         }).addTo(map);
-      });
+      });*/
   });
   extend(SettingsPage.prototype, 'settingsItems', function (items) {
     items.add('location', <AddLocationComponent />);
     items.add('mapDiv', <div className="map-div" id="map" />);
   });
   extend(UserCard.prototype, 'infoItems', function (items) {
-    const user = this.attrs.user;
+    /*const user = this.attrs.user;
     let UserLocation = user.location();
     if (UserLocation === '') return;
-    items.add('mapLocation', <div className="map-div" id="map2" />, -100);
+    items.add('mapLocation', <div className="map-div" id="map2" />, -100);*/
   });
 });

locale/en.yml

@@ -7,3 +7,4 @@ justoverclock-users-map-location:
     locationDescription: Here you can setup your location. Be sure to specify your City name only.
     location: Location
     locationSaved: Location saved successfully!
+    locationNotFound: Location not found

migrations/2022_02_15_000000_location_details.php

@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Schema\Builder;
+
+return [
+    'up' => function (Builder $schema) {
+        $schema->table('users', function (Blueprint $table) use ($schema) {
+            $table->decimal('location_latitude', $precision = 9, $scale = 6)->nullable();
+            $table->decimal('location_longitude', $precision = 9, $scale = 6)->nullable();
+            $table->text('location_countrycode')->nullable();
+            $table->text('location_country')->nullable();
+            $table->text('location_postcode')->nullable();
+            $table->text('location_city')->nullable();
+            $table->dropColumn('location');
+        });
+    },
+    
+    'down' => function (Builder $schema) {
+        $schema->table('users', function (Blueprint $table) {
+            $table->text('location');
+            $table->dropColumn('location_city');
+            $table->dropColumn('location_postcode');
+            $table->dropColumn('location_country');
+            $table->dropColumn('location_countrycode');
+            $table->dropColumn('location_longitude');
+            $table->dropColumn('location_latitude');
+        });
+    },
+];

src/Listeners/AddLocationAttribute.php

@@ -11,7 +11,12 @@ class AddLocationAttribute
     {
         $actor = $serializer->getActor();
 
-        $attributes['location'] = $user->location;
+        $attributes['location_city'] = $user->location_city;
+        $attributes['location_postcode'] = $user->location_postcode;
+        $attributes['location_countrycode'] = $user->location_countrycode;
+        $attributes['location_country'] = $user->location_country;
+        $attributes['location_longitude'] = $user->location_longitude;
+        $attributes['location_latitude'] = $user->location_latitude;
 
         return $attributes;
     }

src/Listeners/SaveLocationToDatabase.php

@@ -17,11 +17,16 @@ class SaveLocationToDatabase
         $canEdit = $actor->can('edit', $user);
         $attributes = Arr::get($data, 'attributes', []);
 
-        if (isset($attributes['location'])) {
+        if (isset($attributes['location_countrycode'])) {
             if (!$isSelf) {
                 $actor->assertPermission($canEdit);
             }
-            $user->location = $attributes['location'];
+            $user->location_city = $attributes['location_city'];
+            $user->location_postcode = $attributes['location_postcode'];
+            $user->location_countrycode = $attributes['location_countrycode'];
+            $user->location_country = $attributes['location_country'];
+            $user->location_latitude = $attributes['location_latitude'];
+            $user->location_longitude = $attributes['location_longitude'];
         }
     }
 }