Letenka

 <template>
  <div id="app">
    <h1 style="text-align: center;">Letenka</h1>
    <div class="wrapper">
      <div class="col1">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Parametry letu</h4>
            <div>
              <p>Typ letenky:
                <select v-model="travelType">
                  <option value="" disabled>vyberte jednu možnost</option>
                  <option v-for="(option, index) in travelTypes" :key="index" :value="option">{{ option.text }}</option>
                </select>
              </p>
            </div>
            <div>
              <p>Destinace:
                <select v-model="locationType">
                  <option value="" disabled>vyberte jednu možnost</option>
                  <option v-for="(option, index) in locationTypes" :key="index" :value="option">{{ option.text }}</option>
                </select>
              </p>
            </div>
            <div>
              <p>Třída: 
                <select v-on:change="chosenSeats = []" v-model="classType">
                  <option value="" disabled>vyberte jednu možnost</option>
                  <option v-for="(option, index) in classTypes" :key="index" :value="option">{{ option.text }}</option>
                </select>
              </p>
            </div>
            <div v-if="travelType.value == 'O'">
              <label for="inputdeparatureDate">vyberte datum odletu: </label>
              <v-date-picker v-model="departureDate" :min-date="new Date()" id="inputdeperatureDate" />
            </div>
            <div v-else>
              <label for="inputdeparatureRangeDate">vyberte datum odletu: </label>
              <v-date-picker v-model="deparatureRangeDate" :min-date="new Date()" is-range id="inputdeperatureRangeDate" />
            </div>
            <div>
              <p>
                <label for="inputPersonCount">Počet cestujcích</label>
                <input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="10">
              </p>
            </div>
            <SeatPicker v-model="chosenSeats" :seats="seats" :classType="classType" :personCount="personCount" />
            <button v-on:klick="chosenSeats=[]">Odebrat všechna sedadla</button>
          </div>
          </div>
        </div>
        
        

      <div class="col2">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Objednavka</h4>
            <p v-if="travelType">
              Typ cesty: <span style="text-transform: lowercase;">{{ travelType.text }}</span> 
            </p>

            <p v-if="locationType">
              Destinace: <span style="text-transform: lowercase;">{{ locationType.text }}</span>
            </p>

            <p v-if="classType">
              Třída: <span style="text-transform: lowercase;">{{ classType.text }}</span>
            </p>
            <p v-if="travelType.value == 'O'">
              Datum odletu: 
              {{ departureDate.getDate() }}. {{ departureDate.getMonth() + 1 }}. {{ departureDate.getFullYear() }}
            </p>
            <p v-else-if="travelType.value == 'R'">
              Datum odletu: 
              {{ deparatureRangeDate.start.getDate() }}. {{ deparatureRangeDate.start.getMonth() + 1 }}. {{ deparatureRangeDate.start.getFullYear() }}

              Datum příletu:
              {{ deparatureRangeDate.end.getDate() }}. {{ deparatureRangeDate.end.getMonth() + 1 }}. {{ deparatureRangeDate.end.getFullYear() }}
            </p>
            <p>
              Počet cestujcích: {{ personCount }}
            </p>
            
              <div v-if="chosenSeats.length">
                  Vybraná místa:
            <div class="seat" v-for="seat in chosenSeats" :key="seat">{{ seat }}</div>
            </div>
          </div>
        </div>     
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import VCalendar from 'v-calendar';
import SeatPicker from './components/SeatPicker';

Vue.use(VCalendar, {});

export default {
  name: 'App',
  components: {
    SeatPicker,
  },
  data: function() {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth();
    return {
      travelType: "",
      travelTypes: [
        { value: "R", text: "Zpáteční" },
        { value: "O", text: "Jednosměrná" },
      ],
      locationType: "",
      locationTypes: [
        { value: "L", text: "Londýn" },
        { value: "N", text: "NewYork" },
        { value: "D", text: "Dubaj" },
        { value: "L", text: "Los Angeles" },
      ],
      classType: "",
      classTypes: [
        { value: "E", text: "Economy" },
        { value: "B", text: "Bussines" },
      ],

      personCount: 1,

      seats: [
        "B1", "B2", "B3",
        "E1", "E2", "E3", "E4", "E5"
      ],
      chosenSeats: [],

      departureDate: new Date(),
      deparatureRangeDate: {
        start: new Date(year, month, 12),
        end: new Date(year, month, 12),
      },

    }
  },
  methods: {

    personCountChange: function() {
      let diff = this.personCount - this.chosenSeats.length;
        //diff je záporné číslo
      for (let i = diff; i < 0; i++) {
        this.chosenSeats.pop();
          
      }
    },
  }
}
</script>

<style>

.card {
    margin-left: 100px;
}


  @media only screen and (max-width: 1000px) {
    .wrapper {
      display: block;
    }
  }
 </style>