From fb50f5727b0cce09345612f351406c64a377e640 Mon Sep 17 00:00:00 2001
From: Bryce Covert <bryce@brycecovertoperations.com>
Date: Mon, 15 May 2023 11:51:16 -0700
Subject: [PATCH] Makes error popup work

---
 resources/input.css                     |  4 ++
 resources/public/output.css             | 96 +++++++++++++++++++++++++
 src/clj/auto_ap/ssr/components/page.clj | 25 ++++++-
 src/clj/auto_ap/ssr/svg.clj             | 21 ++++++
 src/clj/auto_ap/ssr/ui.clj              |  3 +-
 5 files changed, 146 insertions(+), 3 deletions(-)

diff --git a/resources/input.css b/resources/input.css
index be241fc7..3ed74314 100644
--- a/resources/input.css
+++ b/resources/input.css
@@ -5,6 +5,10 @@
 .htmx-added .fade-in {
     opacity: 0.0 !important;
 }
+
+.htmx-added.fade-in {
+    opacity: 0.0 !important;
+}
 .fade-in {
     opacity: 1.0;
 }
diff --git a/resources/public/output.css b/resources/public/output.css
index 4015199c..0db99f1e 100644
--- a/resources/public/output.css
+++ b/resources/public/output.css
@@ -1073,6 +1073,18 @@ input:checked + .toggle-bg {
   top: 1.25rem;
 }
 
+.right-4 {
+  right: 1rem;
+}
+
+.right-2 {
+  right: 0.5rem;
+}
+
+.top-2 {
+  top: 0.5rem;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -1109,6 +1121,18 @@ input:checked + .toggle-bg {
   grid-column: span 6 / span 6;
 }
 
+.m-2 {
+  margin: 0.5rem;
+}
+
+.m-8 {
+  margin: 2rem;
+}
+
+.m-4 {
+  margin: 1rem;
+}
+
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -1124,11 +1148,21 @@ input:checked + .toggle-bg {
   margin-right: auto;
 }
 
+.my-20 {
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+}
+
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
 
+.my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
 .-mb-1 {
   margin-bottom: -0.25rem;
 }
@@ -1193,6 +1227,10 @@ input:checked + .toggle-bg {
   margin-top: 1.25rem;
 }
 
+.mt-8 {
+  margin-top: 2rem;
+}
+
 .block {
   display: block;
 }
@@ -1281,6 +1319,14 @@ input:checked + .toggle-bg {
   height: 100vh;
 }
 
+.h-16 {
+  height: 4rem;
+}
+
+.max-h-96 {
+  max-height: 24rem;
+}
+
 .max-h-full {
   max-height: 100%;
 }
@@ -1325,6 +1371,10 @@ input:checked + .toggle-bg {
   width: 100%;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1333,6 +1383,10 @@ input:checked + .toggle-bg {
   max-width: 1536px;
 }
 
+.max-w-screen-lg {
+  max-width: 1024px;
+}
+
 .max-w-sm {
   max-width: 24rem;
 }
@@ -1653,6 +1707,11 @@ input:checked + .toggle-bg {
   border-color: rgb(175 211 130 / var(--tw-border-opacity));
 }
 
+.border-red-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 104 104 / var(--tw-border-opacity));
+}
+
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(204 235 251 / var(--tw-bg-opacity));
@@ -1708,6 +1767,11 @@ input:checked + .toggle-bg {
   background-color: rgb(242 248 234 / var(--tw-bg-opacity));
 }
 
+.bg-red-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 230 230 / var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1722,6 +1786,11 @@ input:checked + .toggle-bg {
   background-color: rgb(253 246 178 / var(--tw-bg-opacity));
 }
 
