Closed shalvy closed 5 years ago
@shalvy can you give me the hole wizard.component.ts
file?
@chelaruc ok, I'm attaching it.
@shalvy sorry for the late response. What version do you have? The latest one is 1.1.0.
All the best, Ciprian
I'm also getting the same error. Already using the latest 1.1.0 version.
@chelaruc yes I am using the latest version,
@chelaruc yes I am using the latest version,
@shalvy in the latest version, the wizard component is looking like:
import { Component, OnInit, OnChanges, AfterViewInit, SimpleChanges } from '@angular/core';
import { FormControl, FormGroupDirective, NgForm, Validators, FormGroup } from '@angular/forms';
// import * as $ from 'jquery';
declare var swal:any;
declare var $:any;
interface FileReaderEventTarget extends EventTarget {
result:string
}
interface FileReaderEvent extends Event {
target: FileReaderEventTarget;
getMessage():string;
}
@Component({
moduleId: module.id,
selector: 'wizard-cmp',
templateUrl: 'wizard.component.html'
})
export class WizardComponent implements OnInit, AfterViewInit{
focus;
focus1;
focus2;
readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e:FileReaderEvent) {
$('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow');
}
reader.readAsDataURL(input.files[0]);
}
}
onFinishWizard(){
//here you can do something, sent the form to server via ajax and show a success message with swal
swal("Good job!", "You clicked the finish button!", "success");
}
ngOnInit(){
setTimeout(function() {
$('.card.card-wizard').addClass('active');
}, 600);
// Code for the Validator
const $validator = $('.card-wizard form').validate({
rules: {
firstname: {
required: true,
minlength: 3
},
lastname: {
required: true,
minlength: 3
},
email: {
required: true,
minlength: 3,
}
},
highlight: function(element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-danger');
},
success: function(element) {
$(element).closest('.form-group').removeClass('has-danger').addClass('has-success');
},
errorPlacement : function(error, element) {
$(element).append(error);
}
});
// Wizard Initialization
$('.card-wizard').bootstrapWizard({
'tabClass': 'nav nav-pills',
'nextSelector': '.btn-next',
'previousSelector': '.btn-previous',
onNext: function(tab, navigation, index) {
var $valid = $('.card-wizard form').valid();
if(!$valid) {
$validator.focusInvalid();
return false;
}
},
onInit: function(tab: any, navigation: any, index: any){
// check number of tabs and fill the entire row
let $total = navigation.find('li').length;
let $wizard = navigation.closest('.card-wizard');
let $first_li = navigation.find('li:first-child a').html();
let $moving_div = $('<div class="moving-tab">' + $first_li + '</div>');
$('.card-wizard .wizard-navigation').append($moving_div);
$total = $wizard.find('.nav li').length;
let $li_width = 100/$total;
let total_steps = $wizard.find('.nav li').length;
let move_distance = $wizard.width() / total_steps;
let index_temp = index;
let vertical_level = 0;
let mobile_device = $(document).width() < 600 && $total > 3;
if(mobile_device){
move_distance = $wizard.width() / 2;
index_temp = index % 2;
$li_width = 50;
}
$wizard.find('.nav li').css('width',$li_width + '%');
let step_width = move_distance;
move_distance = move_distance * index_temp;
let $current = index + 1;
if($current == 1 || (mobile_device == true && (index % 2 == 0) )){
move_distance -= 8;
} else if($current == total_steps || (mobile_device == true && (index % 2 == 1))){
move_distance += 8;
}
if(mobile_device){
let x: any = index / 2;
vertical_level = parseInt(x);
vertical_level = vertical_level * 38;
}
$wizard.find('.moving-tab').css('width', step_width);
$('.moving-tab').css({
'transform':'translate3d(' + move_distance + 'px, ' + vertical_level + 'px, 0)',
'transition': 'all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)'
});
$('.moving-tab').css('transition','transform 0s');
},
onTabClick : function(tab: any, navigation: any, index: any){
const $valid = $('.card-wizard form').valid();
if (!$valid) {
return false;
} else {
return true;
}
},
onTabShow: function(tab: any, navigation: any, index: any) {
var $total = navigation.find('li').length;
var $current = index + 1;
var $wizard = navigation.closest('.card-wizard');
// If it's the last tab then hide the last button and show the finish instead
if ($current >= $total) {
$($wizard).find('.btn-next').hide();
$($wizard).find('.btn-finish').show();
} else {
$($wizard).find('.btn-next').show();
$($wizard).find('.btn-finish').hide();
}
let button_text = navigation.find('li:nth-child(' + $current + ') a').html();
setTimeout(function() {
$('.moving-tab').html(button_text);
}, 150);
var checkbox = $('.footer-checkbox');
if (index == 0) {
$(checkbox).css({
'opacity': '0',
'visibility': 'hidden',
'position': 'absolute'
});
} else {
$(checkbox).css({
'opacity': '1',
'visibility': 'visible'
});
}
$total = $wizard.find('.nav li').length;
let $li_width = 100 / $total;
let total_steps = $wizard.find('.nav li').length;
let move_distance = $wizard.width() / total_steps;
let index_temp = index;
let vertical_level = 0;
let mobile_device = $(document).width() < 600 && $total > 3;
if (mobile_device) {
move_distance = $wizard.width() / 2;
index_temp = index % 2;
$li_width = 50;
}
$wizard.find('.nav li').css('width', $li_width + '%');
let step_width = move_distance;
move_distance = move_distance * index_temp;
$current = index + 1;
// if($current == 1 || (mobile_device == true && (index % 2 == 0) )){
// move_distance -= 8;
// } else if($current == total_steps || (mobile_device == true && (index % 2 == 1))){
// move_distance += 8;
// }
if(mobile_device){
let x: any = index / 2;
vertical_level = parseInt(x);
vertical_level = vertical_level * 38;
}
$wizard.find('.moving-tab').css('width', step_width);
$('.moving-tab').css({
'transform': 'translate3d(' + move_distance + 'px, ' + vertical_level + 'px, 0)',
'transition': 'all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)'
});
}
});
// Prepare the preview for profile picture
$('#wizard-picture').change(function(){
const input = $(this);
if (input[0].files && input[0].files[0]) {
const reader = new FileReader();
reader.onload = function (e: FileReaderEvent) {
$('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow');
};
reader.readAsDataURL(input[0].files[0]);
}
});
$('[data-toggle="wizard-radio"]').click(function() {
let wizard = $(this).closest('.card-wizard');
wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
$(this).addClass('active');
$(wizard).find('[type="radio"]').removeAttr('checked');
$(this).find('[type="radio"]').attr('checked', 'true');
});
$('[data-toggle="wizard-checkbox"]').click(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(this).find('[type="checkbox"]').removeAttr('checked');
} else {
$(this).addClass('active');
$(this).find('[type="checkbox"]').attr('checked', 'true');
}
});
$('.set-full-height').css('height', 'auto');
}
ngAfterViewInit() {
$( window ).resize( () => { $('.card-wizard').each(function(){
const $wizard = $(this);
const index = $wizard.bootstrapWizard('currentIndex');
let $total = $wizard.find('.nav li').length;
let $li_width = 100/$total;
let total_steps = $wizard.find('.nav li').length;
let move_distance = $wizard.width() / total_steps;
let index_temp = index;
let vertical_level = 0;
let mobile_device = $(document).width() < 600 && $total > 3;
if(mobile_device){
move_distance = $wizard.width() / 2;
index_temp = index % 2;
$li_width = 50;
}
$wizard.find('.nav li').css('width',$li_width + '%');
let step_width = move_distance;
move_distance = move_distance * index_temp;
let $current = index + 1;
if($current == 1 || (mobile_device == true && (index % 2 == 0) )){
move_distance -= 8;
} else if($current == total_steps || (mobile_device == true && (index % 2 == 1))){
move_distance += 8;
}
if(mobile_device){
let x: any = index / 2;
vertical_level = parseInt(x);
vertical_level = vertical_level * 38;
}
$wizard.find('.moving-tab').css('width', step_width);
$('.moving-tab').css({
'transform':'translate3d(' + move_distance + 'px, ' + vertical_level + 'px, 0)',
'transition': 'all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)'
});
$('.moving-tab').css({
'transition': 'transform 0s'
});
});
});
}
ngOnChanges(changes: SimpleChanges) {
const input = $(this);
if (input[0].files && input[0].files[0]) {
const reader: any = new FileReader();
reader.onload = function (e: FileReaderEvent) {
$('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow');
};
reader.readAsDataURL(input[0].files[0]);
}
}
}
So, you have the latest version?
thus the same error I am getting on n both earlier version and the latest version, paper-dashboard-pro-angular-v1.1.0 😢 ERROR message below;
Type '(this: FileReader, e: FileReaderEvent) => void' is not assignable to type '(this: FileReader, ev: ProgressEvent) => any'. Types of parameters 'e' and 'ev' are incompatible. Type 'ProgressEvent' is not assignable to type 'FileReaderEvent'. Property 'getMessage' is missing in type 'ProgressEvent'.
On Thu, Oct 25, 2018 at 2:47 PM Chelaru Ciprian notifications@github.com wrote:
@shalvy https://github.com/shalvy in the latest version, the wizard component is looking like:
import { Component, OnInit, OnChanges, AfterViewInit, SimpleChanges } from '@angular/core'; import { FormControl, FormGroupDirective, NgForm, Validators, FormGroup } from '@angular/forms'; // import * as $ from 'jquery';
declare var swal:any; declare var $:any;
interface FileReaderEventTarget extends EventTarget { result:string } interface FileReaderEvent extends Event { target: FileReaderEventTarget; getMessage():string; }
@Component({ moduleId: module.id, selector: 'wizard-cmp', templateUrl: 'wizard.component.html' })
export class WizardComponent implements OnInit, AfterViewInit{ focus; focus1; focus2; readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader();
reader.onload = function (e:FileReaderEvent) { $('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow'); } reader.readAsDataURL(input.files[0]); } } onFinishWizard(){ //here you can do something, sent the form to server via ajax and show a success message with swal swal("Good job!", "You clicked the finish button!", "success"); } ngOnInit(){ setTimeout(function() { $('.card.card-wizard').addClass('active'); }, 600); // Code for the Validator const $validator = $('.card-wizard form').validate({ rules: { firstname: { required: true, minlength: 3 }, lastname: { required: true, minlength: 3 }, email: { required: true, minlength: 3, } }, highlight: function(element) { $(element).closest('.form-group').removeClass('has-success').addClass('has-danger'); }, success: function(element) { $(element).closest('.form-group').removeClass('has-danger').addClass('has-success'); }, errorPlacement : function(error, element) { $(element).append(error); } }); // Wizard Initialization $('.card-wizard').bootstrapWizard({ 'tabClass': 'nav nav-pills', 'nextSelector': '.btn-next', 'previousSelector': '.btn-previous', onNext: function(tab, navigation, index) { var $valid = $('.card-wizard form').valid(); if(!$valid) { $validator.focusInvalid(); return false; } }, onInit: function(tab: any, navigation: any, index: any){ // check number of tabs and fill the entire row let $total = navigation.find('li').length; let $wizard = navigation.closest('.card-wizard'); let $first_li = navigation.find('li:first-child a').html(); let $moving_div = $('<div class="moving-tab">' + $first_li + '</div>'); $('.card-wizard .wizard-navigation').append($moving_div); $total = $wizard.find('.nav li').length; let $li_width = 100/$total; let total_steps = $wizard.find('.nav li').length; let move_distance = $wizard.width() / total_steps; let index_temp = index; let vertical_level = 0; let mobile_device = $(document).width() < 600 && $total > 3; if(mobile_device){ move_distance = $wizard.width() / 2; index_temp = index % 2; $li_width = 50; } $wizard.find('.nav li').css('width',$li_width + '%'); let step_width = move_distance; move_distance = move_distance * index_temp; let $current = index + 1; if($current == 1 || (mobile_device == true && (index % 2 == 0) )){ move_distance -= 8; } else if($current == total_steps || (mobile_device == true && (index % 2 == 1))){ move_distance += 8; } if(mobile_device){ let x: any = index / 2; vertical_level = parseInt(x); vertical_level = vertical_level * 38; } $wizard.find('.moving-tab').css('width', step_width); $('.moving-tab').css({ 'transform':'translate3d(' + move_distance + 'px, ' + vertical_level + 'px, 0)', 'transition': 'all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)' }); $('.moving-tab').css('transition','transform 0s'); }, onTabClick : function(tab: any, navigation: any, index: any){ const $valid = $('.card-wizard form').valid(); if (!$valid) { return false; } else { return true; } }, onTabShow: function(tab: any, navigation: any, index: any) { var $total = navigation.find('li').length; var $current = index + 1; var $wizard = navigation.closest('.card-wizard'); // If it's the last tab then hide the last button and show the finish instead if ($current >= $total) { $($wizard).find('.btn-next').hide(); $($wizard).find('.btn-finish').show(); } else { $($wizard).find('.btn-next').show(); $($wizard).find('.btn-finish').hide(); } let button_text = navigation.find('li:nth-child(' + $current + ') a').html(); setTimeout(function() { $('.moving-tab').html(button_text); }, 150); var checkbox = $('.footer-checkbox'); if (index == 0) { $(checkbox).css({ 'opacity': '0', 'visibility': 'hidden', 'position': 'absolute' }); } else { $(checkbox).css({ 'opacity': '1', 'visibility': 'visible' }); } $total = $wizard.find('.nav li').length; let $li_width = 100 / $total; let total_steps = $wizard.find('.nav li').length; let move_distance = $wizard.width() / total_steps; let index_temp = index; let vertical_level = 0; let mobile_device = $(document).width() < 600 && $total > 3; if (mobile_device) { move_distance = $wizard.width() / 2; index_temp = index % 2; $li_width = 50; } $wizard.find('.nav li').css('width', $li_width + '%'); let step_width = move_distance; move_distance = move_distance * index_temp; $current = index + 1; // if($current == 1 || (mobile_device == true && (index % 2 == 0) )){ // move_distance -= 8; // } else if($current == total_steps || (mobile_device == true && (index % 2 == 1))){ // move_distance += 8; // } if(mobile_device){ let x: any = index / 2; vertical_level = parseInt(x); vertical_level = vertical_level * 38; } $wizard.find('.moving-tab').css('width', step_width); $('.moving-tab').css({ 'transform': 'translate3d(' + move_distance + 'px, ' + vertical_level + 'px, 0)', 'transition': 'all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)' }); } }); // Prepare the preview for profile picture $('#wizard-picture').change(function(){ const input = $(this); if (input[0].files && input[0].files[0]) { const reader = new FileReader(); reader.onload = function (e: FileReaderEvent) { $('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow'); }; reader.readAsDataURL(input[0].files[0]); } }); $('[data-toggle="wizard-radio"]').click(function() { let wizard = $(this).closest('.card-wizard'); wizard.find('[data-toggle="wizard-radio"]').removeClass('active'); $(this).addClass('active'); $(wizard).find('[type="radio"]').removeAttr('checked'); $(this).find('[type="radio"]').attr('checked', 'true'); }); $('[data-toggle="wizard-checkbox"]').click(function() { if ($(this).hasClass('active')) { $(this).removeClass('active'); $(this).find('[type="checkbox"]').removeAttr('checked'); } else { $(this).addClass('active'); $(this).find('[type="checkbox"]').attr('checked', 'true'); } }); $('.set-full-height').css('height', 'auto'); } ngAfterViewInit() { $( window ).resize( () => { $('.card-wizard').each(function(){ const $wizard = $(this); const index = $wizard.bootstrapWizard('currentIndex'); let $total = $wizard.find('.nav li').length; let $li_width = 100/$total; let total_steps = $wizard.find('.nav li').length; let move_distance = $wizard.width() / total_steps; let index_temp = index; let vertical_level = 0; let mobile_device = $(document).width() < 600 && $total > 3; if(mobile_device){ move_distance = $wizard.width() / 2; index_temp = index % 2; $li_width = 50; } $wizard.find('.nav li').css('width',$li_width + '%'); let step_width = move_distance; move_distance = move_distance * index_temp; let $current = index + 1; if($current == 1 || (mobile_device == true && (index % 2 == 0) )){ move_distance -= 8; } else if($current == total_steps || (mobile_device == true && (index % 2 == 1))){ move_distance += 8; } if(mobile_device){ let x: any = index / 2; vertical_level = parseInt(x); vertical_level = vertical_level * 38; } $wizard.find('.moving-tab').css('width', step_width); $('.moving-tab').css({ 'transform':'translate3d(' + move_distance + 'px, ' + vertical_level + 'px, 0)', 'transition': 'all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)' }); $('.moving-tab').css({ 'transition': 'transform 0s' }); }); }); } ngOnChanges(changes: SimpleChanges) { const input = $(this); if (input[0].files && input[0].files[0]) { const reader: any = new FileReader(); reader.onload = function (e: FileReaderEvent) { $('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow'); }; reader.readAsDataURL(input[0].files[0]); } }
}
So, you have the latest version?
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativetimofficial/ct-paper-dashboard-pro-angular/issues/19#issuecomment-433036536, or mute the thread https://github.com/notifications/unsubscribe-auth/AZrC5xAsrfFCU__TbbgCT25nMEPwBF48ks5uobLwgaJpZM4UiVXh .
same error for me as well on the pro dashboard
same error
Guys, can you give me the steps to reproduce this error? @Atalus @AnjaneyalnDatla @shalvy @dev2colours @iamnido
fixed in v1.2.0
Error Message
Type '(this: FileReader, e: FileReaderEvent) => void' is not assignable to type '(this: FileReader, ev: FileReaderProgressEvent) => any'. Types of parameters 'e' and 'ev' are incompatible. Type 'FileReaderProgressEvent' is not assignable to type 'FileReaderEvent'. Property 'getMessage' is missing in type 'FileReaderProgressEvent'.
the error is int the line reader.onload![onload](https://user-images.githubusercontent.com/26919655/41222796-4ea31d0e-6d68-11e8-90e2-c0eceda87b01.JPG)
`readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader();