~~~
<?php
$status = '';
if (isset($_GET['status']) && !empty($_GET['status'])) {
$status = $_GET['status'];
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<title>在線選座訂座（影院版）</title>
<meta name="keywords" content="jQuery,選座" />
<link href="./css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div class="demo">
<div id="seat-map">
<div class="front">
屏幕
</div>
</div>
<div class="booking-details">
<p>影片：<span>中國機長 9.3</span></p>
<p>時間：<span>10月01日 21:00</span></p>
<p>座位：</p>
<ul id="selected-seats"></ul>
<p>票數：<span id="counter">0</span></p>
<p>總計：<b>￥<span id="total">0</span></b></p>
<button id="buy" class="checkout-button">確定購買</button>
<div id="legend"></div>
</div>
<div style="clear:both"></div>
</div>
<br />
</div>
</body>
</html>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.seat-charts.min.js"></script>
<script type="text/javascript">
var price = 80; //票價
$(document).ready(function() {
var $cart = $('#selected-seats'), //座位區
$counter = $('#counter'), //票數
$total = $('#total'); //總計金額
var sc = $('#seat-map').seatCharts({
map: [ //座位圖
'aaaaaaaaaa',
'aaaaaaaaaa',
'__________',
'aaaaaaaaaa',
'aaaaaaaaaa',
'aaaaaaaaaa',
],
naming : {
top : false,
getLabel : function (character, row, column) {
return column;
}
},
legend : { //定義圖例
node : $('#legend'),
items : [
[ 'a', 'available', '可選座' ],
[ 'a', 'unavailable', '已售出']
]
},
click: function () { //點擊事件
if (this.status() == 'available') { //可選座
$('<li>'+(this.settings.row+1)+'排'+this.settings.label+'座</li>')
.attr('id', 'cart-item-'+this.settings.id)
.data('seatId', this.settings.id)
.appendTo($cart);
$counter.text(sc.find('selected').length+1);
$total.text(recalculateTotal(sc)+price);
return 'selected';
} else if (this.status() == 'selected') { //已選中
//更新數量
$counter.text(sc.find('selected').length-1);
//更新總計
$total.text(recalculateTotal(sc)-price);
//刪除已預訂座位
$('#cart-item-'+this.settings.id).remove();
//可選座
return 'available';
} else if (this.status() == 'unavailable') { //已售出
return 'unavailable';
} else {
return this.style();
}
}
});
//計算總金額
function recalculateTotal(sc) {
var total = 0;
sc.find('selected').each(function () {
total += price;
});
return total;
}
//已售出的座位
// sc.get(['5_6','5_5']).status('unavailable');
$("#buy").click(function () {
var ids = "";
$("#selected-seats li").each(function () {
ids = ids+this.id+"|"
});
location.href = "success.php?ids="+ids;
});
var wsServer = 'ws://192.168.33.10:9504';
var websocket = new WebSocket(wsServer);
websocket.onopen = function (client) {
websocket.send("<?php echo $status?>");
};
websocket.onmessage = function (client) {
// console.log('Retrieved data from server: ' + client.data);
if (client.data) {
var data = JSON.parse(client.data);
sc.get(data).status('unavailable');
}
};
websocket.onclose = function (client) {
console.log("Disconnected");
};
websocket.onerror = function (client, e) {
console.log('Error occured: ' + client.data);
};
});
</script>
~~~
