UI Elements implemented

production
haroon amjad 7 years ago
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;
}
}

@ -6,6 +6,10 @@
</ion-header>
<ion-content padding>
<!-- <div #containerDiv id="containerDiv">
</div> -->
<div style="padding: 0 10px;" [innerHTML]='"vacation-rule, tip" | translate'></div>
<ion-card *ngFor="let item of GetVacationRulesList; let i = index;">
<ion-card-header class="boxHdr">
@ -73,6 +77,7 @@
<ion-footer>
<div class="centerDiv">
<ion-button class="footer-button" color="customnavy" ion-button (click)="Vacation_Type()">{{'vacation-rule, createRule' | translate}}</ion-button>
<ion-button class="footer-button" color="customnavy" ion-button (click)="Vacation_Type()">
{{'vacation-rule, createRule' | translate}}</ion-button>
</div>
</ion-footer>

@ -6,7 +6,7 @@ import { VacationRuleServiceService } from './../service/vacation-rule-service.s
import { VacationRuleRequest } from './../model/VacationRuleRequest';
import { Component, OnInit } from '@angular/core';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { NavigationExtras, Router } from '@angular/router';
import { Router } from '@angular/router';
@Component({
selector: 'app-home',
@ -23,16 +23,59 @@ export class HomeComponent implements OnInit {
IsReachEnd: boolean = false;
RespondAttributeList: any;
// button: ButtonInput;
// dateTime: DateTimeInput;
// date: DateInput;
// numberInput: NumberInput;
// selectInput: SelectInput;
// textAreaInput: TextAreaInput;
// timeInput: TimeInput;
constructor(public vacationRuleService: VacationRuleServiceService, public ts: TranslatorService, public cs: CommonService, private router: Router) {
this.P_PAGE_NUM = 1;
this.P_PAGE_LIMIT = 50;
// this.button = new ButtonInput('btnSubmit', 'Submit', 'containerDiv', 'Y');
// this.dateTime = new DateTimeInput('Start Date', 'SDate', '', 'containerDiv', 'Y', 'Y', 'Y');
// this.date = new DateInput('Start Date', 'SDate', '', 'containerDiv', 'Y', 'Y', 'Y');
// this.numberInput = new NumberInput('Roll No.:', 'rollNo', '', 'containerDiv', 'Y', 'Y', 'Y');
// this.selectInput = new SelectInput('Gender', 'genderSelect', 'm', 'containerDiv', 'Y', 'Y', 'Y');
// this.textAreaInput = new TextAreaInput('Message:', 'messageText', '', 'containerDiv', 'Y', 'Y', 'Y');
// this.timeInput = new TimeInput('Time', 'SDate', '', 'containerDiv', 'Y', 'Y', 'Y');
}
showAlert() {
this.cs.presentAlert('Button Clicked');
}
ngOnInit() {
console.log('OnInit');
this.getVacationRules();
console.log(this.GetVacationRulesList);
// let elem = document.getElementById('btnSubmit');
// const elemDiv = document.createElement('div');
//elemDiv.id = this.elementID;
// elemDiv.className = '';
// elemDiv.innerHTML = this.button.getTemplate();
// elemDiv.innerHTML = this.dateTime.getTemplate();
// elemDiv.innerHTML = this.date.getTemplate();
// elemDiv.innerHTML = this.numberInput.getTemplate();
// elemDiv.innerHTML = this.selectInput.getTemplate();
// elemDiv.innerHTML = this.textAreaInput.getTemplate();
// elemDiv.innerHTML = this.timeInput.getTemplate();
// document.getElementById('containerDiv').appendChild(elemDiv);
// let elem = document.getElementById("btnSubmit");
// console.log(elem);
// elem.addEventListener("click", (e) => {
// this.showAlert();
// e.stopImmediatePropagation();
// });
}
Vacation_Type() {
@ -52,7 +95,6 @@ export class HomeComponent implements OnInit {
}, this.ts.trPK('general', 'retry')).subscribe((result) => {
if (this.cs.validResponse(result)) {
this.GetVacationRulesList = result.GetVacationRulesList;
console.log(result.GetVacationRulesList);
} else {
this.cs.presentAlert(result.ErrorEndUserMessage);
}
@ -93,7 +135,7 @@ export class HomeComponent implements OnInit {
this.cs.sharedService.setSharedData(this.GetVacationRulesList[i], vacationRuleResponse.SHARED_DATA);
this.isUpdate = true;
this.cs.sharedService.setSharedData(this.isUpdate, 'isUpdate');
this.router.navigate(['/vacation-rule/create-vacation-rule']);
}

@ -34,7 +34,6 @@ export class VacationRuleServiceService {
public getVacationRule(vacationRuleRequest: VacationRuleRequest, onError: any, errorLabel: string): Observable<any> {
const request = vacationRuleRequest;
console.log(request);
this.authService.authenticateRequest(request);
return this.con.post(VacationRuleServiceService.getVacationRule, request, onError, errorLabel);
}

Loading…
Cancel
Save