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