Addresses and places in a semi working way!

friends/assets/css/app.css

@@ -3,6 +3,11 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+/* mapbox */
+.mapboxgl-control-container{
+  display:none;
+}
+
 /* Override some defaults I don't like */
 .input{
   border-radius: inherit !important;

friends/assets/js/app.js

@@ -24,9 +24,15 @@ import "phoenix_html"
 import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
+import mapboxgl from "../vendor/mapbox-gl"
+
+let Hooks = {};
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+let liveSocket = new LiveSocket("/live", Socket, {
+    hooks: Hooks,
+    params: { _csrf_token: csrfToken }
+})
 
 // Show progress bar on live navigation and form submits
 topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
@@ -41,25 +47,37 @@ liveSocket.connect()
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket
-window.onload = function () {
+
-    window.address_results = document.querySelector("#address-results");
+window.hideElement = function (id) {
-    window.addressInput = document.querySelector("input#friend_address_query");
+    var el = document.getElementById(id);
-    window.addressID = document.querySelector("input#addressID");
+    el.hidden = true;
 }
 
-window.hideResults = function () {
+window.selectResult = function (latlon, display) {    
-    window.address_results.classList.add("hidden");
+    var name_el = document.querySelector("[autocomplete=name]");
-}
+    var latlon_el = document.querySelector("[autocomplete=latlon]");
 
-window.showResults = function () {
+    name_el.value = display;
-    document.getElementById("address-results").classList.remove("hidden");
+    latlon_el.value = latlon;
-}
 
-window.selectAddressSearchResult = function (result) {
+    window.liveSocket.hooks.showMapbox.initMap();
-    const selectedResult = document.querySelector("#" + result);
+};
-    const mapboxID = selectedResult.attributes.id.value;
-    const display = selectedResult.innerText;
 
-    window.addressInput.value = display;
+Hooks.showMapbox = {
-    window.addressID.value = mapboxID;
+    initMap() {
+        mapboxgl.accessToken = 'pk.eyJ1IjoicnlhbnBhbmR5YSIsImEiOiJja3psM2tlcDA1MXl1Mm9uZmo5bGxpNzdxIn0.TwBKpTTypcD5fWFc8XRyHg';
+    
+        const latlon = JSON.parse(document.querySelector("[autocomplete=latlon]").value).reverse();
+        
+        const map = new mapboxgl.Map({
+          container: 'map',
+          style: 'mapbox://styles/mapbox/outdoors-v11',
+            center: latlon,
+          zoom: 8
+        });
+      },
+    
+      mounted() {
+        this.initMap();
+      }
 }

friends/assets/package.json

@@ -7,8 +7,8 @@
     "acorn": "^7.4.1",
     "acorn-node": "^1.8.2",
     "acorn-walk": "^7.2.0",
-    "arg": "^5.0.2",
     "anymatch": "^3.1.2",
+    "arg": "^5.0.2",
     "autoprefixer": "^10.4.12",
     "binary-extensions": "^2.2.0",
     "braces": "^3.0.2",
@@ -44,6 +44,7 @@
     "is-glob": "^4.0.3",
     "is-number": "^7.0.0",
     "lilconfig": "^2.0.6",
+    "mapbox-gl": "^2.10.0",
     "merge2": "^1.4.1",
     "micromatch": "^4.0.5",
     "minimist": "^1.2.7",
@@ -63,10 +64,10 @@
     "postcss-nested": "^6.0.0",
     "postcss-selector-parser": "^6.0.10",
     "postcss-value-parser": "^4.2.0",
+    "queue-microtask": "^1.2.3",
     "quick-lru": "^5.1.1",
     "read-cache": "^1.0.0",
     "readdirp": "^3.6.0",
-    "queue-microtask": "^1.2.3",
     "resolve": "^1.22.1",
     "reusify": "^1.0.4",
     "run-parallel": "^1.2.0",
@@ -80,7 +81,6 @@
     "xtend": "^4.0.2",
     "yaml": "^1.10.2"
   },
-  "devDependencies": {},
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

friends/lib/friends/friend.ex

@@ -36,7 +36,16 @@ defmodule Friends.Friend do
 
   def changeset(friend, params \\ %{}) do
     friend
-    |> Ecto.Changeset.cast(params, [:name, :born, :nickname, :email, :phone, :slug, :user_id])
+    |> Ecto.Changeset.cast(params, [
+      :name,
+      :born,
+      :nickname,
+      :email,
+      :phone,
+      :slug,
+      :user_id,
+      :address_id
+    ])
     |> Ecto.Changeset.validate_required([:name, :email, :phone, :born])
     |> Ecto.Changeset.validate_format(:name, ~r/\w+\ \w+/)
     |> Ecto.Changeset.validate_format(
@@ -64,10 +73,10 @@ defmodule Friends.Friend do
   def get_by_slug(slug) do
     @repo.one(
       from(f in Friend,
-        where: f.slug == ^slug,
+        where: f.slug == ^slug
-        preload: [:relationships, :reverse_relationships, :address]
       )
     )
+    |> load_preloads()
   end
 
   def get_by_id(id) do
@@ -82,10 +91,10 @@ defmodule Friends.Friend do
   def get_by_email(email) do
     @repo.one(
       from(f in Friend,
-        where: f.email == ^email,
+        where: f.email == ^email
-        preload: [:relationships, :reverse_relationships]
       )
     )
+    |> load_preloads()
   end
 
   def create(params) do
@@ -160,6 +169,14 @@ defmodule Friends.Friend do
     if user |> is_nil(), do: false, else: friend.id == user.profile.id
   end
 
+  def assign_address(%Friend{} = friend, address) do
+    friend
+    |> Friends.Friend.changeset(%{
+      address_id: address.id
+    })
+    |> Friends.Repo.update!()
+  end
+
   def assign_user(%Friend{} = friend) do
     case friend.email |> Friends.Accounts.get_user_by_email() do
       nil ->
@@ -207,4 +224,15 @@ defmodule Friends.Friend do
   end
 
   def load_preloads(%Friends.Friend{} = friend), do: friend
+
+  def get_address(%Friend{} = friend) do
+    if friend.address do
+      {
+        friend.address.latlon,
+        friend.address.name
+      }
+    else
+      {nil, nil}
+    end
+  end
 end

friends/lib/friends/places/place.ex

@@ -1,8 +1,11 @@
 defmodule Friends.Places.Place do
   use Ecto.Schema
   import Ecto.Query
+  import Ecto.Changeset
   import Helpers
 
+  alias Friends.Places.{Place, Search}
+
   @repo Friends.Repo
 
   schema "places" do
@@ -12,50 +15,19 @@ defmodule Friends.Places.Place do
     field(:zoom, :integer)
 
     has_many(:events, Friends.Event)
-    has_many(:friends, Friends.Friend)
+    has_many(:friends, Friends.Friend, foreign_key: :address_id)
   end
 
-  def new(place_name, opts \\ nil) do
+  def validate(place, params \\ %{}) do
-    {:ok, place} =
-      @repo.insert(%Friends.Places.Place{
-        name: place_name,
-        type: opts[:type]
-      })
-
     place
+    |> cast(params, [:name, :type, :latlon, :zoom])
+    |> unique_constraint(:name)
+    |> validate_required(:name)
   end
 
-  def get(place_name) do
+  def get_or_create(place) do
-    @repo.one(
-      from(p in Place,
-        where: p.name == ^place_name,
-        preload: [:events]
-      )
-    )
-  end
-
-  def get_or_new(name, opts \\ nil) do
-    case get(name) do
-      nil -> new(name, opts)
-      place -> place
-    end
-  end
-
-  def get_by_slug(slug) do
-    name = slug |> from_slug
-
-    @repo.one(
-      from(p in Place,
-        where: p.name == ^name,
-        preload: [:events]
-      )
-    )
-  end
-
-  def changeset(place, params \\ %{}) do
     place
-    |> Ecto.Changeset.cast(params, [:name, :type, :latlon, :zoom])
+    |> Friends.Places.Place.validate()
-    |> Ecto.Changeset.validate_required([:name])
+    |> Friends.Repo.insert!()
-    |> Ecto.Changeset.unique_constraint(:name)
   end
 end

friends/lib/friends/places/search.ex

@@ -26,14 +26,18 @@ defmodule Friends.Places.Search do
     response = HTTPoison.get!(url)
     results = Poison.decode!(response.body)
 
-    results |> Map.get("features")
+    results["features"]
   end
 
-  def display_address(%{"place_name" => name, "id" => id} = result) do
+  def parse_features(%{
+        "center" => lonlat,
+        "place_name" => name,
+        "id" => id
+      }) do
     %{
       name: name,
-      mapbox_id: id,
+      latlon: lonlat |> Enum.reverse() |> Poison.encode!(),
-      id: id |> String.replace(~r/\./, "-")
+      id: id |> String.replace(".", "-")
     }
   end
 end

friends/lib/friends_web/live/components/autocomplete.ex

@@ -0,0 +1,52 @@
+defmodule FriendsWeb.Components.Autocomplete do
+  use FriendsWeb, :live_component
+  import Helpers
+
+  alias Phoenix.LiveView.JS
+
+  def search_results(assigns) do
+    ~H"""
+    <div id="search-results" class="absolute w-full md:w-max bottom-16">
+
+    <%= if @search_results do %>
+    <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-2/3 overflow-auto">
+    <%= for r <- @search_results do %>
+    <li class="py-0 my-0">
+      <.link id={r[:id]}
+      latlon={r[:latlon]}
+      class="search_result"
+      onMouseDown={"selectResult('#{r[:latlon]}', '#{r[:name]}')"}>
+        <%= r[:name] %>
+      </.link>
+      </li>
+    <% end %>
+    </ul>
+    <% end %>
+
+    </div>
+    <script language="javascript">
+    window.elSearch_results = document.querySelector("#search-results");
+    window.elSearchInput = document.querySelector("input[autocomplete=value]");
+    window.elSearchResultID = document.querySelector("input[autocomplete=id]");
+
+    window.hideResults = function () {
+    window.elSearch_results.classList.add("hidden");
+    }
+
+    window.showResults = function () {
+    document.getElementById("search-results").classList.remove("hidden");
+    }
+
+    window.selectSearchResult = function (result) {
+    const elSelectedResult = document.querySelector("#" + result);
+    const searchResultID = elSelectedResult.attributes.id.value;
+    const display = elSelectedResult.innerText;
+
+    window.elSearchInput.value = display;
+    window.elSearchResultID.value = searchResultID;
+    }
+    </script>
+
+    """
+  end
+end

friends/lib/friends_web/live/components/components.ex

@@ -3,6 +3,8 @@ defmodule FriendsWeb.FriendsLive.Components do
   use Phoenix.HTML
   import Helpers
   alias Friends.Friend
+  alias FriendsWeb.Components.{Autocomplete, Map}
+  alias Phoenix.LiveView.JS
 
   def header(assigns) do
     ~H"""
@@ -45,6 +47,7 @@ defmodule FriendsWeb.FriendsLive.Components do
 
   def show_page(:overview, assigns) do
     ~H"""
+                  <Map.show address_latlon={@latlon} />
         <ul class="py-4 pl-0 md:text-xl h-1/2">
           <li class="flex flex-row mb-8 gap-6">
               <strong class="w-28 text-right">Nickname:</strong>
@@ -73,7 +76,8 @@ defmodule FriendsWeb.FriendsLive.Components do
           </li>
           <li class="flex flex-row mb-8 gap-6">
               <strong class="w-28 text-right">Address:</strong>
-              <div class=""><%= @friend.address %></div>
+              <div class=""><%= @address %></div>
+              <input type="hidden" autocomplete="latlon" value={@latlon}/>
           </li>
         </ul>
     """
@@ -137,7 +141,8 @@ defmodule FriendsWeb.FriendsLive.Components do
         let={f}
         action={@action}
         phx_change= "validate"
-        phx_submit= "save">
+        phx_submit= "save"
+        >
         <%= hidden_input f, :id, value: @friend.id %>
         <div class="border-b-4 flex flex-row">
           <%= text_input f, :name, placeholder: "Full Name",
@@ -152,6 +157,10 @@ defmodule FriendsWeb.FriendsLive.Components do
             phx_debounce: :blur %>
           <div class="min-w-fit flex place-items-center mx-4"><%= error_tag f, :name %></div>
         </div>
+
+    <%= if @address_latlon do %>
+          <Map.show address_latlon={@address_latlon} />
+      <% end %>
         <ul class="py-4 pl-0 h-1/2">
         <li class="flex flex-row gap-x-6">
               <strong class="md:text-xl w-20 md:w-28 shrink-0 text-right">Email:</strong>
@@ -183,23 +192,21 @@ defmodule FriendsWeb.FriendsLive.Components do
           <li class="flex flex-row gap-x-6 relative">
               <strong class="md:text-xl w-20 md:w-28 shrink-0 text-right">Address:</strong>
                 <div class="flex flex-col h-16">
-                <%= text_input f, :address_query, class: "input input-primary input-sm md:input-md", phx_debounce: "500", value: @address_query,
+                <%= text_input f, :address_query, value: @address_query,
-                phx_change: :address_search, onClick: "showResults();", onBlur: "hideResults();" %>
+                class: "input input-primary input-sm md:input-md",
-                  <%= hidden_input f, :address_id, value: 0, id: "addressID" %>
+                phx_debounce: "500",
-              </div>
+                phx_change: :address_search,
-              <div id="address-results" class="absolute w-full md:w-max bottom-16">
+                phx_click: JS.show(to: "#search-results"),
-              <%= if @address_results do %>
+                phx_blur: JS.hide(to: "#search-results"),
-              <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-2/3 overflow-auto">
+                autocomplete: "name" %>
-                <%= for r <- @address_results do %>
+                <%= hidden_input f, :address_latlon, value: @address_latlon,
-                <li class="py-0 my-0"><.link id={r[:id]} mapbox_id={r[:mapbox_id]} class="address_result" onMouseDown={"selectAddressSearchResult('" <> r[:id] <> "');"}>
+                id: "address-latlon", autocomplete: "latlon",
-                <%= r[:name] %></.link></li>
+                phx_change: "validate"
-                <% end %>
+                 %>
-              </ul>
-              <% end %>
               </div>
+              <Autocomplete.search_results search_results={@search_results}/>
           </li>
         </ul>
-
         <div class="form-control flex flex-row gap-x-4 md:justify-end mb-4 md:w-1/2">
         <%= if @live_action != :welcome do %>
             <div class="flex-1">

friends/lib/friends_web/live/components/map.ex

@@ -0,0 +1,9 @@
+defmodule FriendsWeb.Components.Map do
+  use FriendsWeb, :live_component
+
+  def show(assigns) do
+    ~H"""
+    <div id="map" phx-hook={"showMapbox"} latlon={@address_latlon}></div>
+    """
+  end
+end

friends/lib/friends_web/live/edit.ex

@@ -7,20 +7,23 @@ defmodule FriendsWeb.FriendsLive.Edit do
 
   alias Friends.{Friend, Places}
 
+  # No slug means it's a new profile form
   def mount(%{}, token, socket) do
     friend = Friend.new()
+    live_action = socket.assigns.live_action || :overview
 
     {:ok,
      socket
-     |> assign(:live_action, socket.assigns.live_action)
+     |> assign(:live_action, live_action)
      |> assign_current_user(token |> Map.get("user_token"))
      |> assign(:friend, friend)
      |> title("Welcome")
      |> assign(:changeset, %Friend{} |> Friend.changeset())}
   end
 
+  # Has a slug means it's an edit profile form
   def mount(%{"slug" => slug} = _attrs, token, socket) do
-    live_action = socket.assigns.live_action || false
+    live_action = socket.assigns.live_action || :overview
 
     friend = Friend.get_by_slug(slug)
 
@@ -34,7 +37,7 @@ defmodule FriendsWeb.FriendsLive.Edit do
        |> title(friend.name <> " - " <> (live_action |> titlecase))
        |> assign(:changeset, %Friend{} |> Friend.changeset())
        |> assign(:address_query, nil)
-       |> assign(:address_results, nil)}
+       |> assign(:search_results, nil)}
     else
       {:ok, socket |> redirect(to: Routes.friends_show_path(socket, :overview, friend.slug))}
     end
@@ -46,13 +49,16 @@ defmodule FriendsWeb.FriendsLive.Edit do
     friend = Friend.get_by_slug(slug)
     editable = friend |> Friend.can_be_edited_by(socket.assigns[:current_user])
 
+    {address_latlon, address_query} = friend |> Friend.get_address()
+
     {:noreply,
      socket
      |> assign_friend(friend)
      |> assign(:action, Routes.friends_path(socket, :update))
      |> assign(:live_action, live_action)
-     |> assign(:address_query, nil)
+     |> assign(:address_query, address_query)
-     |> assign(:address_results, nil)
+     |> assign(:address_latlon, address_latlon |> Poison.encode!())
+     |> assign(:search_results, nil)
      |> title(friend.name <> " - " <> (live_action |> titlecase))
      |> assign(:editable, editable)}
   end
@@ -70,13 +76,14 @@ defmodule FriendsWeb.FriendsLive.Edit do
   end
 
   def handle_event("validate", %{"friend" => form_params}, %{assigns: %{friend: friend}} = socket) do
-    id = form_params["id"]
+    id = form_params["id"] |> String.to_integer()
     name = form_params["name"]
     nickname = form_params["nickname"]
     born = form_params["born"]
     email = form_params["email"]
     phone = form_params["phone"] |> format_phone
     address_query = form_params["address_query"]
+    address_latlon = form_params["address_latlon"]
 
     new_params = %{
       id: id,
@@ -99,6 +106,7 @@ defmodule FriendsWeb.FriendsLive.Edit do
       |> assign(:changeset, changeset)
       |> assign_friend(friend |> struct(new_params), changeset)
       |> assign(:address_query, address_query)
+      |> assign(:address_latlon, address_latlon)
     }
   end
 
@@ -115,7 +123,17 @@ defmodule FriendsWeb.FriendsLive.Edit do
     phone = form_params["phone"] |> format_phone
     slug = form_params["slug"] || name |> to_slug
     id = form_params["id"] || :new
-    address_id = form_params["address_id"]
+    address_latlon = form_params["address_latlon"] |> Poison.decode!()
+    address_query = form_params["address_query"]
+
+    address = %Friends.Places.Place{
+      name: address_query,
+      latlon: address_latlon
+    }
+
+    new_address =
+      address
+      |> Friends.Places.Place.get_or_create()
 
     new_params = %{
       id: id,
@@ -125,7 +143,7 @@ defmodule FriendsWeb.FriendsLive.Edit do
       born: born,
       phone: phone,
       email: email,
-      address_id: address_id
+      address_id: new_address.id
     }
 
     updated_friend = Friend.create_or_update(new_params)
@@ -142,12 +160,12 @@ defmodule FriendsWeb.FriendsLive.Edit do
   end
 
   def handle_event("address_search", %{"friend" => %{"address_query" => query}}, socket) do
-    results = Places.Search.autocomplete(query) |> Enum.map(&Places.Search.display_address/1)
+    results = Places.Search.autocomplete(query) |> Enum.map(&Places.Search.parse_features/1)
 
     if query == "" do
-      {:noreply, socket |> assign(:address_results, nil)}
+      {:noreply, socket |> assign(:search_results, nil)}
     else
-      {:noreply, socket |> assign(:address_results, results)}
+      {:noreply, socket |> assign(:search_results, results)}
     end
   end
 

friends/lib/friends_web/live/show.ex

@@ -10,12 +10,16 @@ defmodule FriendsWeb.FriendsLive.Show do
     friend = Friend.get_by_slug(slug)
     editable = friend |> Friend.can_be_edited_by(socket.assigns[:current_user])
 
+    {latlon, address} = friend |> Friend.get_address()
+
     if(live_action) do
       {:ok,
        socket
        |> assign(:live_action, live_action)
        |> assign_current_user(token |> Map.get("user_token"))
        |> assign(:friend, friend)
+       |> assign(:address, address)
+       |> assign(:latlon, latlon |> Poison.encode!())
        |> title(friend.name <> " - " <> (live_action |> titlecase))
        |> assign(:changeset, %Friend{} |> Friend.changeset())
        |> assign(:action, editable)}

friends/lib/friends_web/router.ex

@@ -111,6 +111,7 @@ defmodule FriendsWeb.Router do
 
     post "/", FriendsController, :update
 
+    live "/:slug", FriendsLive.Edit
     live "/:slug/overview", FriendsLive.Edit, :overview
     live "/:slug/timeline", FriendsLive.Edit, :timeline
     live "/:slug/relationships", FriendsLive.Edit, :relationships