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. 74
      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. 10
      index.html
  58. 102
      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. 505
      js/stdb.js
  67. 10
      login.html
  68. 99
      modal.html
  69. 0
      scss/style.scss
  70. 149
      stat.html
  71. 141
      testItem.html
  72. 152
      testJWT.html
  73. 87
      testUpload.html
  74. 104
      uploadFile.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

74
css/stdb.css

@ -6,6 +6,39 @@ ul {
background-color: #333; 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 { li {
float: left; float: left;
} }
@ -216,22 +249,53 @@ img{
/* Author :: Apirak */ /* Author :: Apirak */
/* Add cover image to display */ /* Add cover image to display */
.box-left {
/*.box-left {
width: 20%; width: 20%;
height: 100%; height: 100%;
display: inline-table; display: inline-table;
} }
.box-right { .box-right {
/*float: right;*/ float: right;
width: 80%; width: 80%;
height: 100%; height: 100%;
display: inline-table; display: inline-table;
} }*/
img.cover-img { img.cover-img {
width: 120px; width: 120px;
height: 120px; height: 120px;
margin-top: -2%; /*margin-top: -2%;*/
margin-left: 1%; /*margin-left: 1%;*/
} }
/* End */ /* 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

10
index.html

@ -41,7 +41,15 @@
</body> </body>
<script language="javascript">
<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>
</html> </html>

102
instrument.html

@ -7,21 +7,56 @@
content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"> --> content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"> -->
<title>Traffy STDB</title> <title>Traffy STDB</title>
<link rel="stylesheet" href="css/style.css"> <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"/> <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="//api.traffy.xyz/static/jquery/dist/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <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/materialize.min.js"></script>
<script type="text/javascript" src="js/jwtDecode.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/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/stdb.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]--> <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style> <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> </style>
</head> </head>
<body> <body>
<div> <div>
<ul class="titleIn"> <ul class="titleIn">
<center> <center>
@ -84,6 +119,25 @@
</div> </div>
</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="card" class="container" style="max-width:800px"></div>
<div id="modalAll" ></div> <div id="modalAll" ></div>
@ -129,6 +183,22 @@
<div style="font-size:20px;margin-top:10px">แล</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 style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="CrI" name="CrI" 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="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"> <div class="flexCenterSpace" style="margin-top:20px">
<input type="button" onclick="addData('add')" class="buttonUpdate" value="Add"> <input type="button" onclick="addData('add')" class="buttonUpdate" value="Add">
<input type="button" onclick="backData('add')" class="buttonBack" value="Back"> <input type="button" onclick="backData('add')" class="buttonBack" value="Back">
@ -150,7 +220,33 @@
</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> </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"> <script language="javascript">
function searchItem(idSearch){ function searchItem(idSearch){

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

505
js/stdb.js

@ -6,15 +6,175 @@ var dataInstrument = []
var start = 0 var start = 0
var nextUrl = '' var nextUrl = ''
htmlText = '' htmlText = ''
var dataUri = [] var dataUri = [];
var processingNext = false;
var clickOnHideButton = false;
var xhr = null;
var tagsTmpl = _.template($("script#tag-list").html());
function getStartPage(){ var hideItem = function(itemId, divBox) {
var html = divBox.html();
divBox.html('<i class="fa fa-4x fa-spin fa-spinner"></i>')
data = {'hide': true};
token = sessionStorage.getItem('token')
$.ajax({
type: "PATCH",
url: 'http://www.serv.stdb.most.go.th/api/v2/instrument/'+ itemId +'/',
data: JSON.stringify(data),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token,
},
success: function(respone) {
divBox.html('ลบเรยบรอยแลว ...').delay(2000).fadeOut(500);
},
fail: function() {
divBox.html('มญหาขดของ ...').delay(1000).html(html);
},
dataType: 'json'
});
}
var reloadCardListener = function() {
$('.hideBtn').click(function(evt) {
clickOnHideButton = true;
setTimeout(function() {
clickOnHideButton = false;
}, 1000);
evt.stopPropagation();
var that = $(this);
var itemId = that.data('id');
var $parent = that.closest('.cardStyle');
swal(
{
title: "ลบ?",
text: "ไมใชครณฑทยาศาสตร",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "ลบเลย!"
}, function(yes) {
if (yes)
hideItem(itemId, $parent)
}
);
});
}
var reloadItem = function() {
if (xhr)
xhr.abort();
// reset stuff
start = 0
$('#modalAll').html('');
$('#card').html('');
htmlText = '';
modalText = '';
dataInstrument = [];
/// start doing new onw
var orgId = sessionStorage.getItem('orgId');
if (!orgId) {
alert('something is wrong, try reloading');
}
var token = sessionStorage.getItem('token');
var tagFilter = '';
if (localStorage.getItem('selFilters')) {
tagFilter = localStorage.getItem('selFilters').split(',');
tagFilter = '&tags=' + tagFilter;
}
var isFilter = '';
if (localStorage.getItem('selIsFilters')) {
isFilter = localStorage.getItem('selIsFilters').split(',');
isFilter = '&is=' + isFilter;
}
var url = 'http://www.serv.stdb.most.go.th/api/v2/instrument/?organization='+orgId+tagFilter+isFilter;
xhr = $.ajax({
type: "GET",
url: url,
headers :{
Authorization: 'Bearer '+ token,
Accept: 'application/json, text/javascript',
'Accept-Language' : 'en-US,en;q=0.8,th;q=0.6',
},
success: getData,
dataType: 'json',
});
}
var reloadFilterListener = function() {
var selectedFilter = [];
if (localStorage.getItem('selFilters')) {
selectedFilter = localStorage.getItem('selFilters').split(',');
}
$('input[name="tags"]').change(
function() {
var n = $(this).val();
if ($(this).is(':checked')) {
selectedFilter = [n];
localStorage.setItem('selFilters', selectedFilter.join(','));
$('input[name="tags"]').each(function() {
if ($(this).val() != n)
$(this).prop('checked', false);
});
} else {
selectedFilter = [];
localStorage.removeItem('selFilters');
$('input[name="tags"]').prop('checked', false);
}
reloadItem();
});
$('input[name="is"]').change(
function() {
var n = $(this).val();
if ($(this).is(':checked')) {
selectedIsFilter = [n];
localStorage.setItem('selIsFilters', selectedIsFilter.join(','));
$('input[name="is"]').each(function() {
if ($(this).val() != n)
$(this).prop('checked', false);
});
} else {
selectedIsFilter = [];
localStorage.removeItem('selIsFilters');
$('input[name="is"]').prop('checked', false);
}
reloadItem();
});
}
var getOrgTags = function(orgId) {
var url = `//www.serv.stdb.most.go.th/api/v2/organization/${orgId}/tags/`;
var promise = $.get(url);
var $box = $('#any-filter');
promise.fail(function() {
$box.html('');
});
promise.done(function(resp) {
var selectedFilter = [];
if (localStorage.getItem('selFilters')) {
selectedFilter = localStorage.getItem('selFilters').split(',');
}
$box.html(tagsTmpl({
items: resp,
selected: selectedFilter
}));
reloadFilterListener();
});
}
function getStartPage() {
sesToken = sessionStorage.getItem('token'); sesToken = sessionStorage.getItem('token');
if( sesToken === null){ if( sesToken === null) {
token = localStorage.getItem("token") token = localStorage.getItem("token")
// console.log(token) if( token != null ) {
// console.log('==================')
if( token != null ){
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: 'http://www.serv.stdb.most.go.th/api-token-verify/', url: 'http://www.serv.stdb.most.go.th/api-token-verify/',
@ -22,7 +182,7 @@ function getStartPage(){
header: { header: {
Authorization: 'Bearer '+ token, Authorization: 'Bearer '+ token,
}, },
success: function(respone){ success: function(respone) {
sessionStorage.setItem("token",respone.token) sessionStorage.setItem("token",respone.token)
getStat(); getStat();
}, },
@ -38,20 +198,20 @@ function getStartPage(){
} }
} }
function LogoutPage(){ function LogoutPage() {
localStorage.removeItem('token'); localStorage.removeItem('token');
sessionStorage.removeItem('token'); sessionStorage.removeItem('token');
window.location.href = 'index.html' window.location.href = 'index.html'
} }
function getStat(){ function getStat() {
token = sessionStorage.getItem("token") token = sessionStorage.getItem("token")
// console.log(token) // console.log(token)
// console.log('======== 2 ======') // console.log('======== 2 ======')
dataUser = jwt_decode(token) dataUser = jwt_decode(token)
userId = dataUser.user_id userId = dataUser.user_id
if( token != null ){ if( token != null ) {
$.ajax({ $.ajax({
type: "GET", type: "GET",
url: 'http://www.serv.stdb.most.go.th/api/v2/instrument/stats/', url: 'http://www.serv.stdb.most.go.th/api/v2/instrument/stats/',
@ -64,43 +224,51 @@ function getStat(){
} }
} }
function getUser(status){ function getUser(status) {
token = sessionStorage.getItem("token") token = sessionStorage.getItem("token");
// console.log(token) dataUser = jwt_decode(token);
// console.log('======== 2 ======') userId = dataUser.user_id.toString();
dataUser = jwt_decode(token)
userId = dataUser.user_id.toString()
$.ajax({ $.ajax({
type: "GET", type: "GET",
url: 'http://www.serv.stdb.most.go.th/api/v2/user/'+userId+'/', url: 'http://www.serv.stdb.most.go.th/api/v2/user/'+userId+'/',
headers :{ headers :{
Authorization: 'Bearer '+ token, Authorization: 'Bearer '+ token,
}, },
success: function(respone){ success: function(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 = '' 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
$('#modalAll').html(''); $('#modalAll').html('');
$('#card').html(""); $('#card').html('');
htmlText = ''; htmlText = '';
modalText = ''; modalText = '';
dataInstrument = []; 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; var tagFilter = '';
// console.log('url = ' + url) if (localStorage.getItem('selFilters')) {
$.ajax({ tagFilter = localStorage.getItem('selFilters').split(',');
tagFilter = '&tags=' + tagFilter;
}
var isFilter = '';
if (localStorage.getItem('selIsFilters')) {
isFilter = localStorage.getItem('selIsFilters').split(',');
isFilter = '&is=' + isFilter;
}
sessionStorage.setItem('orgId', respone.organizations[0].id);
var url = 'http://www.serv.stdb.most.go.th/api/v2/instrument/?organization='+respone.organizations[0].id+searchText+tagFilter+isFilter;
getOrgTags(respone.organizations[0].id);
xhr = $.ajax({
type: "GET", type: "GET",
url: url, url: url,
headers :{ headers :{
@ -117,9 +285,8 @@ function getUser(status){
} }
function getDataStat(respone){ function getDataStat(respone) {
getUser('first'); getUser('first');
// console.log(respone)
document.getElementById("like").innerHTML = respone.items.completed 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
@ -128,41 +295,43 @@ function getDataStat(respone){
} }
function getData(respone) { function getData(respone) {
// console.log(dataInstrument)
console.log(respone)
console.log("---------------- Next")
console.log(respone.next)
// console.log(respone.results)
console.log(dataInstrument)
dataInstrument = dataInstrument.concat(respone.results) dataInstrument = dataInstrument.concat(respone.results)
console.log('*******ฬฬฬฬฬฬฬฬฬ*********')
console.log(respone.results)
var htmlText = '' var htmlText = ''
var modalText = '' var modalText = ''
for (i=start;i<dataInstrument.length;i++ ){ for (i=start;i<dataInstrument.length;i++ ) {
// console.log('========='+i+'==========') var item = dataInstrument[i];
// console.log(dataInstrument[i].name)
var imageInstrument = '' var imageInstrument = ''
if (dataInstrument[i].clips.length != 0) { if (dataInstrument[i].clips.length != 0) {
var cover_img = getCoverImg(dataInstrument[i].clips);
imageInstrument = '<div class="box-left">' imageInstrument = '<div class="box-left">'
+'<img src="'+dataInstrument[i].clips[0].photo+'" class="cover-img">' +'<img src="'+cover_img+'" class="cover-img">'
+'</div>' +'</div>'
} }
htmlText = htmlText+"<div id='"+i.toString()+"'' class='cardStyle' onclick='modalItem("+i.toString()+")'>" var tagsHtml = '<ul class="list-inline">';
for (var k=0; k<item.tags.length; k++) {
tagsHtml += `<li><span class="tag">${item.tags[k]}</span><li>`;
}
tagsHtml += '</ul>';
htmlText = htmlText+"<div data-id=\"" + item.id + "\" id='"+i.toString()+"'' class='cardStyle cardBox' onClick='modalItem("+i.toString()+");'>"
// Author :: Apirak // Author :: Apirak
+ '<span class="pull-right"><button data-id="' + item.id + '" class="hideBtn"><i class="fa fa-4x fa-times danger"></i></button></span>'
+ '<div class="box_">'
+ imageInstrument + imageInstrument
// end of left // end of left
+'<div class="box-right">' + '<div class="box-right">'
+'<h3 style="font-size:26px;margin-left:20px " >'+dataInstrument[i].name+'</h3>' + '<h3 class="card-title" style="font-size:26px;margin-left:20px " >'
+'<h3 style="color:#9E9E9E;font-size:22px;margin-left:20px " >#'+dataInstrument[i].custom_id+'</h3>' + dataInstrument[i].name+'</h3>'
+'<h3 style="color:#9E9E9E;font-size:22px;margin-left:20px " >@'+dataInstrument[i].caretaker+'</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>'
+ tagsHtml
+'</div>'// end of right +'</div>'// end of right
+ '</div>'
// End // End
+'</div>'; +'</div>';
// console.log(dataInstrument[i].clips.length) var backup = dataInstrument[i].clips;
if(dataInstrument[i].clips.length === 0){ dataInstrument[i].clips = addNullData(dataInstrument[i].clips);
// console.log('========= = 0 =========') if(dataInstrument[i].clips.length === 0) {
imageTag = '<div class="flexCenter">' imageTag = '<div class="flexCenter">'
+'<div class="flexCenter bgImage">' +'<div class="flexCenter bgImage">'
+'<div class="flexCenter">' +'<div class="flexCenter">'
@ -187,23 +356,26 @@ function getData(respone) {
} }
else{ else{
var style4 = '' var style4 = ''
if(dataInstrument[i].clips.length >= 2){ 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
if (loopImage > 4){ if (loopImage > 4) {
loopImage = 4 loopImage = 4
} }
for(j=1;j<loopImage;j++){ for(j=1;j<loopImage;j++) {
if (j==3){ if (j==3) {
style4 = 'margin-top:5px' style4 = 'margin-top:5px'
} }
var imgUrl = '';
if (dataInstrument[i].clips[j].photo) {
imgUrl = dataInstrument[i].clips[j]['thumbnail']['sm'];
}
tagMiniImage = tagMiniImage tagMiniImage = tagMiniImage
+'<img id="myImg'+j+''+i+'" class="miniImage" style="'+style4+'" src="'+dataInstrument[i].clips[j].photo+'" alt=""/>' +'<img id="myImg'+j+''+i+'" class="miniImage" style="'+style4+'" src="'+imgUrl+'" alt=""/>'
+'<h6 class="miniImage flexCenter" ></h6>'; +'<h6 class="miniImage flexCenter" >ไมปภาพ</h6>';
} }
for(j=loopImage;j<4;j++){ for(j=loopImage;j<4;j++) {
if (j==3){ if (j==3) {
style4 = 'margin-top:5px' style4 = 'margin-top:5px'
} }
tagMiniImage = tagMiniImage tagMiniImage = tagMiniImage
@ -212,10 +384,9 @@ function getData(respone) {
} }
} }
else{ else{
// console.log('*********** < 2 ***********')
var tagMiniImage = '' var tagMiniImage = ''
for(j=1;j<4;j++){ for(j=1;j<4;j++) {
if (j==3){ if (j==3) {
style4 = 'margin-top:5px' style4 = 'margin-top:5px'
} }
tagMiniImage = tagMiniImage tagMiniImage = tagMiniImage
@ -224,12 +395,15 @@ function getData(respone) {
} }
} }
var imgUrl = '';
if (dataInstrument[i].clips[0].photo) {
imgUrl = dataInstrument[i].clips[0]['thumbnail']['sm'];
}
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="'+imgUrl+'" 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
@ -242,9 +416,11 @@ function getData(respone) {
+'<input type="file" name="upload" onclick="uploadImage('+i.toString()+')"/>' +'<input type="file" name="upload" onclick="uploadImage('+i.toString()+')"/>'
+'</div>' +'</div>'
} }
var youtube_tag = getYoutubeTag(dataInstrument[i].model,i);
modalText = modalText+'<div id="modal'+i.toString()+'" class="modal" style="max-height: 100%;display: none;padding-top:10px;">' 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
+youtube_tag
+'<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>'
@ -261,6 +437,22 @@ function getData(respone) {
+'<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>'
+'<div style="font-size:20px;margin-top:20px">สถานท</div>'
+'<div style="font-size:16px;margin-top:5px;margin-left:5px"><input type="text" id="lc'+i+'" name="lc'+i+'" placeholder="สถานท" value="'+dataInstrument[i].location+'"></div>'
+'</div>'
+'<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="make'+i+'" name="make'+i+'" placeholder="ยอ" value="'+dataInstrument[i].make+'"></div>'
+'</div>'
+'<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="model'+i+'" name="model'+i+'" placeholder="รน" value="'+dataInstrument[i].model+'"></div>'
+'</div>'
+'<div>'
+'<div style="font-size:20px;margin-top:20px">วโอ(youtube)</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].video+'"></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">'
@ -268,12 +460,14 @@ function getData(respone) {
+'</div>' +'</div>'
+'</div>' +'</div>'
+'</div>'; +'</div>';
dataInstrument[i].clips = backup;
} }
if(respone.next != null){
if(respone.next != null) {
nextUrl = '' nextUrl = ''
moreText = '' 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 id='moreText'>More</h4>"
+"</div>"; +"</div>";
nextUrl = respone.next nextUrl = respone.next
document.getElementById("more").innerHTML = moreText; document.getElementById("more").innerHTML = moreText;
@ -283,15 +477,63 @@ function getData(respone) {
moreText = '' moreText = ''
document.getElementById("more").innerHTML = moreText; document.getElementById("more").innerHTML = moreText;
} }
processingNext = false;
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
reloadCardListener();
/* 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(x) {
// console.log('==================') if (processingNext) {
return;
}
processingNext = true;
$('#moreText').html('<i class="fa fa-spin fa-spinner"></i>');
token = sessionStorage.getItem('token') token = sessionStorage.getItem('token')
$.ajax({ $.ajax({
type: "GET", type: "GET",
@ -306,16 +548,40 @@ function getNextUrl(){
}); });
} }
function modalItem(idCard){ 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.thumbnail.sm;
}
});
return link;
}
function modalItem(idCard) {
if (clickOnHideButton) {
return;
}
var modal = document.getElementById('modal'+idCard); var modal = document.getElementById('modal'+idCard);
// console.log(modal)
var btn = document.getElementById(idCard); var btn = document.getElementById(idCard);
// console.log(btn)
modal.style.display = "block"; modal.style.display = "block";
window.onclick = function(event) { window.onclick = function(event) {
if (event.target == modal) { if (event.target == modal) {
modal.style.display = "none"; modal.style.display = "none";
if(idCard != 'search'){ if(idCard != 'search') {
removeImage(idCard) removeImage(idCard)
} }
dataUri = [] dataUri = []
@ -325,6 +591,7 @@ 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();
@ -333,61 +600,68 @@ function uploadImage(idImage) {
instrument = dataInstrument[parseInt(idImage)] instrument = dataInstrument[parseInt(idImage)]
// console.log(instrument) // console.log(instrument)
// console.log('-------------xxxx-------------') // console.log('-------------xxxx-------------')
var uriAdd = [{'uri':e.target.result}]; 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
} }
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[idImage].clips[idImg].photo); var imgUrl = dataInstrument[idImage].clips[idImg]['thumbnail']['sm'];
$('#myImg'+idImg+''+idImage).attr('src', imgUrl);
} }
} }
// console.log(idImage) // console.log(idImage)
var dataUriSort = dataUri var dataUriSort = dataUri
idloopImage = loopImage idloopImage = loopImage
if(loopImage==0){ if(loopImage==0) {
idloopImage = 0 idloopImage = 0
} }
var idUri = 0 var idUri = 0;
// console.log(dataUri) $.each(dataUri,function(index,obj) {
// console.log(loopImage-1) $('#myImg'+obj.order+''+idImage).attr('src', obj.uri);
// console.log(idloopImage+dataUri.length) });
for(idImg=loopImage;idImg<idloopImage+dataUri.length;idImg++){ check += 1;
$('#myImg'+idImg+''+idImage).attr('src', dataUri[idUri].uri);
idUri += 1
}
// console.log('---------------------------')
// console.log(dataUri)
check += 1
}; };
reader.readAsDataURL(this.files[0]); reader.readAsDataURL(this.files[0]);
} }
}); });
} }
function addData(){ function addData() {
data = { data = {
'name':document.getElementById("nameI").value, 'name':document.getElementById("nameI").value,
'organization': userData.organizations[0].id, 'organization': userData.organizations[0].id,
} }
if(document.getElementById("CrI").value != ''){ if(document.getElementById("CrI").value != '') {
data.caretaker = document.getElementById("CrI").value data.caretaker = document.getElementById("CrI").value
} }
if(document.getElementById("idI").value != ''){ if(document.getElementById("idI").value != '') {
data.instrument_id = document.getElementById("idI").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(dataUri.length != 0){ if(document.getElementById("LcI").value != '') {
data.location = document.getElementById("LcI").value
}
if(document.getElementById("YlI").value != '') {
data.video = document.getElementById("YlI").value
}
if(document.getElementById("makeI").value != '') {
data.make = document.getElementById("makeI").value
}
if(document.getElementById("modelI").value != '') {
data.model = document.getElementById("modelI").value
}
if(dataUri.length != 0) {
data.clips = dataUri data.clips = dataUri
} }
console.log(data) // console.log(data)
data = JSON.stringify(data) data = JSON.stringify(data)
console.log(data) // console.log(data)
token = sessionStorage.getItem('token') token = sessionStorage.getItem('token')
$.ajax({ $.ajax({
type: "POST", type: "POST",
@ -398,7 +672,7 @@ function addData(){
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'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);
}, },
@ -406,18 +680,18 @@ function addData(){
}); });
} }
function updateData(idData){ 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))
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("cr"+idData).value, 'caretaker':document.getElementById("cr"+idData).value,
'location':document.getElementById("lc"+idData).value,
'instrument_id':document.getElementById("id"+idData).value, 'instrument_id':document.getElementById("id"+idData).value,
'make':document.getElementById("make"+idData).value,
'model':document.getElementById("model"+idData).value,
'video':document.getElementById("yl"+idData).value,
} }
if(dataUri.length != 0){ if(dataUri.length != 0) {
dataUpdate.clips = dataUri dataUpdate.clips = dataUri
} }
idInstrument = dataInstrument[parseInt(idData)].id idInstrument = dataInstrument[parseInt(idData)].id
@ -430,7 +704,7 @@ function updateData(idData){
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'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);
}, },
@ -438,7 +712,7 @@ function updateData(idData){
}); });
} }
function deleteData(idData){ function deleteData(idData) {
instrument = dataInstrument[parseInt(idData)] instrument = dataInstrument[parseInt(idData)]
data = {'hide':true} data = {'hide':true}
token = sessionStorage.getItem('token') token = sessionStorage.getItem('token')
@ -451,7 +725,7 @@ function deleteData(idData){
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'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);
}, },
@ -459,32 +733,31 @@ function deleteData(idData){
}); });
} }
function backData(idData){ function backData(idData) {
var modal = document.getElementById('modal'+idData); var modal = document.getElementById('modal'+idData);
modal.style.display = "none"; modal.style.display = "none";
removeImage(idData) removeImage(idData)
dataUri = [] dataUri = []
} }
function removeImage(idData){ function removeImage(idData) {
var tagMiniImage = '' var tagMiniImage = ''
var style4 = '' var style4 = ''
if(idData == 'add'){ if(idData == 'add') {
loopImage = 1 loopImage = 1
} }
else{ else{
var time = new Date() 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++){ var imgUrl = '';
// console.log('#myImg'+j+''+idData) if (dataInstrument[idData].clips[j].photo) {
document.getElementById("myImg"+j+''+idData).src = dataInstrument[idData].clips[j].photo+'?'+time; imgUrl = dataInstrument[idData].clips[j]['thumbnail']['sm'];
// console.log(document.getElementById("myImg"+j+''+idData).src) }
// console.log(document.getElementById("myImg"+j+''+idData)) document.getElementById("myImg"+j+''+idData).src = imgUrl+'?'+time;
} }
} }
for(j=loopImage;j<4;j++){ for(j=loopImage;j<4;j++) {
$('#myImg'+j+''+idData).attr('src',''); $('#myImg'+j+''+idData).attr('src','');
} }
} }

10
login.html

@ -115,4 +115,14 @@
} }
getToken() getToken()
</script> </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');
ga('create', 'UA-72505920-2', 'auto');
ga('send', 'pageview');
</script>
</html> </html>

99
modal.html

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="1">Open Modal</button>
<button id="2">Open Modal</button>
<button id="3">Open Modal</button>
<button id="4">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("2");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
console.log(event)
if (event.target == modal) {
console.log(modal)
console.log(modal.style.display)
modal.style.display = "none";
}
}
</script>
</body>
</html>

0
scss/style.scss

149
stat.html

@ -5,9 +5,11 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Traffy STDB Stat</title> <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="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"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="js/jquery-3.0.0.min.js"></script> <script src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/materialize.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/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/stdb.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="css/stdb.css" media="screen,projection"/>
<style> <style>
@ -45,6 +47,21 @@
display: -webkit-flex; display: -webkit-flex;
display: 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> </style>
</head> </head>
@ -58,58 +75,108 @@
</div> </div>
</div> </div>
<div id="organiz" style="max-width:800px"></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> </div>
</body> </body>
<script language="javascript">
function getStatAll(){ <script type="text/template" class="template" id="each-org">
urlStat = 'http://expert.traffy.xyz/api/v2/organization/stats/' <div class="cardStyle organization"
// console.log(urlStat) id="org-<%- organization.id %>"
$.ajax({ data-org="<%- organization.id %>"
type: "GET", style="width:800px">
url: urlStat, <h3 style="font-size:26px;margin-left:20px "><%- organization.name %> (<%- organization.abbv_en %>)</h3>
success: getData, <div class="flexCenterSpace">
dataType: 'json', <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}));
}); });
} }
function getData(respone){ var getStatAll = function() {
// console.log(respone) urlStat = '//www.serv.stdb.most.go.th/api/v2/organization/stats/';
var htmlText = '' var promise = $.get(urlStat)
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>"
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 document.getElementById("organiz").innerHTML = htmlText;
setTimeout(function() {
for (i=0;i<resp.length;i++ ) {
getOrgTags(resp[i].organization.id);
} }
getStatAll() }, 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> </script>
</html> </html>

141
testItem.html

@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=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>
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
img {
border-radius: 8px;
width: 600px;
height: 600px;
}
.active {
background-color: #4CAF50;
}
.titleIn{
position: fixed;
/*margin-top: -20px;*/
width: 100%;
display:flex;
justify-content: center;
align-items:center;
color:#FFF;
font-size:30px;
}
.container{
margin-right: auto;
margin-left: auto;
}
.boxShow{
display:flex;
justify-content: center;
align-items:center;
/*margin-top: 10px;*/
}
.cardData{
display:flex;
justify-content: center;
align-items:center;
margin-top: 10px;
margin: 10px;
background-color: #FFF;
width: 150px;
height: 150px;
border: 1px solid navy;
}
.flexCenter {
display:flex;
justify-content: center;
align-items:center;
}
.flexCenterSpace {
display:flex;
justify-content: space-around;
-webkit-justify-content: space-around;
align-items:center;
}
.cardStyle{
width: 800px;
/*height: 150px;*/
margin-top: 5px;
background-color: #FFF;
border: 1px solid navy;
}
.modalStyle{
width: 800px;
/*height: 150px;*/
margin-top: 5px;
background-color: #FFF;
border: 1px solid navy;
}
</style>
</head>
<body>
<div>
<ul style="height:80px;font-size:18px;" class="titleIn">
<li><h1 style="align-items: flex-end;font-size:36px;">Instrument</h1></li>
<li style="align-items: flex-end;"><a class="active" onClick="LogoutPage()">Logout</a></li>
</ul>
</div>
</div>
<div id="more" class="container flexCenter" style="max-width:800px">
<div>
<img >
<div>
<h style="font-size:20px">อครณฑทยาศาสตร</h>
</div>
<div>
<h style="font-size:20px">ดประสงคการใชงาน</h>
</div>
<div>
<h style="font-size:20px">เลขครณฑ</h>
</div>
<div>
<h style="font-size:20px">แล</h>
</div>
</div>
</div>
</body>
</script>
</html>

