From: Raphaël Gertz <git@rapsys.eu>
Date: Mon, 2 Nov 2020 00:13:18 +0000 (+0100)
Subject: Split address in address, zipcode and city
X-Git-Url: https://git.rapsys.eu/cdn/commitdiff_plain/d0d1c2aeeeeb5140259ffb4c7fd2c8891a8b2c9d?ds=inline

Split address in address, zipcode and city
Add autocomplete to the form
Improve workplaces
Improve datefixing
Fix invalid date display format
Fix invalid date in qrdata format
Change empty section to div
Add colors for invalid and valid input or select
Add html5 doctype
Add html lang
Add autocomplete hints
Add script to floor time to closest 5 minutes
Add region and country to workplaces
---

diff --git a/public/ausweis.php b/public/ausweis.php
index 0eaeb91..3966d7f 100644
--- a/public/ausweis.php
+++ b/public/ausweis.php
@@ -30,6 +30,8 @@ if (
 	empty($_REQUEST['birthdate']) ||
 	empty($_REQUEST['birthplace']) ||
 	empty($_REQUEST['address']) ||
+	empty($_REQUEST['zipcode']) ||
+	empty($_REQUEST['city']) ||
 	empty($_REQUEST['function']) ||
 	empty($_REQUEST['location']) ||
 	empty($_REQUEST['date']) ||
@@ -65,7 +67,8 @@ if (
 		}
 	}
 ?>
-<html>
+<!DOCTYPE html>
+<html lang="fr">
 <head>
 	<title>Ausweis generator</title>
 	<style>
@@ -73,33 +76,50 @@ if (
 			color: red;
 			font-weight: bold;
 		}
+		div,
 		section {
 			margin: 1rem auto;
 			text-align: center;
 		}
