Browse Source

0.0.0.30.6

master
racha.non 9 years ago
parent
commit
c5087bc074
  1. 22
      css/stdb.css
  2. 152
      index.html
  3. 87
      js/stdb.js
  4. 4
      login.html
  5. 152
      stdb.html

22
css/stdb.css

@ -212,3 +212,25 @@ img{
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 */

152
index.html

@ -3,161 +3,45 @@
<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>Login Form</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"/>
<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>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<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;
}
</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>
<body class="flexCenter" style="background-color:#0ca3d2;">
</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 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>
<a href="login.html" style="font-size:100px;color:#F0F0F0;" >LOGIN</a>
<h style="font-size:200px;color:#F0F0F0;" >|</h>
<a href="stat.html" style="font-size:100px;color:#F0F0F0;" >STAT</a>
</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>

87
js/stdb.js

@ -8,8 +8,6 @@ var nextUrl = ''
htmlText = ''
var dataUri = []
console.log('Welcome to Web STDB')
function getStartPage(){
sesToken = sessionStorage.getItem('token');
if( sesToken === null){
@ -87,7 +85,7 @@ function getUser(status){
token = sessionStorage.getItem("token")
var searchText = ''
if (status === 'search'){
// console.log("search")
console.log("search")
dataInstrument = []
searchText = '&search='+document.getElementById("searchId").value
start = 0
@ -96,12 +94,12 @@ function getUser(status){
htmlText = '';
modalText = '';
dataInstrument = [];
// console.log(' >> end of search button');
// console.log(dataInstrument)
// console.log($('#card').html());
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)
console.log('url = ' + url)
$.ajax({
type: "GET",
url: url,
@ -122,7 +120,7 @@ function getUser(status){
function getDataStat(respone){
getUser('first');
// console.log(respone)
document.getElementById("like").innerHTML = respone.items.completed
document.getElementById("like").innerHTML = '0'
document.getElementById("status").innerHTML = '+'+respone.items.recent_update
document.getElementById("accountActive").innerHTML = respone.users.active
document.getElementById("numAll").innerHTML = respone.items.all
@ -131,28 +129,35 @@ function getDataStat(respone){
function getData(respone) {
// console.log(dataInstrument)
// console.log(respone)
// console.log("---------------- Next")
// console.log(respone.next)
console.log(respone)
console.log("---------------- Next")
console.log(respone.next)
// console.log(respone.results)
// console.log(dataInstrument)
console.log(dataInstrument)
dataInstrument = dataInstrument.concat(respone.results)
// console.log('*******ฬฬฬฬฬฬฬฬฬ*********')
// console.log(respone.results)
console.log('*******ฬฬฬฬฬฬฬฬฬ*********')
console.log(respone.results)
var htmlText = ''
var modalText = ''
for (i=start;i<dataInstrument.length;i++ ){
// console.log('========='+i+'==========')
console.log('========='+i+'==========')
// console.log(dataInstrument[i].name)
htmlText = htmlText+"<div id='"+i.toString()+"'' class='cardStyle' onclick='modalItem("+i.toString()+")'>"
// Author :: Apirak
+'<div class="box-left">'
+'<img src="'+dataInstrument[i].clips[0].photo+'" class="cover-img">'
+'</div>'// 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>';
// console.log(dataInstrument[i].clips.length)
console.log(dataInstrument[i].clips.length)
if(dataInstrument[i].clips.length === 0){
// console.log('========= = 0 =========')
console.log('========= = 0 =========')
imageTag = '<div class="flexCenter">'
+'<div class="flexCenter bgImage">'
+'<div class="flexCenter">'
@ -178,7 +183,7 @@ function getData(respone) {
else{
var style4 = ''
if(dataInstrument[i].clips.length >= 2){
// console.log('*********** >= 2 ***********')
console.log('*********** >= 2 ***********')
var tagMiniImage = ''
var loopImage = dataInstrument[i].clips.length
if (loopImage > 4){
@ -202,7 +207,7 @@ function getData(respone) {
}
}
else{
// console.log('*********** < 2 ***********')
console.log('*********** < 2 ***********')
var tagMiniImage = ''
for(j=1;j<4;j++){
if (j==3){
@ -318,11 +323,11 @@ function uploadImage(idImage) {
$(":file").change(function () {
if (this.files && this.files[0] && check===0) {
var reader = new FileReader();
// console.log(reader)
console.log(reader)
reader.onload = function(e) {
instrument = dataInstrument[parseInt(idImage)]
// console.log(instrument)
// console.log('-------------xxxx-------------')
console.log(instrument)
console.log('-------------xxxx-------------')
var uriAdd = [{'uri':e.target.result}];
dataUri = dataUri.concat(uriAdd);
if(idImage == 'add'){
@ -334,22 +339,22 @@ function uploadImage(idImage) {
$('#myImg'+idImg+''+idImage).attr('src', dataInstrument[idImage].clips[idImg].photo);
}
}
// console.log(idImage)
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)
console.log(dataUri)
console.log(loopImage-1)
console.log(idloopImage+dataUri.length)
for(idImg=loopImage;idImg<idloopImage+dataUri.length;idImg++){
$('#myImg'+idImg+''+idImage).attr('src', dataUri[idUri].uri);
idUri += 1
}
// console.log('---------------------------')
// console.log(dataUri)
console.log('---------------------------')
console.log(dataUri)
check += 1
};
reader.readAsDataURL(this.files[0]);
@ -375,9 +380,9 @@ function addData(){
if(dataUri.length != 0){
data.clips = dataUri
}
// console.log(data)
console.log(data)
data = JSON.stringify(data)
// console.log(data)
console.log(data)
token = sessionStorage.getItem('token')
$.ajax({
type: "POST",
@ -389,7 +394,7 @@ function addData(){
'Authorization': 'Bearer ' + token,
},
success: function(respone){
// console.log(respone)
console.log(respone)
window.location.reload(true);
},
dataType: 'json'
@ -397,10 +402,10 @@ function addData(){
}
function updateData(idData){
// console.log(document.getElementById("name"+idData))
// console.log(document.getElementById("note"+idData))
// console.log(document.getElementById("id"+idData))
// console.log(document.getElementById("cr"+idData))
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,
@ -421,7 +426,7 @@ function updateData(idData){
'Authorization': 'Bearer ' + token,
},
success: function(respone){
// console.log(respone)
console.log(respone)
window.location.reload(true);
},
dataType: 'json'
@ -442,7 +447,7 @@ function deleteData(idData){
'Authorization': 'Bearer ' + token,
},
success: function(respone){
// console.log(respone)
console.log(respone)
window.location.reload(true);
},
dataType: 'json'
@ -465,12 +470,12 @@ function removeImage(idData){
else{
var time = new Date()
var loopImage = dataInstrument[idData].clips.length
// console.log(dataInstrument[idData])
console.log(dataInstrument[idData])
for(j=0;j<loopImage;j++){
// console.log('#myImg'+j+''+idData)
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))
console.log(document.getElementById("myImg"+j+''+idData).src)
console.log(document.getElementById("myImg"+j+''+idData))
}
}

4
login.html

@ -72,7 +72,7 @@
}
}
else{
window.location.href = 'index.html';
window.location.href = 'stdb.html';
}
}
@ -80,7 +80,7 @@
sessionStorage.getItem('token',tokenrespone.token);
try {
if( tokenrespone.token === token ){
window.location.href = 'index.html';
window.location.href = 'stdb.html';
// console.log('go to page');
// console.log(tokenrespone.token);
}

152
stdb.html

@ -3,45 +3,161 @@
<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>Login Form</title>
<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" 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>
html {
height: 100%;
}
body {
min-height: 100%;
}
a:active {
-webkit-text-fill-color: #000000;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #000000;
}
</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>
<body class="flexCenter" style="background-color:#0ca3d2;">
</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>
<a href="login.html" style="font-size:100px;color:#F0F0F0;" >LOGIN</a>
<h style="font-size:200px;color:#F0F0F0;" >|</h>
<a href="stat.html" style="font-size:100px;color:#F0F0F0;" >STAT</a>
<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;">
<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>

Loading…
Cancel
Save