ReservationList

//---- HTML ----------

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div align="center" style="padding-top: 20%">
<img src="http://appgen.gamma.malaysia.gov.my/uploads/5689/media/170601/54699314.png">
</div>

<div class="page-carian">
	<form class="form-inline">
		<div class="form-group">
		    <label for="noTempahan">Lokasi</label>
	            <div id="the-basics">
		    <select name="lokasi" id="lokasi" class="form-control">
	                <option value="Institut Alam Sekitar">Institut Alam Sekitar</option>
	                <option value="Kem Bina Negara">Kem Bina Negara</option>
	                <option value="Mampu">MAMPU</option>
	        </select>
		</div>

		<div class="form-group">
		    <label for="exampleInputEmail1">Tarikh masuk</label>
		    <div class='input-group date' id='datetimepicker1'>
	            <input type='date' id="date1" class="form-control" placeholder=""/>
	            <span class="input-group-addon">
	                <span class="glyphicon glyphicon-calendar"></span>
	            </span>
			</div>
		</div>

	       <div class="form-group">
		    <label for="exampleInputEmail1">Tarikh Keluar</label>
		    <div class='input-group date' id='datetimepicker2'>
	            <input type='date' class="form-control" placeholder="" id="date2"/>
	            <span class="input-group-addon">
	                <span class="glyphicon glyphicon-calendar"></span>
	            </span>
			</div>
		</div>

		<div class="form-group">
			<button id="hantar" class="btn btn-secondary btn-block">Cari</button>
		</div>
	</form>
</div>

<div class="page-keputusan">

	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title" id="title">Institut Tanah Ukur Negara</h3>
		</div>

		<div class="panel-body">
			<div class="row">
				<div class="col-xs-4">Fasiliti</div>
				<div class="col-xs-4"><p class="font">Kapasiti</p></div>
				<div class="col-xs-4">Kadar</div>
			</div>

		    <div id="facilities">
				<!-- <div class="row">
					<div class="col-xs-4">Makmal Kimia</div>
					<div class="col-xs-4"><p class="font">20</p></div>
					<div class="col-xs-4"><p class="font">40</p></div>
				</div>  -->
				<!-- <div>
					<input type="button" value="Tempah" class="btn btn-default btn-block" data-selector="1">
				</div> -->
			</div>

		</div><!-- class panel-body -->
	</div> <!-- class panel-default -->

</div>

//---- End HTML ----------


//---- Javascript ----------

var API_KEY = "a3c1894815c2b735fc84c92a6dc81cdeae1d9fec";
var SEARCH_API = 6402;

/*$('input[type=button]').click(function() {
   //var selector = $(this).data('selector');
   //alert('selector: ' + selector);

   alert('test');
})*/


function gotoNode(id){
	alert(id);
}

$("#hantar").click(function(){

	var lokasi = $( "#lokasi option:selected" ).text();
	var Tmasuk =  $("#date1").val();
	var Tkeluar=  $("#date2").val();

	//alert(lokasi + ", " + Tmasuk + ", " + Tkeluar);

	var configObj = {}
    var searchObj = {}

    searchObj.location = lokasi;
    searchObj.from_date = Tmasuk;
    searchObj.to_date = Tkeluar;

    configObj = {
        bodyParams: searchObj
    }

    var panelTitle = $("#title");
    var page_keputusan = $(".page-keputusan");
    var page_carian = $(".page-carian");
    var list = $("#facilities");

    callApi(SEARCH_API, API_KEY, "post", configObj)
    .then(function(result){
       console.log(result.data);
       page_keputusan.show();
       //page_carian.hide();
       panelTitle.html(result.data.places[0].name);

       result.data.places[0].facilities.forEach(function(v){
       	var name = v.name;
       	var capacity = v.capacity;
       	var rate = v.rate;
       	var id = v.id;

       	console.log('name: '+name+'. capacity: '+capacity+'. rate: '+rate);

       	var FacList = "<div class='row'><div class='col-xs-4'>"+name+"</div><div class='col-xs-4'><p class='font'>"+capacity+"</p></div><div class='col-xs-4'><p class='font'>"+rate+"</p></div></div>";
        //FacList +=  "<div><input type='button' value='Tempah "+id+"' class='btn btn-default btn-block' data-selector='" + id + "'></div>"
        //FacList +=  "<div><button value='"+id+"' class='btn btn-default btn-block'>TempahX</div>";

        FacList += "<div>";
        list.append(FacList);

        var myInput = document.createElement("button");
        var myValue = document.createAttribute("value");
		myValue.value = id;

		var myClass = document.createAttribute("class");
		myClass.value = "btn btn-default btn-block";

		var t = document.createTextNode("Reserve");
		//myInput.setAttributeNode(att);
		myInput.setAttributeNode(myClass);
		//myInput.setAttributeNode(myButton);
		myInput.setAttributeNode(myValue);
		myInput.appendChild(t);

		myInput.addEventListener('click', function(){
		    gotoNode(id);
		});

		list.append(myInput);
		list.append("</div>");



        /*var myInput = document.createElement("input");

        var att = document.createAttribute("data-selector");       // Create a "class" attribute
		att.value = id;     // Set the value of the class attribute

		var myClass = document.createAttribute("class");
		myClass.value = "btn btn-default btn-block";

		var myButton = document.createAttribute("type");
		myButton.value = "button";

		var myValue = document.createAttribute("value");
		myValue.value = "Tempah " +id;

		myInput.setAttributeNode(att);
		myInput.setAttributeNode(myClass);
		myInput.setAttributeNode(myButton);
		myInput.setAttributeNode(myValue);

				var inputElement = document.createElement('input');
		inputElement.type = "button"
		inputElement.addEventListener('click', function(){
		    gotoNode(result.name);
		});


		list.append(myInput);*/


       })
       updateScroller();
     })

})

//---- End Javascript ----------

//---- CSS ----------

.page-carian{
  display: block;
}

.page-keputusan{
  display: none;
}

.titleTxt{
height: auto !important;
}

.font{
  font-align: center;
}
//---- End CSS ----------