Update loading state

package.json

@@ -18,11 +18,13 @@
     "devDependencies": {
         "@spiriit/vite-plugin-svg-spritemap": "^2.2.4",
         "autoprefixer": "^10.4.0",
+        "axios": "^1.7.7",
         "postcss": "^8.4.4",
         "tailwind-clip-path": "^1.0.0",
         "tailwindcss": "latest",
-        "vite": "^4.0",
+        "toastify-js": "^1.12.0",
-        "vite-plugin-live-reload": "^2.1.0"
+        "vite": "^5.0",
+        "vite-plugin-live-reload": "^3.0"
     },
     "dependencies": {
         "@tailwindcss/forms": "^0.5.7",

pages/homepage.htm

@@ -66,9 +66,7 @@ is_hidden = 0
                 </div>
             </section>
 
-            <section class="shadow-xl mt-10 self-center md:self-none md:mt-0 bg-zinc-900 border border-zinc-700 rounded-xl p-3 max-w-lg w-full md:w-2/5 flex-none">
+            {% component 'anfrage' class='mt-10 self-center md:self-start md:mt-0 max-w-lg w-full md:w-2/5 flex-none' %}
-                {% component 'anfrage' %}
-            </section>
         </div>
     </div>
 </div>

partials/anfrage/default.htm

@@ -1,67 +1,67 @@
 {% set maingrid = "grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-3" %}
 
-<div id="anfrageform" x-data="form">
+<section class="relative rounded-xl p-5 duration-500 shadow-xl {{__SELF__.outerClass}}" x-data="form" :class="{'bg-zinc-900 border border-zinc-700': sent === false, 'bg-green-900 border border-green-700': sent === true}">
 
-    <form data-request="anfrage::onSubmit" data-request-flash class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-3">
+    <form @submit.prevent="submit" class="sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-3" :class="{'grid': sent === false, 'hidden': sent === true}">
 
         <div>
           <label for="reason" class="block text-sm font-medium text-zinc-100">Grund für die Feier</label>
-          <input id="reason" name="reason" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="z.B. 18. Geburtstag">
+          <input x-model="value.reason" id="reason" name="reason" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="z.B. 18. Geburtstag">
         </div>
 
         <div>
           <label for="date" class="block text-sm font-medium text-zinc-100">Gewünschtes Datum</label>
-          <input x-model="date" id="date" name="date" datepicker class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input x-model="value.date" id="date" name="date" datepicker class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div>
           <label for="guests" class="block text-sm font-medium text-zinc-100">Anzahl Gäste (ca)</label>
-          <input id="guests" name="guests" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input x-model="value.guests" id="guests" name="guests" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div>
           <label for="birthday" class="block text-sm font-medium text-zinc-100">Geburtsdatum</label>
-          <input x-model="birthday" id="birthday" name="birthday" datepicker class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input x-model="value.birthday" id="birthday" name="birthday" datepicker class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div>
           <label for="firstname" class="block text-sm font-medium text-zinc-100">Vorname</label>
-          <input id="firstname" name="firstname" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input x-model="value.firstname" id="firstname" name="firstname" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div>
           <label for="lastname" class="block text-sm font-medium text-zinc-100">Nachname</label>
-          <input id="lastname" name="lastname" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input x-model="value.lastname" id="lastname" name="lastname" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div>
           <label for="address" class="block text-sm font-medium text-zinc-100">Adresse</label>
-          <input id="address" name="address" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input x-model="value.address" id="address" name="address" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div>
           <label for="zip" class="block text-sm font-medium text-zinc-100">PLZ</label>
-          <input id="zip" name="zip" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input x-model="value.zip" id="zip" name="zip" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div>
           <label for="location" class="block text-sm font-medium text-zinc-100">Ort</label>
-          <input id="location" name="location" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input x-model="value.location" id="location" name="location" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div>
           <label for="phone" class="block text-sm font-medium text-zinc-100">Telefonnummer</label>
-          <input id="phone" name="phone" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input x-model="value.phone" id="phone" name="phone" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div class="col-span-full">
           <label for="email" class="block text-sm font-medium text-zinc-100">E-Mail-Adresse</label>
-          <input id="email" name="email" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+          <input x-model="value.email" id="email" name="email" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
         </div>
 
         <div class="col-span-full">
           <label for="misc" class="block text-sm font-medium text-zinc-100">Was du sonst noch loswerden willst …</label>
-          <textarea id="misc" name="misc" rows="5" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5"></textarea>
+          <textarea x-model="value.misc" id="misc" name="misc" rows="5" class="shadow-sm bg-zinc-800 border border-zinc-700 text-zinc-200 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5"></textarea>
         </div>
 
         <div x-show="isUnder18" class="col-span-full text-sm items-center p-4 border-2 rounded-lg form-group shadow-sm group bg-red-950 border-red-900">
@@ -71,15 +71,15 @@
             <div class="{{maingrid}}">
                 <div>
                     <label for="parent_name" class="block text-sm font-bold mt-2 text-red-50">Name eines Erz. Ber.</label>
-                    <input id="parent_name" name="parent_name" class="shadow-sm bg-red-900 text-red-50 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+                    <input x-model="value.parent_name" id="parent_name" name="parent_name" class="shadow-sm bg-red-900 text-red-50 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
                 </div>
                 <div>
                     <label for="parent_email" class="block text-sm font-bold mt-2 text-red-50">Email eines Erz. Ber.</label>
-                    <input id="parent_email" name="parent_email" class="shadow-sm bg-red-900 text-red-200 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+                    <input x-model="value.parent_email" id="parent_email" name="parent_email" class="shadow-sm bg-red-900 text-red-200 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
                 </div>
                 <div>
                     <label for="parent_phone" class="block text-sm font-bold mt-2 text-red-50">TelNr. eines Erz. Ber.</label>
-                    <input id="parent_phone" name="parent_phone" class="shadow-sm bg-red-900 text-red-200 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
+                    <input x-model="value.parent_phone" id="parent_phone" name="parent_phone" class="shadow-sm bg-red-900 text-red-200 border border-red-800 text-sm rounded-lg focus:ring-indigo-800 focus:border-indigo-800 block w-full p-2.5" placeholder="">
                 </div>
             </div>
         </div>
@@ -87,7 +87,7 @@
         <div class="relative col-span-full">
             <div class="grid grid-cols-1 gap-2">
                 <label for="datenschutz" class="p-0 block leading-none relative flex items-start">
-                    <input id="datenschutz" type="checkbox" name="datenschutz" class="peer absolute invisible" />
+                    <input x-model="value.datenschutz" id="datenschutz" type="checkbox" name="datenschutz" class="peer absolute invisible" />
                     <span class="border-neutral-400 border-4 border-solid peer-checked:border-indigo-500 absolute left-0 w-6 h-6 rounded block top-0"></span>
                     <span class="peer-checked:bg-indigo-500 left-[0.5rem] top-[0.5rem] w-2 h-2 absolute rounded block top-0"></span>
                     <span class="pl-8 pt-1 @sm:pt-0 text-zinc-100 text-sm @sm:text-base">
@@ -98,7 +98,26 @@
             </div>
         </div>
         <div class="flex justify-center col-span-full mt-5">
-            <button class="py-2 px-6 rounded bg-blue-900 hover:bg-blue-800 text-lg font-bold text-gray-300" type="submit">Absenden</button>
+            <button class="relative py-2 px-10 rounded bg-blue-900 hover:bg-blue-800 text-lg font-bold text-gray-300" type="submit">
+                <template x-if="sending">
+                    <div class="flex absolute left-2 top-0 h-full flex items-center">
+                        <span class="loader w-6 h-6"></span>
+                    </div>
+                </template>
+                Absenden
+            </button>
         </div>
     </form>
-</div>
+
+    <div class="text-green-100" :class="{'hidden': sent === false, 'grid': sent === true}">
+        <p class="text-xl">Vielen Dank für deine Anfrage.</p>
+        <p class="mt-2 text-lg">Wir haben dir eine Kopie deiner Anfrage per E-Mail geschickt. Wir werden uns in den nächsten 2-3 Werktagen melden. </p>
+
+        <div class="absolute flex items-center justify-center top-0 left-0 mt-[-13px] ml-[-13px] w-8 h-8">
+            <svg class="absolute top-0 left-0 flex-none rotate-[104deg] stroke-green-700 fill-green-900" viewBox="-21 -21 41 41">
+                <circle cx="0" cy="0" r="20" stroke-dasharray="83.77564 41.88782" stroke-width="1" stroke-location="inside"></circle>
+            </svg>
+            <svg class="relative size-4 text-green-500 fill-current"> <use xlink:href="{{ 'check' | sprite }}"></use> </svg>
+        </div>
+    </div>
+</section>

partials/anfrage/success.htm

@@ -1,3 +0,0 @@
-<div>
-    Vielen Dank für deine Anfrage. Wir haben dir eine Kopie deiner Anfrage per E-Mail geschickt. Wir werden uns in den nächsten 2-3 Werktagen melden.
-</div>

partials/headassets/default.htm

@@ -1,6 +1,6 @@
 {% if devServerIsRunning %}
-<script type="module" src="http://localhost:3000/@vite/client"></script>
+<script type="module" src="http://localhost:3000/themes/vite-tailwind/@vite/client"></script>
-<script type="module" src="http://localhost:3000/resources/js/app.js"></script>
+<script type="module" src="http://localhost:3000/themes/vite-tailwind/resources/js/app.js"></script>
 {% else %}
     {% for css in cssPaths %}
         <link rel="stylesheet" href="{{ ('assets/public/' ~ css)|theme }}">

resources/css/app.css

@@ -1,13 +1,13 @@
-@import "_tailwind-base.css";
+@import '_tailwind-base.css';
 /*@import "_custom-base-styles.css";*/
 
-@import "_tailwind-components.css";
+@import '_tailwind-components.css';
 /*@import '_custom-components.css';*/
 
-@import "_tailwind-utilities.css";
+@import '_tailwind-utilities.css';
 /*@import "_custom-utilities.css";*/
 
-@import "./fonts.css";
+@import './fonts.css';
 
 .outer-container {
     @apply py-10;
@@ -15,3 +15,21 @@
 .container {
     @apply max-w-6xl mx-auto px-5 md:px-10;
 }
+
+.loader {
+    border-radius: 50%;
+    display: inline-block;
+    border-top: 3px solid #fff;
+    border-right: 3px solid transparent;
+    box-sizing: border-box;
+    animation: rotation 0.8s linear infinite;
+}
+
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

resources/css/toastify.css

@@ -0,0 +1,82 @@
+/*!
+ * Toastify js 1.12.0
+ * https://github.com/apvarun/toastify-js
+ * @license MIT licensed
+ *
+ * Copyright (C) 2018 Varun A P
+ */
+
+.toastify {
+    padding: 12px 20px;
+    color: #ffffff;
+    display: inline-block;
+    position: fixed;
+    opacity: 0;
+    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
+    border-radius: 2px;
+    cursor: pointer;
+    text-decoration: none;
+    z-index: 2147483647;
+}
+
+.toastify.on {
+    opacity: 1;
+}
+
+.toast-close {
+    background: transparent;
+    border: 0;
+    color: white;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 1em;
+    opacity: 0.4;
+    padding: 0 5px;
+}
+
+.toastify-right {
+    right: 15px;
+}
+
+.toastify-left {
+    left: 15px;
+}
+
+.toastify-top {
+    top: -150px;
+}
+
+.toastify-bottom {
+    bottom: -150px;
+}
+
+.toastify-rounded {
+    border-radius: 25px;
+}
+
+.toastify-avatar {
+    width: 1.5em;
+    height: 1.5em;
+    margin: -7px 5px;
+    border-radius: 2px;
+}
+
+.toastify-center {
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    max-width: fit-content;
+    max-width: -moz-fit-content;
+}
+
+@media only screen and (max-width: 360px) {
+    .toastify-right,
+    .toastify-left {
+        margin-left: auto;
+        margin-right: auto;
+        left: 0;
+        right: 0;
+        max-width: fit-content;
+    }
+}

resources/icons/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>

resources/js/app.js

@@ -1,4 +1,3 @@
-import '../css/app.css';
 import Alpine from 'alpinejs';
 import Datepicker from 'flowbite-datepicker/Datepicker';
 import de from '../../node_modules/flowbite-datepicker/js/i18n/locales/de.js';
@@ -6,6 +5,11 @@ Datepicker.locales.de = de.de;
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 dayjs.extend(customParseFormat);
+import axios from 'axios';
+import {error} from './toast.js';
+
+import '../css/toastify.css';
+import '../css/app.css';
 
 function initDatepicker(el) {
     new Datepicker(el, {
@@ -23,14 +27,61 @@ document.querySelectorAll('[datepicker]').forEach((el) => initDatepicker(el));
 
 window.Alpine = Alpine;
 Alpine.data('form', () => ({
-    birthday: null,
+    sent: false,
+    sending: false,
+    value: {
+        reason: '',
         date: null,
+        guests: '',
+        birthday: null,
+        firstname: '',
+        lastname: '',
+        address: '',
+        zip: '',
+        location: '',
+        phone: '',
+        email: '',
+        misc: '',
+        parent_email: '',
+        parent_phone: '',
+        parent_name: '',
+        datenschutz: false,
+    },
     isUnder18: function () {
-        if (!this.birthday || !this.date) {
+        if (!this.value.birthday || !this.value.date) {
             return false;
         }
 
-        return dayjs(this.birthday, 'DD.MM.YYYY').add(18, 'year').isAfter(dayjs(this.date, 'DD.MM.YYYY'));
+        return dayjs(this.value.birthday, 'DD.MM.YYYY').add(18, 'year').isAfter(dayjs(this.value.date, 'DD.MM.YYYY'));
+    },
+    submit: async function () {
+        if (this.sending === true) {
+            return;
+        }
+        this.sending = true;
+        try {
+            await axios.post(window.location.pathname, this.value, {
+                headers: {
+                    'X-Winter-Request-Handler': 'anfrage::onSubmit',
+                    'X-Requested-With': 'XMLHttpRequest',
+                },
+            });
+            this.sent = true;
+            window.scrollTo({
+                top: this.$el.getBoundingClientRect().top + window.scrollY - 50,
+                behaviour: 'smooth',
+            });
+            this.sending = false;
+        } catch (e) {
+            this.sending = false;
+            if (!e instanceof axios.AxiosError || !e.response || !e.response.data || !e.response.data['X_WINTER_ERROR_FIELDS']) {
+                throw e;
+            }
+            const errors = e.response.data['X_WINTER_ERROR_FIELDS'];
+            Object.keys(errors).forEach((k) => {
+                errors[k].forEach((msg) => error(msg));
+            });
+        }
     },
 }));
 

resources/js/toast.js

@@ -0,0 +1,10 @@
+import Toastify from 'toastify-js';
+
+export function error(message) {
+    Toastify({
+        text: message,
+        gravity: 'bottom', // `top` or `bottom`
+        className: 'bg-red-800 glow-red-100 text-red-100 text-lg font-semibold max-w-[95vw] md:max-w-[40vw] ring-2 ring-red-500',
+        onClick: function () {}, // Callback after click
+    }).showToast();
+}

tailwind.config.js

@@ -1,17 +1,12 @@
 module.exports = {
-  content: ["./**/*.htm", "./node_modules/flowbite/**/*.js"],
+    content: ['./**/*.htm', './node_modules/flowbite/**/*.js', './resources/js/toast.js'],
-  darkMode: "class",
+    darkMode: 'class',
     theme: {
         extend: {
             fontFamily: {
-        nunito: ["Nunito", "sans-serif"],
+                nunito: ['Nunito', 'sans-serif'],
             },
         },
     },
-  plugins: [
+    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography'), require('flowbite/plugin'), require('tailwind-clip-path')],
-    require("@tailwindcss/forms"),
-    require("@tailwindcss/typography"),
-    require("flowbite/plugin"),
-    require("tailwind-clip-path"),
-  ],
 };

vite.config.js

@@ -1,19 +1,16 @@
-import liveReload from "vite-plugin-live-reload";
+import liveReload from 'vite-plugin-live-reload';
-import VitePluginSvgSpritemap from "@spiriit/vite-plugin-svg-spritemap";
+import VitePluginSvgSpritemap from '@spiriit/vite-plugin-svg-spritemap';
 
-export default ({ command }) => {
+export default ({command}) => {
     return {
-    base:
+        base: command === 'serve' ? '/themes/vite-tailwind/' : '/themes/vite-tailwind/assets/public/',
-      command === "serve"
+        publicDir: 'resources/public',
-        ? "/themes/vite-tailwind/"
-        : "/themes/vite-tailwind/assets/public/",
-    publicDir: "resources/public",
         build: {
-      manifest: "manifest.json",
+            manifest: 'manifest.json',
-      outDir: "assets/public",
+            outDir: 'assets/public',
-      assetsDir: "",
+            assetsDir: '',
             rollupOptions: {
-        input: "resources/js/app.js",
+                input: 'resources/js/app.js',
             },
         },
         server: {
@@ -21,11 +18,8 @@ export default ({ command }) => {
             port: 3000,
         },
         resolve: {
-      extensions: [".js", ".mjs"],
+            extensions: ['.js', '.mjs'],
         },
-    plugins: [
+        plugins: [liveReload('./**/*.htm'), VitePluginSvgSpritemap('./resources/icons/*.svg')],
-      liveReload("./**/*.htm"),
-      VitePluginSvgSpritemap("./resources/icons/*.svg"),
-    ],
     };
 };