From 76e81be6bf9791a9d74547d656510ab742f0fd8e Mon Sep 17 00:00:00 2001
From: Eden Kirin <eden@ekirin.com>
Date: Sun, 7 Apr 2024 10:13:41 +0200
Subject: [PATCH] JS alert toasts

---
 .../main/complex_form/container.html          |  3 +++
 .../templates/main/components/js_alert.html   | 25 +++++++++++++++++++
 project/main/templates/main/filter_list.html  |  5 ++--
 .../main/templates/main/form_validation.html  |  3 +++
 project/main/templates/main/swap.html         |  3 +++
 .../templates/main/table_inline_edit.html     |  5 ++--
 6 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 project/main/templates/main/components/js_alert.html

diff --git a/project/main/templates/main/complex_form/container.html b/project/main/templates/main/complex_form/container.html
index 2802ed4..fa770dd 100644
--- a/project/main/templates/main/complex_form/container.html
+++ b/project/main/templates/main/complex_form/container.html
@@ -1,7 +1,10 @@
 {% extends "main/base/layout.html" %}
+{% from "main/components/js_alert.html" import no_js_alert %}
 
 
 {% block content %}
+    {{ no_js_alert() }}
+
     <form>
         <div class="row mb-4">
             <div
diff --git a/project/main/templates/main/components/js_alert.html b/project/main/templates/main/components/js_alert.html
new file mode 100644
index 0000000..e336085
--- /dev/null
+++ b/project/main/templates/main/components/js_alert.html
@@ -0,0 +1,25 @@
+{% macro no_js_alert() %}
+    <div class="alert alert-success d-flex align-items-center mb-5" role="alert">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-success me-3" viewBox="0 0 16 16">
+             <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+        </svg>
+        <div>
+            No JavaScript is used creating this page.
+        </div>
+    </div>
+{% endmacro %}
+
+{% macro js_alert(content) %}
+    <div class="alert alert-warning d-flex align-items-center mb-5" role="alert">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-warning me-3" viewBox="0 0 16 16">
+             <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+        </svg>
+        <div>
+            {{ content }}
+        </div>
+    </div>
+{% endmacro %}
+
+{% macro js_alert_work_in_progress() %}
+    {{ js_alert("Work in progress.") }}
+{% endmacro %}
diff --git a/project/main/templates/main/filter_list.html b/project/main/templates/main/filter_list.html
index 8e380d7..5eccfae 100644
--- a/project/main/templates/main/filter_list.html
+++ b/project/main/templates/main/filter_list.html
@@ -1,8 +1,7 @@
 {% extends "main/base/layout.html" %}
+{% from "main/components/js_alert.html" import js_alert_work_in_progress %}
 
 
 {% block content %}
-    <p>
-        This is some filter list content bellow.
-    </p>
+    {{ js_alert_work_in_progress() }}
 {% endblock %}
diff --git a/project/main/templates/main/form_validation.html b/project/main/templates/main/form_validation.html
index 55087e7..e5826da 100644
--- a/project/main/templates/main/form_validation.html
+++ b/project/main/templates/main/form_validation.html
@@ -1,8 +1,11 @@
 {% extends "main/base/layout.html" %}
 {% from "main/components/toast.html" import toast %}
+{% from "main/components/js_alert.html" import js_alert %}
 
 
 {% block content %}
+    {{ js_alert("Just few lines of JavaScript used to pop toast.") }}
+
     <form
         hx-post="{{ url("form-validation") }}"
         hx-target="#validation-form-content"
diff --git a/project/main/templates/main/swap.html b/project/main/templates/main/swap.html
index d690234..3854f0b 100644
--- a/project/main/templates/main/swap.html
+++ b/project/main/templates/main/swap.html
@@ -1,4 +1,5 @@
 {% extends "main/base/layout.html" %}
+{% from "main/components/js_alert.html" import no_js_alert %}
 
 
 {% block content %}
@@ -13,6 +14,8 @@
         </button>
     {% endmacro %}
 
+    {{ no_js_alert() }}
+
     {{ render_btn(title="Initial", cls="btn-outline-secondary", content="initial") }}
     {{ render_btn(title="Swap to content 1", cls="btn-info", content="info") }}
     {{ render_btn(title="Swap to content 2", cls="btn-warning", content="warning") }}
diff --git a/project/main/templates/main/table_inline_edit.html b/project/main/templates/main/table_inline_edit.html
index 83aabf5..5eccfae 100644
--- a/project/main/templates/main/table_inline_edit.html
+++ b/project/main/templates/main/table_inline_edit.html
@@ -1,8 +1,7 @@
 {% extends "main/base/layout.html" %}
+{% from "main/components/js_alert.html" import js_alert_work_in_progress %}
 
 
 {% block content %}
-    <p>
-        This is some table inline edit content bellow.
-    </p>
+    {{ js_alert_work_in_progress() }}
 {% endblock %}