Setup frontend

frontend/src/components/HelloWorld.vue

@@ -1,11 +0,0 @@
-<template><div></div></template>
-
-<script>
-export default {
-  name: "Hello",
-
-  data: () => ({}),
-};
-</script>
-
-<style scoped></style>

frontend/src/components/Search.vue

@@ -0,0 +1,48 @@
+<template>
+    <v-container>
+        <h1 class="title font-weight-thin">Wyszukiwarka samochodów</h1>
+        <v-row>
+            <v-col md="3" v-for="item in items" :key="item.label">
+                <v-combobox v-model="item.selected" :items="item.items" :label="item.label"></v-combobox>
+            </v-col>
+        </v-row>
+        <v-row justify="center">
+            <v-btn rounded color="primary" dark>Szukaj</v-btn>
+        </v-row>
+    </v-container>
+</template>
+
+<script>
+export default {
+    name: "Search",
+
+    data: () => ({
+        items: {
+            age: {
+                label: "Rok produkcji",
+                selected: "",
+                items: ["Dawno", "Średnio", "Niedawno"],
+            },
+            mileage: {
+                label: "Przebieg",
+                selected: "",
+                items: ["Niski", "Średni", "Duży"],
+            },
+            engine_capacity: {
+                label: "Pojemność silnika",
+                selected: "",
+                items: ["Mała", "Średnia", "Ogromna"],
+            },
+            fuel_usage: {
+                label: "Spalanie paliwa",
+                selected: "",
+                items: ["Niskie", "Średnie", "Wysokie"],
+            },
+        },
+    }),
+};
+</script>
+
+<style scoped>
+
+</style>

frontend/src/components/Table.vue

@@ -0,0 +1,50 @@
+<template>
+    <v-container>
+        <v-row>
+            <v-col md="12">
+                <v-data-table :headers="headers" :items="items" class="elevation-1"></v-data-table>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+
+<script>
+export default {
+    name: "Table",
+
+    data: () => ({
+        headers: [
+            { text: "Marka", value: "brand" },
+            { text: "Model", value: "model" },
+            { text: "Przebieg (km)", value: "mileage" },
+            { text: "Rok produkcji", value: "production_year" },
+            { text: "Pojemnośc silnika (cm^3)", value: "engine_capacity" },
+            { text: "Spalanie (L/100km)", value: "fuel_usage" },
+            { text: "Cena (zł)", value: "price" },
+        ],
+        items: [{
+                brand: "Ford",
+                model: "Focus",
+                mileage: 230000,
+                production_year: 2008,
+                engine_capacity: 2.0,
+                fuel_usage: 7.6,
+                price: 12200,
+            },
+            {
+                brand: "Fiat",
+                model: "Punto",
+                mileage: 430000,
+                production_year: 2003,
+                engine_capacity: 1.3,
+                fuel_usage: 5.5,
+                price: 3500,
+            },
+        ],
+    }),
+};
+</script>
+
+<style scoped>
+
+</style>

frontend/src/views/Home.vue

@@ -1,17 +1,20 @@
 <template>
   <div>
-    <hello-world />
+    <Search class="my-5"/>
+    <Table class="mt-5"/>
   </div>
 </template>
 
 <script>
-import HelloWorld from "../components/HelloWorld";
+import Search from "../components/Search";
+import Table from "../components/Table";
 
 export default {
   name: "Home",
 
   components: {
-    HelloWorld,
+    Search,
+    Table
   },
 };
 </script>