From 1deed6f0c2b4e9144613afa9053347ce85244ecd Mon Sep 17 00:00:00 2001
From: Harald Wolff <haraldwolff@skyoffice>
Date: Mon, 20 May 2019 12:39:22 +0200
Subject: [PATCH] WIP

---
 frame.html             | 40 +++++++++++++++++--
 sky.base.js            | 16 ++++++++
 sky.form.js            | 24 ++++++++++++
 sky.types.js           | 89 ++++++++++++++++++++++++++++++++----------
 sky.types.reference.js | 62 +++++++++++++++++++++++++++++
 5 files changed, 206 insertions(+), 25 deletions(-)
 create mode 100644 sky.types.reference.js

diff --git a/frame.html b/frame.html
index f2f0db4..2e0bb44 100644
--- a/frame.html
+++ b/frame.html
@@ -11,6 +11,7 @@
     <script type="text/javascript" src="jquery.min.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.reference.js"></script>
     <script type="text/javascript" src="sky.form.js"></script>
 
     <script type="text/javascript" src="sky.tables.js"></script>
@@ -46,6 +47,33 @@
     </div>
     
 <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 = {
         fields: [
             { name: "Name", type: null },
@@ -54,6 +82,7 @@
             { name: "IP", type: "ipv4" },
             { name: "Network", type: "network4" },
             { name: "TimeLeft", type: "timespan", label: "Übrige Zeit" },
+            { name: "colleague", type: typePerson, label: "Kollege" }
         ]
     }
 
@@ -64,7 +93,8 @@
             Comment: "none",
             IP: "1.2.3.4",
             Network: "1.2.3.0/24",
-            TimeLeft: 86870
+            TimeLeft: 86870,
+            colleague: null,
         },
         {
             Name: "Second Demo Item",
@@ -72,7 +102,8 @@
             Comment: "none",
             IP: "5.6.7.8",
             Network: "1.2.3.0/24",
-            TimeLeft: 6324
+            TimeLeft: 6324,
+            colleague: null,
         },
         {
             Name: "Third Demo Item",
@@ -80,7 +111,8 @@
             Comment: "some",
             IP: "3.4.5.6",
             Network: "1.2.3.0/24",
-            TimeLeft: 324
+            TimeLeft: 324,
+            colleague: null,
         },
     ];
 
@@ -88,7 +120,7 @@
         .form(demoDescriptor, demoObjects[0])
         .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( {
         rows: demoObjects,
diff --git a/sky.base.js b/sky.base.js
index b2e454e..f450d9e 100644
--- a/sky.base.js
+++ b/sky.base.js
@@ -14,6 +14,19 @@
 
         class SKYBase
         {
+            constructor(){
+                this._html = $();
+            }
+
+            html(html){
+                if (arguments.length)
+                {
+                    this._html = html;
+                    return this;
+                }
+                return this._html;
+            }
+
             on( evName, h ){
                 if (!self[evName])
                     self[evName] = [];
@@ -116,6 +129,9 @@
                     case 0:
                         return types;
                     case 1:
+                        if (defaultType.isPrototypeOf(name))
+                            return name;
+                            
                         if ((name == null) || (!types[name]))
                             return defaultType;
                         return types[name];
diff --git a/sky.form.js b/sky.form.js
index 898b770..2b6cdd1 100644
--- a/sky.form.js
+++ b/sky.form.js
@@ -24,6 +24,30 @@
 				}
 				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.editors = {}
diff --git a/sky.types.js b/sky.types.js
index e24fce6..b20257f 100644
--- a/sky.types.js
+++ b/sky.types.js
@@ -1,29 +1,25 @@
 (function(SKY){
 
-	class SKYEditor{
+	class SKYEditor extends SKY.prototypes.SKYBase {
 		constructor(placeholder,pattern){
+            super();
             this.html($('<input type="text">'));
             if (pattern)
-                this._html.attr("pattern", pattern);
+                this.html().attr("pattern", pattern);
             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.data("value", null);
-		}
-
-		html(html){
-			if (arguments.length == 1)
-			{
-				this._html = $(html);
-				return this;
-			}
-			return this._html;
+            this.html().on("input", ()=>this.changed( this.html().data("value") != this.html().val() ) );
+            this.html().data("value", null);
 		}
 
         id(id){
-            this.html().attr("id", id);
-            return this;
+            if (arguments.length)
+            {
+                this.html().attr("id", id);
+                return this;
+            }
+            return this.html().attr("id");
         }
 
 		value(value){
@@ -55,15 +51,51 @@
     }
     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 {
 		constructor(){
             super();
-            this._html.attr("type","number");    
+            this._html.attr("type","number");
 		}
     }
     class SKYTimeSpanEditor extends SKYEditor {
 		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){
@@ -73,8 +105,8 @@
                 .val(SKY.type("timespan").render(value))
                 .data("value", value);
                 return this;
-			}
-			return this._html.val();
+            }
+			return SKY.type("timespan").parse(this._html.val());
 		}
         
 
@@ -88,11 +120,20 @@
 		editor(){
 			return new SKYEditor();
         }
+
+        selector(){
+            return null;
+        }
         
         render(value){
             return value;
         }
+
+        parse(value){
+            return value;
+        }
     }
+    SKY.prototypes.SKYType = SKYType;
     
     class SKYIntType extends SKYType
     {
@@ -159,7 +200,13 @@
         }
 
         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);
         }
 
     }
diff --git a/sky.types.reference.js b/sky.types.reference.js
new file mode 100644
index 0000000..3e3648a
--- /dev/null
+++ b/sky.types.reference.js
@@ -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));