1
0
Fork 0
Browse Source

Update from Jack

master
sipp11 8 years ago
parent
commit
9633dec190
  1. 0
      css/bootstrap-theme.min.css
  2. 0
      css/bootstrap-theme.min.css.map
  3. 0
      css/bootstrap.min.css
  4. 0
      css/bootstrap.min.css.map
  5. 0
      css/materialize.css
  6. 0
      css/materialize.min.css
  7. 54
      css/stdb.css
  8. 0
      css/style.css
  9. 0
      font/material-design-icons/LICENSE.txt
  10. 0
      font/material-design-icons/Material-Design-Icons.eot
  11. 0
      font/material-design-icons/Material-Design-Icons.svg
  12. 0
      font/material-design-icons/Material-Design-Icons.ttf
  13. 0
      font/material-design-icons/Material-Design-Icons.woff
  14. 0
      font/material-design-icons/Material-Design-Icons.woff2
  15. 0
      font/roboto/Roboto-Bold.eot
  16. 0
      font/roboto/Roboto-Bold.ttf
  17. 0
      font/roboto/Roboto-Bold.woff
  18. 0
      font/roboto/Roboto-Bold.woff2
  19. 0
      font/roboto/Roboto-Light.eot
  20. 0
      font/roboto/Roboto-Light.ttf
  21. 0
      font/roboto/Roboto-Light.woff
  22. 0
      font/roboto/Roboto-Light.woff2
  23. 0
      font/roboto/Roboto-Medium.eot
  24. 0
      font/roboto/Roboto-Medium.ttf
  25. 0
      font/roboto/Roboto-Medium.woff
  26. 0
      font/roboto/Roboto-Medium.woff2
  27. 0
      font/roboto/Roboto-Regular.eot
  28. 0
      font/roboto/Roboto-Regular.ttf
  29. 0
      font/roboto/Roboto-Regular.woff
  30. 0
      font/roboto/Roboto-Regular.woff2
  31. 0
      font/roboto/Roboto-Thin.eot
  32. 0
      font/roboto/Roboto-Thin.ttf
  33. 0
      font/roboto/Roboto-Thin.woff
  34. 0
      font/roboto/Roboto-Thin.woff2
  35. 0
      fonts/roboto/Roboto-Bold.eot
  36. 0
      fonts/roboto/Roboto-Bold.ttf
  37. 0
      fonts/roboto/Roboto-Bold.woff
  38. 0
      fonts/roboto/Roboto-Bold.woff2
  39. 0
      fonts/roboto/Roboto-Light.eot
  40. 0
      fonts/roboto/Roboto-Light.ttf
  41. 0
      fonts/roboto/Roboto-Light.woff
  42. 0
      fonts/roboto/Roboto-Light.woff2
  43. 0
      fonts/roboto/Roboto-Medium.eot
  44. 0
      fonts/roboto/Roboto-Medium.ttf
  45. 0
      fonts/roboto/Roboto-Medium.woff
  46. 0
      fonts/roboto/Roboto-Medium.woff2
  47. 0
      fonts/roboto/Roboto-Regular.eot
  48. 0
      fonts/roboto/Roboto-Regular.ttf
  49. 0
      fonts/roboto/Roboto-Regular.woff
  50. 0
      fonts/roboto/Roboto-Regular.woff2
  51. 0
      fonts/roboto/Roboto-Thin.eot
  52. 0
      fonts/roboto/Roboto-Thin.ttf
  53. 0
      fonts/roboto/Roboto-Thin.woff
  54. 0
      fonts/roboto/Roboto-Thin.woff2
  55. 122
      index.html
  56. 167
      instrument.html
  57. 0
      js/bootstrap.js
  58. 0
      js/bootstrap.min.js
  59. 0
      js/jquery-3.0.0.min.js
  60. 0
      js/jwtDecode.min.js
  61. 0
      js/materialize.js
  62. 0
      js/materialize.min.js
  63. 0
      js/npm.js
  64. 309
      js/stdb.js
  65. 236
      login.html
  66. 0
      scss/style.scss
  67. 115
      stat.html

0
css/bootstrap-theme.min.css vendored

0
css/bootstrap-theme.min.css.map

0
css/bootstrap.min.css vendored

0
css/bootstrap.min.css.map

0
css/materialize.css vendored

0
css/materialize.min.css vendored

54
css/stdb.css

@ -68,6 +68,7 @@ img{
width: 100%; width: 100%;
color:#FFF; color:#FFF;
font-size:30px; font-size:30px;
z-index:1;
} }
.container{ .container{
margin-right: auto; margin-right: auto;
@ -155,7 +156,7 @@ img{
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 1000px; height: 100%;
overflow: auto; overflow: auto;
background-color: rgb(0,0,0); background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4); background-color: rgba(0,0,0,0.4);
@ -212,3 +213,54 @@ img{
border: 0px; border: 0px;
} }
/* Author :: Apirak */
/* Add cover image to display */
.box-left {
width: 20%;
height: 100%;
display: inline-table;
}
.box-right {
/*float: right;*/
width: 80%;
height: 100%;
display: inline-table;
}
img.cover-img {
width: 120px;
height: 120px;
margin-top: -2%;
margin-left: 1%;
}
/* End */
/* upload img */
a.btn-edit{
position: relative;
margin-left: 70%;
margin-top: 15%;
padding-left: 5px;
padding-right: 5px;
background-color: rgba(0,0,0,0.13);
border-radius: 10px;
color: white;
}
.modal h2{
margin-left: -300%;
}
a.btn-edit#order0{
margin-top: -85%;
margin-left: 84%;
}
.upload{
z-index: -1;
}
iframe{
margin-left: 13%;
margin-top: -13%;
}
img.img-with-youtube{
height: 300px;
}

