notid/integreat
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

simplified ui

Browse Source
This commit is contained in:
Bryce
2024-11-22 10:10:22 -08:00
parent a547b1671a
commit 39d8e6e71f
3 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/clj/auto_ap/ssr/components/inputs.clj
View File

@@ -374,7 +374,7 @@
(assoc "@htmx:before-history-save" "destroyDatepicker(dp)" ) (assoc "@htmx:before-history-save" "destroyDatepicker(dp)" )
(assoc "@htmx:before-cleanup-element" "destroyDatepicker(dp)" ) (assoc "@htmx:before-cleanup-element" "destroyDatepicker(dp)" )
(assoc "x-destroy" "destroyDatepicker(dp)") (assoc "x-destroy" "destroyDatepicker(dp)")
(assoc "@change-date.camel" "console.log('date changing'); value = dp.getDate(\"mm/dd/yyyy\");") (assoc "@change-date.camel" "value = dp.getDate(\"mm/dd/yyyy\");")
(update :class #(str % (use-size size) " w-full")) (update :class #(str % (use-size size) " w-full"))
(dissoc :size :name :x-model :x-modelable))]])) (dissoc :size :name :x-model :x-modelable))]]))

26
src/clj/auto_ap/ssr/components/periods.clj
View File

@@ -18,7 +18,7 @@
:end :end
(atime/unparse-local atime/normal-date))}) (atime/unparse-local atime/normal-date))})
:x-init "$watch('periods', ds => source_date= ds.length > 0 ? ds[0].end : null)"} :x-init "$watch('periods', ds => source_date= ds.length > 0 ? ds[0].end : null)" }
[:template {:x-for "(v,n) in periods"} [:template {:x-for "(v,n) in periods"}
[:div [:div
[:input {:type "hidden" [:input {:type "hidden"
@@ -59,14 +59,15 @@
{:name "Advanced" {:name "Advanced"
:content [:div.flex.gap-4 {:class "overflow-hidden max-h-[300px]" :content [:div.flex.gap-4 {:class "overflow-hidden max-h-[300px]"
:x-data (hx/json {:calendarTarget "0" :x-data (hx/json {:calendarTarget "0"
:calendarWhich "start"}) } :calendarWhich "start"})
"@change-date.camel" "$el.querySelectorAll('.text-inputs.' + calendarWhich)[calendarTarget].focus()"}
(inputs/calendar-input- {:x-model "periods[calendarTarget][calendarWhich]"}) (inputs/calendar-input- {:x-model "periods[calendarTarget][calendarWhich]"})
[:div.flex.flex-col.gap-4.p-2 [:div.flex.flex-col.gap-4.p-2
[:div.overflow-y-scroll.flex.flex-col.gap-4 [:div.overflow-y-scroll.flex.flex-col.gap-4
[:template {:x-for "(p, i) in periods" ":key" "i"} [:template {:x-for "(p, i) in periods" ":key" "i"}
[:div.flex.gap-4. [:div.flex.gap-4.
(inputs/text-input- { :x-model "p.start" "@focus" "calendarTarget =i; calendarWhich='start'" }) (inputs/text-input- { :class "text-inputs start" :x-model "periods[i].start" "@focus" "calendarTarget =i; calendarWhich='start'" })
(inputs/text-input- { :x-model "p.end" "@focus" "calendarTarget =i; calendarWhich='end'"}) (inputs/text-input- { :class "text-inputs end" :x-model "periods[i].end" "@focus" "calendarTarget =i; calendarWhich='end'"})
(buttons/a-icon-button- {"@click.prevent.stop" "periods=periods.filter((_, i2) => i !== i2); calendarTarget=0"} svg/x)] (buttons/a-icon-button- {"@click.prevent.stop" "periods=periods.filter((_, i2) => i !== i2); calendarTarget=0"} svg/x)]
#_(com/pill {:color :secondary} #_(com/pill {:color :secondary}
[:span {:x-text "p.start"}] [:span {:x-text "p.start"}]
@@ -110,19 +111,18 @@
(buttons/a-button- {"@click" "dates=getFourWeekPeriods(dates[dates.length -1])"} "13 periods") (buttons/a-button- {"@click" "dates=getFourWeekPeriods(dates[dates.length -1])"} "13 periods")
(buttons/a-button- {"@click" "dates=withLastYear(dates[dates.length -1])"} "Add prior year") (buttons/a-button- {"@click" "dates=withLastYear(dates[dates.length -1])"} "Add prior year")
(buttons/a-button- {"@click" "dates=[]"} "Clear")]]} (buttons/a-button- {"@click" "dates=[]"} "Clear")]]}
{:name "Advanced" {:name "Advanced oooo"
:content [:div.flex.gap-4 {:class "overflow-hidden max-h-[300px]" :content [:div.flex.gap-4 {:class "overflow-hidden max-h-[300px]"
:x-data (hx/json {:calendarTarget "0" })} :x-data (hx/json {:calendarTarget "0" })
(inputs/calendar-input- {:x-model "dates[calendarTarget]"}) "@change-date.camel" "$el.querySelectorAll('.text-inputs')[calendarTarget].focus();"}
(inputs/calendar-input- {:x-model "dates[calendarTarget]" })
[:div.flex.flex-col.gap-4.p-2 [:div.flex.flex-col.gap-4.p-2
[:div.overflow-y-scroll.flex.flex-col.gap-4 [:div.overflow-y-scroll.flex.flex-col.gap-4
[:template {:x-for "(p, i) in dates" ":key" "i"} [:template {:x-for "(p, i) in dates" ":key" "i"}
[:div.flex.gap-4. [:div.flex.gap-4.
(inputs/text-input- {:x-model "p" "@focus" "calendarTarget =i; 'start'"}) (inputs/text-input- {:x-model "dates[i]"
(buttons/a-icon-button- {"@click.prevent.stop" "dates=dates.filter((_, i2) => i !== i2); calendarTarget=0"} svg/x)] "@focus" "calendarTarget =i; "
#_(com/pill {:color :secondary} :class "text-inputs"})
[:span {:x-text "p.start"}] (buttons/a-icon-button- {"@click.prevent.stop" "dates=dates.filter((_, i2) => i !== i2); calendarTarget=0"} svg/x)] ]]
" - "
[:span {:x-text "p.end"}])]]
(buttons/button- {"@click.prevent.stop" "dates.push(null); calendarTarget=0" :class "w-32"} "Add new period")]]}] (buttons/button- {"@click.prevent.stop" "dates.push(null); calendarTarget=0" :class "w-32"} "Add new period")]]}]
:active "Quick"})]]]]) :active "Quick"})]]]])

