0.0.0.22.6

web/css/stdb.css

@@ -116,6 +116,14 @@ img{
 	background-color: #FFF;
 	border: 1px solid navy;
 }
+.cardSearch{
+	border-radius: 5px;
+	width: auto;
+	height: 40px;
+	margin-top: 5px;
+	background-color: #F0F0F0;
+	border: 1px solid navy;
+}
 .cardAdd{
 	width: auto;
 	background-color:unset;
@@ -195,3 +203,12 @@ img{
 	position: fixed;
 
 }
+.buttonSearch{
+	background-color: #263238;
+	color:#000;
+	width: 80px;
+	height: 40px;
+	border-radius: 5px;
+	border: 0px;
+	
+}

web/js/stdb.js

@@ -64,7 +64,7 @@ function getStat(){
 	}
 }
 
-function getUser(){
+function getUser(status){
 	token = sessionStorage.getItem("token")
 	// console.log(token)
 	// console.log('======== 2 ======')
@@ -80,11 +80,29 @@ function getUser(){
 			// console.log(respone)
 			userData = respone
 			organ = '<div>'+respone.organizations[0].name+'</div>'
+
 			document.getElementById("nameOrgan").innerHTML =  organ
 			token = sessionStorage.getItem("token")
+			var searchText = ''
+			if (status === 'search'){
+				console.log("search")
+				dataInstrument = []
+				searchText = '&search='+document.getElementById("searchId").value
+				start = 0
+				$('#modalAll').html('');
+				$('#card').html("");
+				htmlText = '';
+				modalText = '';
+				dataInstrument = [];
+				console.log(' >>  end of search button');
+				console.log(dataInstrument)
+				console.log($('#card').html());
+			}
+			var url = 'http://www.serv.stdb.most.go.th/api/v2/instrument/?organization='+respone.organizations[0].id+searchText;
+			console.log('url = ' + url)
 			$.ajax({
 				type: "GET",
-				url: 'http://www.serv.stdb.most.go.th/api/v2/instrument/?organization='+respone.organizations[0].id,
+				url: url, 
 				headers :{
 					Authorization: 'Bearer '+ token,
 					Accept: 'application/json, text/javascript',
@@ -100,7 +118,7 @@ function getUser(){
 }			
 
 function getDataStat(respone){
-	getUser();
+	getUser('first');
 	// console.log(respone)
 	document.getElementById("like").innerHTML =  '0'
 	document.getElementById("status").innerHTML = '+'+respone.items.recent_update 
@@ -113,17 +131,20 @@ function getData(respone) {
 	// console.log(dataInstrument)	
 	// console.log(respone)	
 	// console.log(respone.results)	
-	dataInstrument = dataInstrument.concat(respone.results)
-	// console.log('****************')	
 	console.log(dataInstrument)	
-	var cardText = ''
+	dataInstrument = dataInstrument.concat(respone.results)
+	console.log('*******ฬฬฬฬฬฬฬฬฬ*********')	
+	console.log(respone.results)	
+	var htmlText = ''
 	var modalText = ''
+
 	for (i=start;i<dataInstrument.length;i++ ){
+		console.log('========='+i+'==========')
 		// console.log(dataInstrument[i].name)
 		htmlText = htmlText+"<div id='"+i.toString()+"'' class='cardStyle' onclick='modalItem("+i.toString()+")'>"
 		+'<h3 style="font-size:26px;margin-left:20px " >'+dataInstrument[i].name+'</h3>'
 		+'<h3 style="color:#9E9E9E;font-size:22px;margin-left:20px " >#'+dataInstrument[i].custom_id+'</h3>'
-		+'<h3 style="color:#9E9E9E;font-size:22px;margin-left:20px " >@'+dataInstrument[i].location+'</h3>'
+		+'<h3 style="color:#9E9E9E;font-size:22px;margin-left:20px " >@'+dataInstrument[i].caretaker+'</h3>'
 		+'</div>';
 
 		if(dataInstrument[i].clips.length === 0){
@@ -199,7 +220,7 @@ function getData(respone) {
 										+'<input type="file" name="upload" onclick="uploadImage('+i.toString()+')"/>'
 									+'</div>'				
 			}
-		modalText = modalText+'<div id="modal'+i.toString()+'" class="modal" style="max-height: 100%;display: none;">'
+			modalText = modalText+'<div id="modal'+i.toString()+'" class="modal" style="max-height: 100%;display: none;padding-top:10px;">'
 									+'<div class="modal-content cardStyle" >'
 										+imageTag
 											+'<div>'
@@ -234,9 +255,10 @@ function getData(respone) {
 		document.getElementById("more").innerHTML =  moreText;
 	} 
 	start = dataInstrument.length
-	// console.log(start)
+
 	document.getElementById("modalAll").innerHTML =  document.getElementById("modalAll").innerHTML+modalText
 	document.getElementById("card").innerHTML =  document.getElementById("card").innerHTML+htmlText
+
 }
 
 function getNextUrl(){
@@ -264,7 +286,9 @@ function modalItem(idCard){
 	window.onclick = function(event) {
 			if (event.target == modal) {
 					modal.style.display = "none";
+					if(idCard != 'search'){
 						removeImage(idCard)
+					}
 					dataUri = []
 			}
 	}		
@@ -315,11 +339,17 @@ function addData(){
 
 	data = {
 		'name':document.getElementById("nameI").value,
-		'note':document.getElementById("noteI").value,
-		'caretaker':document.getElementById("idI").value,
-		'instrument_id':document.getElementById("CrI").value,
 		'organization': userData.organizations[0].id,
 	}
+	if(document.getElementById("noteI").value != ''){
+		data.caretaker = document.getElementById("idI").value
+	}
+	if(document.getElementById("noteI").value != ''){
+		data.instrument_id = document.getElementById("CrI").value
+	}
+	if(document.getElementById("noteI").value != ''){
+		data.note = document.getElementById("noteI").value
+	}
 	if(dataUri.length != 0){
 		data.clips = dataUri
 	}

web/login.html

@@ -21,13 +21,14 @@
 </style>
 </head>
 <body>
+
 		<div>
 			<ul class="titleIn">
 				<center>
 					<li><a href="javascript:history.go(0)" class="active">Instrument</a></li>
 				  <li style="float:right;font-size:18px"><a onClick="LogoutPage()">Logout</a></li>
 				  <li style="float:right;font-size:18px"><a onClick="modalItem('add')">Add Instrument</a></li>
-			  <li style="float:right;"><a class="material-icons" onclick="searchItem()" style="color:#FFF;">search</a></li>
+				  <li style="float:right;"><a class="material-icons" onclick="modalItem('search')" style="color:#FFF;">search</a></li>
 				</center>
 			</ul>
 		</div>
@@ -132,12 +133,27 @@
 			</div>
 		</div>
 
+		<div id="modalsearch" class="modal" style="max-height: 100%;display: none;padding-top:100px;">
+			<div class="modal-content cardStyle" >
+				<div>
+					<input type="text" class="cardSearch" id="searchId" value="" placeholder="Search">
+					<div class="flexEnd">
+						<button class="buttonSearch flexCenter" onclick="searchItem('search')">
+							<a class="material-icons" style="color:#FFF;">search</a>
+						</button>
+					</div>
+				</div>	
+			</div>
+		</div>
+
 
 </body>
 <script language="javascript">
 
-	function searchItem(){
+	function searchItem(idSearch){
-
+		var modal = document.getElementById('modal'+idSearch);
+		modal.style.display = "none";
+		getUser('search')
 	}		
 
 </script>