0
css/style.css

0
font/material-design-icons/LICENSE.txt

0
font/material-design-icons/Material-Design-Icons.eot

0
font/material-design-icons/Material-Design-Icons.svg

Before

Width:  |  Height:  |  Size: 322 KiB

After

Width:  |  Height:  |  Size: 322 KiB

0
font/material-design-icons/Material-Design-Icons.ttf

0
font/material-design-icons/Material-Design-Icons.woff

0
font/material-design-icons/Material-Design-Icons.woff2

0
font/roboto/Roboto-Bold.eot

0
font/roboto/Roboto-Bold.ttf

0
font/roboto/Roboto-Bold.woff

0
font/roboto/Roboto-Bold.woff2

0
font/roboto/Roboto-Light.eot

0
font/roboto/Roboto-Light.ttf

0
font/roboto/Roboto-Light.woff

0
font/roboto/Roboto-Light.woff2

0
font/roboto/Roboto-Medium.eot

0
font/roboto/Roboto-Medium.ttf

0
font/roboto/Roboto-Medium.woff

0
font/roboto/Roboto-Medium.woff2

0
font/roboto/Roboto-Regular.eot

0
font/roboto/Roboto-Regular.ttf

0
font/roboto/Roboto-Regular.woff

0
font/roboto/Roboto-Regular.woff2

0
font/roboto/Roboto-Thin.eot

0
font/roboto/Roboto-Thin.ttf

0
font/roboto/Roboto-Thin.woff

0
font/roboto/Roboto-Thin.woff2

0
fonts/roboto/Roboto-Bold.eot

0
fonts/roboto/Roboto-Bold.ttf

0
fonts/roboto/Roboto-Bold.woff

0
fonts/roboto/Roboto-Bold.woff2

0
fonts/roboto/Roboto-Light.eot

0
fonts/roboto/Roboto-Light.ttf

0
fonts/roboto/Roboto-Light.woff

0
fonts/roboto/Roboto-Light.woff2

0
fonts/roboto/Roboto-Medium.eot

0
fonts/roboto/Roboto-Medium.ttf

0
fonts/roboto/Roboto-Medium.woff

0
fonts/roboto/Roboto-Medium.woff2

0
fonts/roboto/Roboto-Regular.eot

0
fonts/roboto/Roboto-Regular.ttf

0
fonts/roboto/Roboto-Regular.woff

0
fonts/roboto/Roboto-Regular.woff2

0
fonts/roboto/Roboto-Thin.eot

0
fonts/roboto/Roboto-Thin.ttf

0
fonts/roboto/Roboto-Thin.woff

0
fonts/roboto/Roboto-Thin.woff2

122
index.html

@ -3,115 +3,45 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" <title>Traffy</title>
content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"> <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<title>Login Form</title> <link type="text/css" rel="stylesheet" href="css/stdb.css" media="screen,projection"/>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="https://avatars1.githubusercontent.com/u/17867603?v=3&s=200"/> <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="js/jquery-3.0.0.min.js"></script>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style> <style>
.flexCenter {
display:flex; html {
height: 550px; height: 100%;
justify-content: center; }
align-items:center;
} body {
min-height: 100%;
}
a:active {
-webkit-text-fill-color: #000000;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #000000;
}
</style> </style>
</head> </head>
<body> <body class="flexCenter" style="background-color:#0ca3d2;">
<section id="boxlogin" class="container">
</section>
</body>
<script language="javascript">
var token = ''
function pasuser(form) { <div >
var data = {"username": form.login.value, "password": form.password.value} <div>
// console.log(form.login.value) <a href="login.html" style="font-size:100px;color:#F0F0F0;" >LOGIN</a>
// console.log(form.password.value) <h style="font-size:200px;color:#F0F0F0;" >|</h>
// console.log(data) <a href="stat.html" style="font-size:100px;color:#F0F0F0;" >STAT</a>
$.ajax({ </div>
type: "POST", </div>
url: 'http://www.serv.stdb.most.go.th/api-token-auth/',
data: data,
success: success,
dataType: 'json'
});
}
function success(respone) {
// console.log(respone)
// console.log(respone.token)
localStorage.setItem("token", respone.token);
getToken();
}
function getToken(){
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: checkToken,
dataType: 'json'
});
}
else{
loginPage();
}
}
else{
window.location.href = 'login.html';
}
}
function checkToken(tokenrespone) { </body>
sessionStorage.getItem('token',tokenrespone.token); <script language="javascript">
try {
if( tokenrespone.token === token ){
window.location.href = 'login.html';
// console.log('go to page');
// console.log(tokenrespone.token);
}
}
catch(err) {
// console.log(err.message);
loginPage();
}
}
function loginPage(){
localStorage.removeItem('token');
var loginTag = '<div class="login">'
+'<h1>Login to STDB</h1>'
+'<form method="post" >'
+'<p><input type="text" name="login" value="" placeholder="Username or Email"></p>'
+'<p><input type="password" name="password" value="" placeholder="Password"></p>'
+'<p class="remember_me">'
+'<label>'
+'<input type="checkbox" name="remember_me" id="remember_me">'
+'Remember me on this computer'
+'</label>'
+'</p>'
+' <p class="submit"><input type="button" value="Login" onClick="pasuser(this.form)"></p>'
+'</form>'
+'</div>'
document.getElementById("boxlogin").innerHTML = loginTag
}
getToken()
</script> </script>
</html> </html>

167
instrument.html

