diff --git a/README.md b/README.md index eb383fb..3ef4627 100644 --- a/README.md +++ b/README.md @@ -2,76 +2,86 @@ This is a React-based web application built with Vite (react and typescript). - - ## Getting started ### Prerequisites + - Node.js (v18 or higher recommended) - Yarn (v1.22+) (https://yarnpkg.com/) ### Installation + ```bash git clone https://mavportal.com/TobaOjo/Mav-Mobile-UI.git cd Mav-Mobile-UI yarn install ``` + ### Running Locally + ```bash yarn dev ``` + The app will be available at `http://localhost:5173`. - To run on locally on other devices + ```bash yarn dev --host ``` -The app will be available at the exposed addresses to access e.g. http://192.168.0.123:5173/Mobile + +The app will be available at the exposed addresses to access e.g. http://1xx.xxx.x.xxx:/Mobile ## Tech Stack + - **React** โ€“ UI library - **Vite** โ€“ Build tool - **Yarn** โ€“ Package manager - - ## Configuration + Create a `.env` file to access the Mav Mobile box in unit 5 for or for any environment-specific settings: + ```env -VITE_AGX_BOX_URL=http://100.118.196.113:8080 +VITE_AGX_BOX_URL=http://1xx.xxx.xxx.xxx: ``` -## ๐Ÿงช Development +## Development + ### Linting & Formatting + ```bash yarn lint yarn format ``` ### Testing + (Currently not implemented โ€“ consider adding Jest or Vitest) -## ๐Ÿšข Deployment +## Deployment + To build for production: + ```bash yarn build ``` Navigate to your Mav-Mobile-UI folder -Select the Dist folder +Select the Dist folder Compress to (ZIP) -Log into box on Moba using Session > SSH and putting IP in Remote Host. +Log into box on Moba using Session > SSH and putting IP in Remote Host. Creds are mav:mav Drag and drop dist.zip into file explorer menu on left hand side (has to be named dist.zip exactly). -Run command +Run command + ```bash sudo ./integrate-web-ui.sh ``` -Run + +Run ```bash sudo nano web-static/index.html -``` - - +``` diff --git a/dist.zip b/dist.zip new file mode 100644 index 0000000..7c4845e Binary files /dev/null and b/dist.zip differ diff --git a/src/components/SightingModal/SightingModal.tsx b/src/components/SightingModal/SightingModal.tsx index f748c7b..f4c2d8f 100644 --- a/src/components/SightingModal/SightingModal.tsx +++ b/src/components/SightingModal/SightingModal.tsx @@ -160,12 +160,13 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
{sighting?.seenCount ?? "-"}
- {sighting?.make && ( -
-
Make
-
{sighting?.make ?? "-"}
-
- )} + {sighting?.make || + (sighting?.make.trim() && ( +
+
Make
+
{sighting?.make ?? "-"}
+
+ ))} {sighting?.model || (!sighting?.model.trim() && (
@@ -173,12 +174,13 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
{sighting?.model ?? "-"}
))} - {sighting?.color && ( -
-
Colour
-
{sighting?.color ?? "-"}
-
- )} + {sighting?.color || + (!sighting?.color.trim() && ( +
+
Colour
+
{sighting?.color ?? "-"}
+
+ ))}
Time