initial commit

src/App.vue

@@ -1,28 +1,118 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js 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>
+
+        <p>
+          <label for="inputPersonCount">Počet cestujících</label><br>
+          <input v-model="personCount" type="number" id="inputPersonCount" min="1" max="10">
+        </p>
+        
+        <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 v-on:click="chosenSeats.push(seat)" class="seat" v-for="(seat, index) in seats" :key="index">
+            <div v-if="chosenSeats.indexOf(seat) >=0" class="chosen">
+              {{ seat }}
+            </div>
+            <div v-else>
+              {{ seat }}
+            </div>
+            
+          </div>
+        </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 cestuijících: {{ personCount }}
+        </p>
+        <p v-if="classType">
+            Typ cesty: 
+            <span style="text-transform: lowercase">
+              {{ classType.text }}
+            </span>
+        </p>
+
+        <div v-if="chosenSeats.length > 0">
+          Vybraná místa:
+          <div class="seat" v-for="seat in chosenSeats" :key="seat">
+            {{ seat }}
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
 
 export default {
   name: 'App',
-  components: {
-    HelloWorld
+  data: function() {
+    return{
+      travelType: "",
+      travelTypes: [
+        { value: "R", text: "Zpáteční"},
+        { value: "O", text: "Jednosměrná"}
+      ],
+      personCount: 1,
+      classType: "",
+      classTypes: [
+        {value: "E", text: "Ekonomická"},
+        {válue: "B", text: "Byznys"}
+      ],
+      seats: [
+        "B1", "B2", "B3",
+        "E1", "E2", "E3", "E4", "E5" 
+      ],
+      chosenSeats: []
+    }
   }
 }
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+  .wrapper{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .seat{
+    display: inline-block;
+    width: 30px;
+    text-align: center;
+    margin: 2px;
+    border: 1px solid grey;
+  } 
+
+  .seat:hover{
+    cursor: pointer;
+    background-color: lightgray;
+  }
+
+
 </style>