152
testJWT.html

@ -0,0 +1,152 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=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>
<!--[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;
}
</style>
</head>
<body>
<section class="container">
<div class="login">
<h1>Login to STDB</h1>
<form method="post" >
<p><input type="text" name="login" value="" placeholder="token"></p>
<p class="submit"><input type="button" value="decode" onClick="pasuser()"></p>
</form>
</div>
</section>
</body>
<script language="javascript">
function pasuser(form) {
var string = 'eyJ1c2VybmFtZSI6InJhY2hhbm9uIiwib3JpZ19pYXQiOjE0NjYxNTM5NDcsInVzZXJfaWQiOjEsImVtYWlsIjoiIiwiZXhwIjoxNDY2NTg1OTQ3fQ'
var jwpStdb={
_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
encode:function(e){var t="";
var n,r,i,s,o,u,a;
var f=0;e=jwpStdb._utf8_encode(e);
while(f<e.length){
n=e.charCodeAt(f++);
r=e.charCodeAt(f++);
i=e.charCodeAt(f++);s=n>>2;
o=(n&3)<<4|r>>4;
u=(r&15)<<2|i>>6;
a=i&63;
if(isNaN(r)){
u=a=64
}
else if(isNaN(i)){
a=64
}
t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)
}
return t
},
decode:function(e){
var t="";
var n,r,i;
var s,o,u,a;
var f=0;e=e.replace(/[^A-Za-z0-9+/=]/g,"");
while(f<e.length){
s=this._keyStr.indexOf(e.charAt(f++));
o=this._keyStr.indexOf(e.charAt(f++));
u=this._keyStr.indexOf(e.charAt(f++));
a=this._keyStr.indexOf(e.charAt(f++));
n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;
t=t+String.fromCharCode(n);
if(u!=64){
t=t+String.fromCharCode(r)
}
if(a!=64){
t=t+String.fromCharCode(i)
}
}
t=jwpStdb._utf8_decode(t);
return t
},
_utf8_encode:function(e){
e=e.replace(/rn/g,"n");
var t="";
for(var n=0;n<e.length;n++){
var r=e.charCodeAt(n);
if(r<128){
t+=String.fromCharCode(r)
}
else if(r>127&&r<2048){
t+=String.fromCharCode(r>>6|192);
t+=String.fromCharCode(r&63|128)
}
else{
t+=String.fromCharCode(r>>12|224);
t+=String.fromCharCode(r>>6&63|128);
t+=String.fromCharCode(r&63|128)
}
}
return t
},
_utf8_decode:function(e){
var t="";
var n=0;
var r=c1=c2=0;
while(n<e.length){
r=e.charCodeAt(n);
if(r<128){
t+=String.fromCharCode(r);
n++
}
else if(r>191&&r<224){
c2=e.charCodeAt(n+1);
t+=String.fromCharCode((r&31)<<6|c2&63);
n+=2
}
else{
c2=e.charCodeAt(n+1);
c3=e.charCodeAt(n+2);
t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);
n+=3
}
}
return t
}
}
// Define the string
// Encode the String
// var encodedString = jwpStdb.encode(string);
console.log(string); // Outputs: "SGVsbG8gV29ybGQh"
console.log('=====================');
// Decode the String
var decodedString = jwpStdb.decode(string);
console.log(decodedString);
var res = decodedString.replace(' ', '');
console.log(res);
console.log(decodedString.length);
console.log(res.length);
console.log(typeof decodedString);
JSON.parse(res, function(k, v) {
if (k==='user_id'){
console.log(v) // return the unchanged property value.
}
});
}
</script>
</html>

