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

62 lines
2.4 KiB
Plaintext
Raw Normal View History

Add seasons’ relation, functions, and admin section Seasons have a color to show on the calendar. I need them in HTML format (e.g., #123abc) in order to set as value to `<input type="color">`, but i did not want to save them as text in the database, as integers are better representations of colors—in fact, that’s what the HTML syntax also is: an integer. I think the best would be to create an extension that adds an HTML color type, with functions to convert from many representations (e.g., CSS’ rgb or even color names) to integer and back. However, that’s a lot of work and i can satisfy Camper’s needs with just a couple of functions and a domain. To show the color on the index, at first tried to use a read-only `<input type="color">`, but seems that this type of input can not be read-only and must be disabled instead. However, i do not know whether it makes sense to have a disabled input outside a form “just” to show a color; i suspect it does not. Thus, at the end i use SVG with a single circle, which is better that a 50%-rounded div with a background color, even if the result is the same—SVG **is** intended for showing pictures, which is this case.
2023-08-16 18:15:57 +00:00
<!--
SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
SPDX-License-Identifier: AGPL-3.0-only
-->
{{ define "title" -}}
{{( pgettext "Seasons" "title" )}}
{{- end }}
{{ define "content" -}}
{{- /*gotype: dev.tandem.ws/tandem/camper/pkg/season.seasonIndex*/ -}}
<a href="/admin/seasons/new">{{( pgettext "Add Season" "action" )}}</a>
<h2>{{( pgettext "Seasons" "title" )}}</h2>
{{ if .Seasons -}}
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="season-index"
class="sortable"
data-hx-post="/admin/seasons/order"
data-hx-trigger="end"
data-hx-select="#season-index"
data-hx-swap="outerHTML"
>
{{ CSRFInput }}
<table>
<thead>
Add seasons’ relation, functions, and admin section Seasons have a color to show on the calendar. I need them in HTML format (e.g., #123abc) in order to set as value to `<input type="color">`, but i did not want to save them as text in the database, as integers are better representations of colors—in fact, that’s what the HTML syntax also is: an integer. I think the best would be to create an extension that adds an HTML color type, with functions to convert from many representations (e.g., CSS’ rgb or even color names) to integer and back. However, that’s a lot of work and i can satisfy Camper’s needs with just a couple of functions and a domain. To show the color on the index, at first tried to use a read-only `<input type="color">`, but seems that this type of input can not be read-only and must be disabled instead. However, i do not know whether it makes sense to have a disabled input outside a form “just” to show a color; i suspect it does not. Thus, at the end i use SVG with a single circle, which is better that a 50%-rounded div with a background color, even if the result is the same—SVG **is** intended for showing pictures, which is this case.
2023-08-16 18:15:57 +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 "Color" "header" )}}</th>
<th scope="col">{{( pgettext "Name" "header" )}}</th>
<th scope="col">{{( pgettext "Translations" "header" )}}</th>
<th scope="col">{{( pgettext "Active" "season" )}}</th>
Add seasons’ relation, functions, and admin section Seasons have a color to show on the calendar. I need them in HTML format (e.g., #123abc) in order to set as value to `<input type="color">`, but i did not want to save them as text in the database, as integers are better representations of colors—in fact, that’s what the HTML syntax also is: an integer. I think the best would be to create an extension that adds an HTML color type, with functions to convert from many representations (e.g., CSS’ rgb or even color names) to integer and back. However, that’s a lot of work and i can satisfy Camper’s needs with just a couple of functions and a domain. To show the color on the index, at first tried to use a read-only `<input type="color">`, but seems that this type of input can not be read-only and must be disabled instead. However, i do not know whether it makes sense to have a disabled input outside a form “just” to show a color; i suspect it does not. Thus, at the end i use SVG with a single circle, which is better that a 50%-rounded div with a background color, even if the result is the same—SVG **is** intended for showing pictures, which is this case.
2023-08-16 18:15:57 +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>
{{ range .Seasons -}}
<tr>
<td>
<input type="hidden" name="slug" value="{{ .Slug }}">
<span class="handle"></span>
<svg width="20px" height="20px">
<circle cx="50%" cy="50%" r="49%" fill="{{ .Color }}" stroke="#000" stroke-width=".5"/>
</svg>
</td>
<td><a href="{{ .URL }}">{{ .Name }}</a></td>
<td>
{{ range .Translations }}
<a
{{ if .Missing }}class="missing-translation"{{ end }}
href="{{ .URL }}">{{ .Endonym }}</a>
{{ end }}
</td>
<td>{{ if .Active }}{{( gettext "Yes" )}}{{ else }}{{( gettext "No" )}}{{ end }}</td>
</tr>
{{- end }}
</tbody>
</table>
</form>
Add seasons’ relation, functions, and admin section Seasons have a color to show on the calendar. I need them in HTML format (e.g., #123abc) in order to set as value to `<input type="color">`, but i did not want to save them as text in the database, as integers are better representations of colors—in fact, that’s what the HTML syntax also is: an integer. I think the best would be to create an extension that adds an HTML color type, with functions to convert from many representations (e.g., CSS’ rgb or even color names) to integer and back. However, that’s a lot of work and i can satisfy Camper’s needs with just a couple of functions and a domain. To show the color on the index, at first tried to use a read-only `<input type="color">`, but seems that this type of input can not be read-only and must be disabled instead. However, i do not know whether it makes sense to have a disabled input outside a form “just” to show a color; i suspect it does not. Thus, at the end i use SVG with a single circle, which is better that a 50%-rounded div with a background color, even if the result is the same—SVG **is** intended for showing pictures, which is this case.
2023-08-16 18:15:57 +00:00
{{ else -}}
<p>{{( gettext "No seasons added yet." )}}</p>
{{- end }}
Add the season_calendar relation and table on the admin section This calendar is supposed to be edited by admin users, but do not yet have the complete JavaScript code to do so, thus for now i have made it read-only.
2023-09-27 00:23:09 +00:00
<h2>{{( pgettext "Calendar" "title" )}}</h2>
Make seasons’ calendar dynamic and allow to set/unset ranges The CSS is not very good, but for testing purposes it will work.
2023-09-27 12:21:27 +00:00
{{ template "calendar.gohtml" .Calendar }}
Add seasons’ relation, functions, and admin section Seasons have a color to show on the calendar. I need them in HTML format (e.g., #123abc) in order to set as value to `<input type="color">`, but i did not want to save them as text in the database, as integers are better representations of colors—in fact, that’s what the HTML syntax also is: an integer. I think the best would be to create an extension that adds an HTML color type, with functions to convert from many representations (e.g., CSS’ rgb or even color names) to integer and back. However, that’s a lot of work and i can satisfy Camper’s needs with just a couple of functions and a domain. To show the color on the index, at first tried to use a read-only `<input type="color">`, but seems that this type of input can not be read-only and must be disabled instead. However, i do not know whether it makes sense to have a disabled input outside a form “just” to show a color; i suspect it does not. Thus, at the end i use SVG with a single circle, which is better that a 50%-rounded div with a background color, even if the result is the same—SVG **is** intended for showing pictures, which is this case.
2023-08-16 18:15:57 +00:00
{{- end }}