+.bg-green-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(201 225 171 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -1858,6 +1927,10 @@ input:checked + .toggle-bg {
   padding-top: 1.25rem;
 }
 
+.pt-8 {
+  padding-top: 2rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1982,6 +2055,11 @@ input:checked + .toggle-bg {
   color: rgb(97 145 37 / var(--tw-text-opacity));
 }
 
+.text-red-800 {
+  --tw-text-opacity: 1;
+  color: rgb(102 1 1 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1992,6 +2070,15 @@ input:checked + .toggle-bg {
   color: rgb(114 59 19 / var(--tw-text-opacity));
 }
 
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(204 2 2 / var(--tw-text-opacity));
+}
+
+.underline {
+  text-decoration-line: underline;
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -2097,6 +2184,10 @@ input:checked + .toggle-bg {
   opacity: 0.0 !important;
 }
 
+.htmx-added.fade-in {
+  opacity: 0.0 !important;
+}
+
 .fade-in {
   opacity: 1.0;
 }
@@ -2489,6 +2580,11 @@ input:checked + .toggle-bg {
   color: rgb(175 211 130 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-red-400 {
+  --tw-text-opacity: 1;
+  color: rgb(255 53 53 / var(--tw-text-opacity));
+}
+
 .dark .dark\:text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
diff --git a/src/clj/auto_ap/ssr/components/page.clj b/src/clj/auto_ap/ssr/components/page.clj
index 232691e6..5ead824e 100644
--- a/src/clj/auto_ap/ssr/components/page.clj
+++ b/src/clj/auto_ap/ssr/components/page.clj
@@ -1,7 +1,9 @@
 (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.components.navbar :refer [navbar-]]
+   [hiccup2.core :as hiccup]
+   [auto-ap.ssr.svg :as svg]))
 
 (defn page- [{:keys [nav page-specific active-client identity app-params] :or {app-params {}}} & children]
   [:div#app app-params
@@ -10,7 +12,26 @@
    [:div.flex.pt-16.overflow-hidden
     (left-aside- {:nav nav
                   :page-specific page-specific})
-    [:div#main-content {:class "relative w-full h-full lg:pl-64 overflow-y-auto px-4 bg-gray-100 dark:bg-gray-900 min-h-content "}
+    [:div#main-content {:class "relative w-full h-full lg:pl-64 overflow-y-auto px-4 bg-gray-100 dark:bg-gray-900 min-h-content "
+                        "_" (hiccup/raw "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 10ms then remove .htmx-added from #error-holder")}
+     [: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)]]
diff --git a/src/clj/auto_ap/ssr/svg.clj b/src/clj/auto_ap/ssr/svg.clj
index c3a5d88f..048d2677 100644
--- a/src/clj/auto_ap/ssr/svg.clj
+++ b/src/clj/auto_ap/ssr/svg.clj
@@ -271,3 +271,24 @@
    :stroke "currentColor",
    :stroke-linecap "round", 
    :stroke-linejoin "round"}]])
+
+(def alert
+  [:svg {:xmlns "http://www.w3.org/2000/svg", :viewbox "0 0 24 24"}
+   [:defs]
+   [:title "alert-triangle"]
+   [:path {:d "M22.553,22.581a.569.569,0,0,1-.553.894H2a.569.569,0,0,1-.553-.894L11.553,2.37c.246-.492.648-.492.894,0Z", :fill "none", :stroke "currentColor", :stroke-linecap "round", :stroke-linejoin "round"}]
+   [:line {:x1 "12", :y1 "16.979", :x2 "12", :y2 "9.979", :fill "none", :stroke "currentColor", :stroke-linecap "round", :stroke-linejoin "round"}]
+   [:path {:d "M11.991,18.979a.246.246,0,0,0-.241.255.255.255,0,0,0,.254.245h.005a.246.246,0,0,0,.241-.255A.255.255,0,0,0,12,18.979h-.005", :fill "none", :stroke "currentColor", :stroke-linecap "round", :stroke-linejoin "round"}]])
+
+(def x
+  [:svg {:xmlns "http://www.w3.org/2000/svg", :viewbox "0 0 24 24"}
+   [:defs]
+   [:title "delete-2"]
+   [:circle {:cx "12", :cy "12", :r "11.5", :fill "none", :stroke "currentColor", :stroke-linecap "round", :stroke-linejoin "round"}]
+   [:line {:x1 "7", :y1 "7", :x2 "17", :y2 "17", :fill "none", :stroke "currentColor", :stroke-linecap "round", :stroke-linejoin "round"}]
+   [:line {:x1 "17", :y1 "7", :x2 "7", :y2 "17", :fill "none", :stroke "currentColor", :stroke-linecap "round", :stroke-linejoin "round"}]])
+
+
+(def filled-x
+  [:svg {:xmlns "http://www.w3.org/2000/svg", :viewbox "0 0 24 24"}
+   [:path {:d "M24,12A12,12,0,1,0,12,24,12,12,0,0,0,24,12Zm-7.29,3.28a1,1,0,0,1,0,1.41,1,1,0,0,1-1.42,0l-3.11-3.11a.26.26,0,0,0-.35,0L8.72,16.69a1,1,0,0,1-1.41-1.41l3.11-3.11a.26.26,0,0,0,0-.35L7.31,8.71a1,1,0,0,1,0-1.42,1,1,0,0,1,1.41,0l3.11,3.11a.24.24,0,0,0,.35,0l3.11-3.11a1,1,0,1,1,1.42,1.42L13.6,11.82a.24.24,0,0,0,0,.35Z", :fill "currentColor"}]])
diff --git a/src/clj/auto_ap/ssr/ui.clj b/src/clj/auto_ap/ssr/ui.clj
index bf96c347..4521e0ba 100644
--- a/src/clj/auto_ap/ssr/ui.clj
+++ b/src/clj/auto_ap/ssr/ui.clj
@@ -34,7 +34,8 @@
      [:script {:type "text/javascript", :src "https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"}]
      [:script {:src "https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"}]
      [:link {:rel "stylesheet" :href "https://unpkg.com/dropzone@5/dist/min/dropzone.min.css"  :type "text/css"}]
-     [:body {:hx-ext "disable-submit"}
+     [:body {:hx-ext "disable-submit"
+             }
       contents
       [:script {:src "/js/flowbite.min.js"}]
       [:script {:lang "text/javascript"}