diff --git a/client/src/components/Canvas/Canvas.jsx b/client/src/components/Canvas/Canvas.jsx index 1eb97cd..5b449f1 100644 --- a/client/src/components/Canvas/Canvas.jsx +++ b/client/src/components/Canvas/Canvas.jsx @@ -1,37 +1,39 @@ -import GlobalMap from "./views/GlobalMap"; -import RegionalMap from "./views/RegionalMap"; -import Volcano from "./views/Volcano"; -import Admin from "./views/Admin"; -import Account from "./views/Account" -import Home from "./views/Home"; -import { DASHBOARD_VIEWS, ADMIN_VIEWS, VOLCANO_VIEWS } from "@/constants/viewKeys"; -import { chakra } from "@chakra-ui/react"; -import Personal from "./views/Personal"; -import Security from "./views/Security"; +// DEPRECATED -export default function Canvas(props) { - const { view } = props; - - return ( - - {/* Check if view is a tab inside the Home Header */} - { DASHBOARD_VIEWS.includes(view) && ( - - )} - {/* Check if view is a tab inside the Volcano Header */} - { VOLCANO_VIEWS.includes(view) && ( - - )} - {/* Check if view is a tab inside the Admin Header */} - { ADMIN_VIEWS.includes(view) && ( - - )} - {view === "global" && } - {view === "regional" && } - {view === "account" && } - {view === "settings" && } - {view === "personal" && } - {view === "security" && } - - ); -} \ No newline at end of file +// import GlobalMap from "./views/GlobalMap"; +// import RegionalMap from "./views/RegionalMap"; +// import Volcano from "./views/Volcano"; +// import Admin from "./views/Admin"; +// import Account from "./views/Account" +// import Home from "./views/Home"; +// import { DASHBOARD_VIEWS, ADMIN_VIEWS, VOLCANO_VIEWS } from "@/constants/viewKeys"; +// import { chakra } from "@chakra-ui/react"; +// import Personal from "./views/Personal"; +// import Security from "./views/Security"; +// +// export default function Canvas(props) { +// const { view } = props; +// +// return ( +// +// {/* Check if view is a tab inside the Home Header */} +// { DASHBOARD_VIEWS.includes(view) && ( +// +// )} +// {/* Check if view is a tab inside the Volcano Header */} +// { VOLCANO_VIEWS.includes(view) && ( +// +// )} +// {/* Check if view is a tab inside the Admin Header */} +// { ADMIN_VIEWS.includes(view) && ( +// +// )} +// {view === "global" && } +// {view === "regional" && } +// {view === "account" && } +// {view === "settings" && } +// {view === "personal" && } +// {view === "security" && } +// +// ); +// } \ No newline at end of file diff --git a/client/src/components/Canvas/CanvasComponents/AlertLevelWidget.jsx b/client/src/components/Canvas/CanvasComponents/AlertLevelWidget.jsx index c976876..345a2b9 100644 --- a/client/src/components/Canvas/CanvasComponents/AlertLevelWidget.jsx +++ b/client/src/components/Canvas/CanvasComponents/AlertLevelWidget.jsx @@ -1,62 +1,60 @@ import Widget from "./Widget"; -import { Stack, Box, Field, Input, Button, Text, Flex } from "@chakra-ui/react"; +import { Fieldset, NativeSelect, For, Box, Field, Input, Button, Text, Flex } from "@chakra-ui/react"; import { useForm } from "react-hook-form"; import { useState } from "react"; import { Asterisk } from 'lucide-react'; export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) { const { register, handleSubmit, reset, formState: {errors} } = useForm(); + const [isSubmit, setIsSubmit] = useState(false); + const onSubmit = (data) => { console.log("data: ", data); - if (data.volcanoname === '') { - return null; - } setIsSubmit(true); reset(); } - const [isSubmit, setIsSubmit] = useState(false); // Prop Forwarding const widgetProps = { id, isEditable, isDelete, DeleteWidget, isSubmit, setIsSubmit } + return ( - + {!isSubmit ? ( // DISPLAYING INPUT FIElDS AND LABELS - - - - Country Name - {/* place select drop down menu here instead of asking for input */} - - - - - - Volcano Name - - - - {errors.volcanoname && {errors.volcanoname.message}} - - - - + + + + Volcano + + + + + Country + + + + {(item) => ( + + )} + + + + + + + + + ):( // DISPLAYING ALERT LEVEL DATA diff --git a/client/src/components/Canvas/CanvasComponents/MapSettingsButton.jsx b/client/src/components/Canvas/CanvasComponents/MapSettingsButton.jsx index 1cb87e3..d60541b 100644 --- a/client/src/components/Canvas/CanvasComponents/MapSettingsButton.jsx +++ b/client/src/components/Canvas/CanvasComponents/MapSettingsButton.jsx @@ -1,7 +1,6 @@ import { Box, Checkbox, Separator , CloseButton, Text, chakra, Field, IconButton, Icon, Input, Fieldset, Flex } from "@chakra-ui/react"; import { useState } from "react"; -import { ChevronDown } from 'lucide-react'; -import { ChevronUp } from 'lucide-react'; +import { ChevronDown, ChevronUp, Settings } from 'lucide-react'; export default function MapSettingsButton() { const [open, setOpen] = useState(false); diff --git a/client/src/components/Canvas/CanvasComponents/SearchBar.jsx b/client/src/components/Canvas/CanvasComponents/SearchBar.jsx index 8c4c3e9..4c2451b 100644 --- a/client/src/components/Canvas/CanvasComponents/SearchBar.jsx +++ b/client/src/components/Canvas/CanvasComponents/SearchBar.jsx @@ -1,7 +1,7 @@ import { Input, InputGroup } from "@chakra-ui/react"; import { Search } from 'lucide-react'; -export function SearchBar({ placeholder="Enter a volcano to search", size="sm", width="210px" }) { +export function SearchBar({ placeholder, size, width, ...rest }) { return ( }> - - - {title} - {isDelete ? ( - DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/> - ):( - isSubmit ? ( - setIsSubmit(false)} size="xs" bg="base300" cursor="pointer"> - ):null - )} - - - + + {/* HEADER */} + + {title} + {isDelete ? ( + DeleteWidget(id)} size="xs" _hover={{bg: "tomato", color: "white"}}/> + ):( + isSubmit ? ( + setIsSubmit(false)} size="xs" bg="base300" cursor="pointer"> + ):null + )} + + + {/* CHILDREN */} + {children} - + ); } diff --git a/client/src/components/Canvas/views/Home.jsx b/client/src/components/Canvas/views/Home.jsx index b8214b6..cb6383f 100644 --- a/client/src/components/Canvas/views/Home.jsx +++ b/client/src/components/Canvas/views/Home.jsx @@ -1,4 +1,4 @@ -import { HStack, Flex, Tabs } from "@chakra-ui/react"; +import { HStack, Flex, Tabs, Button } from "@chakra-ui/react"; import { useState } from "react"; import MyDashboard from "./HomeTabs/MyDashboard"; import { SearchBar } from "../CanvasComponents/SearchBar"; @@ -149,8 +149,8 @@ export default function Home() { {isEditable ? ( <> - - + + {isDelete ? ( ):(null) @@ -158,7 +158,7 @@ export default function Home() { ):( <> - + )} diff --git a/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx b/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx index a88be56..b7ba6cf 100644 --- a/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx +++ b/client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx @@ -1,5 +1,5 @@ import GridLayout, { WidthProvider } from 'react-grid-layout'; -import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react'; +import { useSlotRecipe, chakra, Flex, SimpleGrid } from '@chakra-ui/react'; import CustomResizeHandle from '../../CanvasComponents/CustomResizeHandle'; import FirstWidgetButton from '../../CanvasComponents/FirstWidgetButton'; @@ -44,7 +44,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet className="layout" layout={layout} cols={16} // Total columns in grid - rowHeight={30} // Height of a single row in px + rowHeight={40} // Height of a single row in px isBounded={true} // Total width of the grid margin={[15, 5]} // [horizontal, vertical] gap onLayoutChange={onLayoutChange} diff --git a/client/src/components/Canvas/views/Volcano.jsx b/client/src/components/Canvas/views/Volcano.jsx index ada36cd..40ce215 100644 --- a/client/src/components/Canvas/views/Volcano.jsx +++ b/client/src/components/Canvas/views/Volcano.jsx @@ -10,20 +10,13 @@ import { SocialMedia } from './VolcanoTabs/SocialMedia'; import { SearchBar } from "../CanvasComponents/SearchBar"; import { SettingsButton } from "../CanvasComponents/SettingsButton"; -export default function Volcano({ view, onChangeView }) { +export default function Volcano() { return ( { - const nextView = e.value; - onChangeView(nextView); - }} > - {/* HEADER */} + {/* SUB HEADER */} @@ -46,7 +37,7 @@ export default function Volcano({ view, onChangeView }) { - {/* CANVAS */} + {/* SUB CONTENT */} diff --git a/client/src/components/Dashboard.jsx b/client/src/components/Dashboard.jsx index 3f0dc4f..275e680 100644 --- a/client/src/components/Dashboard.jsx +++ b/client/src/components/Dashboard.jsx @@ -1,93 +1,95 @@ -import Header from './Header/Header.jsx'; -import Sidebar from './Sidebar/Sidebar.jsx'; -import Canvas from './Canvas/Canvas.jsx'; -import { Grid, GridItem, useRecipe, useDialog } from '@chakra-ui/react'; -import { useState } from 'react'; -import DialogPopup from './Canvas/CanvasComponents/DialogPopup.jsx'; +// DEPRECATED -export default function Dashboard() { - const recipe = useRecipe({ key: "dashboard" }); - const styles = recipe(); - - const [darkMode, setDarkMode] = useState(false); - const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa) - const [isDelete, setIsDelete] = useState(false); - const [originalLayout, setOriginalLayout] = useState([]); - const [originalWidgets, setOriginalWidgets] = useState([]); - const [view, setView] = useState("mydashboard"); - const [layout, setLayout] = useState([]); - const [widgetArray, setWidgetArray] = useState([]); - const dialog = useDialog(); - - const beginEditIfNeeded = () => { - if ( !isEditable ) { - setOriginalLayout(layout); - setOriginalWidgets(widgetArray); - } - }; - - const onCancel = () => { - console.log("canceling changes..."); - console.log(originalWidgets); - if (originalLayout.length) { - setLayout(originalLayout.map(item => ({ - ...item, - static: true - }))); - }; - setWidgetArray(originalWidgets); - setIsEditable(false); - setIsDelete(false); - setOriginalLayout([]); - setOriginalWidgets([]); - } - - // Prevent navigation while in Edit mode without saving or cancelling - const handleViewChange = (nextView) => { - console.log("1. handling view change") - if (view === "mydashboard" && isEditable) { - console.log("2. currently editing"); - dialog.setOpen(true); - return; - - // const confirmed = window.confirm( - // "You have unsaved changes. Discard them and continue?" - // ); - // if (!confirmed) return; - // onCancel(); - } - setView(nextView); - }; - - const onLayoutChange = (newLayout) => setLayout(newLayout); - - // Prop Forwarding - const canvasProps = { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView: handleViewChange, - onCancel, isEditable, setIsEditable, isDelete, setIsDelete, widgetArray, setWidgetArray, originalWidgets, setOriginalWidgets, beginEditIfNeeded - }; - const sidebarProps = { view, onChangeView: handleViewChange, darkMode, setDarkMode }; - const headerProps = { onChangeView: handleViewChange }; - - return ( - <> - - - -
- - - - - - - - - - ); -} \ No newline at end of file +// import Header from './Header/Header.jsx'; +// import Sidebar from './Sidebar/Sidebar.jsx'; +// import Canvas from './Canvas/Canvas.jsx'; +// import { Grid, GridItem, useRecipe, useDialog } from '@chakra-ui/react'; +// import { useState } from 'react'; +// import DialogPopup from './Canvas/CanvasComponents/DialogPopup.jsx'; +// +// export default function Dashboard() { +// const recipe = useRecipe({ key: "dashboard" }); +// const styles = recipe(); +// +// const [darkMode, setDarkMode] = useState(false); +// const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa) +// const [isDelete, setIsDelete] = useState(false); +// const [originalLayout, setOriginalLayout] = useState([]); +// const [originalWidgets, setOriginalWidgets] = useState([]); +// const [view, setView] = useState("mydashboard"); +// const [layout, setLayout] = useState([]); +// const [widgetArray, setWidgetArray] = useState([]); +// const dialog = useDialog(); +// +// const beginEditIfNeeded = () => { +// if ( !isEditable ) { +// setOriginalLayout(layout); +// setOriginalWidgets(widgetArray); +// } +// }; +// +// const onCancel = () => { +// console.log("canceling changes..."); +// console.log(originalWidgets); +// if (originalLayout.length) { +// setLayout(originalLayout.map(item => ({ +// ...item, +// static: true +// }))); +// }; +// setWidgetArray(originalWidgets); +// setIsEditable(false); +// setIsDelete(false); +// setOriginalLayout([]); +// setOriginalWidgets([]); +// } +// +// // Prevent navigation while in Edit mode without saving or cancelling +// const handleViewChange = (nextView) => { +// console.log("1. handling view change") +// if (view === "mydashboard" && isEditable) { +// console.log("2. currently editing"); +// dialog.setOpen(true); +// return; +// +// // const confirmed = window.confirm( +// // "You have unsaved changes. Discard them and continue?" +// // ); +// // if (!confirmed) return; +// // onCancel(); +// } +// setView(nextView); +// }; +// +// const onLayoutChange = (newLayout) => setLayout(newLayout); +// +// // Prop Forwarding +// const canvasProps = { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView: handleViewChange, +// onCancel, isEditable, setIsEditable, isDelete, setIsDelete, widgetArray, setWidgetArray, originalWidgets, setOriginalWidgets, beginEditIfNeeded +// }; +// const sidebarProps = { view, onChangeView: handleViewChange, darkMode, setDarkMode }; +// const headerProps = { onChangeView: handleViewChange }; +// +// return ( +// <> +// +// +// +//
+// +// +// +// +// +// +// +// +// +// ); +// } \ No newline at end of file diff --git a/client/src/components/Sidebar/Sidebar.jsx b/client/src/components/Sidebar/Sidebar.jsx index 0e9069d..bea4228 100644 --- a/client/src/components/Sidebar/Sidebar.jsx +++ b/client/src/components/Sidebar/Sidebar.jsx @@ -8,7 +8,6 @@ import { Mountain, House, Earth, MapPin, ShieldUser, Menu, CircleUserRound, KeyR export default function Sidebar() { const { toggleColorMode } = useColorMode(); const [isOpen, setIsOpen] = useState(true); - const [activeButton, setActiveButton] = useState(0) const recipe = useSlotRecipe({ key: "sidebar" }); const styles = recipe(); @@ -37,8 +36,7 @@ export default function Sidebar() { ]; const toggleSidebar = () => { - if (isOpen) setIsOpen(false); - else setIsOpen(true); + setIsOpen((prev) => !prev); }; return ( @@ -49,7 +47,7 @@ export default function Sidebar() { {buttons.map((button, idx) => { const Icon = button.icon; - return ( + return ( // TODO: don't use idx as a key