<!DOCTYPE html>
<html lang="en">

   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>One</title>
      <link rel="stylesheet" href="../../../libs/vendor/css/google-fonts.css">
      <link rel="stylesheet" href="../../../libs/vendor/css/vuetify.min.css">
   </head>

   <body>
      <div v-cloak id="app">
         <v-app id="smartApp" >
            <one-navbar></one-navbar>
            <br/>
            <v-content class="blue lighten-5 one" >
               <v-container fluid pt-2 pb-2 pl-1 pr-1>
                  <v-layout row wrap >
                     <v-flex xs12 class="left" fill-height pa-1>
                        <one-report></one-report>
                     </v-flex>
                  </v-layout>
               </v-container>
            </v-content>
            <one-footer> </one-footer>
         </v-app>
      </div>

      <!-- Vendor -->
      <script src="../../../libs/vendor/moment.min.js"></script>
      <script src="../../../libs/vendor/numeral.min.js"></script>
      <script src="../../../libs/vendor/moment-locale-id.js"></script>
      <script src="../../../libs/vendor/lodash.js"></script>
      <script src="../../../libs/vendor/axios.min.js"></script>
      <script src="../../../libs/vendor/vue.js"></script>
      <script src="../../../libs/vendor/vuex.js"></script>
      <script src="../../../libs/vendor/vuetify.js"></script>
      <script src="../../../libs/vendor/httpVueLoader.js"></script>
      <script src="../../../libs/vendor/socket.io.js"></script>

      <script src="../../../libs/one_global.js"></script>
      <!-- App Script -->
<?php
$ts = "?ts=" . Date("ymdhis");
?>
<script type="module">


import { store } from './store.js<?php echo $ts ?>';

//for testing
window.store = store;
let g_timeout = 0;

let ts = '?ts=' + moment().format('YYYYMMDDHHmmss');
var socketIoUrl = "http://" + window.location.host + ":9090/";
new Vue({
store,
data : {
   socket : io.connect(socketIoUrl,{forceNew:false})
},
mounted: async function() {
	this.socket.on("notification", function(msg) {
		switch(msg.type) {
		case "reload-fo" :
                  store.dispatch("queue/loadx",{serviceid:0});
                  if (g_timeout > 0 ) clearTimeout(g_timeout);
                  g_timeout = setTimeout(function() {
                     store.dispatch("queue/loadx",{serviceid:0});
                  },60000);
		break;
		}
        });
},
computed : {
   tab_active () {
      return store.state.tab_active
   }
},
   el: '#app',
   components: {
   'one-navbar': httpVueLoader('../../../apps/components/oneNavbarComponent.vue' + ts),
      'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue' + ts),
        'one-report': httpVueLoader('./components/oneReport.vue' + ts),
        'one-queue-status': httpVueLoader('./components/oneQueueStatus.vue' + ts)
      }
    })
    </script>
    <style>
[v-cloak] {
   display: none
}
    main {
       padding:40px 0px 0px !important;
    }
    </style>
   </body>

</html>
