Updated carSettings functionality

jamesalmeida · Oct 4, 2024 · 6ceb2cb · 6ceb2cb
1 parent f11c16b
commit 6ceb2cb
Show file tree

Hide file tree

Showing 13 changed files with 515 additions and 70 deletions.
diff --git 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 (
     <CarLockProvider>
       <UserProfileProvider>
@@ -375,7 +382,7 @@ function App() {
                 className="rightPanel"
                 id="rightPanel"
               >
-                <MapNavigation/>
+                <MapNavigation onWifiClick={handleWifiClick} />
                 <VerticalSliderPanel 
                   isOpen={isSliderOpen} 
                   activeIcon={activeNavIcon}

diff --git a/src/components/Apps/CarSettings/CarSettings.css b/src/components/Apps/CarSettings/CarSettings.css
@@ -1,7 +1,7 @@
 .car-settings-wrapper {
     display: flex;
     flex-direction: column;
-    height: calc(100% + 28px);
+    height: 100%;
     color: gray;
     font-size: .8rem;
     width: 100%;
@@ -49,16 +49,23 @@
     background-color: rgb(226, 226, 226);
 }
 
+.top-bar-right-icons {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding-right: 13px;
+}
+
 .left-scroll-panel {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    height: calc(100% - 21px);
     grid-column: 1 / 2;
     grid-row: 1 / 2;
     overflow: auto;
     -ms-overflow-style: none;  /* IE and Edge */
     scrollbar-width: none;  /* Firefox */
-    padding-top: 20px;
+    padding-top: 15px;
     padding-right: 15px;
 }
 
@@ -179,12 +186,14 @@
     border-bottom: 1px solid grey;
 }
 
-.flex-row div:first-child {
+.flex-row div:first-child,
+.row-5 div:last-child {
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
 }
 
 .flex-row div:last-child,
+.row-1 > div:nth-child(4),
 .auto-lights-btn {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
@@ -200,14 +209,27 @@
     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%;
     border-radius: 5px;
 }
 
 .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;
+  }
diff --git 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,27 +39,44 @@ 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 (
     <div className="car-settings-wrapper">
       <div className="top-bar">
         <div className="top-bar-item search-bar">
           <img src={getImagePath("icon-search.svg")} alt="Search" />
           <input type="text" placeholder="Search settings" />
         </div>
-        <UserProfile />
-        {topBarItems.map((item, index) => (
-          <div key={index} className="top-bar-item">
-            <img src={getImagePath(`icon-settings-${item.icon}.svg`)} alt={item.alt} />
-            {item.text && item.text}
-          </div>
-        ))}
+        <div className="top-bar-right-icons">
+          <UserProfile />
+          {topBarItems.map((item, index) => (
+            <div 
+              key={index} 
+              className="top-bar-item"
+              onClick={item.icon === 'wifi' ? handleWifiClick : undefined}
+            >
+              <img src={getImagePath(`icon-settings-${item.icon}.svg`)} alt={item.alt} />
+              {item.text && item.text}
+            </div>
+          ))}
+        </div>
       </div>
       <div className="car-settings-panel">
         <div className="left-scroll-panel">

diff --git a/src/components/Apps/CarSettings/components/CarWashMode/CarWashMode.css 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; */
+  }
diff --git a/src/components/Apps/CarSettings/components/CarWashMode/CarWashMode.js 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 (
+    <div className="car-wash-mode-container">
+      <div className="car-wash-mode-header">
+        <div className="car-wash-mode-title">Car Wash Mode</div>
+      <div className="car-wash-mode-content">Coming Soon</div>
+        <div className="close-button ctaBtn" onClick={onClose}>
+          Exit Car Wash Mode
+        </div>
+      </div>
+    </div>
+  );
+}