<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  	<title>實時入場報告</title>
  	<meta charset="utf-8">
  	<meta http-equiv="X-UA-Compatible" content="IE=edge">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    
    <link rel="shortcut icon" href="./images/icon.png" type="image/x-icon">
  	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  	<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
	  <link href="https://cdn.jsdelivr.net/npm/vuetify@1.x/dist/vuetify.min.css" rel="stylesheet">
	  <script src="https://unpkg.com/vue-toasted"></script>
	  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
	  <script
	  src="https://code.jquery.com/jquery-3.3.1.min.js"
	  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
	  crossorigin="anonymous"></script>

	  <style>
	  .loading {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		background: white;
		z-index: 1000;
	  }
	  [v-cloak] {
		display:none;
	  }
	  #app {
		background-image: linear-gradient(to bottom right, #ef4a66, #c81933); 
		width: 100vw;
		min-height: 100vh;
	  }
	  .logo {
		/*background-image: linear-gradient(to bottom right, rgba(255,255,255,0.1) 0%, rgba(100,100,100,0.05) 10%, rgba(255,255,255,0.1) 30%, rgba(255,255,255,0.25) 70%, rgba(255,255,255,0.4) 85%, rgba(255,255,255,0.6) 100%);*/
		background-color: white;
		box-shadow: 0px 1px 3px 0px rgba(0,0,0,.5),
					2px 3px 7px -1px rgba(0,0,0,.087),
					1px 1px 6px 2px rgba(0,0,0,.026),
					1px 2px 7px 3px rgba(0,0,0,.035);
		border-radius: 50%;
		transition: .3s all ease;
		-webkit-animation-name: roll; /* Safari 4.0 - 8.0 */
		  -webkit-animation-duration: .3s; /* Safari 4.0 - 8.0 */
		  -webkit-animation-timing-function: ease-out; /* Safari 4.0 - 8.0 */
		  -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
		  animation-name: roll;
		  animation-duration: .3s;
		  animation-timing-function: ease-out;
		  animation-delay: 1s;
	  }
	  .theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
		border-radius: 50px;
	  }
	  @keyframes roll {
		0% {transform: rotate(0deg);}
		20% {transform: rotate(-3deg);}
		40% {transform: rotate(10deg);}
		60% {transform: rotate(-5deg);}
		80% {transform: rotate(5deg);}
		100% {transform: rotate(0deg);}
	  }
	  @-webkit-keyframes roll {
		0% {transform: rotate(0deg);}
		20% {transform: rotate(-3deg);}
		40% {transform: rotate(5deg);}
		60% {transform: rotate(-5deg);}
		80% {transform: rotate(5deg);}
		100% {transform: rotate(0deg);}
	  }
	  </style>
  </head>

  <body>
    <div v-cloak class="cloak">
  	<div class="subheading">抱歉！你的瀏覽器已停用了JavaScript功能，請啟用JavaScript後重新整理頁面。</div>
    </div>
    <div id="app">
  	<div id="qrcode">
  	<v-container grid-list-xl fluid>
  	  <v-layout row wrap text-xs-center>
  	  <v-flex xs12>
  		<v-avatar size="150px" class="logo text-xs-center"> 
  		  <v-img class="mx-auto" aspect-ratio="1" width="100%" cover src="./images/icon.png" alt="LOGO">
  		</v-avatar>
  	  </v-flex>

  	  <v-flex xs12 sm8 md6 offset-sm2 offset-md0>
  	  <h2 class="title font-weight-bold white--text pb-2" style="text-shadow: 1px 1px 3px #666;">實時入場人數</h2>
  			<v-card>
  			  <v-card-text class="pa-0">
  				<v-data-table
  				  :items="report.today.hourly_count"
  				  :loading="report.loading_today?'#c81933':false"
  				  hide-actions
  				  :headers-length="2"
  				  :rows-per-page-items="[{text:'All','value':-1}]"
  				>
  				  <template slot="headers">
  					<th role="columnheader" scope="col" class="font-weight-bold column text-xs-left">時段{{` (${report.today.date||'今日'})`}}</th>
  					<th role="columnheader" scope="col" class="font-weight-bold column text-xs-right">
  					  <v-btn icon small flat dark color="#c81933" @click="getHourlyReport">
  						<v-icon>refresh</v-icon>
  					  </v-btn>
  					  人數
  					</th>
  				  </template>
  				  <template v-slot:items="props">
  					<tr>
  					  <td class="text-xs-left">{{ props.item.time }}</td>
  					  <td class="text-xs-right">{{ props.item.count }}</td>
  					</tr>
  				  </template>
  				  <template slot="footer">
  					<tr v-if="!report.last_updated" class="font-weight-bold">
  					  <td class="text-xs-left">合計</td>
  					  <td class="text-xs-right">{{report.today.hourly_count?report.today.hourly_count.reduce((acc,t)=>(acc+t.count),0):0}}</td>
  					</tr>
  				  </template>
  				</v-data-table>
  			  </v-card-text>
  			</v-card>
  			<div class="text-xs-right" v-if="report.last_updated_today">            
  			  <span class="caption white--text mr-1">Last updated at: {{report.last_updated_today.toLocaleString()}}</span>
  			</div>
  	  </v-flex>
  	  <v-flex xs12 sm8 md6 offset-sm2 offset-md0>
  	  <h2 class="title font-weight-bold white--text pb-2" style="text-shadow: 1px 1px 3px #666;">過去入場人數</h2>
  			<v-card>
  			  <v-card-text class="pa-0">
  				<v-data-table
  				  :items="report.past"
  				  :loading="report.loading_past?'#c81933':false"
  				  hide-actions
  				  :headers-length="2"
  				  :rows-per-page-items="[{text:'All','value':-1}]"
  				>
  				  <template slot="headers">
  					<th role="columnheader" scope="col" class="font-weight-bold column text-xs-left">日期</th>
  					<th role="columnheader" scope="col" class="font-weight-bold column text-xs-right">
  					  <v-btn icon small flat dark color="#c81933" @click="getDailyReport">
  						<v-icon>refresh</v-icon>
  					  </v-btn>
  					  人數
  					</th>
  				  </template>
  				  <template v-slot:items="props">
  					<tr>
  					  <td class="text-xs-left">{{ props.item.date }}</td>
  					  <td class="text-xs-right">{{ props.item.count }}</td>
  					</tr>
  				  </template>
  				  <template slot="footer">
  					<tr v-if="!report.last_updated" class="font-weight-bold">
  					  <td class="text-xs-left">合計</td>
  					  <td class="text-xs-right">{{report.past?report.past.reduce((acc,t)=>(acc+t.count),0):0}}</td>
  					</tr>
  				  </template>
  				</v-data-table>
  			  </v-card-text>
  			</v-card>
  			<div class="text-xs-right"  v-if="report.last_updated_past">    
  			  <span class="caption white--text mr-1">Last updated at: {{report.last_updated_past.toLocaleString()}}</span>
  			</div>
  	  </v-flex>
  	  </v-layout>       
  	</v-container>
  	</div>
    </div>
  	<!-- vue script -->
  	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  	<script src="https://cdn.jsdelivr.net/npm/vuetify@1.x/dist/vuetify.js"></script>
  	<script>
  	"use strict";
  	(function() {
  	Vue.use(Toasted);
  	  var app = new Vue({
  		el: '#app',
  		data: {
  		report: {
  		  today: [],
  		  past: [],
  		  last_updated_today: null,
  		  last_updated_past: null,
  		  loading_today: false,
  		  loading_past: false,
  		  timer: null,
  		}
  		},
  		mounted () {
  		this.getReports();
  		},
  		methods: {
  		startCounter () {
  		  let _this = this;
  		  setInterval(function(){
  			let today_report_duration = (new Date() - _this.report.last_updated_today)/1000;
  			let past_report_duration = (new Date() - _this.report.last_updated_past)/1000;
  			if (today_report_duration >= (60*5)) {
  			  _this.getHourlyReport();
  			}
  			if (past_report_duration >= (60*60*12)) {
  			  _this.getDailyReport();
  			}
  		  },1000);
  		},
  		getReports() {
  		  this.getHourlyReport();
  		  this.getDailyReport();
  		},
  		getHourlyReport () {
  			if(!this.report.last_updated_today) {
  			  this.startCounter();
  			}

  		  this.report.loading_today = true;
  		  $.ajax({
    			url: 'https://redirect.1ticks.com/redirect/public/api/sanrio_hkha/hourly_report',
    		  type: 'get',
    			dataType: 'json',
    		  headers: {
    			 "x-1ticks-staff-token": "dlbnh82zlp911ueso5ih"
    			},
    		}).then((res) => {
  			  this.report.last_updated_today = new Date();
  			  this.report.loading_today  = false;
  			  this.report.today  = res.data;
  			}).catch(err => {
  			  this.report.loading_today  = false;
          console.error(err);
          if(err.status === 0) {
            swal("沒有互聯網連接", "There is no internet connection", 'error');
          }
  			});
  		},
  		getDailyReport () {
  		  this.report.loading_past = true;
  		  $.ajax({
    			url: 'https://redirect.1ticks.com/redirect/public/api/sanrio_hkha/daily_report',
    		  type: 'get',
    			dataType: 'json',
    		  headers: {
    			 "x-1ticks-staff-token": "dlbnh82zlp911ueso5ih"
    			},
    		}).then((res) => {
  			  this.report.last_updated_past = new Date();
  			  this.report.loading_past  = false;
  			  this.report.past = res.data;
  			}).catch(err => {
  			  this.report.loading_past  = false;
          console.error(err);
          if(err.status === 0) {
            swal("沒有互聯網連接", "There is no internet connection", 'error');
          }
  			});
  		},
  		}
  	  });
  	})();
  	</script>
  </body>
</html>
