173 lines
7.5 KiB
HTML
173 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
|
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
|
|
<link rel="stylesheet" type="text/css" href="voorb_timepicker.css">
|
|
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
|
|
<script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
|
|
<script type="text/javascript" src="jquery.iecors.js"></script>
|
|
<script type="text/javascript" src="voorb_timepicker.js"></script>
|
|
<script type="text/javascript" src="voorb_config.js"></script>
|
|
<script type="text/javascript" src="voorb.js"></script>
|
|
<script type="text/javascript" src="voorb_user_callback.js"></script>
|
|
|
|
<script>
|
|
callbackFunctions.user = callbackFunctions_user;
|
|
|
|
$(document).ready(function()
|
|
{
|
|
$("#dag1").datepicker({dateFormat: "dd-mm-yy"});
|
|
$("#dag2").datepicker({dateFormat: "dd-mm-yy"});
|
|
$("#tijd1").timepicker({ step: 15
|
|
, timeFormat: "G:i"
|
|
, show2400: true
|
|
, minTime: "9:00"
|
|
, maxTime: "18:00"
|
|
, scrollDefault: "now"
|
|
});
|
|
$("#tijd2").timepicker({ step: 15
|
|
, timeFormat: "G:i"
|
|
, show2400: true
|
|
, minTime: "9:00"
|
|
, maxTime: "18:00"
|
|
, scrollDefault: "now"
|
|
});
|
|
|
|
load_optionlist("lokatie", "locations");
|
|
|
|
$(".datepicker").each(function()
|
|
{
|
|
$(this).datepicker("setDate", new Date());
|
|
});
|
|
|
|
});
|
|
|
|
|
|
function load_optionlist(listname, apiname, params)
|
|
{
|
|
var param = params || {};
|
|
if (!param.callback_done)
|
|
param.callback_done = ["api2.createOptionList", "api2.callbackstatusDone"];
|
|
call_optionlist(listname, apiname, param);
|
|
}
|
|
|
|
function lokatieChanged()
|
|
{
|
|
var params = {};
|
|
params.filter = "location=" + $("#lokatie option:selected").val();
|
|
params.callback_done = ["api2.createOptionList", "user.b"];
|
|
load_optionlist("gebouw", "buildings", params);
|
|
}
|
|
|
|
function doSubmit()
|
|
{
|
|
function zetDatumTijd(datum, tijd)
|
|
{
|
|
var dt = datum;
|
|
var ti = (tijd ? tijd : new Date());
|
|
dt.setHours(ti.getHours());
|
|
dt.setMinutes(ti.getMinutes());
|
|
return dt;
|
|
}
|
|
|
|
$("#Result").text("Loading ... ").css("background-color", "");
|
|
$("#btnSubmit").attr("disabled", true);
|
|
|
|
// Verzamelen van input data voor submit.
|
|
var date1 = zetDatumTijd($("#dag1").datepicker("getDate"), $("#tijd1").timepicker("getTime"));
|
|
var date2 = zetDatumTijd($("#dag2").datepicker("getDate"), $("#tijd2").timepicker("getTime"));
|
|
|
|
var data_visitor = {};
|
|
data_visitor = { name: $("#persoon").val()
|
|
, company: $("#bedrijf").val()
|
|
};
|
|
var data_appointment = {};
|
|
data_appointment.appointment = { location: $("#lokatie").val()
|
|
, building: $("#gebouw").val()
|
|
, from: date1
|
|
, to: date2
|
|
, description: $("#omschrijving").val()
|
|
, action: null
|
|
, visitors: []
|
|
};
|
|
data_appointment.appointment.visitors.push(data_visitor);
|
|
|
|
// API aanroepen om een nieuwe afspraak toe te voegen.
|
|
$("#Result").text("Bezig met afspraak te verwerken...");
|
|
|
|
var params = { apiname: "appointments"
|
|
, method: "POST"
|
|
, callback_done: ["api2.showAppointmentNr", "api2.callbackstatusDone"]
|
|
};
|
|
call_api(data_appointment, params);
|
|
}
|
|
function doClose()
|
|
{
|
|
$("#omschrijving").val("");
|
|
$("#persoon").val("");
|
|
$("#bedrijf").val("");
|
|
}
|
|
|
|
</script>
|
|
<style>
|
|
pre { font-size: 1em;
|
|
-moz-tab-size:4;
|
|
}
|
|
td { vertical-align: top;}
|
|
th {border-bottom: 1px solid #666;line-height:20px;}
|
|
input[type=button],input[type=submit], button {font-weight: bold;}
|
|
</style>
|
|
</head>
|
|
<body style='background-color:rgb(238,176,102); font-family: Helvetica;'>
|
|
<form method="post" onsubmit="doSubmit();return false;">
|
|
<table>
|
|
<th colspan="2">Meldt een bezoeker aan</th>
|
|
<tr>
|
|
<td><label>Lokatie</label></td>
|
|
<td><select id="lokatie" style="width:250px" onchange="lokatieChanged()"></select></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label>Gebouw</label></td>
|
|
<td><select id="gebouw" style="width:250px" onchange="gebouwChanged()"></select></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label>van</label></td>
|
|
<td><input type="text" id="dag1" class="datepicker" value="">
|
|
<input type="text" id="tijd1" value="" style="width:40px">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label>tot</label></td>
|
|
<td><input type="text" id="dag2" class="datepicker" value="">
|
|
<input type="text" id="tijd2" value="" style="width:40px">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label>Omschrijving</label></td>
|
|
<td><input id="omschrijving" type="text" style="width:250px" value=""></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label>Persoon</label></td>
|
|
<td><input id="persoon" type="text" style="width:250px" value=""></td>
|
|
</tr>
|
|
<tr>
|
|
<td><label>Bedrijf</label></td>
|
|
<td><input id="bedrijf" type="text" style="width:250px" value=""></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td></td>
|
|
<td>
|
|
<input type="submit" id="btnSubmit" onclick="doSubmit();return false;" value="Opslaan">
|
|
<input type="button" id="btnClose" onclick="doClose();" value="Annuleren">
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
</form>
|
|
<br><br>Status <span id="Status"></span>
|
|
<br>Melding: <pre id="Result"></pre>
|
|
</body>
|
|
</html> |