UI Elements implemented
parent
261eafaa84
commit
bd2cc4edb1
@ -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