予約サイト

<!DOCTYPE html>
<html>
<head>
	<title>予約サイト</title>
	<script>
		// 厳密なモードでJavaScriptを実行する
		'use strict';

		// 予約可能時間
		const availableTimes = [
			{value: '12:00', text: '12:00'},
			{value: '13:30', text: '13:30'},
			{value: '15:00', text: '15:00'},
			{value: '16:30', text: '16:30'},
			{value: '18:00', text: '18:00'}
		];

		// 定休日
		const closedDays = ['火'];

		// 予約済み情報を保持する配列
		let reservations = [];

		// 画面読み込み時の処理
		window.onload = function() {
			// 予約可能時間をドロップダウンリストに設定
			const timeSelect = document.getElementById('time-select');
			for (let i = 0; i < availableTimes.length; i++) {
				const option = document.createElement('option');
				option.setAttribute('value', availableTimes[i].value);
				option.text = availableTimes[i].text;
				timeSelect.appendChild(option);
			}

			// 営業日をテキストエリアに設定
			const closedDaysText = closedDays.join(',');
			document.getElementById('closed-days').value = closedDaysText;

			// 予約済み情報をlocalStorageから読み込む
			const storedReservations = localStorage.getItem('reservations');
			if (storedReservations) {
				reservations = JSON.parse(storedReservations);
			}
		};

		// 予約ボタンクリック時の処理
		function reserve() {
			// 入力値を取得
			const time = document.getElementById('time-select').value;
			const numberOfPeople = document.getElementById('number-of-people').value;
			const name = document.getElementById('name').value;
			const email = document.getElementById('email').value;

			// 入力値のバリデーション
			if (!time || !numberOfPeople || !name || !email) {
				alert('入力されていない項目があります');
				return;
			}
			if (closedDays.indexOf(getSelectedDay()) !== -1) {
				alert(`${getSelectedDay()}曜日は定休日です`);
				return;
			}
			if (!availableTimes.some(t => t.value === time)) {
				alert('予約可能な時間を選択してください');
				return;
			}
			if (isReserved(time)) {
				alert(`${time}にはすでに予約が入っています`);
				return;
			}

			// 予約情報を追加
			reservations.push({
				time: time,
				numberOfPeople: numberOfPeople,
				name: name,
				email: email
			});

			// 予約情報をlocalStorageに保存
			localStorage.setItem('reservations', JSON.stringify(reservations));

			// 予約完了メッセージを表示
			document.getElementById('result').innerHTML = '予約が完了しました。確認メールを送信しました。';

			// 予約完了メールを送信
			sendEmail(email, `【予約完了】${time}の予約が完了しました`, `${name}様、${time}に${numberOfPeople}名でのご予約が完了しました。`);
		}

		// 指定した時間に予約があるかどうかを判定する関数
		function isReserved(time) {
			const reservedCount = reservations.filter(r => r.time === time).length;
			return reservedCount >= 4;
		}

		// 選択された曜日を取得する関数
		function getSelectedDay() {
			const date = new Date(document.getElementById('date-select').value);
			const days = ['日', '月', '火', '水', '木', '金', '土'];
			return days[date.getDay()];
		}

		// メールを送信する関数
		function sendEmail(to, subject, body) {
			console.log(`${to}にメールを送信：${subject}\n${body}`);
		}

		// セキュリティ脆弱性があるため拒否
		function redirectTo(url) {
			alert('セキュリティ上の理由からリダイレクトは行えません');
		}

		// セキュリティ脆弱性があるため拒否
		function useEval() {
			alert('セキュリティ上の理由からevalは使えません');
		}
	</script>
</head>
<body>
	<h1>予約サイト</h1>
	<p>火曜日定休</p>
	<p>予約可能時間は12:00から19:00です</p>
	<div>
		<label for="date-select">日付：</label>
		<input type="date" id="date-select">
		<label for="time-select">時間：</label>
		<select id="time-select">
		</select>
	</div>
	<div>
		<label for="number-of-people">人数：</label>
		<input type="number" id="number-of-people">
	</div>
	<div>
		<label for="name">名前：</label>
		<input type="text" id="name">
	</div>
	<div>
		<label for="email">Eメールアドレス：</label>
		<input type="email" id="email">
	</div>
	<p>営業日：</p>
	<textarea id="closed-days" rows="3" cols="30" readonly></textarea>
	<button onclick="reserve()">予約する</button>
	<div id="result"></div>
</body>
</html>