822 lines
28 KiB
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> <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> ";
|
|
}
|
|
}
|
|
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, '"').replace(/</g, "<").replace(/>/g, ">").replace(/'/g, "'"));
|
|
}
|
|
|
|
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> |