Merge pull request #504 from Fisker-Inc/CEC-5752
CEC-5752 - Define trim as well as model for Flashpack mappings
This commit is contained in:
@@ -311,11 +311,11 @@ export const VehicleProvider = ({ children }) => {
|
||||
}
|
||||
};
|
||||
|
||||
const getFlashpackECUMappings = async (model, year, flashpack, options, token) => {
|
||||
const getFlashpackECUMappings = async (model, trim, year, flashpack, options, token) => {
|
||||
try {
|
||||
setBusy(true);
|
||||
|
||||
const result = await api.getFlashpackECUMappings(model, year, flashpack, options, token);
|
||||
const result = await api.getFlashpackECUMappings(model, trim, year, flashpack, options, token);
|
||||
if (result.error) {
|
||||
throw new Error(`Get flashpack ecu mappings error. ${result.message}`);
|
||||
}
|
||||
@@ -331,12 +331,13 @@ export const VehicleProvider = ({ children }) => {
|
||||
}
|
||||
};
|
||||
|
||||
const addFlashpackVersion = async (model, year, flashpack, carFlashpackVersions, token) => {
|
||||
const addFlashpackVersion = async (model, trim, year, flashpack, carFlashpackVersions, token) => {
|
||||
try {
|
||||
setBusy(true);
|
||||
|
||||
const data = {
|
||||
"car_model": model,
|
||||
"car_trim": trim,
|
||||
"car_year": year,
|
||||
"flashpack": flashpack,
|
||||
"ecu_versions": carFlashpackVersions,
|
||||
@@ -353,12 +354,13 @@ export const VehicleProvider = ({ children }) => {
|
||||
}
|
||||
}
|
||||
|
||||
const deleteFlashpackVersion = async (model, year, flashpack, token) => {
|
||||
const deleteFlashpackVersion = async (model, trim, year, flashpack, token) => {
|
||||
try {
|
||||
setBusy(true);
|
||||
|
||||
const data = {
|
||||
"car_model": model,
|
||||
"car_trim": trim,
|
||||
"car_year": year,
|
||||
"flashpack": flashpack,
|
||||
}
|
||||
|
||||
@@ -69,6 +69,52 @@ exports[`FlashpackAdd Render 1`] = `
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
|
||||
data-shrink="false"
|
||||
for="carTrim"
|
||||
id="carTrim-label"
|
||||
>
|
||||
Trim
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
|
||||
>
|
||||
|
||||
*
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="carTrim"
|
||||
maxlength="255"
|
||||
name="carTrim"
|
||||
required=""
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
>
|
||||
<span>
|
||||
Trim
|
||||
*
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
|
||||
@@ -23,6 +23,7 @@ const MainForm = () => {
|
||||
const [redirect, setRedirect] = useState(null);
|
||||
const { setMessage, setTitle, setSitePath } = useStatusContext();
|
||||
const [carModel, setCarModel] = useState("");
|
||||
const [carTrim, setCarTrim] = useState("");
|
||||
const [carYear, setCarYear] = useState();
|
||||
const [flashpack, setFlashpack] = useState();
|
||||
const [mappingInputs, setMappingInputs] = useState([{ ecuName: "", ecuVersion: "" }]);
|
||||
@@ -53,6 +54,10 @@ const MainForm = () => {
|
||||
setCarModel(event.target.value);
|
||||
}
|
||||
|
||||
const onCarTrimChange = (event) => {
|
||||
setCarTrim(event.target.value);
|
||||
}
|
||||
|
||||
const onCarYearChange = (event) => {
|
||||
setCarYear(event.target.value);
|
||||
}
|
||||
@@ -74,11 +79,11 @@ const MainForm = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const result = await addFlashpackVersion(carModel, parseInt(carYear), flashpack, carFlashpackVersions, token);
|
||||
const result = await addFlashpackVersion(carModel, carTrim, parseInt(carYear), flashpack, carFlashpackVersions, token);
|
||||
if (!result || result.error) return;
|
||||
|
||||
setMessage(`Added ${carYear} ${carModel} ${flashpack}`);
|
||||
setRedirect(`/tools/flashpack/${carModel}/${carYear}/${flashpack}`);
|
||||
setMessage(`Added ${carYear} ${carModel} ${carTrim} ${flashpack}`);
|
||||
setRedirect(`/tools/flashpack/${carModel}/${carTrim}/${carYear}/${flashpack}`);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
@@ -128,6 +133,21 @@ const MainForm = () => {
|
||||
onChange={onCarModelChange}
|
||||
type="text"
|
||||
/>
|
||||
<TextField
|
||||
id="carTrim"
|
||||
name="carTrim"
|
||||
label="Trim"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "255",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
value={carTrim}
|
||||
onChange={onCarTrimChange}
|
||||
type="text"
|
||||
/>
|
||||
<TextField
|
||||
id="carYear"
|
||||
name="carYear"
|
||||
|
||||
@@ -30,7 +30,7 @@ const tableColumns = [
|
||||
const PAGE_SIZE = "FLASHPACK_MAPPINGS_TABLE_PAGE_SIZE";
|
||||
|
||||
const MainForm = () => {
|
||||
const { model, year, flashpack } = useParams();
|
||||
const { model, trim, year, flashpack } = useParams();
|
||||
const classes = useStyles();
|
||||
const { setMessage, setTitle, setSitePath } = useStatusContext();
|
||||
const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
|
||||
@@ -49,7 +49,7 @@ const MainForm = () => {
|
||||
} = useUserContext();
|
||||
|
||||
useEffect(() => {
|
||||
setTitle(`${year} ${model} Flashpack Version ${flashpack}`);
|
||||
setTitle(`${year} ${model} ${trim} Flashpack Version ${flashpack}`);
|
||||
setSitePath([
|
||||
{
|
||||
label: "Tools",
|
||||
@@ -76,6 +76,7 @@ const MainForm = () => {
|
||||
if (!token) return;
|
||||
await getFlashpackECUMappings(
|
||||
model,
|
||||
trim,
|
||||
year,
|
||||
flashpack,
|
||||
{
|
||||
|
||||
@@ -99,6 +99,29 @@ exports[`Flashpack Render 1`] = `
|
||||
</svg>
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
||||
scope="col"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiTableSortLabel-root"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Trim
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
||||
scope="col"
|
||||
|
||||
@@ -32,6 +32,10 @@ const tableColumns = [
|
||||
id: "car_model",
|
||||
label: "Model",
|
||||
},
|
||||
{
|
||||
id: "car_trim",
|
||||
label: "Trim",
|
||||
},
|
||||
{
|
||||
id: "car_year",
|
||||
label: "Year",
|
||||
@@ -117,10 +121,10 @@ const MainForm = () => {
|
||||
const sendDelete = async () => {
|
||||
if (rowToDelete) {
|
||||
try {
|
||||
const result = await deleteFlashpackVersion(rowToDelete.car_model, rowToDelete.car_year, rowToDelete.flashpack, token);
|
||||
const result = await deleteFlashpackVersion(rowToDelete.car_model, rowToDelete.car_trim, rowToDelete.car_year, rowToDelete.flashpack, token);
|
||||
if (!result || result.error) return;
|
||||
|
||||
setMessage(`Deleted ${rowToDelete.car_year} ${rowToDelete.car_model} ${rowToDelete.flashpack}`);
|
||||
setMessage(`Deleted ${rowToDelete.car_year} ${rowToDelete.car_model} ${rowToDelete.car_trim} ${rowToDelete.flashpack}`);
|
||||
loadFlashpacks();
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
@@ -150,13 +154,16 @@ const MainForm = () => {
|
||||
{flashpacks && flashpacks.map((row, index) => (
|
||||
<TableRow key={row.flashpack + row.car_model}>
|
||||
<TableCell align="center">
|
||||
<Link to={`/tools/flashpack/${row.car_model}/${row.car_year}/${row.flashpack}`}>
|
||||
<Link to={`/tools/flashpack/${row.car_model}/${row.car_trim}/${row.car_year}/${row.flashpack}`}>
|
||||
{row.flashpack}
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{row.car_model}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{row.car_trim}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{row.car_year}
|
||||
</TableCell>
|
||||
@@ -168,11 +175,11 @@ const MainForm = () => {
|
||||
>
|
||||
<IconButton
|
||||
onClick={() => onDeleteClick(row)}
|
||||
aria-label={`Send delete for ${row.car_year} ${row.car_model} ${row.flashpack}`}
|
||||
aria-label={`Send delete for ${row.car_year} ${row.car_model} ${row.car_trim} ${row.flashpack}`}
|
||||
size="small"
|
||||
color="primary"
|
||||
>
|
||||
<DeleteIcon aria-label={`Delete ${row.car_year} ${row.car_model} ${row.flashpack}`} />
|
||||
<DeleteIcon aria-label={`Delete ${row.car_year} ${row.car_model} ${row.car_trim} ${row.flashpack}`} />
|
||||
</IconButton>
|
||||
</RoleWrap>
|
||||
</TableCell>
|
||||
@@ -186,7 +193,7 @@ const MainForm = () => {
|
||||
) : (
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, 100]}
|
||||
colSpan={4}
|
||||
colSpan={5}
|
||||
count={totalFlashpacks}
|
||||
rowsPerPage={pageSize}
|
||||
page={pageIndex}
|
||||
@@ -201,7 +208,7 @@ const MainForm = () => {
|
||||
</TableFooter>
|
||||
</Table>
|
||||
<DeleteConfirmation
|
||||
message={rowToDelete && rowToDelete.car_year + " " + rowToDelete.car_model + " " + rowToDelete.flashpack}
|
||||
message={rowToDelete && rowToDelete.car_year + " " + rowToDelete.car_model + " " + rowToDelete.car_trim + " " + rowToDelete.flashpack}
|
||||
open={showDeleteModal}
|
||||
close={() => setShowDeleteModal(false)}
|
||||
deleteFunction={sendDelete}
|
||||
|
||||
@@ -289,7 +289,7 @@ const SiteRoutes = () => {
|
||||
providers={providers}
|
||||
/>
|
||||
<AuthRoute
|
||||
path="/tools/flashpack/:model/:year/:flashpack"
|
||||
path="/tools/flashpack/:model/:trim/:year/:flashpack"
|
||||
render={() => <FlashpackDetails />}
|
||||
type={TYPES.PROTECTED}
|
||||
token={token}
|
||||
|
||||
@@ -272,8 +272,8 @@ const vehiclesAPI = {
|
||||
.catch(errorHandler)
|
||||
},
|
||||
|
||||
getFlashpackECUMappings: async (model, year, flashpack, options, token) => {
|
||||
return fetch(addQueryParams(`${API_ENDPOINT}/flashpack_version_ecu_mappings/${model}/${year}/${flashpack}`, options), {
|
||||
getFlashpackECUMappings: async (model, trim, year, flashpack, options, token) => {
|
||||
return fetch(addQueryParams(`${API_ENDPOINT}/flashpack_version_ecu_mappings/${model}/${trim}/${year}/${flashpack}`, options), {
|
||||
method: "GET",
|
||||
headers: Object.assign(
|
||||
{ "Content-Type": "application/json" },
|
||||
|
||||
Reference in New Issue
Block a user