PdxCodeGuild · chapman311 · May 20, 2022 · May 23, 2022 · May 24, 2022 · May 25, 2022
diff --git a/code/mitch/javascript/lab_07/index.html b/code/mitch/javascript/lab_07/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Vehicle Info</title>
+    <link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/>
+	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+	<script src="https://unpkg.com/vue@3"></script>
+	<link type="text/css" rel="stylesheet" href="https://unpkg.com/vue-next-select/dist/index.min.css" />
+    <script src="https://unpkg.com/vue-next-select/dist/vue-next-select.iife.prod.js"></script>
+    <script src="secrets.js"></script>
+	<script src="script.js" defer></script>
+</head>
+<header>
+    <img src="vim_logo.jpeg" alt="Vehicle Info Machine Logo" class="">
+</header>
+<body class="pa3 mw7 helvetica flex flex-column items-center" style="background-color: #f79a26">
+	<div class="" id="app">
+        <p class="b">Search by Vehicle Identification Number (VIN):</p>
+		<form class="pb2" @submit.prevent="searchByVIN">
+			<label class="pr2" for="search-VIN">VIN:</label>
+			<input class="" v-model="userVIN" type="text" id="search-VIN">
+			<input class="f6 pointer dim ph3 pv1 mb2 dib white bg-black" type="submit" value="Search VIN">
+		</form>
+
+        <p class="i b f3">OR</p>
+
+        <p class="b">Search by Year, Make, and Model:</p>
+
+
+
+
+        <form v-if="!userYear" class="pb2">
+			<label class="pr2" for="search-year">Year:</label>
+            <vue-select
+                :searchable="true"
+                :close-on-select="true"
+                :clear-on-close="true"
+                v-model="userYear"
+                :options = "[ ...Array(50).keys() ].map(x => 2023 - x)">
+            </vue-select>
+		</form>
+
+        <span v-if="userYear" class="db">Year: {{ userYear }}</span>
+        <button v-if="userYear" class="f6 pointer dim ph2 pv0 mb2 white bg-blue" v-on:click="undo('year')">Undo Year</button>
+
+        <form v-if="userYear && !userMake" class="pv2">
+			<label class="pr2" for="search-make">Make:</label>
+            <vue-select
+                :searchable="true"
+                :close-on-select="true"
+                :clear-on-close="true"
+                v-model="userMake"
+                @click="searchByMakeAndYear"
+                @change="searchByMakeAndYear"
+                :options = "makeList.map(makeObject => makeObject.Make_Name)">
+            </vue-select>
+		</form>
+
+        <span v-if="userMake" class="db">Make: {{ userMake }}</span>
+        <button v-if="userMake" class="f6 pointer dim ph2 pv0 mb2 white bg-blue" v-on:click="undo('make')">Undo Make</button>
+
+        <form v-if="userMake && !userModel" class="pv2">
+			<label class="pr2" for="search-model">Model:</label>
+            <vue-select
+                :searchable="true"
+                :close-on-select="true"
+                :clear-on-close="true"
+                v-model="userModel"
+                :options = "modelList.map(modelObject => modelObject.Model_Name)">
+            </vue-select>
+		</form>
+
+        <span  v-if="userModel" class="db">Model: {{ userModel }}</span>
+        <button v-if="userModel" class="f6 pointer dim ph2 pv0 mb2 dib white bg-blue" v-on:click="undo('model')">Undo Model</button>
+
+
+		<ul class="bg-light-red br3 pv1" v-if="output && output.ErrorText[0] !== '0'">
+            <h3 class="">The following error(s) occured:</h3>
+            <li class="pb2" v-for="error in output.ErrorText.split(';')">{{ error }}</li>
+        </ul>
+		<ul v-if="userModel" class="list measure" v-else>
+
+            <li v-if="output.VIN">VIN: {{ userVIN }}</li>
+            <li v-if="output.ModelYear">Year: {{ output.ModelYear }}</li>
+            <li v-if="output.Make">Make: {{ output.Make }}</li>
+            <li v-if="output.Model">Model: {{ output.Model }}</li>
+            <li v-if="output.Trim">Trim: {{ output.Trim }}</li>
+            <li v-if="output.Doors">Doors: {{ output.Doors }}</li>
+            <li v-if="output.BodyClass">Body Type: {{ output.BodyClass }}</li>
+            <li v-if="output.GVWR">GVWR: {{ output.GVWR }}</li>
+            <li v-if="output.TransmissionSpeeds">Transmission Speeds: {{ output.TransmissionSpeeds }}</li>
+            <li v-if="output.TransmissionStyle">Transmission Type: {{ output.TransmissionStyle }}</li>
+            <li v-if="output.FuelTypePrimary">Fuel Type: {{ output.FuelTypePrimary }}</li>
+            <li v-if="output.EngineModel">Engine Model: {{ output.EngineModel }}</li>
+            <li v-if="output.EngineHP">Engine HP: {{ output.EngineHP }} hp</li>
+            <li v-if="output.DisplacementL">Displacement: {{ output.DisplacementL }} L</li>
+            <li v-if="output.EngineConfiguration">Engine Configuration: {{ output.EngineConfiguration }}</li>
+            <li v-if="output.EngineCylinders">Engine Cylinders: {{ output.EngineCylinders }}</li>
+            <li v-if="output.ValveTrainDesign">Valvetrain Design: {{ output.ValveTrainDesign }}</li>
+            <li v-if="output.PlantCity">Plant City: {{ output.PlantCity }}</li>
+            <li v-if="output.PlantState">Plant State: {{ output.PlantState }}</li>
+            <li v-if="output.PlantCountry">Plant Country: {{ output.PlantCountry }}</li>
+
+		</ul>
+	</div>
+</body>
+</html>
diff --git a/code/mitch/javascript/lab_07/script.js b/code/mitch/javascript/lab_07/script.js
@@ -0,0 +1,93 @@
+
+
+
+const App = {
+    data () {
+        return {
+            output: '',
+			userVIN: '',
+            userYear: '',
+            userMake: '',
+            userModel: '',
+            makeList: [],
+            modelList: [],
+			baseUrl: 'https://vpic.nhtsa.dot.gov/api/vehicles/',
+		}
+	},
+
+    created() {
+        this.getAllMakes()
+    },
+
+	methods: {
+        searchByVIN () {
+            axios({
+                url: this.baseUrl + "DecodeVinValues/" + this.userVIN,
+				method: 'get',
+                headers: {
+                    Accept: 'application/json'
+                },
+				params: { 
+                    format: 'json',
+                },
+			}).then(response => {
+                console.log(response)
+				this.output = response.data.Results[0]
+                this.userYear = this.output.ModelYear
+                this.userMake = this.output.Make
+                this.userModel = this.output.Model
+			})
+		},
+        getAllMakes () {
+            axios({
+                url: this.baseUrl + "GetAllMakes/",
+				method: 'get',
+                headers: {
+                    Accept: 'application/json'
+                },
+				params: { 
+                    format: 'json',
+                },
+			}).then(response => {
+                console.log(response)
+				this.makeList = response.data.Results
+			})
+		},
+        searchByMakeAndYear () {
+            if (this.userMake === "") return
+            axios({
+                url: this.baseUrl + "GetModelsForMakeYear/make/" + this.userMake + "/modelyear/" + this.userYear,
+				method: 'get',
+                headers: {
+                    Accept: 'application/json'
+                },
+				params: { 
+                    format: 'json',
+                },
+			}).then(response => {
+                console.log(response)
+				this.modelList = response.data.Results
+			})
+		},
+        undo (userObject) {
+            if (userObject == "year") {
+                this.userYear = ""
+                this.userMake = ""
+                this.userModel =""
+                this.modelList = []
+            }else if (userObject == "make") {
+                this.userMake = ""
+                this.userModel =""
+                this.modelList = []
+            }else if (userObject == "model") {
+                this.userModel = ""
+            }
+        },
+	}
+}
+
+const app = Vue.createApp(App)
+
+
+app.component('vue-select', VueNextSelect)
+app.mount('#app')
diff --git a/code/mitch/javascript/lab_07/vim_logo.jpeg b/code/mitch/javascript/lab_07/vim_logo.jpeg