ordersprinter/webapp/elements/tablemap.js

297 lines
8.7 KiB
JavaScript

var tminfo = null;
function insertTMInfo(jsonTminfo) {
tminfo = jsonTminfo;
}
function Tablemap (roomid,tables,elem) {
this.tables = tables;
this.roomid = roomid;
this.elem = elem;
this.selectedTableId = -1;
if ((tables != null) && (tables.length > 0)) {
this.selectedTableId = tables[0].id;
}
}
Tablemap.prototype.renderContent = function() {
doAjaxTransmitData("GET","php/tablemap.php?command=getTableMap&roomid=" + this.roomid,null,this.renderTableList,null,this);
d = new Date();
$("#mapimgpart").attr("src", "php/tablemap.php?command=getTableMapImgAsPng&roomid=" + this.roomid + "&tableid=" + this.selectedTableId + "&"+d.getTime());
}
Tablemap.prototype.renderTableList = function(tables,instance) {
instance.tables = tables;
var tablelist = instance.createList(tables,"table_","tablebtn","c",instance);
$(instance.elem).html(tablelist);
tmRefreshList(instance.elem);
instance.binding(instance);
}
Tablemap.prototype.createList = function(aList,idPrefix,classes,defaultTheme,instance) {
var txt = '<form><fieldset data-role="controlgroup" data-type="horizontal">';
for (var i=0;i<aList.length;i++) {
var aListElem = aList[i];
var name = aListElem.name;
var id = aListElem.id;
var theme = "d";
var icon = "alert";
var hasPos = aListElem.haspos;
if (hasPos == 1) {
icon = "check";
theme = defaultTheme;
}
if (id == instance.selectedTableId) {
theme = "f";
}
txt += '<input id="' + idPrefix + id + '" class="' + classes + '" type="submit" value="' + name + '" data-theme="' + theme + '" data-icon="' + icon + '" />';
}
txt += '</fieldset></form>';
return txt;
}
Tablemap.prototype.binding = function(instance) {
$('.tablebtn').off("click").on("click", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
instance.selectedTableId = this.id.split("_")[1];
instance.renderContent(instance.elem);
});
$("#tmimgbtn").off("click").on("click", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
instance.uploadImg(instance);
});
$("#mapimgpart").off("click").on("click", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
var width = $('#mapimgpart').width();
var height = $('#mapimgpart').height();
var offset_t = $(this).offset().top - $(window).scrollTop();
var offset_l = $(this).offset().left - $(window).scrollLeft();
var left = Math.round( (e.clientX - offset_l) );
var top = Math.round( (e.clientY - offset_t) );
var data = {
tableid:instance.selectedTableId,
x:(100*left)/width,
y:(100*top)/height
};
doAjaxTransmitData("POST","php/tablemap.php?command=setPosition",data,instance.renderIfOk,null,instance);
});
}
Tablemap.prototype.createOverlay = function (elem,positions,payTxt,decpoint,currency,tables,ostablebtnsize,selectedTableid) {
if (typeof selectedTableid === 'undefined') {
selectedTableid = null;
}
var t = [];
var sizeclass = "";
if (ostablebtnsize == 0) {
sizeclass = "overlaysize-0";
} else if (ostablebtnsize == 1) {
sizeclass = "overlaysize-1";
} else if (ostablebtnsize == 2) {
sizeclass = "overlaysize-2";
}
for (var i=0;i<positions.length;i++) {
var aPos = positions[i];
if (aPos.haspos == 1) {
var posOfATable = aPos.pos;
var tableId = aPos.id;
var tablename = aPos.name;
var price = '0.00';
for (j=0;j<tables.length;j++) {
if (tables[j].id == tableId) {
price = tables[j].pricesum;
break;
}
}
var left = posOfATable.x;
var top =posOfATable.y; //100 / height * posOfATable.y;
var spanid = "overlay_" + tableId;
var priceTxt = price.replace(".", decpoint) + " " + currency;
var selectedCss = '';
if (selectedTableid == tableId) {
selectedCss = ' selectedtable ';
}
var txt = '<span id="' + spanid + '" class="overlaytxt overlayempty ' + selectedCss + sizeclass + '" style="z-index:100;position:absolute;left:' + left + '%;top:' + top + '%;">' + tablename;
if (price != 0.00) {
txt = '<span id="' + spanid + '" class="overlaytxt overlayfull ' + selectedCss + sizeclass + '" style="z-index:100;position:absolute;left:' + left + '%;top:' + top + '%;">' + tablename;
if (payTxt != '') {
txt += '<br>(' + payTxt + ': ' + priceTxt + ')';
} else {
txt += '<br>(' + priceTxt + ')';
}
}
txt += '</span>';
t[t.length] = txt;
}
}
return t;
}
Tablemap.prototype.bindingForOverlaySelection = function(fct,roomid,tables,fctZoomView) {
if (fctZoomView != null) {
$("#tablemapcontent:not(.overlaytxt)").off("click").on("click", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
fctZoomView();
});
}
$("#tablemapcontent .overlaytxt").off("click").on("click", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
var tableid = this.id.split('_')[1];
var tablename = "?";
for (var i=0;i<tables.length;i++) {
var table = tables[i];
if (table.id == tableid) {
tablename = table.name;
}
}
var data = {
roomid:roomid,
tableid:tableid,
tablename:tablename,
x:0,
y:0
};
fct(data);
});
}
Tablemap.prototype.bindingForSelection = function(elem,fct,positions,roomid) {
$(elem).off("click").on("click", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
var width = $(elem).width();
var height = $(elem).height();
var offset_t = $(this).offset().top - $(window).scrollTop();
var offset_l = $(this).offset().left - $(window).scrollLeft();
var left = 100 * Math.round( (e.clientX - offset_l) ) / width;
var top = 100 * Math.round( (e.clientY - offset_t) ) / height;
if ((positions != null) && (positions.length > 0)) {
var foundTableId = positions[0].id;
var tablename = positions[0].name;
var minDist = (100*100) + (100*100);
for (var i=0;i<positions.length;i++) {
var aPos = positions[i];
if (aPos.haspos == 1) {
var posOfATable = aPos.pos;
var aDist = (posOfATable.x - left) * (posOfATable.x - left) + ((posOfATable.y - top) * (posOfATable.y - top));
if (aDist < minDist) {
minDist = aDist;
foundTableId = aPos.id;
tablename = aPos.name;
}
}
}
var data = {
roomid:roomid,
tableid:foundTableId,
tablename:tablename,
x:left,
y:top
};
fct(data);
}
});
}
Tablemap.prototype.renderIfOk = function(jsonAnswer,instance) {
if (jsonAnswer.status == "OK") {
instance.renderContent(instance.elem);
} else {
alert("ERROR");
}
}
Tablemap.prototype.tmCreateList = function(aList,idPrefix,classes,defaultTheme) {
var txt = '<form><fieldset data-role="controlgroup" data-type="horizontal">';
for (var i=0;i<aList.length;i++) {
var aListElem = aList[i];
var name = aListElem.name;
var id = aListElem.id;
txt += '<input id="' + idPrefix + id + '" class="' + classes + '" type="submit" value="' + name + '" data-theme="' + defaultTheme + '" />';
}
txt += '</fieldset></form>';
return txt;
}
Tablemap.prototype.uploadImg = function(instance) {
var formData = new FormData($('#tablemapimgform')[0]);
formData.append("roomid",instance.roomid);
$.ajax({
url: 'php/tablemap.php?command=uploadimg', //Server script to process data
type: 'POST',
dataType: "json",
xhr: function() { // Custom XMLHttpRequest
var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // Check if upload property exists
//myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
}
return myXhr;
},
//Ajax events
success: function(jsonContent) {
if (jsonContent.status != "OK") {
instance.imgNotUploaded(jsonContent);
} else {
instance.imgUploaded(jsonContent,instance);
}
},
error: function(answer) {
instance.imgNotUploaded(answer);
},
// Form data
data: formData,
//Options to tell jQuery: do not to process data or worry about content-type.
cache: false,
contentType: false,
processData: false
});
}
Tablemap.prototype.imgUploaded = function(text,instance) {
instance.renderContent();
}
Tablemap.prototype.imgNotUploaded = function(text) {
alert("Bild konnte nicht hochgeladen werden. Ist es zu groß (> 1 MB)? Oder wurde der Dateiname nicht angegeben?");
}
function shallDisplayRoom(roomid) {
var xyz = tminfo;
if (tminfo == null) {
return {show:false};
}
for (var i=0;i<tminfo.length;i++) {
if (tminfo[i].roomid == roomid) {
return {show:tminfo[i].displaymap == 1 ? true : false,pos:tminfo[i].tablepositions};
}
}
return {show:false};
}