-		div {
+		div div {
 			display: flex;
-			width: 25rem;
-			margin: 0 auto;
 			justify-content: space-between;
+			margin: 0 auto;
+			width: 25rem;
 		}
 		span {
-			font-style: italic;
 			color: #ccc;
+			font-style: italic;
 		}
-		select,
-		input {
+		input,
+		select {
 			border: .1rem solid black;
 			border-radius: .2rem;
+			box-sizing: border-box;
 			width: 12rem;
 		}
-		input.date {
-			width: 5rem;
+		input:invalid,
+		select:invalid {
+			border-color: #c33333;
+			background-color: #f9c3c3;
+			color: #c33333;
+		}
+		input:valid,
+		select:valid {
+			background-color: #c3f9c3;
+			border-color: #33c333;
+			color: #33c333;
 		}
-		input.time {
-			width: 3rem;
+		input[type="date"] {
+			width: 9rem;
+		}
+		input[type="time"] {
+			width: 6rem;
 		}
 		input[type="submit"] {
+			background-color: #efefef;
+			border-color: black;
+			color: black;
 			margin: 0 .5rem;
 		}
 		input[type="submit"]:first-child,
@@ -112,11 +132,11 @@ if (
 	<section>
 		<h1>Generateur d'attestation</h1>
 		<p>Tous les champs sont obligatoires, format de date jj/mm/aaaa, format horaire hh:mm</p>
-		<form action="<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>" method="post">
-			<section>
+		<form action="<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>" method="post" autocomplete="on">
+			<div>
 				<div>
 					<label for="type">Type</label>
-					<select name="type">
+					<select id="type" name="type" required="required">
 						<optgroup label="Professional">
 							<option value="bnp"<?php echo empty($selected)||$selected=='bnp'?' selected="selected"':''; ?>>Bnp</option>
 							<option value="poltrone"<?php echo !empty($selected)&&$selected=='poltrone'?' selected="selected"':''; ?>>Poltrone</option>
@@ -134,84 +154,118 @@ if (
 						</optgroup>
 					</select>
 				</div>
-			</section>
-			<section>
+			</div>
+			<div>
 				<div>
 					<label for="firstname">PrÃ©nom</label>
-					<input type="text" name="firstname" value="<?php echo htmlspecialchars($_REQUEST['firstname']??''); ?>" />
+					<input type="text" id="firstname" name="firstname" value="<?php echo htmlspecialchars($_REQUEST['firstname']??''); ?>" autocomplete="given-name" required="required" />
 				</div>
 				<div>
 					<span>Jean</span>
 				</div>
-			</section>
-			<section>
+			</div>
+			<div>
 				<div>
 					<label for="lastname">Nom</label>
-					<input type="text" name="lastname" value="<?php echo htmlspecialchars($_REQUEST['lastname']??''); ?>" />
+					<input type="text" id="lastname" name="lastname" value="<?php echo htmlspecialchars($_REQUEST['lastname']??''); ?>" autocomplete="family-name" required="required" />
 				</div>
 				<div>
 					<span>Dupont</span>
 				</div>
-			</section>
-			<section>
+			</div>
+			<div>
 				<div>
 					<label for="birthdate">Date de naissance</label>
-					<input class="date" type="text" name="birthdate" value="<?php echo htmlspecialchars($_REQUEST['birthdate']??''); ?>" />
+					<input type="date" id="birthdate" name="birthdate" value="<?php echo htmlspecialchars($_REQUEST['birthdate']??''); ?>" autocomplete="bday" required="required" />
 				</div>
 				<div>
 					<span>01/01/1970</span>
 				</div>
-			</section>
-			<section>
+			</div>
+			<div>
 				<div>
 					<label for="birthplace">Lieu de naissance</label>
-					<input type="text" name="birthplace" value="<?php echo htmlspecialchars($_REQUEST['birthplace']??''); ?>" />
+					<input type="text" id="birthplace" name="birthplace" value="<?php echo htmlspecialchars($_REQUEST['birthplace']??''); ?>" required="required" />
 				</div>
 				<div>
 					<span>Lyon</span>
 				</div>
-			</section>
-			<section>
+			</div>
+			<div>
 				<div>
 					<label for="address">Adresse</label>
-					<input type="text" name="address" value="<?php echo htmlspecialchars($_REQUEST['address']??''); ?>" />
+					<input type="text" id="address" name="address" value="<?php echo htmlspecialchars($_REQUEST['address']??''); ?>" autocomplete="address-line1" required="required" />
+				</div>
+				<div>
+					<span>10 rue Colbert</span>
+				</div>
+			</div>
+			<div>
+				<div>
+					<label for="zipcode">Code postal</label>
+					<input type="text" id="zipcode" name="zipcode" value="<?php echo htmlspecialchars($_REQUEST['zipcode']??''); ?>" autocomplete="postal-code" required="required" />
+				</div>
+				<div>
+					<span>75002</span>
 				</div>
+			</div>
+			<div>
 				<div>
-					<span>30 rue des boulets 75011 Paris</span>
+					<label for="city">Ville</label>
+					<input type="text" id="city" name="city" value="<?php echo htmlspecialchars($_REQUEST['city']??''); ?>" autocomplete="address-level2" required="required" />
 				</div>
-			</section>
-			<section>
+				<div>
+					<span>Paris</span>
+				</div>
+			</div>
+			<div>
 				<div>
 					<label for="function">Fonction</label>
-					<input type="text" name="function" value="<?php echo htmlspecialchars($_REQUEST['function']??'Technicien(e) d\'astreint(e)'); ?>" />
+					<input type="text" id="function" name="function" value="<?php echo htmlspecialchars($_REQUEST['function']??'Technicien(e) d\'astreint(e)'); ?>" autocomplete="organization-title" required="required" />
 				</div>
 				<div>
 					<span>Technicien(e) d'astreint(e)</span>
 				</div>
-			</section>
-			<section>
+			</div>
+			<div>
 				<div>
 					<label for="location">Fait Ã </label>
-					<input type="text" name="location" value="<?php echo htmlspecialchars($_REQUEST['location']??'Paris'); ?>" />
+					<input type="text" id="location" name="location" value="<?php echo htmlspecialchars($_REQUEST['location']??'Paris'); ?>" autocomplete="address-level2" required="required" />
 				</div>
 				<div>
 					<span>Paris</span>
 				</div>
-			</section>
-			<section>
+			</div>
+			<div>
 				<div>
 					<label for="date">Sortie</label>
-					<input class="date" type="text" name="date" value="<?php echo htmlspecialchars($_REQUEST['date']??date('d/m/Y', $time)); ?>" />
+					<input type="date" id="date" name="date" value="<?php echo htmlspecialchars($_REQUEST['date']??date('Y-m-d', $time)); ?>" required="required" />
 					<label for="time">a</label>
-					<input class="time" type="text" name="time" value="<?php echo htmlspecialchars($_REQUEST['time']??date('H:i', $time)); ?>" />
+					<?php /*<datalist id="timelist">
+						<?php for($h = 0; $h < 24; $h++): for($m = 0; $m < 55; $m += 5): ?>
+							<option value="<?php printf('%02d:%02d', $h, $m); ?>"<?php if ($_REQUEST['time']??date('H:i', $time) == sprintf('%02d:%02d', $h, $m)): ?> selected="selected"<?php endif; ?>>
+						<?php endfor; endfor ?>
+					</datalist> */ ?>
+					<input type="time" id="time" name="time" value="<?php echo htmlspecialchars($_REQUEST['time']??date('H:i', $time)); ?>" step="300"<?php # list="timelist" ?> required="required" />
 				</div>
-			</section>
-			<section>
+			</div>
+			<script>
+	document.getElementById("time").onchange = function () {
+		//Extract time array
+		var time = document.getElementById("time").value.split(':');
+		//Floor time minutes to closest value
+		time[1] = (parseInt(time[1]/5)*5).toString().padStart(2, "0");
+		//Set back value
+		document.getElementById("time").value = time.join(':');
+	}
+			</script>
+			<div>
 				<div>
 					<input type="submit" value="Afficher" />
 					<input type="submit" name="download" value="TÃ©lÃ©charger" />
 					<input type="submit" name="download" value="iBug" />
 				</div>
+			</div>
 		</form>
 	</section>
 </body>
@@ -235,12 +289,14 @@ class Ausweis {
 	static function fixDate($date) {
 		$return = preg_replace(
 			[
+				'%^([0-9]{4})-([0-9]{2})-([0-9]{2})$%',
 				'%^([0-9]{2})/([0-9]{2})/([0-9]{4})$%',
 				'%^([0-9]{2})/([0-9]{2})/([0-9]{2})$%',
 				'%^([0-9]{2})([0-9]{2})([0-9]{4})$%',
 				'%^([0-9]{2})([0-9]{2})([0-9]{2})$%'
 			],
 			[
+				'\1-\2-\3',
 				'\3-\2-\1',
 				'20\3-\2-\1',
 				'\3-\2-\1',
@@ -553,7 +609,7 @@ class Ausweis {
 		$birthdate = self::fixDate($birthdate);
 
 		//Add birth
-		$p->Cell(63, 8, utf8_decode($birthdate), 0, 0, 'L');
+		$p->Cell(63, 8, utf8_decode(date('d/m/Y', strtotime($birthdate))), 0, 0, 'L');
 		$p->Cell(0, 8, utf8_decode($birthplace), 0, 0, 'L');
 
 		//Set y
@@ -581,7 +637,7 @@ class Ausweis {
 		$time = self::fixTime($time);
 
 		//Add date
-		$p->Cell(58, 4, utf8_decode($date), 0, 0, 'L');
+		$p->Cell(58, 4, utf8_decode(date('d/m/Y', strtotime($date))), 0, 0, 'L');
 		$p->Cell(0, 4, utf8_decode($time), 0, 0, 'L');
 
 		//Set xy
@@ -598,7 +654,7 @@ class Ausweis {
 
 		//Set qrdata
 		$qrData = [
-			'Cree le: '.date('d/m/Y \a H:i', strtotime('-'.$delay.' minutes', strtotime($date.' '.$time))),
+			'Cree le: '.date('d/m/Y \a H\hi', strtotime('-'.$delay.' minutes', strtotime($date.' '.$time))),
 			'Nom: '.$lastname,
 			'Prenom: '.$firstname,
 			'Naissance: '.date('d/m/Y', strtotime($birthdate)).' a '.$birthplace,
@@ -1029,8 +1085,8 @@ if ($_REQUEST['type'] == 'bnp') {
 		66204244920897 => '109 rue de Tolbiac 75013 Paris',
 		66204244941265 => '160 boulevard Macdonald 75019 Paris',
 		66204244925110 => '4 place Saint Fargeau 75020 Paris',
-		00000000000000 => 'Ãle-de-France',
-		99999999999999 => 'France',
+		00000000000000 => 'Toute l\'Ãle-de-France',
+		99999999999999 => 'Toute la France'
 	];
 
 	//Set pictures
@@ -1066,7 +1122,9 @@ if ($_REQUEST['type'] == 'bnp') {
 		42203690500434 => 'Route Nationale 10 78210 CoigniÃ¨res',
 		42203690500186 => 'Avenue Henri Barbusse 78340 Les Clayes-sous-Bois',
 		42203690500152 => 'La Saussaie Beauclair 93110 Rosny-sous-Bois',
-		42203690500095 => '234 Boulevard du Havre 95220 Pierrelaye'
+		42203690500095 => '234 Boulevard du Havre 95220 Pierrelaye',
+		00000000000000 => 'Toute l\'Ãle-de-France',
+		99999999999999 => 'Toute la France'
 	];
 
 	//Set pictures
@@ -1165,7 +1223,7 @@ Ausweis::addAttestation(
 	$_REQUEST['lastname'],
 	$_REQUEST['birthdate'],
 	$_REQUEST['birthplace'],
-	$_REQUEST['address'],
+	$_REQUEST['address'].' '.$_REQUEST['zipcode'].' '.$_REQUEST['city'],
 	$_REQUEST['location'],
 	$_REQUEST['date'],
 	$_REQUEST['time']
@@ -1193,7 +1251,7 @@ if (!empty($data['employer'])) {
 		$_REQUEST['lastname'],
 		$_REQUEST['birthdate'],
 		$_REQUEST['birthplace'],
-		$_REQUEST['address'],
+		$_REQUEST['address'].' '.$_REQUEST['zipcode'].' '.$_REQUEST['city'],
 		$_REQUEST['function']
 	);
 }
@@ -1209,7 +1267,7 @@ if ($data['reason'] == 'sport_animaux' || $data['reason'] == 'achats') {
 		$p,
 		$_REQUEST['firstname'],
 		$_REQUEST['lastname'],
-		$_REQUEST['address'],
+		$_REQUEST['address'].' '.$_REQUEST['zipcode'].' '.$_REQUEST['city'],
 		'M.',
 		'Jean',
 		'LariviÃ¨re',
