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

84 lines
3.3 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 -}}
<table>
<thead>
<tr>
<th scope="col">{{( pgettext "Image" "header" )}}</th>
<th scope="col">{{( pgettext "Caption" "header" )}}</th>
<th scope="col">{{( pgettext "Translations" "campsite type" )}}</th>
<th scope="col">{{( pgettext "Actions" "campsite type" )}}</th>
</tr>
</thead>
<tbody>
{{ range $slide := .Slides -}}
<tr>
<td><a href="/admin/services/slides/{{ .ID }}"><img src="{{ .Media }}" alt=""></a></td>
<td><a href="/admin/services/slides/{{ .ID }}">{{ .Caption }}</a></td>
<td>
{{ range .Translations }}
<a
{{ if .Missing }}
class="missing-translation"
{{ end }}
href="/admin/services/slides/{{ $slide.ID }}/{{ .Language }}">{{ .Endonym }}</a>
{{ end }}
</td>
<td>
<form data-hx-delete="/admin/services/slides/{{ .ID }}" data-hx-headers='{ {{ CSRFHeader }} }'>
<button type="submit">{{( pgettext "Delete" "action" )}}</button>
</form>
</td>
</tr>
{{- end }}
</tbody>
</table>
{{ 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>
{{ if .Services -}}
<table class="services">
<thead>
<tr>
<th scope="col">{{( pgettext "Service" "header" )}}</th>
<th scope="col">{{( pgettext "Translations" "campsite type" )}}</th>
<th scope="col">{{( pgettext "Actions" "campsite type" )}}</th>
</tr>
</thead>
<tbody>
{{ range .Services -}}
<tr>
<td class="icon_{{ .Icon }}"><a href="{{ .URL }}">{{ .Name }}</a></td>
<td>
{{ range .Translations }}
<a
{{ if .Missing }}class="missing-translation"{{ end }}
href="{{ .URL }}">{{ .Endonym }}</a>
{{ end }}
</td>
<td>
<form data-hx-delete="{{ .URL }}" data-hx-headers='{ {{ CSRFHeader }} }'>
<button type="submit">{{( pgettext "Delete" "action" )}}</button>
</form>
</td>
</tr>
{{- end }}
</tbody>
</table>
{{ 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 }}