{
+ const { packageid } = useParams();
+ const { getPackages, createCarUpdates, packages, busy } = useUpdatesContext();
+ const { getVehicles, vehicles } = useVehicleContext();
+ const {
+ token: {
+ idToken: { jwtToken: token },
+ },
+ } = useUserContext();
+ const { setMessage } = useStatusContext();
+ const [packageName, setPackageName] = useState("");
+ const [version, setVersion] = useState("");
+ const [link, setLink] = useState("");
+ const [description, setDescription] = useState("");
+ const [releaseNotesLink, setReleaseNotesLink] = useState("");
+ const [createDate, setCreateDate] = useState("");
+ const [selectedVehicles, setSelectedVehicles] = useState([]);
+ const classes = useStyles();
+ const theme = useTheme();
+ const handleVehiclesChange = (event) => {
+ setSelectedVehicles(event.target.value);
+ };
+ const getCarIDs = () => {
+ if (!selectedVehicles) return [];
+ return selectedVehicles.map((vin) => {
+ return vehicles.find((vehicle) => vehicle.vin === vin).id;
+ });
+ };
+ const onSubmit = async (event) => {
+ try {
+ event.preventDefault();
+ const data = {
+ package_id: parseInt(packageid),
+ car_ids: getCarIDs(),
+ };
+ await createCarUpdates(data, token);
+ setMessage(
+ `Deployed ${packageName} ${version} to ${selectedVehicles.length} cars`
+ );
+ setSelectedVehicles([]);
+ } catch (e) {
+ setMessage(e.message);
+ }
+ };
+ const getData = async () => {
+ try {
+ getPackages({ id: parseInt(packageid) }, token);
+ } catch (e) {
+ setMessage(e.message);
+ }
+ };
+ const handleCarOpen = async () => {
+ try {
+ await getVehicles(null, token);
+ } catch (e) {
+ setMessage(e.message);
+ }
+ };
+ useEffect(() => {
+ getData();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [token]);
+ useEffect(() => {
+ if (!packages || packages.length === 0) return;
+ var data = packages[0];
+
+ setPackageName(data.package_name);
+ setVersion(data.version);
+ setLink(data.link);
+ setDescription(data.desc || "");
+ setReleaseNotesLink(data.release_notes || "");
+ setCreateDate(tsLocalDateTimeString(data.timestamp));
+ }, [packages]);
+
+ return (
+
+
+ {`[${packageid}] ${packageName} ${version}`}
+
+
+
+ );
+};
+
+const UpdatePackageDeployForm = () => (
+
+
+
+
+
+);
+
+export default UpdatePackageDeployForm;
diff --git a/src/components/CarUpdates/Status/index.jsx b/src/components/CarUpdates/Status/index.jsx
new file mode 100644
index 0000000..e27d875
--- /dev/null
+++ b/src/components/CarUpdates/Status/index.jsx
@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router";
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableFooter,
+ TableHead,
+ TablePagination,
+ TableRow,
+ Typography,
+} from "@material-ui/core";
+
+import {
+ UpdatesProvider,
+ useUpdatesContext,
+} from "../../Contexts/UpdatesContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import useStyles from "../../useStyles";
+import { LocalDateTimeString } from "../../../utils/dates";
+
+const MainForm = () => {
+ const { packageid } = useParams();
+ const classes = useStyles();
+ const [pageSize, setPageSize] = useState(10);
+ const [pageIndex, setPageIndex] = useState(0);
+ const {
+ getCarUpdates,
+ carUpdates,
+ totalCarUpdates,
+ getPackages,
+ packages,
+ } = useUpdatesContext();
+ const { setMessage } = useStatusContext();
+ const {
+ token: {
+ idToken: { jwtToken: token },
+ },
+ } = useUserContext();
+
+ useEffect(() => {
+ try {
+ getPackages({ id: packageid }, token);
+ } catch (e) {
+ setMessage(e.message);
+ }
+ // eslint-disable-next-line
+ }, [token]);
+
+ useEffect(() => {
+ try {
+ getCarUpdates(
+ {
+ packageid,
+ limit: pageSize,
+ offset: pageSize * pageIndex,
+ },
+ token
+ );
+ } catch (e) {
+ setMessage(e.message);
+ }
+ // eslint-disable-next-line
+ }, [pageIndex, pageSize, token]);
+
+ const handleChangePageIndex = (event, newIndex) => {
+ setPageIndex(newIndex);
+ };
+
+ const handleChangePageSize = (event) => {
+ setPageSize(parseInt(event.target.value, 10));
+ setPageIndex(0);
+ };
+
+ return (
+
+
+ {packages &&
+ packages.length > 0 &&
+ `${packages[0].package_name} ${packages[0].version}`}
+
+
+
+
+
+ ID
+ Vehicle
+ Status
+ Created
+ Updated
+
+
+
+ {carUpdates.map((row) => (
+
+ {row.id}
+ {`${row.car.vin} ${row.car.model} ${row.car.year}`}
+ {row.status}
+
+ {LocalDateTimeString(row.created)}
+
+
+ {LocalDateTimeString(row.updated)}
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const CarUpdatesStatus = () => (
+
+
+
+);
+
+export default CarUpdatesStatus;
diff --git a/src/components/VehicleAddForm/index.jsx b/src/components/Cars/Add/index.jsx
similarity index 54%
rename from src/components/VehicleAddForm/index.jsx
rename to src/components/Cars/Add/index.jsx
index 11d50fd..3c1acdf 100644
--- a/src/components/VehicleAddForm/index.jsx
+++ b/src/components/Cars/Add/index.jsx
@@ -1,30 +1,38 @@
import React, { useRef } from "react";
-import useStyles from "../useStyles";
-import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
-import { useStatusContext } from "../Contexts/StatusContext";
-import { useUserContext } from "../Contexts/UserContext";
+import useStyles from "../../useStyles";
+import {
+ useVehicleContext,
+ VehicleProvider,
+} from "../../Contexts/VehicleContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useUserContext } from "../../Contexts/UserContext";
import { Button, TextField, Typography } from "@material-ui/core";
const MainForm = () => {
const { addVehicle, busy } = useVehicleContext();
const { setMessage } = useStatusContext();
- const { token } = useUserContext();
+ const {
+ token: {
+ idToken: { jwtToken: token },
+ },
+ } = useUserContext();
const classes = useStyles();
const vinEl = useRef(null);
+ const modelEl = useRef(null);
+ const yearEl = useRef(null);
const onSubmit = async (event) => {
try {
event.preventDefault();
- const {
- idToken: { jwtToken: authToken },
- } = token;
const formData = {
vin: vinEl.current.value,
+ model: modelEl.current.value,
+ year: parseInt(yearEl.current.value),
};
- const result = await addVehicle(formData, authToken);
+ const result = await addVehicle(formData, token);
setMessage(`Added ${result.vin}`);
vinEl.current.value = "";
@@ -52,6 +60,36 @@ const MainForm = () => {
fullWidth
inputRef={vinEl}
/>
+
+