DigitalConsumer.FixMyGlass/src/layouts/SelectCar.vue

<template>
<router-link to="/Home">Home</router-link>
    <div class="select-car sticky-lg-top py-4">
        <div class="select-car-form overflow-hidden p-3 rounded">
            <div class="car_info text-center">
                <div class="car-image mb-3">
                    <img class="vehicle-image blur img-fluid" src="https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg" />
                </div>
                <div class="current_car_info mb-4">
                    <transition name="slide-fade">
                        <div class="current_car_info-text" v-if="translate === 0">
                            <p class="text-center text-secondary fs-5">Select a year to get started</p>
                        </div>
                    </transition>
                    <transition name="slide-fade">
                        <div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -100">
                            <p class="text-center text-secondary fs-5">{{ this.year }}</p>
                        </div>
                    </transition>
                    <transition name="slide-fade">
                        <div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -200">
                            <p class="text-center text-secondary fs-5">{{ this.year }} {{ this.make }}</p>
                        </div>
                    </transition>
                    <transition name="slide-fade">
                        <div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -300">
                            <p class="text-center text-secondary fs-5">{{ this.year }} {{ this.make }} {{ this.model }}</p>
                        </div>
                    </transition>
                </div>
                <div class="needed_car_info d-flex overflow-hidden">
                    <p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What year is your vehicle?</p>
                    <p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What make is your vehicle?</p>
                    <p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What is the model of your {{ this.make }}?</p>
                    <p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What style is your {{ this.model }}?</p>
                </div>
            </div>
            <form class="list-view d-flex ">
                <div class="car_list car_years" v-bind:style="{transform: carViewTranslate}">
                    <div v-for="year in years" :key="year" class="mb-2">
                        <Button
                            :buttonText="year"
                            v-on:click="selectAttribute(year, 'year')"
                            buttonType="btn-funnel"
                         />
                    </div>
                </div>
                <div class="car_list car_brands" v-bind:style="{transform: carViewTranslate}">
                    <div v-for="make in makes" :key="make" class="mb-2">
                        <Button
                            :buttonText="make"
                            v-on:click="selectAttribute(make, 'make')"
                            buttonType="btn-funnel"
                         />
                    </div>
                </div>
                <div class="car_list car_models" v-bind:style="{transform: carViewTranslate}">
                    <div v-for="model in models" :key="model" class="mb-2">
                        <Button
                            :buttonText="model"
                            v-on:click="selectAttribute(model, 'model')"
                            buttonType="btn-funnel"
                         />
                    </div>
                </div>
                <div class="car_list car_styles" v-bind:style="{transform: carViewTranslate}">
                    <div v-for="style in styles" :key="style" class="mb-2">
                        <Button
                            :buttonText="style"
                            buttonType="btn-funnel"
                         />
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import Button from '@/components/buttons/buttonFunnel.vue';

export default {
  name: 'SelectCar',
  data() {
      return {
          years: [],
          makes: [],
          models: [],
          styles: [],
          translate: 0,
          carViewTranslate: 'translateX(0%)',
          year: '',
          make: '',
          model: ''
      }
  },
  mounted() {
      axios.get("https://mockey.qa.sagaws.net/service/years").then((response) => {
          this.years = response.data.Result;
          console.log(this.years);
      });
  },
  methods: {
      translateView(forward=true) {
          this.translate = forward ? this.translate - 100 : this.translate + 100;
          this.carViewTranslate = `translateX(${this.translate}%)`;
      },
      selectAttribute(attribute, attributeType){
          let link;
          switch (attributeType) {
              case 'year':
                  link = `https://mockey.qa.sagaws.net/service/makes/year=${attribute}`;
                  this.year = attribute;
                  axios.get(link).then((response) => {
                     this.makes = response.data.Result;
                  });
                  break;
              case 'make':
                  link = `https://mockey.qa.sagaws.net/service/models/year=${this.year}/make=${attribute}`;
                  this.make = attribute;
                  axios.get(link).then((response) => {
                     this.models = response.data.Result;
                  });
                  break;
              case 'model':
                  link = `https://mockey.qa.sagaws.net/service/styles/year=${this.year}/make=${this.make}/model=${attribute}`;
                  this.model = attribute;
                  axios.get(link).then((response) => {
                     this.styles = response.data.Result;
                  });
                  break;
          }
          this.translateView();
      }
  }, 
  components: {
      Button
  }
}
</script>