diff --git a/src/ConferenceEvent.jsx b/src/ConferenceEvent.jsx index 612a4648..25fdda85 100644 --- a/src/ConferenceEvent.jsx +++ b/src/ConferenceEvent.jsx @@ -3,200 +3,360 @@ import "./ConferenceEvent.css"; import TotalCost from "./TotalCost"; import { useSelector, useDispatch } from "react-redux"; import { incrementQuantity, decrementQuantity } from "./venueSlice"; -const ConferenceEvent = () => { - const [showItems, setShowItems] = useState(false); - const [numberOfPeople, setNumberOfPeople] = useState(1); - const venueItems = useSelector((state) => state.venue); - const dispatch = useDispatch(); - const remainingAuditoriumQuantity = 3 - venueItems.find(item => item.name === "Auditorium Hall (Capacity:200)").quantity; - - - const handleToggleItems = () => { - console.log("handleToggleItems called"); - setShowItems(!showItems); - }; - - const handleAddToCart = (index) => { - if (venueItems[index].name === "Auditorium Hall (Capacity:200)" && venueItems[index].quantity >= 3) { - return; - } - dispatch(incrementQuantity(index)); - }; - - const handleRemoveFromCart = (index) => { - if (venueItems[index].quantity > 0) { - dispatch(decrementQuantity(index)); - } - }; - const handleIncrementAvQuantity = (index) => { - }; - - const handleDecrementAvQuantity = (index) => { - }; - - const handleMealSelection = (index) => { - - }; +import { decrementAvQuantity, incrementAvQuantity } from "./avSlice"; +import { toggleMealSelection } from "./mealsSlice"; - const getItemsFromTotalCost = () => { - const items = []; - }; - - const items = getItemsFromTotalCost(); - - const ItemsDisplay = ({ items }) => { - - }; - const calculateTotalCost = (section) => { - let totalCost = 0; - if (section === "venue") { - venueItems.forEach((item) => { - totalCost += item.cost * item.quantity; - }); - } - return totalCost; - }; - const venueTotalCost = calculateTotalCost("venue"); - - const navigateToProducts = (idType) => { - if (idType == '#venue' || idType == '#addons' || idType == '#meals') { - if (showItems) { // Check if showItems is false - setShowItems(!showItems); // Toggle showItems to true only if it's currently false - } +const ConferenceEvent = () => { + const [showItems, setShowItems] = useState(false); + const [numberOfPeople, setNumberOfPeople] = useState(1); + const venueItems = useSelector((state) => state.venue); + const avItems = useSelector((state) => state.av); + const mealsItems = useSelector((state)=> state.meal); + const dispatch = useDispatch(); + const remainingAuditoriumQuantity = + 3 - + venueItems.find((item) => item.name === "Auditorium Hall (Capacity:200)") + .quantity; + + const handleToggleItems = () => { + console.log("handleToggleItems called"); + setShowItems(!showItems); + }; + + const handleAddToCart = (index) => { + if ( + venueItems[index].name === "Auditorium Hall (Capacity:200)" && + venueItems[index].quantity >= 3 + ) { + return; + } + dispatch(incrementQuantity(index)); + }; + + const handleRemoveFromCart = (index) => { + if (venueItems[index].quantity > 0) { + dispatch(decrementQuantity(index)); + } + }; + const handleIncrementAvQuantity = (index) => { + dispatch(incrementAvQuantity(index)); + }; + + const handleDecrementAvQuantity = (index) => { + dispatch(decrementAvQuantity(index)); + }; + + const handleMealSelection = (index) => { + const item = mealsItems[index]; + if (item.selected && item.type === "mealForPeople") { + // Ensure numberOfPeople is set before toggling selection + const newNumberOfPeople = item.selected ? numberOfPeople : 0; + dispatch(toggleMealSelection(index, newNumberOfPeople)); + } else { + dispatch(toggleMealSelection(index)); + } + }; + + const getItemsFromTotalCost = () => { + const items = []; + venueItems.forEach((item) => { + if (item.quantity > 0) { + items.push({ ...item, type: "venue" }); + } + }); + avItems.forEach((item) => { + if ( + item.quantity > 0 && + !items.some((i) => i.name === item.name && i.type === "av") + ) { + items.push({ ...item, type: "av" }); + } + }); + mealsItems.forEach((item) => { + if (item.selected) { + const itemForDisplay = { ...item, type: "meals" }; + if (item.numberOfPeople) { + itemForDisplay.numberOfPeople = numberOfPeople; } + items.push(itemForDisplay); } + }); + return items; + }; + + const items = getItemsFromTotalCost(); + const ItemsDisplay = ({ items }) => { + console.log(items); return ( - <> - -
Conference Expense Planner
-
-
- navigateToProducts("#venue")} >Venue - navigateToProducts('#addons')}>Add-ons - navigateToProducts('#meals')}>Meals -
- -
- -
- {!showItems - ? - ( -
-
-
- -

Venue Room Selection

+ <> +
+ {items.length === 0 &&

No items selected

} + + + + + + + + + + + {items.map((item, index) => ( + + + + + + + ))} + +
NameUnit CostQuantitySubtotal
{item.name}${item.cost} + {item.type === "meals" || item.numberOfPeople + ? ` For ${numberOfPeople} people` + : item.quantity} + + {item.type === "meals" || item.numberOfPeople + ? `${item.cost * numberOfPeople}` + : `${item.cost * item.quantity}`} +
-
- {venueItems.map((item, index) => ( -
-
- {item.name} -
-
{item.name}
-
${item.cost}
-
- {venueItems[index].name === "Auditorium Hall (Capacity:200)" ? ( - - <> - - - {venueItems[index].quantity > 0 ? ` ${venueItems[index].quantity}` : "0"} - + + ); + }; + const calculateTotalCost = (section) => { + let totalCost = 0; + if (section === "venue") { + venueItems.forEach((item) => { + totalCost += item.cost * item.quantity; + }); + } else if (section == "av") { + avItems.forEach((item) => { + totalCost += item.cost * item.quantity; + }); + } else if (section === "meals") { + mealsItems.forEach((item) => { + if (item.selected) { + totalCost += item.cost * numberOfPeople; + } + }); + } + return totalCost; + }; + const venueTotalCost = calculateTotalCost("venue"); + const avTotalCost = calculateTotalCost("av"); + const mealsTotalCost = calculateTotalCost("meals"); + const navigateToProducts = (idType) => { + if (idType == "#venue" || idType == "#addons" || idType == "#meals") { + if (showItems) { + // Check if showItems is false + setShowItems(!showItems); // Toggle showItems to true only if it's currently false + } + } + }; + + const totalCosts = { + venue: venueTotalCost, + av: avTotalCost, + meals: mealsTotalCost, + }; + + return ( + <> + +
Conference Expense Planner
+
+ - - ) : ( -
- - - {venueItems[index].quantity > 0 ? ` ${venueItems[index].quantity}` : "0"} - - - - -
- )} -
-
- ))}
-
Total Cost: ${venueTotalCost}
-
- - {/*Necessary Add-ons*/} -
- - -
- -

Add-ons Selection

- -
-
- -
-
Total Cost:
- -
- - {/* Meal Section */} - -
- -
- -

Meals Selection

-
- -
- -
-
- -
-
Total Cost:
- - -
-
- ) : ( -
- } /> + +
+ {!showItems ? ( +
+
+
+

Venue Room Selection

+
+
+ {venueItems.map((item, index) => ( +
+
+ {item.name} +
+
{item.name}
+
${item.cost}
+
+ {venueItems[index].name === + "Auditorium Hall (Capacity:200)" ? ( + <> + + + {venueItems[index].quantity > 0 + ? ` ${venueItems[index].quantity}` + : "0"} + + + + ) : ( +
+ + + {venueItems[index].quantity > 0 + ? ` ${venueItems[index].quantity}` + : "0"} + +
- ) - } + )} +
+
+ ))} +
+
Total Cost: ${venueTotalCost}
+
+ {/*Necessary Add-ons*/} +
+
+

Add-ons Selection

+
+
+ {avItems.map((item, index) => ( +
+
+ {item.name} +
+
{item.name}
+
${item.cost}
+
+ + {item.quantity} + +
+
+ ))} +
+
Total Cost: {avTotalCost}
+
+ {/* Meal Section */} +
+
+

Meals Selection

+
+
+ + setNumberOfPeople(parseInt(e.target.value))} + min="1" + /> +
+
+ {mealsItems.map((item, index) => ( +
+
+ handleMealSelection(index)} + /> + +
+
${item.cost}
+
+ ))} +
+
Total Cost:{mealsTotalCost}
- - - ); +
+ ) : ( +
+ } + /> +
+ )} +
+ + ); }; export default ConferenceEvent; diff --git a/src/TotalCost.jsx b/src/TotalCost.jsx index 845abca9..d95cd762 100644 --- a/src/TotalCost.jsx +++ b/src/TotalCost.jsx @@ -1,27 +1,25 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect } from "react"; import "./TotalCost.css"; - const TotalCost = ({ totalCosts, ItemsDisplay }) => { - - + const total_amount = totalCosts.venue + totalCosts.av + totalCosts.meals; return (
-

Total cost for the event

+

+

Total cost for the event

+

- + ${totalCosts}

- -
- -
+
+ +
); }; - export default TotalCost; diff --git a/src/avSlice.js b/src/avSlice.js index cdd79aac..edc8e2f9 100644 --- a/src/avSlice.js +++ b/src/avSlice.js @@ -3,16 +3,51 @@ import { createSlice } from "@reduxjs/toolkit"; export const avSlice = createSlice({ name: "av", initialState: [ - - ], + { + img: "https://pixabay.com/images/download/business-20031_640.jpg", + name: "Projectors", + cost: 200, + quantity: 0, + }, + { + img: "https://pixabay.com/images/download/speakers-4109274_640.jpg", + name: "Speaker", + cost: 35, + quantity: 0, + }, + { + img: "https://pixabay.com/images/download/public-speaking-3926344_640.jpg", + name: "Microphones", + cost: 45, + quantity: 0, + }, + { + img: "https://pixabay.com/images/download/whiteboard-2903269_640.png", + name: "Whiteboards", + cost: 80, + quantity: 0, + }, + { + img: "https://pixabay.com/images/download/signpost-235079_640.jpg", + name: "Signage", + cost: 80, + quantity: 0, + }, + ], reducers: { incrementAvQuantity: (state, action) => { - + const item = state[action.payload]; + if(item){ + item.quantity++; + } }, decrementAvQuantity: (state, action) => { - + const item =state[action.payload]; + if(item && item.quantity >0){ + item.quantity--; + } }, }, }); diff --git a/src/mealsSlice.js b/src/mealsSlice.js index faf8138a..54ac8a6d 100644 --- a/src/mealsSlice.js +++ b/src/mealsSlice.js @@ -2,12 +2,16 @@ import { createSlice } from '@reduxjs/toolkit'; export const mealsSlice = createSlice({ - name: 'meals', + name: "meals", initialState: [ - + { name: "Breakfast", cost: 50, selected: false }, + { name: "High Tea", cost: 25, selected: false }, + { name: "Lunch", cost: 65, selected: false }, + { name: "Dinner", cost: 70, selected: false }, ], reducers: { toggleMealSelection: (state, action) => { + state[action.payload].selected = !state[action.payload].selected; }, }, }); diff --git a/src/store.js b/src/store.js index f05b9f8f..95c00848 100644 --- a/src/store.js +++ b/src/store.js @@ -1,9 +1,13 @@ // store.js import { configureStore } from '@reduxjs/toolkit'; import venueReducer from './venueSlice'; +import avReducer from "./avSlice"; +import mealsReducer from "./mealsSlice"; export default configureStore({ reducer: { venue: venueReducer, + av: avReducer, + meal: mealsReducer, }, }); diff --git a/src/venueSlice.js b/src/venueSlice.js index 350d353a..dd612b76 100644 --- a/src/venueSlice.js +++ b/src/venueSlice.js @@ -52,6 +52,7 @@ export const venueSlice = createSlice({ state[index].quantity--; } }, + }, });