more

src/components/Vehicles.js

@@ -17,15 +17,16 @@ const Vehicles = () => {
   const [inputs, setInputs] = useState({});
   const [vehId, setVehId] = useState();
   const [fetchedVeh, setfetchedVeh] = useState([]);
+  const [alert, setAlert] = useState(false);
   const inputTypes = [
     "Make",
     "Model",
-    "Trim Package",
+    "Trim",
     "Color",
     "Prod Year",
     "Category",
     "Mileage",
-    "Pre-QR Price",
+    "Pre-QRV-Price",
   ];
   const handleIdInput = (e) => setVehId(e.target.value);
 
@@ -52,7 +53,7 @@ const Vehicles = () => {
     const formatMiles = parseFloat(inputs.mileage.replace(/,/g, ""));
     const formatPrice = parseFloat(inputs.price.replace(/,/g, "") * 100);
     inputs.Mileage = formatMiles;
-    inputs.price = formatPrice;
+    //inputs.price = formatPrice;
   };
 
   useEffect(() => {
@@ -91,9 +92,23 @@ const Vehicles = () => {
     setVehId("");
   }
 
+  function validate() {
+    const make = inputs.Make;
+    const model = inputs.Model;
+    const trim = inputs.Trim;
+    const color = inputs.Color;
+    if (!make || !model || !trim || !color) {
+      setAlert("Please fill out all fields");
+      return false;
+    }
+    return true;
+  }
+
   async function addData(e) {
     e.preventDefault();
     //format(e);
+    const valid = validate();
+    if (valid) {
       setSavedVehicles([...savedVehicles, inputs]);
       try {
         const docRef = await addDoc(collection(db, "hdepot"), inputs);
@@ -104,6 +119,7 @@ const Vehicles = () => {
         console.log(`Error saving vehicle to db: ${error}`);
       }
     }
+  }
 
   async function deleteData(e) {
     try {
@@ -139,6 +155,7 @@ const Vehicles = () => {
               ))}
             </div>
           </div>
+          <div>{alert ? <div className="alert">{alert}</div> : <></>}</div>
         </div>
         <Button
           className="auxButton"

src/styles/App.css

@@ -28,7 +28,7 @@ body {
 
 .vehiclesRow {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   margin: auto;
@@ -60,11 +60,10 @@ body {
 .vehBox {
   padding: 5px 5px 8px 8px;
   border: 1px solid #5d86a8;
-  background-color: #fff;
   border-radius: 6px;
   max-width: 535px;
   flex: 1 0 auto;
-  background-color: #fcf6ff;
+  background-color: #f9f5ff;
 }
 
 .veh-text {
@@ -85,26 +84,32 @@ body {
   border-radius: 4px;
 }
 
+.alert {
+  color: red;
+  font-size: 0.8rem;
+  padding-top: 8px;
+  margin: 8px 0px;
+}
+
 .auxButton {
   height: 30px;
   width: 125px;
   border: 1px solid #c0c8cf;
   border-radius: 6px;
-  background-color: white;
   color: #0f1111;
   font-family: "Open Sans", sans-serif;
   cursor: pointer;
   padding: 7px 0px 26px 0px;
   margin: 25px auto;
-  background-color: #fffef9;
+  background-color: #ffefef;
 }
 
 .auxButton2 {
   height: 30px;
   width: 125px;
-  border: 1px solid #c0c8cf;
+  border: 1px solid #8ac8ff;
   border-radius: 6px;
-  background-color: #fffef9;
+  background-color: #ffefef;
   color: #0f1111;
   font-family: "Open Sans", sans-serif;
   cursor: pointer;