Ajaxで受け取ったテーブルの情報から時間比較をしたい。

Question

過去の質問

日時と場所を指定する利用登録に関するテーブル定義とリレーションについて

Laravelにおいて外部キーを主キーとしているテーブルとで適切なリレーションができているかわからない。

Laravel歴1ヶ月弱です。
認証と基本のCRUDを学習してきて、現在、就活に向けて成果物を作るにあたって施設などの利用申請（予約申請）のシステムを簡単にしたものを制作しています。
これまでテーブルに関しては上記のような質問をさせていただきここまで進めてきています。

環境

Laravel 6.5.0
Homestead

質問したいこと

flatpickrなどのカレンダーライブラリを用いて、下記のアクティビティ図のような処理を想定した処理を書いているのですが、時間帯選択のフォームは最初表示されていない状態で施設名と日付をサーバーに送信したあとにアクティビティ図のような処理を適用したあとで、時間帯選択のフォームをフェードインのようなアニメーションで表示させたいと思い、Ajaxを使った処理を書いていたのですがJavascriptに慣れていないので、PHP側から帰ってきた後の処理を考えていたところ詰まってしまったため今回質問させていただきました。

具体的には他のユーザーがその日の施設の予約を取る際に、別のユーザーがすでに同日・同施設に予約を入れている場合、その時間帯を選択できないようにしたいので、取得してきた各予約情報の中から利用開始時間と利用終了時間を参照して、それを元に例えばflatpickrなら下記のminTimeやmaxTimeに設定する値を求めたいがその書き方がわからないといったといころです。

const config = {
  enableTime: true,
// フォームで選択できる時間の範囲を以下の通りにする
  minTime: "16:00",
  maxTime: "22:00"
}
flatpickr('.flatpickr', config);

処理がまだ定まってないのでまだviewを作っていないのですが
flatpickrなどのカレンダー・時刻選択のライブラリを使用したものを含めて

・施設名選択
・日付選択
（ここで一旦送信ボタンを押させてAjaxを発火させ、以下の2つのinputタグを表示するようにする）

・利用開始時間選択
・利用終了時間選択
（ここで送信ボタンを押させて、以下の通りで予約を確定しますか？ というページへリダイレクトさせる）

と4つのinputタグを用意して、製作する予定です。
プログラミング歴も浅く、初めての製作なので、そもそもコードとかに間違いがあったり、処理的に問題がある場合は遠慮なく指摘していただけると助かります。
そのため、リーダブルとは言えないことを承知の上で、かなりコメントアウトを残したままのコードになっています。

質問に際してやったこと・作ったもの

####今回質問したい箇所に関わるアクティビティ図

ER図

JS側で書いているところ（途中）

// 利用する日付と施設名を選択して、submitボタンをonclickすると、ajax発火

$(document).on("click", ".date-select", function() {
	init_set_reservations();


});


// 1で発火したajaxでデータベースにアクセスして、テーブルから取得した日付の予約情報を取り出す。

function init_set_reservations () {

	const server_url = "http://localhost:8000/"; // 使用しているサーバーのURLを定義


		// ajax通信、GETでフォームのデータを送信して、PHP側でデータベースからデータを取得するときの検索キーワードにする。
	$.ajax({
		type:"GET",
		url: server_url + "get-reservation.php";
		datatype:'json',
		data:{
			date:$('#dateinfo').val(),　// 日付選択のためのinputタグからの情報
			facility_name:$('#facility_name').val() // 施設名選択のためのinputタグからの情報

		}
	}).done(function(data) {	


		/*
			受け取った情報を元にminTimeとmaxtimeを算出する。
			その後、フェードインで時間帯選択フォームを表示させる。（クラス切り替えでcssを切り替える）
			時間の範囲はmintimeとmaxtime。
		 */

		// JSONをパースする(JSオブジェクトに変換)
		
		let obj = {};
		let obj = Json.parse(data);

		// JSオブジェクトを配列にして返し、さらにキーごとの配列を分ける。
		let objlist = Object.entries(obj).map(([key, value]) => ({[key]: value}));

		// 上記の配列からstart_timeとend_timeの値を取り出す。
		
		let array_start_time = objlist.filter(function(value, start_time, thisArray) {
			return array_start_time;
		});	

		let array_end_time = objlist.filter(function(value, end_time, thisArray) {
			return array_start_time;
		});

		/*
		得られたstatt_timeを比較してminTimeを、end_timeでMaxTimeを算出したい。

		 */

	}).fail(function(jqXHR, textStatus, errorThrown ) {
				$("#span1").text(jqXHR.status); 
				$("#span2").text(textStatus); 
				$("#span3").text(errorThrown);

		}).always(function(){
				$("#span6").text("complete");
				
	});
}

