Skip to content

Commit

Permalink
Make modals client-side using Alpine.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@starcraft66
starcraft66 committed Jan 22, 2024
1 parent f09afa0 commit e1d0a75
Show file tree
Hide file tree
Showing 12 changed files with 633 additions and 394 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
5 changes: 3 additions & 2 deletions assets/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,13 @@
"author": "",
"license": "ISC",
"dependencies": {
"alpinejs": "^3.12.3"
"@alpinejs/focus": "^3.13.3",
"alpinejs": "^3.13.3"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.9",
"autoprefixer": "^10.4.14",
"daisyui": "^3.1.9",
"daisyui": "^4.6.0",
"postcss": "^8.4.24",
"postcss-import": "^14.1.0",
"tailwindcss": "^3.3.2"
Expand Down
550 changes: 363 additions & 187 deletions assets/yarn.lock
View file

Large diffs are not rendered by default.

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
1 change: 1 addition & 0 deletions flake.nix
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@
systems = [
# systems for which you want to build the `perSystem` attributes
"x86_64-linux"
"x86_64-darwin"
"aarch64-linux"
"aarch64-darwin"
];
Expand Down
210 changes: 121 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,142 @@ 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.station_modal_#{@station.station_number}.showModal()"}>
<%= @station.station_number %>
</label>
<dialog class="modal" x-ref={"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"
x-on:click={"$refs.station_modal_#{@station.station_number}.close()"}
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.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={"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"
x-on:click={"$refs.station_modal_#{@station.station_number}.close()"}
type="submit">
Confirm cancellation
</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.station_modal_#{@station.station_number}.showModal()"}>
<%= @station.station_number %>
</label>
<dialog class="modal" x-ref={"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 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">
<button
class="btn btn-success"
x-on:click={"$refs.station_modal_#{@station.station_number}.close()"}
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">
<%= @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
2 changes: 1 addition & 1 deletion lib/lanpartyseating_web/components/nav.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ defmodule NavComponent do
<ul class="p-0 menu menu-horizontal">
<%= for {menu_txt, path} <- assigns.nav_menu do %>
<li class={"nav-item min-w-fit #{if path == assigns.nav_menu_active_path, do: "font-bold"}"}>
<%= live_redirect menu_txt, to: path, class: "nav-link" %>
<.link patch={path} class="nav-link"><%= menu_txt %></.link>
</li>
<% end %>
</ul>
Expand Down
Loading

0 comments on commit e1d0a75

Please sign in to comment.