|
|
|
@ -3,158 +3,126 @@ |
|
|
|
<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> |
|
|
|
<body> |
|
|
|
<!-- accountActive --> |
|
|
|
<section id="boxlogin" class="container"> |
|
|
|
<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> |
|
|
|
</section> |
|
|
|
|
|
|
|
</body> |
|
|
|
|
|
|
|
<script language="javascript"> |
|
|
|
|
|
|
|
|
|
|
|
<div id="modalAll" ></div> |
|
|
|
var token = '' |
|
|
|
|
|
|
|
|
|
|
|
<div id="more" class="container" style="max-width:800px;height:80px"> </div > |
|
|
|
function pasuser(form) { |
|
|
|
|
|
|
|
var data = {"username": form.login.value, "password": form.password.value} |
|
|
|
|
|
|
|
// console.log(form.login.value) |
|
|
|
|
|
|
|
// console.log(form.password.value) |
|
|
|
|
|
|
|
// console.log(data) |
|
|
|
|
|
|
|
$.ajax({ |
|
|
|
|
|
|
|
type: "POST", |
|
|
|
|
|
|
|
url: 'http://www.serv.stdb.most.go.th/api-token-auth/', |
|
|
|
|
|
|
|
data: data, |
|
|
|
|
|
|
|
success: success, |
|
|
|
|
|
|
|
dataType: 'json' |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
<div id="modaladd" class="modal" style="max-height: 100%;display: none;padding-top:10px;"> |
|
|
|
function success(respone) { |
|
|
|
<div class="modal-content cardStyle" > |
|
|
|
// console.log(respone) |
|
|
|
<div class="flexCenter"> |
|
|
|
// console.log(respone.token) |
|
|
|
<div class="flexCenter bgImage"> |
|
|
|
localStorage.setItem("token", respone.token); |
|
|
|
<div class="flexCenter"> |
|
|
|
getToken(); |
|
|
|
<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 getToken(){ |
|
|
|
<div class="modal-content cardStyle" > |
|
|
|
sesToken = sessionStorage.getItem('token'); |
|
|
|
<div> |
|
|
|
if( sesToken === null){ |
|
|
|
<input type="text" class="cardSearch" id="searchId" value="" placeholder="Search"> |
|
|
|
token = localStorage.getItem("token") |
|
|
|
<div class="flexEnd"> |
|
|
|
// console.log(token) |
|
|
|
<button class="buttonSearch flexCenter" onclick="searchItem('search')"> |
|
|
|
// console.log('==================') |
|
|
|
<a class="material-icons" style="color:#FFF;">search</a> |
|
|
|
if( token != null ){ |
|
|
|
</button> |
|
|
|
$.ajax({ |
|
|
|
</div> |
|
|
|
type: "POST", |
|
|
|
</div> |
|
|
|
url: 'http://www.serv.stdb.most.go.th/api-token-verify/', |
|
|
|
</div> |
|
|
|
data: { "token" : token }, |
|
|
|
</div> |
|
|
|
header: { |
|
|
|
|
|
|
|
Authorization: 'Bearer '+ token, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
success: checkToken, |
|
|
|
|
|
|
|
error: tokenError, |
|
|
|
|
|
|
|
dataType: 'json' |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
else{ |
|
|
|
|
|
|
|
loginPage(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
else{ |
|
|
|
|
|
|
|
window.location.href = 'instrument.html'; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function checkToken(tokenrespone) { |
|
|
|
|
|
|
|
sessionStorage.getItem('token',tokenrespone.token); |
|
|
|
|
|
|
|
try { |
|
|
|
|
|
|
|
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(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</body> |
|
|
|
} |
|
|
|
<script language="javascript"> |
|
|
|
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> |
|
|
|
|
|
|
|
(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'); |
|
|
|
|
|
|
|
|
|
|
|
function searchItem(idSearch){ |
|
|
|
ga('create', 'UA-72505920-2', 'auto'); |
|
|
|
var modal = document.getElementById('modal'+idSearch); |
|
|
|
ga('send', 'pageview'); |
|
|
|
modal.style.display = "none"; |
|
|
|
|
|
|
|
getUser('search') |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
</script> |
|
|
|
</html> |
|
|
|
</html> |
|
|
|
|
sipp11
