|
|
<!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 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> |
|
|
<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; |
|
|
} |
|
|
</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> |
|
|
|
|
|
</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', |
|
|
}); |
|
|
} |
|
|
|
|
|
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() |
|
|
</script> |
|
|
</html>
|
|
|
|
