[DONT MERGE] - bl-102 -> develop

src/Dom/WebFormComponents.ts

@@ -1,48 +1,47 @@
 type control =
     'businesslogic' |
-    'text'          |
-    'number'        |
-    'integer'       |
-    'text-data'     | // Input with datalist
-    'textarea'      |
-    'select'        |
-    'checkbox'      |
-    'radio'         |
-    'range'         |
-    'password'      |
-    'email'         |
-    'tel'           |
-    'time'          |
-    'date'          |
-    'month'         |
-    'week'          |
-    'submit'        |
-    'submit-reset'  |
-    'output'        |
-    'output-array'  |
-    'output-meter'  |
+    'text' |
+    'number' |
+    'integer' |
+    'text-data' | // Input with datalist
+    'textarea' |
+    'select' |
+    'checkbox' |
+    'radio' |
+    'range' |
+    'password' |
+    'email' |
+    'tel' |
+    'time' |
+    'date' |
+    'month' |
+    'week' |
+    'submit' |
+    'submit-reset' |
+    'output' |
+    'output-array' |
+    'output-meter' |
     'output-progress'
 
 export class WebFormComponents {
-
     private webformComponents: string;
-    private groupName:string;
+    private groupName: string;
 
-    constructor(groupName?:string) {
+    constructor(groupName?: string) {
         this.webformComponents = '';
         this.groupName = groupName ? groupName : '';
     }
 
-    public compileWebformComponents():Element {
-        if(this.groupName !== '')this.webformComponents = this.groupComponents(this.webformComponents ,this.groupName);
-        return new DOMParser().parseFromString(this.webformComponents,'text/html').body.children[0];
+    public compileWebformComponents(): Element {
+        if (this.groupName !== '') this.webformComponents = this.groupComponents(this.webformComponents, this.groupName);
+        return new DOMParser().parseFromString(this.webformComponents, 'text/html').body.children[0];
     }
 
-    public getWebformComponents():string {
+    public getWebformComponents(): string {
         return this.webformComponents;
     }
 
-    public attachComponent(control:control, param?:string, options?:any): void {
+    public attachComponent(control: control, param?: string, options?: any): void {
         let component;
         let submit;
         let reset;
@@ -256,12 +255,12 @@ export class WebFormComponents {
     */
 
         // Wrap inside the group
-        if(this.groupName !== '') component = this.groupComponents(component,'form-group');
+        if (this.groupName !== '') component = this.groupComponents(component, 'form-group');
 
         this.webformComponents += component;
     }
 
-    public groupComponents(component:string,groupClass:string):string{
-        return  `<div class='${groupClass}'>${component}</div>`;
+    public groupComponents(component: string, groupClass: string): string {
+        return `<div class='${groupClass}'>${component}</div>`;
     }
 }

src/Helpers/HelperFunctions.ts

@@ -1,3 +1,6 @@
+import { WebForm } from "../interfaces";
+
+
 export function isEmpty(obj:any) {
     for(let key in obj) {
         if(obj.hasOwnProperty(key))
@@ -18,4 +21,81 @@ export function isConstructor(f:any) {
 
 export function isUndefined(obj:any) {
     return obj === undefined;
-}
+}
+
+export function log(message: any, isDebug = false): void {
+    if (isDebug) console.log(message);
+}
+
+export function mapWebForm(formItem: any): WebForm {
+    let name = formItem.getAttribute('bl-name');
+    let key = formItem.getAttribute('bl-token');
+    let inputs = formItem.querySelectorAll('[bl-input]');
+    let controls = formItem.querySelectorAll('[bl-control]');
+    let outputs = formItem.querySelectorAll('[bl-output]');
+    let param: string, type: string, tagName: string;
+    let el: Element;
+    let lbl_el: Element, desc_el: Element, err_el: Element;
+
+
+    let wf: WebForm = {
+        name: name,
+        inputs: {},
+        controls: {},
+        outputs: {}
+    };
+
+    if (formItem instanceof HTMLFormElement) {
+        wf.form_el = formItem;
+    }
+
+    // Handling inputs
+    for(let i = 0; i < inputs.length; i++) {
+        param = inputs[i].getAttribute('bl-input');
+        type = inputs[i].getAttribute('type');
+        tagName = inputs[i].tagName;
+        el = inputs[i];
+        lbl_el = formItem.querySelector('[bl-input-label=' + param + ']');
+        desc_el = formItem.querySelector('[bl-input-description=' + param + ']');
+        err_el = formItem.querySelector('[bl-input-error=' + param + ']');
+        wf.inputs[param] = {'label_el': lbl_el, 'desc_el': desc_el, 'input_el': el, 'err_el': err_el};
+    }
+    // Handling controls
+    for(let i = 0; i < controls.length; i++) {
+        param = controls[i].getAttribute('bl-control');
+        type = controls[i].getAttribute('type');
+        tagName = controls[i].tagName;
+        el = controls[i];
+        wf.controls[param] = {'control_el': el};
+    }
+    // Handling outputs
+    for(let i = 0; i < outputs.length; i++) {
+        param = outputs[i].getAttribute('bl-output');
+        type = outputs[i].getAttribute('type');
+        tagName = outputs[i].tagName;
+        el = outputs[i];
+        lbl_el = formItem.querySelector('[bl-output-label=' + param + ']');
+        desc_el = formItem.querySelector('[bl-output-description=' + param + ']');
+        wf.outputs[param] = {'label_el': lbl_el, 'desc_el': desc_el, 'output_el': el};
+    }
+
+    return wf;
+}
+
+//TODO refactor library, replace string component by html components
+export function setRangeListeners(formInputs) {
+    const rangeGroup = formInputs.querySelectorAll('.range-group');
+
+    rangeGroup.forEach((rangeGroup) => {
+        const rangeInput = rangeGroup.querySelector('input[type="range"]');
+
+        rangeInput.addEventListener('input', (event) => {
+            let target = event.target
+            const min = target['min'];
+            const max = target['max'];
+            const val = target['value'];
+
+            target['style'].backgroundSize = (val - min) * 100 / (max - min) + '% 100%'
+        });
+    });
+}

src/Validation/WebFormValidation.ts

@@ -1,5 +1,5 @@
-import { WebForm, WebFormErrors } from '../WebForm';
 import * as helpers from '../Helpers/HelperFunctions';
+import { WebForm, WebFormErrors } from "../interfaces";
 
 
 export interface validationMessages {
@@ -17,23 +17,22 @@ export interface validationMessages {
 }
 
 export class WebFormValidation {
-
-    private errors:WebFormErrors;
-    private defaultMessages:validationMessages;
-    private formElement:HTMLFormElement;
-    private webform:WebForm;
+    private errors: WebFormErrors;
+    private defaultMessages: validationMessages;
+    private formElement: HTMLFormElement;
+    private webform: WebForm;
     private customErrorMessages: boolean;
 
-    constructor(language:string = '', webform?:WebForm) {
+    constructor(language: string = '', webform?: WebForm) {
         this.formElement = new HTMLFormElement();
         this.webform = webform;
     }
 
-    private validate():Boolean {
-        let valid:boolean = true;
+    private validate(): Boolean {
+        let valid: boolean = true;
         this.errors = {};
 
-        if(this.formElement) {
+        if (this.formElement) {
             // Use native form validation
             this.formElement.customMessages = true;
             valid = this.formElement.checkValidity(); // Returns true if the element's value has no validity problems; false otherwise. Fires an invalid event at the element in the latter case.
@@ -46,48 +45,47 @@ export class WebFormValidation {
                 let willValidate = input.willValidate; // Returns true if the element will be validated when the form is submitted; false otherwise.
                 let custom = false;
                 let message = '';
-                if(!this.customErrorMessages) {
+                if (!this.customErrorMessages) {
                     message = input.validationMessage; // Returns the error message that would be shown to the user if the element was to be checked for validity.
-                } else if(input.validity.valueMissing) {
+                } else if (input.validity.valueMissing) {
 
-                } else if(input.validity.typeMismatch) {
+                } else if (input.validity.typeMismatch) {
 
-                } else if(input.validity.typeMismatch) {
+                } else if (input.validity.typeMismatch) {
 
-                } else if(input.validity.patternMismatch) {
+                } else if (input.validity.patternMismatch) {
 
-                } else if(input.validity.tooLong) {
+                } else if (input.validity.tooLong) {
 
-                } else if(input.validity.tooShort) {
+                } else if (input.validity.tooShort) {
 
-                } else if(input.validity.rangeUnderflow) {
+                } else if (input.validity.rangeUnderflow) {
 
-                } else if(input.validity.rangeOverflow) {
+                } else if (input.validity.rangeOverflow) {
 
-                } else if(input.validity.stepMismatch) {
+                } else if (input.validity.stepMismatch) {
 
-                } else if(input.validity.badInput) {
+                } else if (input.validity.badInput) {
 
-                } else if(input.validity.customError) {
+                } else if (input.validity.customError) {
 
-                } else if(input.validity.valid) {
+                } else if (input.validity.valid) {
 
                 } else {
                     //this.updateErrorMessage(el,'');
                 }
-                if(custom)input.setCustomValidity(message); // Sets a custom error, so that the element would fail to validate. The given message is the message to be shown to the user when reporting the problem to the user.
+                if (custom) input.setCustomValidity(message); // Sets a custom error, so that the element would fail to validate. The given message is the message to be shown to the user when reporting the problem to the user.
                 this.errors[el] = message;
                 // this.updateErrorMessage(el,message);
             }
 
 
-
-            if(!helpers.isEmpty(this.errors)) {
+            if (!helpers.isEmpty(this.errors)) {
                 valid = false
             }
         }
 
-        if(!valid) {
+        if (!valid) {
             /*
             this.ValidationFailedListener.emit({
                 errors: this.errors
@@ -98,7 +96,7 @@ export class WebFormValidation {
         return valid;
     }
 
-    private setErrorMessages(value:string) {
+    private setErrorMessages(value: string) {
         this.defaultMessages = {
             valueMissing: `${value} is required `, // Returns true if the element has no value but is a required field; false otherwise.
             typeMismatch: `Some text here ${value}`, // Returns true if the element's value is not in the correct syntax; false otherwise.
@@ -113,4 +111,4 @@ export class WebFormValidation {
             valid: `Some text here ${value}` // Returns true if the element's value has no validity problems; false otherwise.
         }
     }
-}
+}

src/classes/service-container.ts

@@ -0,0 +1,26 @@
+// Create dictonary for keeping track of all webservice instances
+import { JSDict } from "../Helpers/TypedDictionary";
+import { Webservice } from "./web-service";
+
+
+export class ServiceContainer {
+    private dict: any;
+
+    constructor() {
+        this.dict = JSDict.Create<string, Webservice>();
+    }
+
+    public add(apiKey: string, webservice: Webservice): void {
+        if (!this.dict[apiKey]) {
+            this.dict[apiKey] = webservice;
+        } else {
+            console.warn('Webservice with apiKey: ' + apiKey + ' was allready added to Businesslogic.Webservices');
+        }
+    }
+
+    // TODO: Make this functions as a promise so you can be sure it is initialised
+    // Remember to have a timeout resolve 30secs
+    public get(apiKey: string): Webservice {
+        return this.dict[apiKey];
+    }
+}