@ -0,0 +1,167 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- <meta name="viewport"
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="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>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<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"/>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
</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;"><a class="material-icons" onclick="modalItem('search')" style="color:#FFF;">search</a></li>
</center>
</ul>
</div>
<div class="boxShow">
<div id="nameOrgan" class="flexCenter" style="margin-top:120px;font-size:40px;color:#F0F0F0"></div>
</div>
<div class="boxShow">
<!-- like -->
<div style="margin-top:20px;">
<li class="cardData" >
<div>
<i class="medium material-icons " style="">thumb_up</i>
<div class="flexCenter" style="font-size:18px;" id='like'></div>
<div style="font-size:14px;color:#868686" id='like'>(Last 7 day)</div>
</div>
</li>
<!-- status -->
<li class="cardData" >
<div>
<i class="medium material-icons " style="color:#4CAF50">trending_up</i>
<div class="flexCenter" style="font-size:18px;" id='status'></div>
<div style="font-size:14px;color:#868686" id='like'>(Last 7 day)</div>
</div>
</li>
<!-- accountActive -->
<li class="cardData" >
<div>
<i class="medium material-icons " style="">people</i>
<div class="flexCenter" style="font-size:18px;" id='accountActive'></div>
<div style="font-size:14px;color:#868686" id='like'>(Last 7 day)</div>
</div>
</li>
<!-- equipment -->
<li class="cardData" style="width: 300px;display:block;" >
<center><h1 style="font-size:18px;margin-top:10px;margin-bottom:15px">ปกรณ</h1></center>
<div class="flexCenterSpace">
<i class="medium material-icons ">featured_play_list</i>
<i class="medium material-icons ">photo</i>
</div>
<div class="flexCenterSpace" style="margin-top:-3px;">
<i style='margin-right:15px'>งหมด</i>
<i style='margin-right:10px'></i>
</div>
<div class="flexCenterSpace" style="margin-top:-5px;">
<i id="numAll" style='margin-right:15px'></i>
<i id="numPhoto" style='margin-right:10px'></i>
</div>
</li>
</div>
</div>
<div id="card" class="container" style="max-width:800px"></div>
<div id="modalAll" ></div>
<div id="more" class="container" style="max-width:800px;height:80px"> </div >
<div id="modaladd" class="modal" style="max-height: 100%;display: none;padding-top:10px;">
<div class="modal-content cardStyle" >
<div class="flexCenter">
<div class="flexCenter bgImage">
<div class="flexCenter">
<img id="myImg0add" src="" alt=""/>
<div class="bgImage flexCenter"><h2>ไมปภาพ</h2></div>
</div>
<div class="column bgMiniImage" style="margin-left:10px">
<img id="myImg1add" class="miniImage" src="" alt=""/>
<h6 class="miniImage flexCenter" >ไมปภาพ</h6>
<img id="myImg2add" class="miniImage" src="" alt=""/>
<h6 class="miniImage flexCenter" >ไมปภาพ</h6>
<img id="myImg3add" 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('add')"/>'
</div>'
<div>
<div style="font-size:20px;margin-top:10px">อครณฑทยาศาสตร</div>
<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="nameI" name="nameI" value="" placeholder="ชอครณฑทยาศาสตร"></div>
</div>
<div>
<div style="font-size:20px;margin-top:10px">ดประสงคและลกษณะการใชงาน</div>
<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="noteI" name="noteI" value="" placeholder="จดประสงคและลกษณะการใชงาน"></div>
</div>
<div>
<div style="font-size:20px;margin-top:10px">เลขครณฑ</div>
<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="idI" name="idI" value="" placeholder="เลขครณฑ"></div>
</div>
<div>
<div style="font-size:20px;margin-top:10px">แล</div>
<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="CrI" name="CrI" value="" placeholder="ชอ นามสกล"></div>
</div>
<div>
<div style="font-size:20px;margin-top:10px">โอ(youtube)</div>
<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="YlI" name="YlI" value="" placeholder="https://www.youtube.com/watch?v=xxxxx"></div>
</div>
<div class="flexCenterSpace" style="margin-top:20px">
<input type="button" onclick="addData('add')" class="buttonUpdate" value="Add">
<input type="button" onclick="backData('add')" class="buttonBack" value="Back">
</div>
</div>
</div>
<div id="modalsearch" class="modal" style="max-height: 100%;display: none;padding-top:100px;">
<div class="modal-content cardStyle" >
<div>
<input type="text" class="cardSearch" id="searchId" value="" placeholder="Search">
<div class="flexEnd">
<button class="buttonSearch flexCenter" onclick="searchItem('search')">
<a class="material-icons" style="color:#FFF;">search</a>
</button>
</div>
</div>
</div>
</div>
</body>
<script language="javascript">
function searchItem(idSearch){
var modal = document.getElementById('modal'+idSearch);
modal.style.display = "none";
getUser('search')
}
</script>
</html>

0
js/bootstrap.js vendored

0
js/bootstrap.min.js vendored

0
js/jquery-3.0.0.min.js vendored

0
js/jwtDecode.min.js vendored

0
js/materialize.js vendored

0
js/materialize.min.js vendored

309
js/stdb.js

