Compare commits

...

6 Commits

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

1
.gitignore vendored

@ -0,0 +1 @@
bower_components/*

21
bower.json

@ -0,0 +1,21 @@
{
"name": "stdb-webapp",
"authors": [
"sipp11 <sipp11@zzyzx.co>"
],
"description": "",
"main": "",
"moduleType": [],
"license": "MIT",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"sweetalert": "^1.1.3"
}
}

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

89
css/stdb.css

@ -6,6 +6,39 @@ ul {
background-color: #333;
}
[type="radio"]:not(:checked), [type="radio"]:checked,
[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
position: static;
left: auto;
opacity: 1;
}
.pull-right {
float: right;
}
.danger {
color: rgb(201, 0, 0);
z-index: 10;
}
a.hideBtn {
background: white;
padding: 2rem;
margin: 1rem;
}
span.tag {
background: #ccc;
margin: 0 5px;
border-radius: 3px;
padding: 0 1rem;
color: black;
}
ul.list-inline {
background: white;
}
li {
float: left;
}
@ -68,6 +101,7 @@ img{
width: 100%;
color:#FFF;
font-size:30px;
z-index:1;
}
.container{
margin-right: auto;
@ -155,7 +189,7 @@ img{
left: 0;
top: 0;
width: 100%;
height: 1000px;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
@ -211,4 +245,57 @@ img{
border-radius: 5px;
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

130
index.html

@ -3,115 +3,53 @@
<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">
<title>Traffy</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="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>
.flexCenter {
display:flex;
height: 550px;
justify-content: center;
align-items:center;
}
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>
<section id="boxlogin" class="container">
</section>
</body>
<script language="javascript">
<body class="flexCenter" style="background-color:#0ca3d2;">
var token = ''
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 >
<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>
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';
}
}
</body>
function checkToken(tokenrespone) {
sessionStorage.getItem('token',tokenrespone.token);
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();
}
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
}
ga('create', 'UA-72505920-2', 'auto');
ga('send', 'pageview');
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>
</html>

259
instrument.html

@ -0,0 +1,259 @@
<!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="stylesheet" href="//api.traffy.xyz/static/font-awesome/css/font-awesome.min.css" />
<link rel="shortcut icon" type="image/png" href="https://avatars1.githubusercontent.com/u/17867603?v=3&s=200"/>
<script src="//api.traffy.xyz/static/jquery/dist/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="//api.traffy.xyz/static/underscore/underscore-min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/jwtDecode.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/stdb.css" media="screen,projection"/>
<link rel="stylesheet" type="text/css" href="/bower_components/sweetalert/dist/sweetalert.css">
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
div.tags {
margin: 0 auto;
padding: 10px 3rem;
background: rgba(0, 153, 204, 1);
}
div.tags>ul.list-inline {
background: rgba(0, 153, 204, 1);
}
#is-filter {
background: white;
padding-left: 10rem;
padding-right: 10rem;
}
#is-filter label {
padding: 0 1rem;
font-size: 1.1rem;
color: rgba(91, 91, 91, 1);
}
.box_ {
display: flex;
flex-direction: row;
}
.box-left {
width: 140px;
display: flex;
align-items: center;
justify-content: center;
}
.box-right {
flex: 1;
}
.box-right .card-title {
padding-right: 20px;
}
</style>
</head>
<body>
<div>
<ul class="titleIn">
<center>
<li><a href="javascript:history.go(0)" class="active">Instrument</a></li>
<li style="float:right;font-size:18px"><a onClick="LogoutPage()">Logout</a></li>
<li style="float:right;font-size:18px"><a onClick="modalItem('add')">Add Instrument</a></li>
<li style="float:right;"><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 class="boxShow" id="is-filter">
<ul class="list-inline">
<li><label>
<input type="checkbox" name="is" value="has_photo">
</label></li>
<li><label>
<input type="checkbox" name="is" value="missing">
อมลไมครบ
</label></li>
<li><label>
<input type="checkbox" name="is" value="completed">
อมลครบถวน
</label></li>
</ul>
</div>
<div class="boxShow" id="any-filter">
</div>
<div id="card" class="container" style="max-width:800px"></div>
<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">สถานท</div>
<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="LcI" name="LcI" 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="makeI" name="makeI" 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="modelI" name="modelI" 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>
<script type="text/template" class="template" id="tag-list">
<div class="tags">
<ul class="list-inline"><% for (i in items) {%>
<li><label>
<input type="checkbox" name="tags" value="<%- items[i][0] %>"
<%- (selected.indexOf(items[i][0]) > -1 ? "checked": "") %>
>
<span class="tag"><%- items[i][0] %></span>
</label></li>
<% } %></ul>
<div>
</script>
<script src="/bower_components/sweetalert/dist/sweetalert.min.js"></script>
<script type="text/javascript" src="js/stdb.js"></script>
</body>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-72505920-2', 'auto');
ga('send', 'pageview');
</script>
<script language="javascript">
function searchItem(idSearch){
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

1143
js/stdb.js

File diff suppressed because it is too large Load Diff

248
login.html

@ -3,158 +3,126 @@
<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>
<title>Login</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>
<style>
.flexCenter {
display:flex;
height: 550px;
justify-content: center;
align-items:center;
}
</style>
</head>
<body>
<section id="boxlogin" class="container">
</section>
</body>
<script language="javascript">
<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>
<div id="modalAll" ></div>
var token = ''
<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>
</div>
</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="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>
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,
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){
var modal = document.getElementById('modal'+idSearch);
modal.style.display = "none";
getUser('search')
}
ga('create', 'UA-72505920-2', 'auto');
ga('send', 'pageview');
</script>
</html>

0
scss/style.scss

182
stat.html

@ -0,0 +1,182 @@
<!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 rel="stylesheet" href="//api.traffy.xyz/static/font-awesome/css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="//api.traffy.xyz/static/underscore/underscore-min.js"></script>
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/stdb.css" media="screen,projection"/>
<style>
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;
}
.tag-container {
padding: 1rem;
}
ul.list-inline {
background: white;
}
ul.list-inline li {
margin: 0 1rem 0 5px;
}
span.tag {
background: #ccc;
margin: 0 5px;
border-radius: 3px;
padding: 0 1rem;
}
</style>
</head>
<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 class="text-center">
<i class="fa fa-4x fa-spin fa-spinner"></i>
</div>
</div>
</div>
</body>
<script type="text/template" class="template" id="each-org">
<div class="cardStyle organization"
id="org-<%- organization.id %>"
data-org="<%- organization.id %>"
style="width:800px">
<h3 style="font-size:26px;margin-left:20px "><%- organization.name %> (<%- organization.abbv_en %>)</h3>
<div class="flexCenterSpace">
<div class="flex-container column flexCenter">
<i class="medium material-icons " style="">thumb_up</i>
<i class="" style="">อมลครบ</i>
<i class="" style=""><%- items.completed %></i>
</div>
<div class="flex-container column flexCenter">
<i class="medium material-icons " style="">trending_up</i>
<i class="" style="">อมลอพเดท</i>
<i class="" style=""><%- items.recent_update %></i>
</div>
<div class="flex-container column flexCenter">
<i class="medium material-icons " style="">featured_play_list</i>
<i class="" style="">งหมด</i>
<i class="" style=""><%- items.all %></i>
</div>
<div class="flex-container column flexCenter">
<i class="medium material-icons " style="">photo</i>
<i class="" style=""></i>
<i class="" style=""><%- items.photos %></i>
</div>
</div>
<div class="tag-container">
<i class="fa fa-spin fa-spinner"></i>
</div>
</div>
</script>
<script type="text/template" class="template" id="tag-list">
<div class="tags">
<ul class="list-inline"><% for (i in items) {%>
<li><span class="tag"><%- items[i][0] %></span> <%- items[i][1] %></li>
<% } %></ul>
<div>
</script>
<script>
var orgTmpl = _.template($("script#each-org").html());
var tagsTmpl = _.template($("script#tag-list").html());
var getOrgTags = function(orgId) {
var url = `//www.serv.stdb.most.go.th/api/v2/organization/${orgId}/tags/`;
var promise = $.get(url);
var $box = $('#org-' + orgId);
promise.fail(function() {
$box.find('.tag-container').html('');
});
promise.done(function(resp) {
console.log(resp);
$box.find('.tag-container').html(tagsTmpl({items: resp}));
});
}
var getStatAll = function() {
urlStat = '//www.serv.stdb.most.go.th/api/v2/organization/stats/';
var promise = $.get(urlStat)
promise.fail(function() {
document.getElementById("organiz").innerHTML = 'Try reloading';
});
promise.done(function(resp) {
var htmlText = ''
for (i=0;i<resp.length;i++ ) {
htmlText += orgTmpl(resp[i]);
}
document.getElementById("organiz").innerHTML = htmlText;
setTimeout(function() {
for (i=0;i<resp.length;i++ ) {
getOrgTags(resp[i].organization.id);
}
}, 500);
});
};
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
getStatAll();
ga('create', 'UA-72505920-2', 'auto');
ga('send', 'pageview');
</script>
</html>
Loading…
Cancel
Save