From d0d1c2aeeeeb5140259ffb4c7fd2c8891a8b2c9d Mon Sep 17 00:00:00 2001
From: =?utf8?q?Rapha=C3=ABl=20Gertz?= <git@rapsys.eu>
Date: Mon, 2 Nov 2020 01:13:18 +0100
Subject: [PATCH 1/1] 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

---
 public/ausweis.php | 160 ++++++++++++++++++++++++++++++---------------
 1 file changed, 109 insertions(+), 51 deletions(-)
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',
-- 
2.41.1

