sipp11
/
stdbWeb
forked from rachanon/stdbWeb
1
0
Fork 0
Code
Browse Source

0.0.0.22.6

master
racha.non 8 years ago
parent
828de39d9d
commit
431775cadc
3 changed files with 201 additions and 138 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      web/css/stdb.css
  2. 106
      web/js/stdb.js
  3. 208
      web/login.html

17
web/css/stdb.css
Unescape View File

@ -116,6 +116,14 @@ img{
background-color: #FFF; background-color: #FFF;
border: 1px solid navy; border: 1px solid navy;
} }
.cardSearch{
border-radius: 5px;
width: auto;
height: 40px;
margin-top: 5px;
background-color: #F0F0F0;
border: 1px solid navy;
}
.cardAdd{ .cardAdd{
width: auto; width: auto;
background-color:unset; background-color:unset;
@ -195,3 +203,12 @@ img{
position: fixed; position: fixed;
} }
.buttonSearch{
background-color: #263238;
color:#000;
width: 80px;
height: 40px;
border-radius: 5px;
border: 0px;
}

106
web/js/stdb.js
Unescape View File

@ -64,7 +64,7 @@ function getStat(){
} }
} }
function getUser(){ function getUser(status){
token = sessionStorage.getItem("token") token = sessionStorage.getItem("token")
// console.log(token) // console.log(token)
// console.log('======== 2 ======') // console.log('======== 2 ======')
@ -80,11 +80,29 @@ function getUser(){
// console.log(respone) // console.log(respone)
userData = respone userData = respone
organ = '<div>'+respone.organizations[0].name+'</div>' organ = '<div>'+respone.organizations[0].name+'</div>'
document.getElementById("nameOrgan").innerHTML = organ document.getElementById("nameOrgan").innerHTML = organ
token = sessionStorage.getItem("token") 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({ $.ajax({
type: "GET", type: "GET",
url: 'http://www.serv.stdb.most.go.th/api/v2/instrument/?organization='+respone.organizations[0].id, url: url,
headers :{ headers :{
Authorization: 'Bearer '+ token, Authorization: 'Bearer '+ token,
Accept: 'application/json, text/javascript', Accept: 'application/json, text/javascript',
@ -100,7 +118,7 @@ function getUser(){
} }
function getDataStat(respone){ function getDataStat(respone){
getUser(); getUser('first');
// console.log(respone) // console.log(respone)
document.getElementById("like").innerHTML = '0' document.getElementById("like").innerHTML = '0'
document.getElementById("status").innerHTML = '+'+respone.items.recent_update document.getElementById("status").innerHTML = '+'+respone.items.recent_update
@ -113,17 +131,20 @@ function getData(respone) {
// console.log(dataInstrument) // console.log(dataInstrument)
// console.log(respone) // console.log(respone)
// console.log(respone.results) // console.log(respone.results)
dataInstrument = dataInstrument.concat(respone.results)
// console.log('****************')
console.log(dataInstrument) console.log(dataInstrument)
var cardText = '' dataInstrument = dataInstrument.concat(respone.results)
console.log('*******ฬฬฬฬฬฬฬฬฬ*********')
console.log(respone.results)
var htmlText = ''
var modalText = '' var modalText = ''
for (i=start;i<dataInstrument.length;i++ ){ for (i=start;i<dataInstrument.length;i++ ){
console.log('========='+i+'==========')
// console.log(dataInstrument[i].name) // console.log(dataInstrument[i].name)
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>' +'<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].custom_id+'</h3>'
+'<h3 style="color:#9E9E9E;font-size:22px;margin-left:20px " >@'+dataInstrument[i].location+'</h3>' +'<h3 style="color:#9E9E9E;font-size:22px;margin-left:20px " >@'+dataInstrument[i].caretaker+'</h3>'
+'</div>'; +'</div>';
if(dataInstrument[i].clips.length === 0){ if(dataInstrument[i].clips.length === 0){
@ -198,33 +219,33 @@ 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;">' modalText = modalText+'<div id="modal'+i.toString()+'" class="modal" style="max-height: 100%;display: none;padding-top:10px;">'
+'<div class="modal-content cardStyle" >' +'<div class="modal-content cardStyle" >'
+imageTag +imageTag
+'<div>' +'<div>'
+'<div style="font-size:20px;margin-top:20px">ชื่อครุภัณฑ์วิทยาศาสตร์</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 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>' +'<div>'
+'<div style="font-size:20px;margin-top:20px">จุดประสงค์การใช้งาน</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 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>' +'<div>'
+'<div style="font-size:20px;margin-top:20px">เลขครุภัณฑ์</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 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>' +'<div>'
+'<div style="font-size:20px;margin-top:20px">ผู้ดูแล</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 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 class="flexCenterSpace" style="margin-top:20px">' +'<div class="flexCenterSpace" style="margin-top:20px">'
+'<input type="button" onclick="updateData('+i+')" class="buttonUpdate" value="Update">' +'<input type="button" onclick="updateData('+i+')" class="buttonUpdate" value="Update">'
+'<input type="button" onclick="deleteData('+i+')" class="buttonDelete "value="Delete">' +'<input type="button" onclick="deleteData('+i+')" class="buttonDelete "value="Delete">'
+'<input type="button" onclick="backData('+i+')" class="buttonBack" value="Back">' +'<input type="button" onclick="backData('+i+')" class="buttonBack" value="Back">'
+'</div>'
+'</div>' +'</div>'
+'</div>' +'</div>';
+'</div>';
} }
if(respone.next != null){ if(respone.next != null){
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()'>"
@ -234,9 +255,10 @@ function getData(respone) {
document.getElementById("more").innerHTML = moreText; document.getElementById("more").innerHTML = moreText;
} }
start = dataInstrument.length start = dataInstrument.length
// console.log(start)
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
} }
function getNextUrl(){ function getNextUrl(){
@ -264,7 +286,9 @@ function modalItem(idCard){
window.onclick = function(event) { window.onclick = function(event) {
if (event.target == modal) { if (event.target == modal) {
modal.style.display = "none"; modal.style.display = "none";
removeImage(idCard) if(idCard != 'search'){
removeImage(idCard)
}
dataUri = [] dataUri = []
} }
} }
@ -315,11 +339,17 @@ function addData(){
data = { data = {
'name':document.getElementById("nameI").value, 'name':document.getElementById("nameI").value,
'note':document.getElementById("noteI").value,
'caretaker':document.getElementById("idI").value,
'instrument_id':document.getElementById("CrI").value,
'organization': userData.organizations[0].id, 'organization': userData.organizations[0].id,
} }
if(document.getElementById("noteI").value != ''){
data.caretaker = document.getElementById("idI").value
}
if(document.getElementById("noteI").value != ''){
data.instrument_id = document.getElementById("CrI").value
}
if(document.getElementById("noteI").value != ''){
data.note = document.getElementById("noteI").value
}
if(dataUri.length != 0){ if(dataUri.length != 0){
data.clips = dataUri data.clips = dataUri
} }

208
web/login.html
Unescape View File

@ -21,123 +21,139 @@
</style> </style>
</head> </head>
<body> <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="searchItem()" 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> <div>
<!-- status --> <ul class="titleIn">
<li class="cardData" > <center>
<div> <li><a href="javascript:history.go(0)" class="active">Instrument</a></li>
<i class="medium material-icons " style="color:#4CAF50">trending_up</i> <li style="float:right;font-size:18px"><a onClick="LogoutPage()">Logout</a></li>
<div class="flexCenter" style="font-size:18px;" id='status'></div> <li style="float:right;font-size:18px"><a onClick="modalItem('add')">Add Instrument</a></li>
</div> <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> </li>
<!-- accountActive --> <!-- status -->
<li class="cardData" > <li class="cardData" >
<div> <div>
<i class="medium material-icons " style="">people</i> <i class="medium material-icons " style="color:#4CAF50">trending_up</i>
<div class="flexCenter" style="font-size:18px;" id='accountActive'></div> <div class="flexCenter" style="font-size:18px;" id='status'></div>
</div> </div>
</li> </li>
<!-- equipment --> <!-- accountActive -->
<li class="cardData" style="width: 300px;display:block;" > <li class="cardData" >
<center><h1 style="font-size:18px;margin-top:10px;margin-bottom:15px">อุปกรณ์</h1></center> <div>
<div class="flexCenterSpace"> <i class="medium material-icons " style="">people</i>
<i class="medium material-icons ">featured_play_list</i> <div class="flexCenter" style="font-size:18px;" id='accountActive'></div>
<i class="medium material-icons ">photo</i> </div>
</div>
<div class="flexCenterSpace" style="margin-top:-3px;"> </li>
<i style='margin-right:15px'>ทั้งหมด</i> <!-- equipment -->
<i style='margin-right:10px'>มีรูป</i> <li class="cardData" style="width: 300px;display:block;" >
</div> <center><h1 style="font-size:18px;margin-top:10px;margin-bottom:15px">อุปกรณ์</h1></center>
<div class="flexCenterSpace" style="margin-top:-5px;"> <div class="flexCenterSpace">
<i id="numAll" style='margin-right:15px'>0</i> <i class="medium material-icons ">featured_play_list</i>
<i id="numPhoto" style='margin-right:10px'>0</i> <i class="medium material-icons ">photo</i>
</div> </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> </li>
</div>
</div> </div>
</div>
<div id="card" class="container" style="max-width:800px"></div> <div id="card" class="container" style="max-width:800px"></div>
<div id="modalAll" ></div> <div id="modalAll" ></div>
<div id="more" class="container" style="max-width:800px;height:80px"> </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 id="modaladd" class="modal" style="max-height: 100%;display: none;padding-top:10px;">
<div class="modal-content cardStyle" > <div class="modal-content cardStyle" >
<div class="flexCenter"> <div class="flexCenter">
<div class="flexCenter bgImage"> <div class="flexCenter bgImage">
<div class="flexCenter"> <div class="flexCenter">
<img id="myImg0add" src="" alt=""/> <img id="myImg0add" src="" alt=""/>
<div class="bgImage flexCenter"><h2>ไม่มีรูปภาพ</h2></div> <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="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 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>
<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 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 class="flexCenterSpace" style="margin-top:20px"> </div>
<input type="button" onclick="addData('add')" class="buttonUpdate" value="Add">
<input type="button" onclick="backData('add')" class="buttonBack" value="Back"> <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>
</div> </div>
</div>
</body> </body>
<script language="javascript"> <script language="javascript">
function searchItem(){ function searchItem(idSearch){
var modal = document.getElementById('modal'+idSearch);
modal.style.display = "none";
getUser('search')
} }
</script> </script>

Write Preview
Loading…
Cancel
Save