63 lines
3.6 KiB
Clojure
63 lines
3.6 KiB
Clojure
(ns auto-ap.ssr.components.page
|
|
(:require [auto-ap.ssr.components.aside :refer [left-aside-]]
|
|
[auto-ap.ssr.components.navbar :refer [navbar-]]
|
|
[auto-ap.ssr.hx :as hx]
|
|
[auto-ap.ssr.svg :as svg]
|
|
[config.core :refer [env]]
|
|
[hiccup2.core :as hiccup]))
|
|
|
|
(defn page- [{:keys [nav page-specific client clients client-selection identity app-params request] :or {app-params {}} } & children]
|
|
[:div#app {"_" (hiccup/raw "
|
|
on notification from body put event.detail.value into #notification-details then add .htmx-added to #notification-holder then remove .hidden from #notification-holder then wait 30ms then remove .htmx-added from #notification-holder
|
|
on htmx:responseError put event.detail.xhr.response into #error-details then add .htmx-added to #error-holder then remove .hidden from #error-holder then wait 30ms then remove .htmx-added from #error-holder"
|
|
)
|
|
:x-data (hx/json {:leftNavShow true})}
|
|
(navbar- {:client-selection client-selection
|
|
:clients clients
|
|
:client client
|
|
:identity identity
|
|
:dd-env (:dd-env env)})
|
|
[:div#app-contents.flex.pt-16.overflow-hidden (assoc app-params
|
|
:hx-disinherit "*"
|
|
:x-init "leftNavShow = true")
|
|
(left-aside- {:nav (when nav
|
|
(nav request))
|
|
:page-specific page-specific})
|
|
[:div#main-content {:class "relative w-full h-full overflow-y-auto px-4 bg-gray-100 dark:bg-gray-900 min-h-content lg:pl-64"
|
|
":class" "leftNavShow ? 'lg:pl-64' : ''"
|
|
:x-effect "leftNavShow ? $el.classList.add('lg:pl-64') : $el.classList.remove('lg:pl-64')"
|
|
}
|
|
[:div#notification-holder.hidden
|
|
[:div.fixed.top-0.right-0.left-0.z-30.mx-auto.max-w-screen-lg.w-screen-lg.my-0.pt-8.rounded-lg
|
|
[:div.relative
|
|
[:button.absolute.right-2.top-2.w-6.h-6.z-50.text-blue-400
|
|
{"_" (hiccup/raw "on click add .hidden to #notification-holder")}
|
|
svg/filled-x]]
|
|
|
|
[:div.m-4.overflow-auto.z-30.flex.center-items.justify-center.text-blue-800.bg-blue-50.dark:bg-gray-800.dark:text-blue-400.border-blue-300.rounded-lg.border.transition-all.duration-500.fade-in.slide-up.max-h-96
|
|
|
|
[:div {:class "p-4 text-lg w-full" :role "alert"}
|
|
[:div.text-sm
|
|
[:pre#notification-details.text-xs]]]]]]
|
|
[:div#error-holder.hidden
|
|
[:div.fixed.top-0.right-0.left-0.z-30.mx-auto.max-w-screen-lg.w-screen-lg.my-0.pt-8.rounded-lg
|
|
[:div.relative
|
|
[:button.absolute.right-2.top-2.w-6.h-6.z-50.text-red-600
|
|
{"_" (hiccup/raw "on click add .hidden to #error-holder")}
|
|
svg/filled-x]]
|
|
|
|
[:div.m-4.overflow-auto.z-30.flex.center-items.justify-center.text-red-800.bg-red-50.dark:bg-gray-800.dark:text-red-400.border-red-300.rounded-lg.border.transition-all.duration-500.fade-in.slide-up.max-h-96
|
|
|
|
[:div {:class "p-4 mb-4 text-lg w-full" :role "alert"}
|
|
[:div.inline-block.w-8.h-8.mr-2 svg/alert]
|
|
[:span.font-medium "Oh, drat! An unexpected error has occurred."]
|
|
[:div.text-sm
|
|
[:p "Integreat staff have been notified and are looking into it. "]
|
|
[:p "To see error details, " [:a.underline {:href "#" :data-collapse-toggle "error-details"} "click here"] "."]
|
|
[:pre#error-details.text-xs.hidden]]]]]]
|
|
(into
|
|
[:div.p-4]
|
|
children)]]
|
|
|
|
])
|