Spaces:

fernando-bold
/

mystic-void-explorer

Running

'use client'

034da4b verified about 1 year ago

8.81 kB

document.addEventListener('DOMContentLoaded', () => {
    // Add any global JavaScript functionality here
    console.log('Mystic Void Explorer initialized');
    
    // Example: Toggle dark mode
    const toggleDarkMode = () => {
        document.documentElement.classList.toggle('dark');
    };
});
// Example component interaction
class VoidExplorer {
    constructor() {
        this.init();
    }
    
    init() {
        console.log('Void exploration systems online');
        
        // Initialize solar registration form if on that page
        if (window.location.pathname.includes('solar-registration')) {
            this.initSolarRegistration();
        }
    }
    initSolarRegistration() {
        console.log('Solar registration system initializing...');
        
        // Form state
        const formData = {
            company_id: '',
            property_type: 'RESIDENTIAL_SINGLE_FAMILY',
            monthly_consumption: '',
            consumption_profile: 'MEDIUM',
            roof_area: '',
            roof_type: 'FLAT',
            roof_orientation: 'SOUTH',
            roof_age: 0,
            roof_condition: 'good',
            shading_issues: 'none',
            electrical_capacity: '',
            current_energy_rate: '',
            preferred_installation_timeline: '3_months',
            budget_range: '20k-50k',
            financing_interest: 'loan',
            property_address: '',
            property_city: '',
            property_state: '',
            property_country: 'Brazil',
            utility_company: '',
            net_metering_eligible: true,
            previous_solar_consideration: false,
            solar_installation_year: null,
            energy_goals: [],
            financing_preferences: [],
            installer_preference: [],
        };

        let currentStep = 1;
        const totalSteps = 3;

        // DOM elements
        const form = document.getElementById('registration-form');
        const stepCounter = document.getElementById('step-counter');
        const progressBar = document.getElementById('progress-bar');
        const nextButton = document.getElementById('next-button');
        const submitButton = document.getElementById('submit-button');
        const backButtonContainer = document.getElementById('back-button-container');

        // Step containers
        const step1 = document.getElementById('step-1');
        const step2 = document.getElementById('step-2');
        const step3 = document.getElementById('step-3');

        // Render step 1
        step1.innerHTML = `
            <h3 class="text-lg font-semibold">Informações do Imóvel</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="text-sm font-medium text-gray-700">Tipo de Propriedade *</label>
                    <select name="property_type" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                        <option value="RESIDENTIAL_SINGLE_FAMILY">Residencial Unifamiliar</option>
                        <option value="RESIDENTIAL_MULTI_FAMILY">Residencial Multifamiliar</option>
                        <option value="COMMERCIAL_SMALL">Comercial Pequeno</option>
                        <option value="COMMERCIAL_MEDIUM">Comercial Médio</option>
                        <option value="COMMERCIAL_LARGE">Comercial Grande</option>
                        <option value="INDUSTRIAL">Industrial</option>
                        <option value="AGRICULTURAL">Agrícola</option>
                        <option value="INSTITUTIONAL">Institucional</option>
                    </select>
                </div>
                <div>
                    <label class="text-sm font-medium text-gray-700">Consumo Mensal (kWh)</label>
                    <input type="text" name="monthly_consumption" placeholder="ex: 400" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                </div>
            </div>
            <!-- Additional step 1 fields would be added here -->
        `;

        // Render step 2
        step2.innerHTML = `
            <h3 class="text-lg font-semibold">Informações Energéticas e Financeiras</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="text-sm font-medium text-gray-700">Capacidade Elétrica (kW)</label>
                    <input type="text" name="electrical_capacity" placeholder="ex: 25" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                </div>
                <div>
                    <label class="text-sm font-medium text-gray-700">Tarifa de Energia Atual (R$/kWh)</label>
                    <input type="text" name="current_energy_rate" placeholder="ex: 0.85" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                </div>
            </div>
            <!-- Additional step 2 fields would be added here -->
        `;

        // Render step 3
        step3.innerHTML = `
            <h3 class="text-lg font-semibold">Objetivos e Preferências</h3>
            
            <div>
                <label class="text-sm font-medium text-gray-700">Objetivos de Energia</label>
                <div class="mt-1 space-y-2">
                    <div class="flex items-center">
                        <input id="goal-reduce_cost" name="energy_goals" type="checkbox" value="reduce_cost" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                        <label for="goal-reduce_cost" class="ml-2 block text-sm text-gray-900">Reduzir custos</label>
                    </div>
                    <!-- Additional checkboxes would be added here -->
                </div>
            </div>
            <!-- Additional step 3 fields would be added here -->
        `;

        // Event listeners
        nextButton.addEventListener('click', () => {
            currentStep++;
            updateForm();
        });

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            // Collect all form data
            const formElements = form.elements;
            for (let i = 0; i < formElements.length; i++) {
                const element = formElements[i];
                if (element.name) {
                    if (element.type === 'checkbox') {
                        if (element.checked) {
                            if (!formData[element.name]) {
                                formData[element.name] = [];
                            }
                            formData[element.name].push(element.value);
                        }
                    } else {
                        formData[element.name] = element.value;
                    }
                }
            }
            
            console.log('Form submitted:', formData);
            alert('Cadastro enviado com sucesso!');
            // In a real app, you would send this data to your backend
        });

        function updateForm() {
            // Update step counter
            stepCounter.textContent = `Passo ${currentStep} de ${totalSteps}`;
            
            // Update progress bar
            progressBar.style.width = `${(currentStep / totalSteps) * 100}%`;
            
            // Show/hide steps
            step1.classList.toggle('hidden', currentStep !== 1);
            step2.classList.toggle('hidden', currentStep !== 2);
            step3.classList.toggle('hidden', currentStep !== 3);
            
            // Update buttons
            if (currentStep === totalSteps) {
                nextButton.classList.add('hidden');
                submitButton.classList.remove('hidden');
            } else {
                nextButton.classList.remove('hidden');
                submitButton.classList.add('hidden');
            }
            
            // Update back button
            if (currentStep > 1) {
                backButtonContainer.innerHTML = `
                    <button id="back-button" type="button" class="bg-gray-500 text-white px-6 py-2 rounded-full font-medium hover:opacity-90 transition-all">
                        Voltar
                    </button>
                `;
                document.getElementById('back-button').addEventListener('click', () => {
                    currentStep--;
                    updateForm();
                });
            } else {
                backButtonContainer.innerHTML = '';
            }
        }
    }
}

