171 lines
5.3 KiB
HTML
171 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Sky.JS</title>
|
|
|
|
<link href="jquery-ui.min.css" rel="stylesheet" />
|
|
<link href="chosen.min.css" rel="stylesheet" />
|
|
<link href="style.css" rel="stylesheet" />
|
|
<link href="sky.base.css" rel="stylesheet" />
|
|
<link href="sky.controls.css" rel="stylesheet" />
|
|
<link href="sky.tables.css" rel="stylesheet" />
|
|
|
|
<script type="text/javascript" src="jquery.min.js"></script>
|
|
<script type="text/javascript" src="jquery-ui.min.js"></script>
|
|
<script type="text/javascript" src="chosen.jquery.min.js"></script>
|
|
<script type="text/javascript" src="sky.base.js"></script>
|
|
<script type="text/javascript" src="sky.controls.js"></script>
|
|
<script type="text/javascript" src="sky.types.js"></script>
|
|
<script type="text/javascript" src="sky.types.reference.js"></script>
|
|
<script type="text/javascript" src="sky.form.js"></script>
|
|
|
|
<script type="text/javascript" src="sky.tables.js"></script>
|
|
</head>
|
|
<body>
|
|
<script type="text/javascript">
|
|
|
|
var counter = 0;
|
|
|
|
</script>
|
|
<div id="body">
|
|
<div id="header">
|
|
<div class="skylogo">
|
|
<div style="background-color: #009ee3; color: white;">Sky</div><div style="background-color: white;">JS</div></div>
|
|
</div>
|
|
<div id="page">
|
|
<div id="content">
|
|
<h1>Types</h1>
|
|
<div id="Types"></div>
|
|
<button id="ValidButton">Check Validity</button>
|
|
|
|
<h1>Table Demo</h1>
|
|
<table id="tableDemo" style="width: 95%;"></table>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="footer">
|
|
<button onclick="SKY.refresh('test');">STOP</button>
|
|
<button onclick="counter = 0; SKY.refresh('test', 1000, function(){ $('#refreshCounter').text( counter++ ); });">1s</button>
|
|
<button onclick="counter = 0; SKY.refresh('test', 250, function(){ $('#refreshCounter').text( counter++ ); });">250ms</button>
|
|
<span id="refreshCounter"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
var personen = [
|
|
{
|
|
ID: "HWO",
|
|
Name: "Harald Wolff-Thobaben",
|
|
Beruf: "Entwickler",
|
|
Alter: 39
|
|
},
|
|
{
|
|
ID: "HWI",
|
|
Name: "Holger Witt",
|
|
Beruf: "fast Chemiker",
|
|
Alter: 38
|
|
},
|
|
{
|
|
ID: "ABC",
|
|
Name: "Max Mustermann",
|
|
Beruf: "Musterschüler",
|
|
Alter: 123
|
|
}
|
|
];
|
|
|
|
function lookupPersonen(q){
|
|
return $.grep( personen, function(item,index){
|
|
return !q || (item.ID.search(q)!=-1) || (item.Name.search(q)!=-1) || (item.Beruf.search(q)!=-1);
|
|
});
|
|
}
|
|
|
|
var dscPerson = {
|
|
fields: [
|
|
{ name: "Name", type: null, },
|
|
{ name: "Alter", type: "int", },
|
|
{ name: "Beruf", type: null, },
|
|
],
|
|
}
|
|
var typePerson = new SKY.prototypes.SKYReferencingType("person",{
|
|
referencedType: dscPerson,
|
|
lookup: function(p,response){
|
|
var matches = lookupPersonen(p);
|
|
response(matches);
|
|
},
|
|
render: function(v){ return `[${v.ID}] ${v.Name}`; }
|
|
});
|
|
|
|
var demoDescriptor = {
|
|
fields: [
|
|
{ name: "Name", type: null },
|
|
{ name: "Age", type: "int", label: "Alter" },
|
|
{ name: "Comment", type: null, label: "Anmerkungen" },
|
|
{ name: "IP", type: "ipv4" },
|
|
{ name: "Network", type: "network4" },
|
|
{ name: "TimeLeft", type: "timespan", label: "Übrige Zeit" },
|
|
{ name: "colleague", type: typePerson, label: "Kollege" }
|
|
]
|
|
}
|
|
|
|
var demoObjects = [
|
|
{
|
|
Name: "First Demo Item",
|
|
Age: 14,
|
|
Comment: "none",
|
|
IP: "1.2.3.4",
|
|
Network: "1.2.3.0/24",
|
|
TimeLeft: 86870,
|
|
colleague: null,
|
|
},
|
|
{
|
|
Name: "Second Demo Item",
|
|
Age: 45,
|
|
Comment: "none",
|
|
IP: "5.6.7.8",
|
|
Network: "1.2.3.0/24",
|
|
TimeLeft: 6324,
|
|
colleague: null,
|
|
},
|
|
{
|
|
Name: "Third Demo Item",
|
|
Age: 87,
|
|
Comment: "some",
|
|
IP: "3.4.5.6",
|
|
Network: "1.2.3.0/24",
|
|
TimeLeft: 324,
|
|
colleague: null,
|
|
},
|
|
];
|
|
|
|
var testForm = SKY
|
|
.form(demoDescriptor, demoObjects[0])
|
|
.appendTo( $("#Types") );
|
|
|
|
$("#ValidButton").on("click",()=> alert("Valid: " + testForm.valid() + "\nChanged: " + testForm.changed() + "\nChanges: " + JSON.stringify(testForm.changes())));
|
|
|
|
$("#tableDemo").skyTable( {
|
|
rows: demoObjects,
|
|
select: "multi",
|
|
columns: [
|
|
{ key: "Name", label: "Name", type: "string" },
|
|
{ key: "Age", label: "Alter", type: "int" },
|
|
{ key: "Comment", label: "Bemerkungen", type: "string" },
|
|
{ key: "IP", label: "IP", type: "IPv4" },
|
|
],
|
|
})
|
|
.on("dblclick", function(e){
|
|
alert("Editor may open for " + JSON.stringify(e.row));
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|