From 6ceb2cba8f2627ae2f06fb1bd39c98e24f782fce Mon Sep 17 00:00:00 2001 From: James Almeida <703253+jamesalmeida@users.noreply.github.com> Date: Thu, 3 Oct 2024 23:54:53 -0700 Subject: [PATCH] Updated carSettings functionality --- src/App.js | 9 +- .../Apps/CarSettings/CarSettings.css | 125 ++++++- .../Apps/CarSettings/CarSettings.js | 35 +- .../components/CarWashMode/CarWashMode.css | 36 ++ .../components/CarWashMode/CarWashMode.js | 16 + .../Apps/CarSettings/components/Controls.js | 313 +++++++++++++++--- .../components/MirrorsAdjustment.js | 16 + .../components/SteeringAdjustment.js | 16 + src/components/Clock/Clock.css | 2 +- .../MapNavigation/MapNavigation.css | 7 + src/components/MapNavigation/MapNavigation.js | 6 +- src/components/OutsideTemp/OutsideTemp.css | 2 +- .../VerticalSliderPanel.css | 2 +- 13 files changed, 515 insertions(+), 70 deletions(-) create mode 100644 src/components/Apps/CarSettings/components/CarWashMode/CarWashMode.css create mode 100644 src/components/Apps/CarSettings/components/CarWashMode/CarWashMode.js create mode 100644 src/components/Apps/CarSettings/components/MirrorsAdjustment.js create mode 100644 src/components/Apps/CarSettings/components/SteeringAdjustment.js diff --git a/src/App.js b/src/App.js index 89b1a33..ae8c2f6 100644 --- a/src/App.js +++ b/src/App.js @@ -45,6 +45,7 @@ function App() { const [leftTurnSignal, setLeftTurnSignal] = useState(false); const [rightTurnSignal, setRightTurnSignal] = useState(false); const [isRearViewCameraActive, setIsRearViewCameraActive] = useState(false); + const [isWifiMenuOpen, setIsWifiMenuOpen] = useState(false); const appsTopShelf = [ 'wipers', @@ -317,6 +318,12 @@ function App() { window.removeEventListener('keydown', handleKeyDown); }; }, [leftTurnSignal, rightTurnSignal]); + + const handleWifiClick = () => { + setIsWifiMenuOpen(true); + setActiveNavIcon('car-settings'); + }; + return ( @@ -375,7 +382,7 @@ function App() { className="rightPanel" id="rightPanel" > - + div:nth-child(4), .auto-lights-btn { border-top-right-radius: 5px; border-bottom-right-radius: 5px; @@ -200,6 +209,14 @@ border: 1px solid gray; } +.row-5 { + margin-bottom: 20px; +} + +.flex-column div:first-child { + border-bottom-left-radius: 0px; +} + .auto-high-beams-btn { width: 20%; margin-left: 4%; @@ -207,7 +224,12 @@ } .row-2 div { - padding: 8% 0%; + padding: 0px; + display: flex; + justify-content: center; + align-items: center; + height: 80px; + flex-direction: column; } #wipers-on-off-btn, @@ -267,3 +289,96 @@ flex: 1; } +.btn.active { + background-color: #007bff; +; + color: white; + } + + .red-dot { + display: inline-block; + margin-left: 5px; + width: 8px; + height: 8px; + background-color: red; + border-radius: 50%; + } + + .child-lock-popup { + position: absolute; + top: 50%; + display: flex; + gap: 10px; + /* justify-content: space-around; */ + background-color: #fff; + padding: 20px; + border-radius: 6px; + border: 1px solid; + /* Additional styling as needed */ + } + + .subtext { + font-size: 8px; + /* border-top-right-radius: none !important; */ + /* border-bottom-right-radius: none !important; */ + } + + .car-wash-mode-popup { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #fff; + /* Additional styling for overlay effect */ + } + + .modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; + } + + .adjustment-modal { + background-color: white; + padding: 20px; + border-radius: 10px; + text-align: center; + } + + .adjustment-controls { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; + margin: 20px 0; + } + + .adjustment-btn { + padding: 10px; + font-size: 18px; + background-color: #f0f0f0; + border: 1px solid #ccc; + border-radius: 5px; + cursor: pointer; + } + + .adjustment-btn:nth-child(1) { grid-column: 2; } + .adjustment-btn:nth-child(2) { grid-column: 2; } + .adjustment-btn:nth-child(3) { grid-column: 1; grid-row: 2; } + .adjustment-btn:nth-child(4) { grid-column: 3; grid-row: 2; } + + .close-btn { + padding: 10px 20px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + } \ No newline at end of file diff --git a/src/components/Apps/CarSettings/CarSettings.js b/src/components/Apps/CarSettings/CarSettings.js index 6c5f78c..3e442c3 100644 --- a/src/components/Apps/CarSettings/CarSettings.js +++ b/src/components/Apps/CarSettings/CarSettings.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import UserProfile from '../../UserProfile/UserProfile'; import { Controls } from './components/Controls'; import { Dynamics } from './components/Dynamics'; @@ -39,13 +39,24 @@ const leftPanelItems = [ { icon: 'wifi', alt: 'Wifi', label: 'Wifi' }, ]; -export const CarSettings = () => { +export const CarSettings = ({ isWifiMenuOpen, setIsWifiMenuOpen }) => { const [activePanel, setActivePanel] = useState('Controls'); + useEffect(() => { + if (isWifiMenuOpen) { + setActivePanel('Wifi'); + setIsWifiMenuOpen(false); + } + }, [isWifiMenuOpen, setIsWifiMenuOpen]); + const getButtonClassName = (button) => { return `button ${button.toLowerCase().replace(/\s+/g, '-')}`; }; + const handleWifiClick = () => { + setActivePanel('Wifi'); + }; + return (
@@ -53,13 +64,19 @@ export const CarSettings = () => { Search
- - {topBarItems.map((item, index) => ( -
- {item.alt} - {item.text && item.text} -
- ))} +
+ + {topBarItems.map((item, index) => ( +
+ {item.alt} + {item.text && item.text} +
+ ))} +
diff --git a/src/components/Apps/CarSettings/components/CarWashMode/CarWashMode.css b/src/components/Apps/CarSettings/components/CarWashMode/CarWashMode.css new file mode 100644 index 0000000..5d87b8c --- /dev/null +++ b/src/components/Apps/CarSettings/components/CarWashMode/CarWashMode.css @@ -0,0 +1,36 @@ +.car-wash-mode-container { + background-color: white; + border-radius: 10px; + padding: 20px; + width: 100%; + height: 100%; + /* display: flex; + flex-direction: column; */ + } + + .car-wash-mode-header { + /* display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; */ + } + + .car-wash-mode-title { + font-size: 24px; + font-weight: bold; + } + + .close-button { + /* background: none; */ + /* border: none; */ + /* cursor: pointer; */ + /* padding: 0; */ + } + + .car-wash-mode-content { + /* flex-grow: 1; + display: flex; + justify-content: center; + align-items: center; + font-size: 18px; */ + } \ No newline at end of file diff --git a/src/components/Apps/CarSettings/components/CarWashMode/CarWashMode.js b/src/components/Apps/CarSettings/components/CarWashMode/CarWashMode.js new file mode 100644 index 0000000..c974848 --- /dev/null +++ b/src/components/Apps/CarSettings/components/CarWashMode/CarWashMode.js @@ -0,0 +1,16 @@ +import React from 'react'; +import './CarWashMode.css'; + +export default function CarWashMode({ onClose }) { + return ( +
+
+
Car Wash Mode
+
Coming Soon
+
+ Exit Car Wash Mode +
+
+
+ ); +} \ No newline at end of file diff --git a/src/components/Apps/CarSettings/components/Controls.js b/src/components/Apps/CarSettings/components/Controls.js index fc482d9..76a7fda 100644 --- a/src/components/Apps/CarSettings/components/Controls.js +++ b/src/components/Apps/CarSettings/components/Controls.js @@ -1,52 +1,267 @@ +import React, { useState, useEffect } from 'react'; +import CarWashMode from './CarWashMode/CarWashMode'; +import '../CarSettings.css'; // Make sure to create and import corresponding CSS +import { MirrorsAdjustment } from './MirrorsAdjustment'; +import { SteeringAdjustment } from './SteeringAdjustment'; + export const Controls = () => { - return ( -
-
-
Off
-
Parking
-
On
-
Auto
-
High Beams
-
-
-
-
Fold Mirrors
-
Child Lock
-
Window Lock
-
-
-
-
On/Off
-
Auto
-
I
-
II
-
III
-
IIII
-
-
-
-
-
Mirrors
-
Steering
-
-
-
-
Dashcam
-
Sentry
-
-
-
-
Car Wash
-
Glovebox
-
-
-
-
-
- -
-
Auto
+ // Row 1: Light modes and High Beams + const [selectedLightMode, setSelectedLightMode] = useState('Auto'); + const [highBeamsOn, setHighBeamsOn] = useState(false); + + // Row 2: Fold Mirrors, Child Lock, Window Lock + const [foldMirrorsOn, setFoldMirrorsOn] = useState(false); + const [windowLockOn, setWindowLockOn] = useState(false); + const [childLockOption, setChildLockOption] = useState('Off'); // 'Left', 'Right', 'Both' + const [showChildLockPopup, setShowChildLockPopup] = useState(false); + + // Row 3: Wipers mode and speed + const [wipersMode, setWipersMode] = useState('Auto'); + const [wiperSpeed, setWiperSpeed] = useState(null); + + // Function to handle wiper mode change + const handleWiperModeChange = (mode) => { + setWipersMode(mode); + if (mode === 'Auto') { + setWiperSpeed(null); + } + }; + + // Function to handle wiper speed change + const handleWiperSpeedChange = (speed) => { + setWiperSpeed(speed); + setWipersMode('On'); + }; + + // Row 4: Various controls + const [mirrorsOn, setMirrorsOn] = useState(false); + const [steeringOn, setSteeringOn] = useState(false); + const [dashcamOn, setDashcamOn] = useState(false); + const [sentryModeOn, setSentryModeOn] = useState(false); + const [showCarWashMode, setShowCarWashMode] = useState(false); + const [gloveBoxClicked, setGloveBoxClicked] = useState(false); + + // Row 5: Brightness control + const [brightness, setBrightness] = useState(100); + const [autoBrightnessOn, setAutoBrightnessOn] = useState(false); + + // Adjust display brightness + useEffect(() => { + const displayWrapper = document.querySelector('.displayWrapper'); + if (displayWrapper) { + if (autoBrightnessOn) { + displayWrapper.style.opacity = '1'; + } else { + const opacity = Math.max(0.1, brightness / 100); + displayWrapper.style.opacity = opacity.toString(); + } + } + }, [brightness, autoBrightnessOn]); + + // Glovebox click effect + useEffect(() => { + if (gloveBoxClicked) { + const timer = setTimeout(() => { + setGloveBoxClicked(false); + }, 500); // Highlight for 500ms + return () => clearTimeout(timer); + } + }, [gloveBoxClicked]); + + const [showMirrorsModal, setShowMirrorsModal] = useState(false); + const [showSteeringModal, setShowSteeringModal] = useState(false); + + const openMirrorsModal = () => setShowMirrorsModal(true); + const closeMirrorsModal = () => setShowMirrorsModal(false); + const openSteeringModal = () => setShowSteeringModal(true); + const closeSteeringModal = () => setShowSteeringModal(false); + + return ( +
+ {/* Row 1 */} +
+ {['Off', 'Parking', 'On', 'Auto'].map((mode) => ( +
setSelectedLightMode(mode)} + > + {mode} +
+ ))} +
setHighBeamsOn(!highBeamsOn)} + > + High Beams +
+
+ +
+ + {/* Row 2 */} +
+
setFoldMirrorsOn(!foldMirrorsOn)} + > + Fold Mirrors +
+
setShowChildLockPopup(!showChildLockPopup)} + > + Child Lock + {childLockOption !== 'Off' && {childLockOption}} +
+
setWindowLockOn(!windowLockOn)} + > + Window Lock +
+
+ + {/* Child Lock Popup */} + {showChildLockPopup && ( +
+ {['Off', 'Left', 'Right', 'Both'].map((option) => ( +
{ + setChildLockOption(option); + setShowChildLockPopup(false); + }} + > + {option}
+ ))} +
+ )} + +
+ + {/* Row 3 */} +
+
handleWiperModeChange('Off')} + > + Off +
+
handleWiperModeChange('Auto')} + > + Auto +
+ {['I', 'II', 'III', 'IIII'].map((speed) => ( +
handleWiperSpeedChange(speed)} + > + {speed} +
+ ))} +
+ +
+ + {/* Row 4 */} +
+
+
+ Mirrors +
+
+ Steering +
+
+
+
+
setDashcamOn(!dashcamOn)} + > + Dashcam +
+
setSentryModeOn(!sentryModeOn)} + > + Sentry + {sentryModeOn && } +
+
+
+
+
setShowCarWashMode(true)} + > + Car Wash +
+
setGloveBoxClicked(true)} + > + Glovebox
- ) -} \ No newline at end of file +
+
+ + {/* Car Wash Mode Panel */} + {showCarWashMode && ( +
+ setShowCarWashMode(false)} /> +
+ )} + +
+ + {/* Row 5 */} +
+
+ setBrightness(e.target.value)} + disabled={autoBrightnessOn} + /> +
+
{ + setAutoBrightnessOn(!autoBrightnessOn); + if (!autoBrightnessOn) { + setBrightness(100); + } + }} + > + Auto +
+
+ + {showMirrorsModal && ( +
+ +
+ )} + {showSteeringModal && ( +
+ +
+ )} +
+ ); +}; \ No newline at end of file diff --git a/src/components/Apps/CarSettings/components/MirrorsAdjustment.js b/src/components/Apps/CarSettings/components/MirrorsAdjustment.js new file mode 100644 index 0000000..017e356 --- /dev/null +++ b/src/components/Apps/CarSettings/components/MirrorsAdjustment.js @@ -0,0 +1,16 @@ +import React from 'react'; + +export const MirrorsAdjustment = ({ onClose }) => { + return ( +
+

Adjust Mirrors

+
+ + + + +
+ +
+ ); +}; \ No newline at end of file diff --git a/src/components/Apps/CarSettings/components/SteeringAdjustment.js b/src/components/Apps/CarSettings/components/SteeringAdjustment.js new file mode 100644 index 0000000..6698660 --- /dev/null +++ b/src/components/Apps/CarSettings/components/SteeringAdjustment.js @@ -0,0 +1,16 @@ +import React from 'react'; + +export const SteeringAdjustment = ({ onClose }) => { + return ( +
+

Adjust Steering Wheel

+
+ + + + +
+ +
+ ); +}; \ No newline at end of file diff --git a/src/components/Clock/Clock.css b/src/components/Clock/Clock.css index 8323d1c..b8fb6b5 100644 --- a/src/components/Clock/Clock.css +++ b/src/components/Clock/Clock.css @@ -1,3 +1,3 @@ .clock { - background-color: rgb(250, 250, 250, 80%); + /* background-color: rgb(250, 250, 250, 80%); */ } \ No newline at end of file diff --git a/src/components/MapNavigation/MapNavigation.css b/src/components/MapNavigation/MapNavigation.css index 223a51d..9b0be4f 100644 --- a/src/components/MapNavigation/MapNavigation.css +++ b/src/components/MapNavigation/MapNavigation.css @@ -189,12 +189,19 @@ input:focus { font-size: 1em; font-weight: 600; color: #4e4e4e; + background: linear-gradient(to top, rgba(255, 255, 255, 0.1), rgb(255 255 255 / 1)); } .carLockWrapper { margin-right: 10px; } +.carLockWrapper .carLock { + width: 30px; + height: 20px; +} + + .wifiStatus { width: 3%; margin-right: 10px; diff --git a/src/components/MapNavigation/MapNavigation.js b/src/components/MapNavigation/MapNavigation.js index 69eb213..47d3f61 100644 --- a/src/components/MapNavigation/MapNavigation.js +++ b/src/components/MapNavigation/MapNavigation.js @@ -19,7 +19,7 @@ const MAP_ID = '2d1b7cd2cf277f7'; const libraries = ['places']; -export function MapNavigation() { +export function MapNavigation({ onWifiClick }) { const [center, setCenter] = useState({ lat: 33.9210278, lng: -118.33005555555555 }); // Default location const [mapType, setMapType] = useState('roadmap'); const [trafficLayer, setTrafficLayer] = useState(null); @@ -233,7 +233,7 @@ export function MapNavigation() {
- Wifi Status + Wifi Status
@@ -369,4 +369,4 @@ export function MapNavigation() {
); -} +} \ No newline at end of file diff --git a/src/components/OutsideTemp/OutsideTemp.css b/src/components/OutsideTemp/OutsideTemp.css index 23eb119..757fa96 100644 --- a/src/components/OutsideTemp/OutsideTemp.css +++ b/src/components/OutsideTemp/OutsideTemp.css @@ -1,7 +1,7 @@ .outsideTemp { cursor: pointer; padding-left: 10px; - background-color: rgb(250, 250, 250, 80%); + /* background-color: rgb(250, 250, 250, 80%); */ } /* .outsideTemp:hover {} */ \ No newline at end of file diff --git a/src/components/VerticalSliderPanel/VerticalSliderPanel.css b/src/components/VerticalSliderPanel/VerticalSliderPanel.css index b080aa8..b19de82 100644 --- a/src/components/VerticalSliderPanel/VerticalSliderPanel.css +++ b/src/components/VerticalSliderPanel/VerticalSliderPanel.css @@ -31,7 +31,7 @@ display: none; } .slider-content { - height: 100%; + height: calc(100% - 12px); width: 100%; }