php側の処理

<?php 

// 試しに書いている状態なのでメソッド名などは仮置。modelとcontrollerに後で処理を分ける


// Ajaxから送信されてきたデータは例としては下記のようになっていると想定
	// $_GET['date'] = '2019-11-30';
	// $_GET['facility_name'] = '多目的室A';

	public function test(){ 

		if(isset($_GET['date']) && isset($_GET['facility_name'])) {

		// セッションに保存されている情報を変数に代入。
	
		$reservedates = $_GET['date'];
		$facility_name = $_GET['facility_name'];

		/*facility_nameからfacility_idを参照し、それを元に予約情報を抽出。さらに特定のカラムのレコードに絞ってそれを連想配列の形で取得する。
		今回はstart_timeとend_timeを取得したい。
		*/
		
		$start_times = \App\Reserve::whereHas('Facility', function($query){
            $query->where('facility_name', $facility_name)->whereDate('start_time', $reservedates);
                })->pluck('start_time','id');

		$end_times = \App\Reserve::whereHas('Facility', function($query){
            $query->where('facility_name', $facility_name)->whereDate('end_time', $reservedates);
                })->pluck('end_time','id');

		/*しかし、上記のコードだとjson_encodeの際に困ったので、同じようにfacility_nameからfacility_idを参照し、それと指定された日時を元に予約情報を抽出。その中からid、start_time、end_timeのカラムの値をすべて取得し、配列にする。tinkerでのテストはこちらの関数を実行した。
		where()系の第2引数は本番だと変数。
		*/
		
		$reserveinfo = \App\Reserve::whereHas('Facility', function($query){
            $query->where('facility_name', 'test1')->whereDate('start_time', '2019-11-30')->whereDate('end_time', '2019-11-30');
                })->select('id', 'start_time', 'end_time')->get()->all();

		/* 注釈
		 $array_reserveinfo  = $reserveinfo->all(); // all()はCollectionのメソッドでクエリビルダとしてのget()とは違うので記述する場合はさらに別の変数にエスケープしたほうがいい？

		*/

		// 取得したデータを連想配列にしてJSONにしてAjaxに渡す（HTTPの処理なのでcontrollerに記述する)
		
		$json = json_encode($reserveinfo, JSON_PRETTY_PRINT);
		
 		} else {
      	echo 'FAIL TO AJAX REQUEST';
 	}
 }
}

PHPのコードをtinkerで試した結果

start_timeだけ取得する関数のテスト

指定された日付の予約情報をすべて取得する関数のテスト

追記

view

<body>
<div id="app">
	<div clas="container">
		<div class="row justify-content-center">
			<div class="col-md-8">
				<div class="card">
					<div class='card-hearder'>{{ __('get-reservation' )}}</div>

					<div class="card-body">
						<form method="GET" action="javascript:void(0);" id="test">
							<div class="form-group row">
								<label for="facility_name" class="col-md-4 col-form-label text-md-right">{{ __('facility_name' )}}</label>

								<div class="col-md-6">
									<select class="form-control" id="facility_name" name="facility_name">
										<option value="blank" selected="selected">選択してください</option>
										<option value="test1">test1</option>
										<option value="test2">test2</option>
										<option value="test3">test4</option>
									</select>
									
								</div>
							</div>

							<div class="form-group row">
								<label for="dates" class="col-md-4 col-form-label text-md-right">{{ __('dates' )}}</label>

								<div class="col-md-6">
									<input type="text" class="form-control dateinfo" placeholder="Select Date.." id="dateinfo" name="dateinfo" readonly="readonly">
									
								</div>
							</div>

							<div class="form-group row">
                            <div class="col-md-8 offset-md-4">
                                <button type="submit" class="btn btn-primary" id="date-select">
                                    {{ __('submit') }}
                                </button>
						
							</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
