WIP
parent
a01c7e3f50
commit
1deed6f0c2
40
frame.html
40
frame.html
|
@ -11,6 +11,7 @@
|
||||||
<script type="text/javascript" src="jquery.min.js"></script>
|
<script type="text/javascript" src="jquery.min.js"></script>
|
||||||
<script type="text/javascript" src="sky.base.js"></script>
|
<script type="text/javascript" src="sky.base.js"></script>
|
||||||
<script type="text/javascript" src="sky.types.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.form.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript" src="sky.tables.js"></script>
|
<script type="text/javascript" src="sky.tables.js"></script>
|
||||||
|
@ -46,6 +47,33 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
var personen = [
|
||||||
|
{
|
||||||
|
ID: "HWO",
|
||||||
|
Name: "Harald",
|
||||||
|
Beruf: "Entwickler",
|
||||||
|
Alter: 39
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ID: "HWI",
|
||||||
|
Name: "Holger",
|
||||||
|
Beruf: "fast Chemiker",
|
||||||
|
Alter: 38
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
var dscPerson = {
|
||||||
|
fields: [
|
||||||
|
{ name: "Name", type: null, },
|
||||||
|
{ name: "Alter", type: "int", },
|
||||||
|
{ name: "Beruf", type: null, },
|
||||||
|
],
|
||||||
|
}
|
||||||
|
var typePerson = new SKY.prototypes.SKYReferencingType({
|
||||||
|
referencedType: dscPerson,
|
||||||
|
});
|
||||||
|
|
||||||
var demoDescriptor = {
|
var demoDescriptor = {
|
||||||
fields: [
|
fields: [
|
||||||
{ name: "Name", type: null },
|
{ name: "Name", type: null },
|
||||||
|
@ -54,6 +82,7 @@
|
||||||
{ name: "IP", type: "ipv4" },
|
{ name: "IP", type: "ipv4" },
|
||||||
{ name: "Network", type: "network4" },
|
{ name: "Network", type: "network4" },
|
||||||
{ name: "TimeLeft", type: "timespan", label: "Übrige Zeit" },
|
{ name: "TimeLeft", type: "timespan", label: "Übrige Zeit" },
|
||||||
|
{ name: "colleague", type: typePerson, label: "Kollege" }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -64,7 +93,8 @@
|
||||||
Comment: "none",
|
Comment: "none",
|
||||||
IP: "1.2.3.4",
|
IP: "1.2.3.4",
|
||||||
Network: "1.2.3.0/24",
|
Network: "1.2.3.0/24",
|
||||||
TimeLeft: 86870
|
TimeLeft: 86870,
|
||||||
|
colleague: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
Name: "Second Demo Item",
|
Name: "Second Demo Item",
|
||||||
|
@ -72,7 +102,8 @@
|
||||||
Comment: "none",
|
Comment: "none",
|
||||||
IP: "5.6.7.8",
|
IP: "5.6.7.8",
|
||||||
Network: "1.2.3.0/24",
|
Network: "1.2.3.0/24",
|
||||||
TimeLeft: 6324
|
TimeLeft: 6324,
|
||||||
|
colleague: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
Name: "Third Demo Item",
|
Name: "Third Demo Item",
|
||||||
|
@ -80,7 +111,8 @@
|
||||||
Comment: "some",
|
Comment: "some",
|
||||||
IP: "3.4.5.6",
|
IP: "3.4.5.6",
|
||||||
Network: "1.2.3.0/24",
|
Network: "1.2.3.0/24",
|
||||||
TimeLeft: 324
|
TimeLeft: 324,
|
||||||
|
colleague: null,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
@ -88,7 +120,7 @@
|
||||||
.form(demoDescriptor, demoObjects[0])
|
.form(demoDescriptor, demoObjects[0])
|
||||||
.appendTo( $("#Types") );
|
.appendTo( $("#Types") );
|
||||||
|
|
||||||
$("#ValidButton").on("click",()=> alert("Form Editors are valid: " + testForm.valid()));
|
$("#ValidButton").on("click",()=> alert("Valid: " + testForm.valid() + "\nChanged: " + testForm.changed() + "\nChanges: " + JSON.stringify(testForm.changes())));
|
||||||
|
|
||||||
$("#tableDemo").skyTable( {
|
$("#tableDemo").skyTable( {
|
||||||
rows: demoObjects,
|
rows: demoObjects,
|
||||||
|
|
16
sky.base.js
16
sky.base.js
|
@ -14,6 +14,19 @@
|
||||||
|
|
||||||
class SKYBase
|
class SKYBase
|
||||||
{
|
{
|
||||||
|
constructor(){
|
||||||
|
this._html = $();
|
||||||
|
}
|
||||||
|
|
||||||
|
html(html){
|
||||||
|
if (arguments.length)
|
||||||
|
{
|
||||||
|
this._html = html;
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
return this._html;
|
||||||
|
}
|
||||||
|
|
||||||
on( evName, h ){
|
on( evName, h ){
|
||||||
if (!self[evName])
|
if (!self[evName])
|
||||||
self[evName] = [];
|
self[evName] = [];
|
||||||
|
@ -116,6 +129,9 @@
|
||||||
case 0:
|
case 0:
|
||||||
return types;
|
return types;
|
||||||
case 1:
|
case 1:
|
||||||
|
if (defaultType.isPrototypeOf(name))
|
||||||
|
return name;
|
||||||
|
|
||||||
if ((name == null) || (!types[name]))
|
if ((name == null) || (!types[name]))
|
||||||
return defaultType;
|
return defaultType;
|
||||||
return types[name];
|
return types[name];
|
||||||
|
|
24
sky.form.js
24
sky.form.js
|
@ -24,6 +24,30 @@
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
this.changed = function(){
|
||||||
|
for (var name in this.editors){
|
||||||
|
var editor = this.editors[name];
|
||||||
|
|
||||||
|
if (editor.changed())
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
this.changes = function(){
|
||||||
|
if (this.changed()){
|
||||||
|
var changes = {}
|
||||||
|
for (var name in this.editors){
|
||||||
|
var editor = this.editors[name];
|
||||||
|
|
||||||
|
if (editor.changed())
|
||||||
|
{
|
||||||
|
changes[editor.id()] = editor.value();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return changes;
|
||||||
|
}
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
|
||||||
this.descriptor = descriptor;
|
this.descriptor = descriptor;
|
||||||
this.editors = {}
|
this.editors = {}
|
||||||
|
|
89
sky.types.js
89
sky.types.js
|
@ -1,29 +1,25 @@
|
||||||
(function(SKY){
|
(function(SKY){
|
||||||
|
|
||||||
class SKYEditor{
|
class SKYEditor extends SKY.prototypes.SKYBase {
|
||||||
constructor(placeholder,pattern){
|
constructor(placeholder,pattern){
|
||||||
|
super();
|
||||||
this.html($('<input type="text">'));
|
this.html($('<input type="text">'));
|
||||||
if (pattern)
|
if (pattern)
|
||||||
this._html.attr("pattern", pattern);
|
this.html().attr("pattern", pattern);
|
||||||
if (placeholder)
|
if (placeholder)
|
||||||
this._html.attr("placeholder", placeholder);
|
this.html().attr("placeholder", placeholder);
|
||||||
|
|
||||||
this._html.on("input", ()=>this.changed( this._html.data("value") != this._html.val() ) );
|
this.html().on("input", ()=>this.changed( this.html().data("value") != this.html().val() ) );
|
||||||
this._html.data("value", null);
|
this.html().data("value", null);
|
||||||
}
|
|
||||||
|
|
||||||
html(html){
|
|
||||||
if (arguments.length == 1)
|
|
||||||
{
|
|
||||||
this._html = $(html);
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
return this._html;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
id(id){
|
id(id){
|
||||||
this.html().attr("id", id);
|
if (arguments.length)
|
||||||
return this;
|
{
|
||||||
|
this.html().attr("id", id);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
return this.html().attr("id");
|
||||||
}
|
}
|
||||||
|
|
||||||
value(value){
|
value(value){
|
||||||
|
@ -55,15 +51,51 @@
|
||||||
}
|
}
|
||||||
SKY.prototypes.SKYEditor = SKYEditor;
|
SKY.prototypes.SKYEditor = SKYEditor;
|
||||||
|
|
||||||
|
class SKYSelector extends SKY.prototypes.SKYBase {
|
||||||
|
constructor(){
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
value(value){
|
||||||
|
if (arguments.length){
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
appendTo(parent){
|
||||||
|
this.html().appendTo(parent);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
enable(en){
|
||||||
|
if (arguments.length)
|
||||||
|
{
|
||||||
|
this.enabled = en;
|
||||||
|
if (en)
|
||||||
|
this.html().removeAttr("disabled");
|
||||||
|
else
|
||||||
|
this.html().attr("disabled", "");
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
return this.enabled;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
SKY.prototypes.SKYSelector = SKYSelector;
|
||||||
|
|
||||||
|
|
||||||
class SKYIntEditor extends SKYEditor {
|
class SKYIntEditor extends SKYEditor {
|
||||||
constructor(){
|
constructor(){
|
||||||
super();
|
super();
|
||||||
this._html.attr("type","number");
|
this._html.attr("type","number");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
class SKYTimeSpanEditor extends SKYEditor {
|
class SKYTimeSpanEditor extends SKYEditor {
|
||||||
constructor(){
|
constructor(){
|
||||||
super("0d 00:00:00","^([0-9]{1,}d){0,1} {1,}[0-9]{1,2}:[0-9]{1,2}:[0-9]{1,2}$");
|
super("0d 00:00:00","^([0-9]{1,}d){0,1} {0,}([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})$");
|
||||||
}
|
}
|
||||||
|
|
||||||
value(value){
|
value(value){
|
||||||
|
@ -73,8 +105,8 @@
|
||||||
.val(SKY.type("timespan").render(value))
|
.val(SKY.type("timespan").render(value))
|
||||||
.data("value", value);
|
.data("value", value);
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
return this._html.val();
|
return SKY.type("timespan").parse(this._html.val());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -88,11 +120,20 @@
|
||||||
editor(){
|
editor(){
|
||||||
return new SKYEditor();
|
return new SKYEditor();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
selector(){
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
render(value){
|
render(value){
|
||||||
return value;
|
return value;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
parse(value){
|
||||||
|
return value;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
SKY.prototypes.SKYType = SKYType;
|
||||||
|
|
||||||
class SKYIntType extends SKYType
|
class SKYIntType extends SKYType
|
||||||
{
|
{
|
||||||
|
@ -159,7 +200,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
parse(t){
|
parse(t){
|
||||||
|
var tokens = t.match("^([0-9]{1,}d){0,1} {0,}([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})$");
|
||||||
|
var days,hours,minutes,seconds;
|
||||||
|
days = tokens[1] ? tokens[1].substr(0,tokens[1].length-1) : 0;
|
||||||
|
hours = tokens[2] || 0;
|
||||||
|
minutes = tokens[3] || 0;
|
||||||
|
seconds = tokens[4] || 0;
|
||||||
|
return parseInt(days * 86400) + parseInt(hours * 3600) + parseInt(minutes * 60) + parseInt(seconds);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,62 @@
|
||||||
|
(function(SKY){
|
||||||
|
|
||||||
|
var referenceSelectorDefaultOptions = {
|
||||||
|
id: null,
|
||||||
|
referencedType: null,
|
||||||
|
}
|
||||||
|
|
||||||
|
var referenceDefaultOptions = {
|
||||||
|
url: null,
|
||||||
|
|
||||||
|
referencedType: null,
|
||||||
|
|
||||||
|
lookup: function(pattern){ return []; },
|
||||||
|
render: function(o){ return o; },
|
||||||
|
parse: function(src){ return src; },
|
||||||
|
id: function(o){ return o; },
|
||||||
|
}
|
||||||
|
|
||||||
|
class SKYReferenceSelector extends SKY.prototypes.SKYSelector {
|
||||||
|
constructor(options){
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.options = Object.assign({}, referenceSelectorDefaultOptions);
|
||||||
|
Object.assign(this.options,options);
|
||||||
|
|
||||||
|
var html = $('<input type="text">');
|
||||||
|
html
|
||||||
|
.attr(id,this.options.id);
|
||||||
|
|
||||||
|
this.html( html );
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
SKY.prototypes.SKYReferenceSelector = SKYReferenceSelector;
|
||||||
|
|
||||||
|
class SKYReferencingType extends SKY.prototypes.SKYType {
|
||||||
|
|
||||||
|
constructor(name,options){
|
||||||
|
super(name);
|
||||||
|
|
||||||
|
this.options = Object.assign({}, referenceDefaultOptions);
|
||||||
|
Object.assign(this.options, options);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
editor(){
|
||||||
|
return new SKY.prototypes.SKYEditor();
|
||||||
|
}
|
||||||
|
|
||||||
|
selector(){
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
render(value){ return this.options.render(value); }
|
||||||
|
parse(src){ return this.options.parse(src); }
|
||||||
|
lookup(pattern){ return this.options.lookup(pattern); }
|
||||||
|
}
|
||||||
|
|
||||||
|
SKY.prototypes.SKYReferencingType = SKYReferencingType;
|
||||||
|
}(SKY));
|
Loading…
Reference in New Issue