Put calendar’s season selector form in a dialog
This commit is contained in:
parent
50cc4c41b3
commit
47ec317010
|
|
@ -337,6 +337,8 @@ func updateSeasonCalendar(w http.ResponseWriter, r *http.Request, user *auth.Use
|
|||
panic(err)
|
||||
}
|
||||
if f.SeasonID.Val == "" {
|
||||
// Nothing to do
|
||||
} else if f.SeasonID.Val == "0" {
|
||||
conn.MustExec(r.Context(), "select unset_season_range($1)", seasonRange)
|
||||
} else {
|
||||
conn.MustExec(r.Context(), "select set_season_range($1, $2)", f.SeasonID, seasonRange)
|
||||
|
|
@ -371,7 +373,7 @@ func newCalendarForm(ctx context.Context, company *auth.Company, conn *database.
|
|||
|
||||
func mustCollectCalendarSeasons(ctx context.Context, company *auth.Company, conn *database.Conn) []*seasonEntry {
|
||||
rows, err := conn.Query(ctx, `
|
||||
select '' as slug
|
||||
select '0' as slug
|
||||
, $1 as name
|
||||
, to_color($2)::text
|
||||
, true
|
||||
|
|
|
|||
|
|
@ -293,7 +293,7 @@ nav details summary:hover,
|
|||
nav details summary:focus,
|
||||
nav details a:hover,
|
||||
nav details button:hover {
|
||||
background-color: var(--camper--color--light-gray);
|
||||
background-color: var(--camper--color--light-gray);
|
||||
}
|
||||
|
||||
nav details summary img {
|
||||
|
|
@ -511,6 +511,10 @@ textarea {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.season-calendar table {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.season-calendar table {
|
||||
|
|
@ -549,17 +553,31 @@ textarea {
|
|||
height: .8rem;
|
||||
}
|
||||
|
||||
.season-calendar form {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.season-calendar button {
|
||||
.season-calendar form button {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.season-calendar form button:first-child {
|
||||
min-width: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.season-calendar form button:hover, .season-calendar form button:first-child:hover {
|
||||
background-color: var(--camper--color--hay);
|
||||
}
|
||||
|
||||
.season-calendar form button:first-child::before {
|
||||
content: "✕";
|
||||
}
|
||||
|
||||
/* snack bar */
|
||||
#snackbar [role="alert"] {
|
||||
#snackbar [role="alert"] {
|
||||
cursor: pointer;
|
||||
background-color: var(--camper--color--black);
|
||||
color: var(--camper--color--white);
|
||||
|
|
|
|||
|
|
@ -179,6 +179,19 @@ export function setupCalendar(calendar) {
|
|||
const startDate = calendar.querySelector('input[name="start_date"]');
|
||||
const endDate = calendar.querySelector('input[name="end_date"]');
|
||||
const days = Array.from(calendar.querySelectorAll('time'));
|
||||
const dialog = calendar.querySelector('dialog');
|
||||
|
||||
const clear = function () {
|
||||
console.log('yolo');
|
||||
startDate.value = endDate.value = "";
|
||||
days.forEach((e) => e.removeAttribute('aria-checked'));
|
||||
}
|
||||
|
||||
dialog.addEventListener('close', clear);
|
||||
dialog.querySelector('button').addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
dialog.close();
|
||||
});
|
||||
|
||||
const selectDate = function (e) {
|
||||
e.preventDefault();
|
||||
|
|
@ -203,11 +216,14 @@ export function setupCalendar(calendar) {
|
|||
day.removeAttribute('aria-checked');
|
||||
}
|
||||
}
|
||||
dialog.showModal();
|
||||
}
|
||||
|
||||
for (const day of days) {
|
||||
day.addEventListener('click', selectDate);
|
||||
}
|
||||
|
||||
clear();
|
||||
}
|
||||
|
||||
htmx.onLoad((target) => {
|
||||
|
|
|
|||
|
|
@ -31,21 +31,24 @@
|
|||
</table>
|
||||
{{- end }}
|
||||
{{ with .Form }}
|
||||
<form data-hx-put="/admin/seasons/range">
|
||||
{{ CSRFInput }}
|
||||
{{ with .StartDate }}<input type="hidden" name="{{ .Name }}" value="{{ .Val }}">{{ end }}
|
||||
{{ with .EndDate }}<input type="hidden" name="{{ .Name }}" value="{{ .Val }}">{{ end }}
|
||||
<footer>
|
||||
{{ range .Seasons -}}
|
||||
<button type="submit" name="season_id" value="{{ .Slug }}">
|
||||
<svg width="20px" height="20px">
|
||||
<circle cx="50%" cy="50%" r="49%" fill="{{ .Color }}" stroke="#000" stroke-width=".5"/>
|
||||
</svg>
|
||||
{{ .Name }}
|
||||
</button>
|
||||
{{- end }}
|
||||
</footer>
|
||||
</form>
|
||||
<dialog>
|
||||
<form data-hx-put="/admin/seasons/range">
|
||||
{{ CSRFInput }}
|
||||
{{ with .StartDate }}<input type="hidden" name="{{ .Name }}" value="{{ .Val }}">{{ end }}
|
||||
{{ with .EndDate }}<input type="hidden" name="{{ .Name }}" value="{{ .Val }}">{{ end }}
|
||||
<footer>
|
||||
<button type="submit" name="season_id" value=""><span class="sr-only">{{( pgettext "Cancel" "action" )}}</span></button>
|
||||
{{ range .Seasons -}}
|
||||
<button type="submit" name="season_id" value="{{ .Slug }}">
|
||||
<svg width="20px" height="20px">
|
||||
<circle cx="50%" cy="50%" r="49%" fill="{{ .Color }}" stroke="#000" stroke-width=".5"/>
|
||||
</svg>
|
||||
{{ .Name }}
|
||||
</button>
|
||||
{{- end }}
|
||||
</footer>
|
||||
</form>
|
||||
</dialog>
|
||||
{{ end }}
|
||||
<script type="module">
|
||||
import {setupCalendar} from "/static/camper.js";
|
||||
|
|
|
|||
Loading…
Reference in New Issue