$(function () {

$(document).on("click", "#date-select", function() {
	init_set_reservations();
});

// 1で発火したajaxでデータベースにアクセスして、テーブルから取得した日付の予約情報を取り出す。

function init_set_reservations () {

	const server_url = "http://localhost:8000/"; // 使用しているサーバーのURLを定義


	// フォームで送信されるデータの確認
	var formData = $('#test').serialize();
	console.log(formData);

	// Ajax。今回は非同期で行いたい。
	
	$.ajax({
		type:'GET',
		url: server_url + "/get-reserve",
		datatype:'json',
		data:{
			dateinfo:$('#dateinfo').val(),　// 日付選択のためのinputタグからの情報
			facility_name:$('#facility_name').val() // 施設名選択のためのinputタグからの情報

		}

	}).done(function(data) {
		console.log(data);
	});
}
  	flatpickr(".dateinfo");



	</script>
 </body>
</html>

ルーティング

Route::get('get-reserve', 'ReserveController@test');

モデム側のメソッド

static function SearchReserveDates() {

		$reserveinfo = \App\Reserve::whereHas('Facility', function($query){
            $query->where('facility_name', "{$facility_name}")->whereDate('start_time', "{$reservedates}")->whereDate('end_time', "{$reservedates}");
                })->select('id', 'start_time', 'end_time')->get()->all();

コントローラー

    public function test(){
        if(isset($_GET['dateinfo']) && isset($_GET['facility_name'])) {

        $reservedates = $_GET['dateinfo'];
        $facility_name = $_GET['facility_name'];

        $reserveinfo = Reserve::SearchReserveDates();// モデムのメソッドをそのまま書いたものでも同様の結果になる

        \Debugbar::info($reserveinfo);
        
        $json = json_encode($reserveinfo, JSON_PRETTY_PRINT);
        
        } else {
        dd($reservedates);
        dd($facility_name);
    }
}

console.log(formData)

PHP側の処理の結果

Debugberで確認した実行されているSQL

Comments

[tiechel]

js側の、objlistをconsole.logに吐き出したものを見せていただけますか？

[tiechel]

flatpickrは複数範囲の時刻を制限できないみたいなので、予約中の時刻を画面に表示しておいて、「予約を確定」したときに有効な時刻設定かどうかを再検証したほうがいいと思います。

[kamille-mio]

返信ありがとうございます。
それではviewをまだ作っていないので、簡単にviewを作ってテストを実行したものを追記しておきます。

[kamille-mio]

追記ですが、flatpickrの範囲選択はstart_timeとend_timeでそれぞれ入力欄（選択欄）を作ることで対応するというニュアンスで質問したいことに記載したのですが、それでも難しいでしょうか？
もし、伝わっていなければ私の書き方が悪いです、申し訳ない……

[tiechel]

複数の予約が連続しているのであれば、start_timeの最小値とend_timeの最大値を取り出せば制御できると思いますが、連続していない場合はどうするつもりでしょうか。
サンプルでは「9:00-13:00、13:00-15:00」の予約が登録されていますので、選択できない範囲を9:00-15:00にすればいいのでしょう。
一方、「9:00-13:00、15:00-17:00」の予約が登録されていたとき、「13:00-15:00」の範囲をどのように表現したいのですか？

[kamille-mio]

その場合は
start_timeの選択時間を13:00と15:00以降にして、end_timeを14:00、15:00、飛んで18:00～とするようにしたいのが理想なのですが、書いていてflatpickrではそれができないということをおっしゃりたいのだということがなんとなく理解できました……時間の範囲選択ができるカレンダープラグインは探してみましたが、これというものが見つからないので、ダメだったら予約情報を取得、それに基づいて予約が入っている時間帯を表示するようにして、回答して頂いてる通りもし既存の予約情報と被る時間帯を選択して送信しようとしていた場合は例外処理を行うようにしたいと思います。

[kamille-mio]

あとよろしければでいいのですが

>>js側の、objlistをconsole.logに吐き出したものを見せていただけますか？

ということで、簡単にviewを作ったのですが、Ajaxからサーバーへは通信できているのですが、サーバー側で予約情報を探せず（結果がnullになる）、詰まっているのでアドバイスいただけないでしょうか？
コードの方は追記をしておきます。

[tiechel]

コントローラーで結果を返してないからでは？

[Laravel]レスポンスをJSON形式で返す方法2つ - Qiita
https://qiita.com/qiita-kurara/items/089db7349e33b9402b42

[kamille-mio]

returnが抜けてるのは確かにミスなので……修正して、jsonをreturnしたのですが返ってこないです。

$reserveinfo = \App\Reserve::whereHas('Facility', function($query){
$query->where('facility_name', 'test1')->whereDate('start_time', '2019-11-30')->whereDate('end_time', '2019-11-30');
})->select('id', 'start_time', 'end_time')->get()->all();

return json_encode($reserveinfo);

これだと返ってくることが確認できているので、おそらくクエリビルダのwhere句の第2引数に変数を渡せてないのではと思うのですがどうでしょうか？

[tiechel]

Reserve::SearchReserveDates()の引数に$reservedatesと$facility_nameを追加してください。
あと、このメソッドもreturnしていないですけど、見切れているからでしょうか？

[kamille-mio]

メソッドのreturnも抜けです。
一応

static function SearchReserveDates() {

$reserveinfo = \App\Reserve::whereHas('Facility', function($query){
$query->where('facility_name', "{$facility_name}")->whereDate('start_time', "{$reservedates}")->whereDate('end_time', "{$reservedates}");
})->select('id', 'start_time', 'end_time')->get()->all();
}
}

および

public function test(){

if(isset($_GET['dateinfo']) && isset($_GET['facility_name'])) {

$reservedates = $_GET['dateinfo'];
$facility_name = $_GET['facility_name'];

$reserveinfo = return Reserve::SearchReserveDates($facility_name,$reservedates);
\Debugbar::info($reserveinfo);

return json_encode($reserveinfo, JSON_PRETTY_PRINT);

} else {
dd($reservedates);
dd($facility_name);
}

で試してみましたがUndefined variable: facility_nameがモデム側で出てしまいます……

[tiechel]

コードが更におかしくなっています。関数の引数と返り値に付いて理解していますでしょうか？

PHP: 関数の引数 - Manual
https://www.php.net/manual/ja/functions.arguments.php
PHP: 返り値 - Manual
https://www.php.net/manual/ja/functions.returning-values.php

[kamille-mio]

モデムはこちら

static function SearchReserveDates() {

$result = \App\Reserve::whereHas('Facility', function($query){
$query->where('facility_name', "%{$facility_name}%")->whereDate('start_time', "%{$reservedates}%")->whereDate('end_time', "%{$reservedates}%");
})->select('id', 'start_time', 'end_time')->get()->all();

return $result;
}

コントローラーがこちら
if(isset($_GET['dateinfo']) && isset($_GET['facility_name'])) {

$reservedates = $_GET['dateinfo'];
$facility_name = $_GET['facility_name'];

$reserveinfo = Reserve::SearchReserveDates($facility_name,$reservedates);

\Debugbar::info($reserveinfo);

return json_encode($reserveinfo, JSON_PRETTY_PRINT);

} else {
dd($reservedates);
dd($facility_name);
}
}

と書き直しましたが、
Undefined variable: facility_name/home/vagrant/Code/Laravel/app/Reserve.php#31

となったままです。
>>Reserve::SearchReserveDates()の引数に$reservedatesと$facility_nameを追加してください。

は大本のモデムの方ではなく、コントローラーの方で呼び出した際に引数をつける形で間違ってないですか？

[tiechel]

受け取る側の関数に引数を用意しなければ値を渡せませんよ。
元の質問の趣旨から外れていて、いつまでもこのやりとりをしても不毛なので、コードです。

static function SearchReserveDates($facility_name, $reservedates) {
$result = \App\Reserve::whereHas('Facility', function($query) use ($facility_name, $reservedates){
$query
->where('facility_name', $facility_name)
->whereDate('start_time', $reservedates)
->whereDate('end_time', $reservedates);
})->select('id', 'start_time', 'end_time')->get()->all();
return $result;
}

[kamille-mio]

お付き合い頂いてありがとうございます。
モデムをそちらのコードに置き換えてコントローラー側は前述までのとPOSTにAjaxから変えてみて下記のと試してみましたが、いずれもUndefined variable: facility_name/home/vagrant/Code/Laravel/app/Reserve.phpは変わらずでした。

public function test(){

if(isset($_POST['dateinfo']) && isset($_POST['facility_name'])) {

$dateinfo = $_POST['dateinfo'];
$facility_name = $_POST['facility_name'];

$reserveinfo = Reserve::SearchReserveDates($facility_name,$dateinfo);

\Debugbar::info();

return json_encode($reserveinfo, JSON_PRETTY_PRINT);

} else {
echo 'FAIL TO AJAX REQUEST';
}
}

これ以上付き合わせてしまうのは大変申し訳ないので下記の回答をBAということでよろしいでしょうか？

[tiechel]

１個前の返信、2行目の修正が抜けていたので編集しました。
無名関数で変数を親スコープから引き継ぐには、useで渡さないといけません。
引っかかりがちなので気をつけてください。
https://www.php.net/manual/ja/functions.anonymous.php

回答は少し追記します。

[kamille-mio]

返信ありがとうございます。
useは調べてる時に目にはしていたんですが、こういう使い方だったのですね。
しっかり確認させていただきます。

とりあえずコントローラーにviewから値は渡せているところまでは確認できていますし、質問の本筋からは離れてしまっていますし、何よりtiechelさんにもこれ以上申し訳ないのでこちらの方はこれで万が一エラーが収まらなくてももう少し自分で調べて頑張ってみます。
それでもしどうにも詰まるならまた改めて質問を立てますのでその際、お見かけになればまたお声をかけて頂けると嬉しいです。

回答の返礼に先立ちますがここまでありがとうございました。

Answer 1

flatpickrを制御するのは難しいので、予約確定時にこんな感じにすればいいんじゃないかな。

// 予約確定時
$('form#reservationForm').on('submit', function(e) {
  e.preventDefault()
  $.ajax({
    type:"GET",
    url: "get-reservation.php",
    datatype:'json',
    data:{
      date: $('#dateinfo').val(),
      facility_name:$('#facility_name').val()
    }
  }).done(function(data) {
    const obj = Json.parse(data)
    const input_mintime = $('#mintime').val()
    const input_maxtime = $('#maxtime').val()
    const input_mindatetime = new Date(date)
    const input_maxdatetime = new Date(date)
    input_mindatetime.setHours(input_mintime.split(":")[0])
    input_mindatetime.setMinutes(input_mintime.split(":")[1])
    input_maxdatetime.setHours(input_maxtime.split(":")[0])
    input_maxdatetime.setMinutes(input_maxtime.split(":")[1])

    for(let dateSet of obj) {
      const start_datetime = new Date(dateSet.start_time)
      const end_datetime = new Date(dateSet.end_time)
      if (
        (start_datetime < input_mindatetime && input_mindatetime < end_datetime) ||
        (start_datetime < input_maxdatetime && input_maxdatetime < end_datetime)
      ) {
        // 予約済み期間内を指定した
        return false
      }
    }
    $(this).submit()
  })
})

Comments

[kamille-mio]

回答を追記されるということでしたが、ひとまず先にBAに選ばせていただきました。
私が当初想定していた挙動がflatpickrでは難しいということをご指摘頂いて、その代替案を提示していただいただけでなく、Eloquetで理解が甘いところまでご教授頂いて本当に助かりました。
ありがとうございます。
とりあえず、一番最初の話であったJSのobjlistですが、useの追加で無事、Ajax非同期でデータは取れましたのでJavascript側にPHPから返ってきたデータを載せておきます。

[
{
"id": "1",
"start_time": "2019-11-30 09:00:00",
"end_time": "2019-11-30 13:00:00"
},
{
"id": "2",
"start_time": "2019-11-30 13:00:00",
"end_time": "2019-11-30 15:00:00"
}
]