784 lines
26 KiB
JavaScript
784 lines
26 KiB
JavaScript
/// <reference path="./typings/konva.d.ts" />
|
|
let stage;
|
|
let transformer;
|
|
let tableLayer;
|
|
let editMode = false;
|
|
let activeTables = [];
|
|
let selectedTable;
|
|
let selectedTableNumber;
|
|
let currentRoom;
|
|
let basis = 1280;
|
|
let scale = 1;
|
|
let newTable;
|
|
let roomName;
|
|
//Makes sure canvas always fits inside the div
|
|
function getDimensions(parentDiv) {
|
|
let tableMap = $('#tableMap');
|
|
let outerWidth = parentDiv.outerWidth();
|
|
let outerHeight = parentDiv.outerHeight();
|
|
let width = outerWidth;
|
|
let height = outerWidth;
|
|
if (outerWidth >= outerHeight) {
|
|
width = outerHeight;
|
|
height = outerHeight;
|
|
}
|
|
tableMap.height(height);
|
|
tableMap.width(width);
|
|
scale = width / basis;
|
|
return { width: width, height: height };
|
|
}
|
|
function setupTableMap() {
|
|
let doc = $(document);
|
|
activeTables = ajaxSync('/ajax/getActiveTables/1', null, 'GET');
|
|
let dimensions = getDimensions($('#mapContainer'));
|
|
roomName = 'Deck & Courtyard';
|
|
stage = new Konva.Stage({
|
|
container: 'tableMap',
|
|
width: dimensions.width,
|
|
height: dimensions.height,
|
|
});
|
|
$('body').on('click', '.editModeButton', () => { toggleEditMode(); });
|
|
$('.roomButton').on('click', function () {
|
|
roomName = $(this).text();
|
|
loadRoom($(this).data('value'));
|
|
});
|
|
$('.transferTableButton').on('click', function () {
|
|
transferModeOn();
|
|
});
|
|
$('.addDecoration').on('click', function () {
|
|
$('#decorator').css('display', 'flex');
|
|
});
|
|
$('.deleteDecoration').on('click', function () {
|
|
deleteDecoration(selectedDecoration);
|
|
});
|
|
$('.decoratorItem').on('click', function () {
|
|
addDecoration(this);
|
|
});
|
|
$('.changeShapeButton').on('click', function () {
|
|
changeTableShape(selectedTableNumber);
|
|
});
|
|
$('.reserveTableButton').on('click', function () {
|
|
if ($(this).text() === lang('reserve_table')) {
|
|
reserveTable();
|
|
}
|
|
else {
|
|
unreserveTable();
|
|
}
|
|
});
|
|
$('.addTableButton').on('click', function () {
|
|
addTable();
|
|
});
|
|
$('.deleteTableButton').on('click', function () {
|
|
deleteTable();
|
|
});
|
|
loadRoom(roomToLoad);
|
|
}
|
|
let updateTableShape = (tableData) => {
|
|
return ajaxSync('/ajax/updateTableShape', tableData);
|
|
};
|
|
//Change the shape of a table in edit mode.
|
|
function changeTableShape(tableNumber) {
|
|
let tableData = getTableData(tableNumber);
|
|
let tableShape = tableData['shape'];
|
|
let tableWidth = tableData['width'];
|
|
let tableHeight = tableData['height'];
|
|
let tableRotation = tableData['rotation'];
|
|
let order = ['square', 'rect', 'longrect', 'diamond', 'circle', 'ellipse', 'longellipse'];
|
|
if (order.indexOf(tableShape) === -1)
|
|
tableShape = 'square';
|
|
//What the next shape is
|
|
let currentIndex = order.indexOf(tableShape);
|
|
let nextIndex = currentIndex + 1;
|
|
if (nextIndex > (order.length) - 1)
|
|
nextIndex = 0;
|
|
let nextShape = order[nextIndex];
|
|
switch (nextShape) {
|
|
case 'square':
|
|
case 'circle':
|
|
tableHeight = tableWidth;
|
|
tableRotation = 0;
|
|
break;
|
|
case 'diamond':
|
|
tableHeight = tableWidth;
|
|
tableRotation = 45;
|
|
break;
|
|
case 'rect':
|
|
case 'ellipse':
|
|
tableHeight = tableWidth * 2;
|
|
tableRotation = 0;
|
|
break;
|
|
case 'longrect':
|
|
case 'longellipse':
|
|
tableRotation = 90;
|
|
break;
|
|
}
|
|
let updateData = {
|
|
table_number: tableNumber,
|
|
shape: nextShape,
|
|
height: tableHeight,
|
|
width: tableWidth,
|
|
rotation: tableRotation
|
|
};
|
|
tableData = updateTableShape(updateData);
|
|
let tableGroup = stage.find('#' + tableNumber)[0];
|
|
transformer.nodes([]);
|
|
tableGroup.destroy();
|
|
let newTable = createTableElement(tableData);
|
|
tableLayer.add(newTable);
|
|
stage.draw();
|
|
selectTable(tableNumber);
|
|
loadRoom(currentRoom, tableNumber);
|
|
}
|
|
let createTable = (tableData) => {
|
|
return ajaxSync('/ajax/createTable', tableData);
|
|
};
|
|
let tableExists = (tableNumber) => {
|
|
return ajaxSync(`/ajax/tableExists/${tableNumber}`);
|
|
};
|
|
function addTable(tableNumber) {
|
|
if (!tableNumber) {
|
|
showVirtualNumpad(lang('new_table_number'), 4, false, false, true, addTable);
|
|
}
|
|
else {
|
|
let newTableInfo = {
|
|
table_number: tableNumber,
|
|
room_id: currentRoom,
|
|
default_covers: 2,
|
|
width: 200,
|
|
height: 200,
|
|
rotation: 0,
|
|
pos_x: basis / 2,
|
|
pos_y: basis / 2,
|
|
shape: 'square',
|
|
merged_children: '',
|
|
previous_state: '',
|
|
status: 0,
|
|
reservation: 0,
|
|
venue_id: 1
|
|
};
|
|
let newTableData = createTable(newTableInfo);
|
|
if (!newTableData.table_number) {
|
|
alert(newTableData);
|
|
return false;
|
|
}
|
|
newTable = createTableElement(newTableData);
|
|
tableLayer.add(newTable);
|
|
tableLayer.draw();
|
|
selectTable(tableNumber);
|
|
}
|
|
}
|
|
function selectTable(tableNumber) {
|
|
let table = stage.find('#' + tableNumber)[0];
|
|
table.fire('click');
|
|
}
|
|
function deleteTable(tableNumber = 0) {
|
|
if (!tableNumber) {
|
|
confirm(lang('confirm_delete_table', selectedTableNumber), selectedTableNumber, 'Confirm', deleteTable);
|
|
}
|
|
else {
|
|
if (tableIsOpen(selectedTableNumber)) {
|
|
alert(lang('error_delete_existing_table'));
|
|
}
|
|
else {
|
|
ajax(`/ajax/deleteTable/${selectedTableNumber}`, null, 'GET');
|
|
let table = stage.find('#' + tableNumber)[0];
|
|
transformer.nodes([]);
|
|
table.destroy();
|
|
tableLayer.draw();
|
|
selectedTable = null;
|
|
selectedTableNumber = null;
|
|
}
|
|
}
|
|
}
|
|
// Rotate a shape around any point.
|
|
// shape is a Konva shape
|
|
// angleDegrees is the angle to rotate by, in degrees.
|
|
// point is an object {x: posX, y: posY}
|
|
function rotateAroundPoint(shape, angleDegrees, point) {
|
|
let angleRadians = angleDegrees * Math.PI / 180;
|
|
// they lied, I did have to use trigonometry
|
|
const x = point.x +
|
|
(shape.x() - point.x) * Math.cos(angleRadians) -
|
|
(shape.y() - point.y) * Math.sin(angleRadians);
|
|
const y = point.y +
|
|
(shape.x() - point.x) * Math.sin(angleRadians) +
|
|
(shape.y() - point.y) * Math.cos(angleRadians);
|
|
shape.rotation(shape.rotation() + angleDegrees); // rotate the shape in place
|
|
shape.x(x); // move the rotated shape in relation to the rotation point.
|
|
shape.y(y);
|
|
}
|
|
function createDecoration(data, idToSelect = false) {
|
|
let draggable = editMode;
|
|
var decoration = new Image();
|
|
decoration.onload = function () {
|
|
var dec = new Konva.Image({
|
|
id: data.decoration_id.toString(),
|
|
x: data.decoration_pos_x * scale,
|
|
y: data.decoration_pos_y * scale,
|
|
image: decoration,
|
|
offsetX: data.decoration_width * 0.5 * scale,
|
|
offsetY: data.decoration_height * 0.5 * scale,
|
|
rotation: data.decoration_rotation,
|
|
width: data.decoration_width * scale,
|
|
height: data.decoration_height * scale,
|
|
draggable: draggable,
|
|
});
|
|
if (editMode && dec.id() === idToSelect) {
|
|
transformer.nodes([dec]);
|
|
transformer.moveToTop();
|
|
}
|
|
dec.on('click', function () {
|
|
selectDecoration(this);
|
|
});
|
|
dec.on('tap', function () {
|
|
selectDecoration(this);
|
|
});
|
|
dec.on('dragend', function () {
|
|
saveDecTransformation(this);
|
|
});
|
|
dec.on('transformend', function () {
|
|
saveDecTransformation(this);
|
|
});
|
|
// add the shape to the layer
|
|
tableLayer.add(dec);
|
|
tableLayer.draw();
|
|
dec.moveToBottom();
|
|
};
|
|
decoration.src = 'images/decorations/' + data.decoration_image;
|
|
return decoration;
|
|
}
|
|
var selectedDecoration = false;
|
|
function selectDecoration(decoration) {
|
|
if (editMode) {
|
|
if ((transformer.nodes().length > 0 && transformer.nodes()[0] != decoration) || transformer.nodes().length == 0) {
|
|
resetActiveTable();
|
|
transformer.nodes([decoration]);
|
|
decoration.moveToTop();
|
|
transformer.moveToTop();
|
|
selectedDecoration = decoration;
|
|
toggleFloorplanControls();
|
|
}
|
|
else {
|
|
transformer.nodes([]);
|
|
selectedDecoration = false;
|
|
$('.deleteDecoration').css('display', 'none');
|
|
}
|
|
}
|
|
}
|
|
function createTableElement(data, selectTable = false) {
|
|
// Create container group
|
|
let draggable = editMode || newTable === data.table_number;
|
|
let table = new Konva.Group({
|
|
x: data.pos_x * scale,
|
|
y: data.pos_y * scale,
|
|
draggable: draggable,
|
|
listening: true,
|
|
id: data.table_number.toString()
|
|
});
|
|
let fillColor = 'gray';
|
|
if (data.status === 'reserved') {
|
|
fillColor = 'lightgreen';
|
|
}
|
|
if (activeTables.includes(data.table_number)) {
|
|
fillColor = 'lightblue';
|
|
}
|
|
data.width = data.width * scale;
|
|
data.height = data.height * scale;
|
|
// Create background shape
|
|
let shape;
|
|
switch (data.shape) {
|
|
case "circle": // fall-through
|
|
case "ellipse": // fall-through
|
|
case "longellipse":
|
|
shape = new Konva.Ellipse({
|
|
x: 0,
|
|
y: 0,
|
|
radiusX: data.width * 0.5,
|
|
radiusY: data.height * 0.5,
|
|
rotation: data.rotation,
|
|
fill: fillColor,
|
|
stroke: "black",
|
|
strokeWidth: 4,
|
|
draggable: false,
|
|
listening: true
|
|
});
|
|
break;
|
|
default:
|
|
shape = new Konva.Rect({
|
|
x: 0,
|
|
y: 0,
|
|
offsetX: data.width * 0.5,
|
|
offsetY: data.height * 0.5,
|
|
width: data.width,
|
|
height: data.height,
|
|
rotation: data.rotation,
|
|
fill: fillColor,
|
|
stroke: "black",
|
|
strokeWidth: 4,
|
|
draggable: false,
|
|
listening: true
|
|
});
|
|
break;
|
|
} // End switch
|
|
// Create label
|
|
let label = new Konva.Text({
|
|
x: data.width * -0.5,
|
|
y: data.height * -0.5,
|
|
width: data.width,
|
|
height: data.height,
|
|
text: data.table_number.toString(),
|
|
fontSize: 40 * scale,
|
|
fill: "black",
|
|
align: "center",
|
|
verticalAlign: "middle",
|
|
draggable: false,
|
|
listening: false
|
|
});
|
|
tableNumber = data.tablenumber;
|
|
table.add(shape, label);
|
|
table.on('dblclick', function () {
|
|
tableNumber = parseInt(getTableNumber(this));
|
|
if (!editMode) {
|
|
loadScreen('orderScreen', 'table=' + tableNumber);
|
|
}
|
|
});
|
|
table.on('dbltap', function () {
|
|
tableNumber = getTableNumber(this);
|
|
loadScreen('orderScreen', 'table=' + tableNumber);
|
|
});
|
|
table.on('dragend', function () {
|
|
saveTransformation(table);
|
|
});
|
|
innerShape = getTableShape(table);
|
|
table.on('click', function () {
|
|
selectTableShape(this);
|
|
});
|
|
table.on('tap', function () {
|
|
selectTableShape(this);
|
|
});
|
|
innerShape.on('transformend', function () {
|
|
saveTransformation(table);
|
|
});
|
|
// add the shape to the layer
|
|
tableLayer.add(table);
|
|
table.moveToTop();
|
|
if (tableNumber === selectedTableNumber) {
|
|
selectTable = table;
|
|
}
|
|
if (selectTable) {
|
|
if (selectTable === tableNumber) {
|
|
table.fire('click');
|
|
}
|
|
}
|
|
return table;
|
|
}
|
|
function loadRoom(room, selectTable = 0, selectDecoration = false) {
|
|
//if (room === currentRoom) return false
|
|
ajax(`/ajax/getRoomData/${room}`, null, 'GET', (response) => {
|
|
let floorplanDiv = $('#tableMap');
|
|
let backgroundImage = response.background_image;
|
|
floorplanDiv.css("background-image", `url(images/rooms/${backgroundImage})`);
|
|
floorplanDiv.css("background-size", `${width}px ${height}px`);
|
|
}, null, null);
|
|
$('.roomButton').removeClass('active');
|
|
let selector = ".roomButton:contains('" + roomName + "')";
|
|
$(selector).addClass('active');
|
|
currentRoom = room;
|
|
resetActiveTable();
|
|
stage.destroy();
|
|
stage = new Konva.Stage({
|
|
container: 'tableMap',
|
|
width: width,
|
|
height: height,
|
|
});
|
|
transformer = new Konva.Transformer({
|
|
rotationSnaps: [0, 15, 30, 45, 60, 75, 90, 105, 120, 135, 150, 165, 180, 225, 270, -15, -30, -45, -60, -75, -90, -105, -120, -135, -150, -165, -180, -225, -270, 360, -360],
|
|
anchorSize: 40 * scale,
|
|
ignoreStroke: true,
|
|
centeredScaling: true
|
|
});
|
|
let tablesAndDecorations = ajaxSync(`/ajax/getTablesAndDecorations/${room}`, null, 'GET');
|
|
let decorations = tablesAndDecorations['decorations'];
|
|
let tables = tablesAndDecorations['tables'];
|
|
tableLayer = new Konva.Layer();
|
|
tableLayer.add(transformer);
|
|
// Loop data and call the creation method for each decoration/table.
|
|
decorations.forEach(itemData => {
|
|
createDecoration(itemData, selectDecoration);
|
|
});
|
|
tables.forEach(itemData => {
|
|
tableLayer.add(createTableElement(itemData, selectTable));
|
|
});
|
|
activeTables = getOpenTables();
|
|
stage.add(tableLayer);
|
|
}
|
|
var mergeMode = false;
|
|
var parentMergeTable;
|
|
var childMergeTable;
|
|
var tableTransferOrigin;
|
|
var transferMode = false;
|
|
function transferModeOn() {
|
|
mergeModeOff();
|
|
if (!transferMode) {
|
|
tableTransferOrigin = selectedTableNumber;
|
|
transferMode = true;
|
|
$('.transferTableButton').addClass('active');
|
|
$('.transferTableButton').text('Select a table to transfer items to');
|
|
}
|
|
else {
|
|
transferModeOff();
|
|
}
|
|
}
|
|
function transferModeOff() {
|
|
transferMode = false;
|
|
$('.transferTableButton').removeClass('active');
|
|
$('.transferTableButton').text(lang('transfer_table'));
|
|
}
|
|
let getOpenTables = () => {
|
|
return ajaxSync('/ajax/getActiveTables/1', null, 'GET');
|
|
};
|
|
let transferTableAjax = (origin, destination) => {
|
|
ajax(`/ajax/transferTables/${origin}/${destination}`, null, 'GET');
|
|
};
|
|
function transferTables() {
|
|
destination = selectedTableNumber;
|
|
origin = tableTransferOrigin;
|
|
if (destination !== origin) {
|
|
transferTableAjax(origin, destination);
|
|
activeTables = getOpenTables();
|
|
transferModeOff();
|
|
getTableShape(selectedTable).fill('lightblue');
|
|
getTableShape(getTableGroup(origin)).fill('gray');
|
|
}
|
|
else {
|
|
alert("Can't transfer a table to itself.");
|
|
transferModeOff();
|
|
}
|
|
}
|
|
function mergeModeOn() {
|
|
transferModeOff();
|
|
if (!mergeMode) {
|
|
mergeMode = true;
|
|
$('.mergeButton').addClass('active');
|
|
$('.mergeButton').text('Select a table to merge with Table ' + selectedTableNumber);
|
|
parentMergeTable = selectedTableNumber;
|
|
}
|
|
else {
|
|
mergeModeOff();
|
|
}
|
|
}
|
|
function mergeModeOff() {
|
|
mergeMode = false;
|
|
$('.mergeButton').removeClass('active');
|
|
$('.mergeButton').text(lang('merge_table'));
|
|
}
|
|
let ajaxMergeTables = (parent, child) => {
|
|
return ajaxSync(`/ajax/mergeTables/${parent}/${child}`, null, 'GET');
|
|
};
|
|
let ajaxUnmergeTable = (parent) => {
|
|
return ajaxSync(`/ajax/unmergeTable/${parent}`, null, 'GET');
|
|
};
|
|
function mergeTables() {
|
|
parentMergeTable = parseInt(parentMergeTable);
|
|
childMergeTable = parseInt(childMergeTable);
|
|
if (childMergeTable !== parentMergeTable) {
|
|
let result = ajaxMergeTables(parentMergeTable, childMergeTable);
|
|
mergeModeOff();
|
|
loadRoom(currentRoom);
|
|
newTable = getTableGroup(parentMergeTable);
|
|
newTable.draggable(true);
|
|
if (tableIsOpen(parentMergeTable)) {
|
|
getTableShape(newTable).fill('lightblue');
|
|
}
|
|
}
|
|
else {
|
|
alert("Can't merge a table with itself!");
|
|
mergeModeOff();
|
|
}
|
|
}
|
|
//When a table is passed (a group of the shape plus the text), returns the number as string.
|
|
function getTableNumber(tableGroup) {
|
|
textItem = tableGroup.getChildren()[1];
|
|
return textItem.getText();
|
|
}
|
|
function getTableGroup(tableNumber) {
|
|
return stage.find('#' + tableNumber)[0];
|
|
}
|
|
function getTableShape(tableGroup) {
|
|
return tableGroup.getChildren()[0];
|
|
}
|
|
function getReservation(id) {
|
|
return ajaxSync('/ajax/getReservation', id);
|
|
}
|
|
//When a user selects a table.
|
|
function selectTableShape(table) {
|
|
let tableNumber = getTableNumber(table);
|
|
let shape = getTableShape(table);
|
|
let strokeColor = shape.stroke();
|
|
selectedTable = table;
|
|
selectedTableNumber = tableNumber;
|
|
if (transferMode)
|
|
transferTables();
|
|
if (mergeMode) {
|
|
childMergeTable = tableNumber;
|
|
mergeTables();
|
|
}
|
|
else {
|
|
//If table is not selected
|
|
if (strokeColor !== "yellow") {
|
|
let tableData = getTableData(selectedTableNumber);
|
|
let coverNumberString = lang('covers', tableData.default_covers.toString());
|
|
let tableString = '<b>' + lang('activeTable', selectedTableNumber.toString()) + '</b>';
|
|
$('.reserveTableButton').text(lang('reserve_table'));
|
|
if (tableData.status === 'reserved') {
|
|
let reservation = getReservation(tableData.reservation_id);
|
|
console.log(reservation);
|
|
$('.reserveTableButton').text(lang('unreserve_table'));
|
|
if (reservation.reservation_name) {
|
|
reservationString = lang('reserved_for', reservation.reservation_name);
|
|
}
|
|
else {
|
|
reservationString = lang('reserved');
|
|
}
|
|
tableString += '<small>' + reservationString + '</small>';
|
|
}
|
|
tableString += "<small> (" + coverNumberString + ")</small>";
|
|
$('.currentTable').html(tableString);
|
|
stage.find('Rect').forEach(function (rect, index) {
|
|
rect.stroke("black");
|
|
});
|
|
stage.find('Ellipse').forEach(function (circ, index) {
|
|
circ.stroke("black");
|
|
});
|
|
shape.stroke("yellow");
|
|
toggleEditControls(true);
|
|
if (editMode) {
|
|
toggleFloorplanControls();
|
|
$('.deleteDecoration').css('display', 'none');
|
|
transformer.nodes([getTableShape(table)]);
|
|
table.moveToTop();
|
|
transformer.moveToTop();
|
|
}
|
|
tableLayer.draw();
|
|
//If the table is already selected
|
|
}
|
|
else {
|
|
resetActiveTable();
|
|
transformer.nodes([]);
|
|
tableLayer.draw();
|
|
}
|
|
}
|
|
}
|
|
let getTableData = (tableNumber) => {
|
|
return ajaxSync('/ajax/getTableData', tableNumber);
|
|
};
|
|
let isTableMerged = (tableNumber) => {
|
|
let mergeData = getTableData(tableNumber).merged_children;
|
|
return mergeData !== "";
|
|
};
|
|
function resetActiveTable() {
|
|
if (!transferMode) {
|
|
if (selectedTable) {
|
|
getTableShape(selectedTable).stroke('black');
|
|
}
|
|
selectedTable = null;
|
|
selectedTableNumber = "";
|
|
toggleFloorplanControls(false, editMode);
|
|
toggleEditControls(false);
|
|
}
|
|
else {
|
|
$('.editControls').css('display', 'none');
|
|
}
|
|
}
|
|
function addDecoration(button) {
|
|
let insertData = {
|
|
decoration_room: currentRoom,
|
|
basis: basis,
|
|
decoration_image: $(button).data('image')
|
|
};
|
|
ajaxSync('/ajax/addDecoration', insertData);
|
|
$('#decorator').css('display', 'none');
|
|
selectedDecoration = false;
|
|
loadRoom(currentRoom);
|
|
}
|
|
function deleteDecoration(decoration) {
|
|
ajax('/ajax/deleteDecoration', decoration.id());
|
|
$('.deleteDecoration').css('display', 'none');
|
|
decoration.destroy();
|
|
selectedDecoration = false;
|
|
transformer.nodes([]);
|
|
}
|
|
function saveDecTransformation(decoration) {
|
|
let newData = {
|
|
decoration_id: decoration.id(),
|
|
decoration_pos_x: decoration.x() / scale,
|
|
decoration_pos_y: decoration.y() / scale,
|
|
decoration_width: parseInt((decoration.scaleX() * decoration.width()) / scale),
|
|
decoration_height: parseInt((decoration.scaleY() * decoration.height()) / scale),
|
|
decoration_rotation: parseInt(decoration.rotation()),
|
|
decoration_image: decodeURIComponent(decoration.image().src),
|
|
decoration_room: currentRoom
|
|
};
|
|
if (editMode) {
|
|
idToSelect = decoration.id();
|
|
}
|
|
ajax('/ajax/updateDecoration', newData);
|
|
}
|
|
//When a table has been resized, rotated etc.
|
|
function saveTransformation(table) {
|
|
tableNumber = getTableNumber(table);
|
|
shape = getTableShape(table);
|
|
newRotation = parseInt(shape.rotation());
|
|
newWidth = parseInt(shape.scaleX() * shape.width() / scale);
|
|
newHeight = parseInt((shape.scaleY() * shape.height()) / scale);
|
|
newXPos = parseInt(table.x() / scale);
|
|
newYPos = parseInt(table.y() / scale);
|
|
updateData = {
|
|
table_number: tableNumber,
|
|
rotation: newRotation,
|
|
width: newWidth,
|
|
height: newHeight,
|
|
pos_x: newXPos,
|
|
pos_y: newYPos
|
|
};
|
|
transformTable(updateData);
|
|
}
|
|
let transformTable = (tableData) => {
|
|
return ajax("/ajax/transformTable", tableData);
|
|
};
|
|
function unmergeTable() {
|
|
ajaxUnmergeTable(selectedTableNumber);
|
|
loadRoom(currentRoom);
|
|
}
|
|
function reserveTable(covers) {
|
|
if (!covers) {
|
|
showVirtualNumpad(lang('how_many_covers'), 2, false, false, true, reserveTable);
|
|
}
|
|
else {
|
|
let table = getTableGroup(selectedTableNumber);
|
|
let newReservation = ajaxSync('/ajax/newEmptyReservation', selectedTableNumber);
|
|
table.fire('click');
|
|
let tableShape = getTableShape(table);
|
|
tableShape.fill('lightgreen');
|
|
table.draw();
|
|
table.fire('click');
|
|
completeReservation(newReservation);
|
|
}
|
|
}
|
|
function unreserveTable(input) {
|
|
if (!input) {
|
|
confirm(lang('confirm_delete_reservation', selectedTableNumber), selectedTableNumber, lang('confirm'), unreserveTable);
|
|
}
|
|
else {
|
|
ajaxSync('/ajax/unreserveTable', input);
|
|
hideAlerts();
|
|
table = getTableGroup(input);
|
|
table.fire('click');
|
|
tableShape = getTableShape(table);
|
|
tableShape.fill('gray');
|
|
table.draw();
|
|
table.fire('click');
|
|
}
|
|
}
|
|
function completeReservation(resName) {
|
|
if (!resName) {
|
|
showVirtualKeyboard(lang('enter_reservation_name'));
|
|
}
|
|
else {
|
|
//callPhpFunction('updateTableMapTable', [selectedTableNumber, 'reservation_name', resName]);
|
|
loadRoom(currentRoom, selectedTableNumber);
|
|
}
|
|
}
|
|
function toggleEditMode() {
|
|
let editModeButton = $('.editModeButton');
|
|
if (editMode === true) {
|
|
editMode = false;
|
|
loadRoom(currentRoom);
|
|
editModeButton.removeClass('active');
|
|
editModeButton.html(lang('edit_floorplan'));
|
|
toggleFloorplanControls(false);
|
|
if (selectedTable)
|
|
selectedTable.fire('click');
|
|
stage.find('Group').forEach(function (table, index) {
|
|
table.draggable(false);
|
|
});
|
|
}
|
|
else {
|
|
editMode = true;
|
|
stage.find('Group').forEach(function (table, index) {
|
|
table.draggable(true);
|
|
if (getTableShape(table).stroke() === "yellow") {
|
|
table.moveToTop();
|
|
transformer.nodes([getTableShape(table)]);
|
|
transformer.moveToTop();
|
|
}
|
|
});
|
|
stage.find('Image').forEach(function (img, index) {
|
|
img.draggable(true);
|
|
});
|
|
toggleFloorplanControls();
|
|
transformer.moveToTop();
|
|
tableLayer.draw();
|
|
editModeButton.addClass('active');
|
|
editModeButton.html(lang('stop_edit_floorplan'));
|
|
}
|
|
}
|
|
function toggleFloorplanControls(onOrOff = true, subControlsOnly = false) {
|
|
if (onOrOff || subControlsOnly) {
|
|
$('.floorplanControls').css('visibility', 'visible');
|
|
}
|
|
else {
|
|
$('.floorplanControls').css('visibility', 'hidden');
|
|
}
|
|
if (selectedTable) {
|
|
$('.changeShapeButton').css('visibility', 'visible');
|
|
$('.deleteTableButton').css('visibility', 'visible');
|
|
}
|
|
else {
|
|
$('.changeShapeButton').css('visibility', 'hidden');
|
|
$('.deleteTableButton').css('visibility', 'hidden');
|
|
}
|
|
if (selectedDecoration) {
|
|
$('.deleteDecoration').css('display', 'flex');
|
|
}
|
|
else {
|
|
$('.deleteDecoration').css('display', 'none');
|
|
}
|
|
}
|
|
let tableIsOpen = (tableNumber) => {
|
|
return ajaxSync(`/ajax/tableIsOpen/${tableNumber}`, null, 'GET');
|
|
};
|
|
function toggleEditControls(onOrOff = true) {
|
|
if (onOrOff) {
|
|
$('.editControls').css("display", "flex");
|
|
if (isTableMerged(selectedTableNumber)) {
|
|
$('.mergeControls').css("visibility", "visible");
|
|
$('.unmergeButton').css('display', 'flex');
|
|
$('.mergeButton').css('display', 'flex');
|
|
}
|
|
else {
|
|
$('.mergeControls').css("visibility", "visible");
|
|
$('.mergeButton').css('display', 'flex');
|
|
$('.unmergeButton').css('display', 'none');
|
|
}
|
|
if (tableIsOpen(selectedTableNumber)) {
|
|
$('.payTableButton').css('display', 'flex');
|
|
$('.viewTableButton').css('display', 'flex');
|
|
$('.reserveTableButton').css('display', 'none');
|
|
$('.transferTableButton').css('display', 'flex');
|
|
}
|
|
else {
|
|
$('.payTableButton').css('display', 'none');
|
|
$('.viewTableButton').css('display', 'none');
|
|
$('.reserveTableButton').css('display', 'flex');
|
|
$('.transferTableButton').css('display', 'none');
|
|
}
|
|
}
|
|
else {
|
|
$('.editControls').css("display", "none");
|
|
$('.mergeControls').css("visibility", "hidden");
|
|
$('.mergeButton').css("display", "none");
|
|
$('.unmergeButton').css("display", "none");
|
|
}
|
|
}
|
|
//# sourceMappingURL=dredgepos.floorplan.js.map
|