Skip to content

Instantly share code, notes, and snippets.

@residential-map-machine-user

residential-map-machine-user/seat_chart.ctp

Created May 25, 2017 09:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save residential-map-machine-user/3d640f67d5f1b0cfdd7a0e6b3746cac3 to your computer and use it in GitHub Desktop.
Save residential-map-machine-user/3d640f67d5f1b0cfdd7a0e6b3746cac3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<script src="https://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script>
var stage;
//initialize rectangle
var seatReservedBackgroundColor = 'red';
var fontReservedColor = 'white';
var seatNonReservedBackgroundColor = 'grey';
var fontNonReservedColor = 'black';
var seatList = [
{
id:1,
x:50,
y:50,
width:80,
height:120,
},
{
id:2,
x:140,
y:50,
width:80,
height:120,
},
{
id:3,
x:230,
y:50,
width:80,
height:120,
},
{
id:4,
x:50,
y:190,
width:120,
height: 80,
},
{
id:5,
x:50,
y:290,
width:120,
height:80,
},
{
id:6,
x:50,
y:390,
width:120,
height:80,
},
{
id:7,
x:230,
y:190,
width:80,
height:80,
},
{
id:8,
x:230,
y:290,
width:80,
height:80,
},
{
id:9,
x:230,
y:390,
width:80,
height:80,
},
{
id:10,
x:350,
y:50,
width:160,
height:90,
},
{
id:11,
x:350,
y:160,
width:160,
height:90,
},
{
id:12,
x:350,
y:270,
width:160,
height:90,
},
{
id:13,
x:350,
y:380,
width:160,
height:90,
},
{
id:14,
x:530,
y:50,
width:320,
height:90,
},
{
id:15,
x:530,
y:160,
width:320,
height:90,
},
{
id:16,
x:530,
y:270,
width:320,
height:90,
},
{
id:17,
x:530,
y:380,
width:320,
height:90,
}
]
window.addEventListener("load", init);
function init() {
stage = new createjs.Stage("demoCanvas");
//seatを状対に応じて作成
seatList.forEach(function(element){
initialContainer(element);
});
stage.update();
}
function changeForCancel(){
}
function changeForReserve(){
}
function initialContainer(element){
if(true){
//予約がされてる際のcreatejsコンテナ作成
var container = new createjs.Container();
var text = new createjs.Text("予約済", "14px Arial", fontReservedColor);
text.y = 0;
var text1 = new createjs.Text("5/17 18:00", "14 Arial", fontReservedColor);
var rect = new createjs.Shape();
rect.graphics.beginFill(seatReservedBackgroundColor).drawRect(0, 0, element.width, element.height).endFill();
text1.y = 14;
container.x = element.x;
container.y = element.y;
//ここはrectがもつべきなのか　
rect.name = element.id;
container.name = element.id;
container.addEventListener('click', handleCancel);
container.addChild(rect, text, text1);
stage.addChild(container);
stage.update();
}else{
//予約がされてない際のcreatejsコンテナ作成
var container = new createjs.Container();
var text = new createjs.Text("入店可能", "14px Arial", fontNonReservedColor);
text.y = 0;
var text1 = new createjs.Text("5/17 ~18:00", "14 Arial", fontNonReservedColor);
var rect = new createjs.Shape();
rect.graphics.beginFill(seatNonReservedBackgroundColor).drawRect(0, 0, element.width, element.height).endFill();
text1.y = 14;
container.x = element.x;
container.y = element.y;
//ここはrectがもつべきなのか　
rect.name = element.id;
container.name = element.id;
container.addEventListener('click', handleReserve);
container.addChild(rect, text, text1);
stage.addChild(container);
stage.update();
}
}
function handleCancel(e){
console.log('handle cancel is called');
$.ajax({
type: "GET",
url: "/luminous/lreservations/admin/"
}).done(function(data, status, xhr) {
}).fail(function(xhr, status, error) {
//clickされた席番号と同じ座席を取得
var seat_info = seatList.filter(function(element, index, array){
return element.id == e.currentTarget.name;
});
e.currentTarget.removeAllChildren();
var text1 = new createjs.Text("入店可能", "14px Arial", fontNonReservedColor)
var text2 = new createjs.Text("~19:00", "10px Arial", fontNonReservedColor)
text2.y = 14;
var rect = new createjs.Shape()
rect.graphics.beginFill(seatNonReservedBackgroundColor).drawRect(0, 0, seat_info[0].width, seat_info[0].height).endFill();
e.currentTarget.addChild(rect);
e.currentTarget.addChild(text1);
e.currentTarget.addChild(text2);
e.currentTarget.removeEventListener("click", handleCancel);
e.currentTarget.addEventListener("click", handleReserve);
console.log(e.currentTarget)
stage.update();
});
}
function handleReserve(e){
$.ajax({
type: "GET",
url: "/luminous/lreservations/admin/"
}).done(function(data, status, xhr) {
}).fail(function(xhr, status, error) {
//clickされた席番号と同じ座席を取得
var seat_info = seatList.filter(function(element, index, array){
return element.id == e.currentTarget.name;
});
e.currentTarget.removeAllChildren();
var text1 = new createjs.Text("予約済み", "14px Arial", fontReservedColor)
var text2 = new createjs.Text("5/17 17:00~19:00", "10px Arial", fontReservedColor)
text2.y = 14;
var rect = new createjs.Shape()
rect.graphics.beginFill(seatReservedBackgroundColor).drawRect(0, 0, seat_info[0].width, seat_info[0].height).endFill();
e.currentTarget.addChild(rect);
e.currentTarget.addChild(text1);
e.currentTarget.addChild(text2);
e.currentTarget.removeEventListener("click", handleReserve);
e.currentTarget.addEventListener("click", handleCancel);
stage.update();
});
}
</script>
<body>
<div class="wrap">
<div >
<canvas id="demoCanvas" width="1000" height="500"></canvas>
</div>
</div>
</body>
Raw
seat_chart.ctp
<script src="https://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script>
var stage;
//initialize rectangle
var seatReservedBackgroundColor = 'red';
var fontReservedColor = 'white';
var seatNonReservedBackgroundColor = 'grey';
var fontNonReservedColor = 'black';
var seatList = [
{
id:1,
x:50,
y:50,
width:80,
height:120,
},
{
id:2,
x:140,
y:50,
width:80,
height:120,
},
{
id:3,
x:230,
y:50,
width:80,
height:120,
},
{
id:4,
x:50,
y:190,
width:120,
height: 80,
},
{
id:5,
x:50,
y:290,
width:120,
height:80,
},
{
id:6,
x:50,
y:390,
width:120,
height:80,
},
{
id:7,
x:230,
y:190,
width:80,
height:80,
},
{
id:8,
x:230,
y:290,
width:80,
height:80,
},
{
id:9,
x:230,
y:390,
width:80,
height:80,
},
{
id:10,
x:350,
y:50,
width:160,
height:90,
},
{
id:11,
x:350,
y:160,
width:160,
height:90,
},
{
id:12,
x:350,
y:270,
width:160,
height:90,
},
{
id:13,
x:350,
y:380,
width:160,
height:90,
},
{
id:14,
x:530,
y:50,
width:320,
height:90,
},
{
id:15,
x:530,
y:160,
width:320,
height:90,
},
{
id:16,
x:530,
y:270,
width:320,
height:90,
},
{
id:17,
x:530,
y:380,
width:320,
height:90,
}
]
window.addEventListener("load", init);
function init() {
stage = new createjs.Stage("demoCanvas");
//seatを状対に応じて作成
seatList.forEach(function(element){
initialContainer(element);
});
stage.update();
}
function changeForCancel(){
}
function changeForReserve(){
}
function initialContainer(element){
if(true){
//予約がされてる際のcreatejsコンテナ作成
var container = new createjs.Container();
var text = new createjs.Text("予約済", "14px Arial", fontReservedColor);
text.y = 0;
var text1 = new createjs.Text("5/17 18:00", "14 Arial", fontReservedColor);
var rect = new createjs.Shape();
rect.graphics.beginFill(seatReservedBackgroundColor).drawRect(0, 0, element.width, element.height).endFill();
text1.y = 14;
container.x = element.x;
container.y = element.y;
//ここはrectがもつべきなのか　
rect.name = element.id;
container.name = element.id;
container.addEventListener('click', handleCancel);
container.addChild(rect, text, text1);
stage.addChild(container);
stage.update();
}else{
//予約がされてない際のcreatejsコンテナ作成
var container = new createjs.Container();
var text = new createjs.Text("入店可能", "14px Arial", fontNonReservedColor);
text.y = 0;
var text1 = new createjs.Text("5/17 ~18:00", "14 Arial", fontNonReservedColor);
var rect = new createjs.Shape();
rect.graphics.beginFill(seatNonReservedBackgroundColor).drawRect(0, 0, element.width, element.height).endFill();
text1.y = 14;
container.x = element.x;
container.y = element.y;
//ここはrectがもつべきなのか　
rect.name = element.id;
container.name = element.id;
container.addEventListener('click', handleReserve);
container.addChild(rect, text, text1);
stage.addChild(container);
stage.update();
}
}
function handleCancel(e){
console.log('handle cancel is called');
$.ajax({
type: "GET",
url: "/luminous/lreservations/admin/"
}).done(function(data, status, xhr) {
}).fail(function(xhr, status, error) {
//clickされた席番号と同じ座席を取得
var seat_info = seatList.filter(function(element, index, array){
return element.id == e.currentTarget.name;
});
e.currentTarget.removeAllChildren();
var text1 = new createjs.Text("入店可能", "14px Arial", fontNonReservedColor)
var text2 = new createjs.Text("~19:00", "10px Arial", fontNonReservedColor)
text2.y = 14;
var rect = new createjs.Shape()
rect.graphics.beginFill(seatNonReservedBackgroundColor).drawRect(0, 0, seat_info[0].width, seat_info[0].height).endFill();
e.currentTarget.addChild(rect);
e.currentTarget.addChild(text1);
e.currentTarget.addChild(text2);
e.currentTarget.removeEventListener("click", handleCancel);
e.currentTarget.addEventListener("click", handleReserve);
console.log(e.currentTarget)
stage.update();
});
}
function handleReserve(e){
$.ajax({
type: "GET",
url: "/luminous/lreservations/admin/"
}).done(function(data, status, xhr) {
}).fail(function(xhr, status, error) {
//clickされた席番号と同じ座席を取得
var seat_info = seatList.filter(function(element, index, array){
return element.id == e.currentTarget.name;
});
e.currentTarget.removeAllChildren();
var text1 = new createjs.Text("予約済み", "14px Arial", fontReservedColor)
var text2 = new createjs.Text("5/17 17:00~19:00", "10px Arial", fontReservedColor)
text2.y = 14;
var rect = new createjs.Shape()
rect.graphics.beginFill(seatReservedBackgroundColor).drawRect(0, 0, seat_info[0].width, seat_info[0].height).endFill();
e.currentTarget.addChild(rect);
e.currentTarget.addChild(text1);
e.currentTarget.addChild(text2);
e.currentTarget.removeEventListener("click", handleReserve);
e.currentTarget.addEventListener("click", handleCancel);
stage.update();
});
}
</script>
<body>
<div class="wrap">
<div >
<canvas id="demoCanvas" width="1000" height="500"></canvas>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment