Files
FE_CPONE/test/vuex/one-queue-fo-v2/index.php
2026-04-27 10:13:31 +07:00

133 lines
4.6 KiB
PHP

<!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 xs8 class="left" fill-height pa-1>
<one-queue-fo></one-queue-fo>
</v-flex>
<v-flex xs4 class="right" fill-height pa-1>
<one-queue-status></one-queue-status>
</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;
var socketIoUrl = "https://" + window.location.host + ":9099/";
new Vue({
store,
data: {
socket: io.connect(socketIoUrl, {
forceNew: false,
// transports: ['polling', 'flashsocket']
transports: ['websocket']
}).on('connect', function() {
console.log('connection established');
})
},
mounted: async function() {
this.socket.on("notification", function(msg) {
console.log("iosocket message", msg);
let splitted = msg.type.split(".");
var arrServiceID = store.state.queue.arrServiceID;
console.log(arrServiceID);
if (splitted.length >= 3 && splitted[1] == 'fo') {
if (arrServiceID.includes(parseInt(splitted[2]))) {
store.dispatch("queue/loadx", {
serviceid: store.state.queue.selected_service.serviceID
});
if (g_timeout > 0) clearTimeout(g_timeout);
g_timeout = setTimeout(function() {
store.dispatch("queue/loadx", {
serviceid: store.state.queue.selected_service.serviceID
});
}, 60000);
}
}
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'),
'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue'),
'one-queue-fo': httpVueLoader('./components/oneQueueFo.vue'),
'one-queue-status': httpVueLoader('./components/oneQueueStatus.vue')
}
})
</script>
<style>
[v-cloak] {
display: none
}
main {
padding: 40px 0px 0px !important;
}
</style>
</body>
</html>