From a3ec0fa06db28f3b7fbfb7a0937b2d93748fbd8d Mon Sep 17 00:00:00 2001
From: patrykb <patryk.binkowski21@gmail.com>
Date: Wed, 12 Jun 2024 14:36:29 +0200
Subject: [PATCH] Divided the app into components and rewrote JS to TS.

---
 src/App.vue                       | 452 +++++++-----------------------
 src/components/Child.vue          |   7 +
 src/components/MainForm.vue       | 149 ++++++++++
 src/components/NavBar.vue         |  68 +++++
 src/components/OrdersSelector.vue | 149 ++++++++++
 src/main.ts                       |  94 ++++++-
 6 files changed, 561 insertions(+), 358 deletions(-)
 create mode 100644 src/components/Child.vue
 create mode 100644 src/components/MainForm.vue
 create mode 100644 src/components/NavBar.vue
 create mode 100644 src/components/OrdersSelector.vue

diff --git a/src/App.vue b/src/App.vue
index 96a8ba1..4f5faef 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,375 +1,119 @@
 <template>
-  <nav class="navbar" role="navigation" aria-label="main navigation">
-    <div class="navbar-brand">
-      <a class="navbar-item">
-        <h3 class="title is-3">Mleczarnia</h3>
-      </a>
-      <button @click="makeBurger" class="button navbar-burger" data-target="navMenu" v-bind:class="{ 'is-active': activator }">
-        <span aria-hidden="true"></span>
-        <span aria-hidden="true"></span>
-        <span aria-hidden="true"></span>
-        <span aria-hidden="true"></span>
-      </button>
-    </div>
+  <NavBar @form="switchToFrom" @order="switchToOrders"/>
 
-    <div class="navbar-menu" id="navMenu" v-bind:class="{ 'is-active': activator }">
-      <div class="navbar-start">
-        <a class="navbar-item" @click="switchToFrom">
-          Formularz
-        </a>
+  <MainForm v-if="isForm"
+            :is-dark-theme="isDarkTheme"
+            v-model:order-uuid="uuid"
+            v-model:contractors="contractors"
+            v-model:categories="categories"
+            v-model:contractor="contractor"
+            v-model:delivery-date="deliveryDate"
+            v-model:show-modal="showModal"
+  />
 
-        <a class="navbar-item" @click="switchToOrders">
-          Zamówienia
-        </a>
-      </div>
 
