118 lines
2.7 KiB
JavaScript
118 lines
2.7 KiB
JavaScript
/**
|
|
* WebWizard Frontend Logic
|
|
*/
|
|
|
|
const App = {
|
|
state: {
|
|
userId: localStorage.getItem('ww_user_id'),
|
|
currentStep: 1,
|
|
totalSteps: 8,
|
|
project: null
|
|
},
|
|
|
|
async init() {
|
|
console.log('Initializing WebWizard...');
|
|
|
|
if (!this.state.userId) {
|
|
await this.initSession();
|
|
}
|
|
|
|
this.bindEvents();
|
|
this.showStep(this.state.currentStep);
|
|
},
|
|
|
|
async initSession() {
|
|
try {
|
|
const response = await this.apiCall('initSession');
|
|
if (response.success) {
|
|
this.state.userId = response.data.user_id;
|
|
localStorage.setItem('ww_user_id', this.state.userId);
|
|
console.log('Session initialized:', this.state.userId);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to initialize session:', error);
|
|
alert('Chyba pri inicializácii session. Skontrolujte pripojenie.');
|
|
}
|
|
},
|
|
|
|
async apiCall(action, payload = {}, projectId = null) {
|
|
const body = {
|
|
action,
|
|
project_id: projectId,
|
|
payload
|
|
};
|
|
|
|
const headers = {
|
|
'Content-Type': 'application/json'
|
|
};
|
|
|
|
if (this.state.userId) {
|
|
headers['X-User-ID'] = this.state.userId;
|
|
}
|
|
|
|
const response = await fetch('/ajax.php', {
|
|
method: 'POST',
|
|
headers,
|
|
body: JSON.stringify(body)
|
|
});
|
|
|
|
const result = await response.json();
|
|
if (!result.success) {
|
|
throw new Error(result.error.message || 'API Error');
|
|
}
|
|
|
|
return result;
|
|
},
|
|
|
|
bindEvents() {
|
|
document.getElementById('btn-next').addEventListener('click', () => this.nextStep());
|
|
document.getElementById('btn-prev').addEventListener('click', () => this.prevStep());
|
|
},
|
|
|
|
showStep(n) {
|
|
const steps = document.querySelectorAll('.step');
|
|
steps.forEach(step => step.classList.remove('active'));
|
|
|
|
const activeStep = document.querySelector(`.step[data-step="${n}"]`);
|
|
if (activeStep) {
|
|
activeStep.classList.add('active');
|
|
}
|
|
|
|
this.state.currentStep = n;
|
|
this.updateUI();
|
|
},
|
|
|
|
nextStep() {
|
|
if (this.state.currentStep < this.state.totalSteps) {
|
|
this.showStep(this.state.currentStep + 1);
|
|
}
|
|
},
|
|
|
|
prevStep() {
|
|
if (this.state.currentStep > 1) {
|
|
this.showStep(this.state.currentStep - 1);
|
|
}
|
|
},
|
|
|
|
updateUI() {
|
|
// Update buttons
|
|
const btnPrev = document.getElementById('btn-prev');
|
|
const btnNext = document.getElementById('btn-next');
|
|
|
|
btnPrev.disabled = this.state.currentStep === 1;
|
|
|
|
if (this.state.currentStep === this.state.totalSteps) {
|
|
btnNext.textContent = 'Dokončiť';
|
|
} else {
|
|
btnNext.textContent = 'Pokračovať';
|
|
}
|
|
|
|
// Update progress bar
|
|
const progressFill = document.querySelector('.progress-fill');
|
|
const percent = ((this.state.currentStep - 1) / (this.state.totalSteps - 1)) * 100;
|
|
progressFill.style.width = `${percent}%`;
|
|
}
|
|
};
|
|
|
|
document.addEventListener('DOMContentLoaded', () => App.init());
|