Skip to content

Commit

Permalink
wip: make modals client-side
Browse files Browse the repository at this point in the history
  • Loading branch information
@starcraft66
starcraft66 committed Jan 21, 2024
1 parent f09afa0 commit fb8a158
Show file tree
Hide file tree
Showing 8 changed files with 273 additions and 198 deletions.
21 changes: 18 additions & 3 deletions assets/js/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,23 @@
import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view"
import { Socket } from "phoenix"
import { LiveSocket } from "phoenix_live_view"
import Alpine from "alpinejs"
import focus from "@alpinejs/focus"

window.Alpine = Alpine
Alpine.plugin(focus)
Alpine.start()

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, {
params: { _csrf_token: csrfToken },
dom: {
onBeforeElUpdated(from, to) {
if (from._x_dataStack) {
window.Alpine.clone(from, to)
}
}
}
})

// Connect if there are any LiveViews on the page
liveSocket.connect()
Expand Down
3 changes: 2 additions & 1 deletion assets/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"author": "",
"license": "ISC",
"dependencies": {
"alpinejs": "^3.12.3"
"@alpinejs/focus": "^3.13.3",
"alpinejs": "^3.13.3"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.9",
Expand Down
28 changes: 24 additions & 4 deletions assets/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,14 @@
resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==

"@alpinejs/focus@^3.13.3":
version "3.13.3"
resolved "https://registry.yarnpkg.com/@alpinejs/focus/-/focus-3.13.3.tgz#fd06d055175ff64b07a7e4a64fa01a4ad85104dd"
integrity sha512-fTRX/9wOfysyZ1PJ4gHeUnmiNTIgqBDIqKxeP5iMvj1UHD3TFLDXllvoIKH3ezqcsyQZqxd/q1MFM7dlIhkmeg==
dependencies:
focus-trap "^6.9.4"
tabbable "^5.3.3"

"@jridgewell/gen-mapping@^0.3.2":
version "0.3.3"
resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"
Expand Down Expand Up @@ -87,10 +95,10 @@
resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.1.5.tgz#74ee3aad995d0a3996a6bb9533d4d280514ede03"
integrity sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==

alpinejs@^3.12.3:
version "3.12.3"
resolved "https://registry.yarnpkg.com/alpinejs/-/alpinejs-3.12.3.tgz#d7f311b39318c5144e99205ab69557c0d90a552a"
integrity sha512-fLz2dfYQ3xCk7Ip8LiIpV2W+9brUyex2TAE7Z0BCvZdUDklJE+n+a8gCgLWzfZ0GzZNZu7HUP8Z0z6Xbm6fsSA==
alpinejs@^3.13.3:
version "3.13.3"
resolved "https://registry.yarnpkg.com/alpinejs/-/alpinejs-3.13.3.tgz#92eb7e869b99ff548e7a55044e45660597cf530b"
integrity sha512-WZ6WQjkAOl+WdW/jukzNHq9zHFDNKmkk/x6WF7WdyNDD6woinrfXCVsZXm0galjbco+pEpYmJLtwlZwcOfIVdg==
dependencies:
"@vue/reactivity" "~3.1.1"

Expand Down Expand Up @@ -272,6 +280,13 @@ fill-range@^7.0.1:
dependencies:
to-regex-range "^5.0.1"

focus-trap@^6.9.4:
version "6.9.4"
resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-6.9.4.tgz#436da1a1d935c48b97da63cd8f361c6f3aa16444"
integrity sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw==
dependencies:
tabbable "^5.3.3"

fraction.js@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
Expand Down Expand Up @@ -628,6 +643,11 @@ supports-preserve-symlinks-flag@^1.0.0:
resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==

tabbable@^5.3.3:
version "5.3.3"
resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.3.3.tgz#aac0ff88c73b22d6c3c5a50b1586310006b47fbf"
integrity sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==

tailwindcss@^3, tailwindcss@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.2.tgz#2f9e35d715fdf0bbf674d90147a0684d7054a2d3"
Expand Down
2 changes: 1 addition & 1 deletion config/config.exs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import Config
config :esbuild,
path: System.get_env("MIX_ESBUILD_PATH"),
default: [
args: ~w(js/app.js --bundle --target=es2016 --outdir=../priv/static/js --external:/images/*),
args: ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/js --external:/images/*),
cd: Path.expand("../assets", __DIR__),
env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
]
Expand Down
201 changes: 112 additions & 89 deletions lib/lanpartyseating_web/components/cancellation_modal.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,110 +10,133 @@ defmodule CancellationModalComponent do
case assigns.status do
:available ->
~H"""
<!-- The button to open modal -->
<label for={"station-modal-#{@station.station_number}"} class="btn btn-info"><%= @station.station_number %></label>
<!-- Put this part before </body> tag -->
<input type="checkbox" id={"station-modal-#{@station.station_number}"} class="modal-toggle" />
<div class="modal modal-bottom sm:modal-middle">
<div class="modal-box">
<h3 class="text-lg font-bold">You have selected station <%= @station.station_number %></h3>
<p class="py-4">Do you want to close this station?</p>
<form phx-submit="close_station">
<input type="hidden" name="station_number" value={"#{@station.station_number}"}>
<%= if !is_nil(@error) do %>
<p class="text-error"><%= @error %></p>
<% end %>
<br/><br/>
<div class="modal-action">
<label for={"station-modal-#{@station.station_number}"} class="btn btn-error">X</label>
<button for={"station-modal-#{@station.station_number}"} class="btn btn-success" type="submit">✓</button>
</div>
</form>
</div>
<div class="flex flex-col h-14 flex-1 grow mx-1 " x-data="">
<!-- The button to open modal -->
<label
class="btn btn-info"
x-on:click={"$refs.open_station_modal_#{@station.station_number}.showModal()"}>
<%= @station.station_number %>
</label>
<dialog class="modal" x-ref={"open_station_modal_#{@station.station_number}"}>
<div class="modal-box">
<h3 class="text-lg font-bold">You have selected station <%= @station.station_number %></h3>
<p class="py-4">Do you want to close this station?</p>
<form method="dialog">
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
</form>
<form phx-submit="close_station">
<input type="hidden" name="station_number" value={"#{@station.station_number}"}>
<%= if !is_nil(@error) do %>
<p class="text-error"><%= @error %></p>
<% end %>
<br/><br/>
<div class="modal-action">
<button class="btn btn-success" type="submit">✓</button>
</div>
</form>
</div>
</dialog>
</div>
"""

:occupied ->
~H"""
<!-- The button to open modal -->
<label for={"station-modal-#{@station.station_number}"} class="btn btn-warning flex flex-col" >
<div >
<%= @station.station_number %>
</div>
Until <%= Calendar.strftime(
List.first(@station.reservations).end_date |> Timex.to_datetime("America/Montreal"),
"%H:%M"
) %>
</label>
<!-- Put this part before </body> tag -->
<input type="checkbox" id={"station-modal-#{@station.station_number}"} class="modal-toggle" />
<div class="modal modal-bottom sm:modal-middle">
<div class="modal-box">
<h3 class="text-lg font-bold">You have selected station <%= @station.station_number %></h3>
<p class="py-4">Occupied by badge <b>#<%= @reservation.badge %></b> *REPLACE WITH NAME*</p>
<p>The reservation will end at
<b><%= Calendar.strftime(
@reservation.end_date |> Timex.to_datetime("America/Montreal"),
"%H:%M"
) %> *REPLACE WITH COUNTDOWN*</b>
</p>
<p class="py-4">Enter a reason for canceling the reservation</p>
<form phx-submit="cancel_station">
<input type="hidden" name="station_id" value={"#{@station.id}"}>
<input type="hidden" name="station_number" value={"#{@station.station_number}"}>
<input type="text" placeholder="Reason" value="Leaving early" class="w-full max-w-xs input input-bordered" name="cancel_reason"/>
<div class="modal-action">
<label for={"station-modal-#{@station.station_number}"} class="btn btn-error">Close</label>
<button for={"station-modal-#{@station.station_number}"} class="btn btn-success" type="submit" onclick={"document.getElementById('station-modal-#{@station.station_number}').checked=false"}>Confirm cancelation</button>
</div>
</form>
</div>
<div class="flex flex-col h-14 flex-1 grow mx-1 " x-data="">
<!-- The button to open modal -->
<label
class="btn btn-warning flex flex-col"
x-on:click={"$refs.open_station_modal_#{@station.station_number}.showModal()"}>
<div >
<%= @station.station_number %>
</div>
Until <%= Calendar.strftime(
List.first(@station.reservations).end_date |> Timex.to_datetime("America/Montreal"),
"%H:%M"
) %>
</label>
<!-- Put this part before </body> tag -->
<dialog class="modal" x-ref={"open_station_modal_#{@station.station_number}"}>
<div class="modal-box">
<h3 class="text-lg font-bold">You have selected station <%= @station.station_number %></h3>
<p class="py-4">Occupied by badge <b>#<%= @reservation.badge %></b> *REPLACE WITH NAME*</p>
<p>The reservation will end at
<b><%= Calendar.strftime(
@reservation.end_date |> Timex.to_datetime("America/Montreal"),
"%H:%M"
) %> *REPLACE WITH COUNTDOWN*</b>
</p>
<p class="py-4">Enter a reason for canceling the reservation</p>
<form method="dialog">
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
</form>
<form phx-submit="cancel_station">
<input type="hidden" name="station_id" value={"#{@station.id}"}>
<input type="hidden" name="station_number" value={"#{@station.station_number}"}>
<input type="text" placeholder="Reason" value="Leaving early" class="w-full max-w-xs input input-bordered" name="cancel_reason"/>
<div class="modal-action">
<button class="btn btn-success" type="submit" x-on:click="$refs.new_tournament_modal.close()">Confirm cancelation</button>
</div>
</form>
</div>
</dialog>
</div>
"""

:broken ->
~H"""
<!-- The button to open modal -->
<label for={"station-modal-#{@station.station_number}"} class="btn btn-error"><%= @station.station_number %></label>
<!-- Put this part before </body> tag -->
<input type="checkbox" id={"station-modal-#{@station.station_number}"} class="modal-toggle" />
<div class="modal modal-bottom sm:modal-middle">
<div class="modal-box">
<h3 class="text-lg font-bold">You have selected station <%= @station.station_number %></h3>
<p class="py-4">Do you want to re-open this station?</p>
<form phx-submit="open_station">
<input type="hidden" name="station_number" value={"#{@station.station_number}"}>
<%= if !is_nil(@error) do %>
<p class="text-error"><%= @error %></p>
<% end %>
<br/><br/>
<div class="modal-action">
<label for={"station-modal-#{@station.station_number}"} class="btn btn-error">X</label>
<button for={"station-modal-#{@station.station_number}"} class="btn btn-success" type="submit">✓</button>
</div>
</form>
</div>
<div class="flex flex-col h-14 flex-1 grow mx-1 " x-data="">
<!-- The button to open modal -->
<label
class="btn btn-error"
x-on:click={"$refs.open_station_modal_#{@station.station_number}.showModal()"}>
<%= @station.station_number %>
</label>
<!-- Put this part before </body> tag -->
<input type="checkbox" id={"station-modal-#{@station.station_number}"} class="modal-toggle" />
<dialog class="modal" x-ref={"open_station_modal_#{@station.station_number}"}>
<div class="modal-box">
<h3 class="text-lg font-bold">You have selected station <%= @station.station_number %></h3>
<p class="py-4">Do you want to re-open this station?</p>
<form method="dialog">
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
</form>
<form phx-submit="open_station">
<input type="hidden" name="station_number" value={"#{@station.station_number}"}>
<%= if !is_nil(@error) do %>
<p class="text-error"><%= @error %></p>
<% end %>
<br/><br/>
<div class="modal-action">
<label class="btn btn-error">X</label>
<button class="btn btn-success" type="submit">✓</button>
</div>
</form>
</div>
</dialog>
</div>
"""

:reserved ->
~H"""
<!-- The button to open modal -->
<label for={"seat-modal-#{@station.station_number}"} class="btn btn-active"><%= @station.station_number %></label>
<div class="flex flex-col h-14 flex-1 grow mx-1 " x-data="">
<!-- The button to open modal -->
<label
class="btn btn-active"
x-on:click={"$refs.open_station_modal_#{@station.station_number}.showModal()"}>
<%= @station.station_number %>
</label>
</div>
"""
end
end
Expand Down
26 changes: 13 additions & 13 deletions lib/lanpartyseating_web/components/display_modal.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,33 +19,33 @@ defmodule DisplayModalComponent do
:available ->
~H"""
<!-- The button to open modal -->
<label for={"seat-modal-#{assigns.station.station_number}"} class="btn btn-info"><%= assigns.station.station_number %></label>
<label class="btn btn-info"><%= assigns.station.station_number %></label>
"""

:occupied ->
~H"""
<!-- The button to open modal -->
<label class="btn btn-warning flex flex-col">
<div >
<%= assigns.station.station_number %>
</div>
Until <%= Calendar.strftime(
List.first(assigns.station.reservations).end_date |> Timex.to_datetime("America/Montreal"),
"%H:%M"
) %>
</label>
<!-- The button to open modal -->
<label class="btn btn-warning flex flex-col">
<div >
<%= assigns.station.station_number %>
</div>
Until <%= Calendar.strftime(
List.first(assigns.station.reservations).end_date |> Timex.to_datetime("America/Montreal"),
"%H:%M"
) %>
</label>
"""

:broken ->
~H"""
<!-- The button to open modal -->
<label for={"seat-modal-#{assigns.station.station_number}"} class="btn btn-error"><%= assigns.station.station_number %></label>
<label class="btn btn-error"><%= assigns.station.station_number %></label>
"""

:reserved ->
~H"""
<!-- The button to open modal -->
<label for={"seat-modal-#{assigns.station.station_number}"} class="btn btn-active"><%= assigns.station.station_number %></label>
<label class="btn btn-active"><%= assigns.station.station_number %></label>
"""
end
end
Expand Down
Loading

0 comments on commit fb8a158

Please sign in to comment.