import { Component, ViewChild, AfterViewInit, ViewEncapsulation, ElementRef } from '@angular/core';
import { jqxTabsComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxtabs';
import { jqxListBoxComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxlistbox';
import { jqxCheckBoxComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxcheckbox';
@Component({
selector: 'app-root',
styleUrls: ['./app.component.css'],
templateUrl: './app.component.html',
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {
@ViewChild('jqxTabs') jqxTabs: jqxTabsComponent;
@ViewChild('acceptCheckBox') acceptCheckBox: jqxCheckBoxComponent;
@ViewChild('products') products: jqxListBoxComponent;
@ViewChild('usernameInput') usernameInput: ElementRef;
@ViewChild('passwordInput') passwordInput: ElementRef;
@ViewChild('orderContainer') orderContainer: ElementRef;
getWidth() : any {
if (document.body.offsetWidth < 500) {
return '90%';
}
return 500;
}
ngAfterViewInit() {
this.validate(true);
this._addHandlers();
}
_addHandlers = () => {
this.usernameInput.nativeElement.addEventListener('keyup', () => {
this.validate(true);
});
this.usernameInput.nativeElement.addEventListener('change', () => {
this.validate(true);
});
this.passwordInput.nativeElement.addEventListener('keyup', () => {
this.validate(true);
});
let nextButtonClass = document.getElementsByClassName('nextButton');
for (let i = 0; i < nextButtonClass.length; i++) {
let currentNextButton = nextButtonClass[i];
currentNextButton.addEventListener('click', () => {
this.validate(true);
this.jqxTabs.next();
});
}
let backButtonClass = document.getElementsByClassName('backButton');
for (let i = 0; i < backButtonClass.length; i++) {
let currentBackButton = backButtonClass[i];
currentBackButton.addEventListener('click', () => {
this.validate(true);
this.jqxTabs.previous();
});
}
};
acceptCheckBoxChange(event: any): void {
this.validate(true);
};
productsChange(event: any): void {
this.validate(true);
let selectedItems = this.products.selectedIndexes(),
count = selectedItems.length;
let parent = this.orderContainer.nativeElement;
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
while (count) {
count--;
if (typeof selectedItems[count] !== 'undefined' &&
selectedItems[count] !== -1) {
let currentHtmlContent = parent.innerHTML;
parent.innerHTML = currentHtmlContent + '' + (this.getSource()[selectedItems[count]].html) + '
';
}
}
};
productsUnselect(event: any): void {
this.validate(true);
};
// Checking if any product have been selected
_isItemSelected = (array) => {
let count = array.length;
if (count === 0) {
return false;
}
while (count) {
count -= 1;
if (array[count] !== -1 &&
typeof array[count] !== 'undefined') {
return true;
}
}
return false;
};
// Validating all wizard tabs
validate = (notify) => {
if (!this.firstTab(notify)) {
this.jqxTabs.disableAt(1);
this.jqxTabs.disableAt(2);
return;
} else {
this.jqxTabs.enableAt(1);
}
if (!this.secondTab(notify)) {
this.jqxTabs.disableAt(2);
return;
} else {
this.jqxTabs.enableAt(2);
}
}
// Displaying message to the user
showHint = (message, selector) => {
if (typeof selector === 'undefined') {
selector = '.hint';
}
if (message === '') {
message = 'You can continue.';
}
// Check is a class or not
if (selector.indexOf('.') == 0) {
document.getElementsByClassName(selector.slice(1))[0].innerHTML = '' + message + '';
} else {
document.getElementById(selector.slice(1)).innerHTML = '' + message + '';
}
}
// Validating the first tab
firstTab = (notify) => {
let username = this.usernameInput.nativeElement.value,
password = this.passwordInput.nativeElement.value,
message = '';
if (username.length < 3) {
message += 'You have to enter valid username.
';
}
if (password.length < 3) {
message += 'You have to enter valid password.
';
}
if (!this.acceptCheckBox.checked()) {
message += 'You have to accept the terms.
';
}
if (message !== '') {
if (notify) {
this.showHint(message, '#hintSection');
}
return false;
}
this.showHint('You can continue.', '#hintSection');
return true;
}
// Validating the second tab
secondTab = (notify?: any) => {
let products = this.products.selectedIndex();
if (!this._isItemSelected(this.products.selectedIndexes())) {
this.showHint('You have to select at least one item.', '#hintBasket');
return false;
} else {
this.showHint('You can continue.', '#hintBasket');
}
return true;
}
getSource = (): any[] => {
return [
{ html: "
jqxNumberInput
jqxProgressBar
jqxCalendar
jqxButton
jqxDropDownList
jqxListBox
jqxTooltip