From 35392ca3229e235ab7eba0b555bfee921e96ca8e Mon Sep 17 00:00:00 2001
From: sipp11 <sipp11@zzyzx.co>
Date: Tue, 20 Sep 2016 11:42:40 +0700
Subject: [PATCH] Fix: UI & UX

---
 .gitignore      |    1 +
 bower.json      |   21 +
 css/stdb.css    |   45 +-
 index.html      |   12 +-
 instrument.html |   90 +++-
 js/stdb.js      | 1263 +++++++++++++++++++++++++++--------------------
 login.html      |   10 +
 stat.html       |  155 ++++--
 8 files changed, 993 insertions(+), 604 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 bower.json

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..ceaca38
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+bower_components/*
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..3673397
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,21 @@
+{
+  "name": "stdb-webapp",
+  "authors": [
+    "sipp11 <sipp11@zzyzx.co>"
+  ],
+  "description": "",
+  "main": "",
+  "moduleType": [],
+  "license": "MIT",
+  "homepage": "",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "sweetalert": "^1.1.3"
+  }
+}
diff --git a/css/stdb.css b/css/stdb.css
index 122ade0..0700e33 100755
--- a/css/stdb.css
+++ b/css/stdb.css
@@ -6,6 +6,39 @@ ul {
   background-color: #333;
 }
 
+[type="radio"]:not(:checked), [type="radio"]:checked,
+[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
+  position: static;
+  left: auto;
+  opacity: 1;
+}
+
+.pull-right {
+  float: right;
+}
+
+.danger {
+  color: rgb(201, 0, 0);
+  z-index: 10;
+}
+
+a.hideBtn {
+  background: white;
+  padding: 2rem;
+  margin: 1rem;
+}
+
+span.tag {
+  background: #ccc;
+  margin: 0 5px;
+  border-radius: 3px;
+  padding: 0 1rem;
+  color: black;
+}
+
+ul.list-inline {
+  background: white;
+}
 li {
   float: left;
 }
@@ -216,23 +249,25 @@ img{
 
 /* Author :: Apirak */
 /* Add cover image to display */
-.box-left {
+
+/*.box-left {
   width: 20%;
   height: 100%;
   display: inline-table;
 }
 
 .box-right {
-  /*float: right;*/
+  float: right;
   width: 80%;
   height: 100%;
   display: inline-table;
-}
+}*/
+
 img.cover-img {
   width: 120px;
   height: 120px;
-  margin-top: -2%;
-  margin-left: 1%;
+  /*margin-top: -2%;*/
+  /*margin-left: 1%;*/
 }
 /* End */
 
diff --git a/index.html b/index.html
index afc4953..3225b74 100755
--- a/index.html
+++ b/index.html
@@ -41,7 +41,15 @@
 		
 
 </body>
-<script language="javascript">
-	
+
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+  ga('create', 'UA-72505920-2', 'auto');
+  ga('send', 'pageview');
+
 </script>
 </html>
diff --git a/instrument.html b/instrument.html
index af9115b..1c9acb2 100755
--- a/instrument.html
+++ b/instrument.html
@@ -7,27 +7,62 @@
     content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"> -->
   <title>Traffy STDB</title>
   <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="//api.traffy.xyz/static/font-awesome/css/font-awesome.min.css" />
   <link rel="shortcut icon" type="image/png" href="https://avatars1.githubusercontent.com/u/17867603?v=3&s=200"/>
-  <script src="js/jquery-3.0.0.min.js"></script>
+  <script src="//api.traffy.xyz/static/jquery/dist/jquery.min.js"></script>
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <script src="//api.traffy.xyz/static/underscore/underscore-min.js"></script>
   <script type="text/javascript" src="js/materialize.min.js"></script>
   <script type="text/javascript" src="js/jwtDecode.min.js"></script>
-  <script type="text/javascript" src="js/stdb.js"></script>
   <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
   <link type="text/css" rel="stylesheet" href="css/stdb.css"  media="screen,projection"/>
+  <link rel="stylesheet" type="text/css" href="/bower_components/sweetalert/dist/sweetalert.css">
   <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 <style>
-	
+	div.tags {
+		margin: 0 auto;
+		padding: 10px 3rem;
+		background: rgba(0, 153, 204, 1);
+	}
+
+	div.tags>ul.list-inline {
+	  background: rgba(0, 153, 204, 1);
+	}
+	#is-filter {
+		background: white;
+		padding-left: 10rem;
+		padding-right: 10rem;
+	}
+	#is-filter label {
+		padding: 0 1rem;
+		font-size: 1.1rem;
+		color: rgba(91, 91, 91, 1);
+	}
+	.box_ {
+		display: flex;
+		flex-direction: row;
+	}
+	.box-left {
+		width: 140px;
+		display: flex;
+	  align-items: center;
+	  justify-content: center;
+	}
+	.box-right {
+		flex: 1;
+	}
+	.box-right .card-title {
+		padding-right: 20px;
+	}
 </style>
 </head>
 <body>
-
 		<div>
 			<ul class="titleIn">
 				<center>
 					<li><a href="javascript:history.go(0)" class="active">Instrument</a></li>
 				  <li style="float:right;font-size:18px"><a onClick="LogoutPage()">Logout</a></li>
-				  <li style="float:right;font-size:18px"><a onClick="modalItem('add')">+ Add Instrument</a></li>
+				  <li style="float:right;font-size:18px"><a onClick="modalItem('add')">Add Instrument</a></li>
 				  <li style="float:right;"><a class="material-icons" onclick="modalItem('search')" style="color:#FFF;">search</a></li>
 				</center>
 			</ul>
@@ -83,6 +118,25 @@
 				</li>
 			</div>
 		</div>
+
+		<div class="boxShow" id="is-filter">
+			<ul class="list-inline">
+				<li><label>
+					<input type="checkbox" name="is" value="has_photo">
+						มีรูป
+				</label></li>
+				<li><label>
+					<input type="checkbox" name="is" value="missing">
+						ข้อมูลไม่ครบ
+				</label></li>
+				<li><label>
+					<input type="checkbox" name="is" value="completed">
+						ข้อมูลครบถ้วน
+				</label></li>
+			</ul>
+		</div>
+		<div class="boxShow" id="any-filter">
+		</div>
 		
 		<div id="card" class="container" style="max-width:800px"></div>
 					
@@ -166,7 +220,33 @@
 		</div>
 
 
+<script type="text/template" class="template" id="tag-list">
+<div class="tags">
+	<ul class="list-inline"><% for (i in items) {%>
+		<li><label>
+			<input type="checkbox" name="tags" value="<%- items[i][0] %>"
+				<%- (selected.indexOf(items[i][0]) > -1 ? "checked": "") %>
+				>
+				<span class="tag"><%- items[i][0] %></span>
+		</label></li>
+	<% } %></ul>
+<div>
+</script>
+
+
+<script src="/bower_components/sweetalert/dist/sweetalert.min.js"></script>
+<script type="text/javascript" src="js/stdb.js"></script>
 </body>
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+  ga('create', 'UA-72505920-2', 'auto');
+  ga('send', 'pageview');
+
+</script>
 <script language="javascript">
 
 	function searchItem(idSearch){
diff --git a/js/stdb.js b/js/stdb.js
index 043e3ea..45c9770 100755
--- a/js/stdb.js
+++ b/js/stdb.js
@@ -6,592 +6,759 @@ 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();
-	}
+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',
+  });
 }
 
-function LogoutPage(){
-	localStorage.removeItem('token');
-	sessionStorage.removeItem('token');
-	window.location.href = 'index.html'
+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();
+  });
 }
 
-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',
-		});
-	}
+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 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 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) {
-	// 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
+  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"});
+    $("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");
+    $("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 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 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 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 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){
+function getCoverImg(arr) {
+  var link="";
+  $.each(arr,function(index,obj) {
 
-		if(obj.order == 0)
-		{	
-			link=obj.photo;
-		}
-	});
-	return link;
+    if(obj.order == 0)
+    { 
+      link=obj.thumbnail.sm;
+    }
+  });
+  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 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++){
-										$('#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]);       
-				}
-		});
+    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 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 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 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 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','');
-	}
+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()
\ No newline at end of file
diff --git a/login.html b/login.html
index 99bd07f..5679158 100755
--- a/login.html
+++ b/login.html
@@ -115,4 +115,14 @@
   }
   getToken()
 </script>
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+  ga('create', 'UA-72505920-2', 'auto');
+  ga('send', 'pageview');
+
+</script>
 </html>
diff --git a/stat.html b/stat.html
index 82eaf0b..87ac7f6 100755
--- a/stat.html
+++ b/stat.html
@@ -5,9 +5,11 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <title>Traffy STDB Stat</title>
   <link rel="shortcut icon" type="image/png" href="https://avatars1.githubusercontent.com/u/17867603?v=3&s=200"/>
+  <link rel="stylesheet" href="//api.traffy.xyz/static/font-awesome/css/font-awesome.min.css" />
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <script src="js/jquery-3.0.0.min.js"></script>
   <script type="text/javascript" src="js/materialize.min.js"></script>
+  <script src="//api.traffy.xyz/static/underscore/underscore-min.js"></script>
   <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
   <link type="text/css" rel="stylesheet" href="css/stdb.css"  media="screen,projection"/>
   <style>
@@ -45,6 +47,21 @@
 	  display: -webkit-flex;
 	  display: flex;
 	}
+	.tag-container {
+		padding: 1rem;
+	}
+	ul.list-inline {
+		background: white;
+	}
+	ul.list-inline li {
+		margin: 0 1rem 0 5px;
+	}
+	span.tag {
+		background: #ccc;
+		margin: 0 5px;
+		border-radius: 3px;
+		padding: 0 1rem;
+	}
   </style>
 </head>
 
@@ -58,58 +75,108 @@
 			</div>
 		</div>
 
-		<div id="organiz" style="max-width:800px"></div>
+		<div id="organiz" style="max-width:800px">
+			<div class="text-center">
+				<i class="fa fa-4x fa-spin fa-spinner"></i>
+			</div>
+		</div>
 
 	</div>
 
 		
 
 </body>
-<script language="javascript">
-	function getStatAll(){
-		urlStat = 'http://expert.traffy.xyz/api/v2/organization/stats/'
-		// console.log(urlStat)
-		$.ajax({
-			type: "GET",
-			url: urlStat,
-			success: getData,
-			dataType: 'json',
+
+<script type="text/template" class="template" id="each-org">
+<div class="cardStyle organization"
+		id="org-<%- organization.id %>"
+		data-org="<%- organization.id %>"
+		style="width:800px">
+	<h3 style="font-size:26px;margin-left:20px "><%- organization.name %> (<%- organization.abbv_en %>)</h3>
+	<div class="flexCenterSpace">
+		<div class="flex-container column flexCenter">
+			<i class="medium material-icons " style="">thumb_up</i>
+			<i class="" style="">ข้อมูลครบ</i>
+			<i class="" style=""><%- items.completed %></i>
+		</div>
+		<div class="flex-container column flexCenter">
+			<i class="medium material-icons " style="">trending_up</i>
+			<i class="" style="">ข้อมูลอัพเดท</i>
+			<i class="" style=""><%- items.recent_update %></i>
+		</div>
+		<div class="flex-container column flexCenter">
+			<i class="medium material-icons " style="">featured_play_list</i>
+			<i class="" style="">ทั้งหมด</i>
+			<i class="" style=""><%- items.all %></i>
+		</div>
+		<div class="flex-container column flexCenter">
+			<i class="medium material-icons " style="">photo</i>
+			<i class="" style="">มีรูป</i>
+			<i class="" style=""><%- items.photos %></i>
+		</div>
+	</div>
+	<div class="tag-container">
+		<i class="fa fa-spin fa-spinner"></i>
+	</div>
+</div>
+</script>
+
+
+<script type="text/template" class="template" id="tag-list">
+<div class="tags">
+	<ul class="list-inline"><% for (i in items) {%>
+		<li><span class="tag"><%- items[i][0] %></span> <%- items[i][1] %></li>
+	<% } %></ul>
+<div>
+</script>
+
+<script>
+	var orgTmpl = _.template($("script#each-org").html());
+	var tagsTmpl = _.template($("script#tag-list").html());
+
+	var getOrgTags = function(orgId) {
+		var url = `//www.serv.stdb.most.go.th/api/v2/organization/${orgId}/tags/`;
+		var promise = $.get(url);
+		var $box = $('#org-' + orgId);
+		promise.fail(function() {
+			$box.find('.tag-container').html('');
+		});
+		promise.done(function(resp) {
+			console.log(resp);
+			$box.find('.tag-container').html(tagsTmpl({items: resp}));
 		});
 	}
 
-	function getData(respone){
-		// console.log(respone)
-		var htmlText = ''
-		for (i=0;i<respone.length;i++ ){ 
-			htmlText = htmlText+"<div class='cardStyle' style='width:800px;height:200px'>"
-			+"<h3 style='font-size:26px;margin-left:20px '>"+respone[i].organization.name+' ('+respone[i].organization.abbv_en+') '+"</h3>"
-			+"<div class='flexCenterSpace'>"
-				+"<div class='flex-container column flexCenter'>"
-					+"<i class='medium material-icons ' style=''>thumb_up</i>"
-					+"<i class='' style=''>ข้อมูลครบ</i>"
-					+"<i class='' style=''>"+respone[i].items.completed+"</i>"
-				+"</div>"
-				+"<div class='flex-container column flexCenter'>"
-					+"<i class='medium material-icons ' style=''>trending_up</i>"
-					+"<i class='' style=''>ข้อมูลอัพเดท</i>"
-					+"<i class='' style=''>"+respone[i].items.recent_update+"</i>"
-				+"</div>"
-				+"<div class='flex-container column flexCenter'>"
-					+"<i class='medium material-icons ' style=''>featured_play_list</i>"
-					+"<i class='' style=''>ทั้งหมด</i>"
-					+"<i class='' style=''>"+respone[i].items.all+"</i>"
-				+"</div>"
-				+"<div class='flex-container column flexCenter'>"
-					+"<i class='medium material-icons ' style=''>photo</i>"
-					+"<i class='' style=''>มีรูป</i>"
-					+"<i class='' style=''>"+respone[i].items.photos+"</i>"
-				+"</div>"
-			+"</div>"
-		+"</div>"
-
-		}
-		document.getElementById("organiz").innerHTML = htmlText
-	}
-	getStatAll()
+	var getStatAll = function() {
+		urlStat = '//www.serv.stdb.most.go.th/api/v2/organization/stats/';
+		var promise = $.get(urlStat)
+
+		promise.fail(function() {
+			document.getElementById("organiz").innerHTML = 'Try reloading';
+		});
+		promise.done(function(resp) {
+			var htmlText = ''
+			for (i=0;i<resp.length;i++ ) {
+				htmlText += orgTmpl(resp[i]);
+			}
+			document.getElementById("organiz").innerHTML = htmlText;
+
+			setTimeout(function() {
+				for (i=0;i<resp.length;i++ ) {
+					getOrgTags(resp[i].organization.id);
+				}
+			}, 500);
+		});
+	};
+
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+	getStatAll();
+  ga('create', 'UA-72505920-2', 'auto');
+  ga('send', 'pageview');
+
 </script>
 </html>