From 19b5508a9c54931c90a0f1505805980c1dc953e2 Mon Sep 17 00:00:00 2001 From: Peter Stockings Date: Mon, 17 Feb 2025 20:42:29 +1100 Subject: [PATCH] Refactor timer settings UI in editor component - 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 --- static/js/mithril/editor.js | 126 ++++++++++++++++++------------------ 1 file changed, 62 insertions(+), 64 deletions(-) diff --git a/static/js/mithril/editor.js b/static/js/mithril/editor.js index 3262d6a..0c4a14c 100644 --- a/static/js/mithril/editor.js +++ b/static/js/mithril/editor.js @@ -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 ─────────────────────────────────────────────────────────────────*/