-      <div class="navbar-end">
-        <div class="navbar-item">
-          <div class="buttons">
-            <a class="button is-light">
-              Log in
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </nav>
-  <div v-if="isForm">
-    <form class="box" @submit="createJSON">
-      <div class="mb-3">
-        <div class="box">
-          <h1 class="is-large mb-3"><b>ZAMÓWIENIE</b></h1>
-          <h1 class="is-large mb-3" v-if="uuid != null" ><b>{{ uuid }}</b></h1>
-          <div class="field mb-5">
-            <label class="label is-small">NIP</label>
-            <div class="field">
-              <div class="select is-small is-expanded" style="width: 100%">
-                <select v-model="contractor" class="is-expanded" style="width: 100%" required>
-                  <option class="is-expanded" v-for="contractor in contractors" :key="contractor" :value=contractor.Knt_KntId>{{ contractor.Knt_NipE + ', ' + contractor.Knt_Miasto + ', ' + contractor.Knt_Nazwa1 + ' ' + contractor.Knt_Nazwa2 + ' ' + contractor.Knt_Nazwa3 }}</option>
-                </select>
-              </div>
-            </div>
-          </div>
-          <div class="field">
-            <label class="label is-small">Data dostawy</label>
-            <div class="field is-small">
-              <VueDatePicker class ="bulma-is-small"
-                             v-model="deliveryDate"
-                             :enable-time-picker="false"
-                             :clearable="true"
-                             input-class-name="input is-small"
-                              required/>
-            </div>
-          </div>
-          <button class="button is-primary mt-5">Submit</button>
-          <button class="button is-primary mt-5 ml-3" @click="showModal = true">Potwierdź</button>
-        </div>
-      </div>
-      <div v-for="(kategoria, index) in wares" :key="kategoria.Kod">
-        <div class="box" >
-          <h1 class="is-large mb-3"><b>{{ kategoria.Kod }}</b></h1>
-          <div class="field" v-for="(ware, index) in kategoria.Towary" :key="ware.Twr_Nazwa">
-            <label class="label is-small">{{ ware.Twr_Nazwa }}</label>
-            <div class="columns is-mobile">
-              <div class="column" v-if="ware.chosenOption == ware.Twr_JM">
-                <div class="field">
-                  <input
-                    class="input is-small"
-                    type="text"
-                    placeholder="Kwota"
-                    v-model="ware.Twr_Cena"
-                  />
-                </div>
-              </div>
-              <div class="column" v-else-if="ware.chosenOption == ware.Twr_JMZ">
-                <div class="field">
-                  <input
-                    class="input is-small"
-                    type="text"
-                    placeholder="Kwota"
-                    v-model="ware.Twr_CenaZ"
-                  />
-                </div>
-              </div>
-              <div class="column">
-                <div class="field has-addons">
-                  <p class="control">
-                  <span class="select is-small">
-                    <select v-model="ware.chosenOption" readonly>
-                      <option v-for="option in ware.Options" :key="option">{{ option }}</option>
-                    </select>
-                  </span>
-                  </p>
-                  <p class="control is-expanded">
-                    <input class="input is-small" type="text" placeholder="Ilość" v-model="ware.Quantity">
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div v-if="!(index == kategoria.Towary.length - 1)"></div>
-          </div>
-        </div>
-        <div class="mb-3" v-if="!(index == wares.length - 1)"></div>
-      </div>
-      <button class="button is-primary mt-3 is-large is-fullwidth">Submit</button>
-    </form>
-  </div>
-  <div class="box is-shadowless" v-else-if="isOrders">
-    <form class="mb-3">
-        <div class="box">
-          <h1 class="is-large mb-3"><b>FILTR ZAMÓWIEŃ</b></h1>
-          <div class="field mb-5">
-            <label class="label is-small">Data zamówienia</label>
-            <div class="field is-small">
-              <VueDatePicker v-model="searchOrderDate"
-                             :enable-time-picker="false"
-                             :clearable="true"
-                             input-class-name="input is-small"/>
-            </div>
-          </div>
-          <div class="field mb-5">
-            <label class="label is-small">Zamówienie potwierdzone?</label>
-            <div class="control">
-              <label class="checkbox mr-5">
-                <input type="checkbox" v-model="isOutOfBufor"/>
-                Tak
-              </label>
-              <label class="checkbox">
-                <input type="checkbox" v-model="isInBufor"/>
-                Nie
-              </label>
-            </div>
-          </div>
-          <button class="button is-primary is-small is-expanded" @click="createJSON">Pobierz zamówienia</button>
-        </div>
-    </form>
-    <div class="box">
-      <h1 class="is-large mb-3"><b>ZAMÓWIENIA</b></h1>
-        <div class="columns is-multiline">
-          <div class="column is-4" v-for="order in orders" :key="order.MZN_UUID">
-            <div class="box">
-              <h1 class="mb-3 is-size-7"><b>{{ order.MZN_UUID }}</b></h1>
-              <label class="label is-small">Klient</label>
-              <div class="field is-small mb-3">
-                <input class="input is-small is-static"
-                       type="text"
-                       :value="order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3"
-                        readonly/>
-              </div>
-              <div class="columns is-mobile field is-small mb-0">
-                <div class="column is-6">
-                  <label class="label is-small">Data dostawy</label>
-                  <div class="field is-small">
-                    <input class="input is-small is-static"
-                           type="text"
-                           v-model="order.MZN_DataDos"
-                           readonly/>
-                  </div>
-                </div>
-                <div class="column is-6">
-                  <label class="label is-small">Data zamówienia</label>
-                  <div class="field is-small">
-                    <input class="input is-small is-static"
-                           type="text"
-                           v-model="order.MZN_DataZam.split('T')[0]"
-                           readonly/>
-                  </div>
-                </div>
-              </div>
-              <label class="label is-small">Zamówienie potwierdzone?</label>
-              <div class="field is-small mb-3" v-if="order.MZN_Bufor==0">
-                <input class="input is-small is-static"
-                       type="text"
-                       value="Tak"
-                       readonly/>
-              </div>
-              <div class="field is-small mb-3" v-else>
-                <input class="input is-small is-static"
-                       type="text"
-                       value="Nie"
-                       readonly/>
-              </div>
-              <button class="button is-primary is-small is-expanded" @click="viewOrder" :name="order.MZN_UUID">Podgląd</button>
-            </div>
-          </div>
-        </div>
-    </div>
-  </div>
+  <OrdersSelector class="box is-shadowless" v-else-if="isOrders"
+                  v-model:uuid="uuid"
+                  v-model:orders="orders"
+                  v-model:contractor="contractor"
+                  v-model:delivery-date="deliveryDate"
+                  v-model:categories="categories"
+                  @order="isForm=true; isOrders=false"
+  />
   <ConfirmationModal v-show="showModal" @close="showModal = false" :order-uuid="uuid"></ConfirmationModal>
