h/projectreshoot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added error 503 popup

Browse Source
This commit is contained in:
Haelnorr
2025-02-18 20:51:22 +11:00
parent 0ece08726d
commit 1f7a9e08e6
9 changed files with 291 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
view/component/popup/errorPopup.templ → view/component/popup/error500Popup.templ
View File

@@ -1,9 +1,9 @@
package popup
templ ErrorPopup() {
templ Error500Popup() {
<div
x-cloak
x-show="showError"
x-show="showError500"
class="absolute w-82 left-0 right-0 mt-20 mr-5 ml-auto"
x-transition:enter="transform translate-x-[100%] opacity-0 duration-200"
x-transition:enter-start="opacity-0 translate-x-[100%]"
@@ -44,7 +44,7 @@ templ ErrorPopup() {
stroke-width="1.5"
stroke="currentColor"
class="size-6 text-subtext0 hover:cursor-pointer"
@click="showError=false"
@click="showError500=false"
>
<path
stroke-linecap="round"

63
view/component/popup/error503Popup.templ Normal file
View File

@@ -0,0 +1,63 @@
package popup
templ Error503Popup() {
<div
x-cloak
x-show="showError503"
class="absolute w-82 left-0 right-0 mt-20 mr-5 ml-auto"
x-transition:enter="transform translate-x-[100%] opacity-0 duration-200"
x-transition:enter-start="opacity-0 translate-x-[100%]"
x-transition:enter-end="opacity-100 translate-x-0"
x-transition:leave="opacity-0 duration-200"
x-transition:leave-start="opacity-100 translate-x-0"
x-transition:leave-end="opacity-0 translate-x-[100%]"
>
<div
role="alert"
class="rounded-sm bg-dark-red p-4"
>
<div class="flex justify-between">
<div class="flex items-center gap-2 text-red w-fit">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="size-5"
>
<path
fill-rule="evenodd"
d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355
12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309
0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75
0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0
01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
clip-rule="evenodd"
></path>
</svg>
<strong class="block font-medium">Service Unavailable</strong>
</div>
<div class="flex">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6 text-subtext0 hover:cursor-pointer"
@click="showError503=false"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12"
></path>
</svg>
</div>
</div>
<p class="mt-2 text-sm text-red">
The service is currently available. It could be down for maintenance.
Please try again later.
</p>
</div>
</div>
}

17
view/layout/global.templ
View File

@@ -41,11 +41,12 @@ templ Global() {
<script src="https://unpkg.com/alpinejs" defer></script>
<script>
// uncomment this line to enable logging of htmx events
// htmx.logAll();
htmx.logAll();
</script>
<script>
const bodyData = {
showError: false,
showError500: false,
showError503: false,
showConfirmPasswordModal: false,
handleHtmxBeforeOnLoad(event) {
const requestPath = event.detail.pathInfo.requestPath;
@@ -65,8 +66,13 @@ templ Global() {
// internal server error
if (errorCode.includes('Code 500')) {
this.showError = true;
setTimeout(() => this.showError = false, 6000);
this.showError500 = true;
setTimeout(() => this.showError500 = false, 6000);
}
// service not available error
if (errorCode.includes('Code 503')) {
this.showError503 = true;
setTimeout(() => this.showError503 = false, 6000);
}
// user is authorized but needs to refresh their login
@@ -83,7 +89,8 @@ templ Global() {
x-on:htmx:error="handleHtmxError($event)"
x-on:htmx:before-on-load="handleHtmxBeforeOnLoad($event)"
>
@popup.ErrorPopup()
@popup.Error500Popup()
@popup.Error503Popup()
@popup.ConfirmPasswordModal()
<div
id="main-content"