stdbWeb/js/stdb.js

var numAll = ''
var numPhoto = '' 
var token = ''
var userData
var dataInstrument = []
var start = 0
var nextUrl = ''
htmlText = ''
var dataUri = [];
var processingNext = false;
var clickOnHideButton = false;
var xhr = null;
var tagsTmpl = _.template($("script#tag-list").html());

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) {
    token = localStorage.getItem("token")
    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");
  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) {
      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 = [];
      }
      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 :{
          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');
  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) {
  dataInstrument = dataInstrument.concat(respone.results)
  var htmlText = ''
  var modalText = ''

  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="'+cover_img+'" class="cover-img">'
        +'</div>'
    }
    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 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>';
    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">'
                +'<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) {
        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'
          }
          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="'+imgUrl+'" 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{
        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>';

        }
      }
      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="'+imgUrl+'" 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 id='moreText'>More</h4>"
                +"</div>";
    nextUrl = respone.next
    document.getElementById("more").innerHTML =  moreText;
  }
  else{
    nextUrl = ''
    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(x) {
  if (processingNext) {
    return;
  }
  processingNext = true;
  $('#moreText').html('<i class="fa fa-spin fa-spinner"></i>');
  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.thumbnail.sm;
    }
  });
  return link;
}

function modalItem(idCard) {
  if (clickOnHideButton) {
    return;
  }
  var modal = document.getElementById('modal'+idCard);
  var btn = document.getElementById(idCard);
  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++) {
                  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) {
                idloopImage = 0
              }
              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() {

  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) {
  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;
    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++) {
    $('#myImg'+j+''+idData).attr('src','');
  }
}
getStartPage()