@ -30,7 +30,7 @@ function getStartPage(){
}); });
} }
else{ else{
window.location.href = 'index.html' window.location.href = 'login.html'
} }
} }
else{ else{
@ -85,7 +85,7 @@ function getUser(status){
token = sessionStorage.getItem("token") token = sessionStorage.getItem("token")
var searchText = '' var searchText = ''
if (status === 'search'){ if (status === 'search'){
console.log("search") // console.log("search")
dataInstrument = [] dataInstrument = []
searchText = '&search='+document.getElementById("searchId").value searchText = '&search='+document.getElementById("searchId").value
start = 0 start = 0
@ -94,12 +94,12 @@ function getUser(status){
htmlText = ''; htmlText = '';
modalText = ''; modalText = '';
dataInstrument = []; dataInstrument = [];
console.log(' >> end of search button'); // console.log(' >> end of search button');
console.log(dataInstrument) // console.log(dataInstrument)
console.log($('#card').html()); // console.log($('#card').html());
} }
var url = 'http://www.serv.stdb.most.go.th/api/v2/instrument/?organization='+respone.organizations[0].id+searchText; var url = 'http://www.serv.stdb.most.go.th/api/v2/instrument/?organization='+respone.organizations[0].id+searchText;
console.log('url = ' + url) // console.log('url = ' + url)
$.ajax({ $.ajax({
type: "GET", type: "GET",
url: url, url: url,
@ -120,7 +120,7 @@ function getUser(status){
function getDataStat(respone){ function getDataStat(respone){
getUser('first'); getUser('first');
// console.log(respone) // console.log(respone)
document.getElementById("like").innerHTML = '0' document.getElementById("like").innerHTML = respone.items.completed
document.getElementById("status").innerHTML = '+'+respone.items.recent_update document.getElementById("status").innerHTML = '+'+respone.items.recent_update
document.getElementById("accountActive").innerHTML = respone.users.active document.getElementById("accountActive").innerHTML = respone.users.active
document.getElementById("numAll").innerHTML = respone.items.all document.getElementById("numAll").innerHTML = respone.items.all
@ -129,7 +129,9 @@ function getDataStat(respone){
function getData(respone) { function getData(respone) {
// console.log(dataInstrument) // console.log(dataInstrument)
// console.log(respone) console.log(respone)
console.log("---------------- Next")
console.log(respone.next)
// console.log(respone.results) // console.log(respone.results)
console.log(dataInstrument) console.log(dataInstrument)
dataInstrument = dataInstrument.concat(respone.results) dataInstrument = dataInstrument.concat(respone.results)
@ -139,75 +141,98 @@ function getData(respone) {
var modalText = '' var modalText = ''
for (i=start;i<dataInstrument.length;i++ ){ for (i=start;i<dataInstrument.length;i++ ){
console.log('========='+i+'==========') // console.log('========='+i+'==========')
// console.log(dataInstrument[i].name) // 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()+")'>" htmlText = htmlText+"<div id='"+i.toString()+"'' class='cardStyle' onclick='modalItem("+i.toString()+")'>"
+'<h3 style="font-size:26px;margin-left:20px " >'+dataInstrument[i].name+'</h3>' // Author :: Apirak
+'<h3 style="color:#9E9E9E;font-size:22px;margin-left:20px " >#'+dataInstrument[i].custom_id+'</h3>' + imageInstrument
+'<h3 style="color:#9E9E9E;font-size:22px;margin-left:20px " >@'+dataInstrument[i].caretaker+'</h3>' // end of left
+'<div class="box-right">'
+'<h3 style="font-size:26px;margin-left:20px " >'+dataInstrument[i].name+'</h3>'
+'<h3 style="color:#9E9E9E;font-size:22px;margin-left:20px " >#'+dataInstrument[i].custom_id+'</h3>'
+'<h3 style="color:#9E9E9E;font-size:22px;margin-left:20px " >@'+dataInstrument[i].caretaker+'</h3>'
+'</div>'// end of right
// End
+'</div>'; +'</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){ if(dataInstrument[i].clips.length === 0){
// console.log('========= = 0 =========')
imageTag = '<div class="flexCenter">' imageTag = '<div class="flexCenter">'
+'<div class="flexCenter bgImage">' +'<div class="flexCenter bgImage">'
+'<div class="flexCenter">' +'<div class="flexCenter">'
+'<img id="myImg0'+i+'" src="" alt=""/>' +'<img id="myImg0'+i+'" src="" alt=""/>'
+'<div class="bgImage flexCenter"><h2>ไมปภาพ</h2></div>' +'<div class="bgImage flexCenter"><h2>ไมปภาพ</h2></div>'
+'</div>' +'</div>'
+'<div class="column bgMiniImage" style="margin-left:10px">' +'<div class="column bgMiniImage" style="margin-left:10px">'
+'<img id="myImg1'+i+'" class="miniImage" src="" alt=""/>' +'<img id="myImg1'+i+'" class="miniImage" src="" alt=""/>'
+'<h6 class="miniImage flexCenter" >ไมปภาพ</h6>' +'<h6 class="miniImage flexCenter" >ไมปภาพ</h6>'
+'<img id="myImg2'+i+'" class="miniImage" src="" alt=""/>' +'<img id="myImg2'+i+'" class="miniImage" src="" alt=""/>'
+'<h6 class="miniImage flexCenter" >ไมปภาพ</h6>' +'<h6 class="miniImage flexCenter" >ไมปภาพ</h6>'
+'<img id="myImg3'+i+'" class="miniImage" style="margin-top:5px" src="" alt=""/>' +'<img id="myImg3'+i+'" class="miniImage" style="margin-top:5px" src="" alt=""/>'
+'<h6 class="miniImage flexCenter" style="margin-top:5px">ไมปภาพ</h6>' +'<h6 class="miniImage flexCenter" style="margin-top:5px">ไมปภาพ</h6>'
+'</div>' +'</div>'
+'</div>' +'</div>'
+'</div>' +'</div>'
+'<div class="flexCenter" style="margin-top:5px;">' +'<div class="flexCenter" style="margin-top:5px;">'
+'<div class="upload flexCenter">' +'<div class="upload flexCenter">'
+'<a style="font-size:18px">Upload</a></div>' +'<a style="font-size:18px">Upload</a></div>'
+'<input type="file" name="upload" onclick="uploadImage('+i.toString()+')"/>' +'<input type="file" name="upload" onclick="uploadImage('+i.toString()+')"/>'
+'</div>' +'</div>'
} }
else{ else{
if(dataInstrument[i].clips.length > 1){ var style4 = ''
if(dataInstrument[i].clips.length >= 2){
// console.log('*********** >= 2 ***********')
var tagMiniImage = '' var tagMiniImage = ''
var loopImage = dataInstrument[i].clips.length var loopImage = dataInstrument[i].clips.length
var style4 = '' if (loopImage > 4){
for(j=1;j<loopImage-1;j++){ loopImage = 4
}
for(j=1;j<loopImage;j++){
if (j==3){ if (j==3){
style4 = 'style="margin-top:5px"' style4 = 'margin-top:5px'
} }
tagMiniImage = tagMiniImage tagMiniImage = tagMiniImage
+'<img id="myImg'+j+''+i+'" class="miniImage" '+style4+' src="'+dataInstrument[i].clips[j].photo+'" alt=""/>' +'<img id="myImg'+j+''+i+'" class="miniImage" style="'+style4+'" src="'+dataInstrument[i].clips[j].photo+'" alt=""/>'
+'<h6 class="miniImage flexCenter" ></h6>'; +'<h6 class="miniImage flexCenter" >ไมปภาพ</h6>';
} }
for(j=loopImage-1;j<3;j++){ for(j=loopImage;j<4;j++){
if (j==3){ if (j==3){
style4 = 'style="margin-top:5px"' style4 = 'margin-top:5px'
} }
tagMiniImage = tagMiniImage tagMiniImage = tagMiniImage
+'<img id="myImg'+j+''+i+'" class="miniImage" '+style4+' src="" alt=""/>' +'<img id="myImg'+j+''+i+'" class="miniImage" style="'+style4+'" src="" alt=""/>'
+'<h6 class="miniImage flexCenter" >ไมปภาพ</h6>'; +'<h6 class="miniImage flexCenter" >ไมปภาพ</h6>';
} }
} }
else{ else{
// console.log('*********** < 2 ***********')
var tagMiniImage = ''
for(j=1;j<4;j++){ for(j=1;j<4;j++){
if (j==3){ if (j==3){
style4 = 'style="margin-top:5px"' style4 = 'margin-top:5px'
} }
tagMiniImage = tagMiniImage tagMiniImage = tagMiniImage
+'<img id="myImg'+j+''+i+'" class="miniImage" '+style4+' src="" alt=""/>' +'<img id="myImg'+j+''+i+'" class="miniImage" style="'+style4+'" src="" alt=""/>'
+'<h6 class="miniImage flexCenter" >ไมปภาพ</h6>'; +'<h6 class="miniImage flexCenter" >ไมปภาพ</h6>';
} }
} }
console.log(dataInstrument)
imageTag = '<div class="flexCenter">' imageTag = '<div class="flexCenter">'
+'<div class="flexCenter bgImage">' +'<div class="flexCenter bgImage">'
+'<div class="flexCenter">' +'<div class="flexCenter">'
+'<img id="myImg0'+i+'" src="'+dataInstrument[i].clips[0].photo+'" alt=""/>' +'<img id="myImg0'+i+'" src="'+dataInstrument[i].clips[0].photo+'" alt=""/>'
+'<div class="bgImage flexCenter"><h2></h2></div>' +'<div class="bgImage flexCenter"><h2>ไมปภาพ</h2></div>'
+'</div>' +'</div>'
+'<div class="column bgMiniImage" style="margin-left:10px">' +'<div class="column bgMiniImage" style="margin-left:10px">'
+tagMiniImage +tagMiniImage
@ -219,46 +244,100 @@ function getData(respone) {
+'<a style="font-size:18px">Upload</a></div>' +'<a style="font-size:18px">Upload</a></div>'
+'<input type="file" name="upload" onclick="uploadImage('+i.toString()+')"/>' +'<input type="file" name="upload" onclick="uploadImage('+i.toString()+')"/>'
+'</div>' +'</div>'
} }
modalText = modalText+'<div id="modal'+i.toString()+'" class="modal" style="max-height: 100%;display: none;padding-top:10px;">' var youtube_tag = getYoutubeTag(dataInstrument[i].model,i);
+'<div class="modal-content cardStyle" >' modalText = modalText+'<div id="modal'+i.toString()+'" class="modal" style="max-height: 100%;display: none;padding-top:10px;">'
+imageTag +'<div class="modal-content cardStyle" >'
+'<div>' +imageTag
+'<div style="font-size:20px;margin-top:20px">ชอครณฑทยาศาสตร</div>' +youtube_tag
+'<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>' +'<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 style="font-size:20px;margin-top:20px">จดประสงคการใชงาน</div>' +'</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>' +'<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 style="font-size:20px;margin-top:20px">เลขครณฑ</div>' +'</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>' +'<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 style="font-size:20px;margin-top:20px">ผแล</div>' +'</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 class="flexCenterSpace" style="margin-top:20px">' +'<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>'
+'<input type="button" onclick="updateData('+i+')" class="buttonUpdate" value="Update">' +'</div>'
+'<input type="button" onclick="deleteData('+i+')" class="buttonDelete "value="Delete">' +'<div>'
+'<input type="button" onclick="backData('+i+')" class="buttonBack" value="Back">' +'<div style="font-size:20px;margin-top:20px">วโอ(youtube)</div>'
+'</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].model+'"></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>'; +'</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()'>" moreText = "<div class='cardStyle flexCenter' style='margin-bottom:10px;height:60px;background-color: #E0E0E0;' onClick='getNextUrl()'>"
+"<h4>More</h4>" +"<h4>More</h4>"
+"</div>"; +"</div>";
nextUrl = respone.next nextUrl = respone.next
document.getElementById("more").innerHTML = moreText; document.getElementById("more").innerHTML = moreText;
} }
else{
nextUrl = ''
moreText = ''
document.getElementById("more").innerHTML = moreText;
}
start = dataInstrument.length start = dataInstrument.length
document.getElementById("modalAll").innerHTML = document.getElementById("modalAll").innerHTML+modalText document.getElementById("modalAll").innerHTML = document.getElementById("modalAll").innerHTML+modalText
document.getElementById("card").innerHTML = document.getElementById("card").innerHTML+htmlText document.getElementById("card").innerHTML = document.getElementById("card").innerHTML+htmlText
/* Apirak */
$("img[id*='myImg']").each(function(){
var id = $(this).attr('id');
var order = id.substring(5,6);
var idInstrument = id.substring(6,7);
if(idInstrument == 'a'){idInstrument='add';}
$("<a id='order"+order+"' class='btn-edit' onclick='uploadWithOrder("+order+",\""+idInstrument+"\")'>Edit</a>").insertAfter( $(this) );
$(this).parent().css({"position": "relative"});
$(this).css({"margin-top": "0px"});
});
$("iframe").each(function(){
var index = $(this).attr('id');
index = index.replace("youtube-","");
$("img#myImg0"+index).addClass("img-with-youtube");
});
}
function uploadWithOrder(order,idInstrument){
$("#modal"+idInstrument+" input[name='upload']").attr('order',order);
$("#modal"+idInstrument+" input[name='upload']").click();
}
function getYoutubeTag(link,index){
//https://www.youtube.com/watch?v=hYgTVD-bxOY
//http://www.youtube.com/v/hYgTVD-bxOY
link = link.replace("https","http");
link = link.replace("watch?v=","v/");
var youtube_tag = '';
if( youtube_tag.indexOf("http") < 0 ){return youtube_tag;}
if(link != '')
{
youtube_tag = '<iframe width="420" height="315" src="'+link+'" frameborder="0" class="youtube" id="youtube-'+index+'" allowfullscreen></iframe>';
$("iframe").css("margin-left","13%");
$("iframe").css("margin-top","-13%");
}
else{
youtube_tag="";
}
return youtube_tag;
} }
function getNextUrl(){ function getNextUrl(){
@ -277,6 +356,29 @@ function getNextUrl(){
}); });
} }
function addNullData(arr){
var temp_arr = [{content_type:'',id:'',object_id:'',order:'',photo:"",user:''},
{content_type:'',id:'',object_id:'',order:'',photo:"",user:''},
{content_type:'',id:'',object_id:'',order:'',photo:"",user:''},
{content_type:'',id:'',object_id:'',order:'',photo:"",user:''}];
$.each(arr,function(index,obj){
temp_arr[obj.order] = obj;
});
return temp_arr;
}
function getCoverImg(arr){
var link="";
$.each(arr,function(index,obj){
if(obj.order == 0)
{
link=obj.photo;
}
});
return link;
}
function modalItem(idCard){ function modalItem(idCard){
var modal = document.getElementById('modal'+idCard); var modal = document.getElementById('modal'+idCard);
// console.log(modal) // console.log(modal)
@ -296,13 +398,16 @@ function modalItem(idCard){
function uploadImage(idImage) { function uploadImage(idImage) {
var check = 0 var check = 0
var order = $("#modal"+idImage+" input[name='upload']").attr('order');
$(":file").change(function () { $(":file").change(function () {
if (this.files && this.files[0] && check===0) { if (this.files && this.files[0] && check===0) {
var reader = new FileReader(); var reader = new FileReader();
console.log(reader) // console.log(reader)
reader.onload = function(e) { reader.onload = function(e) {
instrument = dataInstrument[parseInt(idImage)] instrument = dataInstrument[parseInt(idImage)]
var uriAdd = [{'uri':e.target.result}]; // console.log(instrument)
// console.log('-------------xxxx-------------')
var uriAdd = [{'uri':e.target.result,'order':parseInt(order)}];
dataUri = dataUri.concat(uriAdd); dataUri = dataUri.concat(uriAdd);
if(idImage == 'add'){ if(idImage == 'add'){
loopImage = 0 loopImage = 0
@ -310,24 +415,28 @@ function uploadImage(idImage) {
else{ else{
var loopImage = instrument.clips.length var loopImage = instrument.clips.length
for(idImg=0;idImg<loopImage;idImg++){ for(idImg=0;idImg<loopImage;idImg++){
$('#myImg'+idImg+''+idImage).attr('src', dataInstrument[idData].clips[idImg].photo); $('#myImg'+idImg+''+idImage).attr('src', dataInstrument[idImage].clips[idImg].photo);
} }
} }
console.log(idImage) // console.log(idImage)
var dataUriSort = dataUri var dataUriSort = dataUri
idloopImage = loopImage idloopImage = loopImage
if(loopImage==0){ if(loopImage==0){
loopImage = 1
idloopImage = 0 idloopImage = 0
} }
var idUri = 0 var idUri = 0
console.log(loopImage-1) // console.log(dataUri)
for(idImg=loopImage-1;idImg<idloopImage+dataUri.length;idImg++){ // 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); $('#myImg'+idImg+''+idImage).attr('src', dataUri[idUri].uri);
idUri += 1 idUri += 1
} }*/
console.log('---------------------------') $.each(dataUri,function(index,obj){
console.log(dataUri) $('#myImg'+obj.order+''+idImage).attr('src', obj.uri);
});
// console.log('---------------------------')
// console.log(dataUri)
check += 1 check += 1
}; };
reader.readAsDataURL(this.files[0]); reader.readAsDataURL(this.files[0]);
@ -341,15 +450,18 @@ function addData(){
'name':document.getElementById("nameI").value, 'name':document.getElementById("nameI").value,
'organization': userData.organizations[0].id, 'organization': userData.organizations[0].id,
} }
if(document.getElementById("noteI").value != ''){ if(document.getElementById("CrI").value != ''){
data.caretaker = document.getElementById("idI").value data.caretaker = document.getElementById("CrI").value
} }
if(document.getElementById("noteI").value != ''){ if(document.getElementById("idI").value != ''){
data.instrument_id = document.getElementById("CrI").value data.instrument_id = document.getElementById("idI").value
} }
if(document.getElementById("noteI").value != ''){ if(document.getElementById("noteI").value != ''){
data.note = document.getElementById("noteI").value data.note = document.getElementById("noteI").value
} }
if(document.getElementById("YlI").value != ''){
data.model = document.getElementById("YlI").value
}
if(dataUri.length != 0){ if(dataUri.length != 0){
data.clips = dataUri data.clips = dataUri
} }
@ -367,7 +479,7 @@ function addData(){
'Authorization': 'Bearer ' + token, 'Authorization': 'Bearer ' + token,
}, },
success: function(respone){ success: function(respone){
console.log(respone) // console.log(respone)
window.location.reload(true); window.location.reload(true);
}, },
dataType: 'json' dataType: 'json'
@ -382,8 +494,9 @@ function updateData(idData){
dataUpdate = { dataUpdate = {
'name':document.getElementById("name"+idData).value, 'name':document.getElementById("name"+idData).value,
'note':document.getElementById("note"+idData).value, 'note':document.getElementById("note"+idData).value,
'caretaker':document.getElementById("id"+idData).value, 'caretaker':document.getElementById("cr"+idData).value,
'instrument_id':document.getElementById("cr"+idData).value, 'instrument_id':document.getElementById("id"+idData).value,
'model':document.getElementById("yl"+idData).value,
} }
if(dataUri.length != 0){ if(dataUri.length != 0){
dataUpdate.clips = dataUri dataUpdate.clips = dataUri
@ -399,7 +512,7 @@ function updateData(idData){
'Authorization': 'Bearer ' + token, 'Authorization': 'Bearer ' + token,
}, },
success: function(respone){ success: function(respone){
console.log(respone) // console.log(respone)
window.location.reload(true); window.location.reload(true);
}, },
dataType: 'json' dataType: 'json'
@ -420,7 +533,7 @@ function deleteData(idData){
'Authorization': 'Bearer ' + token, 'Authorization': 'Bearer ' + token,
}, },
success: function(respone){ success: function(respone){
console.log(respone) // console.log(respone)
window.location.reload(true); window.location.reload(true);
}, },
dataType: 'json' dataType: 'json'
@ -441,12 +554,18 @@ function removeImage(idData){
loopImage = 1 loopImage = 1
} }
else{ else{
var time = new Date()
var loopImage = dataInstrument[idData].clips.length var loopImage = dataInstrument[idData].clips.length
// console.log(dataInstrument[idData])
for(j=0;j<loopImage;j++){ for(j=0;j<loopImage;j++){
$('#myImg'+j+''+idData).attr('src', 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-1;j<4;j++){ for(j=loopImage;j<4;j++){
$('#myImg'+j+''+idData).attr('src',''); $('#myImg'+j+''+idData).attr('src','');
} }
} }

236
login.html

@ -3,158 +3,116 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" <title>Login</title>
content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1">
<title>Login Form</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="https://avatars1.githubusercontent.com/u/17867603?v=3&s=200"/> <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="js/jquery-3.0.0.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<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"/>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style> <style>
.flexCenter {
</style> display:flex;
height: 550px;
justify-content: center;
align-items:center;
}
</style>
</head> </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;"><a class="material-icons" onclick="modalItem('search')" style="color:#FFF;">search</a></li>
</center>
</ul>
</div>
<div class="boxShow">
<div id="nameOrgan" class="flexCenter" style="margin-top:120px;font-size:40px;color:#F0F0F0"></div>
</div>
<div class="boxShow">
<!-- like -->
<div style="margin-top:20px;">
<li class="cardData" >
<div>
<i class="medium material-icons " style="">thumb_up</i>
<div class="flexCenter" style="font-size:18px;" id='like'></div>
</div>
</li>
<!-- status -->
<li class="cardData" >
<div>
<i class="medium material-icons " style="color:#4CAF50">trending_up</i>
<div class="flexCenter" style="font-size:18px;" id='status'></div>
</div>
</li>
<!-- accountActive -->
<li class="cardData" >
<div>
<i class="medium material-icons " style="">people</i>
<div class="flexCenter" style="font-size:18px;" id='accountActive'></div>
</div>
</li>
<!-- equipment -->
<li class="cardData" style="width: 300px;display:block;" >
<center><h1 style="font-size:18px;margin-top:10px;margin-bottom:15px">ปกรณ</h1></center>
<div class="flexCenterSpace">
<i class="medium material-icons ">featured_play_list</i>
<i class="medium material-icons ">photo</i>
</div>
<div class="flexCenterSpace" style="margin-top:-3px;">
<i style='margin-right:15px'>งหมด</i>
<i style='margin-right:10px'></i>
</div>
<div class="flexCenterSpace" style="margin-top:-5px;">
<i id="numAll" style='margin-right:15px'>0</i>
<i id="numPhoto" style='margin-right:10px'>0</i>
</div>
</li>
</div>
</div>
<div id="card" class="container" style="max-width:800px"></div> <body>
<section id="boxlogin" class="container">
<div id="modalAll" ></div>
<div id="more" class="container" style="max-width:800px;height:80px"> </div > </section>
</body>
<script language="javascript">
<div id="modaladd" class="modal" style="max-height: 100%;display: none;padding-top:10px;"> var token = ''
<div class="modal-content cardStyle" >
<div class="flexCenter">
<div class="flexCenter bgImage">
<div class="flexCenter">
<img id="myImg0add" src="" alt=""/>
<div class="bgImage flexCenter"><h2>ไมปภาพ</h2></div>
</div>
<div class="column bgMiniImage" style="margin-left:10px">
<img id="myImg1add" class="miniImage" src="" alt=""/>
<h6 class="miniImage flexCenter" >ไมปภาพ</h6>
<img id="myImg2add" class="miniImage" src="" alt=""/>
<h6 class="miniImage flexCenter" >ไมปภาพ</h6>
<img id="myImg3add" 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('add')"/>'
</div>'
<div>
<div style="font-size:20px;margin-top:10px">อครณฑทยาศาสตร</div>
<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="nameI" name="nameI" value="" placeholder="ชอครณฑทยาศาสตร"></div>
</div>
<div>
<div style="font-size:20px;margin-top:10px">ดประสงคการใชงาน</div>
<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="noteI" name="noteI" value="" placeholder="จดประสงคการใชงาน"></div>
</div>
<div>
<div style="font-size:20px;margin-top:10px">เลขครณฑ</div>
<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="idI" name="idI" value="" placeholder="เลขครณฑ"></div>
</div>
<div>
<div style="font-size:20px;margin-top:10px">แล</div>
<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="CrI" name="CrI" value="" placeholder="ชอ นามสกล"></div>
</div>
<div class="flexCenterSpace" style="margin-top:20px">
<input type="button" onclick="addData('add')" class="buttonUpdate" value="Add">
<input type="button" onclick="backData('add')" class="buttonBack" value="Back">
</div>
</div>
</div>
<div id="modalsearch" class="modal" style="max-height: 100%;display: none;padding-top:100px;"> function pasuser(form) {
<div class="modal-content cardStyle" > var data = {"username": form.login.value, "password": form.password.value}
<div> // console.log(form.login.value)
<input type="text" class="cardSearch" id="searchId" value="" placeholder="Search"> // console.log(form.password.value)
<div class="flexEnd"> // console.log(data)
<button class="buttonSearch flexCenter" onclick="searchItem('search')"> $.ajax({
<a class="material-icons" style="color:#FFF;">search</a> type: "POST",
</button> url: 'http://www.serv.stdb.most.go.th/api-token-auth/',
</div> data: data,
</div> success: success,
</div> dataType: 'json'
</div> });
}
function success(respone) {
// console.log(respone)
// console.log(respone.token)
localStorage.setItem("token", respone.token);
getToken();
}
</body> function getToken(){
<script language="javascript"> 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: checkToken,
error: tokenError,
dataType: 'json'
});
}
else{
loginPage();
}
}
else{
window.location.href = 'instrument.html';
}
}
function searchItem(idSearch){ function checkToken(tokenrespone) {
var modal = document.getElementById('modal'+idSearch); sessionStorage.getItem('token',tokenrespone.token);
modal.style.display = "none"; try {
getUser('search') if( tokenrespone.token === token ){
} window.location.href = 'instrument.html';
// console.log('go to page');
// console.log(tokenrespone.token);
}
}
catch(err) {
// console.log(err.message);
loginPage();
}
}
function tokenError(){
loginPage();
}
function loginPage(){
localStorage.removeItem('token');
var loginTag = '<div class="login">'
+'<h1>Login to STDB</h1>'
+'<form method="post" >'
+'<p><input type="text" name="login" value="" placeholder="Username or Email"></p>'
+'<p><input type="password" name="password" value="" placeholder="Password"></p>'
+'<p class="remember_me">'
+'<label>'
+'<input type="checkbox" name="remember_me" id="remember_me">'
+'Remember me on this computer'
+'</label>'
+'</p>'
+' <p class="submit"><input type="button" value="Login" onClick="pasuser(this.form)"></p>'
+'</form>'
+'</div>'
document.getElementById("boxlogin").innerHTML = loginTag
}
getToken()
</script> </script>
</html> </html>

0
scss/style.scss

115
stat.html

@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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 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>
<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>
html {
height: 100%;
}
body {
min-height: 100%;
}
a:active {
-webkit-text-fill-color: #000000;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #000000;
}
.column {
-webkit-flex-direction: column;
flex-direction: column;
float: left;
}
.column li {
background: deepskyblue;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
</style>
</head>
<body class="flexCenter" style="background-color:#0ca3d2;">
<div>
<div style="max-width:800px;color:#F0F0F0;">
<div class="flexCenter">
<h1>หนวยงานทงหมด</h1>
</div>
</div>
<div id="organiz" style="max-width:800px"></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',
});
}
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()
</script>
</html>
Loading…
Cancel
Save