ordersprinter/webapp/reservation.html

822 lines
28 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.1.14">
<link rel="stylesheet" href="php/3rdparty/orderstyle/orderstyle.min.css" />
<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>
<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;
}
.ui-select .ui-btn {
width:200px;
}
</style>
<body>
<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"];
var lang = (-1);
var reservationnote = "";
var companyinfo = "";
var emailIsPossible = false;
var emailTemplate = "";
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]);
$("#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]);
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();
//alert("Fehler beim Aufruf der Seite: " + configResult.msg);
}
}
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
};
// prepare next page for email
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++) {
// collect reservations for hour
var resofhour = [];
times[hour] = resofhour;
}
// now every hour has its (empty) array...
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;
}
}
// now times table is filled. Create html
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();
bindChangeButton();
}
}
function fitsInCol(times,maxCol,start,end) {
var col = 0;
for (col=0;col<=(maxCol+1);col++) {
// does it fit in this 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;
}
}
// should never be come to this point
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);
});
}
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);
});
$(document).on("pagebeforeshow", "#changeres-page", function () {
if (lang < 0) {
// user has refreshed change page - that does not work!
setTimeout(function(){document.location.href = "reservation.html?"},500);
} else {
$("#ctimefieldse").selectmenu('refresh', true);
$("#cnoofguestse").selectmenu('refresh', true);
$("#cdurationse").selectmenu('refresh', true);
}
});
</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">
<li data-role="list-divider" data-theme="b" data-role="heading">Module</li>
</ul>
</div><!-- /panel -->
<div data-role="header" data-theme="b" data-position="fixed" id="theheader">
<h1><span id="restitletxt">Reservierung</span></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">Module</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="guestname" class="select" style="width: 100%;"><span id="nametxt">Name</span>: </label>
<input type="text" id="guestname" 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" 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" 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" 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>
<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" 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>