devices: enhanced add device form validation and checkboxes

This commit is contained in:
Tigor Hutasuhut 2024-05-08 09:22:16 +07:00
parent e8da8717ea
commit 90babf685d
5 changed files with 61 additions and 19 deletions

View file

@ -29,6 +29,15 @@ func (routes *Routes) DevicesValidateNameHTMX(rw http.ResponseWriter, req *http.
Value: s,
HXSwapOOB: true,
}
if s == "" {
slugData.Error = "Identifier resolves to empty value. Please set a valid identifier manually."
_ = nameComponent.Render(ctx, rw)
if err := adddevice.SlugInput(slugData).Render(ctx, rw); err != nil {
log.New(ctx).Err(err).Error("failed to render name input")
}
return
}
exist, err := routes.API.DevicesValidateSlug(ctx, s)
if err != nil {
log.New(ctx).Err(err).Error("failed to validate slug")
@ -42,7 +51,6 @@ func (routes *Routes) DevicesValidateNameHTMX(rw http.ResponseWriter, req *http.
if exist {
slugData.Error = "Device with this identifier already exist. Please change the value manually."
// rw.WriteHeader(http.StatusConflict)
_ = nameComponent.Render(ctx, rw)
if err := adddevice.SlugInput(slugData).Render(ctx, rw); err != nil {
log.New(ctx).Err(err).Error("failed to render name input")
@ -50,7 +58,7 @@ func (routes *Routes) DevicesValidateNameHTMX(rw http.ResponseWriter, req *http.
return
}
slugData.Valid = "Identifier is available"
slugData.Valid = "Identifier is available."
_ = nameComponent.Render(ctx, rw)
if err := adddevice.SlugInput(slugData).Render(ctx, rw); err != nil {

View file

@ -10,7 +10,15 @@ func (o ImageCardOption) Has(opt ImageCardOption) bool {
return o&opt != 0
}
func (o ImageCardOption) SetCond(opt ImageCardOption, cond bool) ImageCardOption {
if cond {
return o | opt
}
return o
}
const (
HideNothing ImageCardOption = 0
HideTitle ImageCardOption = 1 << iota
HideSubreddit
HidePoster

View file

@ -1,24 +1,37 @@
package adddevice
import "fmt"
type NSFWCheckboxData struct {
Checked bool
}
templ NSFWCheckbox(data NSFWCheckboxData) {
<div class="form-control">
<div class="divider my-0 py-0"></div>
<div class="divider my-0 py-0"></div>
<label class="label cursor-pointer">
<span class="label-text">NSFW</span>
<div
x-data={ fmt.Sprintf(`{checked: %t}`, data.Checked) }
class="form-control"
>
<label
class="label cursor-pointer border input input-bordered"
:class="{'input-primary': checked}"
>
<span
class="label-text"
:class="{'text-primary': checked}"
>Allow NSFW Images</span>
<input
type="checkbox"
checked?={ data.Checked }
class="checkbox"
:class="{'checkbox-primary': checked}"
name="nsfw"
value="1"
@change="checked = !checked"
/>
</label>
<div class="divider my-0 py-0"></div>
<span class="label-text pl-1">Whether to allow NSFW images for current device.</span>
<span
class="label-text pl-1 mt-2"
:class="{'text-primary': checked}"
>Whether to allow NSFW images for current device.</span>
</div>
}

View file

@ -1,26 +1,39 @@
package adddevice
import "fmt"
type WindowsWallpaperCheckboxData struct {
Checked bool
}
templ WindowsWallpaperCheckbox(data WindowsWallpaperCheckboxData) {
<div class="form-control">
<div class="divider my-0 py-0"></div>
<div class="divider my-0 py-0"></div>
<label class="label cursor-pointer">
<span class="label-text">Windows Wallpaper Mode</span>
<div
x-data={ fmt.Sprintf(`{checked: %t}`, data.Checked) }
class="form-control"
>
<label
class="label cursor-pointer input input-bordered"
:class="{'input-secondary': checked}"
>
<span
class="label-text"
:class="{'text-secondary': checked}"
>Windows Wallpaper Mode</span>
<input
type="checkbox"
checked?={ data.Checked }
class="checkbox"
:class="{'checkbox-secondary': checked}"
name="windows_wallpaper_mode"
@change="checked = !checked"
value="1"
/>
</label>
<div class="divider my-0 py-0"></div>
<span class="label-text pl-1">
Windows Wallpaper Mode puts images under one folder instead of split by subreddits.
<span
class="label-text pl-1 mt-2"
:class="{'text-secondary': checked}"
>
Windows Wallpaper Mode puts images for this device under one folder instead of split by subreddits.
This allows the user to target Windows Wallpaper to the whole image collections.
</span>
</div>

View file

@ -60,7 +60,7 @@ templ DetailsContent(c *views.Context, data Data) {
@showingImageFromTo(data)
<div class="flex flex-wrap gap-4 my-8 justify-around">
for _, image := range data.Images {
@components.ImageCard(image, 0)
@components.ImageCard(image, components.HideNothing.SetCond(components.HideDevice, data.Params.Device != ""))
}
</div>
<div class="flex w-full justify-center">