uprava 2

4 years ago · a12b803af2
1 changed files with 139 additions and 37 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -1,49 +1,151 @@
 <template>
  <div id="app">
    <h1>Letenka</h1>
    <div class="wrapper"></div>
    <div class="col">
      <h2>Parametry letu</h2>
      <select v-model="travelType" >
        <option value="" disabled>Vyberte jednu požnost</option>
        <option v-for="(option, index) in travelTypes" :key="index" :value="option">
          {{option.text}}
        </option>
      </select>
    </div>
    <div class="col">
      <h2>Objednávka</h2>
      <p v-if="travelType">
        Typ cesty: 
        <span style="text-transform:lowercase">{{travelType.text}}
          </span> 
      </p>
    </div>
    <div id="app">
        <h1>Letenka</h1>
        <div class="wrapper">
            <div class="col">
                <h2>Parametry letu</h2>
                <p>
                    <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>
                <!-- volba destinace -->
                <!-- datum odletu -->
                <input type="date">
                <!-- datum příletu pokud zpáteční -->
                <p>
                    <label for="inputPersonCount">Počet cestujících</label><br>
                    <input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="10">
                </p>
                <!-- volba třídy E, B -->
                <p>
                    <label for="inputClassType">Volba třídy</label><br>
                    <select v-model="classType" id="inputClassType">
                        <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 class="seatWrap">
                    <div class="seat" v-for="(seat, index) in seats" :key="index">
                        <div v-if="chosenSeats.indexOf(seat) >= 0" v-on:click="chosenSeats.splice(chosenSeats.indexOf(seat), 1)" class="chosen">
                            {{ seat }}
                        </div>
                        <div v-else v-on:click="addSeatClick(seat)">
                            {{ seat }}
                        </div>
                    </div>
                </div>
                <button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
  </div>
            </div>
            <div class="col">
                <h2>Objednávka</h2>
                <p v-if="travelType">
                    Typ cesty: 
                    <span style="text-transform: lowercase">
                        {{ travelType.text }}
                    </span>
                </p>
                <p>
                    Počet cestujích: {{ personCount}}
                </p>
                <p v-if="classType">
                    Třída: 
                    <span style="text-transform: lowercase">
                        {{ classType.text }}
                    </span>
                </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>
 </template>
 <script>
 export default {
  name: "App",
  data: function(){
    return {
      travelType: "",
      travelTypes: [
        { value: "R", text: "Zpáteční"},
        { value: "O", text: "Jednosměrná"},
      ]
    }
  name: 'App',
  data: function() {
      return {
          travelType: "",
          travelTypes: [
              { value: "R", text: "Zpáteční" },
              { value: "O", text: "Jednosměrná" },
          ],
          personCount: 1,
          classType: "",
          classTypes: [
              { value: "E", text: "Ekonomická" },
              { value: "B", text: "Byznys" }
          ],
          seats: [
              "B1", "B2", "B3", 
              "E1", "E2", "E3", "E4", "E5"
          ],
          chosenSeats: []
      }
  },
  methods: {
      addSeatClick: function(seat) {
          if (this.chosenSeats.length < this.personCount) {
              this.chosenSeats.push(seat);
          }
          else {
              alert("Všichni cestující již sedí!");
          }
      },
      personCountChange: function() {
          let diff = this.personCount - this.chosenSeats.length;
          if (diff < 0) {
              // diff je záporné číslo
              for (let i = diff; i < 0; i++) {
                  this.chosenSeats.pop();       
              }
          }
      }
  }
 }
 </script>
 <style>
 .wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
 }
 </style>
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .seat {
      display: inline-block;
      width: 30px;
      text-align: center;
      border: 1px solid gray;
      margin: 2px;
  }
  .seat div:hover {
      cursor: pointer;
      background-color: lightgray;
  }
  .seat .chosen {
      background-color: lightgreen;
  }
 </style>