Redmage/views/subredditsview/addview/schedule.templ

117 lines
3.7 KiB
Plaintext

package addview
import "github.com/tigorlazuardi/redmage/views/utils"
import "fmt"
import "strconv"
type ScheduleInputData struct {
Value string
Error string
Valid string
Disabled bool
HXSwapOOB string
}
templ scheduleInputContainer() {
@ScheduleInput(ScheduleInputData{})
<datalist id="cron-templates">
<option value="@hourly">Every hour</option>
<option value="@daily">Every day at midnight</option>
<option value="@weekly">Every Sunday at midnight</option>
<option value="@monthly">Every start of month</option>
<option value="@yearly">Every start of year</option>
<option value="@annually">Every start of year</option>
<option value="0 0 * * MON">Every Monday at midnight</option>
<option value="0 0 * * TUE">Every Tuesday at midnight</option>
<option value="0 0 * * WED">Every Wednesday at midnight</option>
<option value="0 0 * * THU">Every Thursday at midnight</option>
<option value="0 0 * * FRI">Every Friday at midnight</option>
<option value="0 0 * * SAT">Every Saturday at midnight</option>
<option value="0 0 * * SUN">Every Sunday at midnight</option>
for i := 1; i < 24; i++ {
<option value={ fmt.Sprintf("0 %d * * *", i) }>Every day at { strconv.Itoa(i) } o'clock</option>
}
</datalist>
<script>
document.addEventListener('DOMContentLoaded', () => htmx.trigger('#schedule-input-group', 'change'))
</script>
}
templ ScheduleInput(data ScheduleInputData) {
<div
id="schedule-input-group"
class="form-control w-full"
hx-get="/htmx/subreddits/validate/schedule"
hx-trigger="change"
hx-include="this"
hx-swap="outerHTML"
hx-swap-oob={ data.HXSwapOOB }
>
<label for="schedule" class="label">
<span
class={ utils.CX(map[string]bool{
"label-text": true,
"text-error": data.Error != "",
"text-success": data.Valid != "",
"text-base": true,
}) }
>Schedule</span>
<div class="tooltip tooltip-left" data-tip="Whether to enable the scheduler or not">
if data.Disabled {
<input type="checkbox" name="enable_schedule" value="1" class="toggle toggle-primary my-auto"/>
} else {
<input type="checkbox" name="enable_schedule" value="1" class="toggle toggle-primary my-auto" checked/>
}
</div>
</label>
if data.Disabled {
<input
id="schedule"
name="schedule"
type="text"
placeholder="e.g. '@daily' or '0 0 * * MON'"
class="input input-bordered"
disabled
/>
} else {
<input
id="schedule"
name="schedule"
type="text"
placeholder="e.g. '@daily' or '0 0 * * MON'"
value={ data.Value }
class={ utils.CX(map[string]bool{
"input": true,
"input-bordered": true,
"input-error": data.Error != "",
"text-error": data.Error != "",
"input-success": data.Valid != "",
"text-success": data.Valid != "",
}) }
data-error={ data.Error }
hx-on::load="this.setCustomValidity(this.getAttribute('data-error'))"
list="cron-templates"
required
/>
}
<div class="label">
<span
class={ utils.CX(map[string]bool{
"label-text": true,
"text-error": data.Error != "",
"text-success": data.Valid != "",
"min-h-[1rem]": true,
}) }
>
if data.Valid != "" {
{ data.Valid }
} else if data.Error != "" {
{ data.Error }
} else if !data.Disabled {
Uses cron syntax. Tip: Start by typing 'every' to get suggestions or search custom expressions via Google like 'cron every 6 hours'.
}
</span>
</div>
</div>
}