Merge branch 'master' of https://hmg.git.cloudforge.com/mohemmionic5
commit
ceb4968a69
@ -0,0 +1,23 @@
|
|||||||
|
import { UiElement } from "./ui-element";
|
||||||
|
|
||||||
|
export class ButtonInput extends UiElement {
|
||||||
|
constructor(
|
||||||
|
//private label: string,
|
||||||
|
private elementId: string,
|
||||||
|
private value: any,
|
||||||
|
private containerId: string,
|
||||||
|
private disabled: string) {
|
||||||
|
super(elementId, containerId, '');
|
||||||
|
this.createElement(this.getTemplate());
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
public getTemplate() {
|
||||||
|
if (this.disabled == "N") { this.disabled = "disabled" } else { this.disabled = "" }
|
||||||
|
const template =
|
||||||
|
"<div class='custom-button-element'>" +
|
||||||
|
"<ion-button color='customnavy' expand='block' id='" + this.elementId + "' value='" + this.value + "' " + this.disabled + " style='border-radius: 3px; padding: 0 1.1em; min-height: 45px;'>Submit</ion-button>" +
|
||||||
|
"</div> ";
|
||||||
|
return template;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
import { UiElement } from "./ui-element";
|
||||||
|
|
||||||
|
export class DateTimeInput extends UiElement {
|
||||||
|
constructor(
|
||||||
|
private label: string,
|
||||||
|
private elementId: string,
|
||||||
|
private value: any,
|
||||||
|
private containerId: string,
|
||||||
|
private disabled: string,
|
||||||
|
private hidden: string,
|
||||||
|
private required: string) {
|
||||||
|
super(elementId, containerId, '');
|
||||||
|
this.createElement(this.getTemplate());
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
formatDate() {
|
||||||
|
let date = new Date();
|
||||||
|
this.value = date.toISOString().slice(0, 10) + "T" + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
|
||||||
|
}
|
||||||
|
public getTemplate() {
|
||||||
|
let requiredClass: string = "";
|
||||||
|
let disaledClass = "";
|
||||||
|
//let timeValue=null;
|
||||||
|
//let dateValue=null;
|
||||||
|
if (this.disabled == "N") { this.disabled = "disabled"; disaledClass = "disabled" } else { this.disabled = ""; disaledClass = "" }
|
||||||
|
if (this.hidden == "N") { this.hidden = "display:none;" } else { this.hidden = "" }
|
||||||
|
if (this.value == "currentDateTime") {
|
||||||
|
this.formatDate();
|
||||||
|
}
|
||||||
|
if (this.required == 'Y')
|
||||||
|
requiredClass = "requiredClass"
|
||||||
|
// let arrayDate=val.split(" ");
|
||||||
|
// elem.value = this.common.reverseFormatDate(arrayDate[0]);
|
||||||
|
// elem.setAttribute('value', elem.value);
|
||||||
|
// const timeInput = document.getElementById(this.validateEitObj[i].APPLICATION_COLUMN_NAME+"Time") as HTMLInputElement;
|
||||||
|
// timeInput.value = arrayDate[1];
|
||||||
|
// timeInput.setAttribute('value', timeInput.value);
|
||||||
|
// if(this.value){
|
||||||
|
// let arrayDate=this.value.split(" ");
|
||||||
|
// dateValue=arrayDate[0];
|
||||||
|
// timeValue=arrayDate[1];
|
||||||
|
// }
|
||||||
|
const template =
|
||||||
|
"<ion-item>" +
|
||||||
|
" <ion-label class='daynamicForm-Label " + requiredClass + "' id='title' >" + this.label + "</ion-label>" +
|
||||||
|
// " <div class='daynamicForm-DateTime " + disaledClass + "' id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + ">" + this.value + "</div>" +
|
||||||
|
"<ion-datetime displayFormat='DD/MM/YYYY' value=" + this.value + " id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + "></ion-datetime>" +
|
||||||
|
// " <input class='daynamicForm-DateTime' type='text' id='" + this.elementId + "' value='" + this.value + "' "+this.disabled+" (click)='showDateTimePicker()'/>"+
|
||||||
|
// " <input class='daynamicForm-DateTime' type='date' id='" + this.elementId + "' value='" + dateValue+ "' "+this.disabled+" />"+
|
||||||
|
// " <input class='daynamicForm-DateTime' type='time' id='" + this.elementId + "Time' value='" + timeValue + "' "+this.disabled+" />"+
|
||||||
|
"</ion-item>"
|
||||||
|
return template;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
import { UiElement } from "./ui-element";
|
||||||
|
|
||||||
|
export class DateInput extends UiElement {
|
||||||
|
private currentDate: any = ""
|
||||||
|
constructor(
|
||||||
|
private label: string,
|
||||||
|
private elementId: string,
|
||||||
|
private value: any,
|
||||||
|
private containerId: string,
|
||||||
|
private disabled: string,
|
||||||
|
private hidden: string,
|
||||||
|
private required: string) {
|
||||||
|
super(elementId, containerId, '');
|
||||||
|
this.createElement(this.getTemplate());
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
formatDate() {
|
||||||
|
let date = new Date();
|
||||||
|
this.value = date.toISOString().slice(0, 10);
|
||||||
|
}
|
||||||
|
public getTemplate() {
|
||||||
|
let requiredClass: string = "";
|
||||||
|
if (this.disabled == "N") { this.disabled = "disabled" } else { this.disabled = "" }
|
||||||
|
if (this.hidden == "N") { this.hidden = "display:none;" } else { this.hidden = "" }
|
||||||
|
if (this.value == "currentDate") {
|
||||||
|
this.formatDate();
|
||||||
|
} else {
|
||||||
|
if (this.value) {
|
||||||
|
this.value = new Date(this.value).toISOString().slice(0, 10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.required == 'Y')
|
||||||
|
requiredClass = "requiredClass"
|
||||||
|
const template =
|
||||||
|
// "<div class='custom-text-area-element' style='"+this.hidden+"'>" +
|
||||||
|
// " <label class='daynamicForm-Label "+requiredClass+"' id='title' >" + this.label + "</label>" +
|
||||||
|
// " <input class='daynamicForm-DateTime' type='date' id='" + this.elementId + "' value='" + this.value + "' "+this.disabled+" />"+
|
||||||
|
// "</div> ";
|
||||||
|
|
||||||
|
"<ion-item>" +
|
||||||
|
" <ion-label class='daynamicForm-Label " + requiredClass + "' id='title' >" + this.label + "</ion-label>" +
|
||||||
|
// " <div class='daynamicForm-DateTime " + disaledClass + "' id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + ">" + this.value + "</div>" +
|
||||||
|
"<ion-datetime displayFormat='DD/MM/YYYY' value=" + this.value + " id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + "></ion-datetime>" +
|
||||||
|
// " <input class='daynamicForm-DateTime' type='text' id='" + this.elementId + "' value='" + this.value + "' "+this.disabled+" (click)='showDateTimePicker()'/>"+
|
||||||
|
// " <input class='daynamicForm-DateTime' type='date' id='" + this.elementId + "' value='" + dateValue+ "' "+this.disabled+" />"+
|
||||||
|
// " <input class='daynamicForm-DateTime' type='time' id='" + this.elementId + "Time' value='" + timeValue + "' "+this.disabled+" />"+
|
||||||
|
"</ion-item>"
|
||||||
|
|
||||||
|
return template;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import { UiElement } from "./ui-element";
|
||||||
|
|
||||||
|
export class HiddenInput extends UiElement {
|
||||||
|
private currentDate: any = ""
|
||||||
|
constructor(
|
||||||
|
private label: string,
|
||||||
|
private elementId: string,
|
||||||
|
private value: any,
|
||||||
|
private containerId: string) {
|
||||||
|
super(elementId, containerId, '');
|
||||||
|
this.createElement(this.getTemplate());
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
public getTemplate() {
|
||||||
|
const template =
|
||||||
|
// "<div class='custom-text-area-element' >" +
|
||||||
|
// " <input class='daynamicForm-Input' type='hidden' data-colm-text='"+this.label+"' id='" + this.elementId + "' value='" + this.value + "' />"+
|
||||||
|
// "</div> ";
|
||||||
|
|
||||||
|
"<ion-item style='display: none;'>" +
|
||||||
|
"<ion-input type='Text' data-colm-text='" + this.label + "' id='" + this.elementId + "' value='" + this.value + "'></ion-input>" +
|
||||||
|
"</ion-item> ";
|
||||||
|
|
||||||
|
return template;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
import { UiElement } from "./ui-element";
|
||||||
|
|
||||||
|
export class NumberInput extends UiElement {
|
||||||
|
constructor(
|
||||||
|
private label: string,
|
||||||
|
private elementId: string,
|
||||||
|
private value: any,
|
||||||
|
private containerId: string,
|
||||||
|
private disabled: string,
|
||||||
|
private hidden: string,
|
||||||
|
private required: string) {
|
||||||
|
super(elementId, containerId, '');
|
||||||
|
this.createElement(this.getTemplate());
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
public getTemplate() {
|
||||||
|
let requiredClass: string = "";
|
||||||
|
if (this.required == 'Y')
|
||||||
|
requiredClass = "requiredClass"
|
||||||
|
if (this.disabled == "N") { this.disabled = "disabled" } else { this.disabled = "" }
|
||||||
|
if (this.hidden == "N") { this.hidden = "display:none;" } else { this.hidden = "" }
|
||||||
|
const template =
|
||||||
|
// "<div class='custom-text-area-element' style='" + this.hidden + "'>" +
|
||||||
|
// " <label class='daynamicForm-Label " + requiredClass + "' id='title' >" + this.label + "</label>" +
|
||||||
|
// " <input class='daynamicForm-Input' type='number' id='" + this.elementId + "' value='" + this.value + "' " + this.disabled + " />" +
|
||||||
|
// "</div> ";
|
||||||
|
|
||||||
|
"<ion-item style='" + this.hidden + "'>" +
|
||||||
|
"<ion-label class='" + requiredClass + "'>" + this.label + "</ion-label>" +
|
||||||
|
"<ion-input type='number' id='" + this.elementId + "' value='" + this.value + "' " + this.disabled + "> </ion-input>" +
|
||||||
|
"</ion-item> ";
|
||||||
|
|
||||||
|
return template;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
import { UiElement } from "./ui-element";
|
||||||
|
|
||||||
|
export class SelectInput extends UiElement {
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private label: string,
|
||||||
|
private elementId: string,
|
||||||
|
private value: any,
|
||||||
|
private containerId: string,
|
||||||
|
private disabled: string,
|
||||||
|
private hidden: string,
|
||||||
|
private required: string) {
|
||||||
|
super(elementId, containerId, '');
|
||||||
|
this.createElement(this.getTemplate());
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
public getTemplate() {
|
||||||
|
let requiredClass: string = "";
|
||||||
|
if (this.required == 'Y')
|
||||||
|
requiredClass = "requiredClass"
|
||||||
|
if (this.disabled == "N") { this.disabled = "disabled" } else { this.disabled = "" }
|
||||||
|
if (this.hidden == "N") { this.hidden = "display:none;" } else { this.hidden = "" }
|
||||||
|
const template =
|
||||||
|
// "<div class='custom-text-area-element' style='" + this.hidden + "'>" +
|
||||||
|
// "<label class='daynamicForm-Label " + requiredClass + "' id='title' >" + this.label + "</label>" +
|
||||||
|
// "<select class='daynamicForm-Select' id='" + this.elementId + "' " + this.disabled + ">" +
|
||||||
|
// "<option value='" + this.value + "' >" + this.value + "</option>" +
|
||||||
|
// "</select>" +
|
||||||
|
// "</div> ";
|
||||||
|
|
||||||
|
"<ion-item style='" + this.hidden + "'>" +
|
||||||
|
"<ion-label id='title' >" + this.label + "</ion-label>" +
|
||||||
|
"<ion-select id='" + this.elementId + "' " + this.disabled + ">" +
|
||||||
|
"<ion-select-option value='" + this.value + "' >" + this.value + "</ion-select-option>" +
|
||||||
|
"</ion-select>" +
|
||||||
|
"</ion-item> ";
|
||||||
|
|
||||||
|
return template;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
import { UiElement } from "./ui-element";
|
||||||
|
|
||||||
|
export class TextAreaInput extends UiElement {
|
||||||
|
constructor(
|
||||||
|
private label: string,
|
||||||
|
private elementId: string,
|
||||||
|
private value: any,
|
||||||
|
private containerId: string,
|
||||||
|
private disabled: string,
|
||||||
|
private hidden: string,
|
||||||
|
private required: string) {
|
||||||
|
super(elementId, containerId, '');
|
||||||
|
this.createElement(this.getTemplate());
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
public getTemplate() {
|
||||||
|
let requiredClass: string = "";
|
||||||
|
if (this.required == 'Y')
|
||||||
|
requiredClass = "requiredClass"
|
||||||
|
if (this.disabled == "N") { this.disabled = "disabled" } else { this.disabled = "" }
|
||||||
|
if (this.hidden == "N") { this.hidden = "display:none;" } else { this.hidden = "" }
|
||||||
|
const template =
|
||||||
|
// "<div class='custom-text-area-element' style='" + this.hidden + "' >" +
|
||||||
|
// "<label class='daynamicForm-Label " + requiredClass + "' id='title' >" + this.label + "</label>" +
|
||||||
|
// "<textarea class='daynamicForm-Input' id='" + this.elementId + "' " + this.disabled + " >" + this.value + "</textarea>" +
|
||||||
|
// "</div> ";
|
||||||
|
|
||||||
|
"<ion-item style='" + this.hidden + "' >" +
|
||||||
|
"<ion-label id='title' >" + this.label + "</ion-label>" +
|
||||||
|
"<ion-textarea id='" + this.elementId + "' " + this.disabled + " >" + this.value + "</ion-textarea>" +
|
||||||
|
"</ion-item>";
|
||||||
|
|
||||||
|
return template;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
import { UiElement } from "./ui-element";
|
||||||
|
|
||||||
|
|
||||||
|
export class TextInput extends UiElement {
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private label: string,
|
||||||
|
private elementId: string,
|
||||||
|
private value: any,
|
||||||
|
private containerId: string,
|
||||||
|
private textVal: string,
|
||||||
|
private disabled: string,
|
||||||
|
private hidden: string,
|
||||||
|
private required: string) {
|
||||||
|
super(elementId, containerId, '');
|
||||||
|
this.createElement(this.getTemplate());
|
||||||
|
}
|
||||||
|
|
||||||
|
public getTemplate() {
|
||||||
|
let requiredClass: string = "";
|
||||||
|
if (this.required === 'Y')
|
||||||
|
requiredClass = "requiredClass"
|
||||||
|
if (this.disabled === "N") { this.disabled = "disabled" } else { this.disabled = "" }
|
||||||
|
if (this.hidden === "N") { this.hidden = "display:none;" } else { this.hidden = "" }
|
||||||
|
const template =
|
||||||
|
// "<div class='custom-text-area-element' style='" + this.hidden + "'>" +
|
||||||
|
"<ion-item style='" + this.hidden + "'>" +
|
||||||
|
" <ion-label class='" + requiredClass + "'>" + this.label + "</ion-label>" +
|
||||||
|
" <ion-input type='Text' data-colm-text='" + this.textVal + "' id='" + this.elementId + "' value='" + this.value + "' " + this.disabled + "> </ion-input>" +
|
||||||
|
"</ion-item> ";
|
||||||
|
|
||||||
|
return template;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
import { UiElement } from "./ui-element";
|
||||||
|
|
||||||
|
export class TimeInput extends UiElement {
|
||||||
|
constructor(
|
||||||
|
private label: string,
|
||||||
|
private elementId: string,
|
||||||
|
private value: any,
|
||||||
|
private containerId: string,
|
||||||
|
private disabled: string,
|
||||||
|
private hidden: string,
|
||||||
|
private required: string) {
|
||||||
|
super(elementId, containerId, '');
|
||||||
|
this.createElement(this.getTemplate());
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
formatDate() {
|
||||||
|
let date = new Date();
|
||||||
|
this.value = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
public getTemplate() {
|
||||||
|
let requiredClass: string = "";
|
||||||
|
let disaledClass = "";
|
||||||
|
if (this.required == 'Y')
|
||||||
|
requiredClass = "requiredClass"
|
||||||
|
if (this.disabled == "N") { this.disabled = "disabled"; disaledClass = "disabled" } else { this.disabled = ""; disaledClass = "" }
|
||||||
|
if (this.hidden == "N") { this.hidden = "display:none;" } else { this.hidden = "" }
|
||||||
|
if (this.value == "currentTime") {
|
||||||
|
this.formatDate();
|
||||||
|
}
|
||||||
|
const template =
|
||||||
|
// "<div class='custom-text-area-element' style='"+this.hidden+"'>" +
|
||||||
|
// " <label class='daynamicForm-Label "+requiredClass+"' id='title' >" + this.label + "</label>" +
|
||||||
|
// // " <input class='daynamicForm-DateTime' type='time' id='" + this.elementId + "' value='" + this.value + "' "+this.disabled+" />"+
|
||||||
|
// " <div class='daynamicForm-DateTime "+disaledClass+"' id='" + this.elementId + "' data-dtvalue='" + this.value + "' "+this.disabled+">"+this.value+"</div>"+
|
||||||
|
// "</div> ";
|
||||||
|
|
||||||
|
"<ion-item>" +
|
||||||
|
" <ion-label id='title' >" + this.label + "</ion-label>" +
|
||||||
|
// " <div class='daynamicForm-DateTime " + disaledClass + "' id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + ">" + this.value + "</div>" +
|
||||||
|
"<ion-datetime displayFormat='HH:mm' value='" + this.value + "' id='" + this.elementId + "' " + this.disabled + "></ion-datetime>" +
|
||||||
|
// " <input class='daynamicForm-DateTime' type='text' id='" + this.elementId + "' value='" + this.value + "' "+this.disabled+" (click)='showDateTimePicker()'/>"+
|
||||||
|
// " <input class='daynamicForm-DateTime' type='date' id='" + this.elementId + "' value='" + dateValue+ "' "+this.disabled+" />"+
|
||||||
|
// " <input class='daynamicForm-DateTime' type='time' id='" + this.elementId + "Time' value='" + timeValue + "' "+this.disabled+" />"+
|
||||||
|
"</ion-item>"
|
||||||
|
return template;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
export class UiElement {
|
||||||
|
|
||||||
|
constructor(private elementID, private containerID, private viewClass) {
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
private getContainer() {
|
||||||
|
return document.getElementById(this.containerID);
|
||||||
|
}
|
||||||
|
|
||||||
|
public createElement(html: string) {
|
||||||
|
|
||||||
|
const container = this.getContainer();
|
||||||
|
if (container) {
|
||||||
|
container.appendChild(this.getElement(html));
|
||||||
|
}
|
||||||
|
// this.registerEvents(onConfirm, onCancel);
|
||||||
|
}
|
||||||
|
|
||||||
|
public delete() {
|
||||||
|
const element = document.getElementById(this.elementID);
|
||||||
|
if (element) {
|
||||||
|
element.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public onClicked(listener: any) {
|
||||||
|
this.registerEvent('click', listener);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
public onChanged(listener: any) {
|
||||||
|
this.registerEvent('change', listener);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
public onBlur(listener: any) {
|
||||||
|
this.registerEvent('blur', listener);
|
||||||
|
}
|
||||||
|
|
||||||
|
private registerEvent(event: string, listener: any) {
|
||||||
|
const element = document.getElementById(this.elementID);
|
||||||
|
element.addEventListener(event, (e) => {
|
||||||
|
if (listener) {
|
||||||
|
listener();
|
||||||
|
}
|
||||||
|
e.stopImmediatePropagation();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
private getElement(html: string) {
|
||||||
|
const elemDiv = document.createElement('div');
|
||||||
|
//elemDiv.id = this.elementID;
|
||||||
|
elemDiv.className = this.viewClass;
|
||||||
|
elemDiv.innerHTML = html;
|
||||||
|
return elemDiv;
|
||||||
|
}
|
||||||
|
|
||||||
|
public getValue() {
|
||||||
|
return (document.getElementById(this.elementID) as HTMLInputElement).value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue