Bibhuti-Solutions/new_raffles
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add CostCalculator module with CRUD functionality and frontend integration

Browse Source 
- Created new module for CostCalculator with necessary routes and controllers.
- Implemented views for creating, editing, and displaying costs.
- Added form partials for cost input with validation.
- Integrated living status options in the form.
- Developed frontend logic for cost calculation steps with dynamic UI updates.
- Included necessary assets (JS and SCSS) for styling and functionality.
- Updated constants for living status options.
- Enhanced existing client-side cost calculator page with new features.
This commit is contained in:
Subash
2025-08-13 17:58:49 +05:45
parent 03c5955768
commit 165012ea56
38 changed files with 1405 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
public/raffles/assets/js/style.js
View File

@@ -584,16 +584,17 @@ document.addEventListener('keydown', e => {
});
// cost calculator progress
// cost calculator progress
let currentStep = 1;
const totalSteps = 5;
const totalSteps = 7; // updated to match HTML
const monkey = document.getElementById('monkey').querySelector('img');
const monkeyContainer = document.getElementById('monkey');
const nextBtn = document.querySelector('.next-btn button');
const nextBtn = document.getElementById('nextBtn');
const doneBtn = document.getElementById('doneBtn');
const bananalast = document.getElementById('b5');
const monkeyImages = [
"/raffles/assets/images/icons/monkey1.png",
"/raffles/assets/images/icons/monkey2.png",
@@ -608,33 +609,25 @@ nextBtn.addEventListener('click', () => {
if (currentStep < totalSteps) {
currentStep++;
// Move monkey
// Calculate monkey position based on window width
let percent;
if (window.innerWidth <= 540) {
const percent = ((currentStep - 1) / (totalSteps - 0.2)) * 100;
monkeyContainer.style.left = percent + '%';
}
else if (window.innerWidth <= 768) {
const percent = ((currentStep - 1) / (totalSteps - 0.3)) * 100;
monkeyContainer.style.left = percent + '%';
}
else if (window.innerWidth <= 992) {
const percent = ((currentStep - 1) / (totalSteps - 0.7)) * 100;
monkeyContainer.style.left = percent + '%';
}
else if (window.innerWidth <= 1180) {
const percent = ((currentStep - 1) / (totalSteps - 0.2)) * 100;
monkeyContainer.style.left = percent + '%';
}
else {
const percent = ((currentStep - 1) / (totalSteps - 0.5)) * 100;
monkeyContainer.style.left = percent + '%';
percent = ((currentStep - 1) / (totalSteps - 0.2)) * 100;
} else if (window.innerWidth <= 768) {
percent = ((currentStep - 1) / (totalSteps - 0.3)) * 100;
} else if (window.innerWidth <= 992) {
percent = ((currentStep - 1) / (totalSteps - 0.7)) * 100;
} else if (window.innerWidth <= 1180) {
percent = ((currentStep - 1) / (totalSteps - 0.2)) * 100;
} else {
percent = ((currentStep - 1) / (totalSteps - 0.5)) * 100;
}
monkeyContainer.style.left = percent + '%';
// Change monkey image
// Update monkey image
monkey.src = monkeyImages[currentStep - 1];
// Update step content
// Switch step content
const currentContent = document.getElementById('step' + (currentStep - 1));
const nextContent = document.getElementById('step' + currentStep);
if (currentContent && nextContent) {
@@ -642,30 +635,29 @@ nextBtn.addEventListener('click', () => {
nextContent.classList.add('active');
}
// At final step (Step 5), hide Next and show Done
// Show done button on last step
if (currentStep === totalSteps) {
nextBtn.style.display = 'none';
doneBtn.style.display = 'block';
}
} w
}
});
doneBtn.addEventListener('click', () => {
bananalast.classList.add('active');
if (window.innerWidth <= 992) {
// On mobile: show 7th image and move down
monkey.src = monkeyImages[6]; // 7th image (index 6)
monkey.src = monkeyImages[6]; // last image
monkeyContainer.style.top = '142%';
monkeyContainer.style.left = '40%'; // Optional: keep it centered or adjust as needed
monkeyContainer.style.left = '40%';
} else {
// On desktop: show 6th image and move right
monkey.src = monkeyImages[5]; // 6th image (index 5)
monkey.src = monkeyImages[5];
monkeyContainer.style.left = '110%';
monkeyContainer.style.top = '-120%'; // Reset top if changed previously
monkeyContainer.style.top = '-120%';
}
});
// Final monkey image