document.addEventListener('DOMContentLoaded', function () {
const step1 = document.getElementById('step1');
const dynamicSteps = document.getElementById('dynamicSteps');
const step3 = document.getElementById('step3');
const nextToStep2 = document.getElementById('nextToStep2');
const prevStep = document.getElementById('prevStep');
const nextStep = document.getElementById('nextStep');
let selectedOptions = [];
let currentStep = 0;
let stepContainers = [];
// Első oldal: Választás kezelése több elem kijelölése
document.querySelectorAll('.option').forEach(option => {
option.addEventListener('click', function () {
const type = option.getAttribute('data-type');
if (selectedOptions.includes(type)) {
selectedOptions = selectedOptions.filter(opt => opt !== type);
option.style.backgroundColor = ''; // Visszaáll alapra
} else {
selectedOptions.push(type);
option.style.backgroundColor = '#007bff'; // Kijelölés
}
nextToStep2.disabled = selectedOptions.length === 0;
nextToStep2.style.cursor = selectedOptions.length === 0 ? 'not-allowed' : 'pointer';
});
});
// Tovább a dinamikus oldalakra
nextToStep2.addEventListener('click', () => {
if (selectedOptions.length === 0) return;
step1.style.display = 'none';
dynamicSteps.style.display = 'flex';
stepContainers = generateDynamicSteps(selectedOptions);
showCurrentStep(stepContainers);
});
// Dinamikus oldalak generálása
function generateDynamicSteps(options) {
const containers = options.map(type => createStep(type));
containers.forEach(container => dynamicSteps.insertBefore(container, dynamicSteps.firstChild));
updateNavigationButtons(containers);
return containers;
}
// Egyedi lépés létrehozása
function createStep(type) {
const stepContainer = document.createElement('div');
stepContainer.classList.add('step');
stepContainer.style.display = 'none'; // Kezdetben rejtett
stepContainer.style.flexDirection = 'column';
stepContainer.style.alignItems = 'center';
// Cím
const title = document.createElement('h2');
title.textContent = `${type.charAt(0).toUpperCase() + type.slice(1)} beállítása`;
title.style.textAlign = 'center';
stepContainer.appendChild(title);
// Mennyiség csúszka a cím alatt középen
const mennyisegContainer = document.createElement('div');
mennyisegContainer.style.display = 'flex';
mennyisegContainer.style.flexDirection = 'column';
mennyisegContainer.style.alignItems = 'center';
mennyisegContainer.style.marginBottom = '20px';
const mennyisegLabel = document.createElement('label');
mennyisegLabel.style.fontWeight = 'bold';
mennyisegLabel.textContent = 'Mennyiség: ';
const mennyisegValue = document.createElement('span');
mennyisegValue.textContent = '1';
mennyisegLabel.appendChild(mennyisegValue);
const mennyisegSlider = document.createElement('input');
mennyisegSlider.type = 'range';
mennyisegSlider.min = '1';
mennyisegSlider.max = '10';
mennyisegSlider.value = '1';
mennyisegSlider.step = '1';
mennyisegSlider.style.width = '200px';
mennyisegSlider.style.marginTop = '10px';
mennyisegSlider.addEventListener('input', () => {
mennyisegValue.textContent = mennyisegSlider.value;
updateSVGs(stepContainer, type, mennyisegSlider.value);
});
mennyisegContainer.appendChild(mennyisegLabel);
mennyisegContainer.appendChild(mennyisegSlider);
stepContainer.appendChild(mennyisegContainer);
// Kezdetben egy SVG hozzáadása
updateSVGs(stepContainer, type, mennyisegSlider.value);
return stepContainer;
}
// SVG frissítése mennyiség alapján
function updateSVGs(container, type, count) {
container.querySelectorAll('.svg-group').forEach(group => group.remove()); // Régi SVG-k és csúszkák eltávolítása
for (let i = 0; i < count; i++) {
const svgGroup = document.createElement('div');
svgGroup.classList.add('svg-group');
svgGroup.style.marginBottom = '20px';
svgGroup.style.display = 'flex';
svgGroup.style.flexDirection = 'column';
svgGroup.style.alignItems = 'center';
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', 200);
svg.setAttribute('height', 400);
svg.style.border = '1px solid black';
svg.style.display = 'block';
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', 5);
rect.setAttribute('y', 5);
rect.setAttribute('width', 190);
rect.setAttribute('height', 390);
rect.setAttribute('fill', 'none');
rect.setAttribute('stroke', 'black');
rect.setAttribute('stroke-width', 5);
if (type === 'ablak') {
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', 5);
line.setAttribute('y1', 200);
line.setAttribute('x2', 195);
line.setAttribute('y2', 200);
line.setAttribute('stroke', 'black');
line.setAttribute('stroke-width', 5);
svg.appendChild(rect);
svg.appendChild(line);
} else if (type === 'redony') {
const bottomBar = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
bottomBar.setAttribute('x', 5);
bottomBar.setAttribute('y', 370);
bottomBar.setAttribute('width', 190);
bottomBar.setAttribute('height', 20);
bottomBar.setAttribute('fill', '#666');
bottomBar.setAttribute('stroke', 'black');
bottomBar.setAttribute('stroke-width', 2);
svg.appendChild(rect);
for (let i = 30; i {
const magassag = magassagSlider.value;
const svg = container.querySelector('svg');
svg.setAttribute('height', magassag);
const rect = svg.querySelector('rect');
rect.setAttribute('height', magassag - 10);
if (type === 'ablak' || type === 'redony') {
const line = svg.querySelector('line');
if (line) {
line.setAttribute('y1', magassag / 2);
line.setAttribute('y2', magassag / 2);
}
}
magassagValue.textContent = (magassag / 200).toFixed(2); // Méterre átváltás
});
sliderContainer.appendChild(magassagLabel);
sliderContainer.appendChild(magassagSlider);
// Szélesség csúszka
const szelessegLabel = document.createElement('label');
szelessegLabel.style.fontWeight = 'bold';
szelessegLabel.textContent = 'Szélesség (méter): ';
const szelessegValue = document.createElement('span');
szelessegValue.textContent = '1.00';
szelessegLabel.appendChild(szelessegValue);
const szelessegSlider = document.createElement('input');
szelessegSlider.type = 'range';
szelessegSlider.min = '100';
szelessegSlider.max = '400';
szelessegSlider.value = '200';
szelessegSlider.step = '10';
szelessegSlider.style.width = '200px';
szelessegSlider.addEventListener('input', () => {
const szelesseg = szelessegSlider.value;
const svg = container.querySelector('svg');
svg.setAttribute('width', szelesseg);
const rect = svg.querySelector('rect');
rect.setAttribute('width', szelesseg - 10);
if (type === 'ablak' || type === 'redony' || type === 'ajto') {
const line = svg.querySelector('line');
if (line) {
line.setAttribute('x2', szelesseg - 5);
}
}
szelessegValue.textContent = (szelesseg / 200).toFixed(2); // Méterre átváltás
});
sliderContainer.appendChild(szelessegLabel);
sliderContainer.appendChild(szelessegSlider);
container.appendChild(sliderContainer);
}
// Navigációs gombok frissítése
function updateNavigationButtons(steps) {
prevStep.addEventListener('click', () => {
if (currentStep > 0) {
steps[currentStep].style.display = 'none';
currentStep--;
showCurrentStep(steps);
}
});
nextStep.addEventListener('click', () => {
if (currentStep < steps.length - 1) {
steps[currentStep].style.display = 'none';
currentStep++;
showCurrentStep(steps);
} else {
// Ha az utolsó oldalról lépünk tovább, akkor az ajánlatkérő űrlapra jutunk
dynamicSteps.style.display = 'none';
step3.style.display = 'flex';
}
});
}
// Jelenlegi lépés megjelenítése
function showCurrentStep(steps) {
steps[currentStep].style.display = 'flex';
prevStep.style.display = currentStep === 0 ? 'none' : 'block';
nextStep.textContent = currentStep === steps.length - 1 ? 'Ajánlatkérés' : 'Tovább';
}
});