new VoidExplorer();

	document.addEventListener('DOMContentLoaded', () => {
	// Add any global JavaScript functionality here
	console.log('Mystic Void Explorer initialized');

	// Example: Toggle dark mode
	const toggleDarkMode = () => {
	document.documentElement.classList.toggle('dark');
	};
	});
	// Example component interaction
	class VoidExplorer {
	constructor() {
	this.init();
	}

	init() {
	console.log('Void exploration systems online');

	// Initialize solar registration form if on that page
	if (window.location.pathname.includes('solar-registration')) {
	this.initSolarRegistration();
	}
	}
	initSolarRegistration() {
	console.log('Solar registration system initializing...');

	// Form state
	const formData = {
	company_id: '',
	property_type: 'RESIDENTIAL_SINGLE_FAMILY',
	monthly_consumption: '',
	consumption_profile: 'MEDIUM',
	roof_area: '',
	roof_type: 'FLAT',
	roof_orientation: 'SOUTH',
	roof_age: 0,
	roof_condition: 'good',
	shading_issues: 'none',
	electrical_capacity: '',
	current_energy_rate: '',
	preferred_installation_timeline: '3_months',
	budget_range: '20k-50k',
	financing_interest: 'loan',
	property_address: '',
	property_city: '',
	property_state: '',
	property_country: 'Brazil',
	utility_company: '',
	net_metering_eligible: true,
	previous_solar_consideration: false,
	solar_installation_year: null,
	energy_goals: [],
	financing_preferences: [],
	installer_preference: [],
	};

	let currentStep = 1;
	const totalSteps = 3;

	// DOM elements
	const form = document.getElementById('registration-form');
	const stepCounter = document.getElementById('step-counter');
	const progressBar = document.getElementById('progress-bar');
	const nextButton = document.getElementById('next-button');
	const submitButton = document.getElementById('submit-button');
	const backButtonContainer = document.getElementById('back-button-container');

	// Step containers
	const step1 = document.getElementById('step-1');
	const step2 = document.getElementById('step-2');
	const step3 = document.getElementById('step-3');

	// Render step 1
	step1.innerHTML = `
	<h3 class="text-lg font-semibold">Informações do Imóvel</h3>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<div>
	<label class="text-sm font-medium text-gray-700">Tipo de Propriedade *</label>
	<select name="property_type" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
	<option value="RESIDENTIAL_SINGLE_FAMILY">Residencial Unifamiliar</option>
	<option value="RESIDENTIAL_MULTI_FAMILY">Residencial Multifamiliar</option>
	<option value="COMMERCIAL_SMALL">Comercial Pequeno</option>
	<option value="COMMERCIAL_MEDIUM">Comercial Médio</option>
	<option value="COMMERCIAL_LARGE">Comercial Grande</option>
	<option value="INDUSTRIAL">Industrial</option>
	<option value="AGRICULTURAL">Agrícola</option>
	<option value="INSTITUTIONAL">Institucional</option>
	</select>
	</div>

	<div>
	<label class="text-sm font-medium text-gray-700">Consumo Mensal (kWh)</label>
	<input type="text" name="monthly_consumption" placeholder="ex: 400" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
	</div>
	</div>

	<!-- Additional step 1 fields would be added here -->
	`;

	// Render step 2
	step2.innerHTML = `
	<h3 class="text-lg font-semibold">Informações Energéticas e Financeiras</h3>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<div>
	<label class="text-sm font-medium text-gray-700">Capacidade Elétrica (kW)</label>
	<input type="text" name="electrical_capacity" placeholder="ex: 25" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
	</div>

	<div>
	<label class="text-sm font-medium text-gray-700">Tarifa de Energia Atual (R$/kWh)</label>
	<input type="text" name="current_energy_rate" placeholder="ex: 0.85" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
	</div>
	</div>

	<!-- Additional step 2 fields would be added here -->
	`;

	// Render step 3
	step3.innerHTML = `
	<h3 class="text-lg font-semibold">Objetivos e Preferências</h3>

	<div>
	<label class="text-sm font-medium text-gray-700">Objetivos de Energia</label>
	<div class="mt-1 space-y-2">
	<div class="flex items-center">
	<input id="goal-reduce_cost" name="energy_goals" type="checkbox" value="reduce_cost" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
	<label for="goal-reduce_cost" class="ml-2 block text-sm text-gray-900">Reduzir custos</label>
	</div>
	<!-- Additional checkboxes would be added here -->
	</div>
	</div>

	<!-- Additional step 3 fields would be added here -->
	`;

	// Event listeners
	nextButton.addEventListener('click', () => {
	currentStep++;
	updateForm();
	});

	form.addEventListener('submit', (e) => {
	e.preventDefault();
	// Collect all form data
	const formElements = form.elements;
	for (let i = 0; i < formElements.length; i++) {
	const element = formElements[i];
	if (element.name) {
	if (element.type === 'checkbox') {
	if (element.checked) {
	if (!formData[element.name]) {
	formData[element.name] = [];
	}
	formData[element.name].push(element.value);
	}
	} else {
	formData[element.name] = element.value;
	}
	}
	}

	console.log('Form submitted:', formData);
	alert('Cadastro enviado com sucesso!');
	// In a real app, you would send this data to your backend
	});

	function updateForm() {
	// Update step counter
	stepCounter.textContent = `Passo ${currentStep} de ${totalSteps}`;

	// Update progress bar
	progressBar.style.width = `${(currentStep / totalSteps) * 100}%`;

	// Show/hide steps
	step1.classList.toggle('hidden', currentStep !== 1);
	step2.classList.toggle('hidden', currentStep !== 2);
	step3.classList.toggle('hidden', currentStep !== 3);

	// Update buttons
	if (currentStep === totalSteps) {
	nextButton.classList.add('hidden');
	submitButton.classList.remove('hidden');
	} else {
	nextButton.classList.remove('hidden');
	submitButton.classList.add('hidden');
	}

	// Update back button
	if (currentStep > 1) {
	backButtonContainer.innerHTML = `
	<button id="back-button" type="button" class="bg-gray-500 text-white px-6 py-2 rounded-full font-medium hover:opacity-90 transition-all">
	Voltar
	</button>
	`;
	document.getElementById('back-button').addEventListener('click', () => {
	currentStep--;
	updateForm();
	});
	} else {
	backButtonContainer.innerHTML = '';
	}
	}
	}
	}

	new VoidExplorer();