4
src/clj/auto_ap/ssr/ui.clj
View File

@@ -46,8 +46,8 @@
[:script {:src "https://unpkg.com/htmx.org/dist/ext/debug.js"}] [:script {:src "https://unpkg.com/htmx.org/dist/ext/debug.js"}]
[:script {:src "/js/htmx-disable.js"}] [:script {:src "/js/htmx-disable.js"}]
[:script {:type "text/javascript", :src "https://cdn.yodlee.com/fastlink/v4/initialize.js", :async "async"}]] [:script {:type "text/javascript", :src "https://cdn.yodlee.com/fastlink/v4/initialize.js", :async "async"}]]
[:link {:rel "stylesheet" :href "https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker.min.css"}] [:link {:rel "stylesheet" :href "https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/css/datepicker.min.css"}]
[:script {:type "text/javascript" :src "https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/datepicker-full.min.js"}] [:script {:type "text/javascript" :src "https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/datepicker-full.min.js"}]
[:script {:src "https://unpkg.com/htmx.org/dist/ext/response-targets.js"}] [:script {:src "https://unpkg.com/htmx.org/dist/ext/response-targets.js"}]
[:script {:src "https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js" :defer true}] [:script {:src "https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js" :defer true}]
[:script {:src "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" :integrity "sha512-CQBWl4fJHWbryGE+Pc7UAxWMUMNMWzWxF4SQo9CgkJIN1kx6djDQZjh3Y8SZ1d+6I+1zze6Z7kHXO7q3UyZAWw==" :crossorigin "anonymous" :referrerpolicy "no-referrer"}] [:script {:src "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" :integrity "sha512-CQBWl4fJHWbryGE+Pc7UAxWMUMNMWzWxF4SQo9CgkJIN1kx6djDQZjh3Y8SZ1d+6I+1zze6Z7kHXO7q3UyZAWw==" :crossorigin "anonymous" :referrerpolicy "no-referrer"}]