1
0
Fork 0
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

597 lines
20 KiB

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 = 'index.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 = respone.items.completed
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) {
var cover_img = getCoverImg(dataInstrument[i].clips);
imageInstrument = '<div class="box-left">'
+'<img src="'+cover_img+'" 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>'
+'<span style="float:right;color:#9E9E9E;font-size:22px;margin-left:20px " >@'+dataInstrument[i].location+'</span>'
+'<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)
var backup = dataInstrument[i].clips;
dataInstrument[i].clips = addNullData(dataInstrument[i].clips);
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>'
}
var youtube_tag = getYoutubeTag(dataInstrument[i].model,i);
modalText = modalText+'<div id="modal'+i.toString()+'" class="modal" style="max-height: 100%;display: none;padding-top:10px;">'
+'<div class="modal-content cardStyle" >'
+imageTag
+youtube_tag
+'<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>'
+'<div style="font-size:20px;margin-top:20px">สถานท</div>'
+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="lc'+i+'" name="lc'+i+'" placeholder="สถานท" value="'+dataInstrument[i].location+'"></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="make'+i+'" name="make'+i+'" placeholder="ยอ" value="'+dataInstrument[i].make+'"></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="model'+i+'" name="model'+i+'" placeholder="รน" value="'+dataInstrument[i].model+'"></div>'
+'</div>'
+'<div>'
+'<div style="font-size:20px;margin-top:20px">วโอ(youtube)</div>'
+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="yl'+i+'" name="yl'+i+'" placeholder="https://www.youtube.com/watch?v=xxxxx" value="'+dataInstrument[i].video+'"></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>';
dataInstrument[i].clips = backup;
}
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
/* Apirak */
$("img[id*='myImg']").each(function(){
var id = $(this).attr('id');
var order = id.substring(5,6);
var idInstrument = id.substring(6,7);
if(idInstrument == 'a'){idInstrument='add';}
$("<a id='order"+order+"' class='btn-edit' onclick='uploadWithOrder("+order+",\""+idInstrument+"\")'>Edit</a>").insertAfter( $(this) );
$(this).parent().css({"position": "relative"});
$(this).css({"margin-top": "0px"});
});
$("iframe").each(function(){
var index = $(this).attr('id');
index = index.replace("youtube-","");
$("img#myImg0"+index).addClass("img-with-youtube");
});
}
function uploadWithOrder(order,idInstrument){
$("#modal"+idInstrument+" input[name='upload']").attr('order',order);
$("#modal"+idInstrument+" input[name='upload']").click();
}
function getYoutubeTag(link,index){
//https://www.youtube.com/watch?v=hYgTVD-bxOY
//http://www.youtube.com/v/hYgTVD-bxOY
link = link.replace("https","http");
link = link.replace("watch?v=","v/");
var youtube_tag = '';
if( youtube_tag.indexOf("http") < 0 ){return youtube_tag;}
if(link != '')
{
youtube_tag = '<iframe width="420" height="315" src="'+link+'" frameborder="0" class="youtube" id="youtube-'+index+'" allowfullscreen></iframe>';
$("iframe").css("margin-left","13%");
$("iframe").css("margin-top","-13%");
}
else{
youtube_tag="";
}
return youtube_tag;
}
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 addNullData(arr){
var temp_arr = [{content_type:'',id:'',object_id:'',order:'',photo:"",user:''},
{content_type:'',id:'',object_id:'',order:'',photo:"",user:''},
{content_type:'',id:'',object_id:'',order:'',photo:"",user:''},
{content_type:'',id:'',object_id:'',order:'',photo:"",user:''}];
$.each(arr,function(index,obj){
temp_arr[obj.order] = obj;
});
return temp_arr;
}
function getCoverImg(arr){
var link="";
$.each(arr,function(index,obj){
if(obj.order == 0)
{
link=obj.photo;
}
});
return link;
}
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
var order = $("#modal"+idImage+" input[name='upload']").attr('order');
$(":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,'order':parseInt(order)}];
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
}*/
$.each(dataUri,function(index,obj){
$('#myImg'+obj.order+''+idImage).attr('src', obj.uri);
});
// 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(document.getElementById("LcI").value != ''){
data.location = document.getElementById("LcI").value
}
if(document.getElementById("YlI").value != ''){
data.video = document.getElementById("YlI").value
}
if(document.getElementById("makeI").value != ''){
data.make = document.getElementById("makeI").value
}
if(document.getElementById("modelI").value != ''){
data.model = document.getElementById("modelI").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,
'location':document.getElementById("lc"+idData).value,
'instrument_id':document.getElementById("id"+idData).value,
'make':document.getElementById("make"+idData).value,
'model':document.getElementById("model"+idData).value,
'video':document.getElementById("yl"+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()