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

Fix: UI & UX

master
sipp11 8 years ago
parent
ba43791061
commit
35392ca322
8 changed files with 993 additions and 604 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .gitignore
  2. 21
      bower.json
  3. 45
      css/stdb.css
  4. 10
      index.html
  5. 88
      instrument.html
  6. 301
      js/stdb.js
  7. 10
      login.html
  8. 149
      stat.html

1
.gitignore vendored
Unescape View File

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

21
bower.json
Unescape View File

@ -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"
}
}

45
css/stdb.css
Unescape View File

@ -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,23 +249,25 @@ 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 */

10
index.html
Unescape View File

@ -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>

88
instrument.html
Unescape View File

@ -7,27 +7,62 @@
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>
<li><a href="javascript:history.go(0)" class="active">Instrument</a></li> <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="LogoutPage()">Logout</a></li>
<li style="float:right;font-size:18px"><a onClick="modalItem('add')">+ Add Instrument</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> <li style="float:right;"><a class="material-icons" onclick="modalItem('search')" style="color:#FFF;">search</a></li>
</center> </center>
</ul> </ul>
@ -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>
@ -166,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){

301
js/stdb.js
Unescape View File

@ -6,14 +6,174 @@ 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());
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() { 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)
// console.log('==================')
if( token != null ) { if( token != null ) {
$.ajax({ $.ajax({
type: "POST", type: "POST",
@ -65,11 +225,9 @@ 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+'/',
@ -77,7 +235,6 @@ function getUser(status){
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>'
@ -90,17 +247,28 @@ function getUser(status){
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 :{
@ -119,7 +287,6 @@ 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,21 +295,12 @@ 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); var cover_img = getCoverImg(dataInstrument[i].clips);
@ -150,23 +308,30 @@ function getData(respone) {
+'<img src="'+cover_img+'" 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 " >'
+ dataInstrument[i].name+'</h3>'
+ '<h3 style="color:#9E9E9E;font-size:22px;margin-left:20px " >#'+dataInstrument[i].custom_id+'</h3>' + '<h3 style="color:#9E9E9E;font-size:22px;margin-left:20px " >#'+dataInstrument[i].custom_id+'</h3>'
+'<span style="float:right;color:#9E9E9E;font-size:22px;margin-left:20px " >@'+dataInstrument[i].location+'</span>' + '<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].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; var backup = dataInstrument[i].clips;
dataInstrument[i].clips = addNullData(dataInstrument[i].clips); dataInstrument[i].clips = addNullData(dataInstrument[i].clips);
if(dataInstrument[i].clips.length === 0) { if(dataInstrument[i].clips.length === 0) {
// console.log('========= = 0 =========')
imageTag = '<div class="flexCenter">' imageTag = '<div class="flexCenter">'
+'<div class="flexCenter bgImage">' +'<div class="flexCenter bgImage">'
+'<div class="flexCenter">' +'<div class="flexCenter">'
@ -192,7 +357,6 @@ 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) {
@ -202,8 +366,12 @@ function getData(respone) {
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++) {
@ -216,7 +384,6 @@ 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) {
@ -228,11 +395,14 @@ 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">'
@ -292,11 +462,12 @@ function getData(respone) {
+'</div>'; +'</div>';
dataInstrument[i].clips = backup; 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;
@ -306,11 +477,15 @@ 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 */ /* Apirak */
$("img[id*='myImg']").each(function() { $("img[id*='myImg']").each(function() {
var id = $(this).attr('id'); var id = $(this).attr('id');
@ -353,8 +528,12 @@ function getYoutubeTag(link,index){
return 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",
@ -386,17 +565,18 @@ function getCoverImg(arr){
if(obj.order == 0) if(obj.order == 0)
{ {
link=obj.photo; link=obj.thumbnail.sm;
} }
}); });
return link; return link;
} }
function modalItem(idCard) { 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) {
@ -428,7 +608,8 @@ function uploadImage(idImage) {
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)
@ -437,20 +618,11 @@ function uploadImage(idImage) {
if(loopImage==0) { if(loopImage==0) {
idloopImage = 0 idloopImage = 0
} }
var idUri = 0 var idUri = 0;
// console.log(dataUri)
// console.log(loopImage-1)
// console.log(idloopImage+dataUri.length)
/*for(idImg=loopImage;idImg<idloopImage+dataUri.length;idImg++){
$('#myImg'+idImg+''+idImage).attr('src', dataUri[idUri].uri);
idUri += 1
}*/
$.each(dataUri,function(index,obj) { $.each(dataUri,function(index,obj) {
$('#myImg'+obj.order+''+idImage).attr('src', obj.uri); $('#myImg'+obj.order+''+idImage).attr('src', obj.uri);
}); });
// console.log('---------------------------') check += 1;
// console.log(dataUri)
check += 1
}; };
reader.readAsDataURL(this.files[0]); reader.readAsDataURL(this.files[0]);
} }
@ -509,10 +681,6 @@ 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,
@ -580,14 +748,13 @@ function removeImage(idData){
} }
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++) {
// console.log('#myImg'+j+''+idData) var imgUrl = '';
document.getElementById("myImg"+j+''+idData).src = dataInstrument[idData].clips[j].photo+'?'+time; if (dataInstrument[idData].clips[j].photo) {
// console.log(document.getElementById("myImg"+j+''+idData).src) imgUrl = dataInstrument[idData].clips[j]['thumbnail']['sm'];
// 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++) {

10
login.html
Unescape View File

@ -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>

149
stat.html
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save