tandem/camper
tandem
/
camper
2
0
Fork 0
Code Issues 7 Pull Requests Packages Projects Releases Wiki Activity
camper/web/templates/admin/services/index.gohtml

100 lines
4.0 KiB
Plaintext
Raw Normal View History

Add the services page This page is more or less similar to home, in terms of database: it has a carousel and a list of items; in this case, the definition of campsite services. As i said early, when adding the home carousel, this carousel has its own relation and set of functions to manage slides. They are also duplicated in Go code, but i think i will need to refactor it later to a carousel package or something like that, because both relations have the exact same fields and types, so it makes no sense to have twice the same code. I already did it with the CSS and JavaScript code, mostly because it was easier to replace the `.surroundings div` selector with `.carousel`, and because that way i can have a single template that loads and initializes Slick. There is no UI to create or edit service definitions, although there are the SQL functions, because i have no more time now, and Oriol needs to check that the style is correct for that page.
2023-09-17 01:42:16 +00:00
<!--
SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
SPDX-License-Identifier: AGPL-3.0-only
-->
{{ define "title" -}}
Fix the page title for the Services Page’ index template
2023-09-20 23:57:14 +00:00
{{( pgettext "Services Page" "title" )}}
Add the services page This page is more or less similar to home, in terms of database: it has a carousel and a list of items; in this case, the definition of campsite services. As i said early, when adding the home carousel, this carousel has its own relation and set of functions to manage slides. They are also duplicated in Go code, but i think i will need to refactor it later to a carousel package or something like that, because both relations have the exact same fields and types, so it makes no sense to have twice the same code. I already did it with the CSS and JavaScript code, mostly because it was easier to replace the `.surroundings div` selector with `.carousel`, and because that way i can have a single template that loads and initializes Slick. There is no UI to create or edit service definitions, although there are the SQL functions, because i have no more time now, and Oriol needs to check that the style is correct for that page.
2023-09-17 01:42:16 +00:00
{{- end }}
{{ define "content" -}}
{{- /*gotype: dev.tandem.ws/tandem/camper/pkg/services.servicesIndex*/ -}}
<h2>{{( pgettext "Carousel" "title" )}}</h2>
<a href="/admin/services/slides/new">{{( pgettext "Add slide" "action" )}}</a>
{{ if .Slides -}}
Add user-defined order to campsite types, options, seasons and carousels I use Sortable, exactly like HTMx’s sorting example does[0]. Had to export the slug or ID of some entries to be able to add it in the hidden input. For forms that use ID instead of slug, had to use an input name other than “id” because otherwise the swap would fail due to bug #1496[1]. It is apparently fixed in a recent version of HTMx, but i did not want to update for fear of behaviour changes. [0]: https://htmx.org/examples/sortable/ [1]: https://github.com/bigskysoftware/htmx/issues/1496
2023-12-20 18:52:14 +00:00
<form id="slide-index"
class="sortable"
data-hx-post="/admin/services/slides/order"
data-hx-trigger="end"
data-hx-select="#slide-index"
data-hx-swap="outerHTML"
>
{{ CSRFInput }}
<table>
<thead>
Add the services page This page is more or less similar to home, in terms of database: it has a carousel and a list of items; in this case, the definition of campsite services. As i said early, when adding the home carousel, this carousel has its own relation and set of functions to manage slides. They are also duplicated in Go code, but i think i will need to refactor it later to a carousel package or something like that, because both relations have the exact same fields and types, so it makes no sense to have twice the same code. I already did it with the CSS and JavaScript code, mostly because it was easier to replace the `.surroundings div` selector with `.carousel`, and because that way i can have a single template that loads and initializes Slick. There is no UI to create or edit service definitions, although there are the SQL functions, because i have no more time now, and Oriol needs to check that the style is correct for that page.
2023-09-17 01:42:16 +00:00
<tr>
Add user-defined order to campsite types, options, seasons and carousels I use Sortable, exactly like HTMx’s sorting example does[0]. Had to export the slug or ID of some entries to be able to add it in the hidden input. For forms that use ID instead of slug, had to use an input name other than “id” because otherwise the swap would fail due to bug #1496[1]. It is apparently fixed in a recent version of HTMx, but i did not want to update for fear of behaviour changes. [0]: https://htmx.org/examples/sortable/ [1]: https://github.com/bigskysoftware/htmx/issues/1496
2023-12-20 18:52:14 +00:00
<th scope="col">{{( pgettext "Image" "header" )}}</th>
<th scope="col">{{( pgettext "Caption" "header" )}}</th>
<th scope="col">{{( pgettext "Actions" "header" )}}</th>
Add the services page This page is more or less similar to home, in terms of database: it has a carousel and a list of items; in this case, the definition of campsite services. As i said early, when adding the home carousel, this carousel has its own relation and set of functions to manage slides. They are also duplicated in Go code, but i think i will need to refactor it later to a carousel package or something like that, because both relations have the exact same fields and types, so it makes no sense to have twice the same code. I already did it with the CSS and JavaScript code, mostly because it was easier to replace the `.surroundings div` selector with `.carousel`, and because that way i can have a single template that loads and initializes Slick. There is no UI to create or edit service definitions, although there are the SQL functions, because i have no more time now, and Oriol needs to check that the style is correct for that page.
2023-09-17 01:42:16 +00:00
</tr>
Add user-defined order to campsite types, options, seasons and carousels I use Sortable, exactly like HTMx’s sorting example does[0]. Had to export the slug or ID of some entries to be able to add it in the hidden input. For forms that use ID instead of slug, had to use an input name other than “id” because otherwise the swap would fail due to bug #1496[1]. It is apparently fixed in a recent version of HTMx, but i did not want to update for fear of behaviour changes. [0]: https://htmx.org/examples/sortable/ [1]: https://github.com/bigskysoftware/htmx/issues/1496
2023-12-20 18:52:14 +00:00
</thead>
<tbody>
{{ $confirm := ( gettext "Are you sure you wish to delete this slide?" )}}
{{ range $slide := .Slides -}}
<tr>
<td>
<span class="handle"></span>
<input type="hidden" name="media_id" value="{{ .ID }}">
<a href="/admin/services/slides/{{ .ID }}"><img src="{{ .Media }}" alt=""></a>
</td>
<td><a href="/admin/services/slides/{{ .ID }}">{{ .Caption }}</a></td>
<td>
Avoid nested forms in admin I was using a <form> to delete slides and other such elements before adding the form to sort these same elements with drag and drop, without realizing that i was wrapping the existing delete <form>s, that now would not submit properly—they were submitting the sort form instead.
2024-01-16 17:32:02 +00:00
<button data-hx-delete="/admin/services/slides/{{ .ID }}"
data-hx-confirm="{{ $confirm }}"
data-hx-headers='{ {{ CSRFHeader }} }'>
{{( pgettext "Delete" "action" )}}
</button>
Add user-defined order to campsite types, options, seasons and carousels I use Sortable, exactly like HTMx’s sorting example does[0]. Had to export the slug or ID of some entries to be able to add it in the hidden input. For forms that use ID instead of slug, had to use an input name other than “id” because otherwise the swap would fail due to bug #1496[1]. It is apparently fixed in a recent version of HTMx, but i did not want to update for fear of behaviour changes. [0]: https://htmx.org/examples/sortable/ [1]: https://github.com/bigskysoftware/htmx/issues/1496
2023-12-20 18:52:14 +00:00
</td>
</tr>
{{- end }}
</tbody>
</table>
</form>
Add the services page This page is more or less similar to home, in terms of database: it has a carousel and a list of items; in this case, the definition of campsite services. As i said early, when adding the home carousel, this carousel has its own relation and set of functions to manage slides. They are also duplicated in Go code, but i think i will need to refactor it later to a carousel package or something like that, because both relations have the exact same fields and types, so it makes no sense to have twice the same code. I already did it with the CSS and JavaScript code, mostly because it was easier to replace the `.surroundings div` selector with `.carousel`, and because that way i can have a single template that loads and initializes Slick. There is no UI to create or edit service definitions, although there are the SQL functions, because i have no more time now, and Oriol needs to check that the style is correct for that page.
2023-09-17 01:42:16 +00:00
{{ else -}}
<p>{{( gettext "No slides added yet." )}}</p>
{{- end }}
Add the edit form for services This one has an input to select the icon. It makes no sense to choose an icon only by name, thus a <select> is not appropriate, and had to use a hidden input with a row of button to choose the icon from. This works now only because there are very few icons; we’ll need to choose a different approach when there are many more icons. Since now the icons have to be defined in CSS for both the public and admin sections, i had to split it into a separate file that both sites can use. I considered the option to “include” that CSS with m4, like i do for images in demo.sql, but it made everything too complicated (e.g., having to call make for each change in the CSS), and decided to load that CSS in a separate <link>.
2023-09-25 18:10:33 +00:00
<h2>{{( pgettext "Services" "title" )}}</h2>
Add the new service form
2023-09-26 14:51:35 +00:00
<a href="/admin/services/new">{{( pgettext "Add service" "action" )}}</a>
Add the edit form for services This one has an input to select the icon. It makes no sense to choose an icon only by name, thus a <select> is not appropriate, and had to use a hidden input with a row of button to choose the icon from. This works now only because there are very few icons; we’ll need to choose a different approach when there are many more icons. Since now the icons have to be defined in CSS for both the public and admin sections, i had to split it into a separate file that both sites can use. I considered the option to “include” that CSS with m4, like i do for images in demo.sql, but it made everything too complicated (e.g., having to call make for each change in the CSS), and decided to load that CSS in a separate <link>.
2023-09-25 18:10:33 +00:00
{{ if .Services -}}
Add position to services to be able to manually sort by admins
2024-01-13 00:15:24 +00:00
<form id="service-index"
class="sortable"
data-hx-post="/admin/services/order"
data-hx-trigger="end"
data-hx-select="#service-index"
data-hx-swap="outerHTML"
>
{{ CSRFInput }}
<table class="services">
<thead>
Add the edit form for services This one has an input to select the icon. It makes no sense to choose an icon only by name, thus a <select> is not appropriate, and had to use a hidden input with a row of button to choose the icon from. This works now only because there are very few icons; we’ll need to choose a different approach when there are many more icons. Since now the icons have to be defined in CSS for both the public and admin sections, i had to split it into a separate file that both sites can use. I considered the option to “include” that CSS with m4, like i do for images in demo.sql, but it made everything too complicated (e.g., having to call make for each change in the CSS), and decided to load that CSS in a separate <link>.
2023-09-25 18:10:33 +00:00
<tr>
Add position to services to be able to manually sort by admins
2024-01-13 00:15:24 +00:00
<th scope="col" class="sr-only">{{( pgettext "Order" "header" )}}</th>
<th scope="col">{{( pgettext "Service" "header" )}}</th>
<th scope="col">{{( pgettext "Actions" "header" )}}</th>
Add the edit form for services This one has an input to select the icon. It makes no sense to choose an icon only by name, thus a <select> is not appropriate, and had to use a hidden input with a row of button to choose the icon from. This works now only because there are very few icons; we’ll need to choose a different approach when there are many more icons. Since now the icons have to be defined in CSS for both the public and admin sections, i had to split it into a separate file that both sites can use. I considered the option to “include” that CSS with m4, like i do for images in demo.sql, but it made everything too complicated (e.g., having to call make for each change in the CSS), and decided to load that CSS in a separate <link>.
2023-09-25 18:10:33 +00:00
</tr>
Add position to services to be able to manually sort by admins
2024-01-13 00:15:24 +00:00
</thead>
<tbody>
{{ $confirm := ( gettext "Are you sure you wish to delete this service?" )}}
{{ range .Services -}}
<tr>
<td>
<input type="hidden" name="service_id" value="{{ .ID }}">
<span class="handle"></span>
</td>
<td class="icon_{{ .Icon }}"><a href="{{ .URL }}">{{ .Name }}</a></td>
<td>
Avoid nested forms in admin I was using a <form> to delete slides and other such elements before adding the form to sort these same elements with drag and drop, without realizing that i was wrapping the existing delete <form>s, that now would not submit properly—they were submitting the sort form instead.
2024-01-16 17:32:02 +00:00
<button data-hx-delete="{{ .URL }}"
data-hx-confirm="{{ $confirm }}"
data-hx-headers='{ {{ CSRFHeader }} }'>
{{( pgettext "Delete" "action" )}}
</button>
Add position to services to be able to manually sort by admins
2024-01-13 00:15:24 +00:00
</td>
</tr>
{{- end }}
</tbody>
</table>
</form>
Add the edit form for services This one has an input to select the icon. It makes no sense to choose an icon only by name, thus a <select> is not appropriate, and had to use a hidden input with a row of button to choose the icon from. This works now only because there are very few icons; we’ll need to choose a different approach when there are many more icons. Since now the icons have to be defined in CSS for both the public and admin sections, i had to split it into a separate file that both sites can use. I considered the option to “include” that CSS with m4, like i do for images in demo.sql, but it made everything too complicated (e.g., having to call make for each change in the CSS), and decided to load that CSS in a separate <link>.
2023-09-25 18:10:33 +00:00
{{ else -}}
<p>{{( gettext "No services added yet." )}}</p>
{{- end }}
Add the services page This page is more or less similar to home, in terms of database: it has a carousel and a list of items; in this case, the definition of campsite services. As i said early, when adding the home carousel, this carousel has its own relation and set of functions to manage slides. They are also duplicated in Go code, but i think i will need to refactor it later to a carousel package or something like that, because both relations have the exact same fields and types, so it makes no sense to have twice the same code. I already did it with the CSS and JavaScript code, mostly because it was easier to replace the `.surroundings div` selector with `.carousel`, and because that way i can have a single template that loads and initializes Slick. There is no UI to create or edit service definitions, although there are the SQL functions, because i have no more time now, and Oriol needs to check that the style is correct for that page.
2023-09-17 01:42:16 +00:00
{{- end }}