|
|
var numAll = '' |
|
|
var numPhoto = '' |
|
|
var token = '' |
|
|
var userData |
|
|
var dataInstrument = [] |
|
|
var start = 0 |
|
|
var nextUrl = '' |
|
|
htmlText = '' |
|
|
var dataUri = [] |
|
|
|
|
|
function getStartPage(){ |
|
|
sesToken = sessionStorage.getItem('token'); |
|
|
if( sesToken === null){ |
|
|
token = localStorage.getItem("token") |
|
|
// console.log(token) |
|
|
// console.log('==================') |
|
|
if( token != null ){ |
|
|
$.ajax({ |
|
|
type: "POST", |
|
|
url: 'http://www.serv.stdb.most.go.th/api-token-verify/', |
|
|
data: { "token" : token }, |
|
|
header: { |
|
|
Authorization: 'Bearer '+ token, |
|
|
}, |
|
|
success: function(respone){ |
|
|
sessionStorage.setItem("token",respone.token) |
|
|
getStat(); |
|
|
}, |
|
|
dataType: 'json' |
|
|
}); |
|
|
} |
|
|
else{ |
|
|
window.location.href = 'login.html' |
|
|
} |
|
|
} |
|
|
else{ |
|
|
getStat(); |
|
|
} |
|
|
} |
|
|
|
|
|
function LogoutPage(){ |
|
|
localStorage.removeItem('token'); |
|
|
sessionStorage.removeItem('token'); |
|
|
window.location.href = 'login.html' |
|
|
} |
|
|
|
|
|
function getStat(){ |
|
|
token = sessionStorage.getItem("token") |
|
|
// console.log(token) |
|
|
// console.log('======== 2 ======') |
|
|
dataUser = jwt_decode(token) |
|
|
userId = dataUser.user_id |
|
|
|
|
|
if( token != null ){ |
|
|
$.ajax({ |
|
|
type: "GET", |
|
|
url: 'http://www.serv.stdb.most.go.th/api/v2/instrument/stats/', |
|
|
headers :{ |
|
|
Authorization: 'Bearer '+ token, |
|
|
}, |
|
|
success: getDataStat, |
|
|
dataType: 'json', |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
function getUser(status){ |
|
|
token = sessionStorage.getItem("token") |
|
|
// console.log(token) |
|
|
// console.log('======== 2 ======') |
|
|
dataUser = jwt_decode(token) |
|
|
userId = dataUser.user_id.toString() |
|
|
$.ajax({ |
|
|
type: "GET", |
|
|
url: 'http://www.serv.stdb.most.go.th/api/v2/user/'+userId+'/', |
|
|
headers :{ |
|
|
Authorization: 'Bearer '+ token, |
|
|
}, |
|
|
success: function(respone){ |
|
|
// 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: url, |
|
|
headers :{ |
|
|
Authorization: 'Bearer '+ token, |
|
|
Accept: 'application/json, text/javascript', |
|
|
'Accept-Language' : 'en-US,en;q=0.8,th;q=0.6', |
|
|
}, |
|
|
success: getData, |
|
|
dataType: 'json', |
|
|
}); |
|
|
}, |
|
|
dataType: 'json', |
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
function getDataStat(respone){ |
|
|
getUser('first'); |
|
|
// console.log(respone) |
|
|
document.getElementById("like").innerHTML = '0' |
|
|
document.getElementById("status").innerHTML = '+'+respone.items.recent_update |
|
|
document.getElementById("accountActive").innerHTML = respone.users.active |
|
|
document.getElementById("numAll").innerHTML = respone.items.all |
|
|
document.getElementById("numPhoto").innerHTML = respone.items.photos |
|
|
} |
|
|
|
|
|
function getData(respone) { |
|
|
// console.log(dataInstrument) |
|
|
console.log(respone) |
|
|
console.log("---------------- Next") |
|
|
console.log(respone.next) |
|
|
// console.log(respone.results) |
|
|
console.log(dataInstrument) |
|
|
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) |
|
|
var imageInstrument = '' |
|
|
if (dataInstrument[i].clips.length != 0) { |
|
|
imageInstrument = '<div class="box-left">' |
|
|
+'<img src="'+dataInstrument[i].clips[0].photo+'" class="cover-img">' |
|
|
+'</div>' |
|
|
} |
|
|
htmlText = htmlText+"<div id='"+i.toString()+"'' class='cardStyle' onclick='modalItem("+i.toString()+")'>" |
|
|
// Author :: Apirak |
|
|
+ imageInstrument |
|
|
// end of left |
|
|
+'<div class="box-right">' |
|
|
+'<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].caretaker+'</h3>' |
|
|
+'</div>'// end of right |
|
|
// End |
|
|
+'</div>'; |
|
|
console.log(dataInstrument[i].clips.length) |
|
|
if(dataInstrument[i].clips.length === 0){ |
|
|
console.log('========= = 0 =========') |
|
|
imageTag = '<div class="flexCenter">' |
|
|
+'<div class="flexCenter bgImage">' |
|
|
+'<div class="flexCenter">' |
|
|
+'<img id="myImg0'+i+'" src="" alt=""/>' |
|
|
+'<div class="bgImage flexCenter"><h2>ไม่มีรูปภาพ</h2></div>' |
|
|
+'</div>' |
|
|
+'<div class="column bgMiniImage" style="margin-left:10px">' |
|
|
+'<img id="myImg1'+i+'" class="miniImage" src="" alt=""/>' |
|
|
+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>' |
|
|
+'<img id="myImg2'+i+'" class="miniImage" src="" alt=""/>' |
|
|
+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>' |
|
|
+'<img id="myImg3'+i+'" class="miniImage" style="margin-top:5px" src="" alt=""/>' |
|
|
+'<h6 class="miniImage flexCenter" style="margin-top:5px">ไม่มีรูปภาพ</h6>' |
|
|
+'</div>' |
|
|
+'</div>' |
|
|
+'</div>' |
|
|
+'<div class="flexCenter" style="margin-top:5px;">' |
|
|
+'<div class="upload flexCenter">' |
|
|
+'<a style="font-size:18px">Upload</a></div>' |
|
|
+'<input type="file" name="upload" onclick="uploadImage('+i.toString()+')"/>' |
|
|
+'</div>' |
|
|
} |
|
|
else{ |
|
|
var style4 = '' |
|
|
if(dataInstrument[i].clips.length >= 2){ |
|
|
console.log('*********** >= 2 ***********') |
|
|
var tagMiniImage = '' |
|
|
var loopImage = dataInstrument[i].clips.length |
|
|
if (loopImage > 4){ |
|
|
loopImage = 4 |
|
|
} |
|
|
for(j=1;j<loopImage;j++){ |
|
|
if (j==3){ |
|
|
style4 = 'margin-top:5px' |
|
|
} |
|
|
tagMiniImage = tagMiniImage |
|
|
+'<img id="myImg'+j+''+i+'" class="miniImage" style="'+style4+'" src="'+dataInstrument[i].clips[j].photo+'" alt=""/>' |
|
|
+'<h6 class="miniImage flexCenter" ></h6>'; |
|
|
} |
|
|
for(j=loopImage;j<4;j++){ |
|
|
if (j==3){ |
|
|
style4 = 'margin-top:5px' |
|
|
} |
|
|
tagMiniImage = tagMiniImage |
|
|
+'<img id="myImg'+j+''+i+'" class="miniImage" style="'+style4+'" src="" alt=""/>' |
|
|
+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>'; |
|
|
} |
|
|
} |
|
|
else{ |
|
|
console.log('*********** < 2 ***********') |
|
|
var tagMiniImage = '' |
|
|
for(j=1;j<4;j++){ |
|
|
if (j==3){ |
|
|
style4 = 'margin-top:5px' |
|
|
} |
|
|
tagMiniImage = tagMiniImage |
|
|
+'<img id="myImg'+j+''+i+'" class="miniImage" style="'+style4+'" src="" alt=""/>' |
|
|
+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>'; |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
imageTag = '<div class="flexCenter">' |
|
|
+'<div class="flexCenter bgImage">' |
|
|
+'<div class="flexCenter">' |
|
|
+'<img id="myImg0'+i+'" src="'+dataInstrument[i].clips[0].photo+'" alt=""/>' |
|
|
+'<div class="bgImage flexCenter"><h2></h2></div>' |
|
|
+'</div>' |
|
|
+'<div class="column bgMiniImage" style="margin-left:10px">' |
|
|
+tagMiniImage |
|
|
+'</div>' |
|
|
+'</div>' |
|
|
+'</div>' |
|
|
+'<div class="flexCenter" style="margin-top:5px;">' |
|
|
+'<div class="upload flexCenter">' |
|
|
+'<a style="font-size:18px">Upload</a></div>' |
|
|
+'<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;padding-top:10px;">' |
|
|
+'<div class="modal-content cardStyle" >' |
|
|
+imageTag |
|
|
+'<div>' |
|
|
+'<div style="font-size:20px;margin-top:20px">ชื่อครุภัณฑ์วิทยาศาสตร์</div>' |
|
|
+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="name'+i+'" name="name'+i+'" placeholder="เลขครุภัณฑ์" value="'+dataInstrument[i].name+'"></div>' |
|
|
+'</div>' |
|
|
+'<div>' |
|
|
+'<div style="font-size:20px;margin-top:20px">จุดประสงค์การใช้งาน</div>' |
|
|
+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="note'+i+'" name="note'+i+'" placeholder="เลขครุภัณฑ์" value="'+dataInstrument[i].note+'"></div>' |
|
|
+'</div>' |
|
|
+'<div>' |
|
|
+'<div style="font-size:20px;margin-top:20px">เลขครุภัณฑ์</div>' |
|
|
+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="id'+i+'" name="id'+i+'" placeholder="เลขครุภัณฑ์" value="'+dataInstrument[i].custom_id+'"></div>' |
|
|
+'</div>' |
|
|
+'<div>' |
|
|
+'<div style="font-size:20px;margin-top:20px">ผู้ดูแล</div>' |
|
|
+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="cr'+i+'" name="cr'+i+'" placeholder="เลขครุภัณฑ์" value="'+dataInstrument[i].caretaker+'"></div>' |
|
|
+'</div>' |
|
|
+'<div class="flexCenterSpace" style="margin-top:20px">' |
|
|
+'<input type="button" onclick="updateData('+i+')" class="buttonUpdate" value="Update">' |
|
|
+'<input type="button" onclick="deleteData('+i+')" class="buttonDelete "value="Delete">' |
|
|
+'<input type="button" onclick="backData('+i+')" class="buttonBack" value="Back">' |
|
|
+'</div>' |
|
|
+'</div>' |
|
|
+'</div>'; |
|
|
} |
|
|
if(respone.next != null){ |
|
|
nextUrl = '' |
|
|
moreText = '' |
|
|
moreText = "<div class='cardStyle flexCenter' style='margin-bottom:10px;height:60px;background-color: #E0E0E0;' onClick='getNextUrl()'>" |
|
|
+"<h4>More</h4>" |
|
|
+"</div>"; |
|
|
nextUrl = respone.next |
|
|
document.getElementById("more").innerHTML = moreText; |
|
|
} |
|
|
else{ |
|
|
nextUrl = '' |
|
|
moreText = '' |
|
|
document.getElementById("more").innerHTML = moreText; |
|
|
} |
|
|
start = dataInstrument.length |
|
|
|
|
|
document.getElementById("modalAll").innerHTML = document.getElementById("modalAll").innerHTML+modalText |
|
|
document.getElementById("card").innerHTML = document.getElementById("card").innerHTML+htmlText |
|
|
|
|
|
} |
|
|
|
|
|
function getNextUrl(){ |
|
|
// console.log('==================') |
|
|
token = sessionStorage.getItem('token') |
|
|
$.ajax({ |
|
|
type: "GET", |
|
|
url: nextUrl, |
|
|
headers :{ |
|
|
Authorization: 'Bearer '+ token, |
|
|
Accept: 'application/json, text/javascript', |
|
|
'Accept-Language' : 'en-US,en;q=0.8,th;q=0.6', |
|
|
}, |
|
|
success: getData, |
|
|
dataType: 'json', |
|
|
}); |
|
|
} |
|
|
|
|
|
function modalItem(idCard){ |
|
|
var modal = document.getElementById('modal'+idCard); |
|
|
// console.log(modal) |
|
|
var btn = document.getElementById(idCard); |
|
|
// console.log(btn) |
|
|
modal.style.display = "block"; |
|
|
window.onclick = function(event) { |
|
|
if (event.target == modal) { |
|
|
modal.style.display = "none"; |
|
|
if(idCard != 'search'){ |
|
|
removeImage(idCard) |
|
|
} |
|
|
dataUri = [] |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function uploadImage(idImage) { |
|
|
var check = 0 |
|
|
$(":file").change(function () { |
|
|
if (this.files && this.files[0] && check===0) { |
|
|
var reader = new FileReader(); |
|
|
console.log(reader) |
|
|
reader.onload = function(e) { |
|
|
instrument = dataInstrument[parseInt(idImage)] |
|
|
console.log(instrument) |
|
|
console.log('-------------xxxx-------------') |
|
|
var uriAdd = [{'uri':e.target.result}]; |
|
|
dataUri = dataUri.concat(uriAdd); |
|
|
if(idImage == 'add'){ |
|
|
loopImage = 0 |
|
|
} |
|
|
else{ |
|
|
var loopImage = instrument.clips.length |
|
|
for(idImg=0;idImg<loopImage;idImg++){ |
|
|
$('#myImg'+idImg+''+idImage).attr('src', dataInstrument[idImage].clips[idImg].photo); |
|
|
} |
|
|
} |
|
|
console.log(idImage) |
|
|
var dataUriSort = dataUri |
|
|
idloopImage = loopImage |
|
|
if(loopImage==0){ |
|
|
idloopImage = 0 |
|
|
} |
|
|
var idUri = 0 |
|
|
console.log(dataUri) |
|
|
console.log(loopImage-1) |
|
|
console.log(idloopImage+dataUri.length) |
|
|
for(idImg=loopImage;idImg<idloopImage+dataUri.length;idImg++){ |
|
|
$('#myImg'+idImg+''+idImage).attr('src', dataUri[idUri].uri); |
|
|
idUri += 1 |
|
|
} |
|
|
console.log('---------------------------') |
|
|
console.log(dataUri) |
|
|
check += 1 |
|
|
}; |
|
|
reader.readAsDataURL(this.files[0]); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function addData(){ |
|
|
|
|
|
data = { |
|
|
'name':document.getElementById("nameI").value, |
|
|
'organization': userData.organizations[0].id, |
|
|
} |
|
|
if(document.getElementById("CrI").value != ''){ |
|
|
data.caretaker = document.getElementById("CrI").value |
|
|
} |
|
|
if(document.getElementById("idI").value != ''){ |
|
|
data.instrument_id = document.getElementById("idI").value |
|
|
} |
|
|
if(document.getElementById("noteI").value != ''){ |
|
|
data.note = document.getElementById("noteI").value |
|
|
} |
|
|
if(dataUri.length != 0){ |
|
|
data.clips = dataUri |
|
|
} |
|
|
console.log(data) |
|
|
data = JSON.stringify(data) |
|
|
console.log(data) |
|
|
token = sessionStorage.getItem('token') |
|
|
$.ajax({ |
|
|
type: "POST", |
|
|
url: 'http://www.serv.stdb.most.go.th/api/v2/instrument/', |
|
|
data: data, |
|
|
headers: { |
|
|
'Accept': 'application/json', |
|
|
'Content-Type': 'application/json', |
|
|
'Authorization': 'Bearer ' + token, |
|
|
}, |
|
|
success: function(respone){ |
|
|
console.log(respone) |
|
|
window.location.reload(true); |
|
|
}, |
|
|
dataType: 'json' |
|
|
}); |
|
|
} |
|
|
|
|
|
function updateData(idData){ |
|
|
console.log(document.getElementById("name"+idData)) |
|
|
console.log(document.getElementById("note"+idData)) |
|
|
console.log(document.getElementById("id"+idData)) |
|
|
console.log(document.getElementById("cr"+idData)) |
|
|
dataUpdate = { |
|
|
'name':document.getElementById("name"+idData).value, |
|
|
'note':document.getElementById("note"+idData).value, |
|
|
'caretaker':document.getElementById("cr"+idData).value, |
|
|
'instrument_id':document.getElementById("id"+idData).value, |
|
|
} |
|
|
if(dataUri.length != 0){ |
|
|
dataUpdate.clips = dataUri |
|
|
} |
|
|
idInstrument = dataInstrument[parseInt(idData)].id |
|
|
token = sessionStorage.getItem('token') |
|
|
$.ajax({ |
|
|
type: "PATCH", |
|
|
url: 'http://www.serv.stdb.most.go.th/api/v2/instrument/'+idInstrument+'/', |
|
|
data: JSON.stringify(dataUpdate), |
|
|
headers: { |
|
|
'Content-Type': 'application/json', |
|
|
'Authorization': 'Bearer ' + token, |
|
|
}, |
|
|
success: function(respone){ |
|
|
console.log(respone) |
|
|
window.location.reload(true); |
|
|
}, |
|
|
dataType: 'json' |
|
|
}); |
|
|
} |
|
|
|
|
|
function deleteData(idData){ |
|
|
instrument = dataInstrument[parseInt(idData)] |
|
|
data = {'hide':true} |
|
|
token = sessionStorage.getItem('token') |
|
|
$.ajax({ |
|
|
type: "PATCH", |
|
|
url: 'http://www.serv.stdb.most.go.th/api/v2/instrument/'+instrument.id+'/', |
|
|
data: JSON.stringify(data), |
|
|
headers: { |
|
|
'Accept': 'application/json', |
|
|
'Content-Type': 'application/json', |
|
|
'Authorization': 'Bearer ' + token, |
|
|
}, |
|
|
success: function(respone){ |
|
|
console.log(respone) |
|
|
window.location.reload(true); |
|
|
}, |
|
|
dataType: 'json' |
|
|
}); |
|
|
} |
|
|
|
|
|
function backData(idData){ |
|
|
var modal = document.getElementById('modal'+idData); |
|
|
modal.style.display = "none"; |
|
|
removeImage(idData) |
|
|
dataUri = [] |
|
|
} |
|
|
|
|
|
function removeImage(idData){ |
|
|
var tagMiniImage = '' |
|
|
var style4 = '' |
|
|
if(idData == 'add'){ |
|
|
loopImage = 1 |
|
|
} |
|
|
else{ |
|
|
var time = new Date() |
|
|
var loopImage = dataInstrument[idData].clips.length |
|
|
console.log(dataInstrument[idData]) |
|
|
for(j=0;j<loopImage;j++){ |
|
|
console.log('#myImg'+j+''+idData) |
|
|
document.getElementById("myImg"+j+''+idData).src = dataInstrument[idData].clips[j].photo+'?'+time; |
|
|
console.log(document.getElementById("myImg"+j+''+idData).src) |
|
|
console.log(document.getElementById("myImg"+j+''+idData)) |
|
|
|
|
|
} |
|
|
} |
|
|
for(j=loopImage;j<4;j++){ |
|
|
$('#myImg'+j+''+idData).attr('src',''); |
|
|
} |
|
|
} |
|
|
getStartPage() |
