ryan/friends
1
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity

Addresses and places in a semi working way!

Browse Source
This commit is contained in:
Ryan Pandya 2022-11-09 19:11:46 -08:00
parent c495373a81
commit afa816d2c2
15 changed files with 2264 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
friends/assets/css/app.css
View File

@ -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;

54
friends/assets/js/app.js
View File

@ -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.addressInput = document.querySelector("input#friend_address_query");
window.addressID = document.querySelector("input#addressID");
window.hideElement = function (id) {
var el = document.getElementById(id);
el.hidden = true;
}
window.hideResults = function () {
window.address_results.classList.add("hidden");
}
window.selectResult = function (latlon, display) {
var name_el = document.querySelector("[autocomplete=name]");
var latlon_el = document.querySelector("[autocomplete=latlon]");
window.showResults = function () {
document.getElementById("address-results").classList.remove("hidden");
}
name_el.value = display;
latlon_el.value = latlon;
window.selectAddressSearchResult = function (result) {
const selectedResult = document.querySelector("#" + result);
const mapboxID = selectedResult.attributes.id.value;
const display = selectedResult.innerText;
window.liveSocket.hooks.showMapbox.initMap();
};
window.addressInput.value = display;
window.addressID.value = mapboxID;
}
Hooks.showMapbox = {
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();
}
}

2005
friends/assets/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

6
friends/assets/package.json
View File

@ -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"
},

1
friends/assets/vendor/mapbox-gl.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

44
friends/assets/vendor/mapbox-gl.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

38
friends/lib/friends/friend.ex
View File

@ -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,
preload: [:relationships, :reverse_relationships, :address]
where: f.slug == ^slug
)
)
|> 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,
preload: [:relationships, :reverse_relationships]
where: f.email == ^email
)
)
|> 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

50
friends/lib/friends/places/place.ex
View File

@ -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
{:ok, place} =
@repo.insert(%Friends.Places.Place{
name: place_name,
type: opts[:type]
})
def validate(place, params \\ %{}) do
place
|> cast(params, [:name, :type, :latlon, :zoom])
|> unique_constraint(:name)
|> validate_required(:name)
end
def get(place_name) 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
def get_or_create(place) do
place
|> Ecto.Changeset.cast(params, [:name, :type, :latlon, :zoom])
|> Ecto.Changeset.validate_required([:name])
|> Ecto.Changeset.unique_constraint(:name)
|> Friends.Places.Place.validate()
|> Friends.Repo.insert!()
end
end

12
friends/lib/friends/places/search.ex
View File

@ -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,
id: id |> String.replace(~r/\./, "-")
latlon: lonlat |> Enum.reverse() |> Poison.encode!(),
id: id |> String.replace(".", "-")
}
end
end

52
friends/lib/friends_web/live/components/autocomplete.ex Normal file
View File

@ -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

39
friends/lib/friends_web/live/components/components.ex
View File

@ -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,
phx_change: :address_search, onClick: "showResults();", onBlur: "hideResults();" %>
<%= hidden_input f, :address_id, value: 0, id: "addressID" %>
</div>
<div id="address-results" class="absolute w-full md:w-max bottom-16">
<%= if @address_results do %>
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-2/3 overflow-auto">
<%= for r <- @address_results do %>
<li class="py-0 my-0"><.link id={r[:id]} mapbox_id={r[:mapbox_id]} class="address_result" onMouseDown={"selectAddressSearchResult('" <> r[:id] <> "');"}>
<%= r[:name] %></.link></li>
<% end %>
</ul>
<% end %>
<%= text_input f, :address_query, value: @address_query,
class: "input input-primary input-sm md:input-md",
phx_debounce: "500",
phx_change: :address_search,
phx_click: JS.show(to: "#search-results"),
phx_blur: JS.hide(to: "#search-results"),
autocomplete: "name" %>
<%= hidden_input f, :address_latlon, value: @address_latlon,
id: "address-latlon", autocomplete: "latlon",
phx_change: "validate"
%>
</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">

9
friends/lib/friends_web/live/components/map.ex Normal file
View File

@ -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

40
friends/lib/friends_web/live/edit.ex
View File

@ -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_results, nil)
|> assign(:address_query, address_query)
|> 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

4
friends/lib/friends_web/live/show.ex
View File

@ -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)}

1
friends/lib/friends_web/router.ex
View File

@ -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