|
|
|
|
@ -6,15 +6,175 @@ var dataInstrument = []
|
|
|
|
|
var start = 0 |
|
|
|
|
var nextUrl = '' |
|
|
|
|
htmlText = '' |
|
|
|
|
var dataUri = [] |
|
|
|
|
var dataUri = []; |
|
|
|
|
var processingNext = false; |
|
|
|
|
var clickOnHideButton = false; |
|
|
|
|
var xhr = null; |
|
|
|
|
var tagsTmpl = _.template($("script#tag-list").html()); |
|
|
|
|
|
|
|
|
|
function getStartPage(){ |
|
|
|
|
var hideItem = function(itemId, divBox) { |
|
|
|
|
var html = divBox.html(); |
|
|
|
|
|
|
|
|
|
divBox.html('<i class="fa fa-4x fa-spin fa-spinner"></i>') |
|
|
|
|
data = {'hide': true}; |
|
|
|
|
token = sessionStorage.getItem('token') |
|
|
|
|
$.ajax({ |
|
|
|
|
type: "PATCH", |
|
|
|
|
url: 'http://www.serv.stdb.most.go.th/api/v2/instrument/'+ itemId +'/', |
|
|
|
|
data: JSON.stringify(data), |
|
|
|
|
headers: { |
|
|
|
|
'Accept': 'application/json', |
|
|
|
|
'Content-Type': 'application/json', |
|
|
|
|
'Authorization': 'Bearer ' + token, |
|
|
|
|
}, |
|
|
|
|
success: function(respone) { |
|
|
|
|
divBox.html('ลบเรียบร้อยแล้ว ...').delay(2000).fadeOut(500); |
|
|
|
|
}, |
|
|
|
|
fail: function() { |
|
|
|
|
divBox.html('มีปัญหาขัดข้อง ...').delay(1000).html(html); |
|
|
|
|
}, |
|
|
|
|
dataType: 'json' |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var reloadCardListener = function() { |
|
|
|
|
$('.hideBtn').click(function(evt) { |
|
|
|
|
clickOnHideButton = true; |
|
|
|
|
setTimeout(function() { |
|
|
|
|
clickOnHideButton = false; |
|
|
|
|
}, 1000); |
|
|
|
|
evt.stopPropagation(); |
|
|
|
|
var that = $(this); |
|
|
|
|
var itemId = that.data('id'); |
|
|
|
|
var $parent = that.closest('.cardStyle'); |
|
|
|
|
swal( |
|
|
|
|
{ |
|
|
|
|
title: "ลบ?", |
|
|
|
|
text: "ไม่ใช่ครุภัณฑ์วิทยาศาสตร์", |
|
|
|
|
type: "warning", |
|
|
|
|
showCancelButton: true, |
|
|
|
|
confirmButtonColor: "#DD6B55", |
|
|
|
|
confirmButtonText: "ลบเลย!" |
|
|
|
|
}, function(yes) { |
|
|
|
|
if (yes) |
|
|
|
|
hideItem(itemId, $parent) |
|
|
|
|
} |
|
|
|
|
); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var reloadItem = function() { |
|
|
|
|
if (xhr) |
|
|
|
|
xhr.abort(); |
|
|
|
|
// reset stuff
|
|
|
|
|
start = 0 |
|
|
|
|
$('#modalAll').html(''); |
|
|
|
|
$('#card').html(''); |
|
|
|
|
htmlText = ''; |
|
|
|
|
modalText = ''; |
|
|
|
|
dataInstrument = []; |
|
|
|
|
|
|
|
|
|
/// start doing new onw
|
|
|
|
|
var orgId = sessionStorage.getItem('orgId'); |
|
|
|
|
if (!orgId) { |
|
|
|
|
alert('something is wrong, try reloading'); |
|
|
|
|
} |
|
|
|
|
var token = sessionStorage.getItem('token'); |
|
|
|
|
var tagFilter = ''; |
|
|
|
|
if (localStorage.getItem('selFilters')) { |
|
|
|
|
tagFilter = localStorage.getItem('selFilters').split(','); |
|
|
|
|
tagFilter = '&tags=' + tagFilter; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var isFilter = ''; |
|
|
|
|
if (localStorage.getItem('selIsFilters')) { |
|
|
|
|
isFilter = localStorage.getItem('selIsFilters').split(','); |
|
|
|
|
isFilter = '&is=' + isFilter; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var url = 'http://www.serv.stdb.most.go.th/api/v2/instrument/?organization='+orgId+tagFilter+isFilter; |
|
|
|
|
xhr = $.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', |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var reloadFilterListener = function() { |
|
|
|
|
var selectedFilter = []; |
|
|
|
|
if (localStorage.getItem('selFilters')) { |
|
|
|
|
selectedFilter = localStorage.getItem('selFilters').split(','); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
$('input[name="tags"]').change( |
|
|
|
|
function() { |
|
|
|
|
var n = $(this).val(); |
|
|
|
|
if ($(this).is(':checked')) { |
|
|
|
|
selectedFilter = [n]; |
|
|
|
|
localStorage.setItem('selFilters', selectedFilter.join(',')); |
|
|
|
|
$('input[name="tags"]').each(function() { |
|
|
|
|
if ($(this).val() != n) |
|
|
|
|
$(this).prop('checked', false); |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
selectedFilter = []; |
|
|
|
|
localStorage.removeItem('selFilters'); |
|
|
|
|
$('input[name="tags"]').prop('checked', false); |
|
|
|
|
} |
|
|
|
|
reloadItem(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
$('input[name="is"]').change( |
|
|
|
|
function() { |
|
|
|
|
var n = $(this).val(); |
|
|
|
|
if ($(this).is(':checked')) { |
|
|
|
|
selectedIsFilter = [n]; |
|
|
|
|
localStorage.setItem('selIsFilters', selectedIsFilter.join(',')); |
|
|
|
|
$('input[name="is"]').each(function() { |
|
|
|
|
if ($(this).val() != n) |
|
|
|
|
$(this).prop('checked', false); |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
selectedIsFilter = []; |
|
|
|
|
localStorage.removeItem('selIsFilters'); |
|
|
|
|
$('input[name="is"]').prop('checked', false); |
|
|
|
|
} |
|
|
|
|
reloadItem(); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var getOrgTags = function(orgId) { |
|
|
|
|
var url = `//www.serv.stdb.most.go.th/api/v2/organization/${orgId}/tags/`; |
|
|
|
|
var promise = $.get(url); |
|
|
|
|
var $box = $('#any-filter'); |
|
|
|
|
promise.fail(function() { |
|
|
|
|
$box.html(''); |
|
|
|
|
}); |
|
|
|
|
promise.done(function(resp) { |
|
|
|
|
var selectedFilter = []; |
|
|
|
|
if (localStorage.getItem('selFilters')) { |
|
|
|
|
selectedFilter = localStorage.getItem('selFilters').split(','); |
|
|
|
|
} |
|
|
|
|
$box.html(tagsTmpl({ |
|
|
|
|
items: resp, |
|
|
|
|
selected: selectedFilter |
|
|
|
|
})); |
|
|
|
|
reloadFilterListener(); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function getStartPage() { |
|
|
|
|
sesToken = sessionStorage.getItem('token'); |
|
|
|
|
if( sesToken === null){ |
|
|
|
|
if( sesToken === null) { |
|
|
|
|
token = localStorage.getItem("token") |
|
|
|
|
// console.log(token)
|
|
|
|
|
// console.log('==================')
|
|
|
|
|
if( token != null ){ |
|
|
|
|
if( token != null ) { |
|
|
|
|
$.ajax({ |
|
|
|
|
type: "POST", |
|
|
|
|
url: 'http://www.serv.stdb.most.go.th/api-token-verify/', |
|
|
|
|
@ -22,7 +182,7 @@ function getStartPage(){
|
|
|
|
|
header: { |
|
|
|
|
Authorization: 'Bearer '+ token, |
|
|
|
|
}, |
|
|
|
|
success: function(respone){ |
|
|
|
|
success: function(respone) { |
|
|
|
|
sessionStorage.setItem("token",respone.token) |
|
|
|
|
getStat(); |
|
|
|
|
}, |
|
|
|
|
@ -38,20 +198,20 @@ function getStartPage(){
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function LogoutPage(){ |
|
|
|
|
function LogoutPage() { |
|
|
|
|
localStorage.removeItem('token'); |
|
|
|
|
sessionStorage.removeItem('token'); |
|
|
|
|
window.location.href = 'index.html' |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function getStat(){ |
|
|
|
|
function getStat() { |
|
|
|
|
token = sessionStorage.getItem("token") |
|
|
|
|
// console.log(token)
|
|
|
|
|
// console.log('======== 2 ======')
|
|
|
|
|
dataUser = jwt_decode(token) |
|
|
|
|
userId = dataUser.user_id |
|
|
|
|
|
|
|
|
|
if( token != null ){ |
|
|
|
|
if( token != null ) { |
|
|
|
|
$.ajax({ |
|
|
|
|
type: "GET", |
|
|
|
|
url: 'http://www.serv.stdb.most.go.th/api/v2/instrument/stats/', |
|
|
|
|
@ -64,43 +224,51 @@ function getStat(){
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function getUser(status){ |
|
|
|
|
token = sessionStorage.getItem("token") |
|
|
|
|
// console.log(token)
|
|
|
|
|
// console.log('======== 2 ======')
|
|
|
|
|
dataUser = jwt_decode(token) |
|
|
|
|
userId = dataUser.user_id.toString()
|
|
|
|
|
function getUser(status) { |
|
|
|
|
token = sessionStorage.getItem("token"); |
|
|
|
|
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)
|
|
|
|
|
success: function(respone) { |
|
|
|
|
userData = respone |
|
|
|
|
organ = '<div>'+respone.organizations[0].name+'</div>' |
|
|
|
|
|
|
|
|
|
document.getElementById("nameOrgan").innerHTML = organ |
|
|
|
|
token = sessionStorage.getItem("token") |
|
|
|
|
var searchText = '' |
|
|
|
|
if (status === 'search'){ |
|
|
|
|
if (status === 'search') { |
|
|
|
|
// console.log("search")
|
|
|
|
|
dataInstrument = [] |
|
|
|
|
searchText = '&search='+document.getElementById("searchId").value |
|
|
|
|
start = 0 |
|
|
|
|
$('#modalAll').html(''); |
|
|
|
|
$('#card').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({ |
|
|
|
|
var tagFilter = ''; |
|
|
|
|
if (localStorage.getItem('selFilters')) { |
|
|
|
|
tagFilter = localStorage.getItem('selFilters').split(','); |
|
|
|
|
tagFilter = '&tags=' + tagFilter; |
|
|
|
|
} |
|
|
|
|
var isFilter = ''; |
|
|
|
|
if (localStorage.getItem('selIsFilters')) { |
|
|
|
|
isFilter = localStorage.getItem('selIsFilters').split(','); |
|
|
|
|
isFilter = '&is=' + isFilter; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
sessionStorage.setItem('orgId', respone.organizations[0].id); |
|
|
|
|
var url = 'http://www.serv.stdb.most.go.th/api/v2/instrument/?organization='+respone.organizations[0].id+searchText+tagFilter+isFilter; |
|
|
|
|
|
|
|
|
|
getOrgTags(respone.organizations[0].id); |
|
|
|
|
|
|
|
|
|
xhr = $.ajax({ |
|
|
|
|
type: "GET", |
|
|
|
|
url: url, |
|
|
|
|
headers :{ |
|
|
|
|
@ -117,9 +285,8 @@ function getUser(status){
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getDataStat(respone){ |
|
|
|
|
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 |
|
|
|
|
@ -128,41 +295,43 @@ function getDataStat(respone){
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
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)
|
|
|
|
|
for (i=start;i<dataInstrument.length;i++ ) { |
|
|
|
|
var item = dataInstrument[i]; |
|
|
|
|
var imageInstrument = '' |
|
|
|
|
if (dataInstrument[i].clips.length != 0) { |
|
|
|
|
var cover_img = getCoverImg(dataInstrument[i].clips); |
|
|
|
|
imageInstrument = '<div class="box-left">' |
|
|
|
|
+'<img src="'+dataInstrument[i].clips[0].photo+'" class="cover-img">' |
|
|
|
|
+'<img src="'+cover_img+'" class="cover-img">' |
|
|
|
|
+'</div>' |
|
|
|
|
} |
|
|
|
|
htmlText = htmlText+"<div id='"+i.toString()+"'' class='cardStyle' onclick='modalItem("+i.toString()+")'>" |
|
|
|
|
var tagsHtml = '<ul class="list-inline">'; |
|
|
|
|
for (var k=0; k<item.tags.length; k++) { |
|
|
|
|
tagsHtml += `<li><span class="tag">${item.tags[k]}</span><li>`; |
|
|
|
|
} |
|
|
|
|
tagsHtml += '</ul>'; |
|
|
|
|
htmlText = htmlText+"<div data-id=\"" + item.id + "\" id='"+i.toString()+"'' class='cardStyle cardBox' onClick='modalItem("+i.toString()+");'>" |
|
|
|
|
// Author :: Apirak
|
|
|
|
|
+ '<span class="pull-right"><button data-id="' + item.id + '" class="hideBtn"><i class="fa fa-4x fa-times danger"></i></button></span>' |
|
|
|
|
+ '<div class="box_">' |
|
|
|
|
+ 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 class="box-right">' |
|
|
|
|
+ '<h3 class="card-title" 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>' |
|
|
|
|
+ tagsHtml |
|
|
|
|
+'</div>'// end of right
|
|
|
|
|
+ '</div>' |
|
|
|
|
// End
|
|
|
|
|
+'</div>'; |
|
|
|
|
// console.log(dataInstrument[i].clips.length)
|
|
|
|
|
if(dataInstrument[i].clips.length === 0){ |
|
|
|
|
// console.log('========= = 0 =========')
|
|
|
|
|
var backup = dataInstrument[i].clips; |
|
|
|
|
dataInstrument[i].clips = addNullData(dataInstrument[i].clips); |
|
|
|
|
if(dataInstrument[i].clips.length === 0) { |
|
|
|
|
imageTag = '<div class="flexCenter">' |
|
|
|
|
+'<div class="flexCenter bgImage">' |
|
|
|
|
+'<div class="flexCenter">' |
|
|
|
|
@ -187,23 +356,26 @@ function getData(respone) {
|
|
|
|
|
} |
|
|
|
|
else{ |
|
|
|
|
var style4 = '' |
|
|
|
|
if(dataInstrument[i].clips.length >= 2){ |
|
|
|
|
// console.log('*********** >= 2 ***********')
|
|
|
|
|
if(dataInstrument[i].clips.length >= 2) { |
|
|
|
|
var tagMiniImage = '' |
|
|
|
|
var loopImage = dataInstrument[i].clips.length |
|
|
|
|
if (loopImage > 4){ |
|
|
|
|
if (loopImage > 4) { |
|
|
|
|
loopImage = 4 |
|
|
|
|
} |
|
|
|
|
for(j=1;j<loopImage;j++){ |
|
|
|
|
if (j==3){ |
|
|
|
|
for(j=1;j<loopImage;j++) { |
|
|
|
|
if (j==3) { |
|
|
|
|
style4 = 'margin-top:5px' |
|
|
|
|
} |
|
|
|
|
var imgUrl = ''; |
|
|
|
|
if (dataInstrument[i].clips[j].photo) { |
|
|
|
|
imgUrl = dataInstrument[i].clips[j]['thumbnail']['sm']; |
|
|
|
|
} |
|
|
|
|
tagMiniImage = tagMiniImage |
|
|
|
|
+'<img id="myImg'+j+''+i+'" class="miniImage" style="'+style4+'" src="'+dataInstrument[i].clips[j].photo+'" alt=""/>' |
|
|
|
|
+'<h6 class="miniImage flexCenter" ></h6>'; |
|
|
|
|
+'<img id="myImg'+j+''+i+'" class="miniImage" style="'+style4+'" src="'+imgUrl+'" alt=""/>' |
|
|
|
|
+'<h6 class="miniImage flexCenter" >ไม่มีรูปภาพ</h6>'; |
|
|
|
|
} |
|
|
|
|
for(j=loopImage;j<4;j++){ |
|
|
|
|
if (j==3){ |
|
|
|
|
for(j=loopImage;j<4;j++) { |
|
|
|
|
if (j==3) { |
|
|
|
|
style4 = 'margin-top:5px' |
|
|
|
|
} |
|
|
|
|
tagMiniImage = tagMiniImage |
|
|
|
|
@ -212,10 +384,9 @@ function getData(respone) {
|
|
|
|
|
}
|
|
|
|
|
} |
|
|
|
|
else{ |
|
|
|
|
// console.log('*********** < 2 ***********')
|
|
|
|
|
var tagMiniImage = '' |
|
|
|
|
for(j=1;j<4;j++){ |
|
|
|
|
if (j==3){ |
|
|
|
|
for(j=1;j<4;j++) { |
|
|
|
|
if (j==3) { |
|
|
|
|
style4 = 'margin-top:5px' |
|
|
|
|
} |
|
|
|
|
tagMiniImage = tagMiniImage |
|
|
|
|
@ -224,12 +395,15 @@ function getData(respone) {
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var imgUrl = ''; |
|
|
|
|
if (dataInstrument[i].clips[0].photo) { |
|
|
|
|
imgUrl = dataInstrument[i].clips[0]['thumbnail']['sm']; |
|
|
|
|
} |
|
|
|
|
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>' |
|
|
|
|
+'<img id="myImg0'+i+'" src="'+imgUrl+'" alt=""/>' |
|
|
|
|
+'<div class="bgImage flexCenter"><h2>ไม่มีรูปภาพ</h2></div>' |
|
|
|
|
+'</div>' |
|
|
|
|
+'<div class="column bgMiniImage" style="margin-left:10px">' |
|
|
|
|
+tagMiniImage |
|
|
|
|
@ -242,9 +416,11 @@ function getData(respone) {
|
|
|
|
|
+'<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>' |
|
|
|
|
@ -261,6 +437,22 @@ function getData(respone) {
|
|
|
|
|
+'<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">' |
|
|
|
|
@ -268,12 +460,14 @@ function getData(respone) {
|
|
|
|
|
+'</div>' |
|
|
|
|
+'</div>' |
|
|
|
|
+'</div>'; |
|
|
|
|
dataInstrument[i].clips = backup; |
|
|
|
|
} |
|
|
|
|
if(respone.next != null){ |
|
|
|
|
|
|
|
|
|
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>" |
|
|
|
|
+"<h4 id='moreText'>More</h4>" |
|
|
|
|
+"</div>"; |
|
|
|
|
nextUrl = respone.next |
|
|
|
|
document.getElementById("more").innerHTML = moreText; |
|
|
|
|
@ -283,15 +477,63 @@ function getData(respone) {
|
|
|
|
|
moreText = '' |
|
|
|
|
document.getElementById("more").innerHTML = moreText; |
|
|
|
|
} |
|
|
|
|
processingNext = false; |
|
|
|
|
|
|
|
|
|
start = dataInstrument.length |
|
|
|
|
|
|
|
|
|
document.getElementById("modalAll").innerHTML = document.getElementById("modalAll").innerHTML+modalText |
|
|
|
|
document.getElementById("card").innerHTML = document.getElementById("card").innerHTML+htmlText |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
reloadCardListener(); |
|
|
|
|
/* 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('==================')
|
|
|
|
|
function getNextUrl(x) { |
|
|
|
|
if (processingNext) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
processingNext = true; |
|
|
|
|
$('#moreText').html('<i class="fa fa-spin fa-spinner"></i>'); |
|
|
|
|
token = sessionStorage.getItem('token') |
|
|
|
|
$.ajax({ |
|
|
|
|
type: "GET", |
|
|
|
|
@ -306,16 +548,40 @@ function getNextUrl(){
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function modalItem(idCard){ |
|
|
|
|
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.thumbnail.sm; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
return link; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function modalItem(idCard) { |
|
|
|
|
if (clickOnHideButton) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
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'){ |
|
|
|
|
if(idCard != 'search') { |
|
|
|
|
removeImage(idCard) |
|
|
|
|
} |
|
|
|
|
dataUri = [] |
|
|
|
|
@ -325,6 +591,7 @@ function modalItem(idCard){
|
|
|
|
|
|
|
|
|
|
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(); |
|
|
|
|
@ -333,61 +600,68 @@ function uploadImage(idImage) {
|
|
|
|
|
instrument = dataInstrument[parseInt(idImage)] |
|
|
|
|
// console.log(instrument)
|
|
|
|
|
// console.log('-------------xxxx-------------')
|
|
|
|
|
var uriAdd = [{'uri':e.target.result}]; |
|
|
|
|
var uriAdd = [{'uri':e.target.result,'order':parseInt(order)}]; |
|
|
|
|
dataUri = dataUri.concat(uriAdd); |
|
|
|
|
if(idImage == 'add'){ |
|
|
|
|
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); |
|
|
|
|
for(idImg=0;idImg<loopImage;idImg++) { |
|
|
|
|
var imgUrl = dataInstrument[idImage].clips[idImg]['thumbnail']['sm']; |
|
|
|
|
$('#myImg'+idImg+''+idImage).attr('src', imgUrl); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// console.log(idImage)
|
|
|
|
|
var dataUriSort = dataUri |
|
|
|
|
idloopImage = loopImage |
|
|
|
|
if(loopImage==0){ |
|
|
|
|
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 |
|
|
|
|
var idUri = 0; |
|
|
|
|
$.each(dataUri,function(index,obj) { |
|
|
|
|
$('#myImg'+obj.order+''+idImage).attr('src', obj.uri); |
|
|
|
|
}); |
|
|
|
|
check += 1; |
|
|
|
|
}; |
|
|
|
|
reader.readAsDataURL(this.files[0]);
|
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function addData(){ |
|
|
|
|
function addData() { |
|
|
|
|
|
|
|
|
|
data = { |
|
|
|
|
'name':document.getElementById("nameI").value, |
|
|
|
|
'organization': userData.organizations[0].id, |
|
|
|
|
} |
|
|
|
|
if(document.getElementById("CrI").value != ''){ |
|
|
|
|
if(document.getElementById("CrI").value != '') { |
|
|
|
|
data.caretaker = document.getElementById("CrI").value |
|
|
|
|
} |
|
|
|
|
if(document.getElementById("idI").value != ''){ |
|
|
|
|
if(document.getElementById("idI").value != '') { |
|
|
|
|
data.instrument_id = document.getElementById("idI").value |
|
|
|
|
} |
|
|
|
|
if(document.getElementById("noteI").value != ''){ |
|
|
|
|
if(document.getElementById("noteI").value != '') { |
|
|
|
|
data.note = document.getElementById("noteI").value |
|
|
|
|
} |
|
|
|
|
if(dataUri.length != 0){ |
|
|
|
|
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) |
|
|
|
|
// console.log(data)
|
|
|
|
|
data = JSON.stringify(data) |
|
|
|
|
console.log(data) |
|
|
|
|
// console.log(data)
|
|
|
|
|
token = sessionStorage.getItem('token') |
|
|
|
|
$.ajax({ |
|
|
|
|
type: "POST", |
|
|
|
|
@ -398,7 +672,7 @@ function addData(){
|
|
|
|
|
'Content-Type': 'application/json', |
|
|
|
|
'Authorization': 'Bearer ' + token, |
|
|
|
|
}, |
|
|
|
|
success: function(respone){ |
|
|
|
|
success: function(respone) { |
|
|
|
|
// console.log(respone)
|
|
|
|
|
window.location.reload(true); |
|
|
|
|
}, |
|
|
|
|
@ -406,18 +680,18 @@ function addData(){
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
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)) |
|
|
|
|
function updateData(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){ |
|
|
|
|
if(dataUri.length != 0) { |
|
|
|
|
dataUpdate.clips = dataUri |
|
|
|
|
} |
|
|
|
|
idInstrument = dataInstrument[parseInt(idData)].id |
|
|
|
|
@ -430,7 +704,7 @@ function updateData(idData){
|
|
|
|
|
'Content-Type': 'application/json', |
|
|
|
|
'Authorization': 'Bearer ' + token, |
|
|
|
|
}, |
|
|
|
|
success: function(respone){ |
|
|
|
|
success: function(respone) { |
|
|
|
|
// console.log(respone)
|
|
|
|
|
window.location.reload(true); |
|
|
|
|
}, |
|
|
|
|
@ -438,7 +712,7 @@ function updateData(idData){
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function deleteData(idData){ |
|
|
|
|
function deleteData(idData) { |
|
|
|
|
instrument = dataInstrument[parseInt(idData)] |
|
|
|
|
data = {'hide':true} |
|
|
|
|
token = sessionStorage.getItem('token') |
|
|
|
|
@ -451,7 +725,7 @@ function deleteData(idData){
|
|
|
|
|
'Content-Type': 'application/json', |
|
|
|
|
'Authorization': 'Bearer ' + token, |
|
|
|
|
}, |
|
|
|
|
success: function(respone){ |
|
|
|
|
success: function(respone) { |
|
|
|
|
// console.log(respone)
|
|
|
|
|
window.location.reload(true); |
|
|
|
|
}, |
|
|
|
|
@ -459,32 +733,31 @@ function deleteData(idData){
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function backData(idData){ |
|
|
|
|
function backData(idData) { |
|
|
|
|
var modal = document.getElementById('modal'+idData); |
|
|
|
|
modal.style.display = "none"; |
|
|
|
|
removeImage(idData) |
|
|
|
|
dataUri = [] |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function removeImage(idData){ |
|
|
|
|
function removeImage(idData) { |
|
|
|
|
var tagMiniImage = '' |
|
|
|
|
var style4 = '' |
|
|
|
|
if(idData == 'add'){ |
|
|
|
|
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))
|
|
|
|
|
|
|
|
|
|
var loopImage = dataInstrument[idData].clips.length; |
|
|
|
|
for(j=0;j<loopImage;j++) { |
|
|
|
|
var imgUrl = ''; |
|
|
|
|
if (dataInstrument[idData].clips[j].photo) { |
|
|
|
|
imgUrl = dataInstrument[idData].clips[j]['thumbnail']['sm']; |
|
|
|
|
} |
|
|
|
|
document.getElementById("myImg"+j+''+idData).src = imgUrl+'?'+time; |
|
|
|
|
} |
|
|
|
|
}
|
|
|
|
|
for(j=loopImage;j<4;j++){ |
|
|
|
|
for(j=loopImage;j<4;j++) { |
|
|
|
|
$('#myImg'+j+''+idData).attr('src',''); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
sipp11
