ordersprinter/webapp/reservation.html

892 lines
30 KiB
HTML
Raw Normal View History

2020-11-19 22:47:44 +01:00
<html>
<head>
<title>Ansicht Reservierung</title>
2020-11-19 22:48:24 +01:00
2020-11-19 22:47:44 +01:00
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
2020-11-19 22:48:24 +01:00
<meta name="author" content="Stefan Pichel">
2020-11-19 23:02:33 +01:00
<link rel="stylesheet" type="text/css" href="css/bestformat.css?v=1.3.7">
2020-11-19 22:47:44 +01:00
<link rel="stylesheet" href="php/3rdparty/orderstyle/orderstyle.min.css" />
<link rel="stylesheet" href="php/3rdparty/orderstyle/jquery.mobile.icons.min.css" />
2020-11-19 22:48:24 +01:00
<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>
2020-11-19 22:47:44 +01:00
<script src="utilities.js"></script>
2020-11-19 22:48:24 +01:00
<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>
2020-11-19 22:47:44 +01:00
2020-11-19 22:48:24 +01:00
<link rel="stylesheet" href="php/3rdparty/jquerymobiledatepicker/jquery.mobile.datepicker.css" />
<script src="php/3rdparty/jquerymobiledatepicker/jquery.mobile.datepicker.js"></script>
2020-11-19 22:47:44 +01:00
</head>
2020-11-19 23:02:08 +01:00
<body>
2020-11-19 22:47:44 +01:00
<style>
.schbtn {
font-size: 10px;
width: 150px;
height: 45px;
word-wrap: break-word !important;
white-space: normal !important;
background:Red;
}
.timeschbtn {
font-size: 15px;
width: 100px;
height: 45px;
}
2020-11-19 22:48:24 +01:00
.ui-select .ui-btn {
width:200px;
}
2020-11-19 22:47:44 +01:00
</style>
2020-11-19 23:02:08 +01:00
2020-11-19 22:47:44 +01:00
<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 = ["Res.","Res.","Res."];
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"];
2020-11-19 23:02:08 +01:00
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:"];
2020-11-19 22:47:44 +01:00
var lang = (-1);
var reservationnote = "";
var companyinfo = "";
var emailIsPossible = false;
var emailTemplate = "";
2020-11-19 23:02:08 +01:00
var filteredCustomers = [];
2020-11-19 22:47:44 +01:00
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]);
2020-11-19 23:02:08 +01:00
$("#customertxt").html(RES_CUS_LABEL[lang]);
2020-11-19 22:47:44 +01:00
$("#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]);
$("#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]);
2020-11-19 23:02:08 +01:00
$("#reshintchoosecustomer").html(RES_HINT_CUS_CHOOSE[lang]);
2020-11-19 22:47:44 +01:00
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);
displayDateSchedule(date);
});
}
function displayDateSchedule(date) {
var data = {
day: date.getDate(),
month: (date.getMonth() + 1),
year: date.getFullYear()
};
doAjax("GET","php/contenthandler.php?module=reservation&command=getReservations",data,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();
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
};
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");
});
displayDateSchedule($("#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 insertReservations(answer) {
if (answer.status != "OK") {
alert("Fehler " + answer.code + ": " + answer.msg);
return;
} else {
var res = answer.msg;
$("#res-page").data("res",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;
dayTxt = '<tr>' + aTimeField(h);
var aResLine = times[h];
for (col=0;col<=maxCol;col++) {
var residx = aResLine[col];
if (residx != null) {
dayTxt += aButtonField(residx,res[residx].persons,res[residx].guest);
hasRes = true;
} else {
dayTxt += "<td>&nbsp;";
}
}
dayTxt += "</tr>";
if (hasRes) {
html += dayTxt;
}
}
}
$("#dayschedule").html(html);
$("#dayschedule").trigger("create");
bindHourButton();
2020-11-19 23:02:08 +01:00
bindCustomerField();
2020-11-19 22:47:44 +01:00
bindChangeButton();
}
}
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 aTimeField(theVal) {
var nextHour = parseInt(theVal) + 1;
return '<td><button data-theme="c" class="timeschbtn">' + theVal + ' - ' + nextHour + '</button>';
}
function aButtonField(theVal,persons,name) {
return '<td style="width:110px;"><button data-theme="e" class="schbtn" style="width:100px;" id="resid_'+ theVal + '">' + persons + ": " + name + '</button>';
}
function bindHourButton() {
$(".timeschbtn").off("click").on("click", function (e) {
var startTime = (($(this).html()).split(" "))[0];
$("#timefieldse").val(startTime);
$("#timefieldse").selectmenu('refresh', true);
});
}
2020-11-19 23:02:08 +01:00
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('');
}
}
});
}
2020-11-19 22:47:44 +01:00
function txtToHtml(txt) {
return (txt.replace(/"/g, '&quot;').replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&#39;"));
}
function bindCancelButtn() {
$("#cancelbtn").off("click").on("click", function (e) {
e.stopImmediatePropagation();
e.preventDefault();
setTimeout(function(){document.location.href = "reservation.html?"},500);
});
}
function bindChangeButton() {
$(".schbtn").off("click").on("click", function (e) {
var resid = ((this.id).split("_"))[1];
var res = ($("#res-page").data("res"))[resid];
$("#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 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);
$("#clastcreator").html("<i>" + txtToHtml(res.creator) + "</i>");
$("#clastchanged").html("<i>" + txtToHtml(res.creationdate) + "</i>");
bindDlgChangeBtn();
bindDlgDelBtn();
$.mobile.changePage("#changeres-page");
});
}
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 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
};
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();
displayDateSchedule(new Date());
bindNewReservationBtn();
bindChangeButton();
bindCancelButtn();
var currentHour = String(new Date().getHours());
$("#timefieldse").val(currentHour);
$("#timefieldse").selectmenu('refresh', true);
2020-11-19 23:02:08 +01:00
$("#customer").val("");
2020-11-19 22:47:44 +01:00
});
$(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);
}
});
2020-11-19 22:48:24 +01:00
2020-11-19 22:47:44 +01:00
</script>
<div data-role="page" id="res-page">
<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">
2020-11-19 23:02:16 +01:00
<li data-role="list-divider" data-theme="b" data-role="heading">Hauptmenü</li>
2020-11-19 22:47:44 +01:00
</ul>
</div><!-- /panel -->
<div data-role="header" data-theme="b" data-position="fixed" id="theheader">
2020-11-19 22:59:57 +01:00
<h1><span id="restitletxt">Reservierung</span> <img src="img/printerstatus.png" class="printerstatus" style="display:none;" /></h1>
2020-11-19 22:47:44 +01:00
<div data-type="horizontal" style="top:0px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right">
2020-11-19 23:02:16 +01:00
<a href="#" data-role="button" data-icon="arrow-d" data-ajax="false" id="menuswitch"><span id="modulstxt2">Hauptmenü</span></a>
2020-11-19 22:47:44 +01:00
</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>
2020-11-19 22:48:24 +01:00
<select name="timefieldse" id="timefieldse">
2020-11-19 22:47:44 +01:00
<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>
2020-11-19 22:48:24 +01:00
<select name="durationse" id="durationse" >
2020-11-19 22:47:44 +01:00
<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>
2020-11-19 22:48:24 +01:00
<select name="noofguestse" id="noofguestse" >
2020-11-19 22:47:44 +01:00
<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">
2020-11-19 23:02:08 +01:00
<label for="customer" class="select" style="width: 100%;"><span id="customertxt">Kunde</span>: </label>
<input type="text" id="customer" 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">
2020-11-19 22:48:24 +01:00
<label for="guestname" class="select" style="width: 100%;"><span id="nametxt">Name</span>: </label>
2020-11-19 22:47:44 +01:00
<input type="text" id="guestname" value="" data-mini="true" />
</div> <!-- fieldcontain name -->
<div data-role="fieldcontain">
2020-11-19 22:48:24 +01:00
<label for="email" class="select" style="width: 100%;"><span id="emailtxt">Email</span>: </label>
2020-11-19 22:47:44 +01:00
<input type="text" id="email" value="" data-mini="true" />
</div> <!-- fieldcontain name -->
<div data-role="fieldcontain">
2020-11-19 22:48:24 +01:00
<label for="telno" class="select" style="width: 100%;"><span id="teltxt">Telefon</span>: </label>
2020-11-19 22:47:44 +01:00
<input type="text" id="telno" value="" data-mini="true" />
</div> <!-- fieldcontain name -->
<div data-role="fieldcontain">
2020-11-19 22:48:24 +01:00
<label for="remark" class="select" style="width: 100%;"><span id="remarktxt">Notiz</span>: </label>
2020-11-19 22:47:44 +01:00
<input type="text" id="remark" value="" data-mini="true" />
</div> <!-- fieldcontain name -->
<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>
<table id="dayschedule"></table>
</div>
<div data-role="footer" data-theme="b" id="thefooterr">
<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"></textarea>
</div>
<div data-role="fieldcontain">
<label for="emailtofield"><span id="sendemailtotxt">An</span>:</label>
<input type="text" id="emailtofield" 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>
2020-11-19 22:48:24 +01:00
2020-11-19 22:47:44 +01:00
<div data-role="fieldcontain">
2020-11-19 22:48:24 +01:00
<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" >
2020-11-19 22:47:44 +01:00
</div>
2020-11-19 22:48:24 +01:00
<label for="ctimefieldse" class="select" style="width:200px;"><span id="cstarttimetxt">Start-Uhrzeit</span>: </label>
<select name="ctimefieldse" id="ctimefieldse" >
2020-11-19 22:47:44 +01:00
<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">
2020-11-19 22:48:24 +01:00
<label for="cdurationse" class="select" style="width:200px;"><span id="cdurationtxt">Dauer (Stunden)</span>: </label>
<select name="cdurationse" id="cdurationse" >
2020-11-19 22:47:44 +01:00
<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">
2020-11-19 22:48:24 +01:00
<label for="cnoofguestse" class="select" style="width:200px;"><span id="cpersonstxt">Anzahl Gäste</span>: </label>
<select name="cnoofguestse" id="cnoofguestse" >
2020-11-19 22:47:44 +01:00
<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" 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" 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" 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" value="" data-mini="true" />
</div> <!-- fieldcontain cremark -->
<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>