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, Value: s,
HXSwapOOB: true, 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) exist, err := routes.API.DevicesValidateSlug(ctx, s)
if err != nil { if err != nil {
log.New(ctx).Err(err).Error("failed to validate slug") 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 { if exist {
slugData.Error = "Device with this identifier already exist. Please change the value manually." slugData.Error = "Device with this identifier already exist. Please change the value manually."
// rw.WriteHeader(http.StatusConflict)
_ = nameComponent.Render(ctx, rw) _ = nameComponent.Render(ctx, rw)
if err := adddevice.SlugInput(slugData).Render(ctx, rw); err != nil { if err := adddevice.SlugInput(slugData).Render(ctx, rw); err != nil {
log.New(ctx).Err(err).Error("failed to render name input") 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 return
} }
slugData.Valid = "Identifier is available" slugData.Valid = "Identifier is available."
_ = nameComponent.Render(ctx, rw) _ = nameComponent.Render(ctx, rw)
if err := adddevice.SlugInput(slugData).Render(ctx, rw); err != nil { if err := adddevice.SlugInput(slugData).Render(ctx, rw); err != nil {

View file

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

View file

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

View file

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

View file

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