+  <button class="button" @click="console.log(categories); console.log(contractor); console.log(deliveryDate)">test</button>
+  <button class="button" @click="activateModal">test</button>
 </template>
 
-<script lang="ts">
-import './assets/style.scss';
-import { ref } from 'vue';
-import ConfirmationModal from '@/components/ConfirmationModal.vue';
+<script setup lang="ts">
+import './assets/style.scss'
+import type { Category, Contractor, Order } from '@/main'
+import { ref, watch } from 'vue'
 
-export default {
-  components: { ConfirmationModal },
-  data() {
-    return {
-      contractors: [],
-      contractor: {},
-      wares: [],
-      orders: ref(new Array<Object>),
-      order: ref(),
-      deliveryDate: ref(),
-      searchOrderDate: ref(null),
-      isInBufor: ref(false),
-      isOutOfBufor: ref(false),
-      uuid: ref(),
-      activator: ref(false),
-      isForm: ref(true),
-      isOrders: ref(false),
-      showModal: ref(false)
-    }
-  },
-  watch: {
-    isInBufor(val) {
-      if(val == true && val == this.isOutOfBufor) {
-        this.isOutOfBufor = false;
-      }
-    },
-    isOutOfBufor(val) {
-      if(val == true && val == this.isInBufor) {
-        this.isInBufor = false;
-      }
-    }
-  },
-  methods: {
-    async fetchData() {
-      const response1 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/kontrahenci');
-      this.contractors = await response1.json();
-      console.log(this.contractors);
-      const response2 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/towary');
-      this.wares = await response2.json();
-      console.log(this.wares);
-      for (let kategoria of this.wares) {
-        for (let ware of kategoria.Towary) {
-          ware.Options = new Array(ware.Twr_JM);
-          ware.chosenOption = ware.Twr_JM;
-          if (ware.Twr_JMZ != null) {
-            ware.Options.push(ware.Twr_JMZ);
-          }
-        }
-      }
-      const response3 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia/bufor');
-      let ordersTemp : Array<Object> = await response3.json();
-      this.orders.push(...ordersTemp);
-      const response4 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia');
-      ordersTemp = await response4.json();
-      this.orders.push(...ordersTemp);
-      console.log(this.orders);
-    },
-    createJSON(event: Event) {
-      event.preventDefault();
-      console.log(this.contractor);
-      const json = {
-        MZN_UUID: this.uuid,
-        MZN_DataZam: new Date(Date.now()).toISOString(),
-        MZN_DataDos: this.deliveryDate != null ? this.deliveryDate.toISOString() : null,
-        MZN_PodID: this.contractor,
-        MZamElem: new Array()
-      };
-      for (let category of this.wares) {
-        for (let ware of category.Towary) {
-          if(ware.Quantity != null) {
-            ware.Options = new Array(ware.Twr_JM);
-            ware.chosenOption = ware.Twr_JM;
-            if (ware.Twr_JMZ != null) {
-              ware.Options.push(ware.Twr_JMZ);
-            }
-            const wareObject = {
-              MZE_TwrId: ware.Twr_TwrId,
-              MZE_TwrJM: ware.chosenOption,
-              MZE_TwrCena: ware.chosenOption == ware.Twr_JMZ ? ware.Twr_CenaZ : ware.Twr_Cena,
-              MZE_TwrIlosc: ware.Quantity
-            }
-            json.MZamElem.push(wareObject);
-          }
-        }
-      }
-      console.log(JSON.stringify(json));
-      fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie', {
-        method: 'POST',
-        headers: {
-          'Accept': 'application/json',
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(json)
-      })
-        .then(response => response.json())
-        .then(response => this.uuid = response.MZN_UUID)
-    },
-    parseOrderJSON(event: Event) {
-      event.preventDefault();
-      const json = "{\"MZN_UUID\":\"55ca3087-38c0-445f-ab7e-7e566c68c0d4\",\"MZN_DataZam\":1704063600000,\"MZN_DataDos\":1717493437880,\"MZN_PodID\":194,\"MZamElem\":[{\"MZE_TwrId\":1833,\"MZE_TwrJM\":\"kg\",\"MZE_TwrCena\":\"16.00\",\"MZN_TwrIlosc\":2},{\"MZE_TwrId\":1837,\"MZE_TwrJM\":\"kg\",\"MZE_TwrCena\":\"16.10\",\"MZN_TwrIlosc\":4}]}";
-      const parsedJson = JSON.parse(json);
-      console.log(this.deliveryDate.toJSON());
-      console.log(this.contractor);
-      fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie/' + this.uuid, {
-        method: 'PUT'
-      })
-    },
-    async viewOrder(event: Event) {
-      console.log(event.target.name);
-      let tempOrder = this.orders.find(order => (order.MZN_UUID == event.target.name));
-      console.log(tempOrder);
-      const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie/' + tempOrder.MZN_UUID);
-      let order = await response.json();
-      this.uuid = order.MZN_UUID;
-      this.contractor = order.MZN_PodID;
-      this.deliveryDate = new Date(order.MZN_DataDos);
-      console.log(order);
-      for(let product of order.MZamElem){
-        for(let kategoria of this.wares) {
-          let towar = kategoria.Towary.find(ware => (ware.Twr_TwrId == product.MZE_TwrId));
-          if(towar != null) {
-            console.log('ten towar ' + towar);
-            towar.Twr_Cena = product.MZE_TwrCena.slice(0, -2);
-            towar.Quantity = product.MZE_TwrIlosc.slice(0, -2);
-            break;
-          }
-        }
-      }
-      this.isForm = true;
-      this.isOrders = false;
-      window.scrollTo(0, 0);
-    },
-    makeBurger () {
-      this.activator = !this.activator
-      return this.activator
-    },
-    switchToFrom() {
-      if(!this.isForm) {
-        this.isForm = true;
-        this.isOrders = false;
-        if(this.activator) {
-          this.activator = false;
-        }
-      }
-    },
-    switchToOrders() {
-      if(!this.isOrders) {
-        this.isForm = false;
-        this.isOrders = true;
-        if(this.activator) {
-          this.activator = false;
+const contractors = ref<Array<Contractor>>();
+const contractor = ref<number>();
+const categories = ref<Array<Category>>();
+const orders = ref<Array<Order>>(new Array<Order>());
+const order = ref<Order>();
+const deliveryDate = ref<Date>();
+const uuid = ref<string>();
+const isForm = ref<boolean>(true);
+const isOrders = ref<boolean>(false);
+const showModal = ref<boolean>(false);
+const isDarkTheme = ref<boolean>(false);
+
+async function  fetchData() {
+  const response1 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/kontrahenci');
+  contractors.value = await response1.json();
+  console.log(contractors.value);
+  const response2 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/towary');
+  categories.value = await response2.json();
+  console.log(categories.value);
+  if(categories.value != undefined) {
+    for (let kategoria of categories.value) {
+      for (let product of kategoria.Towary) {
+        product.Options = new Array(product.Twr_JM);
+        product.ChosenOption = product.Twr_JM;
+        if (product.Twr_JMZ != null) {
+          product.Options.push(product.Twr_JMZ);
         }
       }
     }
-  },
-  created() {
-    this.fetchData()
+  }
+
+  const response3 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia/bufor');
+  let ordersTemp : Array<Order> = await response3.json();
+  orders.value.push(...ordersTemp);
+  const response4 = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia');
+  ordersTemp = await response4.json();
+  orders.value.push(...ordersTemp);
+  console.log(orders.value);
+}
+
+function switchToFrom() {
+  if(!isForm.value) {
+    isForm.value = true;
+    isOrders.value = false;
   }
 }
+
+function switchToOrders() {
+  if(!isOrders.value) {
+    isForm.value = false;
+    isOrders.value = true;
+  }
+}
+
+function activateModal(event : Event) {
+  event.preventDefault();
+  showModal.value = true;
+}
+
+function checkTheme() {
+  isDarkTheme.value = !!window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches;
+}
+
+fetchData();
+checkTheme();
 </script>
 
 <style>
-@media (prefers-color-scheme: light) {
-  :root {
-    min-height: 100vh;
+@media screen and (min-width: 500px) {
+  .box {
+    --bulma-box-padding: 1.5rem;
   }
 }
+@media screen and (max-width: 500px) {
+  .box {
+    --bulma-box-padding: 0.75rem;
+  }
+}
+
+:root {
+  min-height: 100vh;
+  --dp-background-color: rgb(20, 22, 26);
+}
+
 body {
   min-height: 100vh;
 }
diff --git a/src/components/Child.vue b/src/components/Child.vue
new file mode 100644
index 0000000..5033956
--- /dev/null
+++ b/src/components/Child.vue
@@ -0,0 +1,7 @@
+<script setup>
+const model = defineModel()
+</script>
+
+<template>
+  <span>My input</span> <input v-model="model">
+</template>
\ No newline at end of file
diff --git a/src/components/MainForm.vue b/src/components/MainForm.vue
new file mode 100644
index 0000000..b68eda4
--- /dev/null
+++ b/src/components/MainForm.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import VueDatePicker from '@vuepic/vue-datepicker';
+import type { Category, Contractor, OrderProduct } from '@/main';
+
+const props = defineProps(['isDarkTheme']);
+
+const uuid = defineModel<string>('orderUuid');
+const contractors = defineModel<Array<Contractor>>('contractors');
+const contractor = defineModel<number>('contractor');
+const deliveryDate = defineModel<Date>('deliveryDate');
+const categories = defineModel<Array<Category>>('categories');
+const showModal = defineModel<boolean>('showModal');
+
+
+function createJSON(event: Event) {
+  console.log(contractor.value);
+  event.preventDefault();
+  const json = {
+    MZN_UUID: uuid.value,
+    MZN_DataZam: new Date(Date.now()).toISOString(),
+    MZN_DataDos: deliveryDate.value != undefined ? deliveryDate.value.toISOString() : null,
+    MZN_PodID: contractor.value,
+    MZamElem: new Array<OrderProduct>
+  };
+
+  if(categories.value == undefined) return;
+
+  for (let category of categories.value) {
+    for (let product of category.Towary) {
+      if(product.Quantity != null) {
+        const productObject : OrderProduct = {
+          MZE_TwrId: product.Twr_TwrId,
+          MZE_TwrJm: product.ChosenOption,
+          MZE_TwrCena: product.ChosenOption == product.Twr_JMZ ? product.Twr_CenaZ : product.Twr_Cena,
+          MZE_TwrIlosc: product.Quantity.toString(),
+          MZE_TwrNazwa: product.Twr_Nazwa,
+          MZE_MZNID: undefined,
+          MZE_MZEID: undefined,
+          MZE_TwrStawka: undefined
+        };
+        json.MZamElem.push(productObject);
+      }
+    }
+  }
+  fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie', {
+    method: 'POST',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(json)
+  })
+    .then(response => response.json())
+    .then(response => uuid.value = response.MZN_UUID);
+}
+</script>
+
+<template>
+  <form class="box" @submit="createJSON">
+    <div class="mb-3">
+      <div class="box">
+        <h1 class="is-large mb-3"><b>ZAMÓWIENIE</b></h1>
+        <h1 class="is-large mb-3" v-if="uuid != null" ><b>{{ uuid }}</b></h1>
+        <div class="field mb-5">
+          <label class="label is-small">NIP</label>
+          <div class="field">
+            <div class="select is-small is-expanded" style="width: 100%">
+              <select v-model="contractor" class="is-expanded" style="width: 100%" required>
+                <option class="is-expanded" v-for="contractor in contractors" :key="contractor.Knt_KntId" :value=contractor.Knt_KntId>{{ contractor.Knt_NipE + ', ' + contractor.Knt_Miasto + ', ' + contractor.Knt_Nazwa1 + ' ' + contractor.Knt_Nazwa2 + ' ' + contractor.Knt_Nazwa3 }}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div class="field">
+          <label class="label is-small">Data dostawy</label>
+          <div class="field is-small">
+            <VueDatePicker class ="bulma-is-small is-static"
+                           v-model="deliveryDate"
+                           :enable-time-picker="false"
+                           :clearable="true"
+                           input-class-name="input is-small"
+                           v-bind:dark = "isDarkTheme"/>
+          </div>
+        </div>
+        <button class="button is-primary mt-5">Submit</button>
+        <button class="button is-primary mt-5 ml-3" @click="showModal = true">Potwierdź</button>
+      </div>
+    </div>
+    <div v-for="category in categories" :key="category.Kod">
+      <div class="box mb-3" >
+        <h1 class="is-large mb-3"><b>{{ category.Kod }}</b></h1>
+        <div class="field" v-for="(product, index) in category.Towary" :key="product.Twr_Nazwa">
+          <label class="label is-small">{{ product.Twr_Nazwa }}</label>
+          <div class="columns is-mobile">
+            <div class="column" v-if="product.ChosenOption == product.Twr_JM">
+              <div class="field">
+                <input
+                  class="input is-small"
+                  type="text"
+                  placeholder="Kwota"
+                  v-model="product.Twr_Cena"
+                />
+              </div>
+            </div>
+            <div class="column" v-else-if="product.ChosenOption == product.Twr_JMZ">
+              <div class="field">
+                <input
+                  class="input is-small"
+                  type="text"
+                  placeholder="Kwota"
+                  v-model="product.Twr_CenaZ"
+                />
+              </div>
+            </div>
+            <div class="column">
+              <div class="field has-addons">
+                <p class="control">
+                  <span class="select is-small">
+                    <select v-model="product.ChosenOption" readonly>
+                      <option v-for="option in product.Options" :key="option">{{ option }}</option>
+                    </select>
+                  </span>
+                </p>
+                <p class="control is-expanded">
+                  <input class="input is-small" type="text" placeholder="Ilość" v-model="product.Quantity">
+                </p>
+              </div>
+            </div>
+          </div>
+          <div v-if="!(index == category.Towary.length - 1)"></div>
+        </div>
+      </div>
+    </div>
+    <div class="columns mt-1 is-variable is-mobile">
+      <div class = "column is-6">
+        <button class="button is-primary is-fullwidth is-large">Submit</button>
+      </div>
+      <div class = "is-large column is-6 ml-3">
+        <button class="button is-primary is-fullwidth is-large" @click="parseOrderJSON">Potwierdź</button>
+      </div>
+    </div>
+  </form>
+</template>
+
+<style scoped>
+.dp__theme_dark {
+  --dp-background-color: rgb(20, 22, 26);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
new file mode 100644
index 0000000..62192d2
--- /dev/null
+++ b/src/components/NavBar.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const emit = defineEmits(['form', 'order']);
+
+const activator =  ref(false);
+
+function makeBurger() {
+  activator.value = !activator.value
+  return activator
+}
+
+function clickForm() {
+  emit('form');
+  if(activator.value) {
+    activator.value = false;
+  }
+}
+
+function clickOrders() {
+  emit('order');
+  if(activator.value) {
+    activator.value = false;
+  }
+}
+</script>
+
+<template>
+  <nav class="navbar" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand">
+      <a class="navbar-item">
+        <h3 class="title is-3">Mleczarnia</h3>
+      </a>
+      <button @click="makeBurger" class="button navbar-burger" data-target="navMenu" v-bind:class="{ 'is-active': activator }">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </button>
+    </div>
+
+    <div class="navbar-menu" id="navMenu" v-bind:class="{ 'is-active': activator }">
+      <div class="navbar-start">
+        <a class="navbar-item" @click="clickForm">
+          Formularz
+        </a>
+
+        <a class="navbar-item" @click="clickOrders">
+          Zamówienia
+        </a>
+      </div>
+
+      <div class="navbar-end">
+        <div class="navbar-item">
+          <div class="buttons">
+            <a class="button is-light">
+              Log in
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/OrdersSelector.vue b/src/components/OrdersSelector.vue
new file mode 100644
index 0000000..71bb97a
--- /dev/null
+++ b/src/components/OrdersSelector.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import VueDatePicker from '@vuepic/vue-datepicker';
+import {ref, watch} from 'vue'
+import type { Category, Order } from '@/main'
+
+const searchOrderDate = ref<Date>();
+const isOutOfBufor = ref<boolean>(false);
+const isInBufor = ref<boolean>(false);
+const orders = defineModel<Array<Order>>('orders');
+const uuid = defineModel<string>('uuid');
+const contractor = defineModel<number>('contractor');
+const deliveryDate = defineModel<Date>('deliveryDate');
+const categories = defineModel<Array<Category>>('categories');
+
+const emit = defineEmits(['order']);
+
+watch(isInBufor, (val) => {
+  if(val && val == isOutOfBufor.value) {
+    isOutOfBufor.value = false;
+  }
+},{
+  immediate: true
+});
+
+watch(isOutOfBufor, (val) => {
+  if(val && val == isInBufor.value) {
+    isInBufor.value = false;
+  }
+}, {
+  immediate: true
+});
+
+async function viewOrder(event: Event | undefined) {
+  console.log(event?.target?.name);
+  let tempOrder = orders.value?.find(order => (order.MZN_UUID == event?.target?.name));
+  console.log(tempOrder);
+  if (tempOrder == undefined) return;
+  if (categories.value == undefined) return;
+
+  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie/' + tempOrder.MZN_UUID);
+  let order = await response.json();
+
+  uuid.value = "test";
+  contractor.value = order.MZN_PodID;
+  deliveryDate.value = new Date(order.MZN_DataDos);
+  console.log(order);
+  for(let orderProduct of order.MZamElem){
+    for(let category of categories.value) {
+      let product = category.Towary.find(product => (product.Twr_TwrId == orderProduct.MZE_TwrId));
+      if(product != null) {
+        console.log('ten towar ' + product);
+        product.Twr_Cena = orderProduct.MZE_TwrCena.slice(0, -2);
+        product.Quantity = orderProduct.MZE_TwrIlosc.slice(0, -2);
+        break;
+      }
+    }
+  }
+  emit('order');
+  window.scrollTo(0, 0);
+}
+</script>
+
+<template>
+  <div class="box is-shadowless">
+    <form class="mb-3">
+      <div class="box">
+        <h1 class="is-large mb-3"><b>FILTR ZAMÓWIEŃ</b></h1>
+        <div class="field mb-5">
+          <label class="label is-small">Data zamówienia</label>
+          <div class="field is-small">
+            <VueDatePicker v-model="searchOrderDate"
+                           :enable-time-picker="false"
+                           :clearable="true"
+                           input-class-name="input is-small"/>
+          </div>
+        </div>
+        <div class="field mb-5">
+          <label class="label is-small">Zamówienie potwierdzone?</label>
+          <div class="control">
+            <label class="checkbox mr-5">
+              <input type="checkbox" v-model="isOutOfBufor"/>
+              Tak
+            </label>
+            <label class="checkbox">
+              <input type="checkbox" v-model="isInBufor"/>
+              Nie
+            </label>
+          </div>
+        </div>
+        <button class="button is-primary is-small is-expanded" @click="createJSON">Pobierz zamówienia</button>
+      </div>
+    </form>
+    <div class="box">
+      <h1 class="is-large mb-3"><b>ZAMÓWIENIA</b></h1>
+      <div class="columns is-multiline">
+        <div class="column is-4" v-for="order in orders" :key="order.MZN_UUID">
+          <div class="box">
+            <h1 class="mb-3 is-size-7"><b>{{ order.MZN_UUID }}</b></h1>
+            <label class="label is-small">Klient</label>
+            <div class="field is-small mb-3">
+              <input class="input is-small is-static"
+                     type="text"
+                     :value="order.MZN_PodNazwa1 + order.MZN_PodNazwa2 + order.MZN_PodNazwa3"
+                     readonly/>
+            </div>
+            <div class="columns is-mobile field is-small mb-0">
+              <div class="column is-6">
+                <label class="label is-small">Data dostawy</label>
+                <div class="field is-small">
+                  <input class="input is-small is-static"
+                         type="text"
+                         v-model="order.MZN_DataDos"
+                         readonly/>
+                </div>
+              </div>
+              <div class="column is-6">
+                <label class="label is-small">Data zamówienia</label>
+                <div class="field is-small">
+                  <input class="input is-small is-static"
+                         type="text"
+                         v-model="order.MZN_DataZam.split('T')[0]"
+                         readonly/>
+                </div>
+              </div>
+            </div>
+            <label class="label is-small">Zamówienie potwierdzone?</label>
+            <div class="field is-small mb-3" v-if="order.MZN_Bufor==0">
+              <input class="input is-small is-static"
+                     type="text"
+                     value="Tak"
+                     readonly/>
+            </div>
+            <div class="field is-small mb-3" v-else>
+              <input class="input is-small is-static"
+                     type="text"
+                     value="Nie"
+                     readonly/>
+            </div>
+            <button class="button is-primary is-small is-expanded" @click="viewOrder" :name="order.MZN_UUID">Podgląd</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index de6e84c..ede301f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,8 +1,94 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from 'vue';
+import App from './App.vue';
 import VueDatePicker from '@vuepic/vue-datepicker';
-import '@vuepic/vue-datepicker/dist/main.css'
+import '@vuepic/vue-datepicker/dist/main.css';
+import ConfirmationModal from '@/components/ConfirmationModal.vue';
+import NavBar from '@/components/NavBar.vue';
+import MainForm from '@/components/MainForm.vue';
+import OrdersSelector from '@/components/OrdersSelector.vue'
 
 const app = createApp(App)
 app.component('VueDatePicker', VueDatePicker);
-app.mount('#app')
+app.component('ConfirmationModal', ConfirmationModal);
+app.component('NavBar', NavBar);
+app.component('MainForm', MainForm);
+app.component('OrdersSelector', OrdersSelector);
+app.mount('#app');
+
+export interface Category {
+  GIDNumer: number,
+  GrONumer: number,
+  Kod: string,
+  Nazwa: string,
+  Poziom: number,
+  Sciezka: string,
+  Towary: Array<Product>
+}
+
+export interface Product {
+  Twr_Cena: string,
+  Twr_CenaZ: string,
+  Twr_JM: string,
+  Twr_JMPrzelicznikL: string,
+  Twr_JMPrzelicznikM: string,
+  Twr_JMZ: string,
+  Twr_Kod: string,
+  Twr_Nazwa: string,
+  Twr_NieAktywny: number,
+  Twr_Stawka: string,
+  Twr_TwGGIDNumer: number,
+  Twr_TwrId: number,
+  Options: Array<string>,
+  ChosenOption: string,
+  Quantity: number
+}
+
+export interface Contractor {
+  Knt_Email: string,
+  Knt_KntId: number,
+  Knt_KodPocztowy: string,
+  Knt_Miasto: string,
+  Knt_Nazwa1: string,
+  Knt_Nazwa2: string,
+  Knt_Nazwa3: string,
+  Knt_Niekatywny: number,
+  Knt_NipE: string,
+  Knt_NrDomu: string,
+  Knt_OpiekunId: number,
+  Knt_OpiekunTyp: number,
+  Knt_Ulica: string,
+  Knt_Wojewodztwo: string
+}
+
+export interface Order {
+  MZN_Bufor: number,
+  MZN_DataDos: string,
+  MZN_DataZam: string,
+  MZN_MZNID: number,
+  MZN_OpeID: number,
+  MZN_PodID: number,
+  MZN_PodKodPocztowy: string,
+  MZN_PodMiasto: string,
+  MZN_PodNazwa1: string,
+  MZN_PodNazwa2: string,
+  MZN_PodNazwa3: string,
+  MZN_PodNipE: string,
+  MZN_PodNrDomu: string,
+  MZN_PodUlica: string,
+  MZN_PodWojewodztwo: string,
+  MZN_TypDokumentu: number,
+  MZN_UUID: string,
+  MZamElem: Array<OrderProduct>
+}
+
+export interface OrderProduct {
+  MZE_MZEID: number | undefined,
+  MZE_MZNID: number | undefined,
+  MZE_TwrCena: string,
+  MZE_TwrId: number,
+  MZE_TwrIlosc: string,
+  MZE_TwrJm: string,
+  MZE_TwrNazwa: string,
+  MZE_TwrStawka: string | undefined
+}
+