From 966a6ddb6748e227de4750d10863d157522f9a47 Mon Sep 17 00:00:00 2001 From: Chris Cochrun Date: Tue, 20 Dec 2022 14:08:04 -0600 Subject: [PATCH] fixing health form validation --- assets/css/compiled/main.css | 199 ++++++++-------------------- layouts/shortcodes/health-form.html | 111 ++++++++++++++-- 2 files changed, 159 insertions(+), 151 deletions(-) diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 106b451..cd0d962 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -1502,6 +1502,10 @@ select { pointer-events: auto; } +.visible { + visibility: visible; +} + .invisible { visibility: hidden; } @@ -1554,10 +1558,6 @@ select { top: 0px; } -.right-0 { - right: 0px; -} - .top-20 { top: 5rem; } @@ -1566,6 +1566,10 @@ select { z-index: 30; } +.z-50 { + z-index: 50; +} + .z-10 { z-index: 10; } @@ -1723,10 +1727,6 @@ select { margin-bottom: 3rem; } -.mb-5 { - margin-bottom: 1.25rem; -} - .mr-2 { margin-right: 0.5rem; } @@ -1767,18 +1767,14 @@ select { margin-top: 0.5rem; } +.mb-5 { + margin-bottom: 1.25rem; +} + .\!mb-9 { margin-bottom: 2.25rem !important; } -.ml-auto { - margin-left: auto; -} - -.mr-auto { - margin-right: auto; -} - .mb-\[2px\] { margin-bottom: 2px; } @@ -1851,24 +1847,8 @@ select { height: 2rem; } -.h-\[120px\] { - height: 120px; -} - -.h-\[100px\] { - height: 100px; -} - -.h-\[150px\] { - height: 150px; -} - -.h-\[800px\] { - height: 800px; -} - -.h-\[1000px\] { - height: 1000px; +.h-\[300px\] { + height: 300px; } .max-h-\[5rem\] { @@ -1879,10 +1859,6 @@ select { min-height: 0px; } -.min-h-\[148px\] { - min-height: 148px; -} - .w-12 { width: 3rem; } @@ -1915,10 +1891,6 @@ select { min-width: 0px; } -.min-w-full { - min-width: 100%; -} - .min-w-\[1\.8rem\] { min-width: 1.8rem; } @@ -1951,18 +1923,10 @@ select { max-width: 36rem; } -.max-w-\[1600px\] { - max-width: 1600px; -} - .max-w-3xl { max-width: 48rem; } -.max-w-\[64rem\] { - max-width: 64rem; -} - .flex-1 { flex: 1 1 0%; } @@ -2218,6 +2182,36 @@ select { background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity)); } +.bg-neutral-200 { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-neutral-200), var(--tw-bg-opacity)); +} + +.bg-secondary-500 { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-secondary-500), var(--tw-bg-opacity)); +} + +.bg-primary-500 { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity)); +} + +.bg-primary-400 { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-primary-400), var(--tw-bg-opacity)); +} + +.bg-secondary-400 { + --tw-bg-opacity: 1; + background-color: rgba(var(--color-secondary-400), var(--tw-bg-opacity)); +} + +.bg-\[\#ef4444\] { + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); +} + .bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); } @@ -2256,10 +2250,6 @@ select { --tw-gradient-to: rgba(var(--color-secondary-700), 1); } -.to-neutral { - --tw-gradient-to: rgba(var(--color-neutral), 1); -} - .object-cover { -o-object-fit: cover; object-fit: cover; @@ -2355,11 +2345,6 @@ select { padding-right: 0.5rem; } -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; -} - .py-\[1px\] { padding-top: 1px; padding-bottom: 1px; @@ -2400,22 +2385,6 @@ select { padding-left: 1rem; } -.pl-8 { - padding-left: 2rem; -} - -.pr-8 { - padding-right: 2rem; -} - -.pt-4 { - padding-top: 1rem; -} - -.pb-2 { - padding-bottom: 0.5rem; -} - .pl-2 { padding-left: 0.5rem; } @@ -2424,12 +2393,8 @@ select { padding-bottom: 1rem; } -.pl-\[24px\] { - padding-left: 24px; -} - -.pr-\[24px\] { - padding-right: 24px; +.pt-4 { + padding-top: 1rem; } .text-center { @@ -2606,9 +2571,14 @@ select { color: rgba(var(--color-neutral), var(--tw-text-opacity)) !important; } -.text-primary-800 { +.text-\[\#fca5a5\] { --tw-text-opacity: 1; - color: rgba(var(--color-primary-800), var(--tw-text-opacity)); + color: rgb(252 165 165 / var(--tw-text-opacity)); +} + +.text-\[\#f87171\] { + --tw-text-opacity: 1; + color: rgb(248 113 113 / var(--tw-text-opacity)); } .\!no-underline { @@ -2641,14 +2611,6 @@ select { opacity: 0; } -.opacity-30 { - opacity: 0.3; -} - -.opacity-70 { - opacity: 0.7; -} - .mix-blend-normal { mix-blend-mode: normal; } @@ -2663,12 +2625,6 @@ select { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } -.shadow-2xl { - --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); - --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); @@ -2687,12 +2643,6 @@ select { backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } -.backdrop-blur-2xl { - --tw-backdrop-blur: blur(40px); - -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); -} - .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @@ -3373,13 +3323,6 @@ body:has(#menu-controller:checked) { background-position:center; } -.thumbnail_card { - height: 250px; - background-repeat:no-repeat; - background-size:cover; - background-position:center; -} - .single_hero_basic { background-repeat:no-repeat; background-size:cover; @@ -3410,14 +3353,6 @@ body:has(#menu-controller:checked) { box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3); } -.anchor { - display: block; - position: relative; - top: -100px; - height: 0px; - visibility: hidden; -} - @media (min-width: 640px) { .thumbnail { min-width: 100%; @@ -3852,6 +3787,11 @@ body:has(#menu-controller:checked) { background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity)); } +.dark .dark\:bg-\[\#ef4444\] { + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); +} + .dark .dark\:from-neutral-800 { --tw-gradient-from: rgba(var(--color-neutral-800), 1); --tw-gradient-to: rgba(var(--color-neutral-800), 0); @@ -3872,10 +3812,6 @@ body:has(#menu-controller:checked) { --tw-gradient-to: rgba(var(--color-secondary-800), 1); } -.dark .dark\:to-neutral-800 { - --tw-gradient-to: rgba(var(--color-neutral-800), 1); -} - .dark .dark\:prose-invert { --tw-prose-body: var(--tw-prose-invert-body); --tw-prose-headings: var(--tw-prose-invert-headings); @@ -3948,15 +3884,6 @@ body:has(#menu-controller:checked) { color: rgba(var(--color-neutral-100), var(--tw-text-opacity)); } -.dark .dark\:text-primary-200 { - --tw-text-opacity: 1; - color: rgba(var(--color-primary-200), var(--tw-text-opacity)); -} - -.dark .dark\:opacity-60 { - opacity: 0.6; -} - .dark .dark\:mix-blend-multiply { mix-blend-mode: multiply; } @@ -4119,10 +4046,6 @@ body:has(#menu-controller:checked) { height: 18rem; } - .md\:h-\[200px\] { - height: 200px; - } - .md\:h-56 { height: 14rem; } @@ -4306,10 +4229,4 @@ body:has(#menu-controller:checked) { .xl\:w-1\/4 { width: 25%; } -} - -@media (min-width: 1536px) { - .\32xl\:w-1\/5 { - width: 20%; - } } \ No newline at end of file diff --git a/layouts/shortcodes/health-form.html b/layouts/shortcodes/health-form.html index caae6f9..ca82ac0 100644 --- a/layouts/shortcodes/health-form.html +++ b/layouts/shortcodes/health-form.html @@ -11,14 +11,64 @@ const age = calculate_age(birthdate); data.append("age", age); + if (data.get("tetanus-shot") === "") { + console.warn("NO DATE FOR TETANUS SHOT"); + data.set("tetanus-shot", "0000-00-00"); + console.log(data.get("tetanus-shot")); + } + + if (document.getElementById("medical-coverage").checked && data.get("insurance-name") == "") { + document.getElementById('warning-insurance').style.visibility = 'visible'; + document.getElementById('warning-insurance').style.height = ''; + document.getElementById('warning-insurance').style.margin = ''; + return false; + } else { + document.getElementById('warning-insurance').style.visibility = 'hidden'; + document.getElementById('warning-insurance').style.height = '0'; + document.getElementById('warning-insurance').style.margin = '0'; + } + + if (document.getElementById("medical-coverage").checked && data.get("policy-number") == "") { + document.getElementById('warning-policy').style.visibility = 'visible'; + document.getElementById('warning-policy').style.height = ''; + document.getElementById('warning-policy').style.margin = ''; + return false; + } else { + document.getElementById('warning-policy').style.visibility = 'hidden'; + document.getElementById('warning-policy').style.height = '0'; + document.getElementById('warning-policy').style.margin = '0'; + } + + if (document.getElementById("medical-coverage").checked && document.getElementById("image").files.length === 0) { + document.getElementById('warning-image').style.visibility = 'visible'; + document.getElementById('warning-image').style.height = ''; + document.getElementById('warning-image').style.margin = ''; + return false; + } else { + console.warn(document.getElementById("image")); + document.getElementById('warning-image').style.visibility = 'hidden'; + document.getElementById('warning-image').style.height = '0'; + document.getElementById('warning-image').style.margin = '0'; + } + var xhr = new XMLHttpRequest(); + xhr.onreadystatechange = (e) => { + if (xhr.readyState !== 4) { + return; + } + + if (xhr.status === 200) { + console.log('SUCCESS', xhr.responseText); + } else { + console.warn('request_error', xhr.responseText); + } + }; xhr.open("POST", "https://n8n.tfcconnection.org/webhook/health-form"); xhr.send(data); console.log(data); console.log("Hallo!"); - window.location.href = "https://tfcconnection.org/thankyou/"; - window.location.replace("https://tfcconnection.org/thankyou/"); - return false; + /* window.location.href = "/thankyou/"; */ + /* window.location.replace("https://tfcconnection.org/thankyou/"); */ } function calculate_age(dob) { @@ -41,9 +91,21 @@ console.log(document.getElementById('policy')) console.log("NEGATORY"); } + document.getElementById('warning').style.visibility = 'hidden'; + document.getElementById('warning-insurance').style.visibility = 'hidden'; + document.getElementById('warning-policy').style.visibility = 'hidden'; + document.getElementById('warning-image').style.visibility = 'hidden'; + document.getElementById('warning').style.height = '0'; + document.getElementById('warning-insurance').style.height = '0'; + document.getElementById('warning-policy').style.height = '0'; + document.getElementById('warning-image').style.height = '0'; + document.getElementById('warning').style.margin = '0'; + document.getElementById('warning-insurance').style.margin = '0'; + document.getElementById('warning-policy').style.margin = '0'; + document.getElementById('warning-image').style.margin = '0'; } - document.addEventListener('DOMContentLoaded', process); + document.addEventListener('DOMContentLoaded', process); function dated() { function nth(d) { @@ -78,26 +140,26 @@

- -
+ class="form-date {{ $formClasses }}" required>
+ placeholder="First Name" required> + placeholder="Last Name" required>
@@ -116,7 +178,7 @@
- + @@ -332,5 +394,34 @@
+ +
+ + {{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }} + Make sure you have uploaded a copy of your insurance card. + +
+ +
+ + {{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }} + You have not entered in your insurance name. + +
+ +
+ + {{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }} + You have not entered in a policy number. + +
+ +
+ + {{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }} + You have not included a copy of your insurance card. + +
+