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