master
Harald Wolff 2019-04-26 08:15:12 +02:00
parent 50cf1ee2b9
commit 632112ba87
6 changed files with 179 additions and 11 deletions

View File

@ -30,7 +30,7 @@ namespace skyspot.http
DirectoryResource templates = new DirectoryResource(TemplatePath);
templates.ResourceTypeHook = ResourceTypeHook;
templates.DefaultResource = templates.GetResource("index.html");
RootResource = templates;
}

View File

@ -187,6 +187,12 @@
<None Include="www\js\chosen.jquery.min.js" />
<None Include="www\css\chosen.min.css" />
<None Include="www\js\jquery.input-ip-address-control-1.0.min.js" />
<None Include="www\js\sky.form.js">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</None>
<None Include="www\js\sky.controls.js">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</None>
</ItemGroup>
<Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
</Project>

View File

@ -25,6 +25,8 @@
<link href="/css/style.css" rel="stylesheet" />
<script type="text/javascript" src="/js/sky.base.js"></script>
<script type="text/javascript" src="/js/sky.controls.js"></script>
<script type="text/javascript" src="/js/sky.form.js"></script>
<script type="text/javascript" src="/js/sky.dhcp.js"></script>
</head>
<body>

View File

@ -0,0 +1,50 @@

(function($){
$.extend($, { sky: {} } );
$.extend($.sky, { controls: {} });
function IPPool_create(){
}
$.fn.IPPool = function( opts ){
alert(this);
var select = this.find("select")[0];
if (!select)
throw "IPPool needs an <select> element to be instantiated on";
alert(select);
}
me = function(opts){
return this.filter("select").map( function(){
var ctrl = this;
var pools = skyapi().getJson("/DHCP/collections/IPPool");
pools.forEach( function(e){
$("<option></option>")
.attr("value", e.Name)
.text( e.Name )
.appendTo( ctrl );
} );
ctrl.val = function(v){ alert(v); }
return ctrl;
});
}
$.sky.controls.IPPool = function(type,key){
return $("<select></select>").IPPool().attr( "id", key );
};
}( jQuery ));

View File

@ -47,7 +47,21 @@ function editIPPool(ippool, editable)
}
function editDHCPServerInterface(intf, editable)
function editDHCPServerInterface(intf, editable){
skyapi().getJson( "/DHCP/collections/DHCPServerInterface/" + intf, function(intf){
$.skyForm( intf, {
title: "DHCP Server Interface",
fields: [
{ key: "Name", label: "Bezeichnung", },
{ key: "InterfaceAddress", label: "Interface IP", },
{ key: "IPPool", label: "IP Pool", type: "IPPool" },
]
} );
} );
}
function __editDHCPServerInterface(intf, editable)
{
var content = $(`<div>
<fieldset>
@ -68,15 +82,6 @@ function editDHCPServerInterface(intf, editable)
.appendTo( $("#Pool", content) );
} );
skyapi().getJson( "/DHCP/collections/DHCPServerInterface/" + intf, function(intf){
PopulateForm( intf, {
top: content,
properties: {
"Pool": { transform: function(d){ return d.Name; }, },
}
} );
content.dialog( "open" );
} );
content.dialog({
modal: true,

105
www/js/sky.form.js 100644
View File

@ -0,0 +1,105 @@

(function($){
function log(o){
console.log(o);
return o;
}
var defaultOptions = {
fields: [ // Object Fields to show in Dialog
/* {
key: "", // Key of the property
label: "", // Label Text
type: "text", // Editor to use
toEditor: function(v){ return v; } // converter function to convert field value to editor value
fromEditor: function(c){ return v; }// converter function to convert editor value to field value
},
*/
],
id: null, // Name of field to use as unique identifier for ajax requests to collection,
// alternatively: function(o){ return id; } Method to retrieve ID from object
readonly: false, // default readonly flag
ajax: {
url: null, // ajax collection URLSchnuff17
},
};
var defaultDialogOptions = {
modal: true,
closeOnEscape: true,
draggable: false,
title: "skyForm",
minWidth: 600,
autoOpen: false,
buttons: [
{
text: "abbrechen",
click: function(){ $(this).dialog( "close" ); },
},
{
text: "OK",
click: function(){ $(this).dialog( "close" ); },
},
]
};
function populateForm( o, options = {} )
{
var opt = Object.assign( {
top: null,
transform: function(v){ return v; },
properties: {},
}, options );
for (const key in o)
{
var po = Object.assign( {
transform: opt.transform,
}, opt.properties[key]);
var i = $("#" + key, opt.top);
if (i.length)
i.val( po.transform(o[key]) );
}
}
function createControl(type, key)
{
if ($.sky.controls[type])
{
return $.sky.controls[type](type, key);
}
switch (type)
{
default:
return $(`<input id="${key}">`);
}
}
$.skyForm = function(o, options = {} ){
var opts = Object.assign(defaultOptions, options);
var fieldSet = $("<fieldset></fieldset>");
var fields = (opts.fields.length) ? opts.fields : log(Object.keys(o)).map( function(k){ return { key: k, label: k }; } );
fields.forEach( function(field){
fieldSet.append($(`<label for="${field.key}">${field.label}</label>`))
fieldSet.append(
createControl( field.type, field.key ).val( o[field.key] )
);
});
var dlgOptions = Object.assign( {}, defaultDialogOptions );
dlgOptions.title = opts.title;
fieldSet.dialog( dlgOptions );
fieldSet.dialog( "open" );
}
}( jQuery ));