peterstockings/function
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor timer settings UI in editor component

Browse Source 
- Integrate timer settings directly into the main edit template
- Remove separate timer settings panel
- Improve layout and styling of timer configuration inputs
- Maintain existing functionality for interval and date-based triggers
This commit is contained in:
Peter Stockings
2025-02-17 20:42:29 +11:00
parent 0a70f90953
commit 19b5508a9c
1 changed files with 62 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
static/js/mithril/editor.js
View File

@@ -476,6 +476,68 @@ const Editor = {
])
]),
// Timer settings (shown only if isTimer is true)
this.isTimer && this.showTimerSettings && [
// Enabled toggle
m("label", {
class: "flex items-center space-x-3 text-sm text-gray-600 dark:text-gray-300 cursor-pointer mt-4"
}, [
m("div", { class: "relative" }, [
m("input[type=checkbox]", {
class: "sr-only peer",
checked: this.isEnabled,
onchange: (e) => this.isEnabled = e.target.checked
}),
m("div", {
class: "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
})
]),
m("span", "Enabled")
]),
// Timer settings group
m("div", { class: "grid grid-cols-2 gap-4 mt-4" }, [
// Trigger Type Selection
m("div", { class: "flex flex-col space-y-2" }, [
m("label", { class: "text-sm font-medium text-gray-700 dark:text-gray-300" },
"Trigger Type"
),
m("select", {
class: "bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2",
value: this.triggerType,
onchange: (e) => this.triggerType = e.target.value
}, [
m("option", { value: "interval" }, "Interval"),
m("option", { value: "date" }, "Specific Date")
])
]),
// Interval Settings or Date Settings based on triggerType
this.triggerType === 'interval' ?
m("div", { class: "flex flex-col space-y-2" }, [
m("label", { class: "text-sm font-medium text-gray-700 dark:text-gray-300" },
"Frequency (minutes)"
),
m("input[type=number]", {
class: "bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2",
value: this.frequencyMinutes,
min: 1,
onchange: (e) => this.frequencyMinutes = e.target.value
})
]) :
m("div", { class: "flex flex-col space-y-2" }, [
m("label", { class: "text-sm font-medium text-gray-700 dark:text-gray-300" },
"Run Date"
),
m("input[type=datetime-local]", {
class: "bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2",
value: this.runDate,
onchange: (e) => this.runDate = e.target.value
})
])
])
],
// Actions group
m("div", { class: "flex items-center justify-end space-x-3 pt-2" }, [
// Save button
@@ -505,70 +567,6 @@ const Editor = {
])
]),
// Timer settings panel (shown only if isTimer is true)
this.isTimer && this.showTimerSettings && m("div", {
class: "bg-gray-100 dark:bg-gray-800 p-4 border-b"
}, [
m("div", { class: "flex flex-col space-y-4" }, [
// Add Enabled toggle at the top
m("label", {
class: "flex items-center space-x-3 text-sm text-gray-600 dark:text-gray-300 cursor-pointer mb-4"
}, [
m("div", { class: "relative" }, [
m("input[type=checkbox]", {
class: "sr-only peer",
checked: this.isEnabled,
onchange: (e) => this.isEnabled = e.target.checked
}),
m("div", {
class: "w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
})
]),
m("span", "Enabled")
]),
// Trigger Type Selection
m("div", { class: "flex flex-col space-y-2" }, [
m("label", { class: "text-sm font-medium text-gray-700 dark:text-gray-300" },
"Trigger Type"
),
m("select", {
class: "bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2",
value: this.triggerType,
onchange: (e) => this.triggerType = e.target.value
}, [
m("option", { value: "interval" }, "Interval"),
m("option", { value: "date" }, "Specific Date")
])
]),
// Interval Settings (shown only if triggerType is 'interval')
this.triggerType === 'interval' && m("div", { class: "flex flex-col space-y-2" }, [
m("label", { class: "text-sm font-medium text-gray-700 dark:text-gray-300" },
"Frequency (minutes)"
),
m("input[type=number]", {
class: "bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2",
value: this.frequencyMinutes,
min: 1,
onchange: (e) => this.frequencyMinutes = e.target.value
})
]),
// Date Settings (shown only if triggerType is 'date')
this.triggerType === 'date' && m("div", { class: "flex flex-col space-y-2" }, [
m("label", { class: "text-sm font-medium text-gray-700 dark:text-gray-300" },
"Run Date"
),
m("input[type=datetime-local]", {
class: "bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2",
value: this.runDate,
onchange: (e) => this.runDate = e.target.value
})
])
])
]),
/* ─────────────────────────────────────────────────────────────────
ResponseView (child) if needed
─────────────────────────────────────────────────────────────────*/