|
|
|
|
@ -5,9 +5,11 @@
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|
|
|
|
<title>Traffy STDB Stat</title> |
|
|
|
|
<link rel="shortcut icon" type="image/png" href="https://avatars1.githubusercontent.com/u/17867603?v=3&s=200"/> |
|
|
|
|
<link rel="stylesheet" href="//api.traffy.xyz/static/font-awesome/css/font-awesome.min.css" /> |
|
|
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
|
|
|
|
<script src="js/jquery-3.0.0.min.js"></script> |
|
|
|
|
<script type="text/javascript" src="js/materialize.min.js"></script> |
|
|
|
|
<script src="//api.traffy.xyz/static/underscore/underscore-min.js"></script> |
|
|
|
|
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> |
|
|
|
|
<link type="text/css" rel="stylesheet" href="css/stdb.css" media="screen,projection"/> |
|
|
|
|
<style> |
|
|
|
|
@ -45,6 +47,21 @@
|
|
|
|
|
display: -webkit-flex; |
|
|
|
|
display: flex; |
|
|
|
|
} |
|
|
|
|
.tag-container { |
|
|
|
|
padding: 1rem; |
|
|
|
|
} |
|
|
|
|
ul.list-inline { |
|
|
|
|
background: white; |
|
|
|
|
} |
|
|
|
|
ul.list-inline li { |
|
|
|
|
margin: 0 1rem 0 5px; |
|
|
|
|
} |
|
|
|
|
span.tag { |
|
|
|
|
background: #ccc; |
|
|
|
|
margin: 0 5px; |
|
|
|
|
border-radius: 3px; |
|
|
|
|
padding: 0 1rem; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
</head> |
|
|
|
|
|
|
|
|
|
@ -58,58 +75,108 @@
|
|
|
|
|
</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> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body> |
|
|
|
|
<script language="javascript"> |
|
|
|
|
function getStatAll(){ |
|
|
|
|
urlStat = 'http://expert.traffy.xyz/api/v2/organization/stats/' |
|
|
|
|
// console.log(urlStat) |
|
|
|
|
$.ajax({ |
|
|
|
|
type: "GET", |
|
|
|
|
url: urlStat, |
|
|
|
|
success: getData, |
|
|
|
|
dataType: 'json', |
|
|
|
|
|
|
|
|
|
<script type="text/template" class="template" id="each-org"> |
|
|
|
|
<div class="cardStyle organization" |
|
|
|
|
id="org-<%- organization.id %>" |
|
|
|
|
data-org="<%- organization.id %>" |
|
|
|
|
style="width:800px"> |
|
|
|
|
<h3 style="font-size:26px;margin-left:20px "><%- organization.name %> (<%- organization.abbv_en %>)</h3> |
|
|
|
|
<div class="flexCenterSpace"> |
|
|
|
|
<div class="flex-container column flexCenter"> |
|
|
|
|
<i class="medium material-icons " style="">thumb_up</i> |
|
|
|
|
<i class="" style="">ข้อมูลครบ</i> |
|
|
|
|
<i class="" style=""><%- items.completed %></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="flex-container column flexCenter"> |
|
|
|
|
<i class="medium material-icons " style="">trending_up</i> |
|
|
|
|
<i class="" style="">ข้อมูลอัพเดท</i> |
|
|
|
|
<i class="" style=""><%- items.recent_update %></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="flex-container column flexCenter"> |
|
|
|
|
<i class="medium material-icons " style="">featured_play_list</i> |
|
|
|
|
<i class="" style="">ทั้งหมด</i> |
|
|
|
|
<i class="" style=""><%- items.all %></i> |
|
|
|
|
</div> |
|
|
|
|
<div class="flex-container column flexCenter"> |
|
|
|
|
<i class="medium material-icons " style="">photo</i> |
|
|
|
|
<i class="" style="">มีรูป</i> |
|
|
|
|
<i class="" style=""><%- items.photos %></i> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="tag-container"> |
|
|
|
|
<i class="fa fa-spin fa-spinner"></i> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/template" class="template" id="tag-list"> |
|
|
|
|
<div class="tags"> |
|
|
|
|
<ul class="list-inline"><% for (i in items) {%> |
|
|
|
|
<li><span class="tag"><%- items[i][0] %></span> <%- items[i][1] %></li> |
|
|
|
|
<% } %></ul> |
|
|
|
|
<div> |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
var orgTmpl = _.template($("script#each-org").html()); |
|
|
|
|
var tagsTmpl = _.template($("script#tag-list").html()); |
|
|
|
|
|
|
|
|
|
var getOrgTags = function(orgId) { |
|
|
|
|
var url = `//www.serv.stdb.most.go.th/api/v2/organization/${orgId}/tags/`; |
|
|
|
|
var promise = $.get(url); |
|
|
|
|
var $box = $('#org-' + orgId); |
|
|
|
|
promise.fail(function() { |
|
|
|
|
$box.find('.tag-container').html(''); |
|
|
|
|
}); |
|
|
|
|
promise.done(function(resp) { |
|
|
|
|
console.log(resp); |
|
|
|
|
$box.find('.tag-container').html(tagsTmpl({items: resp})); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function getData(respone){ |
|
|
|
|
// console.log(respone) |
|
|
|
|
var htmlText = '' |
|
|
|
|
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>" |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
document.getElementById("organiz").innerHTML = htmlText |
|
|
|
|
} |
|
|
|
|
getStatAll() |
|
|
|
|
var getStatAll = function() { |
|
|
|
|
urlStat = '//www.serv.stdb.most.go.th/api/v2/organization/stats/'; |
|
|
|
|
var promise = $.get(urlStat) |
|
|
|
|
|
|
|
|
|
promise.fail(function() { |
|
|
|
|
document.getElementById("organiz").innerHTML = 'Try reloading'; |
|
|
|
|
}); |
|
|
|
|
promise.done(function(resp) { |
|
|
|
|
var htmlText = '' |
|
|
|
|
for (i=0;i<resp.length;i++ ) { |
|
|
|
|
htmlText += orgTmpl(resp[i]); |
|
|
|
|
} |
|
|
|
|
document.getElementById("organiz").innerHTML = htmlText; |
|
|
|
|
|
|
|
|
|
setTimeout(function() { |
|
|
|
|
for (i=0;i<resp.length;i++ ) { |
|
|
|
|
getOrgTags(resp[i].organization.id); |
|
|
|
|
} |
|
|
|
|
}, 500); |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
|
|
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
|
|
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
|
|
|
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); |
|
|
|
|
|
|
|
|
|
getStatAll(); |
|
|
|
|
ga('create', 'UA-72505920-2', 'auto'); |
|
|
|
|
ga('send', 'pageview'); |
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
</html> |
|
|
|
|
|
