ordersprinter/webapp/reservation.html

1174 lines
40 KiB
HTML

<html>
<head>
<title>Ansicht Reservierung</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="Stefan Pichel">
<link rel="stylesheet" type="text/css" href="css/bestformat.css?v=1.5.27">
<link rel="stylesheet" href="php/contenthandler.php?module=admin&command=getmobilecss" />
<link rel="stylesheet" href="php/3rdparty/orderstyle/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="php/3rdparty/jquery.mobile-1.4.0.min.css" type="text/css" />
<script src="php/3rdparty/jquery-1.11.3.min.js"></script>
<script src="php/3rdparty/jquery.mobile-1.4.5.min.js"></script>
<script src="elements/tablemap.js"></script>
<script src="utilities.js"></script>
<link rel="stylesheet" href="php/3rdparty/jqueryui1-11-4/jquery-ui.min.css" />
<script src="php/3rdparty/jqueryui1-11-4/jquery-ui.min.js"></script>
<script src="php/3rdparty/jqueryui1-11-4/jquery-ui-i18n.min.js"></script>
<link rel="stylesheet" href="php/3rdparty/jquerymobiledatepicker/jquery.mobile.datepicker.css" />
<script src="php/3rdparty/jquerymobiledatepicker/jquery.mobile.datepicker.js"></script>
</head>
<body>
<style>
.schbtn,.schtablebtn {
font-size: 9px;
width: 170px;
height: 65px;
word-wrap: break-word !important;
white-space: normal !important;
background:Red;
}
.timeschbtn {
font-size: 15px;
width: 100px;
height: 45px;
}
.ui-select .ui-btn {
width:200px;
}
</style>
<script>
var RES_TITLE = ["Reservierung","Reservation","Reserva"];
var RES_DATE = ["Datum","Date","Fecha"];
var RES_NEW = ["Neue Reservierung","New Reservation","Reserva nueva"];
var RES_STARTTIME = ["Start-Uhrzeit","Start time","Hora de Empieza"];
var RES_NO_PERSONS = ["Anzahl Gäste","Number of persons","Personas"];
var RES_DURATION = ["Dauer (Stunden)","Duration (hours)","Duración (horas)"];
var RES_NAME = ["Name","Name","Nombre"];
var RES_EMAIL = ["E-Mail","Email","Email"];
var RES_TEL = ["Telefon","Phone","Telefono"];
var RES_REMARK = ["Notiz","Remark","Comentario"];
var RES_NO_NAME = ["Name wurde nicht angegeben!","Name field not filled!","Falta el nombre!"];
var RES_APPLY = ["Anwenden","Apply","Aplicar"];
var RES_CANCEL = ["Abbrechen","Cancel","Cancelar"];
var RES_CHANGE_TITLE = ["Reservierung ändern","Change Reservation","Modificar Reserva"];
var RES_LASTCREATOR = ["Letzte Änderung von","Last change by","Ultima modificación de"];
var RES_LASTUPDATE = ["Zuletzt geändert","Last changed","Ultimo cambio"];
var RES_HOUR = ["Uhrzeit","Time","Hora"];
var RES_RES = ["Reservierungen","Reservations","Reservaciones"];
var RES_NORES = ["Keine Reservierungen an diesem Tag","No reservations at the selected day","No hay ningúna reserva"];
var RES_DEL = ["Löschen","Delete","Borrar"];
var RES_EMAIL_IMPOSSIBLE = ["(Eine Email-Reservierungsbestätigung ist erst nach Konfiguration des Emailsystems möglich.)",
"(ending of an email confirmation requires the setup of the email system.)",
"(Enviar una confirmación por email requiere la configuración del sistema de email.)"];
var RES_NOT_SEND = ["Nicht senden","Do not send","No enviar"];
var RES_SEND_EMAIL = ["Senden","Send","Enviar"];
var RES_TO = ["An","To","A"];
var RES_CUS_LABEL = ["Kunden aus Datenbank auswählen","Choose customer from data base","Elegir cliente del base de datos"];
var RES_CUSTOMERS = ["Kunden","Customers","Clientes"];
var RES_NO_CUS_FOUND = ["Kein Kunde gefunden","No customer found","Ningún cliente en base de datos"];
var RES_HINT_CUS_CHOOSE = ["Oder manuell eingeben:","or type in manually:","o insertar por teclado:"];
var RES_TABLESPEC = ["Tischangabe","Table","Mesa"];
var RES_ROOM = ["Raum","Room","Habitación"];
var RES_TABLE = ["Tisch","Table","Mesa"];
var RES_BY_TIMES = ["Reservierungen nach Uhrzeit","Reservations sorted by times","Reservaciones ordenado por tiempos"];
var RES_BY_TABLES = ["Reservierungen nach Tisch","Reservations sorted by table","Reservaciones ordenado por mesa"];
var lang = (-1);
var reservationnote = "";
var companyinfo = "";
var emailIsPossible = false;
var emailTemplate = "";
var filteredCustomers = [];
var tableoverview = [];
function setLanguage(language) {
lang = language;
$("#datetxt").html(RES_DATE[lang]);
$("#restitletxt").html(RES_TITLE[lang]);
$("#newtxt").html(RES_NEW[lang]);
$("#newresboxtxt").html(RES_NEW[lang]);
$("#starttimetxt").html(RES_STARTTIME[lang]);
$("#personstxt").html(RES_NO_PERSONS[lang]);
$("#durationtxt").html(RES_DURATION[lang]);
$("#nametxt").html(RES_NAME[lang]);
$("#customertxt").html(RES_CUS_LABEL[lang]);
$("#emailtxt").html(RES_EMAIL[lang]);
$("#teltxt").html(RES_TEL[lang]);
$("#remarktxt").html(RES_REMARK[lang]);
$("#cnewresboxtxt").html(RES_CHANGE_TITLE[lang]);
$("#reschangetitletxt").html(RES_CHANGE_TITLE[lang]);
$("#cdatetxt").html(RES_DATE[lang]);
$("#cstarttimetxt").html(RES_STARTTIME[lang]);
$("#cpersonstxt").html(RES_NO_PERSONS[lang]);
$("#cdurationtxt").html(RES_DURATION[lang]);
$("#cnametxt").html(RES_NAME[lang]);
$("#cemailtxt").html(RES_EMAIL[lang]);
$("#cteltxt").html(RES_TEL[lang]);
$("#cremarktxt").html(RES_REMARK[lang]);
$("#tablespecheadertxt").html(RES_TABLESPEC[lang]);
$("#ctablespecheadertxt").html(RES_TABLESPEC[lang]);
$("#canceltxt").html(RES_CANCEL[lang]);
$("#changedlgbtn").html(RES_APPLY[lang]);
$("#clastcreatortxt").html(RES_LASTCREATOR[lang]);
$("#clastchangetxt").html(RES_LASTUPDATE[lang]);
$("#deldlgbtn").html(RES_DEL[lang]);
$("#cancelemailbtntxt").html(RES_NOT_SEND[lang]);
$("#sendemailtxtbtn").html(RES_SEND_EMAIL[lang]);
$("#sendemailtotxt").html(RES_TO[lang]);
$("#reshintchoosecustomer").html(RES_HINT_CUS_CHOOSE[lang]);
$("#resbytimesheadertxt").html(RES_BY_TIMES[lang]);
$("#resbytablesheadertxt").html(RES_BY_TABLES[lang]);
var langtxt = "de";
if (lang == 1) {
langtxt = "en";
} else if (lang == 2) {
langtxt = "es";
}
var currentYear = new Date().getFullYear();
var yearRangeTxt = (currentYear-1) + ":" + (currentYear+3);
$("#datepicker").datepicker($.datepicker.regional[langtxt]).datepicker("option", {
changeMonth: true,
changeYear: true,
yearRange: yearRangeTxt,
});
$('#datepicker').datepicker('setDate', new Date());
$("#cdatepicker").datepicker($.datepicker.regional[langtxt]).datepicker("option", {
changeMonth: true,
changeYear: true,
yearRange: yearRangeTxt,
});
$('#cdatepicker').datepicker('setDate', new Date());
}
function getGeneralConfigItems() {
doAjax("GET", "php/contenthandler.php?module=admin&command=getGeneralConfigItems", null, insertGenConfigStartRest, "Fehler Konfigurationsdaten");
}
function insertGenConfigStartRest(configResult) {
if (configResult.status == "OK") {
var values = configResult.msg;
reservationnote = values.reservationnote;
companyinfo = values.companyinfo;
setLanguage(values.userlanguage);
if (values.email != "") {
emailIsPossible = true;
$("#emailinfo").html();
} else {
$("#emailinfo").html(RES_EMAIL_IMPOSSIBLE[lang]);
}
emailTemplate = values.reservationnote;
} else {
setTimeout(function(){document.location.href = "index.html"},250); // not logged in
$("#fullcontent").hide();
}
}
function handleDateChangeEvents() {
$("#datepicker").off("change").on("change", function (e) {
var date = $("#datepicker").datepicker("getDate");
$("#res-page").data("date",date);
displayTodaySchedule(date);
});
}
function displayTodaySchedule(date) {
var data = {
day: date.getDate(),
month: (date.getMonth() + 1),
year: date.getFullYear()
};
getReservationsOfDate(data);
}
function displaySpecificDateSchedule() {
var urlsuffix = location.search;
if (urlsuffix.indexOf('date=') >= 0) {
var datestamp = '';
var urlParts = urlsuffix.split(/&|\?/);
for (var i=0;i<urlParts.length;i++) {
var aPart = urlParts[i];
if (aPart.indexOf('date=') == 0) {
var parts = aPart.split("=");
datestamp = parts[1];
}
}
var dateParts = datestamp.split("-");
var year = dateParts[0];
var month = dateParts[1];
var day = dateParts[2];
data = {
day: day,
month: month,
year: year
};
var theSelectedDate = new Date(year,month - 1,day);
$('#datepicker').datepicker('setDate', theSelectedDate);
$('#cdatepicker').datepicker('setDate', theSelectedDate);
getReservationsOfDate(data);
} else {
displayTodaySchedule(new Date());
}
}
function getReservationsOfDate(dateObj) {
doAjax("GET","php/contenthandler.php?module=reservation&command=getReservations",dateObj,insertReservations,"Reservierungsinfos");
}
function bindNewReservationBtn() {
$("#newbtn").off("click").on("click", function (e) {
var date = $("#datepicker").datepicker("getDate");
var startTime = $("#timefieldse").val();
var name = ($("#guestname").val()).trim();
var email = ($("#email").val()).trim();
var duration = $("#durationse").val();
var persons = $("#noofguestse").val();
var phone = $("#telno").val();
var remark = $("#remark").val();
var roomkeys = Object.keys(tableoverview);
var roomid = -1;
var tableid = -1;
if (roomkeys.length == 0) {
tableid = -1;
} else if (roomkeys.length == 1) {
roomid = roomkeys[0];
tableid = $("#tableselect").val();
} else {
roomid = $("#roomselect").val();
tableid = -1;
if (roomid >= 0) {
tableid = $("#tableselect").val();
}
}
if (name.length == 0) {
alert(RES_NO_NAME[lang]);
} else {
var data = {
day: date.getDate(),
month: (date.getMonth() + 1),
year: date.getFullYear(),
start: startTime,
name: name,
email: email,
duration: duration,
persons: persons,
phone: phone,
remark: remark,
tableid: tableid
};
var emailtext = emailTemplate;
emailtext = emailtext.replace(/DATUM/g,date.getDate() + "." + (date.getMonth() + 1) + "." + date.getFullYear());
emailtext = emailtext.replace(/ANZAHL/g,persons);
emailtext = emailtext.replace(/ZEIT/g,startTime);
emailtext = emailtext.replace(/BETRIEBSINFO/g,companyinfo);
$("#emailfield").val(emailtext);
$("#emailtofield").val(email);
doAjax("POST","php/contenthandler.php?module=reservation&command=createReservation",data,handleCreateNewReservation,"Reservierung");
}
});
}
function handleCreateNewReservation(answer) {
if (answer.status != "OK") {
alert("Fehler " + answer.code + ": " + answer.msg);
return;
} else {
var emailToField = $("#emailtofield").val();
if ((emailToField != "") && emailIsPossible) {
$.mobile.changePage("#sentemail-page");
} else {
resetFields();
}
$("#cancelemailsentbtn").off("click").on("click", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
resetFields();
$.mobile.changePage("#res-page");
});
$("#sendemailbtn").off("click").on("click", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
resetFields();
var data = {
to: $("#emailtofield").val(),
msg: $("#emailfield").val()
};
doAjax("POST","php/contenthandler.php?module=reservation&command=emailConfirmReservation",data,handleEmailSendResult,"Emailbestätigung");
});
displayTodaySchedule($("#res-page").data("date"));
}
}
function handleEmailSendResult(result) {
if (result == "OK") {
resetFields();
$.mobile.changePage("#res-page");
} else {
alert("Fehler: Email konnte nicht versandt werden.");
}
}
function resetFields() {
$("#guestname").val("");
$("#email").val("");
$("#durationse").val(2);
$("#durationse").selectmenu('refresh', true);
$("#noofguestse").val(2);
$("#noofguestse").selectmenu('refresh', true);
$("#telno").val("");
$("#remark").val("");
$("#newresbox").trigger("create");
}
function handleChangedReservation(answer) {
if (answer.status != "OK") {
alert("Fehler " + answer.code + ": " + answer.msg);
return;
} else {
setTimeout(function(){document.location.href = "reservation.html";},500);
}
}
function getTableName(roomid,tableid) {
var tablename = "";
if ((tableid >= 0) && (roomid >= 0)) {
var abbr = tableoverview[roomid].roomabbreviation;
if (abbr != "") {
tablename = abbr + "-";
}
var tables = tableoverview[roomid].tables;
for (var i=0;i<tables.length;i++) {
var aTable = tables[i];
if (aTable.id == tableid) {
tablename += aTable.tablename;
break;
}
}
}
return tablename;
}
function createTableOfReservationsByTime(res) {
var number = res.length;
var times = [];
var hour = 0;
var residx = 0;
for (hour=0;hour<24;hour++) {
var resofhour = [];
times[hour] = resofhour;
}
var maxCol = 0;
var hasTotalRes = false;
var resindex = 0;
var h=0;
for (resindex = 0; resindex < number; resindex++) {
hasTotalRes = true;
var aRes = res[resindex];
var start = parseInt(aRes.start);
var end = Math.min(23, start + parseInt(aRes.duration) - 1);
var colToFill = fitsInCol(times,maxCol,start,end);
for (h=start;h<=end;h++) {
times[h][colToFill] = resindex;
}
if (maxCol < colToFill) {
maxCol = colToFill;
}
}
if (!hasTotalRes) {
html += "<tr><td>&nbsp;<td><b>" + RES_NORES[lang] + "</b></tr>";
} else {
var html = "<tr><td>" + RES_HOUR[lang] + "<td>" + RES_RES[lang] + "</tr>";
for (h=0;h<=23;h++) {
var hasRes = false;
var col=0;
var dayTxt = '<tr>' + aTimeField(h);
var aResLine = times[h];
for (col=0;col<=maxCol;col++) {
var residx = aResLine[col];
if (residx != null) {
var roomid = res[residx].roomid;
var tableid = res[residx].tableid;
var tablename = getTableName(roomid,tableid);
dayTxt += aButtonField(residx,res[residx].persons,res[residx].guest,tablename);
hasRes = true;
} else {
dayTxt += "<td>&nbsp;";
}
}
dayTxt += "</tr>";
if (hasRes) {
html += dayTxt;
}
}
}
$("#dayschedule").html(html);
$("#dayschedule").trigger("create");
bindHourButton();
bindCustomerField();
bindChangeButton();
}
function createTableOfReservationsByTables(res) {
var number = res.length;
var html = "";
if (number == 0) {
html += "<tr><td>&nbsp;<td><b>" + RES_NORES[lang] + "</b></tr>";
} else {
html += "<tr><td>" + RES_TABLE[lang] + "<td>" + RES_RES[lang] + "</tr>";
for (var i=0;i<number;i++) {
var aRes = res[i];
var roomid = aRes.roomid;
var tableid = aRes.tableid;
var tablename = "?";
if (tableid >= 0) {
tablename = getTableName(roomid,tableid);
}
html += '<tr>' + aTableField(tablename);
var reservations = aRes.reservations;
for (var col=0;col<=reservations.length;col++) {
var aRes = reservations[col];
if (aRes != null) {
var starttime = aRes.start;
var endhour = aRes.endhour;
var period = starttime + ":00-" + endhour + ":00";
html += aResFieldForTableSort(aRes.id,aRes.persons,aRes.guest,period);
}
}
html += "</tr>";
}
}
$("#tableschedule").html(html);
$("#tableschedule").trigger("create");
bindChangeResByTableButton();
}
function insertReservations(answer) {
if (answer.status != "OK") {
alert("Fehler " + answer.code + ": " + answer.msg);
return;
} else {
tableoverview = answer.tableoverview;
fillRoomList("tablespecinforoomarea","roomselect","tablespecinfotablearea","tableselect",null,null);
var res = answer.msg.bytimes;
$("#res-page").data("res",res);
var resbytables = answer.msg.bytables;
$("#res-page").data("resbytables",resbytables);
createTableOfReservationsByTime(res);
createTableOfReservationsByTables(resbytables);
}
}
function fitsInCol(times,maxCol,start,end) {
var col = 0;
for (col=0;col<=(maxCol+1);col++) {
var h = 0;
var fits = true;
for (h=start;h<=end;h++) {
var entry = times[h][col];
if (entry != null) {
fits = false;
}
}
if (fits) {
return col;
}
}
return maxCol+1;
}
function aTableField(tableid) {
return '<td><button data-theme="a" class="timeschbtn">' + tableid + '</button>';
}
function aResFieldForTableSort(resid,persons,name,timeperiod) {
var txt = timeperiod + "<br>" + toHtml(name) + " - " + toHtml(persons) + " Pers.";
return '<td style="width:110px;"><button data-theme="e" class="schtablebtn" style="width:120px;height:50px;" id="residbytable_'+ resid + '">' + txt + '</button>';
}
function aTimeField(theVal) {
var nextHour = parseInt(theVal) + 1;
return '<td><button data-theme="a" class="timeschbtn">' + theVal + ' - ' + nextHour + '</button>';
}
function aButtonField(theVal,persons,name,tablename) {
var txt = toHtml(name) + " - " + toHtml(persons) + " Pers.";
if (tablename != '') {
txt += "<br>Tisch: " + tablename;
}
return '<td style="width:110px;"><button data-theme="e" class="schbtn" style="width:120px;height:50px;" id="resid_'+ theVal + '">' + txt + '</button>';
}
function bindHourButton() {
$(".timeschbtn").off("click").on("click", function (e) {
var startTime = (($(this).html()).split(" "))[0];
$("#timefieldse").val(startTime);
$("#timefieldse").selectmenu('refresh', true);
});
}
function bindCustomerField() {
$("#customer").off("keyup").on("keyup", function (e) {
startCusSearch();
});
}
function startCusSearch() {
var cusdata = { search: $("#customer").val().trim() }
doAjax("POST","php/contenthandler.php?module=customers&command=getCustomersForReserv",cusdata, handleGetCustomerResult, "Kundenabfrage unmöglich",true);
}
function handleGetCustomerResult(answer) {
if (answer.status != "OK") {
alert("Error: " + answer.msg);
return;
}
filteredCustomers = answer.msg;
var txt = '<ul data-role="listview" id="cuslist" data-divider-theme="a" data-inset="true">';
txt += '<li data-role="list-divider" data-theme="b" data-role="heading">' + RES_CUSTOMERS[lang] + '</li>';
if (filteredCustomers.length === 0) {
txt += '<li id="nocusentry" data-theme="d" data-icon=""><a href="#">' + RES_NO_CUS_FOUND[lang] + '</a></li>';
} else {
for (var i=0;i<filteredCustomers.length;i++) {
var aCus = filteredCustomers[i];
txt += '<li id="cus_' + aCus.id + '" data-theme="f" data-icon="" class="cuslistelem"><a href="#">' + toHtml(aCus.summary) + '</a></li>';
}
}
txt += '</ul>';
$("#customerlist").html(txt);
$("#customerlist").trigger("create");
bindCusElem();
}
function bindCusElem() {
$(".cuslistelem").off("click").on("click", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
var cusid = this.id.split("_")[1];
for (var i=0;i<filteredCustomers.length;i++) {
var aCus = filteredCustomers[i];
if (aCus.id == cusid) {
$("#guestname").val(aCus.name);
$("#email").val(aCus.email);
$("#telno").val(aCus.phone);
$("#customer").val("");
$("#customerlist").html('');
}
}
});
}
function bindCancelButtn() {
$("#cancelbtn").off("click").on("click", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
var date = $("#datepicker").datepicker("getDate");
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
var dateStr = year + "-" + month + "-" + day;
setTimeout(function(){document.location.href = "reservation.html?v=1.5.27&date=" + dateStr;},500);
});
}
function openEditPageForRes(res) {
$("#changeres-page").data("id",res.id);
var day = res.day;
var month = parseInt(res.month)-1;
var year = res.year;
var startTime = res.start;
var duration = res.duration;
var name = res.guest;
var email = res.email;
var noOfGuests = res.persons;
var phone = res.phone;
var remark = res.remark;
var roomid = res.roomid;
var tableid = res.tableid;
if (tableid < 0) {
roomid = -1;
}
var changeDate = new Date(year, month, day, 0,0,0,0);
$('#cdatepicker').datepicker('setDate', changeDate);
$("#ctimefieldse").val(startTime);
$("#cnoofguestse").val(noOfGuests);
$("#cdurationse").val(duration);
$("#cguestname").val(name);
$("#cemail").val(email);
$("#ctelno").val(phone);
$("#cremark").val(remark);
fillRoomList("ctablespecinforoomarea","croomselect","ctablespecinfotablearea","ctableselect",roomid,tableid);
$("#clastcreator").html("<i>" + toHtml(res.creator) + "</i>");
$("#clastchanged").html("<i>" + toHtml(res.creationdate) + "</i>");
bindDlgChangeBtn();
bindDlgDelBtn();
$.mobile.changePage("#changeres-page");
}
function bindChangeButton() {
$(".schbtn").off("click").on("click", function (e) {
var resid = ((this.id).split("_"))[1];
var res = ($("#res-page").data("res"))[resid];
openEditPageForRes(res);
});
}
function bindChangeResByTableButton() {
$(".schtablebtn").off("click").on("click", function (e) {
var resid = ((this.id).split("_"))[1];
var allRes = $("#res-page").data("resbytables");
var theRes = null;
for (var i=0;i<allRes.length;i++) {
var tableReservations = allRes[i].reservations;
for (var j=0;j<tableReservations.length;j++) {
var aRes = tableReservations[j];
if (aRes.id == resid) {
theRes = aRes;
break;
}
}
}
if (theRes != null) {
openEditPageForRes(theRes);
}
});
}
function bindDlgChangeBtn() {
$("#changebtn").off("click").on("click", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
var startTime = $("#ctimefieldse").val();
var persons = $("#cnoofguestse").val();
var duration = $("#cdurationse").val();
var guestname = $("#cguestname").val();
var email = $("#cemail").val();
var phone = $("#ctelno").val();
var remark = $("#cremark").val();
var roomkeys = Object.keys(tableoverview);
var roomid = -1;
var tableid = -1;
if (roomkeys.length == 0) {
tableid = -1;
} else if (roomkeys.length == 1) {
roomid = roomkeys[0];
tableid = $("#ctableselect").val();
} else {
roomid = $("#croomselect").val();
tableid = -1;
if (roomid >= 0) {
tableid = $("#ctableselect").val();
}
}
var date = $("#cdatepicker").datepicker("getDate");
var id = $("#changeres-page").data("id");
var data = {
id: id,
day: date.getDate(),
month: (date.getMonth() + 1),
year: date.getFullYear(),
start: startTime,
name: guestname,
email: email,
duration: duration,
persons: persons,
phone: phone,
remark: remark,
tableid: tableid
};
doAjax("POST","php/contenthandler.php?module=reservation&command=changeReservation",data,handleChangedReservation,"Reservierung");
});
}
function bindDlgDelBtn() {
$("#delbtn").off("click").on("click", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
var id = $("#changeres-page").data("id");
doAjax("POST","php/contenthandler.php?module=reservation&command=delReservation",{ id: id },handleChangedReservation,"Reservierung");
});
}
$(document).on("pageinit", "#res-page", function () {
initializeMainMenu("#modulemenu");
hideMenu();
$.ajaxSetup({ cache: false });
$("#res-page").data("date",new Date());
getGeneralConfigItems();
handleDateChangeEvents();
displaySpecificDateSchedule();
bindNewReservationBtn();
bindChangeButton();
bindCancelButtn();
var currentHour = String(new Date().getHours());
$("#timefieldse").val(currentHour);
$("#timefieldse").selectmenu('refresh', true);
$("#customer").val("");
});
$(document).on("pagebeforeshow", "#changeres-page", function () {
if (lang < 0) {
setTimeout(function(){document.location.href = "reservation.html?"},500);
} else {
$("#ctimefieldse").selectmenu('refresh', true);
$("#cnoofguestse").selectmenu('refresh', true);
$("#cdurationse").selectmenu('refresh', true);
}
});
function fillRoomList(roomsectionid,roomselectid,tablesectionid,tableselectid,selectedRoomid,selectedTableid) {
var roomkeys = Object.keys(tableoverview);
if (roomkeys.length > 1) {
var txt = '<label for="' + roomselectid + '">' + RES_ROOM[lang] + ':</label>';
txt += "<SELECT id='" + roomselectid + "'>";
txt += "<option value='-1'>-</option>";
for (var i=0;i<roomkeys.length ;i++) {
var aRoomKey = roomkeys[i];
var aRoom = tableoverview[aRoomKey];
var selected = "";
if (aRoom.roomid == selectedRoomid) {
selected = " selected";
}
txt += "<option value='" + aRoom.roomid + "' " + selected + ">" + toHtml(aRoom.roomname) + "</option>";
}
txt += "</SELECT>";
$("#" + roomsectionid).html(txt);
$("#" + roomsectionid).trigger("create");
fillTableList(roomselectid,tablesectionid,tableselectid,selectedTableid);
bindRoomSelect(roomsectionid,roomselectid,tablesectionid,tableselectid,selectedTableid);
} else {
fillTableList(roomselectid,tablesectionid,tableselectid,selectedTableid);
}
}
function fillTableList(roomsectionid,tablesectionid,tableselectid,selectedTableid) {
var roomkeys = Object.keys(tableoverview);
var allowNoTableToSelect = false;
var roomid = null;
if (roomkeys.length == 0) {
return;
} else if (roomkeys.length == 1) {
allowNoTableToSelect = true;
roomid = roomkeys[0]
} else {
roomid = $("#" + roomsectionid).val();
}
var txt = "";
if (roomid >= 0) {
var tables = tableoverview[roomid]["tables"];
txt += '<label for="' + tableselectid + '">' + RES_TABLE[lang] + ':</label>';
txt += "<SELECT id='" + tableselectid + "'>";
if (allowNoTableToSelect) {
txt += "<option value='-1'>-</option>";
}
for (var i=0;i<tables.length;i++) {
var aTable = tables[i];
var selected = "";
if (aTable.id == selectedTableid) {
selected = " selected";
}
txt += "<option value='" + aTable.id + "' " + selected + ">" + toHtml(aTable.tablename) + "</option>";
}
txt += "</SELECT>";
}
$("#" + tablesectionid).html(txt);
$("#" + tablesectionid).trigger("create");
}
function bindRoomSelect(roomsectionid,roomselectid,tablesectionid,tableselectid,selectedTableid) {
$("#" + roomsectionid).off("change").on("change", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
var selectedRoomid = $("#" + roomselectid).val();
selectedTableid = null;
fillRoomList(roomsectionid,roomselectid,tablesectionid,tableselectid,selectedRoomid,selectedTableid);
});
}
</script>
<div data-role="page" id="res-page" data-theme="c">
<div data-role="panel" id="modulepanel" data-position="right" data-display="overlay">
<ul data-role="listview" id="modulemenu" data-divider-theme="a" data-inset="true">
<li data-role="list-divider" data-theme="b" data-role="heading">Hauptmenü</li>
</ul>
</div><!-- /panel -->
<div data-role="header" data-theme="b" data-position="fixed" id="theheader" style="background-color:black;">
<h1><span id="restitletxt">Reservierung</span> <img src="img/connection.png" class="connectionstatus" style="display:none;" /> <img src="img/printerstatus.png" class="printerstatus" style="display:none;" /> <img src="img/tasksstatus.png" class="tasksstatus" style="display:none;" /></h1>
<div data-type="horizontal" style="top:0px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right">
<a href="#" data-role="button" data-icon="arrow-d" data-ajax="false" id="menuswitch"><span id="modulstxt2">Hauptmenü</span></a>
</div>
</div>
<div data-role="content" id="fullcontent">
<div data-role="fieldcontain">
<label for="datepicker"><span id=datetxt>Datum</span>: </label>
<input data-role="date" data-inline="true" type="text" id="datepicker" data-theme="d">
</div>
<div id="newresbox" data-role="collapsible" data-theme="c" data-content-theme="c" data-collapsed="true">
<h3><span id="newresboxtxt">Neue Reservierung</span></h3>
<form>
<div data-role="fieldcontain">
<label for="timefieldse" class="select" style="width: 200px;"><span id="starttimetxt">Start-Uhrzeit</span>: </label>
<select name="timefieldse" id="timefieldse">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</div> <!-- fieldcontain for start time -->
<div data-role="fieldcontain">
<label for="durationse" class="select" style="width: 200px;"><span id="durationtxt">Dauer (Stunden)</span>: </label>
<select name="durationse" id="durationse" >
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div> <!-- fieldcontain for duration -->
<div data-role="fieldcontain">
<label for="noofguestse" class="select" style="width: 200px;"><span id="personstxt">Anzahl Gäste</span>: </label>
<select name="noofguestse" id="noofguestse" >
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11-15</option>
<option value="15">15-20</option>
<option value="20">20-30</option>
<option value="30">30-40</option>
<option value="40">40+</option>
</select>
</div> <!-- fieldcontain for number of guests -->
<div data-role="fieldcontain">
<label for="customer" class="select" style="width: 100%;"><span id="customertxt">Kunde</span>: </label>
<input type="text" id="customer" class="reservationinputfield whiteinput" value="" data-mini="true" placeholder="Name / Telefon"/>
</div> <!-- fieldcontain name -->
<div id="customerlist"></div>
<p id="reshintchoosecustomer">Oder manuell eingeben:
<p><div data-role="fieldcontain">
<label for="guestname" class="select" style="width: 100%;"><span id="nametxt">Name</span>: </label>
<input type="text" id="guestname" class="reservationinputfield whiteinput" value="" data-mini="true" />
</div> <!-- fieldcontain name -->
<div data-role="fieldcontain">
<label for="email" class="select" style="width: 100%;"><span id="emailtxt">Email</span>: </label>
<input type="text" id="email" class="reservationinputfield whiteinput" value="" data-mini="true" />
</div> <!-- fieldcontain name -->
<div data-role="fieldcontain">
<label for="telno" class="select" style="width: 100%;"><span id="teltxt">Telefon</span>: </label>
<input type="text" id="telno" class="reservationinputfield whiteinput" value="" data-mini="true" />
</div> <!-- fieldcontain name -->
<div data-role="fieldcontain">
<label for="remark" class="select" style="width: 100%;"><span id="remarktxt">Notiz</span>: </label>
<input type="text" id="remark" class="reservationinputfield whiteinput" value="" data-mini="true" />
</div> <!-- fieldcontain name -->
<div id="tableinfo" data-role="collapsible" data-theme="c" data-content-theme="e" data-collapsed="true">
<h3><span id="tablespecheadertxt">Tischang.</span></h3>
<div id="tablespecinforoomarea"></div>
<div id="tablespecinfotablearea"></div>
</div>
<a href="#" data-role="button" data-theme="f" id="newbtn"><span id="newtxt">Neu</span></a>
</form>
<div id=emailinfo style="text-align:center;"></div>
</div> <!-- newresbox -->
<br>
<div id="resbytimes" data-role="collapsible" data-theme="c" data-content-theme="c" data-collapsed="false">
<h3><span id="resbytimesheadertxt">Reservierungen nach Z.</span></h3>
<table id="dayschedule"></table>
</div> <!-- resbytimes -->
<div id="resbytables" data-role="collapsible" data-theme="c" data-content-theme="c" data-collapsed="false">
<h3><span id="resbytablesheadertxt">Reservierungen nach T.</span></h3>
<table id="tableschedule"></table>
</div> <!-- resbytimes -->
</div>
<div data-role="footer" data-theme="b" id="thefooterr" style="background-color:black;">
<div class="ui-grid-a">
<div class="ui-block-a userinfo" id="loggedinuser"></div>
<div class="ui-block-b grid_right" id="versioninfo"></div>
</div><!-- /grid-a -->
</div> <!-- footer -->
</div> <!-- first page -->
<div data-role="page" id="sentemail-page"> <!-- second page -->
<div data-role="header" data-theme="b" data-position="fixed" id="ctheheader">
<h1><span id="emailtitletxt">Emailbestätigung</span></h1>
</div>
<div data-role="content">
<form>
<div data-role="fieldcontain">
<label for="emailfield">Email:</label>
<textarea cols="40" rows="8" name="emailfield" id="emailfield" style="background-color: white; color:black;"></textarea>
</div>
<div data-role="fieldcontain">
<label for="emailtofield"><span id="sendemailtotxt">An</span>:</label>
<input type="text" id="emailtofield" style="background-color: white; color:black;" value="" data-mini="true" disabled />
</div>
<p>
<fieldset class="ui-grid-a" id="changecancelarea">
<div class="ui-block-a"><button type="submit" data-theme="d" class="cancelButton" data-icon="back" id="cancelemailsentbtn"><span id="cancelemailbtntxt">Nicht senden</span></button></div>
<div class="ui-block-b"><button type="submit" data-theme="f" class="applyButton" data-icon="check" id="sendemailbtn"><span id="sendemailtxtbtn">Senden</span></button></div>
</fieldset>
</p>
</form>
</div> <!-- content -->
</div> <!-- page for email sending -->
<div data-role="page" id="changeres-page"> <!-- second page -->
<div data-role="header" data-theme="b" data-position="fixed" id="ctheheader">
<h1><span id="reschangetitletxt">Reservierung ändern</span></h1>
</div>
<div data-role="content">
<div id="cnewresbox" data-role="collapsible" data-theme="c" data-content-theme="c" data-collapsed="false">
<h3><span id="cnewresboxtxt">Reservierung ändern</span></h3>
<form>
<div data-role="fieldcontain">
<p><span id="clastcreatortxt">Letzte Änderung von</span>: <span id="clastcreator"></span></p>
<p><span id="clastchangetxt">zuletzt geändert</span>: <span id="clastchanged"></span></p>
<div data-role="fieldcontain">
<label for="cdatepicker" style="width:200px;"><span id=cdatetxt>Datum</span>: </label>
<input data-role="date" data-inline="true" type="text" id="cdatepicker" data-theme="d" >
</div>
<label for="ctimefieldse" class="select" style="width:200px;"><span id="cstarttimetxt">Start-Uhrzeit</span>: </label>
<select name="ctimefieldse" id="ctimefieldse" >
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</div> <!-- fieldcontain for start time -->
<div data-role="fieldcontain">
<label for="cdurationse" class="select" style="width:200px;"><span id="cdurationtxt">Dauer (Stunden)</span>: </label>
<select name="cdurationse" id="cdurationse" >
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div> <!-- fieldcontain for duration -->
<div data-role="fieldcontain">
<label for="cnoofguestse" class="select" style="width:200px;"><span id="cpersonstxt">Anzahl Gäste</span>: </label>
<select name="cnoofguestse" id="cnoofguestse" >
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11-15</option>
<option value="15">15-20</option>
<option value="20">20-30</option>
<option value="30">30-40</option>
<option value="40">40+</option>
</select>
</div> <!-- fieldcontain for number of guests -->
<div data-role="fieldcontain">
<label for="cguestname" class="select" style="width: 200px;"><span id="cnametxt">Name</span>: </label>
<input type="text" id="cguestname" class="reservationinputfield whiteinput" value="" data-mini="true" />
</div> <!-- fieldcontain cguestname -->
<div data-role="fieldcontain">
<label for="cemail" class="select" style="width: 200px;"><span id="cemailtxt">Name</span>: </label>
<input type="text" id="cemail" class="reservationinputfield whiteinput" value="" data-mini="true" />
</div> <!-- fieldcontain cemail -->
<div data-role="fieldcontain">
<label for="ctelno" class="select" style="width: 200px;"><span id="cteltxt">Telefon</span>: </label>
<input type="text" id="ctelno" class="reservationinputfield whiteinput" value="" data-mini="true" />
</div> <!-- fieldcontain ctelno -->
<div data-role="fieldcontain">
<label for="cremark" class="select" style="width: 200px;"><span id="cremarktxt">Notiz</span>: </label>
<input type="text" id="cremark" class="reservationinputfield whiteinput" value="" data-mini="true" />
</div> <!-- fieldcontain cremark -->
<div id="ctableinfo" data-role="collapsible" data-theme="c" data-content-theme="e" data-collapsed="true">
<h3><span id="ctablespecheadertxt">Tischang.</span></h3>
<div id="ctablespecinforoomarea"></div>
<div id="ctablespecinfotablearea"></div>
</div>
<p>
<fieldset class="ui-grid-b" id="changecancelarea">
<div class="ui-block-a"><button type="submit" data-theme="d" class="cancelButton" data-icon="back" id="cancelbtn"><span id="canceltxt">Abbruch</span></button></div>
<div class="ui-block-b"><button type="submit" data-theme="f" class="applyButton" data-icon="check" id="changebtn"><span id="changedlgbtn">Ändern</span></button></div>
<div class="ui-block-c"><button type="submit" data-theme="b" class="applyButton" data-icon="delete" id="delbtn"><span id="deldlgbtn">Löschen</span></button></div>
</fieldset>
</p>
</form>
</div> <!-- newresbox -->
<br>
</div>
</div> <!-- second page -->
</body>
</html>