Map API data to vehicle-parts ds

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, blue tint", src: "Glass-BlueShade-BlueTint.svg" },
-        { name: "blue shade, brown tint", src: "BackGlass-BlueShade-BrownTint.svg" },
+        { name: "blue shade, brown tint", src: "Glass-BlueShade-BrownTint.svg" },
-        { name: "blue shade, gray tint", src: "BackGlass-BlueShade-GrayTint.svg" },
+        { name: "blue shade, gray tint", src: "Glass-BlueShade-GrayTint.svg" },
-        { name: "blue shade, green tint", src: "BackGlass-BlueShade-GreenTint.svg" },
+        { name: "blue shade, green tint", src: "Glass-BlueShade-GreenTint.svg" },
-        { name: "blue shade", src: "BackGlass-BlueShade-NoTint.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, blue tint", src: "Glass-GrayShade-BlueTint.svg" },
-        { name: "gray shade, brown tint", src: "BackGlass-GrayShade-BrownTint.svg" },
+        { name: "gray shade, brown tint", src: "Glass-GrayShade-BrownTint.svg" },
-        { name: "gray shade, gray tint", src: "BackGlass-GrayShade-GrayTint.svg" },
+        { name: "gray shade, gray tint", src: "Glass-GrayShade-GrayTint.svg" },
-        { name: "gray shade, green tint", src: "BackGlass-GrayShade-GreenTint.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, blue tint", src: "Glass-GreenShade-BlueTint.svg" },
-        { name: "green shade, brown tint", src: "BackGlass-GreenShade-BrownTint.svg" },
+        { name: "green shade, brown tint", src: "Glass-GreenShade-BrownTint.svg" },
-        { name: "green shade, green tint", src: "BackGlass-GreenShade-GreenTint.svg" },
+        { name: "green shade, green tint", src: "Glass-GreenShade-GreenTint.svg" },
 
         // Tints Only
-        { name: "blue tint", src: "BackGlass-NoShade-BlueTint.svg" },
+        { name: "blue tint", src: "Glass-NoShade-BlueTint.svg" },
-        { name: "brown tint", src: "BackGlass-NoShade-BrownTint.svg" },
+        { name: "brown tint", src: "Glass-NoShade-BrownTint.svg" },
-        { name: "dark brown tint", src: "BackGlass-NoShade-DarkBrownTint.svg" },
+        { name: "dark brown tint", src: "Glass-NoShade-DarkBrownTint.svg" },
-        { name: "dark gray tint", src: "BackGlass-NoShade-DarkGrayTint.svg" },
+        { name: "dark gray tint", src: "Glass-NoShade-DarkGrayTint.svg" },
-        { name: "gray tint", src: "BackGlass-NoShade-GrayTint.svg" },
+        { name: "gray tint", src: "Glass-NoShade-GrayTint.svg" },
-        { name: "green tint", src: "BackGlass-NoShade-GreenTint.svg" },
+        { name: "green tint", src: "Glass-NoShade-GreenTint.svg" },
-        { name: "gray tint privacy", src: "BackGlass-NoShade-Privacy.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 '';
     }

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,73 +101,66 @@ export default {
     },
     computed: {
         Parts() {
-            return [{
+            const partsData = {
-                    glassLocation: "Rear",
+                "partsOrQuestions": [{
-                    glassName: "Stationary",
+                        "glassName": "Front",
-                    colorAnswers: [{
+                        "glassLocation": "Driver",
-                            ColorAnswerText: "Green Tint",
+                        "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",
+                                FeatureAnswerText: p.description,
-                                PartNumber: "test-backglass-green-tint-1-hole",
+                                PartNumber: p.partNumber
-                            }, ],
+                            }]
-                        },
+                        });
-                        {
+
-                            ColorAnswerText: "Green Tint",
+                        return arr;
-                            FeatureAnswers: [{
+                    }, [])
-                                FeatureAnswerText: "Backglass - heated glass, solar, 2 hole",
+                }
-                                PartNumber: "test-backglass-green-tint-2-hole",
+            });
-                            }, ],
+
-                        },
+            return mappedData;
-                        {
-                            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",
-                            }, ],
-                        },
-                    ],
-                },
-            ];
         },
     },
     methods: {