87
testUpload.html

@ -0,0 +1,87 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=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>
<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 class="flexCenter">
<div>
<i class="Large material-icons" onclick="modalItem('add')" style="position: fixed;color:#D50000;-webkit-text-stroke: 2px;-webkit-text-stroke-color:#EF9A9A;">add_circle</i>
</div>
</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" 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" 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" 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" name="CrI" value="" placeholder="ชอ นามสกล"></div>
</div>
<div class="flexCenterSpace" style="margin-top:20px">
<input type="button" onclick="addData()" class="buttonUpdate" value="Update">
<input type="button" onclick="backData()" class="buttonBack" value="Back">
</div>
</div>
</div>
</body>
<script>
function modalItem(idCard){
var modal = document.getElementById('modal'+idCard);
// console.log(modal)
var btn = document.getElementById(idCard);
// console.log(btn)
modal.style.display = "block";
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
removeImage(idCard)
}
}
}
</script>
</html>

104
uploadFile.html

@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=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>
<script src="js/dropzone.js"></script>
<style>
.image {
position: relative;
width: 400px; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
img{
width: 400px;
height: 400px;
}
.flexCenter {
display:flex;
justify-content: center;
align-items:center;
}
.cardData{
display:flex;
justify-content: center;
align-items:center;
margin-top: 10px;
margin: 10px;
background-color: #FFF;
width: 150px;
height: 150px;
border: 1px solid navy;
}
div.upload {
position: absolute;
border-radius: 5px;
width: 100px;
height: 50px;
background-color: #FFF;
color: #000;
overflow: hidden;
}
div input {
position: absolute;
border-radius: 5px;
display: block !important;
width: 100px !important;
height: 50px !important;
opacity: 0 !important;
overflow: hidden !important;
}
</style>
</head>
<body>
<div class="flexCenter">
<div class="image flexCenter">
<img id="myImg" src="" alt="" />
<center><h2>ไมปภาพ</h2> </center>
</div>
</div>
<div class="flexCenter">
<div class="upload flexCenter">
<a style="font-size:18px">Upload</a>
</div>
<input type="file" name="upload"/>
</div>
</body>
<script>
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$('#myImg').attr('src', e.target.result);
};
</script>
</html>
Loading…
Cancel
Save