108 lines
3.3 KiB
HTML
108 lines
3.3 KiB
HTML
<%frame "frame.html"%>
|
|
|
|
<h1>Points of Presence</h1>
|
|
<br/>
|
|
<h2>List <span class="ui-icon ui-icon-refresh" onclick="$('#l2sTable').DataTable().ajax.reload(null, false);"></span></h2>
|
|
<br/>
|
|
<table id="l2sTable"></table>
|
|
|
|
<br/>
|
|
<div id="details">
|
|
<h2>Details <span class="ui-icon ui-icon-circle-plus" onclick="createPOP();"></span></h2>
|
|
<fieldset>
|
|
<label for="">Bezeichnung</label><input type="text" id="Name"><br/>
|
|
<label for="">Sender#</label><input type="text" id="ForeignName"><br/>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label for="">Standort</label><input type="text" id="Latitude"><br/>
|
|
<label for=""></label><input type="text" id="Longitude"><br/>
|
|
</fieldset>
|
|
<button onclick="savePOP();">Speichern</button>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var currentPOP = null;
|
|
|
|
$("#popTable").DataTable({
|
|
columns: [
|
|
{ title: "", data: null },
|
|
{ title: "Bezeichnung", data: "Name" },
|
|
{ title: "Sender#", data: "ForeignName" },
|
|
{ title: "Erstellt", data: "Created" },
|
|
{ title: "Geräte", data: null, render: function(d,t,r){ return "N/A"; } },
|
|
{ title: "Standort", data: "GeoLocation", render: function(d,t,r){ return d.Latitude + "/" + d.Longitude; } }
|
|
],
|
|
columnDefs: [
|
|
{ targets: 0, data: null, defaultContent: "<span class='ui-icon ui-icon-info'></span>" }
|
|
],
|
|
select: "single",
|
|
height: 300,
|
|
fixedHeader: true,
|
|
ajax: {
|
|
url: "/collections/PointOfPresence",
|
|
dataSrc: ''
|
|
},
|
|
serverSide: false,
|
|
})
|
|
.on( "select", function(e,dt,type,indexes){
|
|
if (indexes.length > 0)
|
|
showPOP(dt.rows( indexes ).data()[0]);
|
|
})
|
|
.on( "deselect", function(e,dt,type,indexes){
|
|
showPOP(null);
|
|
});
|
|
|
|
function refreshPopTable()
|
|
{
|
|
$("#popTable").DataTable().ajax.reload(null, false);
|
|
}
|
|
|
|
function showPOP(pop)
|
|
{
|
|
currentPOP = pop;
|
|
if (pop)
|
|
{
|
|
$("#Name").val(pop.Name);
|
|
$("#ForeignName").val(pop.ForeignName);
|
|
|
|
$("#details input").removeAttr("disabled");
|
|
} else {
|
|
$("#details input").prop("disabled","disabled");
|
|
}
|
|
}
|
|
|
|
function createPOP()
|
|
{
|
|
var pop = {
|
|
Name: "noname",
|
|
ForeignName: "",
|
|
GeoLocation: {
|
|
Latitude: 0,
|
|
Longitude: 0
|
|
}
|
|
};
|
|
showPOP(pop);
|
|
}
|
|
|
|
function savePOP()
|
|
{
|
|
if (currentPOP)
|
|
{
|
|
currentPOP.Name = $('#Name').val();
|
|
currentPOP.ForeignName = $('#ForeignName').val();
|
|
currentPOP.GeoLocation.Latitude = parseFloat($('#Latitude').val()) || 0;
|
|
currentPOP.GeoLocation.Longitude = parseFloat($('#Longitude').val()) || 0;
|
|
|
|
if (currentPOP.ID)
|
|
{
|
|
skyapi().put("/collections/PointOfPresence/" + currentPOP.ID, currentPOP, function(pop){ showPOP(pop); refreshPopTable(); } );
|
|
} else
|
|
{
|
|
skyapi().post("/collections/PointOfPresence",currentPOP, function(pop){ showPOP(pop); refreshPopTable(); } );
|
|
}
|
|
}
|
|
}
|
|
|
|
showPOP(null);
|
|
</script>
|