zoomyboy
/
wn-discoteam-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add birthday validation
continuous-integration/drone/push Build is passing Details

This commit is contained in:
philipp lang 2024-03-05 11:41:34 +01:00
parent b36ca6af69
commit 1c8c8a5c3f
4 changed files with 89 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
package-lock.json generated
View File

@ -11,8 +11,11 @@
"dependencies": {
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.0",
"alpinejs": "^3.13.5",
"dayjs": "^1.11.10",
"dotenv": "^10.0.0",
"flowbite": "^2.2.1"
"flowbite": "^2.2.1",
"flowbite-datepicker": "^1.2.6"
},
"devDependencies": {
"autoprefixer": "^10.4.0",
@ -157,6 +160,27 @@
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || insiders"
}
},
"node_modules/@vue/reactivity": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
"integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
"dependencies": {
"@vue/shared": "3.1.5"
}
},
"node_modules/@vue/shared": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
"integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
},
"node_modules/alpinejs": {
"version": "3.13.5",
"resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.13.5.tgz",
"integrity": "sha512-1d2XeNGN+Zn7j4mUAKXtAgdc4/rLeadyTMWeJGXF5DzwawPBxwTiBhFFm6w/Ei8eJxUZeyNWWSD9zknfdz1kEw==",
"dependencies": {
"@vue/reactivity": "~3.1.1"
}
},
"node_modules/ansi-regex": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
@ -405,6 +429,11 @@
"node": ">=4"
}
},
"node_modules/dayjs": {
"version": "1.11.10",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
"integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
},
"node_modules/didyoumean": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@ -752,6 +781,14 @@
"mini-svg-data-uri": "^1.4.3"
}
},
"node_modules/flowbite-datepicker": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/flowbite-datepicker/-/flowbite-datepicker-1.2.6.tgz",
"integrity": "sha512-UbU/xXs9HFiwWfL4M1vpwIo8EpS0NUQSOvYnp0Z9u3N118nU7lPFGoUOq7su9d0aOJy9FssXzx1SZwN8MXhE1g==",
"dependencies": {
"flowbite": "^2.0.0"
}
},
"node_modules/foreground-child": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",

5
package.json
View File

@ -24,7 +24,10 @@
"dependencies": {
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.0",
"alpinejs": "^3.13.5",
"dayjs": "^1.11.10",
"dotenv": "^10.0.0",
"flowbite": "^2.2.1"
"flowbite": "^2.2.1",
"flowbite-datepicker": "^1.2.6"
}
}

12
partials/anfrage/default.htm
View File

@ -1,4 +1,6 @@
<div id="anfrageform">
<div id="anfrageform" x-data="form">
<form data-request="anfrage::onSubmit" data-request-flash class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-3">
<div>
@ -8,7 +10,7 @@
<div>
<label for="date" class="block text-sm font-medium text-gray-900 dark:text-white">Gewünschtes Datum</label>
<input id="date" name="date" datepicker datepicker-autohide datepicker-format="dd.mm.yyyy" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
<input x-model="date" id="date" name="date" datepicker class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
</div>
<div>
@ -18,7 +20,7 @@
<div>
<label for="birthday" class="block text-sm font-medium text-gray-900 dark:text-white">Geburtsdatum</label>
<input id="birthday" name="birthday" datepicker datepicker-autohide datepicker-format="dd.mm.yyyy" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
<input x-model="birthday" id="birthday" name="birthday" datepicker class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light" placeholder="">
</div>
<div>
@ -61,6 +63,10 @@
<textarea id="misc" name="misc" rows="5" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light"></textarea>
</div>
<div x-show="isUnder18" class="col-span-full text-sm text-red-900 items-center p-4 border-2 rounded form-group shadow-sm group bg-red-200 border-red-600">
<span class="font-bold">Bitte beachte:</span> Bei Veranstaltungen mit nicht volljährigen Veranstaltern (z.B. 18. Geburtstag) muss eine Person über 35 Jahre (z.B. Erziehungsberechtigte*r) durchgehend anwesend sein.
</div>
<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">

40
resources/js/app.js
View File

@ -1,4 +1,40 @@
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";
Datepicker.locales.de = de.de;
import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
dayjs.extend(customParseFormat);
import "flowbite/dist/flowbite.min.js";
import "flowbite/dist/datepicker.js";
function initDatepicker(el) {
new Datepicker(el, {
autohide: true,
format: "dd.mm.yyyy",
language: "de",
update: true,
});
el.addEventListener("changeDate", function (event) {
event.target.dispatchEvent(new Event("input"));
});
}
document.querySelectorAll("[datepicker]").forEach((el) => initDatepicker(el));
window.Alpine = Alpine;
Alpine.data("form", () => ({
birthday: null,
date: null,
isUnder18: function () {
if (!this.birthday || !this.date) {
return false;
}
console.log(dayjs(this.birthday, "DD.MM.YYYY").add(18, "year"));
return dayjs(this.birthday, "DD.MM.YYYY")
.add(18, "year")
.isAfter(dayjs(this.date, "DD.MM.YYYY"));
},
}));
Alpine.start();