Push to prod (#201)
* CEC-2056 safari map (#186) * CEC-2056 Fix Safari map popup * Snapshot serializer for Private styles * Combine serializers * CEC-2207 Add is-online filter for vehicles list (#187) * Add OptionsDropdown component * Add is-online filter * CEC-2237 Track sign in and keys (#188) * Update stage (#189) * CEC-2056 safari map (#186) * CEC-2056 Fix Safari map popup * Snapshot serializer for Private styles * Combine serializers * CEC-2207 Add is-online filter for vehicles list (#187) * Add OptionsDropdown component * Add is-online filter * CEC-2237 Track sign in and keys (#188) Co-authored-by: arpanetus <arpanetus@protonmail.com> * CEC-2281 Update certificate form (#190) * CEC-2281 Fix cert name * CEC-2360 Fix filename display and add manifest type (#191) * CEC-2360 Fix filename display and add manifest type * const * Push to Stage (#200) * CEC-2144, CEC-2338 Add deploy by fleets and fix fleets table (#192) * Add fix for fleets search * Decompose fleets table * Add deploy by fleets * Add snapshots * CEC-2385 Only show software updates (#193) * CEC-2385 Only show software updates * Update browser list * update threshold * Clean up * CEC-2291 Remote Commands (#194) * CEC-2378 Add fix for fleet vehicles' search * CEC-1235 Fix fleet name update (#196) Co-authored-by: arpanetus <arpanetus@protonmail.com> Co-authored-by: arpanetus <arpanetus@protonmail.com>
This commit is contained in:
John Wu
34
package-lock.json
generated
34
package-lock.json
generated
@@ -20,7 +20,7 @@
|
||||
"clsx": "^1.1.1",
|
||||
"email-validator": "^2.0.4",
|
||||
"env-cmd": "^10.1.0",
|
||||
"leaflet": "^1.7.1",
|
||||
"leaflet": "^1.8.0",
|
||||
"material-ui-dropzone": "^3.5.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
@@ -6505,13 +6505,19 @@
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001314",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001314.tgz",
|
||||
"integrity": "sha512-0zaSO+TnCHtHJIbpLroX7nsD+vYuOVjl3uzFbJO1wMVbuveJA0RK2WcQA9ZUIOiO0/ArMiMgHJLxfEZhQiC0kw==",
|
||||
"funding": {
|
||||
"version": "1.0.30001387",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001387.tgz",
|
||||
"integrity": "sha512-fKDH0F1KOJvR+mWSOvhj8lVRr/Q/mc5u5nabU2vi1/sgvlSqEsE8dOq0Hy/BqVbDkCYQPRRHB1WRjW6PGB/7PA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/browserslist"
|
||||
},
|
||||
{
|
||||
"type": "tidelift",
|
||||
"url": "https://tidelift.com/funding/github/npm/caniuse-lite"
|
||||
}
|
||||
]
|
||||
},
|
||||
"node_modules/case-sensitive-paths-webpack-plugin": {
|
||||
"version": "2.4.0",
|
||||
@@ -11593,9 +11599,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/leaflet": {
|
||||
"version": "1.7.1",
|
||||
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
|
||||
"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
|
||||
"integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
|
||||
},
|
||||
"node_modules/leven": {
|
||||
"version": "3.1.0",
|
||||
@@ -21996,9 +22002,9 @@
|
||||
}
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001314",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001314.tgz",
|
||||
"integrity": "sha512-0zaSO+TnCHtHJIbpLroX7nsD+vYuOVjl3uzFbJO1wMVbuveJA0RK2WcQA9ZUIOiO0/ArMiMgHJLxfEZhQiC0kw=="
|
||||
"version": "1.0.30001387",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001387.tgz",
|
||||
"integrity": "sha512-fKDH0F1KOJvR+mWSOvhj8lVRr/Q/mc5u5nabU2vi1/sgvlSqEsE8dOq0Hy/BqVbDkCYQPRRHB1WRjW6PGB/7PA=="
|
||||
},
|
||||
"case-sensitive-paths-webpack-plugin": {
|
||||
"version": "2.4.0",
|
||||
@@ -25739,9 +25745,9 @@
|
||||
}
|
||||
},
|
||||
"leaflet": {
|
||||
"version": "1.7.1",
|
||||
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
|
||||
"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
|
||||
"integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
|
||||
},
|
||||
"leven": {
|
||||
"version": "3.1.0",
|
||||
|
||||
@@ -4,19 +4,24 @@
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@datadog/browser-logs": "^3.11.0",
|
||||
"@date-io/date-fns": "1.x",
|
||||
"@date-io/moment": "1.x",
|
||||
"@emotion/react": "^11.9.0",
|
||||
"@emotion/styled": "^11.8.1",
|
||||
"@material-ui/core": "^4.12.4",
|
||||
"@material-ui/icons": "^4.11.3",
|
||||
"@material-ui/pickers": "^3.3.10",
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
"@testing-library/react": "^12.1.4",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"axios": "^0.26.1",
|
||||
"clsx": "^1.1.1",
|
||||
"date-fns": "^2.29.2",
|
||||
"email-validator": "^2.0.4",
|
||||
"env-cmd": "^10.1.0",
|
||||
"leaflet": "^1.7.1",
|
||||
"leaflet": "^1.8.0",
|
||||
"material-ui-dropzone": "^3.5.0",
|
||||
"moment": "^2.29.4",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-leaflet": "^3.2.5",
|
||||
@@ -62,7 +67,7 @@
|
||||
"coverageThreshold": {
|
||||
"global": {
|
||||
"branches": 39,
|
||||
"functions": 47,
|
||||
"functions": 45.5,
|
||||
"lines": 50,
|
||||
"statements": 49
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
jest.mock("../Contexts/CarUpdatesContext");
|
||||
jest.mock("../Contexts/FileUploadContext");
|
||||
jest.mock("../Contexts/VehicleContext");
|
||||
jest.mock("../Contexts/ManifestCreateContext");
|
||||
jest.mock("../Contexts/ManifestsContext");
|
||||
jest.mock("../Contexts/UserContext");
|
||||
jest.mock("../../services/monitoring");
|
||||
@@ -73,10 +72,6 @@ describe("App", () => {
|
||||
await check("/package-deploy/1", "span.MuiButton-label", "Sign In");
|
||||
});
|
||||
|
||||
it("Route /package-create unauthenticated", async () => {
|
||||
await check("/package-create", "span.MuiButton-label", "Sign In");
|
||||
});
|
||||
|
||||
it("Route /vehicle-add unauthenticated", async () => {
|
||||
await check("/vehicle-add", "span.MuiButton-label", "Sign In");
|
||||
});
|
||||
@@ -146,11 +141,6 @@ describe("App", () => {
|
||||
await check("/package-deploy/1", "h6", "Deploy Test Manifest 1.0");
|
||||
});
|
||||
|
||||
it("Route /package-create authenticated", async () => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
await check("/package-create", "h6", "Create Deployments");
|
||||
});
|
||||
|
||||
it("Route /vehicle-add authenticated", async () => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
await check("/vehicle-add", "h6", "Add Vehicle");
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -56,10 +56,10 @@ exports[`CANFiltersAdd Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
>
|
||||
<span>
|
||||
VIN
|
||||
@@ -102,10 +102,10 @@ exports[`CANFiltersAdd Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
>
|
||||
<span>
|
||||
CAN ID
|
||||
@@ -140,10 +140,10 @@ exports[`CANFiltersAdd Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
>
|
||||
<span>
|
||||
Interval
|
||||
|
||||
@@ -56,10 +56,10 @@ exports[`CANFiltersUpdate Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
>
|
||||
<span>
|
||||
VIN
|
||||
@@ -103,10 +103,10 @@ exports[`CANFiltersUpdate Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
>
|
||||
<span>
|
||||
CAN ID
|
||||
@@ -149,10 +149,10 @@ exports[`CANFiltersUpdate Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
>
|
||||
<span>
|
||||
Interval
|
||||
|
||||
@@ -55,10 +55,10 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
>
|
||||
<span>
|
||||
VIN
|
||||
@@ -101,10 +101,10 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Model
|
||||
@@ -148,10 +148,10 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Year
|
||||
@@ -195,10 +195,10 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Trim
|
||||
@@ -225,19 +225,19 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="trace"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -251,7 +251,7 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -276,19 +276,19 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="debug"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -302,7 +302,7 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -327,20 +327,20 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="info"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
|
||||
class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -354,7 +354,7 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -379,19 +379,19 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="warn"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -405,7 +405,7 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -430,19 +430,19 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="error"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -456,7 +456,7 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -481,19 +481,19 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="critical"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -507,7 +507,7 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -542,14 +542,14 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
data-indeterminate="false"
|
||||
type="checkbox"
|
||||
value=""
|
||||
@@ -608,10 +608,10 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Max Memory Buffer Size (0 uses default size)
|
||||
@@ -626,13 +626,13 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
data-indeterminate="false"
|
||||
type="checkbox"
|
||||
value=""
|
||||
@@ -693,10 +693,10 @@ exports[`VehicleAddForm Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Max Disk Buffer Size (0 uses default size)
|
||||
|
||||
@@ -93,7 +93,37 @@ exports[`VehicleTable Render 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
|
||||
class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-2"
|
||||
>
|
||||
<div>
|
||||
<button
|
||||
aria-haspopup="true"
|
||||
class="MuiButtonBase-root MuiIconButton-root"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-2"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Grid } from "@material-ui/core";
|
||||
import { Checkbox, FormControlLabel, Grid, MenuItem } from "@material-ui/core";
|
||||
import AddCircleIcon from "@material-ui/icons/AddCircle";
|
||||
import { Link } from "react-router-dom";
|
||||
import clsx from "clsx";
|
||||
@@ -10,10 +10,12 @@ import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import SearchField from "../../Controls/SearchField";
|
||||
import CarSelectionTable from "../../Controls/CarSelectionTable";
|
||||
import OptionsDropdown from "../../Controls/OptionsDropdown";
|
||||
|
||||
const MainForm = () => {
|
||||
const classes = useStyles();
|
||||
const [search, setSearch] = useState("");
|
||||
const [online, setOnline] = useState(false);
|
||||
const { setTitle, setSitePath } = useStatusContext();
|
||||
const {
|
||||
token: {
|
||||
@@ -25,6 +27,10 @@ const MainForm = () => {
|
||||
setSearch(query);
|
||||
};
|
||||
|
||||
const handleOnline = (event) => {
|
||||
setOnline(event.target.checked);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setTitle("Vehicles");
|
||||
setSitePath([]);
|
||||
@@ -42,13 +48,25 @@ const MainForm = () => {
|
||||
<Grid item md={4} className={classes.textCenterAlign}>
|
||||
<SearchField classes={classes} onSearch={handleSearch} />
|
||||
</Grid>
|
||||
<Grid item md={4} className={classes.textRightAlign} />
|
||||
<Grid item md={2} className={classes.textJustifyAlign}>
|
||||
<OptionsDropdown listId='filter-menu'>
|
||||
<MenuItem>
|
||||
<FormControlLabel control={
|
||||
<Checkbox
|
||||
checked={online}
|
||||
onChange={handleOnline}
|
||||
/>
|
||||
} label="Only online" />
|
||||
</MenuItem>
|
||||
</OptionsDropdown>
|
||||
</Grid>
|
||||
<Grid item md={2} className={classes.textRightAlign} />
|
||||
</Grid>
|
||||
<CarSelectionTable
|
||||
classes={classes}
|
||||
token={token}
|
||||
multiSelect={false}
|
||||
search={{ search }}
|
||||
search={{ search, online: online? true : null}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
26
src/components/Cars/Status/RemoteCommandsTab.jsx
Normal file
26
src/components/Cars/Status/RemoteCommandsTab.jsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import useStyles from "../../useStyles";
|
||||
import clsx from "clsx";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import SendCommand from "../../Controls/SendCommand";
|
||||
import PropTypes from "prop-types";
|
||||
import {VehicleProvider} from "../../Contexts/VehicleContext";
|
||||
|
||||
const RemoteCommandsTab = (props) => {
|
||||
const { vin } = props;
|
||||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||
<Typography variant="h6">Vehicle Commands</Typography>
|
||||
<VehicleProvider>
|
||||
<SendCommand vins={[vin]}></SendCommand>
|
||||
</VehicleProvider>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
RemoteCommandsTab.propTypes = {
|
||||
vin: PropTypes.string,
|
||||
}
|
||||
|
||||
export default RemoteCommandsTab
|
||||
40
src/components/Cars/Status/RemoteCommandsTab.test.jsx
Normal file
40
src/components/Cars/Status/RemoteCommandsTab.test.jsx
Normal file
@@ -0,0 +1,40 @@
|
||||
jest.mock("../../Contexts/VehicleContext");
|
||||
jest.mock("../../Contexts/StatusContext");
|
||||
jest.mock("../../Contexts/UserContext");
|
||||
jest.mock("@material-ui/core/utils/unstable_useId", () =>
|
||||
jest.fn().mockReturnValue("mui-test-id")
|
||||
);
|
||||
|
||||
import {render, waitFor} from "@testing-library/react";
|
||||
import {StatusProvider} from "../../Contexts/StatusContext";
|
||||
import {setToken, UserProvider} from "../../Contexts/UserContext";
|
||||
import RemoteCommandsTab from "./RemoteCommandsTab";
|
||||
import addSnapshotSerializer from "../../../utils/snapshot";
|
||||
import {TEST_AUTH_OBJECT} from "../../../utils/testing";
|
||||
import React from "react";
|
||||
|
||||
const renderRemoteCommandsTab = async () => {
|
||||
const { container } = render(
|
||||
<StatusProvider>
|
||||
<UserProvider>
|
||||
<RemoteCommandsTab vin="TESTVIN1234567890" />
|
||||
</UserProvider>
|
||||
</StatusProvider>
|
||||
);
|
||||
await waitFor(() => {
|
||||
/* render */
|
||||
});
|
||||
return container;
|
||||
};
|
||||
|
||||
describe("RemoteCommandsTab", () => {
|
||||
beforeAll(() => {
|
||||
addSnapshotSerializer(expect);
|
||||
});
|
||||
|
||||
it("Render", async () => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
const container = await renderRemoteCommandsTab();
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,173 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`RemoteCommandsTab Render 1`] = `
|
||||
<div>
|
||||
<div
|
||||
data-testid="mocked-statusprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-userprovider"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-0 makeStyles-tableSize-0"
|
||||
>
|
||||
<h6
|
||||
class="MuiTypography-root MuiTypography-h6"
|
||||
>
|
||||
Vehicle Commands
|
||||
</h6>
|
||||
<div
|
||||
data-testid="mocked-vehicleprovider"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-0"
|
||||
style="margin-top: 20px;"
|
||||
>
|
||||
<div
|
||||
class="MuiFormControl-root makeStyles-formControl-0"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined MuiFormLabel-filled"
|
||||
data-shrink="true"
|
||||
for="send-command"
|
||||
>
|
||||
Command
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
|
||||
>
|
||||
<select
|
||||
aria-invalid="false"
|
||||
class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
|
||||
id="send-command"
|
||||
name="send-command"
|
||||
>
|
||||
<option
|
||||
value="doors_lock"
|
||||
>
|
||||
Lock doors
|
||||
</option>
|
||||
<option
|
||||
value="doors_unlock"
|
||||
>
|
||||
Unlock doors
|
||||
</option>
|
||||
<option
|
||||
value="vent_windows"
|
||||
>
|
||||
Vent windows
|
||||
</option>
|
||||
<option
|
||||
value="close_windows"
|
||||
>
|
||||
Close windows
|
||||
</option>
|
||||
<option
|
||||
value="flash_headlights"
|
||||
>
|
||||
Flash headlights
|
||||
</option>
|
||||
<option
|
||||
value="trunk_close"
|
||||
>
|
||||
Close trunk
|
||||
</option>
|
||||
<option
|
||||
value="alert"
|
||||
>
|
||||
Alert
|
||||
</option>
|
||||
<option
|
||||
value="precondition"
|
||||
>
|
||||
Precondition
|
||||
</option>
|
||||
<option
|
||||
value="california_mode"
|
||||
>
|
||||
California mode
|
||||
</option>
|
||||
<option
|
||||
value="trunk_open"
|
||||
>
|
||||
Open trunk
|
||||
</option>
|
||||
<option
|
||||
value="temp_cabin"
|
||||
>
|
||||
Set cabin temperature(°C)
|
||||
</option>
|
||||
<option
|
||||
value="defrost"
|
||||
>
|
||||
Defrost
|
||||
</option>
|
||||
<option
|
||||
value="driver_seat_preheat"
|
||||
>
|
||||
Driver seat preheat
|
||||
</option>
|
||||
<option
|
||||
value="passenger_seat_preheat"
|
||||
>
|
||||
Preheat passenger seat
|
||||
</option>
|
||||
<option
|
||||
value="steering_wheel_preheat"
|
||||
>
|
||||
Preheat Steering wheel
|
||||
</option>
|
||||
<option
|
||||
value="charging"
|
||||
>
|
||||
Charging
|
||||
</option>
|
||||
</select>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M7 10l5 5 5-5z"
|
||||
/>
|
||||
</svg>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
style="padding-left: 8px;"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legend-0"
|
||||
style="width: 0.01px;"
|
||||
>
|
||||
<span>
|
||||
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
aria-label="send command"
|
||||
class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
|
||||
tabindex="0"
|
||||
type="submit"
|
||||
>
|
||||
<span
|
||||
class="MuiButton-label"
|
||||
>
|
||||
Send
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -15,7 +15,7 @@ exports[`CarStatus Render 1`] = `
|
||||
class="makeStyles-paper-0 makeStyles-tableSize-0"
|
||||
>
|
||||
<div
|
||||
class="MuiBox-root MuiBox-root-64 makeStyles-tableToolbar-0"
|
||||
class="MuiBox-root MuiBox-root-0 makeStyles-tableToolbar-0"
|
||||
>
|
||||
<div
|
||||
class="MuiTabs-root"
|
||||
@@ -119,9 +119,27 @@ exports[`CarStatus Render 1`] = `
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
aria-controls="tabpanel-5"
|
||||
aria-selected="false"
|
||||
class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
|
||||
id="tab-5"
|
||||
role="tab"
|
||||
tabindex="-1"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="MuiTab-wrapper"
|
||||
>
|
||||
Remote Commands
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<span
|
||||
class="PrivateTabIndicator-root-65 PrivateTabIndicator-colorSecondary-67 MuiTabs-indicator"
|
||||
class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
|
||||
style="left: 0px; width: 0px;"
|
||||
/>
|
||||
</div>
|
||||
@@ -133,7 +151,7 @@ exports[`CarStatus Render 1`] = `
|
||||
role="tabpanel"
|
||||
>
|
||||
<div
|
||||
class="MuiBox-root MuiBox-root-69"
|
||||
class="MuiBox-root MuiBox-root-0"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-0 makeStyles-tableSize-0"
|
||||
@@ -228,6 +246,13 @@ exports[`CarStatus Render 1`] = `
|
||||
id="tabpanel-4"
|
||||
role="tabpanel"
|
||||
/>
|
||||
<div
|
||||
aria-labelledby="tab-5"
|
||||
class="makeStyles-fullWidth-0"
|
||||
hidden=""
|
||||
id="tabpanel-5"
|
||||
role="tabpanel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,6 +12,7 @@ import TabPanel from "../../Controls/TabPanel";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import CANSignalsTab from "./CANSignalsTab";
|
||||
import RemoteCommandsTab from "./RemoteCommandsTab";
|
||||
|
||||
const tabHashes = ["details", "updates", "filters"];
|
||||
|
||||
@@ -64,6 +65,7 @@ const CarStatus = () => {
|
||||
<Tab label="CAN Filters" {...tabProps(2)} />
|
||||
<Tab label="Digital Twin" {...tabProps(3)} />
|
||||
<Tab label="CAN Signals" {...tabProps(4)} />
|
||||
<Tab label="Remote Commands" {...tabProps(5)} />
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
@@ -86,6 +88,10 @@ const CarStatus = () => {
|
||||
<TabPanel value={tabIndex} index={4} className={classes.fullWidth}>
|
||||
<CANSignalsTab vin={vin} />
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel value={tabIndex} index={5} className={classes.fullWidth}>
|
||||
<RemoteCommandsTab vin={vin} />
|
||||
</TabPanel>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -57,10 +57,10 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
>
|
||||
<span>
|
||||
VIN
|
||||
@@ -103,10 +103,10 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Model
|
||||
@@ -150,10 +150,10 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Year
|
||||
@@ -197,10 +197,10 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Trim
|
||||
@@ -227,19 +227,19 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="trace"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -253,7 +253,7 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -278,19 +278,19 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="debug"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -304,7 +304,7 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -329,20 +329,20 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="info"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
|
||||
class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -356,7 +356,7 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -381,19 +381,19 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="warn"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -407,7 +407,7 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -432,19 +432,19 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="error"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -458,7 +458,7 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -483,19 +483,19 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="critical"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -509,7 +509,7 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -544,14 +544,14 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
data-indeterminate="false"
|
||||
type="checkbox"
|
||||
value=""
|
||||
@@ -610,10 +610,10 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Max Memory Buffer Size (0 uses default size)
|
||||
@@ -628,13 +628,13 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
data-indeterminate="false"
|
||||
type="checkbox"
|
||||
value=""
|
||||
@@ -694,10 +694,10 @@ exports[`VehicleUpdate Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Max Disk Buffer Size (0 uses default size)
|
||||
|
||||
@@ -11,9 +11,14 @@ import {
|
||||
import useStyles from "../../useStyles";
|
||||
import { CertTypes } from "../../Contexts/CertificateContext";
|
||||
|
||||
const getCertTypeLabel = (certtype) => {
|
||||
if (certtype === CertTypes.Aftersales) return "Service Tool ID";
|
||||
return "VIN";
|
||||
};
|
||||
|
||||
const CreateForm = ({ onCreate, busy }) => {
|
||||
const classes = useStyles();
|
||||
const vinEl = useRef(null);
|
||||
const commonnameEl = useRef(null);
|
||||
const [certType, setCertType] = useState(CertTypes.TBOX);
|
||||
|
||||
const onSubmit = async (event) => {
|
||||
@@ -21,7 +26,7 @@ const CreateForm = ({ onCreate, busy }) => {
|
||||
|
||||
if (onCreate)
|
||||
onCreate({
|
||||
vin: vinEl.current.value,
|
||||
common_name: commonnameEl.current.value,
|
||||
type: certType,
|
||||
});
|
||||
};
|
||||
@@ -34,9 +39,9 @@ const CreateForm = ({ onCreate, busy }) => {
|
||||
<div className={classes.paper}>
|
||||
<form className={classes.form} noValidate action="{onSubmit}">
|
||||
<TextField
|
||||
id="vin"
|
||||
name="vin"
|
||||
label="VIN"
|
||||
id="common_name"
|
||||
name="common_name"
|
||||
label={`Common Name (${getCertTypeLabel(certType)})`}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
@@ -44,7 +49,7 @@ const CreateForm = ({ onCreate, busy }) => {
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
inputRef={vinEl}
|
||||
inputRef={commonnameEl}
|
||||
/>
|
||||
<FormLabel id="cert-type-group-label">Type</FormLabel>
|
||||
<RadioGroup
|
||||
|
||||
@@ -6,7 +6,12 @@ import useStyles from "../../useStyles";
|
||||
|
||||
const CertMimeType = "application/x-pem-file";
|
||||
|
||||
const DownloadCerts = ({ vin, publicCert, privateCert, onChangeView }) => {
|
||||
const DownloadCerts = ({
|
||||
commonName,
|
||||
publicCert,
|
||||
privateCert,
|
||||
onChangeView,
|
||||
}) => {
|
||||
const classes = useStyles();
|
||||
|
||||
const onNewCert = (event) => {
|
||||
@@ -21,14 +26,14 @@ const DownloadCerts = ({ vin, publicCert, privateCert, onChangeView }) => {
|
||||
<li>
|
||||
<DownloadFileLink
|
||||
data={publicCert}
|
||||
filename={`${vin}_cert.pem`}
|
||||
filename={`${commonName}_cert.pem`}
|
||||
mimetype={CertMimeType}
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<DownloadFileLink
|
||||
data={privateCert}
|
||||
filename={`${vin}_key.pem`}
|
||||
filename={`${commonName}_key.pem`}
|
||||
mimetype={CertMimeType}
|
||||
/>
|
||||
</li>
|
||||
|
||||
@@ -9,16 +9,16 @@ exports[`DownloadCerts Render 1`] = `
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
download="TESTVIN_cert.pem"
|
||||
download="undefined_cert.pem"
|
||||
>
|
||||
TESTVIN_cert.pem
|
||||
undefined_cert.pem
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
download="TESTVIN_key.pem"
|
||||
download="undefined_key.pem"
|
||||
>
|
||||
TESTVIN_key.pem
|
||||
undefined_key.pem
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -24,7 +24,7 @@ const MainForm = () => {
|
||||
const [view, setView] = useState(VIEW_FORM);
|
||||
const [pubCert, setPubCert] = useState(null);
|
||||
const [privCert, setPrivCert] = useState(null);
|
||||
const [vin, setVIN] = useState(null);
|
||||
const [commonName, setCommonName] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
setTitle("Create Certificate");
|
||||
@@ -46,8 +46,8 @@ const MainForm = () => {
|
||||
|
||||
setPubCert(result.public_key);
|
||||
setPrivCert(result.private_key);
|
||||
setVIN(data.vin);
|
||||
setMessage(`Created ${data.vin} certificate`);
|
||||
setCommonName(data.common_name);
|
||||
setMessage(`Created ${data.common_name} certificate`);
|
||||
setView(VIEW_DOWNLOAD);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
@@ -58,7 +58,7 @@ const MainForm = () => {
|
||||
const onChangeView = () => {
|
||||
setPubCert(null);
|
||||
setPrivCert(null);
|
||||
setVIN(null);
|
||||
setCommonName(null);
|
||||
|
||||
setView(VIEW_FORM);
|
||||
};
|
||||
@@ -66,7 +66,7 @@ const MainForm = () => {
|
||||
if (view === VIEW_DOWNLOAD)
|
||||
return (
|
||||
<DownloadCerts
|
||||
vin={vin}
|
||||
commonName={commonName}
|
||||
publicCert={pubCert}
|
||||
privateCert={privCert}
|
||||
onChangeView={onChangeView}
|
||||
|
||||
@@ -6,7 +6,8 @@ import { validateStatusMessage } from "../../utils/statusMessage";
|
||||
const FINAL_UPDATE_STATES = ["package_install_complete"];
|
||||
const CarUpdatesContext = React.createContext();
|
||||
|
||||
const validateDeployCarUpdates = (data) => {
|
||||
|
||||
const validateDeployClosure = (data, propertyName, errPfx) => {
|
||||
if (data === null) {
|
||||
throw new Error("No car update data");
|
||||
}
|
||||
@@ -15,11 +16,21 @@ const validateDeployCarUpdates = (data) => {
|
||||
throw new Error("Manifest id required");
|
||||
}
|
||||
|
||||
if (!data.vins || data.vins.length === 0) {
|
||||
throw new Error("Cars are required");
|
||||
const { [propertyName]: value } = data;
|
||||
if (!value || value.length === 0) {
|
||||
throw new Error(`${errPfx} are required`);
|
||||
}
|
||||
}
|
||||
|
||||
const validateDeployCarUpdates = (data) => {
|
||||
return validateDeployClosure(data, 'vins', 'Cars')
|
||||
};
|
||||
|
||||
const validateDeployFleetUpdates = (data) => {
|
||||
return validateDeployClosure(data, 'fleet_names', 'Fleets')
|
||||
};
|
||||
|
||||
|
||||
export const CarUpdatesProvider = ({ children }) => {
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [carUpdates, setCarUpdates] = useState([]);
|
||||
@@ -43,6 +54,22 @@ export const CarUpdatesProvider = ({ children }) => {
|
||||
return result;
|
||||
};
|
||||
|
||||
const deployFleetUpdates = async (data, token) => {
|
||||
let result;
|
||||
|
||||
try {
|
||||
setBusy(true);
|
||||
validateDeployFleetUpdates(data);
|
||||
result = await api.createFleetUpdates(data, token);
|
||||
if (result.error)
|
||||
throw new Error(`Deploy fleet updates error. ${result.message}`);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
const getCarUpdates = async (search, token) => {
|
||||
let result;
|
||||
|
||||
@@ -204,6 +231,7 @@ export const CarUpdatesProvider = ({ children }) => {
|
||||
carUpdates,
|
||||
totalCarUpdates,
|
||||
deployCarUpdates,
|
||||
deployFleetUpdates,
|
||||
getCarUpdates,
|
||||
getLog,
|
||||
getVINUpdates,
|
||||
|
||||
@@ -8,11 +8,12 @@ export const CertTypes = {
|
||||
TBOX: "TBOX",
|
||||
ICC: "ICC",
|
||||
Charging: "Charging",
|
||||
Aftersales: "Aftersales",
|
||||
};
|
||||
|
||||
const validateCreate = (data) => {
|
||||
if (!data.type) throw new Error("type is required");
|
||||
if (!data.vin) throw new Error("vin is required");
|
||||
if (!data.common_name) throw new Error("common name is required");
|
||||
};
|
||||
|
||||
export const CertificateProvider = ({ children }) => {
|
||||
|
||||
@@ -1,247 +0,0 @@
|
||||
import React, { useContext, useState } from "react";
|
||||
|
||||
import api from "../../services/manifestsAPI";
|
||||
import { uploadFile, getCancelToken } from "../../services/uploadFile";
|
||||
import { useStatusContext } from "./StatusContext";
|
||||
import {
|
||||
validateManifest,
|
||||
validateManifestECUs,
|
||||
} from "../../utils/manifestValidation";
|
||||
|
||||
const ManifestCreateContext = React.createContext();
|
||||
|
||||
const checkExistingManifest = async (data, token) => {
|
||||
const check = {
|
||||
name: data.name,
|
||||
version: data.version,
|
||||
};
|
||||
const { data: result } = await api.getManifests(check, token);
|
||||
if (result.length > 0)
|
||||
throw new Error(`Update ${data.name} ${data.version} already exists`);
|
||||
};
|
||||
|
||||
const ECUTemplate = {
|
||||
name: "AGS",
|
||||
version: "",
|
||||
hw_version: "",
|
||||
configuration_mask: "",
|
||||
configuration: "",
|
||||
files: [],
|
||||
manifest_id: 0,
|
||||
};
|
||||
|
||||
const FileTemplate = {
|
||||
offset: "0",
|
||||
checksum: "",
|
||||
type: "none",
|
||||
};
|
||||
|
||||
export const ManifestCreateProvider = ({ children }) => {
|
||||
const { setMessage } = useStatusContext();
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [uploadProgress, setUploadProgress] = useState(0);
|
||||
const [uploadStatus, setUploadStatus] = useState(null);
|
||||
const [cancelUploadToken, setCancelUploadToken] = useState(null);
|
||||
const [uploadFileIndex, setUploadFileIndex] = useState(0);
|
||||
const [uploadedFiles, setUploadedFiles] = useState([]);
|
||||
const [ecus, setECUs] = useState([]);
|
||||
const [ecuIndex, setECUIndex] = useState(0);
|
||||
|
||||
const addECU = () => {
|
||||
try {
|
||||
const result = ecus.concat(
|
||||
Object.assign({ data_id: ecuIndex }, ECUTemplate)
|
||||
);
|
||||
setECUIndex(ecuIndex + 1);
|
||||
setECUs(result);
|
||||
} catch (err) {
|
||||
setMessage(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteECU = (data_id) => {
|
||||
try {
|
||||
const result = ecus.filter((item) => item.data_id !== data_id);
|
||||
setECUs(result);
|
||||
} catch (err) {
|
||||
setMessage(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const getECU = (ecu_data_id) =>
|
||||
ecus.find((item) => item.data_id === ecu_data_id);
|
||||
|
||||
const getECUFile = (ecu, filename) =>
|
||||
ecu.files.find((file) => file.filename === filename);
|
||||
|
||||
const validateECUFiles = (ecu, files) => {
|
||||
files.forEach((file) => {
|
||||
if (file.size === 0) throw new Error(`${file.name} is 0 size`);
|
||||
const result = getECUFile(ecu, file.name);
|
||||
if (result) throw new Error(`${file.name} already exists`);
|
||||
});
|
||||
};
|
||||
|
||||
const getAllECUFiles = () => {
|
||||
let result = [];
|
||||
|
||||
for (let i = 0, len = ecus.length; i < len; i++) {
|
||||
const ecu = ecus[i];
|
||||
result = result.concat(ecu.files);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const addECUFile = (ecu_data_id, items) => {
|
||||
try {
|
||||
const ecu = getECU(ecu_data_id);
|
||||
if (ecu === undefined) return;
|
||||
|
||||
const files = Array.from(items);
|
||||
validateECUFiles(ecu, files);
|
||||
|
||||
const total = ecu.files.length;
|
||||
const result = files.map((file, index) =>
|
||||
Object.assign(
|
||||
{ order: total + index, file: file, filename: file.name },
|
||||
FileTemplate
|
||||
)
|
||||
);
|
||||
ecu.files = ecu.files.concat(result);
|
||||
updateECUs();
|
||||
} catch (err) {
|
||||
setMessage(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const sortECUFiles = (ecu) => {
|
||||
ecu.files.sort((x, y) => {
|
||||
if (x.order === y.order) return 0;
|
||||
return x.order < y.order ? -1 : 1;
|
||||
});
|
||||
};
|
||||
|
||||
const deleteECUFile = (ecu_data_id, filename) => {
|
||||
try {
|
||||
const ecu = getECU(ecu_data_id);
|
||||
if (ecu === undefined) return;
|
||||
ecu.files = ecu.files.filter((file) => file.filename !== filename);
|
||||
sortECUFiles(ecu);
|
||||
updateECUs();
|
||||
} catch (err) {
|
||||
setMessage(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
const updateECUs = () => {
|
||||
setECUs(ecus.concat([]));
|
||||
};
|
||||
|
||||
const createManifest = async (data, token) => {
|
||||
let result;
|
||||
let currentFileIndex = 0;
|
||||
const incremFileIndex = () => {
|
||||
setUploadFileIndex(currentFileIndex);
|
||||
currentFileIndex++;
|
||||
};
|
||||
|
||||
try {
|
||||
setBusy(true);
|
||||
validateManifest(data, token);
|
||||
validateManifestECUs(ecus);
|
||||
await checkExistingManifest(data, token);
|
||||
|
||||
setUploadedFiles(getAllECUFiles());
|
||||
if (result !== null) result = await api.createManifest(data, token);
|
||||
if (result.error)
|
||||
throw new Error(`Create manifest error. ${result.message}`);
|
||||
|
||||
for (let i = 0, len = ecus.length; i < len; i++) {
|
||||
const ecu = ecus[i];
|
||||
ecu.manifest_id = result.id;
|
||||
await createManifestECU(ecu, token, incremFileIndex);
|
||||
}
|
||||
} finally {
|
||||
setBusy(false);
|
||||
setUploadFileIndex(0);
|
||||
setUploadedFiles([]);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const createManifestECU = async (ecu, token, incremFileIndexFn) => {
|
||||
const { files, ...data } = ecu;
|
||||
|
||||
const result = await api.createManifestECU(data, token);
|
||||
if (result.error)
|
||||
throw new Error(`Create manifest error. ${result.message}`);
|
||||
|
||||
for (let i = 0, len = ecu.files.length; i < len; i++) {
|
||||
const file = ecu.files[i];
|
||||
file.manifest_ecu_id = result.id;
|
||||
incremFileIndexFn();
|
||||
const resp = await uploadECUFile(file, token);
|
||||
if (resp.error)
|
||||
throw new Error(`Upload manifest file error. ${resp.error}`);
|
||||
}
|
||||
};
|
||||
|
||||
const cancelUpload = () => {
|
||||
if (cancelUploadToken) cancelUploadToken.cancel();
|
||||
setBusy(false);
|
||||
setUploadStatus("Upload cancelled");
|
||||
setCancelUploadToken(null);
|
||||
setUploadProgress(0);
|
||||
};
|
||||
|
||||
const uploadECUFile = async (file, accessToken) => {
|
||||
const cancel = getCancelToken();
|
||||
|
||||
setUploadProgress(0);
|
||||
setUploadStatus(`Uploading ${file.filename}`);
|
||||
setCancelUploadToken(cancel);
|
||||
|
||||
const result = await uploadFile(
|
||||
file,
|
||||
accessToken,
|
||||
setUploadProgress,
|
||||
cancel.token
|
||||
);
|
||||
if (result.message) {
|
||||
throw new Error(`${result.error}. ${result.message}`);
|
||||
}
|
||||
|
||||
setUploadStatus(`Uploaded ${file.filename}`);
|
||||
setCancelUploadToken(null);
|
||||
setUploadProgress(100);
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
return (
|
||||
<ManifestCreateContext.Provider
|
||||
value={{
|
||||
busy,
|
||||
ecus,
|
||||
uploadedFiles,
|
||||
uploadFileIndex,
|
||||
uploadProgress,
|
||||
uploadStatus,
|
||||
addECU,
|
||||
addECUFile,
|
||||
cancelUpload,
|
||||
createManifest,
|
||||
createManifestECU,
|
||||
deleteECU,
|
||||
deleteECUFile,
|
||||
updateECUs,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</ManifestCreateContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useManifestCreateContext = () => useContext(ManifestCreateContext);
|
||||
@@ -164,10 +164,10 @@ export const VehicleProvider = ({ children }) => {
|
||||
}
|
||||
};
|
||||
|
||||
const sendCommand = async (vins, command, parameters, token) => {
|
||||
const sendCommand = async (vins, command, token) => {
|
||||
try {
|
||||
setBusy(true);
|
||||
const result = await api.sendCommand(vins, command, parameters, token);
|
||||
const result = await api.sendCommand(vins, command, token);
|
||||
if (result.error)
|
||||
throw new Error(`Send command error. ${result.message}`);
|
||||
return result;
|
||||
|
||||
@@ -317,6 +317,55 @@ describe("VehicleContext", () => {
|
||||
checkBaseResults("", "false");
|
||||
});
|
||||
});
|
||||
|
||||
describe("sendCommand", () => {
|
||||
beforeEach(async () => {
|
||||
const TestComp = () => {
|
||||
const {busy, sendCommand} = useVehicleContext();
|
||||
const { message, setMessage } = useStatusContext();
|
||||
|
||||
const sendC = async (vin, command) => {
|
||||
try {
|
||||
await sendCommand(vin, command);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div data-testid="error">{message}</div>
|
||||
<div data-testid="busy">{busy.toString()}</div>
|
||||
<button data-testid="sendCommandNullVin" onClick={() => sendC(null, {command:"doors_lock"})} />
|
||||
<button data-testid="sendCommandNonexistentVin" onClick={() => sendC(["11111111111111111"], {command:"doors_lock"})} />
|
||||
<button
|
||||
data-testid="sendCommandVin"
|
||||
onClick={() => sendC("3C4PDCBG0ET127145", {command:"doors_lock"})}
|
||||
/>
|
||||
<button
|
||||
data-testid="sendCommandWrongCommand"
|
||||
onClick={() => sendC("3C4PDCBG0ET127145", {command:"noSuchCommand"})}
|
||||
/>
|
||||
</>
|
||||
);}
|
||||
render(
|
||||
<StatusProvider>
|
||||
<VehicleProvider>
|
||||
<TestComp />
|
||||
</VehicleProvider>
|
||||
</StatusProvider>
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
it("initial state", () => {
|
||||
checkBaseResults("", "false");
|
||||
});
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
const expectedFilters = [
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
const ManifestsContext = React.createContext();
|
||||
|
||||
let busy = false;
|
||||
let ecus = [
|
||||
{
|
||||
data_id: 0,
|
||||
name: "AGS",
|
||||
version: "",
|
||||
hw_version: "",
|
||||
manifest_id: 0,
|
||||
files: [
|
||||
{
|
||||
filename: "test.bin",
|
||||
order: 0,
|
||||
offset: "0",
|
||||
checksum: "",
|
||||
self_download: false,
|
||||
mode: "D",
|
||||
type: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
let uploadedFiles = [];
|
||||
let uploadFileIndex = 0;
|
||||
let uploadProgress = 0;
|
||||
let uploadStatus = null;
|
||||
|
||||
export const ManifestCreateProvider = ({ children }) => {
|
||||
return <div data-testid="mocked-manifestcreateprovider">{children}</div>;
|
||||
};
|
||||
|
||||
export const useManifestCreateContext = () => ({
|
||||
busy,
|
||||
ecus,
|
||||
uploadedFiles,
|
||||
uploadFileIndex,
|
||||
uploadProgress,
|
||||
uploadStatus,
|
||||
addECU: jest.fn(),
|
||||
addECUFile: jest.fn(),
|
||||
cancelUpload: jest.fn(),
|
||||
createManifest: jest.fn(),
|
||||
createManifestECU: jest.fn(),
|
||||
deleteECU: jest.fn(),
|
||||
deleteECUFile: jest.fn(),
|
||||
updateECUs: jest.fn(),
|
||||
});
|
||||
@@ -18,7 +18,6 @@ let manifest = {
|
||||
files: [
|
||||
{
|
||||
file_id: "b0cda514c94080b4",
|
||||
filename: "LARGE.jpg",
|
||||
url: "https://upload-dev.fiskerdps.com/92bbc448-99c8-4851-91ad-f8042e4deb49/LARGE.jpg",
|
||||
write_region: {
|
||||
offset: 100,
|
||||
@@ -35,7 +34,6 @@ let manifest = {
|
||||
},
|
||||
{
|
||||
file_id: "4B897b1DcbeCds8e9",
|
||||
filename: "SMALL.jpg",
|
||||
url: "https://upload-dev.fiskerdps.com/92bbc448-99c8-4851-91ad-f8042e4deb49/SMALL.jpg",
|
||||
write_region: {
|
||||
offset: 120559274,
|
||||
|
||||
@@ -60,6 +60,7 @@ const CarSelectionTable = (props) => {
|
||||
onSelect,
|
||||
onSelectAll,
|
||||
} = props;
|
||||
|
||||
const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [orderBy, setOrderBy] = useState("vin");
|
||||
@@ -67,7 +68,8 @@ const CarSelectionTable = (props) => {
|
||||
const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
|
||||
const { setMessage } = useStatusContext();
|
||||
const { search: searchTerm } = search;
|
||||
const sortHandler = (_event, property) => {
|
||||
|
||||
const handleSort = (_event, property) => {
|
||||
if (property === orderBy) {
|
||||
if (order === "asc") {
|
||||
setOrder("desc");
|
||||
@@ -137,7 +139,7 @@ const CarSelectionTable = (props) => {
|
||||
orderBy={orderBy}
|
||||
order={order}
|
||||
columnData={tableColumns}
|
||||
onSortRequest={sortHandler}
|
||||
onSortRequest={handleSort}
|
||||
multiSelect={multiSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
selectCount={selected ? selected.length : 0}
|
||||
|
||||
199
src/components/Controls/FleetSelectionTable/index.jsx
Normal file
199
src/components/Controls/FleetSelectionTable/index.jsx
Normal file
@@ -0,0 +1,199 @@
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {Link} from 'react-router-dom';
|
||||
import {Checkbox, Table, TableBody, TableCell, TableFooter, TablePagination, TableRow} from "@material-ui/core";
|
||||
import clsx from "clsx";
|
||||
|
||||
import TableHeaderSortable from "../../Table/HeaderSortable";
|
||||
import {useStatusContext} from "../../Contexts/StatusContext";
|
||||
import {useFleetContext} from "../../Contexts/FleetContext"
|
||||
import {logger} from "../../../services/monitoring";
|
||||
import {useLocalStorage} from "../../useLocalStorage";
|
||||
import PropTypes from "prop-types";
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
id: "name",
|
||||
label: "Name"
|
||||
},
|
||||
{
|
||||
id: "log_level",
|
||||
label: "Log Level"
|
||||
},
|
||||
{
|
||||
id: "canbus_enabled",
|
||||
label: "CAN Bus Enabled"
|
||||
},
|
||||
{
|
||||
id: "data_logger_enabled",
|
||||
label: "Data Logger Enabled"
|
||||
},
|
||||
{
|
||||
id: "num_vehicles",
|
||||
label: "Vehicles"
|
||||
},
|
||||
{
|
||||
id: "num_filters",
|
||||
label: "Filters"
|
||||
}
|
||||
];
|
||||
|
||||
const PAGE_SIZE = "FLEET_SELECTION_TABLE_PAGE_SIZE";
|
||||
|
||||
const FleetSelectionTable = (props) => {
|
||||
const {
|
||||
token,
|
||||
classes,
|
||||
search,
|
||||
multiSelect,
|
||||
selected,
|
||||
onSelect,
|
||||
onSelectAll,
|
||||
} = props;
|
||||
|
||||
const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [orderBy, setOrderBy] = useState("id");
|
||||
const [order, setOrder] = useState("desc");
|
||||
const { fleets, getFleets, totalFleets } = useFleetContext();
|
||||
const { setMessage } = useStatusContext();
|
||||
const { search: searchTerm } = search;
|
||||
|
||||
const handleSort = (_event, property) => {
|
||||
try {
|
||||
if (property === orderBy) {
|
||||
if (order === "asc") {
|
||||
setOrder("desc");
|
||||
} else {
|
||||
setOrder("asc");
|
||||
}
|
||||
} else {
|
||||
setOrderBy(property);
|
||||
setOrder("asc");
|
||||
}
|
||||
} catch (e) {
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChangePageIndex = (_event, newIndex) => {
|
||||
setPageIndex(newIndex);
|
||||
};
|
||||
|
||||
const handleChangePageSize = (event) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPageIndex(0);
|
||||
};
|
||||
|
||||
const handleSelectAll = (event) => {
|
||||
if (!onSelectAll) return;
|
||||
|
||||
const newSelected = [];
|
||||
if (event.target.checked) {
|
||||
fleets.forEach((car) => {
|
||||
newSelected.push(car.name);
|
||||
});
|
||||
}
|
||||
|
||||
onSelectAll(newSelected);
|
||||
};
|
||||
|
||||
const handleSelect = (event, key) => {
|
||||
if (!onSelect) return;
|
||||
|
||||
onSelect(event, key);
|
||||
};
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const options = { search: searchTerm,
|
||||
limit: pageSize,
|
||||
offset: pageSize * pageIndex,
|
||||
order: `${orderBy} ${order}`,
|
||||
};
|
||||
(async () => {
|
||||
try {
|
||||
if (!token) return;
|
||||
await getFleets(options, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [token, pageIndex, pageSize, orderBy, order, searchTerm]);
|
||||
|
||||
return (
|
||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||
<Table>
|
||||
<TableHeaderSortable
|
||||
classes={classes}
|
||||
orderBy={orderBy}
|
||||
order={order}
|
||||
columnData={tableColumns}
|
||||
onSortRequest={handleSort}
|
||||
multiSelect={multiSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
selectCount={selected ? selected.length : 0}
|
||||
rowCount={fleets ? fleets.length : 0}
|
||||
/>
|
||||
<TableBody>
|
||||
{fleets.map((row) => {
|
||||
const isSelected = selected
|
||||
? selected.indexOf(row.name) !== -1
|
||||
: false;
|
||||
return (
|
||||
<TableRow key={row.name}>
|
||||
{multiSelect && (
|
||||
<TableCell padding="checkbox">
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onChange={(event) => handleSelect(event, row.name)}
|
||||
/>
|
||||
</TableCell>
|
||||
)}
|
||||
<TableCell align="center">
|
||||
<Link to={`/fleet/${row.name}`}>{row.name}</Link>
|
||||
</TableCell>
|
||||
<TableCell align="center">{row.log_level}</TableCell>
|
||||
<TableCell align="center">{row.canbus.enabled ? "true" : "false"}</TableCell>
|
||||
<TableCell align="center">{row.canbus.data_logger_enabled ? "true" : "false"}</TableCell>
|
||||
<TableCell align="center">{!row.vehicles ? 0 : row.vehicles.length}</TableCell>
|
||||
<TableCell align="center">{!row.canbus.filters ? 0 : row.canbus.filters.length}</TableCell>
|
||||
</TableRow>)
|
||||
}
|
||||
)}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, 100]}
|
||||
colSpan={8}
|
||||
count={totalFleets}
|
||||
rowsPerPage={pageSize}
|
||||
page={pageIndex}
|
||||
SelectProps={{
|
||||
inputProps: {"aria-label": "rows per page"},
|
||||
native: true,
|
||||
}}
|
||||
onPageChange={handleChangePageIndex}
|
||||
onRowsPerPageChange={handleChangePageSize}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
FleetSelectionTable.propTypes = {
|
||||
token: PropTypes.string.isRequired,
|
||||
classes: PropTypes.object.isRequired,
|
||||
search: PropTypes.object.isRequired,
|
||||
multiSelect: PropTypes.bool.isRequired,
|
||||
selected: PropTypes.array,
|
||||
onSelect: PropTypes.func,
|
||||
onSelectAll: PropTypes.func,
|
||||
connectionStatus: PropTypes.bool,
|
||||
}
|
||||
|
||||
export default FleetSelectionTable;
|
||||
@@ -1,79 +0,0 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableRow,
|
||||
} from "@material-ui/core";
|
||||
|
||||
import FileDragArea from "../FileDragArea";
|
||||
import ListHead from "../ListHead";
|
||||
import SubListItem from "../SubListItem";
|
||||
import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
|
||||
import ManifestECUFileTypes from "../ManifestECUFileTypes";
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: "Filename",
|
||||
field: "filename",
|
||||
readonly: true,
|
||||
},
|
||||
{
|
||||
label: "Offset",
|
||||
field: "offset",
|
||||
},
|
||||
{
|
||||
label: "Checksum",
|
||||
field: "checksum",
|
||||
},
|
||||
{
|
||||
label: "Type",
|
||||
field: "type",
|
||||
control: ManifestECUFileTypes,
|
||||
},
|
||||
{
|
||||
label: "",
|
||||
field: "filename",
|
||||
delete: true,
|
||||
},
|
||||
];
|
||||
|
||||
const ManifestECUFileList = ({ data }) => {
|
||||
const { addECUFile, deleteECUFile } = useManifestCreateContext();
|
||||
|
||||
const onAddFile = (files) => {
|
||||
addECUFile(data.data_id, files);
|
||||
};
|
||||
|
||||
const onDeletFile = (filename) => {
|
||||
deleteECUFile(data.data_id, filename);
|
||||
};
|
||||
|
||||
return (
|
||||
<Table>
|
||||
{data && data.files && data.files.length > 0 && (
|
||||
<ListHead options={options} />
|
||||
)}
|
||||
<TableBody>
|
||||
{data.files.map((file) => (
|
||||
<SubListItem
|
||||
key={file.filename}
|
||||
data={file}
|
||||
options={options}
|
||||
onDelete={onDeletFile}
|
||||
/>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={options.length}>
|
||||
<FileDragArea onFileSelect={onAddFile}>ADD FILES</FileDragArea>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManifestECUFileList;
|
||||
@@ -1,75 +0,0 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Button,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableRow,
|
||||
} from "@material-ui/core";
|
||||
|
||||
import ECUDropDrop from "../ECUDropDown";
|
||||
import ListHead from "../ListHead";
|
||||
import ManifestECURow from "../ManifestECURow";
|
||||
import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
|
||||
import PageDragPreventDefault from "../PageDragPreventDefault";
|
||||
|
||||
const options = [
|
||||
{
|
||||
label: "ID",
|
||||
field: "data_id",
|
||||
readonly: true,
|
||||
},
|
||||
{
|
||||
label: "ECU",
|
||||
field: "name",
|
||||
control: ECUDropDrop,
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: "Version",
|
||||
field: "version",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: "Hardware",
|
||||
field: "hw_version",
|
||||
},
|
||||
{
|
||||
label: "",
|
||||
delete: true,
|
||||
},
|
||||
];
|
||||
|
||||
const ManifestECUList = () => {
|
||||
const { ecus, addECU } = useManifestCreateContext();
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageDragPreventDefault />
|
||||
<Table>
|
||||
<ListHead options={options} />
|
||||
<TableBody>
|
||||
{ecus.map((item) => {
|
||||
return (
|
||||
<ManifestECURow
|
||||
key={item.data_id}
|
||||
data={item}
|
||||
options={options}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} align="center">
|
||||
<Button onClick={addECU}>Add ECU</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManifestECUList;
|
||||
@@ -1,33 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
import { TableCell, TableRow } from "@material-ui/core";
|
||||
|
||||
import ManifestECUFileList from "../ManifestECUFileList";
|
||||
import SubListItem from "../SubListItem";
|
||||
import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
|
||||
|
||||
const ManifestECURow = ({ data, options }) => {
|
||||
const { deleteECU } = useManifestCreateContext();
|
||||
|
||||
const onDeleteECU = () => {
|
||||
deleteECU(data.data_id);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<SubListItem
|
||||
key={data.data_id}
|
||||
data={data}
|
||||
options={options}
|
||||
onDelete={onDeleteECU}
|
||||
/>
|
||||
<TableRow>
|
||||
<TableCell colSpan={options.length}>
|
||||
<ManifestECUFileList data={data} />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManifestECURow;
|
||||
@@ -1,68 +0,0 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Button, Grid, LinearProgress, Typography } from "@material-ui/core";
|
||||
|
||||
import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
|
||||
|
||||
const ManifestUploadProgress = (props) => {
|
||||
const { uploadProgress, uploadStatus, uploadFileIndex, uploadedFiles } =
|
||||
useManifestCreateContext();
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [completed, setCompleted] = useState(0);
|
||||
const [total, setTotal] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const x = uploadedFiles.reduce(
|
||||
(current, { file }) => current + file.size,
|
||||
0
|
||||
);
|
||||
setTotal(x);
|
||||
}, [uploadedFiles]);
|
||||
|
||||
useEffect(() => {
|
||||
if (uploadFileIndex === 0 || uploadFileIndex >= uploadedFiles.length)
|
||||
return;
|
||||
let uploaded = 0;
|
||||
uploadedFiles.forEach(({ file }, i) => {
|
||||
if (i < uploadFileIndex) uploaded += file.size;
|
||||
});
|
||||
setCompleted(uploaded);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [uploadFileIndex]);
|
||||
|
||||
useEffect(() => {
|
||||
if (total === 0 || uploadFileIndex >= uploadedFiles.length) return;
|
||||
const { file } = uploadedFiles[uploadFileIndex];
|
||||
const uploaded = completed + file.size * uploadProgress;
|
||||
const x = Math.min(99, Math.floor((uploaded / total) * 100));
|
||||
setProgress(x);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [uploadProgress, completed]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Grid container>
|
||||
<Grid xs={12}>
|
||||
<Typography align="center">
|
||||
{`File ${uploadFileIndex + 1} of ${
|
||||
uploadedFiles.length
|
||||
}. ${uploadStatus}`}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container alignContent="center" spacing={0}>
|
||||
<Grid xs={11}>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={progress}
|
||||
style={{ marginTop: 16 }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid xs={1} alignContent="flex-end" align="right">
|
||||
<Button onClick={props.onCancel}>Cancel</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ManifestUploadProgress;
|
||||
77
src/components/Controls/OptionsDropdown/index.jsx
Normal file
77
src/components/Controls/OptionsDropdown/index.jsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import React, {useEffect, useRef, useState} from "react";
|
||||
import {ClickAwayListener, Grow, IconButton, MenuList, Paper, Popper} from "@material-ui/core";
|
||||
import TuneIcon from "@material-ui/icons/Tune";
|
||||
|
||||
|
||||
const OptionsDropdown = ({listId, children}) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const anchorRef = useRef(null);
|
||||
const prevOpen = useRef(open);
|
||||
|
||||
const handleToggle = () => {
|
||||
setOpen((pOpen) => !pOpen);
|
||||
};
|
||||
|
||||
const handleClose = (event) => {
|
||||
if (anchorRef.current && anchorRef.current.contains(event.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleListKeyDown = (event) => {
|
||||
if (event.key === 'Tab') {
|
||||
event.preventDefault();
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (prevOpen.current === true && open === false) {
|
||||
anchorRef.current.focus();
|
||||
}
|
||||
|
||||
prevOpen.current = open;
|
||||
}, [open]);
|
||||
|
||||
return (<div>
|
||||
<IconButton
|
||||
ref={anchorRef}
|
||||
aria-controls={open ? listId : undefined}
|
||||
aria-haspopup="true"
|
||||
onClick={handleToggle}
|
||||
>
|
||||
<TuneIcon />
|
||||
</IconButton>
|
||||
<Popper open={open} anchorEl={anchorRef.current} role={undefined} transition>
|
||||
{({TransitionProps, placement}) => (
|
||||
<Grow
|
||||
{...TransitionProps}
|
||||
style={{
|
||||
transformOrigin:
|
||||
placement ===
|
||||
'bottom' ?
|
||||
'center top' :
|
||||
'center bottom'
|
||||
}}
|
||||
>
|
||||
<Paper>
|
||||
<ClickAwayListener onClickAway={handleClose}>
|
||||
<MenuList
|
||||
autoFocusItem={open}
|
||||
id={listId}
|
||||
onKeyDown={handleListKeyDown}
|
||||
>
|
||||
{children}
|
||||
</MenuList>
|
||||
</ClickAwayListener>
|
||||
</Paper>
|
||||
</Grow>
|
||||
)}
|
||||
</Popper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default OptionsDropdown;
|
||||
251
src/components/Controls/SendCommand/Commands.jsx
Normal file
251
src/components/Controls/SendCommand/Commands.jsx
Normal file
@@ -0,0 +1,251 @@
|
||||
import {Grid, Slider, Switch} from "@material-ui/core";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
|
||||
const tempMarks = [...[{value: 0, label: "Off"}, {value: 1, label: "On"},],
|
||||
...Array.from({length: 26}, (_, i) => {
|
||||
return {value: i + 2, label: `${i + 15}°C`}
|
||||
})];
|
||||
|
||||
const valuetext = (value) => {
|
||||
return `${value}`;
|
||||
}
|
||||
|
||||
const highMidLowOffMarks = [{
|
||||
value: 3, label: "High",
|
||||
}, {
|
||||
value: 2, label: "Mid",
|
||||
}, {
|
||||
value: 1, label: "Low",
|
||||
}, {
|
||||
value: 0, label: "Off",
|
||||
},]
|
||||
|
||||
const precondMarks = [
|
||||
{value: 0, label: "Battery"},
|
||||
{value: 1, label: "All"},
|
||||
{value: 2, label: "Climate"},
|
||||
{value: 3, label: "Stop"},
|
||||
]
|
||||
|
||||
const labelFunc = (marks) => (value) => marks.find(mark => mark.value === value)?.label;
|
||||
|
||||
const labelRemoved = (marks) => Array.from(marks).map((mark) => {
|
||||
return {value: mark.value}
|
||||
})
|
||||
|
||||
const Commands = [
|
||||
{value: "doors_lock", label: "Lock doors"},
|
||||
{value: "doors_unlock", label: "Unlock doors"},
|
||||
{value: "vent_windows", label: "Vent windows"},
|
||||
{value: "close_windows", label: "Close windows"},
|
||||
{value: "flash_headlights", label: "Flash headlights"},
|
||||
{value: "trunk_close", label: "Close trunk"},
|
||||
{value: "alert", label: "Alert"},
|
||||
{
|
||||
value: "precondition", label: "Precondition", params: {
|
||||
dataFunc: (val, handleValChange) => <span>
|
||||
<Typography id="precondition-slider" gutterBottom>
|
||||
Set driver seat preheat
|
||||
</Typography>
|
||||
<Slider
|
||||
valueLabelFormat={labelFunc(precondMarks)}
|
||||
getAriaValueText={labelFunc(precondMarks)}
|
||||
defaultValue={0}
|
||||
value={val}
|
||||
aria-labelledby="precondition-slider"
|
||||
valueLabelDisplay="auto"
|
||||
step={null}
|
||||
min={0}
|
||||
max={3}
|
||||
marks={precondMarks}
|
||||
size="small"
|
||||
onChange={handleValChange}
|
||||
/>
|
||||
</span>,
|
||||
}
|
||||
},
|
||||
{
|
||||
value: "california_mode", label: "California mode", params: {
|
||||
dataFunc: (val, handleValChange) => {
|
||||
if (typeof val !== "boolean") {
|
||||
val = false
|
||||
}
|
||||
return <span>
|
||||
<Typography id="california_mode-slider" gutterBottom>
|
||||
Set California mode
|
||||
</Typography>
|
||||
<Typography component="div">
|
||||
<Grid component="label" container alignItems="center" spacing={1}>
|
||||
<Grid item>Off</Grid>
|
||||
<Grid item>
|
||||
<Switch checked={val} onChange={handleValChange} name="checkedC"/>
|
||||
</Grid>
|
||||
<Grid item>On</Grid>
|
||||
</Grid>
|
||||
</Typography>
|
||||
</span>
|
||||
},
|
||||
},
|
||||
}, {
|
||||
value: "trunk_open", label: "Open trunk", params: {
|
||||
dataFunc: (val, handleValChange) => <span>
|
||||
<Typography id="trunk_open-slider" gutterBottom>
|
||||
Set trunk's openness level
|
||||
</Typography>
|
||||
<Slider
|
||||
defaultValue={1}
|
||||
value={val}
|
||||
getAriaValueText={valuetext}
|
||||
aria-label="Open trunk"
|
||||
aria-labelledby="trunk_open-slider"
|
||||
valueLabelDisplay="auto"
|
||||
step={1}
|
||||
marks
|
||||
size="small"
|
||||
min={1}
|
||||
max={5}
|
||||
onChange={handleValChange}
|
||||
/>
|
||||
</span>,
|
||||
}
|
||||
}, {
|
||||
value: "temp_cabin", label: "Set cabin temperature(°C)", params: {
|
||||
dataFunc: (val, handleValChange) => {
|
||||
return <span>
|
||||
<Typography id="temp_cabin-slider" gutterBottom>
|
||||
Set cabin temperature
|
||||
</Typography>
|
||||
<Slider
|
||||
valueLabelFormat={labelFunc(tempMarks)}
|
||||
getAriaValueText={labelFunc(tempMarks)}
|
||||
defaultValue={0}
|
||||
value={val}
|
||||
aria-labelledby="temp_cabin-slider"
|
||||
valueLabelDisplay="auto"
|
||||
step={1}
|
||||
min={0}
|
||||
max={27}
|
||||
marks={labelRemoved(tempMarks)}
|
||||
size="small"
|
||||
onChange={handleValChange}
|
||||
/>
|
||||
</span>
|
||||
}
|
||||
}
|
||||
}, {
|
||||
value: "defrost", label: "Defrost", params: {
|
||||
dataFunc: (val, handleValChange) => {
|
||||
if (typeof val !== "boolean") {
|
||||
val = false
|
||||
}
|
||||
return <span>
|
||||
<Typography id="defrost-slider" gutterBottom>
|
||||
Set defrost
|
||||
</Typography>
|
||||
<Typography component="div">
|
||||
<Grid component="label" container alignItems="center" spacing={1}>
|
||||
<Grid item>Off</Grid>
|
||||
<Grid item>
|
||||
<Switch checked={val} onChange={handleValChange} name="checkedC"/>
|
||||
</Grid>
|
||||
<Grid item>On</Grid>
|
||||
</Grid>
|
||||
</Typography>
|
||||
</span>
|
||||
},
|
||||
|
||||
},
|
||||
}, {
|
||||
value: "driver_seat_preheat", label: "Driver seat preheat", params: {
|
||||
dataFunc: (val, handleValChange) => <span>
|
||||
<Typography id="driver_seat_preheat-slider" gutterBottom>
|
||||
Set driver seat preheat
|
||||
</Typography>
|
||||
<Slider
|
||||
valueLabelFormat={labelFunc(highMidLowOffMarks)}
|
||||
getAriaValueText={labelFunc(highMidLowOffMarks)}
|
||||
defaultValue={0}
|
||||
value={val}
|
||||
aria-labelledby="driver_seat_preheat-slider"
|
||||
valueLabelDisplay="auto"
|
||||
step={null}
|
||||
min={0}
|
||||
max={3}
|
||||
marks={highMidLowOffMarks}
|
||||
size="small"
|
||||
onChange={handleValChange}
|
||||
/>
|
||||
</span>,
|
||||
}
|
||||
}, {
|
||||
value: "passenger_seat_preheat", label: "Preheat passenger seat", params: {
|
||||
dataFunc: (val, handleValChange) => <span>
|
||||
<Typography id="passenger_seat_preheat-slider" gutterBottom>
|
||||
Set passenger seat preheat
|
||||
</Typography>
|
||||
<Slider
|
||||
valueLabelFormat={labelFunc(highMidLowOffMarks)}
|
||||
getAriaValueText={labelFunc(highMidLowOffMarks)}
|
||||
defaultValue={0}
|
||||
value={val}
|
||||
aria-labelledby="passenger_seat_preheat-slider"
|
||||
valueLabelDisplay="auto"
|
||||
step={null}
|
||||
min={0}
|
||||
max={3}
|
||||
marks={highMidLowOffMarks}
|
||||
size="small"
|
||||
onChange={handleValChange}
|
||||
/>
|
||||
</span>,
|
||||
}
|
||||
}, {
|
||||
value: "steering_wheel_preheat", label: "Preheat Steering wheel", params: {
|
||||
dataFunc: (val, handleValChange) => {
|
||||
if (typeof val !== "boolean") {
|
||||
val = false
|
||||
}
|
||||
|
||||
return <span>
|
||||
<Typography id="steering_wheel_preheat-slider" gutterBottom>
|
||||
Set steering wheel preheat on/off
|
||||
</Typography>
|
||||
<Typography component="div">
|
||||
<Grid component="label" container alignItems="center" spacing={1}>
|
||||
<Grid item>Off</Grid>
|
||||
<Grid item>
|
||||
<Switch checked={val} onChange={handleValChange} name="checkedC"/>
|
||||
</Grid>
|
||||
<Grid item>On</Grid>
|
||||
</Grid>
|
||||
</Typography>
|
||||
</span>
|
||||
},
|
||||
|
||||
},
|
||||
}, {
|
||||
value: "charging", label: "Charging", params: {
|
||||
dataFunc: (val, handleValChange) => {
|
||||
if (typeof val !== "boolean") {
|
||||
val = false
|
||||
}
|
||||
return <span>
|
||||
<Typography id="charging-slider" gutterBottom>
|
||||
Set charging on/off
|
||||
</Typography>
|
||||
<Typography component="div">
|
||||
<Grid component="label" container alignItems="center" spacing={1}>
|
||||
<Grid item>Off</Grid>
|
||||
<Grid item>
|
||||
<Switch checked={val} onChange={handleValChange} name="checkedC"/>
|
||||
</Grid>
|
||||
<Grid item>On</Grid>
|
||||
</Grid>
|
||||
</Typography>
|
||||
</span>
|
||||
},
|
||||
|
||||
},
|
||||
}]
|
||||
|
||||
export default Commands;
|
||||
73
src/components/Controls/SendCommand/Parameters.jsx
Normal file
73
src/components/Controls/SendCommand/Parameters.jsx
Normal file
@@ -0,0 +1,73 @@
|
||||
import PropTypes from "prop-types";
|
||||
import {FormControl} from "@material-ui/core";
|
||||
import useStyles from "../../useStyles";
|
||||
import {MuiPickersUtilsProvider} from "@material-ui/pickers";
|
||||
import DateFnsUtils from "@date-io/date-fns";
|
||||
|
||||
export const Dates = (
|
||||
{
|
||||
startDateFunc,
|
||||
endDateFunc,
|
||||
startDate,
|
||||
handleStartChange,
|
||||
endDate,
|
||||
handleEndChange,
|
||||
}) => {
|
||||
if (startDateFunc && endDateFunc) {
|
||||
return (<MuiPickersUtilsProvider utils={DateFnsUtils}>
|
||||
{startDateFunc(startDate, handleStartChange)}
|
||||
{endDateFunc(endDate, handleEndChange, startDate)}
|
||||
</MuiPickersUtilsProvider>);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
Dates.propTypes = {
|
||||
startDateFunc: PropTypes.func,
|
||||
endDateFunc: PropTypes.func,
|
||||
startDate: PropTypes.instanceOf(Date),
|
||||
handleStartChange: PropTypes.func,
|
||||
endDate: PropTypes.instanceOf(Date),
|
||||
handleEndChange: PropTypes.func
|
||||
}
|
||||
|
||||
export const Parameters = (props) => {
|
||||
const {params} = props;
|
||||
|
||||
const classes = useStyles();
|
||||
|
||||
if (params === null || params === undefined || params === "") {
|
||||
return null;
|
||||
}
|
||||
|
||||
const {data, handleDataChange} = props;
|
||||
const {startDate, handleStartChange} = props;
|
||||
const {endDate, handleEndChange} = props;
|
||||
|
||||
return (
|
||||
<FormControl size="small" className={classes.formControl}>
|
||||
<div style={{width: "300px", marginTop: "1em"}}>
|
||||
{params.dataFunc(data, handleDataChange)}
|
||||
</div>
|
||||
<Dates
|
||||
startDateFunc={params.startDateFunc}
|
||||
endDateFunc={params.endDateFunc}
|
||||
startDate={startDate}
|
||||
handleStartChange={handleStartChange}
|
||||
endDate={endDate}
|
||||
handleEndChange={handleEndChange}
|
||||
></Dates>
|
||||
</FormControl>
|
||||
)
|
||||
}
|
||||
|
||||
Parameters.propTypes = {
|
||||
params: PropTypes.any,
|
||||
data: PropTypes.any,
|
||||
handleDataChange: PropTypes.func,
|
||||
startDate: PropTypes.instanceOf(Date),
|
||||
handleStartChange: PropTypes.func,
|
||||
endDate: PropTypes.instanceOf(Date),
|
||||
handleEndChange: PropTypes.func
|
||||
};
|
||||
140
src/components/Controls/SendCommand/Parameters.test.jsx
Normal file
140
src/components/Controls/SendCommand/Parameters.test.jsx
Normal file
@@ -0,0 +1,140 @@
|
||||
jest.mock("@material-ui/pickers/MuiPickersUtilsProvider")
|
||||
|
||||
|
||||
import {render, waitFor} from "@testing-library/react";
|
||||
import {Dates, Parameters} from "./Parameters";
|
||||
import addSnapshotSerializer from "../../../utils/snapshot";
|
||||
|
||||
|
||||
const date = Date.parse("2011-10-10T14:48:00")
|
||||
|
||||
const renderDates = async (empty) => {
|
||||
if (empty) {
|
||||
await waitFor(() => {
|
||||
/* render */
|
||||
});
|
||||
const { container } = render(<Dates startDateFunc={null} endDateFunc={null}/>)
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
|
||||
const [start, setStart] = [date, (_) => {}];
|
||||
const [end, setEnd] = [date, (_) => {}];
|
||||
|
||||
const handleStartChange = (val) => {
|
||||
setStart(val)
|
||||
}
|
||||
|
||||
const handleEndChange = (val) => {
|
||||
setEnd(val)
|
||||
}
|
||||
|
||||
await waitFor(() => {
|
||||
/* render */
|
||||
});
|
||||
|
||||
const {container} = render(
|
||||
<div>
|
||||
<Dates
|
||||
startDateFunc={(val, handleValChange) => <div>{val.toString()}</div>}
|
||||
endDateFunc={(val, handleValChange, prevVal) => <div>{val.toString()}, {prevVal.toString()}</div>}
|
||||
startDate={start}
|
||||
endDate={end}
|
||||
handleStartChange={handleStartChange}
|
||||
handleEndChange={handleEndChange}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
return container
|
||||
}
|
||||
|
||||
describe("Dates", () => {
|
||||
beforeAll(() => {
|
||||
addSnapshotSerializer(expect);
|
||||
})
|
||||
|
||||
it("Render empty", async () => {
|
||||
const container = await renderDates(true);
|
||||
expect(container).toMatchSnapshot();
|
||||
})
|
||||
|
||||
it("Render filled", async () => {
|
||||
const container = await renderDates(false);
|
||||
expect(container).toMatchSnapshot();
|
||||
})
|
||||
})
|
||||
|
||||
const renderState = {
|
||||
EMPTY: 0,
|
||||
JUST_DATA: 1,
|
||||
WITH_DATE: 2,
|
||||
}
|
||||
|
||||
const renderParameters = async (rs) => {
|
||||
await waitFor(() => {
|
||||
/* render */
|
||||
});
|
||||
|
||||
if (rs===renderState.EMPTY) {
|
||||
const { container } = render(<Parameters/>)
|
||||
|
||||
return container;
|
||||
}
|
||||
const params = {dataFunc:(val, handleValChange) => <div>val.toString()</div>}
|
||||
const [data, handleDataChange] = [true, (_)=>{}];
|
||||
|
||||
if (rs===renderState.JUST_DATA) {
|
||||
const { container } = render(<Parameters
|
||||
params={params}
|
||||
data={data}
|
||||
handleDataChange={handleDataChange}
|
||||
/>)
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
params.startDateFunc = (val, handleValChange) => (<div>val.toString()</div>)
|
||||
params.endDateFunc = (val, handleValChange, prevVal) => (<div>val.toString(), prevVal.toString()</div>)
|
||||
|
||||
const [start, handleStartChange] = [date, (_)=>{}];
|
||||
const [end, handleEndChange] = [date, (_)=>{}];
|
||||
|
||||
if (rs===renderState.WITH_DATE) {
|
||||
const {container} = render(<Parameters
|
||||
params={params}
|
||||
data={data}
|
||||
handleDataChange={handleDataChange}
|
||||
start={start}
|
||||
handleStartChange={handleStartChange}
|
||||
end={end}
|
||||
handleEndChange={handleEndChange}
|
||||
/>
|
||||
)
|
||||
|
||||
return container
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
describe("Params", () => {
|
||||
beforeAll(() => {
|
||||
addSnapshotSerializer(expect);
|
||||
})
|
||||
|
||||
it("Render empty", async () => {
|
||||
const container = await renderParameters(renderState.EMPTY);
|
||||
expect(container).toMatchSnapshot();
|
||||
})
|
||||
|
||||
it("Render just data", async () => {
|
||||
const container = await renderDates(renderState.JUST_DATA);
|
||||
expect(container).toMatchSnapshot();
|
||||
})
|
||||
|
||||
it("Render with date", async () => {
|
||||
const container = await renderDates(renderState.WITH_DATE);
|
||||
expect(container).toMatchSnapshot();
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,24 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Dates Render empty 1`] = `<div />`;
|
||||
|
||||
exports[`Dates Render filled 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
1318258080000
|
||||
</div>
|
||||
<div>
|
||||
1318258080000
|
||||
,
|
||||
1318258080000
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Params Render empty 1`] = `<div />`;
|
||||
|
||||
exports[`Params Render just data 1`] = `<div />`;
|
||||
|
||||
exports[`Params Render with date 1`] = `<div />`;
|
||||
@@ -1,31 +1,32 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { FormControl, IconButton, InputLabel, Select } from "@material-ui/core";
|
||||
import SendIcon from "@material-ui/icons/Send";
|
||||
import {Button, FormControl, InputLabel, Select} from "@material-ui/core";
|
||||
|
||||
import { useVehicleContext } from "../../Contexts/VehicleContext";
|
||||
import commands from "../../../services/commands";
|
||||
import {useVehicleContext} from "../../Contexts/VehicleContext";
|
||||
import commands from "./Commands";
|
||||
import useStyles from "../../useStyles";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import {useUserContext} from "../../Contexts/UserContext";
|
||||
import {useStatusContext} from "../../Contexts/StatusContext";
|
||||
import {logger} from "../../../services/monitoring";
|
||||
import {Parameters} from "./Parameters";
|
||||
import clsx from "clsx";
|
||||
import {sanitize} from "./sanitize";
|
||||
|
||||
const SendCommand = ({ vins }) => {
|
||||
const SendCommand = ({vins}) => {
|
||||
const classes = useStyles();
|
||||
const { sendCommand, busy } = useVehicleContext();
|
||||
const {busy, sendCommand} = useVehicleContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
idToken: {jwtToken: token},
|
||||
},
|
||||
} = useUserContext();
|
||||
const NoParameters = {
|
||||
value: "",
|
||||
label: "None",
|
||||
};
|
||||
const { setMessage } = useStatusContext();
|
||||
const {setMessage} = useStatusContext();
|
||||
const [command, setCommand] = useState("");
|
||||
const [parameters, setParameters] = useState([NoParameters]);
|
||||
const [parameter, setParameter] = useState("");
|
||||
const [parameters, setParameters] = useState(null);
|
||||
const [data, setData] = useState(null);
|
||||
const [startTime, setStartTime] = useState(null)
|
||||
const [endTime, setEndTime] = useState(null)
|
||||
|
||||
const changeCommandHandler = (e) => {
|
||||
selectCommand(e.target.value);
|
||||
};
|
||||
@@ -34,16 +35,27 @@ const SendCommand = ({ vins }) => {
|
||||
const params = getParameters(cmd);
|
||||
setCommand(cmd);
|
||||
setParameters(params);
|
||||
setParameter(params[0].value);
|
||||
setData(null);
|
||||
setStartTime(null);
|
||||
setEndTime(null);
|
||||
};
|
||||
|
||||
const changeParametersHandler = (e) => {
|
||||
setParameter(e.target.value);
|
||||
const handleDataChange = (_, value) => {
|
||||
setData(value);
|
||||
};
|
||||
|
||||
const clickHandler = async (e) => {
|
||||
const handleStartChange = (date, _) => {
|
||||
setStartTime(date);
|
||||
}
|
||||
|
||||
const handleEndChange = (date, _) => {
|
||||
setEndTime(date)
|
||||
}
|
||||
|
||||
const clickHandler = async (_) => {
|
||||
try {
|
||||
await sendCommand(vins, command, parameter, token);
|
||||
const cmd = sanitize({command: command, data: data, start: startTime, end: endTime});
|
||||
await sendCommand(vins, cmd, token);
|
||||
if (vins.length === 1) {
|
||||
setMessage(`Sent command to ${vins[0]}`);
|
||||
} else {
|
||||
@@ -59,13 +71,13 @@ const SendCommand = ({ vins }) => {
|
||||
for (let i = 0, len = commands.length; i < len; i += 1) {
|
||||
const item = commands[i];
|
||||
if (item.value === cmd) {
|
||||
if (!item.parameters) {
|
||||
if (!item.params) {
|
||||
break;
|
||||
}
|
||||
return item.parameters;
|
||||
return item.params;
|
||||
}
|
||||
}
|
||||
return [NoParameters];
|
||||
return null;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -75,9 +87,9 @@ const SendCommand = ({ vins }) => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={classes.form} style={{ marginTop: 20 }}>
|
||||
<div className={clsx(classes.paper)} style={{marginTop: 20}}>
|
||||
<FormControl
|
||||
className={classes.formControlInline}
|
||||
className={classes.formControl}
|
||||
variant="outlined"
|
||||
size="small"
|
||||
>
|
||||
@@ -101,45 +113,27 @@ const SendCommand = ({ vins }) => {
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
className={classes.formControlInline}
|
||||
variant="outlined"
|
||||
size="small"
|
||||
>
|
||||
<InputLabel
|
||||
htmlFor="send-parameter"
|
||||
className={classes.whiteBackground}
|
||||
>
|
||||
Parameter
|
||||
</InputLabel>
|
||||
<Select
|
||||
native
|
||||
value={parameter}
|
||||
variant="outlined"
|
||||
inputProps={{
|
||||
name: "send-parameter",
|
||||
id: "send-parameter",
|
||||
}}
|
||||
onChange={changeParametersHandler}
|
||||
disabled={parameters.length === 0}
|
||||
>
|
||||
{parameters.map((item) => (
|
||||
<option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<IconButton
|
||||
color="primary"
|
||||
<Parameters
|
||||
params={parameters}
|
||||
data={data}
|
||||
handleDataChange={handleDataChange}
|
||||
startDate={startTime}
|
||||
handleStartChange={handleStartChange}
|
||||
endDate={endTime}
|
||||
handleEndChange={handleEndChange}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
aria-label="send command"
|
||||
component="span"
|
||||
onClick={clickHandler}
|
||||
size="small"
|
||||
disabled={busy || vins.length === 0}
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={classes.submit}
|
||||
onClick={clickHandler}
|
||||
>
|
||||
<SendIcon fontSize="large" />
|
||||
</IconButton>
|
||||
{busy ? "Sending..." : "Send"}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
115
src/components/Controls/SendCommand/sanitize.js
Normal file
115
src/components/Controls/SendCommand/sanitize.js
Normal file
@@ -0,0 +1,115 @@
|
||||
export const onOff = {
|
||||
false: "off",
|
||||
true: "on",
|
||||
}
|
||||
|
||||
export const onOffTemp = {
|
||||
0: "off",
|
||||
1: "on",
|
||||
...Object.fromEntries(Array.from({length: 26}, (_, i) => [i+2, `${i+15}`]))
|
||||
}
|
||||
|
||||
export const precond = {
|
||||
0: "battery",
|
||||
1: "all",
|
||||
2: "climate",
|
||||
3: "stop"
|
||||
}
|
||||
|
||||
export const hmol = {
|
||||
0: "off",
|
||||
1: "low",
|
||||
2: "mid",
|
||||
3: "high"
|
||||
}
|
||||
|
||||
export const emptyCommands = [
|
||||
"doors_lock", "doors_unlock", "vent_windows",
|
||||
"close_windows", "trunk_close", "flash_headlights",
|
||||
"alert"
|
||||
]
|
||||
|
||||
export const onOffCommands = ["california_mode", "steering_wheel_preheat", "defrost", "charging"]
|
||||
|
||||
export const hmolCommands = ["passenger_seat_preheat", "driver_seat_preheat"]
|
||||
|
||||
|
||||
const removeIfFieldsAreEmpty = (cmd, fields) => {
|
||||
for (const field of fields) {
|
||||
if (cmd[field] == null) {
|
||||
delete cmd[field]
|
||||
}
|
||||
}
|
||||
|
||||
return cmd
|
||||
}
|
||||
|
||||
const tempCabinPeriodConvert = (cmd) => {
|
||||
if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 0 || cmd.data > 27) {
|
||||
cmd.data = 0
|
||||
}
|
||||
|
||||
cmd.data = onOffTemp[cmd.data]
|
||||
|
||||
return cmd
|
||||
}
|
||||
|
||||
const onOffConvert = (cmd) => {
|
||||
if (cmd.data == null || cmd.data !== true) {
|
||||
cmd.data = false
|
||||
}
|
||||
|
||||
cmd.data = onOff[cmd.data]
|
||||
|
||||
return cmd
|
||||
}
|
||||
|
||||
const precondConvert = cmd => {
|
||||
if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 0 || cmd.data > 3) {
|
||||
cmd.data = 0
|
||||
}
|
||||
|
||||
cmd.data = precond[cmd.data]
|
||||
|
||||
return cmd
|
||||
}
|
||||
|
||||
const hmolConvert = (cmd) => {
|
||||
if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 0 || cmd.data > 3) {
|
||||
cmd.data = 0
|
||||
}
|
||||
|
||||
cmd.data = hmol[cmd.data]
|
||||
|
||||
return cmd
|
||||
}
|
||||
|
||||
const trunkOpenConvert = (cmd) => {
|
||||
if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 1 || cmd.data > 5) {
|
||||
cmd.data = 1
|
||||
}
|
||||
|
||||
cmd.data = cmd.data.toString()
|
||||
|
||||
return cmd
|
||||
}
|
||||
|
||||
export const sanitize = (cmd) => {
|
||||
cmd = removeIfFieldsAreEmpty(cmd, ["data", "start", "end"])
|
||||
|
||||
if (onOffCommands.includes(cmd.command)) {
|
||||
cmd = onOffConvert(cmd)
|
||||
} else if (hmolCommands.includes(cmd.command)) {
|
||||
cmd = hmolConvert(cmd)
|
||||
} else if (cmd.command === "precondition") {
|
||||
cmd = precondConvert(cmd)
|
||||
} else if (cmd.command === "trunk_open") {
|
||||
cmd = trunkOpenConvert(cmd)
|
||||
} else if (cmd.command === "temp_cabin") {
|
||||
cmd = tempCabinPeriodConvert(cmd)
|
||||
} else {
|
||||
delete cmd.data;
|
||||
}
|
||||
|
||||
return cmd
|
||||
}
|
||||
150
src/components/Controls/SendCommand/sanitize.test.js
Normal file
150
src/components/Controls/SendCommand/sanitize.test.js
Normal file
@@ -0,0 +1,150 @@
|
||||
import {emptyCommands, hmol, hmolCommands, onOff, onOffCommands, onOffTemp, precond, sanitize,} from "./sanitize";
|
||||
|
||||
const randomValues = [null, undefined, "someString", 33]
|
||||
|
||||
describe("Sanitize test", () => {
|
||||
it("empty commands", () => {
|
||||
for (const command of emptyCommands) {
|
||||
const cmd = sanitize({command})
|
||||
expect(cmd.command).toEqual(command)
|
||||
expect("data" in cmd).toEqual(false);
|
||||
expect("start" in cmd).toEqual(false);
|
||||
expect("end" in cmd).toEqual(false);
|
||||
}
|
||||
})
|
||||
|
||||
it("on-off commands with proper values", () => {
|
||||
for (const command of onOffCommands) {
|
||||
for (const data of [false, true]) {
|
||||
const cmd = sanitize({command, data})
|
||||
|
||||
expect(cmd.data).toEqual(onOff[data])
|
||||
expect(cmd.command).toEqual(command)
|
||||
expect("start" in cmd).toEqual(false);
|
||||
expect("end" in cmd).toEqual(false);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
it("on-off commands with dirty values", () => {
|
||||
for (const command of onOffCommands) {
|
||||
const cmd = {command}
|
||||
for (const rVal of randomValues) {
|
||||
if (rVal !== undefined) {
|
||||
cmd.data = rVal
|
||||
}
|
||||
const res = sanitize(cmd)
|
||||
|
||||
expect(res.data).toEqual("off")
|
||||
expect(res.command).toEqual(command)
|
||||
expect("start" in res).toEqual(false);
|
||||
expect("end" in res).toEqual(false);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
it("high-mid-low-off with proper values", () => {
|
||||
for (const command of hmolCommands) {
|
||||
for (const data of [0,1,2,3]) {
|
||||
const cmd = sanitize({command, data})
|
||||
|
||||
expect(cmd.data).toEqual(hmol[data])
|
||||
expect(cmd.command).toEqual(command)
|
||||
expect("start" in cmd).toEqual(false);
|
||||
expect("end" in cmd).toEqual(false);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
it("precondition with proper values", () => {
|
||||
for (const data of [0,1,2,3]) {
|
||||
const cmd = sanitize({command:"precondition", data})
|
||||
|
||||
expect(cmd.data).toEqual(precond[data])
|
||||
expect(cmd.command).toEqual("precondition")
|
||||
expect("start" in cmd).toEqual(false);
|
||||
expect("end" in cmd).toEqual(false);
|
||||
}
|
||||
})
|
||||
|
||||
it("precondition with wrong values", () => {
|
||||
const cmd = {command:"precondition"}
|
||||
for (const rVal of randomValues) {
|
||||
if (rVal !== undefined) {
|
||||
cmd.data = rVal
|
||||
}
|
||||
const res = sanitize(cmd)
|
||||
|
||||
expect(res.data).toEqual("battery")
|
||||
expect(res.command).toEqual("precondition")
|
||||
expect("start" in res).toEqual(false);
|
||||
expect("end" in res).toEqual(false);
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
it("high-mid-low-off with wrong values", () => {
|
||||
for (const command of hmolCommands) {
|
||||
const cmd = {command}
|
||||
for (const rVal of randomValues) {
|
||||
if (rVal !== undefined) {
|
||||
cmd.data = rVal
|
||||
}
|
||||
const res = sanitize(cmd)
|
||||
|
||||
expect(res.data).toEqual("off")
|
||||
expect(res.command).toEqual(command)
|
||||
expect("start" in res).toEqual(false);
|
||||
expect("end" in res).toEqual(false);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
it("open trunk", () => {
|
||||
const cmd = {command: "trunk_open"}
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
cmd.data = i
|
||||
|
||||
const res = sanitize(cmd)
|
||||
|
||||
expect(res.data).toEqual(i.toString())
|
||||
expect(res.command).toEqual("trunk_open")
|
||||
expect("start" in res).toEqual(false);
|
||||
expect("end" in res).toEqual(false);
|
||||
}
|
||||
})
|
||||
|
||||
it("open trunk with wrong values", () => {
|
||||
const cmd = {command: "trunk_open"}
|
||||
for (const rVal of randomValues) {
|
||||
if (rVal !== undefined) {
|
||||
cmd.data = rVal
|
||||
}
|
||||
const res = sanitize(cmd)
|
||||
|
||||
expect(res.data).toEqual("1")
|
||||
expect(res.command).toEqual("trunk_open")
|
||||
expect("start" in res).toEqual(false);
|
||||
expect("end" in res).toEqual(false);
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
it("cabin temp with period with proper values", () => {
|
||||
for (let i = 0; i <= 27; i++) {
|
||||
const res = sanitize({
|
||||
command: "temp_cabin",
|
||||
data: i,
|
||||
start: new Date(),
|
||||
end: new Date(),
|
||||
})
|
||||
|
||||
|
||||
expect(res.command).toEqual("temp_cabin")
|
||||
expect(res.data).toEqual(onOffTemp[i])
|
||||
expect(typeof res.start).toEqual("object")
|
||||
expect(typeof res.end).toEqual("object")
|
||||
}
|
||||
})
|
||||
})
|
||||
@@ -8,7 +8,7 @@ exports[`TabPanel Render 1`] = `
|
||||
role="tabpanel"
|
||||
>
|
||||
<div
|
||||
class="MuiBox-root MuiBox-root-1"
|
||||
class="MuiBox-root MuiBox-root-0"
|
||||
>
|
||||
<div>
|
||||
Test
|
||||
|
||||
@@ -55,10 +55,10 @@ exports[`FleetAddForm Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
>
|
||||
<span>
|
||||
Name
|
||||
@@ -85,19 +85,19 @@ exports[`FleetAddForm Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="trace"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -111,7 +111,7 @@ exports[`FleetAddForm Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -136,19 +136,19 @@ exports[`FleetAddForm Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="debug"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -162,7 +162,7 @@ exports[`FleetAddForm Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -187,20 +187,20 @@ exports[`FleetAddForm Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="info"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
|
||||
class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -214,7 +214,7 @@ exports[`FleetAddForm Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -239,19 +239,19 @@ exports[`FleetAddForm Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="warn"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -265,7 +265,7 @@ exports[`FleetAddForm Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -290,19 +290,19 @@ exports[`FleetAddForm Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="error"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -316,7 +316,7 @@ exports[`FleetAddForm Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -341,19 +341,19 @@ exports[`FleetAddForm Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="critical"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -367,7 +367,7 @@ exports[`FleetAddForm Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -402,14 +402,14 @@ exports[`FleetAddForm Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
data-indeterminate="false"
|
||||
type="checkbox"
|
||||
value=""
|
||||
@@ -468,10 +468,10 @@ exports[`FleetAddForm Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Max Memory Buffer Size (0 uses default size)
|
||||
@@ -486,13 +486,13 @@ exports[`FleetAddForm Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
data-indeterminate="false"
|
||||
type="checkbox"
|
||||
value=""
|
||||
@@ -553,10 +553,10 @@ exports[`FleetAddForm Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Max Disk Buffer Size (0 uses default size)
|
||||
|
||||
@@ -56,10 +56,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
>
|
||||
<span>
|
||||
Fleet Name
|
||||
@@ -102,10 +102,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
>
|
||||
<span>
|
||||
CAN ID
|
||||
@@ -140,10 +140,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
>
|
||||
<span>
|
||||
Interval
|
||||
|
||||
@@ -56,10 +56,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
>
|
||||
<span>
|
||||
Fleet Name
|
||||
@@ -103,10 +103,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
>
|
||||
<span>
|
||||
CAN ID
|
||||
@@ -149,10 +149,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
>
|
||||
<span>
|
||||
Interval
|
||||
|
||||
@@ -55,10 +55,10 @@ exports[`FleetVehicleAdd Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
>
|
||||
<span>
|
||||
VIN
|
||||
|
||||
@@ -42,11 +42,16 @@ const MainForm = ({ name }) => {
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [orderBy, setOrderBy] = useState("id");
|
||||
const [order, setOrder] = useState("desc");
|
||||
const [search, setSearch] = useState("");
|
||||
const classes = useStyles();
|
||||
const { setMessage } = useStatusContext();
|
||||
const { fleetVehicles, totalFleetVehicles, getFleetVehicles, deleteFleetVehicle } = useFleetContext();
|
||||
const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
|
||||
|
||||
const handleSearch = (query) => {
|
||||
setSearch(query);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
@@ -54,6 +59,7 @@ const MainForm = ({ name }) => {
|
||||
await getFleetVehicles(
|
||||
name,
|
||||
{
|
||||
search,
|
||||
limit: pageSize,
|
||||
offset: pageSize * pageIndex,
|
||||
order: `${orderBy} ${order}`,
|
||||
@@ -66,7 +72,7 @@ const MainForm = ({ name }) => {
|
||||
}
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [token, pageIndex, pageSize, orderBy, order]);
|
||||
}, [token, pageIndex, pageSize, orderBy, order, search]);
|
||||
|
||||
const handleChangePageIndex = (event, newIndex) => {
|
||||
setPageIndex(newIndex);
|
||||
@@ -145,7 +151,7 @@ const MainForm = ({ name }) => {
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid item md={8} align="right" className={classes.textCenterAlign}>
|
||||
<SearchField classes={classes} />
|
||||
<SearchField classes={classes} onSearch={handleSearch}/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Table>
|
||||
|
||||
@@ -15,7 +15,7 @@ exports[`FleetStatus Render 1`] = `
|
||||
class="makeStyles-paper-0 makeStyles-tableSize-0"
|
||||
>
|
||||
<div
|
||||
class="MuiBox-root MuiBox-root-64 makeStyles-tableToolbar-0"
|
||||
class="MuiBox-root MuiBox-root-0 makeStyles-tableToolbar-0"
|
||||
>
|
||||
<div
|
||||
class="MuiTabs-root"
|
||||
@@ -85,7 +85,7 @@ exports[`FleetStatus Render 1`] = `
|
||||
</button>
|
||||
</div>
|
||||
<span
|
||||
class="PrivateTabIndicator-root-65 PrivateTabIndicator-colorSecondary-67 MuiTabs-indicator"
|
||||
class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
|
||||
style="left: 0px; width: 0px;"
|
||||
/>
|
||||
</div>
|
||||
@@ -97,7 +97,7 @@ exports[`FleetStatus Render 1`] = `
|
||||
role="tabpanel"
|
||||
>
|
||||
<div
|
||||
class="MuiBox-root MuiBox-root-69"
|
||||
class="MuiBox-root MuiBox-root-0"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-0 makeStyles-tableSize-0"
|
||||
|
||||
@@ -24,7 +24,6 @@ exports[`FleetTable Render 1`] = `
|
||||
class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
|
||||
>
|
||||
<a
|
||||
class="makeStyles-labelInline-0"
|
||||
href="/fleet-add"
|
||||
>
|
||||
<svg
|
||||
@@ -40,7 +39,6 @@ exports[`FleetTable Render 1`] = `
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
align="right"
|
||||
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-4"
|
||||
>
|
||||
<div
|
||||
@@ -98,6 +96,9 @@ exports[`FleetTable Render 1`] = `
|
||||
class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="makeStyles-paper-0 makeStyles-tableSize-0"
|
||||
>
|
||||
<table
|
||||
class="MuiTable-root"
|
||||
>
|
||||
@@ -494,5 +495,6 @@ exports[`FleetTable Render 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -1,66 +1,26 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Grid,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TablePagination,
|
||||
TableRow
|
||||
} from "@material-ui/core";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {Link} from 'react-router-dom';
|
||||
import {Grid,} from "@material-ui/core";
|
||||
import AddCircleIcon from "@material-ui/icons/AddCircle";
|
||||
import clsx from "clsx";
|
||||
|
||||
import TableHeaderSortable from "../../Table/HeaderSortable";
|
||||
import {
|
||||
useUserContext
|
||||
} from "../../Contexts/UserContext"
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import { FleetProvider, useFleetContext } from "../../Contexts/FleetContext"
|
||||
import {useUserContext} from "../../Contexts/UserContext"
|
||||
import {useStatusContext} from "../../Contexts/StatusContext";
|
||||
import {FleetProvider} from "../../Contexts/FleetContext"
|
||||
import useStyles from "../../useStyles";
|
||||
import SearchField from "../../Controls/SearchField";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import {useLocalStorage} from "../../useLocalStorage";
|
||||
import FleetSelectionTable from "../../Controls/FleetSelectionTable";
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
id: "name",
|
||||
label: "Name"
|
||||
},
|
||||
{
|
||||
id: "log_level",
|
||||
label: "Log Level"
|
||||
},
|
||||
{
|
||||
id: "canbus_enabled",
|
||||
label: "CAN Bus Enabled"
|
||||
},
|
||||
{
|
||||
id: "data_logger_enabled",
|
||||
label: "Data Logger Enabled"
|
||||
},
|
||||
{
|
||||
id: "num_vehicles",
|
||||
label: "Vehicles"
|
||||
},
|
||||
{
|
||||
id: "num_filters",
|
||||
label: "Filters"
|
||||
}
|
||||
];
|
||||
|
||||
const PAGE_SIZE = "FLEET_TABLE_PAGE_SIZE";
|
||||
|
||||
const MainForm = () => {
|
||||
const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [orderBy, setOrderBy] = useState("id");
|
||||
const [order, setOrder] = useState("desc");
|
||||
const classes = useStyles();
|
||||
const { setMessage, setSitePath, setTitle } = useStatusContext();
|
||||
const { fleets, totalFleets, getFleets } = useFleetContext();
|
||||
const { token: { idToken: { jwtToken: token } } } = useUserContext();
|
||||
const [search, setSearch] = useState("");
|
||||
const {setSitePath, setTitle} = useStatusContext();
|
||||
const {token: {idToken: {jwtToken: token}}} = useUserContext();
|
||||
|
||||
const handleSearch = (query) => {
|
||||
setSearch(query);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setTitle("Fleets");
|
||||
@@ -68,106 +28,26 @@ const MainForm = () => {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
if (!token) return;
|
||||
await getFleets(
|
||||
{
|
||||
limit: pageSize,
|
||||
offset: pageSize * pageIndex,
|
||||
order: `${orderBy} ${order}`,
|
||||
},
|
||||
token
|
||||
);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [token, pageIndex, pageSize, orderBy, order]);
|
||||
|
||||
const handleChangePageIndex = (_event, newIndex) => {
|
||||
setPageIndex(newIndex);
|
||||
};
|
||||
|
||||
const handleChangePageSize = (event) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPageIndex(0);
|
||||
};
|
||||
|
||||
const handleSort = (_event, property) => {
|
||||
try {
|
||||
if (property === orderBy) {
|
||||
if (order === "asc") {
|
||||
setOrder("desc");
|
||||
} else {
|
||||
setOrder("asc");
|
||||
}
|
||||
} else {
|
||||
setOrderBy(property);
|
||||
setOrder("asc");
|
||||
}
|
||||
} catch (e) {
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||
<Grid container className={classes.root} spacing={2}>
|
||||
<Grid item md={4} className={classes.textJustifyAlign}>
|
||||
<Link to={"/fleet-add"} className={classes.labelInline}>
|
||||
<AddCircleIcon fontSize="large" />
|
||||
<Link to={"/fleet-add"}>
|
||||
<AddCircleIcon fontSize="large"/>
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid item md={4} align="right" className={classes.textCenterAlign}>
|
||||
<SearchField classes={classes} />
|
||||
<Grid item md={4} className={classes.textCenterAlign}>
|
||||
<SearchField classes={classes} onSearch={handleSearch}/>
|
||||
</Grid>
|
||||
<Grid item md={4} className={classes.textRightAlign}></Grid>
|
||||
</Grid>
|
||||
<Table>
|
||||
<TableHeaderSortable
|
||||
<FleetSelectionTable
|
||||
token={token}
|
||||
classes={classes}
|
||||
orderBy={orderBy}
|
||||
order={order}
|
||||
columnData={tableColumns}
|
||||
onSortRequest={handleSort}
|
||||
search={{search}}
|
||||
multiSelect={false}
|
||||
/>
|
||||
<TableBody>
|
||||
{fleets.map((row) => (
|
||||
<TableRow key={row.name}>
|
||||
<TableCell align="center">
|
||||
<Link to={`/fleet/${row.name}`}>{row.name}</Link>
|
||||
</TableCell>
|
||||
<TableCell align="center">{row.log_level}</TableCell>
|
||||
<TableCell align="center">{row.canbus.enabled ? "true" : "false"}</TableCell>
|
||||
<TableCell align="center">{row.canbus.data_logger_enabled ? "true" : "false"}</TableCell>
|
||||
<TableCell align="center">{!row.vehicles ? 0 : row.vehicles.length}</TableCell>
|
||||
<TableCell align="center">{!row.canbus.filters ? 0 : row.canbus.filters.length}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, 100]}
|
||||
colSpan={8}
|
||||
count={totalFleets}
|
||||
rowsPerPage={pageSize}
|
||||
page={pageIndex}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onPageChange={handleChangePageIndex}
|
||||
onRowsPerPageChange={handleChangePageSize}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div >
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -26,7 +26,7 @@ exports[`FleetUpdate Render 1`] = `
|
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-disabled Mui-disabled Mui-required Mui-required"
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
|
||||
data-shrink="false"
|
||||
for="name"
|
||||
id="name-label"
|
||||
@@ -41,26 +41,24 @@ exports[`FleetUpdate Render 1`] = `
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root Mui-disabled Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled Mui-disabled"
|
||||
disabled=""
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="name"
|
||||
maxlength="255"
|
||||
name="name"
|
||||
readonly=""
|
||||
required=""
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
class="PrivateNotchedOutline-legendLabelled-0"
|
||||
>
|
||||
<span>
|
||||
Name
|
||||
@@ -87,19 +85,19 @@ exports[`FleetUpdate Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="trace"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -113,7 +111,7 @@ exports[`FleetUpdate Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -138,19 +136,19 @@ exports[`FleetUpdate Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="debug"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -164,7 +162,7 @@ exports[`FleetUpdate Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -189,20 +187,20 @@ exports[`FleetUpdate Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="info"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
|
||||
class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -216,7 +214,7 @@ exports[`FleetUpdate Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -241,19 +239,19 @@ exports[`FleetUpdate Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="warn"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -267,7 +265,7 @@ exports[`FleetUpdate Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -292,19 +290,19 @@ exports[`FleetUpdate Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="error"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -318,7 +316,7 @@ exports[`FleetUpdate Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -343,19 +341,19 @@ exports[`FleetUpdate Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
name="log-level-group"
|
||||
type="radio"
|
||||
value="critical"
|
||||
/>
|
||||
<div
|
||||
class="PrivateRadioButtonIcon-root-72"
|
||||
class="PrivateRadioButtonIcon-root-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
@@ -369,7 +367,7 @@ exports[`FleetUpdate Render 1`] = `
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
|
||||
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
@@ -404,14 +402,14 @@ exports[`FleetUpdate Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
data-indeterminate="false"
|
||||
type="checkbox"
|
||||
value=""
|
||||
@@ -470,10 +468,10 @@ exports[`FleetUpdate Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Max Memory Buffer Size (0 uses default size)
|
||||
@@ -488,13 +486,13 @@ exports[`FleetUpdate Render 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
|
||||
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<input
|
||||
class="PrivateSwitchBase-input-71"
|
||||
class="PrivateSwitchBase-input-0"
|
||||
data-indeterminate="false"
|
||||
type="checkbox"
|
||||
value=""
|
||||
@@ -554,10 +552,10 @@ exports[`FleetUpdate Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Max Disk Buffer Size (0 uses default size)
|
||||
|
||||
@@ -24,7 +24,6 @@ import { logger } from "../../../services/monitoring";
|
||||
|
||||
const MainForm = () => {
|
||||
const queries = new URLSearchParams(useLocation().search);
|
||||
const name = queries.get("name") ?? "";
|
||||
|
||||
const { fleet, getFleet, updateFleet, busy } = useFleetContext();
|
||||
const { token: { idToken: { jwtToken: token } } } = useUserContext();
|
||||
@@ -32,6 +31,8 @@ const MainForm = () => {
|
||||
const [redirect, setRedirect] = useState(null);
|
||||
const classes = useStyles();
|
||||
|
||||
const [name, setName] = useState(queries.get("name") ?? "");
|
||||
const [oldName, ] = useState(name);
|
||||
const [selectedLogLevel, setSelectedLogLevel] = useState("info");
|
||||
const [canbusEnabled, setCANBusEnabled] = useState(true);
|
||||
const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
|
||||
@@ -56,7 +57,7 @@ const MainForm = () => {
|
||||
(async () => {
|
||||
try {
|
||||
if (!name || !token) return;
|
||||
await getFleet(name, token);
|
||||
await getFleet(oldName, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
@@ -77,6 +78,10 @@ const MainForm = () => {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [fleet]);
|
||||
|
||||
const onNameChange = (event) => {
|
||||
setName(event.target.value);
|
||||
}
|
||||
|
||||
const onLogLevelChange = (event) => {
|
||||
setSelectedLogLevel(event.target.value);
|
||||
}
|
||||
@@ -110,7 +115,10 @@ const MainForm = () => {
|
||||
max_disk_buffer_size: canbusEnabled && dataLoggerEnabled ? parseInt(maxDiskBufferSize) : 0
|
||||
}
|
||||
};
|
||||
const result = await updateFleet(name, formData, token);
|
||||
|
||||
console.log(oldName);
|
||||
|
||||
const result = await updateFleet(oldName, formData, token);
|
||||
if (!result || result.error) return;
|
||||
|
||||
setMessage(`Updated ${result.name}`);
|
||||
@@ -136,12 +144,11 @@ const MainForm = () => {
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "255",
|
||||
readOnly: true,
|
||||
}}
|
||||
disabled
|
||||
value={name}
|
||||
required
|
||||
fullWidth
|
||||
onChange={onNameChange}
|
||||
/>
|
||||
<FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
|
||||
<RadioGroup
|
||||
|
||||
@@ -1,157 +0,0 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Redirect } from "react-router";
|
||||
import { Button, TextField, Typography } from "@material-ui/core";
|
||||
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import {
|
||||
ManifestCreateProvider,
|
||||
useManifestCreateContext,
|
||||
} from "../../Contexts/ManifestCreateContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import ManifestECUList from "../../Controls/ManifestECUList";
|
||||
import ManifestUploadProgress from "../../Controls/ManifestUploadProgress";
|
||||
|
||||
const MainForm = () => {
|
||||
const { createManifest, cancelUpload, busy } = useManifestCreateContext();
|
||||
const { token } = useUserContext();
|
||||
const { setMessage, setTitle, setSitePath } = useStatusContext();
|
||||
const [redirect, setRedirect] = useState(null);
|
||||
const classes = useStyles();
|
||||
const packagenameEl = useRef(null);
|
||||
const versionEl = useRef(null);
|
||||
const descEl = useRef(null);
|
||||
const releasenotesEl = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
setTitle("Create Deployments");
|
||||
setSitePath([
|
||||
{
|
||||
label: "Deployments",
|
||||
link: "/packages",
|
||||
},
|
||||
{
|
||||
label: "Create Deployments",
|
||||
},
|
||||
]);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const onSubmit = async (event) => {
|
||||
try {
|
||||
event.preventDefault();
|
||||
const {
|
||||
idToken: { jwtToken: authToken },
|
||||
} = token;
|
||||
const formData = {
|
||||
name: packagenameEl.current.value,
|
||||
version: versionEl.current.value,
|
||||
description: descEl.current.value,
|
||||
release_notes: releasenotesEl.current.value,
|
||||
};
|
||||
const manifest = await createManifest(formData, authToken);
|
||||
|
||||
if (!manifest || manifest.error) return;
|
||||
|
||||
cancelUpload();
|
||||
setMessage(`Package uploaded`);
|
||||
setRedirect(`/package-deploy/${manifest.id}`);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
if (redirect && redirect.length > 0) {
|
||||
return <Redirect to={redirect} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes.paper}>
|
||||
<form className={classes.form} noValidate action="{onSubmit}">
|
||||
<TextField
|
||||
id="packagename"
|
||||
name="packagename"
|
||||
label="Package name"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "255",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
inputRef={packagenameEl}
|
||||
/>
|
||||
<TextField
|
||||
id="version"
|
||||
name="version"
|
||||
label="Version"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "255",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
inputRef={versionEl}
|
||||
/>
|
||||
<TextField
|
||||
id="description"
|
||||
name="description"
|
||||
label="Description"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "5120",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
multiline
|
||||
minRows={4}
|
||||
placeholder="Package description"
|
||||
inputRef={descEl}
|
||||
/>
|
||||
<TextField
|
||||
id="release_notes"
|
||||
name="release_notes"
|
||||
label="Release Notes URL"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "1024",
|
||||
}}
|
||||
required
|
||||
fullWidth
|
||||
placeholder="Release Notes URL"
|
||||
inputRef={releasenotesEl}
|
||||
/>
|
||||
<Typography variant="h6">ECU Files</Typography>
|
||||
<ManifestECUList />
|
||||
{busy ? (
|
||||
<ManifestUploadProgress onCancel={cancelUpload} />
|
||||
) : (
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={busy}
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={classes.submit}
|
||||
onClick={onSubmit}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function FileUploadForm() {
|
||||
return (
|
||||
<ManifestCreateProvider>
|
||||
<MainForm />
|
||||
</ManifestCreateProvider>
|
||||
);
|
||||
}
|
||||
177
src/components/Manifest/Deploy/FleetDeployForm.jsx
Normal file
177
src/components/Manifest/Deploy/FleetDeployForm.jsx
Normal file
@@ -0,0 +1,177 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams, Redirect } from "react-router";
|
||||
import { Button, Grid, Typography } from "@material-ui/core";
|
||||
import clsx from "clsx";
|
||||
|
||||
import {
|
||||
ManifestsProvider,
|
||||
useManifestsContext,
|
||||
} from "../../Contexts/ManifestsContext";
|
||||
import {
|
||||
CarUpdatesProvider,
|
||||
useCarUpdatesContext,
|
||||
} from "../../Contexts/CarUpdatesContext";
|
||||
import { VehicleProvider } from "../../Contexts/VehicleContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import SearchField from "../../Controls/SearchField";
|
||||
import
|
||||
CarSelectionTable from "../../Controls/CarSelectionTable";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import {FleetProvider} from "../../Contexts/FleetContext";
|
||||
|
||||
const MainForm = () => {
|
||||
const { manifest_id } = useParams();
|
||||
const { getManifests, manifests, busy } = useManifestsContext();
|
||||
const { deployCarUpdates } = useCarUpdatesContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
},
|
||||
} = useUserContext();
|
||||
const { setMessage, setTitle, setSitePath } = useStatusContext();
|
||||
const [manifestName, setManifestName] = useState("");
|
||||
const [version, setVersion] = useState("");
|
||||
const [createDate, setCreateDate] = useState("");
|
||||
const [selected, setSelected] = useState([]);
|
||||
const [search, setSearch] = useState("");
|
||||
const [redirect, setRedirect] = useState("");
|
||||
const classes = useStyles();
|
||||
|
||||
const handleSearch = (query) => {
|
||||
setSelected([]);
|
||||
setSearch(query);
|
||||
};
|
||||
|
||||
const handleSelectAll = (cars) => {
|
||||
setSelected(cars);
|
||||
};
|
||||
|
||||
const handleSelect = (event, key) => {
|
||||
try {
|
||||
let newSelected;
|
||||
if (event.target.checked) {
|
||||
newSelected = [...selected];
|
||||
newSelected.push(key);
|
||||
} else {
|
||||
newSelected = selected.filter((vin) => vin !== key);
|
||||
}
|
||||
setSelected(newSelected);
|
||||
} catch (e) {
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = async (event) => {
|
||||
try {
|
||||
event.preventDefault();
|
||||
const data = {
|
||||
manifest_id: parseInt(manifest_id),
|
||||
vins: selected,
|
||||
};
|
||||
await deployCarUpdates(data, token);
|
||||
setMessage(
|
||||
`Deployed ${manifestName} ${version} to ${selected.length} cars`
|
||||
);
|
||||
setRedirect(`/package-status/${manifest_id}`);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
try {
|
||||
getManifests({ id: parseInt(manifest_id) }, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getData();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
const title = `Deploy ${manifestName} ${version}`;
|
||||
setTitle(title);
|
||||
setSitePath([
|
||||
{
|
||||
label: "Deployments",
|
||||
link: "/packages",
|
||||
},
|
||||
{
|
||||
label: title,
|
||||
},
|
||||
]);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [manifestName, version]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!manifests || manifests.length === 0) return;
|
||||
const data = manifests[0];
|
||||
|
||||
setManifestName(data.name);
|
||||
setVersion(data.version);
|
||||
setCreateDate(LocalDateTimeString(data.created));
|
||||
}, [manifests]);
|
||||
|
||||
if (redirect.length > 0) {
|
||||
return <Redirect to={redirect} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes.paper}>
|
||||
<form className={classes.form} noValidate action="{onSubmit}">
|
||||
<Typography variant="body2">Created {createDate}.</Typography>
|
||||
<Grid container className={classes.root} spacing={2}>
|
||||
<Grid item md={4}>
|
||||
<div
|
||||
className={classes.labelInline}
|
||||
>{`${selected.length} Selected`}</div>
|
||||
</Grid>
|
||||
<Grid item md={4} className={classes.textCenterAlign}>
|
||||
<SearchField classes={classes} onSearch={handleSearch} />
|
||||
</Grid>
|
||||
<Grid item md={4} className={classes.textRightAlign}>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={busy || selected.length === 0}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={clsx(classes.formControl, classes.textField)}
|
||||
onClick={onSubmit}
|
||||
>
|
||||
{busy ? "Deploying..." : "Deploy"}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<CarSelectionTable
|
||||
classes={classes}
|
||||
token={token}
|
||||
multiSelect={true}
|
||||
search={{ search }}
|
||||
selected={selected}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FleetDeployForm = () => (
|
||||
<FleetProvider>
|
||||
<ManifestsProvider>
|
||||
<CarUpdatesProvider>
|
||||
<MainForm />
|
||||
</CarUpdatesProvider>
|
||||
</ManifestsProvider>
|
||||
</FleetProvider>
|
||||
);
|
||||
|
||||
export default FleetDeployForm;
|
||||
175
src/components/Manifest/Deploy/VehicleDeployForm.jsx
Normal file
175
src/components/Manifest/Deploy/VehicleDeployForm.jsx
Normal file
@@ -0,0 +1,175 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams, Redirect } from "react-router";
|
||||
import { Button, Grid, Typography } from "@material-ui/core";
|
||||
import clsx from "clsx";
|
||||
|
||||
import {
|
||||
ManifestsProvider,
|
||||
useManifestsContext,
|
||||
} from "../../Contexts/ManifestsContext";
|
||||
import {
|
||||
CarUpdatesProvider,
|
||||
useCarUpdatesContext,
|
||||
} from "../../Contexts/CarUpdatesContext";
|
||||
import { VehicleProvider } from "../../Contexts/VehicleContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import SearchField from "../../Controls/SearchField";
|
||||
import CarSelectionTable from "../../Controls/CarSelectionTable";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
|
||||
const MainForm = () => {
|
||||
const { manifest_id } = useParams();
|
||||
const { getManifests, manifests, busy } = useManifestsContext();
|
||||
const { deployCarUpdates } = useCarUpdatesContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
},
|
||||
} = useUserContext();
|
||||
const { setMessage, setTitle, setSitePath } = useStatusContext();
|
||||
const [manifestName, setManifestName] = useState("");
|
||||
const [version, setVersion] = useState("");
|
||||
const [createDate, setCreateDate] = useState("");
|
||||
const [selected, setSelected] = useState([]);
|
||||
const [search, setSearch] = useState("");
|
||||
const [redirect, setRedirect] = useState("");
|
||||
const classes = useStyles();
|
||||
|
||||
const handleSearch = (query) => {
|
||||
setSelected([]);
|
||||
setSearch(query);
|
||||
};
|
||||
|
||||
const handleSelectAll = (cars) => {
|
||||
setSelected(cars);
|
||||
};
|
||||
|
||||
const handleSelect = (event, key) => {
|
||||
try {
|
||||
let newSelected;
|
||||
if (event.target.checked) {
|
||||
newSelected = [...selected];
|
||||
newSelected.push(key);
|
||||
} else {
|
||||
newSelected = selected.filter((vin) => vin !== key);
|
||||
}
|
||||
setSelected(newSelected);
|
||||
} catch (e) {
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = async (event) => {
|
||||
try {
|
||||
event.preventDefault();
|
||||
const data = {
|
||||
manifest_id: parseInt(manifest_id),
|
||||
vins: selected,
|
||||
};
|
||||
await deployCarUpdates(data, token);
|
||||
setMessage(
|
||||
`Deployed ${manifestName} ${version} to ${selected.length} cars`
|
||||
);
|
||||
setRedirect(`/package-status/${manifest_id}`);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
try {
|
||||
getManifests({ id: parseInt(manifest_id) }, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getData();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
const title = `Deploy ${manifestName} ${version}`;
|
||||
setTitle(title);
|
||||
setSitePath([
|
||||
{
|
||||
label: "Deployments",
|
||||
link: "/packages",
|
||||
},
|
||||
{
|
||||
label: title,
|
||||
},
|
||||
]);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [manifestName, version]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!manifests || manifests.length === 0) return;
|
||||
const data = manifests[0];
|
||||
|
||||
setManifestName(data.name);
|
||||
setVersion(data.version);
|
||||
setCreateDate(LocalDateTimeString(data.created));
|
||||
}, [manifests]);
|
||||
|
||||
if (redirect.length > 0) {
|
||||
return <Redirect to={redirect} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes.paper}>
|
||||
<form className={classes.form} noValidate action="{onSubmit}">
|
||||
<Typography variant="body2">Created {createDate}.</Typography>
|
||||
<Grid container className={classes.root} spacing={2}>
|
||||
<Grid item md={4}>
|
||||
<div
|
||||
className={classes.labelInline}
|
||||
>{`${selected.length} Selected`}</div>
|
||||
</Grid>
|
||||
<Grid item md={4} className={classes.textCenterAlign}>
|
||||
<SearchField classes={classes} onSearch={handleSearch} />
|
||||
</Grid>
|
||||
<Grid item md={4} className={classes.textRightAlign}>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={busy || selected.length === 0}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={clsx(classes.formControl, classes.textField)}
|
||||
onClick={onSubmit}
|
||||
>
|
||||
{busy ? "Deploying..." : "Deploy"}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<CarSelectionTable
|
||||
classes={classes}
|
||||
token={token}
|
||||
multiSelect={true}
|
||||
search={{ search }}
|
||||
selected={selected}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const VehicleDeployForm = () => (
|
||||
<VehicleProvider>
|
||||
<ManifestsProvider>
|
||||
<CarUpdatesProvider>
|
||||
<MainForm />
|
||||
</CarUpdatesProvider>
|
||||
</ManifestsProvider>
|
||||
</VehicleProvider>
|
||||
);
|
||||
|
||||
export default VehicleDeployForm;
|
||||
@@ -1,35 +1,37 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams, Redirect } from "react-router";
|
||||
import { Button, Grid, Typography } from "@material-ui/core";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {Redirect, useParams} from "react-router";
|
||||
import {Button, FormControlLabel, Grid, Switch, Typography} from "@material-ui/core";
|
||||
import clsx from "clsx";
|
||||
|
||||
import {
|
||||
ManifestsProvider,
|
||||
useManifestsContext,
|
||||
} from "../../Contexts/ManifestsContext";
|
||||
import {
|
||||
CarUpdatesProvider,
|
||||
useCarUpdatesContext,
|
||||
} from "../../Contexts/CarUpdatesContext";
|
||||
import { VehicleProvider } from "../../Contexts/VehicleContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import {ManifestsProvider, useManifestsContext,} from "../../Contexts/ManifestsContext";
|
||||
import {CarUpdatesProvider, useCarUpdatesContext,} from "../../Contexts/CarUpdatesContext";
|
||||
import {VehicleProvider} from "../../Contexts/VehicleContext";
|
||||
import {useUserContext} from "../../Contexts/UserContext";
|
||||
import {useStatusContext} from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import SearchField from "../../Controls/SearchField";
|
||||
import CarSelectionTable from "../../Controls/CarSelectionTable";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import {logger} from "../../../services/monitoring";
|
||||
import {LocalDateTimeString} from "../../../utils/dates";
|
||||
import FleetSelectionTable from "../../Controls/FleetSelectionTable";
|
||||
import {FleetProvider} from "../../Contexts/FleetContext";
|
||||
|
||||
|
||||
const CAR_UPDATE = false;
|
||||
const FLEET_UPDATE = true;
|
||||
|
||||
const MainForm = () => {
|
||||
const { manifest_id } = useParams();
|
||||
const { getManifests, manifests, busy } = useManifestsContext();
|
||||
const { deployCarUpdates } = useCarUpdatesContext();
|
||||
const [updateType, setUpdateType] = useState(CAR_UPDATE);
|
||||
|
||||
const {manifest_id} = useParams();
|
||||
const {getManifests, manifests, busy} = useManifestsContext();
|
||||
const {deployCarUpdates, deployFleetUpdates} = useCarUpdatesContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
idToken: {jwtToken: token},
|
||||
},
|
||||
} = useUserContext();
|
||||
const { setMessage, setTitle, setSitePath } = useStatusContext();
|
||||
const {setMessage, setTitle, setSitePath} = useStatusContext();
|
||||
const [manifestName, setManifestName] = useState("");
|
||||
const [version, setVersion] = useState("");
|
||||
const [createDate, setCreateDate] = useState("");
|
||||
@@ -38,6 +40,11 @@ const MainForm = () => {
|
||||
const [redirect, setRedirect] = useState("");
|
||||
const classes = useStyles();
|
||||
|
||||
const handleChange = (_) => {
|
||||
setSelected([]);
|
||||
setUpdateType(updateType === CAR_UPDATE ? FLEET_UPDATE : CAR_UPDATE);
|
||||
}
|
||||
|
||||
const handleSearch = (query) => {
|
||||
setSelected([]);
|
||||
setSearch(query);
|
||||
@@ -54,7 +61,7 @@ const MainForm = () => {
|
||||
newSelected = [...selected];
|
||||
newSelected.push(key);
|
||||
} else {
|
||||
newSelected = selected.filter((vin) => vin !== key);
|
||||
newSelected = selected.filter((vinOrName) => vinOrName !== key);
|
||||
}
|
||||
setSelected(newSelected);
|
||||
} catch (e) {
|
||||
@@ -67,9 +74,14 @@ const MainForm = () => {
|
||||
event.preventDefault();
|
||||
const data = {
|
||||
manifest_id: parseInt(manifest_id),
|
||||
vins: selected,
|
||||
};
|
||||
}
|
||||
if (updateType === CAR_UPDATE) {
|
||||
data.vins = selected;
|
||||
await deployCarUpdates(data, token);
|
||||
} else {
|
||||
data.fleet_names = selected;
|
||||
await deployFleetUpdates(data, token);
|
||||
}
|
||||
setMessage(
|
||||
`Deployed ${manifestName} ${version} to ${selected.length} cars`
|
||||
);
|
||||
@@ -82,7 +94,7 @@ const MainForm = () => {
|
||||
|
||||
const getData = async () => {
|
||||
try {
|
||||
getManifests({ id: parseInt(manifest_id) }, token);
|
||||
getManifests({id: parseInt(manifest_id)}, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
@@ -119,7 +131,7 @@ const MainForm = () => {
|
||||
}, [manifests]);
|
||||
|
||||
if (redirect.length > 0) {
|
||||
return <Redirect to={redirect} />;
|
||||
return <Redirect to={redirect}/>;
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -127,13 +139,21 @@ const MainForm = () => {
|
||||
<form className={classes.form} noValidate action="{onSubmit}">
|
||||
<Typography variant="body2">Created {createDate}.</Typography>
|
||||
<Grid container className={classes.root} spacing={2}>
|
||||
<Grid item md={4}>
|
||||
<Grid item md={2}>
|
||||
<div
|
||||
className={classes.labelInline}
|
||||
>{`${selected.length} Selected`}</div>
|
||||
</Grid>
|
||||
<Grid item md={2} className={classes.textCenterAlign}>
|
||||
<FormControlLabel control={<Switch
|
||||
checked={updateType === CAR_UPDATE}
|
||||
onChange={handleChange}
|
||||
inputProps={{'aria-label': 'controlled'}}
|
||||
/>} label="Car(default) or Fleet"/>
|
||||
|
||||
</Grid>
|
||||
<Grid item md={4} className={classes.textCenterAlign}>
|
||||
<SearchField classes={classes} onSearch={handleSearch} />
|
||||
<SearchField classes={classes} onSearch={handleSearch}/>
|
||||
</Grid>
|
||||
<Grid item md={4} className={classes.textRightAlign}>
|
||||
<Button
|
||||
@@ -148,28 +168,39 @@ const MainForm = () => {
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{updateType === CAR_UPDATE ?
|
||||
<VehicleProvider>
|
||||
<CarSelectionTable
|
||||
classes={classes}
|
||||
token={token}
|
||||
multiSelect={true}
|
||||
search={{ search }}
|
||||
search={{search}}
|
||||
selected={selected}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
/>
|
||||
/></VehicleProvider> :
|
||||
<FleetProvider>
|
||||
<FleetSelectionTable
|
||||
classes={classes}
|
||||
token={token}
|
||||
multiSelect={true}
|
||||
search={{search}}
|
||||
selected={selected}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}/>
|
||||
</FleetProvider>
|
||||
}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ManifestDeployForm = () => (
|
||||
<VehicleProvider>
|
||||
<ManifestsProvider>
|
||||
<CarUpdatesProvider>
|
||||
<MainForm />
|
||||
<MainForm/>
|
||||
</CarUpdatesProvider>
|
||||
</ManifestsProvider>
|
||||
</VehicleProvider>
|
||||
);
|
||||
|
||||
export default ManifestDeployForm;
|
||||
|
||||
@@ -107,7 +107,7 @@ Object {
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
Test Deployment 1.0.100
|
||||
Test Deployment 1.0.100 [standard]
|
||||
</li>
|
||||
<li>
|
||||
Deployment folder test https://releasenotes.com
|
||||
@@ -162,7 +162,7 @@ Object {
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
Test Deployment 1.0.100
|
||||
Test Deployment 1.0.100 [standard]
|
||||
</li>
|
||||
<li>
|
||||
Deployment folder test https://releasenotes.com
|
||||
|
||||
@@ -11,13 +11,18 @@ const getMemoryRegion = (label, region) => {
|
||||
return `, ${label}: [Offset: ${region.offset}, Length: ${region.length}]`;
|
||||
};
|
||||
|
||||
const getFilename = (url) => {
|
||||
const items = url.split("/");
|
||||
return items[items.length - 1];
|
||||
};
|
||||
|
||||
const ECUFileList = (files) => {
|
||||
if (!files || files.length === 0) return "No files";
|
||||
return (
|
||||
<ul>
|
||||
{files.map((file) => (
|
||||
<li key={file.filename}>
|
||||
<a href={file.url}>{file.filename}</a>
|
||||
<li key={file.file_id}>
|
||||
<a href={file.url}>{getFilename(file.url)}</a>
|
||||
{`, File ID: ${file.file_id}, Type: ${file.type}, Download Size: ${
|
||||
file.file_size
|
||||
}, CRC32: ${file.checksum ?? "00000000"}
|
||||
@@ -99,7 +104,9 @@ const ManifestDetails = ({ opened }) => {
|
||||
Hide Details
|
||||
</div>
|
||||
<ul>
|
||||
<li>{`${manifest.name} ${manifest.version}`}</li>
|
||||
<li>{`${manifest.name} ${manifest.version} [${
|
||||
manifest.type || "standard"
|
||||
}]`}</li>
|
||||
<li>{`${manifest.description} ${manifest.release_notes}`}</li>
|
||||
<li>ECUs: {ECUList(manifest.ecu_updates)}</li>
|
||||
</ul>
|
||||
|
||||
@@ -28,7 +28,8 @@ import SearchField from "../../Controls/SearchField";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import ECUList from "../../Controls/ECUList";
|
||||
import { Roles, hasRole } from "../../../utils/roles";
|
||||
import {useLocalStorage} from "../../useLocalStorage";
|
||||
import { useLocalStorage } from "../../useLocalStorage";
|
||||
import { TYPE_MANIFEST_SOFTWARE } from "../../../utils/manifest_types";
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
@@ -57,7 +58,7 @@ const tableColumns = [
|
||||
},
|
||||
];
|
||||
|
||||
const PAGE_SIZE="MANIFEST_LIST_PAGE_SIZE";
|
||||
const PAGE_SIZE = "MANIFEST_LIST_PAGE_SIZE";
|
||||
|
||||
const MainForm = () => {
|
||||
const classes = useStyles();
|
||||
@@ -103,6 +104,7 @@ const MainForm = () => {
|
||||
limit: pageSize,
|
||||
offset: pageSize * pageIndex,
|
||||
order: `${orderBy} ${order}`,
|
||||
manifest_type: TYPE_MANIFEST_SOFTWARE,
|
||||
search,
|
||||
},
|
||||
token
|
||||
|
||||
@@ -28,7 +28,6 @@ const Home = React.lazy(() => import("../Home"));
|
||||
const Manifests = React.lazy(() => import("../Manifest/List"));
|
||||
const ManifestDeploy = React.lazy(() => import("../Manifest/Deploy"));
|
||||
const ManifestStatus = React.lazy(() => import("../Manifest/Status"));
|
||||
const ManifestCreate = React.lazy(() => import("../Manifest/Create"));
|
||||
const PageNotFound = React.lazy(() => import("../404"));
|
||||
const SSOForm = React.lazy(() => import("../SSOForm"));
|
||||
const VehicleAddForm = React.lazy(() => import("../Cars/Add"));
|
||||
@@ -137,14 +136,6 @@ const SiteRoutes = () => {
|
||||
groups={groups}
|
||||
roles={[Roles.READ, Roles.CREATE]}
|
||||
/>
|
||||
<AuthRoute
|
||||
path="/package-create"
|
||||
render={() => <ManifestCreate />}
|
||||
type={TYPES.PROTECTED}
|
||||
token={token}
|
||||
groups={groups}
|
||||
roles={[Roles.CREATE]}
|
||||
/>
|
||||
<AuthRoute
|
||||
path="/package-deploy/:manifest_id"
|
||||
render={() => <ManifestDeploy />}
|
||||
|
||||
@@ -52,10 +52,10 @@ exports[`Supplier page Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Contact
|
||||
@@ -98,10 +98,10 @@ exports[`Supplier page Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Company
|
||||
@@ -144,10 +144,10 @@ exports[`Supplier page Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Address
|
||||
@@ -190,10 +190,10 @@ exports[`Supplier page Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Telephone
|
||||
@@ -236,10 +236,10 @@ exports[`Supplier page Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
Program
|
||||
@@ -282,10 +282,10 @@ exports[`Supplier page Render 1`] = `
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
|
||||
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
|
||||
>
|
||||
<span>
|
||||
ECUs
|
||||
|
||||
@@ -190,6 +190,52 @@ exports[`Suppliers page 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"
|
||||
>
|
||||
Sign In
|
||||
<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"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiTableSortLabel-root"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Keys
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
@@ -239,6 +285,12 @@ exports[`Suppliers page Render 1`] = `
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
/>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
/>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
/>
|
||||
</tr>
|
||||
<tr
|
||||
class="MuiTableRow-root"
|
||||
@@ -284,6 +336,12 @@ exports[`Suppliers page Render 1`] = `
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
/>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
/>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
/>
|
||||
</tr>
|
||||
<tr
|
||||
class="MuiTableRow-root"
|
||||
@@ -329,6 +387,12 @@ exports[`Suppliers page Render 1`] = `
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
/>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
/>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
/>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot
|
||||
|
||||
@@ -16,7 +16,7 @@ import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import TableHeaderSortable from "../../Table/HeaderSortable";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import {useLocalStorage} from "../../useLocalStorage";
|
||||
import { useLocalStorage } from "../../useLocalStorage";
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
@@ -47,9 +47,17 @@ const tableColumns = [
|
||||
id: "activated_at",
|
||||
label: "Activated",
|
||||
},
|
||||
{
|
||||
id: "signin_at",
|
||||
label: "Sign In",
|
||||
},
|
||||
{
|
||||
id: "keys_at",
|
||||
label: "Keys",
|
||||
},
|
||||
];
|
||||
|
||||
const PAGE_SIZE="SUPPLIER_TABLE_PAGE_SIZE";
|
||||
const PAGE_SIZE = "SUPPLIER_TABLE_PAGE_SIZE";
|
||||
|
||||
const SupplierTable = (props) => {
|
||||
const { token, classes } = props;
|
||||
@@ -137,6 +145,12 @@ const SupplierTable = (props) => {
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.activated)}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.signin_at)}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.keys_at)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -5,6 +5,12 @@ const updatesAPI = {
|
||||
return data;
|
||||
},
|
||||
|
||||
createFleetUpdates: async (data, token) => {
|
||||
if (!data.id) data.id = 0;
|
||||
data.id++;
|
||||
return data;
|
||||
},
|
||||
|
||||
getCarUpdates: async (filter, token) => {
|
||||
return { data: [] };
|
||||
},
|
||||
|
||||
@@ -94,11 +94,10 @@ const vehiclesAPI = {
|
||||
data: [2021, 2022],
|
||||
};
|
||||
},
|
||||
sendCommand: async (vin, command, parameters) => {
|
||||
sendCommand: async (vin, command) => {
|
||||
return {
|
||||
vin,
|
||||
command,
|
||||
parameters,
|
||||
};
|
||||
},
|
||||
updateVehicle: async (vin, vehicle) => {
|
||||
|
||||
@@ -18,6 +18,18 @@ const certificatesAPI = {
|
||||
})
|
||||
.then(fetchRespHandler)
|
||||
.catch(errorHandler),
|
||||
|
||||
createAftersales: async (data, token) =>
|
||||
fetch(`${API_ENDPOINT}/create-aftersales`, {
|
||||
method: "POST",
|
||||
headers: Object.assign(
|
||||
{ "Content-Type": "application/json" },
|
||||
getAuthHeaderOptions(token)
|
||||
),
|
||||
body: JSON.stringify(data),
|
||||
})
|
||||
.then(fetchRespHandler)
|
||||
.catch(errorHandler),
|
||||
};
|
||||
|
||||
export default certificatesAPI;
|
||||
|
||||
@@ -1,81 +1,26 @@
|
||||
const Locks = [
|
||||
const Commands = [
|
||||
{value: "doors_lock", label: "Lock doors"},
|
||||
{value: "doors_unlock", label: "Unlock doors"},
|
||||
{value: "vent_windows", label: "Vent windows"},
|
||||
{value: "close_windows", label: "Close windows"},
|
||||
{value: "california_mode", label: "California mode"},
|
||||
{value: "trunk_open", label: "Open trunk"},
|
||||
{value: "trunk_close", label: "Close trunk "},
|
||||
{value: "flash_headlights", label: "Flash headlights"},
|
||||
{value: "alert", label: "Alert"},
|
||||
{value: "temp_cabin", label: "Set cabin temperature"},
|
||||
{
|
||||
value: "right_front",
|
||||
label: "Front right door",
|
||||
},{
|
||||
value: "left_front",
|
||||
label: "Front left door",
|
||||
},{
|
||||
value: "right_rear",
|
||||
label: "Rear right door",
|
||||
},{
|
||||
value: "left_rear",
|
||||
label: "Rear left door",
|
||||
},{
|
||||
value: "trunk",
|
||||
label: "Trunk",
|
||||
value: "temp_cabin",
|
||||
label: "Set cabin temperature for period",
|
||||
params: {
|
||||
data: ""
|
||||
},
|
||||
];
|
||||
|
||||
const Windows = [
|
||||
{
|
||||
value: "right_front",
|
||||
label: "Front right window",
|
||||
},{
|
||||
value: "left_front",
|
||||
label: "Front left window",
|
||||
},{
|
||||
value: "right_rear",
|
||||
label: "Rear right window",
|
||||
},{
|
||||
value: "left_rear",
|
||||
label: "Rear left window",
|
||||
},
|
||||
];
|
||||
|
||||
const Commands = [{
|
||||
value: "lock",
|
||||
label: "Lock door",
|
||||
parameters: Locks,
|
||||
},
|
||||
{
|
||||
value: "unlock",
|
||||
label: "Unlock door",
|
||||
parameters: Locks,
|
||||
},{
|
||||
value: "open",
|
||||
label: "Open window",
|
||||
parameters: Windows,
|
||||
},
|
||||
{
|
||||
value: "close",
|
||||
label: "Close window",
|
||||
parameters: Windows,
|
||||
},
|
||||
{
|
||||
value: "ecu",
|
||||
label: "ECU Versions",
|
||||
},
|
||||
{
|
||||
value: "log",
|
||||
label: "Log level",
|
||||
parameters: [
|
||||
{
|
||||
value: "info",
|
||||
label: "Info",
|
||||
},
|
||||
{
|
||||
value: "debug",
|
||||
label: "Debug",
|
||||
},
|
||||
{
|
||||
value: "trace",
|
||||
label: "Trace",
|
||||
},
|
||||
],
|
||||
},{
|
||||
value: "headlights",
|
||||
label: "Flash headlights",
|
||||
}];
|
||||
{value: "defrost", label: "Defrost"},
|
||||
{value: "driver_seat_preheat", label: "Driver seat preheat"},
|
||||
{value: "passenger_seat_preheat", label: "Preheat passenger seat"},
|
||||
{value: "steering_wheel_preheat", label: "Preheat Steering wheel"},
|
||||
{value: "precondition", label: "Precondition"},
|
||||
{value: "charging", label: "Charging"}]
|
||||
|
||||
export default Commands;
|
||||
|
||||
@@ -7,9 +7,8 @@ import {
|
||||
|
||||
const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
|
||||
|
||||
const updatesAPI = {
|
||||
createCarUpdates: async (data, token) =>
|
||||
fetch(`${API_ENDPOINT}/carupdate`, {
|
||||
const createDeployUpdatesClosure = (suffix) => {
|
||||
return async (data, token) => fetch(`${API_ENDPOINT}/${suffix}`, {
|
||||
method: "POST",
|
||||
headers: Object.assign(
|
||||
{ "Content-Type": "application/json" },
|
||||
@@ -18,7 +17,13 @@ const updatesAPI = {
|
||||
body: JSON.stringify(data),
|
||||
})
|
||||
.then(fetchRespHandler)
|
||||
.catch(errorHandler),
|
||||
.catch(errorHandler)
|
||||
}
|
||||
|
||||
const updatesAPI = {
|
||||
createFleetUpdates: createDeployUpdatesClosure("fleetupdate"),
|
||||
|
||||
createCarUpdates: createDeployUpdatesClosure("carupdate"),
|
||||
|
||||
getCarUpdateLog: async (query, token) => {
|
||||
const u = addQueryParams(`${API_ENDPOINT}/carupdateslog`, query);
|
||||
|
||||
@@ -125,7 +125,7 @@ const vehiclesAPI = {
|
||||
.then(fetchRespHandler)
|
||||
.catch(errorHandler),
|
||||
|
||||
sendCommand: async (vins, command, parameters, token) =>
|
||||
sendCommand: async (vins, command, token) =>
|
||||
fetch(`${API_ENDPOINT}/vehiclecommand`, {
|
||||
method: "POST",
|
||||
headers: Object.assign(
|
||||
@@ -134,8 +134,7 @@ const vehiclesAPI = {
|
||||
),
|
||||
body: JSON.stringify({
|
||||
vins,
|
||||
command,
|
||||
parameters,
|
||||
...command,
|
||||
}),
|
||||
})
|
||||
.then(fetchRespHandler)
|
||||
|
||||
2
src/utils/manifest_types.js
Normal file
2
src/utils/manifest_types.js
Normal file
@@ -0,0 +1,2 @@
|
||||
export const TYPE_MANIFEST_SOFTWARE = 1;
|
||||
export const TYPE_MANIFEST_CONFIG = 2;
|
||||
@@ -1,25 +1,13 @@
|
||||
const rxMakeStyles = /makeStyles-(\w+)-(\d+)/gi;
|
||||
const rxMUIStyles = /mui-\d*/g;
|
||||
const rxStyles = /(mui|MuiBox-root|makeStyles|Private)([^\s]*)-\d+/g;
|
||||
|
||||
const snapshotSerializers = [
|
||||
{
|
||||
test: (val) => {
|
||||
return val && typeof val === "string" && val.indexOf("mui-") > -1;
|
||||
return val && typeof val === "string" && val.search(rxStyles) > -1;
|
||||
},
|
||||
print: (val) => {
|
||||
let str = val;
|
||||
str = str.replace(rxMUIStyles, "mui-0");
|
||||
|
||||
return `"${str}"`;
|
||||
},
|
||||
},
|
||||
{
|
||||
test: (val) => {
|
||||
return val && typeof val === "string" && val.search(rxMakeStyles) > -1;
|
||||
},
|
||||
print: (val) => {
|
||||
let str = val;
|
||||
str = str.replace(rxMakeStyles, "makeStyles-$1-0");
|
||||
str = str.replace(rxStyles, "$1$2-0");
|
||||
|
||||
return `"${str}"`;
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user