From 9636d358d8795b2eb442999ded745ce80acfbae4 Mon Sep 17 00:00:00 2001 From: FrankRua Date: Thu, 24 Feb 2022 12:33:20 -0500 Subject: [PATCH] Map API data to vehicle-parts ds --- ...eTint.svg => Glass-BlueShade-BlueTint.svg} | 0 ...Tint.svg => Glass-BlueShade-BrownTint.svg} | 0 ...yTint.svg => Glass-BlueShade-GrayTint.svg} | 0 ...Tint.svg => Glass-BlueShade-GreenTint.svg} | 0 ...-NoTint.svg => Glass-BlueShade-NoTint.svg} | 0 ...int.svg => Glass-BrownShade-BrownTint.svg} | 0 ...eTint.svg => Glass-GrayShade-BlueTint.svg} | 0 ...Tint.svg => Glass-GrayShade-BrownTint.svg} | 0 ...yTint.svg => Glass-GrayShade-GrayTint.svg} | 0 ...Tint.svg => Glass-GrayShade-GreenTint.svg} | 0 ...Tint.svg => Glass-GreenShade-BlueTint.svg} | 0 ...int.svg => Glass-GreenShade-BrownTint.svg} | 0 ...int.svg => Glass-GreenShade-GreenTint.svg} | 0 ...lueTint.svg => Glass-NoShade-BlueTint.svg} | 0 ...wnTint.svg => Glass-NoShade-BrownTint.svg} | 0 ...nt.svg => Glass-NoShade-DarkBrownTint.svg} | 0 ...int.svg => Glass-NoShade-DaryGrayTint.svg} | 0 ...rayTint.svg => Glass-NoShade-GrayTint.svg} | 0 ...enTint.svg => Glass-NoShade-GreenTint.svg} | 0 ...de-NoTint.svg => Glass-NoShade-NoTint.svg} | 0 ...-Privacy.svg => Glass-NoShade-Privacy.svg} | 0 src/constants/tint-mapper.js | 49 ++++--- src/layouts/vehicle-parts/vehicle-parts.vue | 128 ++++++++---------- 23 files changed, 87 insertions(+), 90 deletions(-) rename src/assets/img/tints/{BackGlass-BlueShade-BlueTint.svg => Glass-BlueShade-BlueTint.svg} (100%) rename src/assets/img/tints/{BackGlass-BlueShade-BrownTint.svg => Glass-BlueShade-BrownTint.svg} (100%) rename src/assets/img/tints/{BackGlass-BlueShade-GrayTint.svg => Glass-BlueShade-GrayTint.svg} (100%) rename src/assets/img/tints/{BackGlass-BlueShade-GreenTint.svg => Glass-BlueShade-GreenTint.svg} (100%) rename src/assets/img/tints/{BackGlass-BlueShade-NoTint.svg => Glass-BlueShade-NoTint.svg} (100%) rename src/assets/img/tints/{BackGlass-BrownShade-BrownTint.svg => Glass-BrownShade-BrownTint.svg} (100%) rename src/assets/img/tints/{BackGlass-GrayShade-BlueTint.svg => Glass-GrayShade-BlueTint.svg} (100%) rename src/assets/img/tints/{BackGlass-GrayShade-BrownTint.svg => Glass-GrayShade-BrownTint.svg} (100%) rename src/assets/img/tints/{BackGlass-GrayShade-GrayTint.svg => Glass-GrayShade-GrayTint.svg} (100%) rename src/assets/img/tints/{BackGlass-GrayShade-GreenTint.svg => Glass-GrayShade-GreenTint.svg} (100%) rename src/assets/img/tints/{BackGlass-GreenShade-BlueTint.svg => Glass-GreenShade-BlueTint.svg} (100%) rename src/assets/img/tints/{BackGlass-GreenShade-BrownTint.svg => Glass-GreenShade-BrownTint.svg} (100%) rename src/assets/img/tints/{BackGlass-GreenShade-GreenTint.svg => Glass-GreenShade-GreenTint.svg} (100%) rename src/assets/img/tints/{BackGlass-NoShade-BlueTint.svg => Glass-NoShade-BlueTint.svg} (100%) rename src/assets/img/tints/{BackGlass-NoShade-BrownTint.svg => Glass-NoShade-BrownTint.svg} (100%) rename src/assets/img/tints/{BackGlass-NoShade-DarkBrownTint.svg => Glass-NoShade-DarkBrownTint.svg} (100%) rename src/assets/img/tints/{BackGlass-NoShade-DaryGrayTint.svg => Glass-NoShade-DaryGrayTint.svg} (100%) rename src/assets/img/tints/{BackGlass-NoShade-GrayTint.svg => Glass-NoShade-GrayTint.svg} (100%) rename src/assets/img/tints/{BackGlass-NoShade-GreenTint.svg => Glass-NoShade-GreenTint.svg} (100%) rename src/assets/img/tints/{BackGlass-NoShade-NoTint.svg => Glass-NoShade-NoTint.svg} (100%) rename src/assets/img/tints/{BackGlass-NoShade-Privacy.svg => Glass-NoShade-Privacy.svg} (100%) diff --git a/src/assets/img/tints/BackGlass-BlueShade-BlueTint.svg b/src/assets/img/tints/Glass-BlueShade-BlueTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-BlueShade-BlueTint.svg rename to src/assets/img/tints/Glass-BlueShade-BlueTint.svg diff --git a/src/assets/img/tints/BackGlass-BlueShade-BrownTint.svg b/src/assets/img/tints/Glass-BlueShade-BrownTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-BlueShade-BrownTint.svg rename to src/assets/img/tints/Glass-BlueShade-BrownTint.svg diff --git a/src/assets/img/tints/BackGlass-BlueShade-GrayTint.svg b/src/assets/img/tints/Glass-BlueShade-GrayTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-BlueShade-GrayTint.svg rename to src/assets/img/tints/Glass-BlueShade-GrayTint.svg diff --git a/src/assets/img/tints/BackGlass-BlueShade-GreenTint.svg b/src/assets/img/tints/Glass-BlueShade-GreenTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-BlueShade-GreenTint.svg rename to src/assets/img/tints/Glass-BlueShade-GreenTint.svg diff --git a/src/assets/img/tints/BackGlass-BlueShade-NoTint.svg b/src/assets/img/tints/Glass-BlueShade-NoTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-BlueShade-NoTint.svg rename to src/assets/img/tints/Glass-BlueShade-NoTint.svg diff --git a/src/assets/img/tints/BackGlass-BrownShade-BrownTint.svg b/src/assets/img/tints/Glass-BrownShade-BrownTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-BrownShade-BrownTint.svg rename to src/assets/img/tints/Glass-BrownShade-BrownTint.svg diff --git a/src/assets/img/tints/BackGlass-GrayShade-BlueTint.svg b/src/assets/img/tints/Glass-GrayShade-BlueTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-GrayShade-BlueTint.svg rename to src/assets/img/tints/Glass-GrayShade-BlueTint.svg diff --git a/src/assets/img/tints/BackGlass-GrayShade-BrownTint.svg b/src/assets/img/tints/Glass-GrayShade-BrownTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-GrayShade-BrownTint.svg rename to src/assets/img/tints/Glass-GrayShade-BrownTint.svg diff --git a/src/assets/img/tints/BackGlass-GrayShade-GrayTint.svg b/src/assets/img/tints/Glass-GrayShade-GrayTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-GrayShade-GrayTint.svg rename to src/assets/img/tints/Glass-GrayShade-GrayTint.svg diff --git a/src/assets/img/tints/BackGlass-GrayShade-GreenTint.svg b/src/assets/img/tints/Glass-GrayShade-GreenTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-GrayShade-GreenTint.svg rename to src/assets/img/tints/Glass-GrayShade-GreenTint.svg diff --git a/src/assets/img/tints/BackGlass-GreenShade-BlueTint.svg b/src/assets/img/tints/Glass-GreenShade-BlueTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-GreenShade-BlueTint.svg rename to src/assets/img/tints/Glass-GreenShade-BlueTint.svg diff --git a/src/assets/img/tints/BackGlass-GreenShade-BrownTint.svg b/src/assets/img/tints/Glass-GreenShade-BrownTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-GreenShade-BrownTint.svg rename to src/assets/img/tints/Glass-GreenShade-BrownTint.svg diff --git a/src/assets/img/tints/BackGlass-GreenShade-GreenTint.svg b/src/assets/img/tints/Glass-GreenShade-GreenTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-GreenShade-GreenTint.svg rename to src/assets/img/tints/Glass-GreenShade-GreenTint.svg diff --git a/src/assets/img/tints/BackGlass-NoShade-BlueTint.svg b/src/assets/img/tints/Glass-NoShade-BlueTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-NoShade-BlueTint.svg rename to src/assets/img/tints/Glass-NoShade-BlueTint.svg diff --git a/src/assets/img/tints/BackGlass-NoShade-BrownTint.svg b/src/assets/img/tints/Glass-NoShade-BrownTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-NoShade-BrownTint.svg rename to src/assets/img/tints/Glass-NoShade-BrownTint.svg diff --git a/src/assets/img/tints/BackGlass-NoShade-DarkBrownTint.svg b/src/assets/img/tints/Glass-NoShade-DarkBrownTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-NoShade-DarkBrownTint.svg rename to src/assets/img/tints/Glass-NoShade-DarkBrownTint.svg diff --git a/src/assets/img/tints/BackGlass-NoShade-DaryGrayTint.svg b/src/assets/img/tints/Glass-NoShade-DaryGrayTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-NoShade-DaryGrayTint.svg rename to src/assets/img/tints/Glass-NoShade-DaryGrayTint.svg diff --git a/src/assets/img/tints/BackGlass-NoShade-GrayTint.svg b/src/assets/img/tints/Glass-NoShade-GrayTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-NoShade-GrayTint.svg rename to src/assets/img/tints/Glass-NoShade-GrayTint.svg diff --git a/src/assets/img/tints/BackGlass-NoShade-GreenTint.svg b/src/assets/img/tints/Glass-NoShade-GreenTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-NoShade-GreenTint.svg rename to src/assets/img/tints/Glass-NoShade-GreenTint.svg diff --git a/src/assets/img/tints/BackGlass-NoShade-NoTint.svg b/src/assets/img/tints/Glass-NoShade-NoTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-NoShade-NoTint.svg rename to src/assets/img/tints/Glass-NoShade-NoTint.svg diff --git a/src/assets/img/tints/BackGlass-NoShade-Privacy.svg b/src/assets/img/tints/Glass-NoShade-Privacy.svg similarity index 100% rename from src/assets/img/tints/BackGlass-NoShade-Privacy.svg rename to src/assets/img/tints/Glass-NoShade-Privacy.svg diff --git a/src/constants/tint-mapper.js b/src/constants/tint-mapper.js index 1291991f0..0b4d17df9 100644 --- a/src/constants/tint-mapper.js +++ b/src/constants/tint-mapper.js @@ -3,39 +3,39 @@ // Src assumes you have a @/assets/img/tints/, making the final value @/assets/img/tints/{Src} in the markup. // See vehicle-parts for implementation example. const tintMap = { - rear: [ + other: [ // Blue Shade - { name: "blue shade, blue tint", src: "BackGlass-BlueShade-BlueTint.svg" }, - { name: "blue shade, brown tint", src: "BackGlass-BlueShade-BrownTint.svg" }, - { name: "blue shade, gray tint", src: "BackGlass-BlueShade-GrayTint.svg" }, - { name: "blue shade, green tint", src: "BackGlass-BlueShade-GreenTint.svg" }, - { name: "blue shade", src: "BackGlass-BlueShade-NoTint.svg" }, + { name: "blue shade, blue tint", src: "Glass-BlueShade-BlueTint.svg" }, + { name: "blue shade, brown tint", src: "Glass-BlueShade-BrownTint.svg" }, + { name: "blue shade, gray tint", src: "Glass-BlueShade-GrayTint.svg" }, + { name: "blue shade, green tint", src: "Glass-BlueShade-GreenTint.svg" }, + { name: "blue shade", src: "Glass-BlueShade-NoTint.svg" }, // Brown Shade - { name: "brown shade, brown tint", src: "BackGlass-BrownShade-BrownTint.svg" }, + { name: "brown shade, brown tint", src: "Glass-BrownShade-BrownTint.svg" }, // Gray Shade - { name: "gray shade, blue tint", src: "BackGlass-GrayShade-BlueTint.svg" }, - { name: "gray shade, brown tint", src: "BackGlass-GrayShade-BrownTint.svg" }, - { name: "gray shade, gray tint", src: "BackGlass-GrayShade-GrayTint.svg" }, - { name: "gray shade, green tint", src: "BackGlass-GrayShade-GreenTint.svg" }, + { name: "gray shade, blue tint", src: "Glass-GrayShade-BlueTint.svg" }, + { name: "gray shade, brown tint", src: "Glass-GrayShade-BrownTint.svg" }, + { name: "gray shade, gray tint", src: "Glass-GrayShade-GrayTint.svg" }, + { name: "gray shade, green tint", src: "Glass-GrayShade-GreenTint.svg" }, // Green Shade - { name: "green shade, blue tint", src: "BackGlass-GreenShade-BlueTint.svg" }, - { name: "green shade, brown tint", src: "BackGlass-GreenShade-BrownTint.svg" }, - { name: "green shade, green tint", src: "BackGlass-GreenShade-GreenTint.svg" }, + { name: "green shade, blue tint", src: "Glass-GreenShade-BlueTint.svg" }, + { name: "green shade, brown tint", src: "Glass-GreenShade-BrownTint.svg" }, + { name: "green shade, green tint", src: "Glass-GreenShade-GreenTint.svg" }, // Tints Only - { name: "blue tint", src: "BackGlass-NoShade-BlueTint.svg" }, - { name: "brown tint", src: "BackGlass-NoShade-BrownTint.svg" }, - { name: "dark brown tint", src: "BackGlass-NoShade-DarkBrownTint.svg" }, - { name: "dark gray tint", src: "BackGlass-NoShade-DarkGrayTint.svg" }, - { name: "gray tint", src: "BackGlass-NoShade-GrayTint.svg" }, - { name: "green tint", src: "BackGlass-NoShade-GreenTint.svg" }, - { name: "gray tint privacy", src: "BackGlass-NoShade-Privacy.svg" }, + { name: "blue tint", src: "Glass-NoShade-BlueTint.svg" }, + { name: "brown tint", src: "Glass-NoShade-BrownTint.svg" }, + { name: "dark brown tint", src: "Glass-NoShade-DarkBrownTint.svg" }, + { name: "dark gray tint", src: "Glass-NoShade-DarkGrayTint.svg" }, + { name: "gray tint", src: "Glass-NoShade-GrayTint.svg" }, + { name: "green tint", src: "Glass-NoShade-GreenTint.svg" }, + { name: "gray tint privacy", src: "Glass-NoShade-Privacy.svg" }, // No shade or tint - { name: "no shade, no tint", src: "BackGlass-NoShade-NoTint.svg" }, // ??? + { name: "no shade, no tint", src: "Glass-NoShade-NoTint.svg" }, // ??? ], windshield: [ @@ -80,6 +80,11 @@ const tintMap = { // Returns undefined if no items are found. export function getTintImage(glassLocation, colorString) { + // Windshield glass has special images, all other glass uses the same though. + if(glassLocation.toLowerCase() !== 'windshield'){ + glassLocation = 'other'; + } + if (tintMap[glassLocation.toLowerCase()] === undefined) { return ''; } diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue index 06fa46341..72bf62d9c 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.vue +++ b/src/layouts/vehicle-parts/vehicle-parts.vue @@ -36,7 +36,6 @@ import { settleAllPromises } from "@/helpers/layout-helper"; - export default { name: "vehicle-parts", async beforeRouteEnter(to, from, next) { @@ -102,80 +101,73 @@ export default { }, computed: { Parts() { - return [{ - glassLocation: "Rear", - glassName: "Stationary", - colorAnswers: [{ - ColorAnswerText: "Green Tint", + const partsData = { + "partsOrQuestions": [{ + "glassName": "Front", + "glassLocation": "Driver", + "parts": [{ + "partNumber": "FD27736GTYN", + "description": "solar, driver side, front", + "color": "Green Tint", + "requiresRecalibration": false, + "requiresCapabilityQuestions": false, + "childParts": null + }, + { + "partNumber": "FD27738GTYN", + "description": "solar, driver side, front, laminated, soundproofing", + "color": "Green Tint", + "requiresRecalibration": false, + "requiresCapabilityQuestions": false, + "childParts": null + } + ], + "partQuestions": null + }, + { + "glassName": "Back", + "glassLocation": "Passenger", + "parts": [{ + "partNumber": "FD27739YPYN", + "description": "solar, passenger side, rear", + "color": "Gray Tint Privacy", + "requiresRecalibration": false, + "requiresCapabilityQuestions": false, + "childParts": null + }], + "partQuestions": null + } + ] + } + + // Map API result data, to vehicle-parts data structure + const mappedData = partsData.partsOrQuestions.map(g => { + return { + glassName: g.glassName, + glassLocation: g.glassLocation, + colorAnswers: g.parts.reduce((arr, p) => { + + arr.push({ + ColorAnswerText: p.color, FeatureAnswers: [{ - FeatureAnswerText: "Backglass - heated glass, solar, 1 hole", - PartNumber: "test-backglass-green-tint-1-hole", - }, ], - }, - { - ColorAnswerText: "Green Tint", - FeatureAnswers: [{ - FeatureAnswerText: "Backglass - heated glass, solar, 2 hole", - PartNumber: "test-backglass-green-tint-2-hole", - }, ], - }, - { - ColorAnswerText: "Gray Tint Privacy", - FeatureAnswers: [{ - FeatureAnswerText: "Backglass - heated glass, solar, 3 hole", - PartNumber: "test-backglass-gray-tint-privacy-3-hole", - }, ], - }, - { - ColorAnswerText: "Gray Tint Privacy", - FeatureAnswers: [{ - FeatureAnswerText: "Backglass - heated glass, solar, 4 hole", - PartNumber: "test-backglass-blue-tint-4-hole", - }, ], - }, - ], - }, - { - glassLocation: "Windshield", - glassName: "Single", - colorAnswers: [{ - ColorAnswerText: "Blue Tint", - FeatureAnswers: [{ - FeatureAnswerText: "Windshield - heated glass, solar, 1 hole", - PartNumber: "test-windshield-blue-tint-1-hole", - }, ], - }, - { - ColorAnswerText: "Blue Tint", - FeatureAnswers: [{ - FeatureAnswerText: "Windshield -heated glass, solar, 2 hole", - PartNumber: "test-blue-tint-windshield-2-hole", - }, ], - }, - { - ColorAnswerText: "Gray Tint Privacy", - FeatureAnswers: [{ - FeatureAnswerText: "Windshield -heated glass, solar, 3 hole", - PartNumber: "test-gray-tint-privacy-windshield-3-hole", - }, ], - }, - { - ColorAnswerText: "Gray Tint Privacy", - FeatureAnswers: [{ - FeatureAnswerText: "Windshield -heated glass, solar, 4 hole", - PartNumber: "test-brown-tint-windshield-4-hole", - }, ], - }, - ], - }, - ]; + FeatureAnswerText: p.description, + PartNumber: p.partNumber + }] + }); + + return arr; + }, []) + } + }); + + return mappedData; }, }, methods: { arePagePrerequisitesValid(parameters) { // store.getters.damage.isRepair !== null; // parameters.PartsByGlassName.length > 0; - + return true; } },