Add profile location

Author: nertc

app/assets/javascripts/user.js

@@ -10,6 +10,13 @@ $(document).ready(function () {
   var defaultHomeZoom = 12;
   var map, marker, deleted_lat, deleted_lon;
 
+  const locationInput = {
+    dirty: true,
+    request: null,
+    countryName: "",
+    deletedText: null
+  };
+
   if ($("#map").length) {
     map = L.map("map", {
       attributionControl: false,
@@ -73,6 +80,7 @@ $(document).ready(function () {
 
         deleted_lat = null;
         deleted_lon = null;
+        locationInput.deletedText = null;
         respondToHomeUpdate();
       }).on("moveend", function () {
         var lat = $("#home_lat").val().trim(),
@@ -93,9 +101,26 @@ $(document).ready(function () {
       $("#home_lat, #home_lon").on("input", function () {
         deleted_lat = null;
         deleted_lon = null;
+        locationInput.deletedText = null;
         respondToHomeUpdate();
       });
 
+      $("#location_name").on("input", function () {
+        locationInput.dirty = true;
+        deleted_lat = null;
+        deleted_lon = null;
+        locationInput.deletedText = null;
+
+        updateLocationWarning();
+        respondToHomeUpdate(false);
+      });
+
+      $("#location_default_name").on("click", function () {
+        $("#location_name").val(locationInput.countryName);
+        $("#location_name_warning").addClass("d-none");
+        locationInput.dirty = false;
+      });
+
       $("#home_show").click(function () {
         var lat = $("#home_lat").val(),
             lon = $("#home_lon").val();
@@ -104,24 +129,34 @@ $(document).ready(function () {
       });
 
       $("#home_delete").click(function () {
-        var lat = $("#home_lat").val(),
-            lon = $("#home_lon").val();
+        let lat = $("#home_lat").val(),
+            lon = $("#home_lon").val(),
+            locationName = $("#location_name").val();
 
-        $("#home_lat, #home_lon").val("");
+        $("#location_name_warning").addClass("d-none");
+        $("#home_lat, #home_lon, #location_name").val("");
         deleted_lat = lat;
         deleted_lon = lon;
-        respondToHomeUpdate();
+        locationInput.deletedText = locationName;
+
+        respondToHomeUpdate(false);
         $("#home_undelete").trigger("focus");
       });
 
       $("#home_undelete").click(function () {
         $("#home_lat").val(deleted_lat);
         $("#home_lon").val(deleted_lon);
+        $("#location_name").val(locationInput.deletedText);
         deleted_lat = null;
         deleted_lon = null;
-        respondToHomeUpdate();
+        locationInput.deletedText = null;
+
+        updateLocationWarning();
+        respondToHomeUpdate(false);
         $("#home_delete").trigger("focus");
       });
+
+      updateHomeLocation();
     } else {
       $("[data-user]").each(function () {
         var user = $(this).data("user");
@@ -133,14 +168,18 @@ $(document).ready(function () {
     }
   }
 
-  function respondToHomeUpdate() {
-    var lat = $("#home_lat").val().trim(),
+  function respondToHomeUpdate(updateLocationName = true) {
+    let lat = $("#home_lat").val().trim(),
         lon = $("#home_lon").val().trim(),
+        locationName = $("#location_name").val().trim(),
         location;
 
     try {
       if (lat && lon) {
         location = L.latLng(lat, lon);
+        if (updateLocationName) {
+          updateHomeLocation();
+        }
       }
       $("#home_lat, #home_lon").removeClass("is-invalid");
     } catch (error) {
@@ -150,8 +189,11 @@ $(document).ready(function () {
 
     $("#home_message").toggleClass("invisible", Boolean(location));
     $("#home_show").prop("hidden", !location);
-    $("#home_delete").prop("hidden", !location);
-    $("#home_undelete").prop("hidden", !(!location && deleted_lat && deleted_lon));
+    $("#home_delete").prop("hidden", !location && !locationName);
+    $("#home_undelete").prop("hidden", !(
+      (!location || !locationName) &&
+      ((deleted_lat && deleted_lon) || locationInput.deletedText)
+    ));
     if (location) {
       marker.setLatLng([lat, lon]);
       marker.addTo(map);
@@ -178,6 +220,42 @@ $(document).ready(function () {
     }
   }
 
+  function updateHomeLocation() {
+    const lat = $("#home_lat").val().trim();
+    const lon = $("#home_lon").val().trim();
+    if (!lat || !lon) {
+      return;
+    }
+
+    const geocodeUrl = `${OSM.NOMINATIM_URL}reverse?format=json&lat=${lat}&lon=${lon}`;
+
+    if (locationInput.request) locationInput.request.abort();
+    locationInput.request = $.getJSON(geocodeUrl, function (data) {
+      locationInput.request = null;
+
+      data.display_name = data.display_name || "";
+      const displayName = data.display_name.split(",");
+      const locationName = displayName[displayName.length - 1].trim();
+
+      locationInput.countryName = locationName;
+      $("#location_default_name").text(locationName);
+      if (locationInput.dirty) {
+        updateLocationWarning();
+      } else {
+        $("#location_name").val(locationName);
+      }
+    });
+  }
+
+  function updateLocationWarning() {
+    const locationName = $("#location_name").val();
+    if (!locationInput.dirty || locationName.includes(locationInput.countryName)) {
+      $("#location_name_warning").addClass("d-none");
+    } else {
+      $("#location_name_warning").removeClass("d-none");
+    }
+  }
+
   updateAuthUID();
 
   $("select#user_auth_provider").on("change", updateAuthUID);

app/controllers/profiles_controller.rb

@@ -31,6 +31,7 @@ def update
 
     current_user.home_lat = params[:user][:home_lat]
     current_user.home_lon = params[:user][:home_lon]
+    current_user.location_name = params[:user][:location_name]
 
     if current_user.save
       flash[:notice] = t ".success"

app/models/user.rb

@@ -12,6 +12,7 @@
 #  home_lat             :float
 #  home_lon             :float
 #  home_zoom            :integer          default(3)
+#  location_name        :string
 #  pass_salt            :string
 #  email_valid          :boolean          default(FALSE), not null
 #  new_email            :string

app/views/profiles/edit.html.erb

@@ -52,6 +52,13 @@
         <button type="button" id="home_undelete" class="btn btn-outline-primary" hidden><%= t ".undelete" %></button>
       </div>
     </div>
+    <div class="my-2">
+      <%= f.text_field :location_name, :wrapper_class => "col-sm-4 d-flex flex-column pe-3", :class => "mt-auto", :id => "location_name" %>
+      <div id="location_name_warning" class="row align-items-center d-none">
+        <p class="m-0 w-auto fs-6 pe-1"><%= t ".location_name_warning" %></p>
+        <button id="location_default_name" class="btn btn-link p-0 w-auto text-sm-start" type="button"></button>
+      </div>
+    </div>
     <div class="form-check">
       <input class="form-check-input" type="checkbox" name="updatehome" value="1" <% unless current_user.home_location? %> checked <% end %> id="updatehome" />
       <label class="form-check-label" for="updatehome"><%= t ".update home location on click" %></label>

app/views/users/show.html.erb

@@ -139,6 +139,14 @@
       <div class='text-body-secondary'>
         <small>
           <dl class="list-inline">
+            <% if @user.location_name && @user.location_name.strip.present? %>
+              <dt class="list-inline-item m-0">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
+                  <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6" />
+                </svg>
+              </dt>
+              <dd class="list-inline-item"><%= @user.location_name %></dd>
+            <% end %>
             <dt class="list-inline-item m-0"><%= t ".mapper since" %></dt>
             <dd class="list-inline-item"><%= l @user.created_at.to_date, :format => :long %></dd>
             <dt class="list-inline-item m-0"><%= t ".last map edit" %></dt>

config/locales/en.yml

@@ -1839,6 +1839,7 @@ en:
       show: "Show"
       delete: "Delete"
       undelete: "Undo delete"
+      location_name_warning: "Location name doesn't match home location"
     update:
       success: Profile updated.
       failure: Couldn't update profile.

db/migrate/20241030090336_add_user_location_name.rb

@@ -0,0 +1,5 @@
+class AddUserLocationName < ActiveRecord::Migration[7.2]
+  def change
+    add_column :users, :location_name, :string
+  end
+end

db/structure.sql

@@ -1499,7 +1499,8 @@ CREATE TABLE public.users (
     tou_agreed timestamp without time zone,
     diary_comments_count integer DEFAULT 0,
     note_comments_count integer DEFAULT 0,
-    creation_address inet
+    creation_address inet,
+    location_name character varying
 );
 
 
@@ -3356,6 +3357,7 @@ INSERT INTO "schema_migrations" (version) VALUES
 ('23'),
 ('22'),
 ('21'),
+('20241030090336'),
 ('20240913171951'),
 ('20240912181413'),
 ('20240910175616'),

test/system/user_location_change_test.rb

@@ -0,0 +1,22 @@
+require "application_system_test_case"
+
+class UserLocationChangeTest < ApplicationSystemTestCase
+  def setup
+    stub_request(:get, /.*gravatar.com.*d=404/).to_return(:status => 404)
+  end
+
+  test "User can change their location" do
+    user = create(:user)
+    sign_in_as(user)
+
+    visit user_path(user.display_name)
+    assert_no_selector ".bi.bi-geo-alt-fill"
+
+    visit edit_profile_path
+    fill_in "Location name", :with => "Test Location"
+    click_on "Update Profile"
+
+    visit user_path(user)
+    assert_text "Test Location"
+  end
+end