Whole site refactor. Added pinia stores and authentication capability.

src/App.vue

@@ -1,176 +1,10 @@
 <template>
-  <NavBar @form="switchToFrom" @order="switchToOrders"/>
-
-  <div v-if="isLoading">
-    <LoadingComponent/>
-  </div>
-  <div v-else>
-    <div v-if="isForm">
-      <MainForm
-        v-if="order == undefined || order.MZN_Bufor==1"
-        :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"
-      />
-      <ConfirmedForm v-else-if="order.MZN_Bufor==0"
-                     :order-date="orderDate"
-                     :uuid = "uuid"
-                     :delivery-date="deliveryDate"
-                     v-model:contractor="contractor"
-                     v-model:categories="categories"
-                     v-model:order="order">
-      </ConfirmedForm>
-    </div>
-    <OrdersSelector class="box is-shadowless" v-else-if="isOrders"
-                    v-model:orders="orders"
-                    @order="viewOrder"
-    />
-  </div>
-  <ConfirmationModal v-show="showModal" @close="showModal = false" @confirm="closeModal" :order-uuid="uuid"></ConfirmationModal>
+  <RouterView />
 </template>
 
 <script setup lang="ts">
 import './assets/style.scss'
-import type { Category, Contractor, Order } from '@/main'
-import { ref } from 'vue'
-
-const contractors = ref<Array<Contractor>>();
-const contractor = ref<Contractor>();
-const categories = ref<Array<Category>>();
-const orders = ref<Array<Order>>(new Array<Order>());
-const order = ref<Order>();
-const deliveryDate = ref<Date>();
-const orderDate = 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);
-const isLoading = ref<boolean>(true);
-
-async function fetchContractors() {
-  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/kontrahenci');
-  contractors.value = await response.json();
-}
-
-async function fetchCategories() {
-  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/towary');
-  categories.value = await response.json();
-  if(categories.value != undefined) {
-    for (let category of categories.value) {
-      for (let product of category.Towary) {
-        product.Options = new Array(product.Twr_JM);
-        product.ChosenOption = product.Twr_JM;
-        if (product.Twr_JMZ != null) {
-          product.Options.push(product.Twr_JMZ);
-        }
-      }
-    }
-  }
-}
-
-async function fetchOrdersInBuffer() {
-  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia/bufor');
-  let ordersTemp : Array<Order> = await response.json();
-  orders.value.push(...ordersTemp);
-}
-
-async function fetchOrdersOutOfBuffer() {
-  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia');
-  let ordersTemp : Array<Order> = await response.json();
-  orders.value.push(...ordersTemp);
-}
-
-async function  fetchData() {
-  await fetchContractors();
-  await fetchCategories();
-  await fetchOrdersInBuffer();
-  await fetchOrdersOutOfBuffer();
-  isLoading.value = false;
-}
-
-function switchToFrom() {
-  if(!isForm.value) {
-    isForm.value = true;
-    isOrders.value = false;
-  }
-}
-
-async function switchToOrders() {
-  if(!isOrders.value) {
-    isLoading.value = true;
-    isForm.value = false;
-    isOrders.value = true;
-    orders.value = new Array<Order>();
-    await fetchOrdersInBuffer();
-    await fetchOrdersOutOfBuffer();
-    isLoading.value = false;
-  }
-}
-
-function checkTheme() {
-  isDarkTheme.value = !!window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches;
-}
-
-function viewOrder(event : Event) {
-  console.log('parent');
-  isForm.value=true;
-  isOrders.value=false;
-  window.scrollTo(0, 0);
-  console.log(event.MZN_UUID);
-  if (categories.value == undefined) return;
-  isLoading.value = true;
-  loadOrder(event.MZN_UUID, false);
-}
-
-function closeModal() {
-  showModal.value = false;
-  if (uuid.value != undefined) {
-    isLoading.value = true;
-    loadOrder(uuid.value, true);
-  }
-}
-
-async function loadOrder(uuid: string, confirmed: boolean) {
-  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie/' + uuid);
-  let tempOrder = await response.json();
-
-  if(confirmed) {
-    tempOrder.MZN_Bufor = 0;
-  }
-
-  contractor.value = contractors.value?.find((contractor) => contractor.Knt_KntId == tempOrder.MZN_PodID);
-  deliveryDate.value = new Date(tempOrder.MZN_DataDos);
-  orderDate.value = new Date(tempOrder.MZN_DataZam);
-  order.value = tempOrder;
-
-  if(categories.value == undefined) {
-    isLoading.value = false;
-    return;
-  }
-
-  console.log(order.value);
-
-  for(let orderProduct of tempOrder.MZamElem){
-    for(let category of categories.value) {
-      let product = category.Towary.find(product => (product.Twr_TwrId == orderProduct.MZE_TwrId));
-      if(product != undefined && orderProduct.MZE_TwrCena != null) {
-        product.Twr_Cena = orderProduct.MZE_TwrCena.slice(0, -2);
-        product.Quantity = orderProduct.MZE_TwrIlosc.slice(0, -2);
-        category.isVisible = true;
-        break;
-      }
-    }
-  }
-  isLoading.value = false;
-}
-
-fetchData();
-checkTheme();
+import { RouterView } from 'vue-router'
 </script>
 
 <style>

src/components/ConfirmationModal.vue

@@ -1,17 +1,29 @@
 <script setup lang="ts">
-const emit = defineEmits(['close', 'confirm']);
+import { useOrdersStore } from '@/stores/orders.store'
+import { storeToRefs } from 'pinia'
+import { axiosInstance } from '@/main'
+import { useSiteControlStore } from '@/stores/siteControl.store'
+import { useContractorsStore } from '@/stores/contractors.store'
+import { useCategoriesStore } from '@/stores/categories.store'
 
-const props = defineProps(
-  {
-    orderUuid : String
+const ordersStore = useOrdersStore();
+const siteControlStore = useSiteControlStore();
+const contractorStore = useContractorsStore();
+const categoriesStore = useCategoriesStore();
+
+const { contractor, contractors } = storeToRefs(contractorStore);
+const { categories } = storeToRefs(categoriesStore);
+const { uuid } = storeToRefs(ordersStore);
+const { showConfirmationModal, isLoading} = storeToRefs(siteControlStore);
+
+async function confirmOrder() {
+  await axiosInstance.put('/zamowienie/' + uuid.value);
+  showConfirmationModal.value = false;
+  if (uuid.value != undefined) {
+    isLoading.value = true;
+    await ordersStore.loadOrder(uuid.value, true, contractor, contractors, categories);
+    isLoading.value = false;
   }
-);
-
-function confirmOrder() {
-  emit('confirm');
-  fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienie/' + props.orderUuid, {
-    method: 'PUT'
-  });
 }
 </script>
 

src/components/ConfirmedForm.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
-import type { Category, Contractor, Order } from '@/main'
 import VueDatePicker from '@vuepic/vue-datepicker'
+import { useOrdersStore } from '@/stores/orders.store'
+import { storeToRefs } from 'pinia'
+import { useCategoriesStore } from '@/stores/categories.store'
+import { useContractorsStore } from '@/stores/contractors.store'
 
-const order = defineModel<Order>('order');
-const categories = defineModel<Array<Category>>('categories');
-const contractor = defineModel<Contractor>('contractor');
+const ordersStore = useOrdersStore();
+const categoriesStore = useCategoriesStore();
+const contractorsStore = useContractorsStore();
 
-const props = defineProps({
-  orderDate: Date,
-  uuid: String,
-  deliveryDate: Date
-})
+const { order, uuid} = storeToRefs(ordersStore);
+
+const { categories } = storeToRefs(categoriesStore);
+
+const { contractor } = storeToRefs(contractorsStore);
 
 function cancelOrder(event: Event) {
   event.preventDefault();

src/components/LoginModal.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { axiosInstance } from '@/main'
+import type { VueCookies } from 'vue3-cookies/dist/interfaces'
+import { inject } from 'vue'
+
+const emit = defineEmits(['close']);
+
+function sendLogin() {
+  emit('close');
+  axiosInstance.post('/login', {
+    username: 'testowyj',
+    password: 'beihiegei5Fied0b'
+  }, {
+    withCredentials: true
+  });
+
+  const $cookies = inject<VueCookies>('$cookies');
+  console.log($cookies);
+}
+
+</script>
+
+<template>
+  <div>
+    <div class="modal is-active">
+      <div class="modal-background"></div>
+      <div class="modal-card p-3">
+        <header class="modal-card-head">
+          <p class="modal-card-title">Logowanie</p>
+          <button class="delete" aria-label="close" @click="$emit('close')"></button>
+        </header>
+        <section class="modal-card-body">
+          <form>
+
+          </form>
+        </section>
+        <footer class="modal-card-foot">
+          <div class="buttons">
+            <button class="button is-success" @click="sendLogin">Zaloguj się</button>
+            <button class="button" @click="$emit('close')">Anuluj</button>
+          </div>
+        </footer>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/MainForm.vue

@@ -1,19 +1,23 @@
 <script setup lang="ts">
 import VueDatePicker from '@vuepic/vue-datepicker';
-import type { Category, Contractor, OrderProduct } from '@/main';
+import { axiosInstance, type Category, type Contractor, type OrderProduct } from '@/main'
+import { useCategoriesStore } from '@/stores/categories.store'
+import { useContractorsStore } from '@/stores/contractors.store'
+import { useOrdersStore } from '@/stores/orders.store'
+import { storeToRefs } from 'pinia'
+import { useSiteControlStore } from '@/stores/siteControl.store'
 
-const props = defineProps(['isDarkTheme']);
-
-const uuid = defineModel<string>('orderUuid');
-const contractors = defineModel<Array<Contractor>>('contractors');
-const contractor = defineModel<Contractor>('contractor');
-const deliveryDate = defineModel<Date>('deliveryDate');
-const categories = defineModel<Array<Category>>('categories');
-const showModal = defineModel<boolean>('showModal');
+const categoriesStore = useCategoriesStore();
+const contractorsStore = useContractorsStore();
+const ordersStore = useOrdersStore();
+const siteControlStore = useSiteControlStore();
 
+const { contractor, contractors } = storeToRefs(contractorsStore);
+const { deliveryDate, uuid } = storeToRefs(ordersStore);
+const { categories } = storeToRefs(categoriesStore);
+const { showConfirmationModal, isDarkTheme } = storeToRefs(siteControlStore);
 
 function createJSON(event: Event) {
-  console.log(contractor.value);
   event.preventDefault();
   const json = {
     MZN_UUID: uuid.value,
@@ -42,16 +46,15 @@ function createJSON(event: Event) {
       }
     }
   }
-  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);
+
+  axiosInstance.post('/zamowienie', JSON.stringify(json)).then( response => {
+    uuid.value = response.data.MZN_UUID;
+  });
+}
+
+function setConfirmationModal(event : Event) {
+  event.preventDefault();
+  showConfirmationModal.value = true;
 }
 </script>
 
@@ -59,8 +62,10 @@ function createJSON(event: Event) {
   <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="mb-3">
+          <h1 class="title is-5"><b>ZAMÓWIENIE</b></h1>
+          <h1 class="subtitle is-5" v-if="uuid != undefined" ><b>{{ uuid }}</b></h1>
+        </div>
         <div class="field mb-5">
           <label class="label is-small">NIP</label>
           <div class="field">
@@ -83,13 +88,13 @@ function createJSON(event: Event) {
                            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>
+        <button class="button is-info mt-5">Submit</button>
+        <button class="button is-info mt-5 ml-3" @click="setConfirmationModal">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>
+        <h1 class="title is-5 mb-3 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">
@@ -134,10 +139,10 @@ function createJSON(event: Event) {
     </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>
+        <button class="button is-info 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>
+        <button class="button is-info is-fullwidth is-large" @click="showConfirmationModal = true">Potwierdź</button>
       </div>
     </div>
   </form>
@@ -151,6 +156,7 @@ function createJSON(event: Event) {
     --dp-menu-border-color: var(--bulma-border);
     --dp-border-color-hover: var(--bulma-border);
     --dp-border-color-focus: var(--bulma-border);
+    --dp-primary-color: var(--bulma-info-00);
   }
 }
 
@@ -160,6 +166,8 @@ function createJSON(event: Event) {
     --dp-menu-border-color: var(--bulma-border);
     --dp-border-color-hover: var(--bulma-border);
     --dp-border-color-focus: var(--bulma-border);
+    --dp-primary-color: var(--bulma-info);
+    --dp-primary-text-color: #000;
   }
 }
 </style>

src/components/NavBar.vue

@@ -1,24 +1,25 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-
-const emit = defineEmits(['form', 'order']);
+import { useSiteControlStore } from '@/stores/siteControl.store'
 
 const activator =  ref(false);
 
+const siteControlStore = useSiteControlStore();
+
 function makeBurger() {
   activator.value = !activator.value
   return activator
 }
 
 function clickForm() {
-  emit('form');
+  siteControlStore.switchToFrom();
   if(activator.value) {
     activator.value = false;
   }
 }
 
 function clickOrders() {
-  emit('order');
+  siteControlStore.switchToOrders();
   if(activator.value) {
     activator.value = false;
   }

src/components/OrdersSelector.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
 import VueDatePicker from '@vuepic/vue-datepicker';
-import { onRenderTriggered, ref, watch } from 'vue'
-import type { Order } from '@/main'
+import { ref, watch } from 'vue'
+import { useOrdersStore } from '@/stores/orders.store'
+import { storeToRefs } from 'pinia'
+import { useSiteControlStore } from '@/stores/siteControl.store'
 
+const ordersStore = useOrdersStore();
+const siteControlStore = useSiteControlStore();
 const searchOrderDate = ref<Date>();
-const isOutOfBufor = ref<boolean>(false);
+const isOutOfBuffer = ref<boolean>(false);
 const isInBufor = ref<boolean>(false);
-const orders = defineModel<Array<Order>>('orders');
-
-const emit = defineEmits<{
-  order: [order: Order]
-}>()
+const { orders } = storeToRefs(ordersStore);
 
 watch(isInBufor, (val) => {
-  if(val && val == isOutOfBufor.value) {
-    isOutOfBufor.value = false;
+  if(val && val == isOutOfBuffer.value) {
+    isOutOfBuffer.value = false;
   }
 },{
   immediate: true
 });
 
-watch(isOutOfBufor, (val) => {
+watch(isOutOfBuffer, (val) => {
   if(val && val == isInBufor.value) {
     isInBufor.value = false;
   }
@@ -28,30 +28,16 @@ watch(isOutOfBufor, (val) => {
   immediate: true
 });
 
-function viewOrder(event: Event | undefined) {
-  let tempOrder = orders.value?.find(order => (order.MZN_UUID == event?.target?.name));
-  if (tempOrder == undefined) return;
-  emit('order', tempOrder);
-}
-
-async function fetchOrdersInBuffer() {
-  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia/bufor');
-  let ordersTemp : Array<Order> = await response.json();
-  orders.value = ordersTemp;
-}
-
-async function fetchOrdersOutOfBuffer() {
-  const response = await fetch('https://zamowienia.mleczarnia-kuzma.pl/api/zamowienia');
-  let ordersTemp : Array<Order> = await response.json();
-  orders.value = ordersTemp;
+function viewOrder(uuid : string) {
+  siteControlStore.viewOrder(uuid);
 }
 
 async function fetchOrders(event : Event) {
   event.preventDefault();
   if(isInBufor.value) {
-    fetchOrdersInBuffer();
-  } else if (isOutOfBufor.value) {
-    fetchOrdersOutOfBuffer();
+    orders.value = await ordersStore.fetchOrdersInBuffer();
+  } else if (isOutOfBuffer.value) {
+    orders.value = await ordersStore.fetchOrdersOutOfBuffer();
   }
 }
 
@@ -75,7 +61,7 @@ async function fetchOrders(event : Event) {
           <label class="label is-small">Zamówienie potwierdzone?</label>
           <div class="control">
             <label class="checkbox mr-5">
-              <input type="checkbox" v-model="isOutOfBufor"/>
+              <input type="checkbox" v-model="isOutOfBuffer"/>
               Tak
             </label>
             <label class="checkbox">
@@ -133,7 +119,7 @@ async function fetchOrders(event : Event) {
                      value="Nie"
                      readonly/>
             </div>
-            <button class="button is-primary is-small is-expanded" @click="viewOrder" :name="order.MZN_UUID">Podgląd</button>
+            <button class="button is-primary is-small is-expanded" @click="viewOrder(order.MZN_UUID)" :name="order.MZN_UUID">Podgląd</button>
           </div>
         </div>
       </div>

src/main.ts

@@ -8,10 +8,35 @@ import MainForm from '@/components/MainForm.vue';
 import OrdersSelector from '@/components/OrdersSelector.vue'
 import ConfirmedForm from '@/components/ConfirmedForm.vue'
 import LoadingComponent from '@/components/LoadingComponent.vue'
+import axios from 'axios'
+import LoginModal from '@/components/LoginModal.vue'
+import { createPinia } from 'pinia'
+import VueCookies from 'vue3-cookies'
+import { router } from '@/router/router'
+import { useSiteControlStore } from '@/stores/siteControl.store'
+import { useCategoriesStore } from '@/stores/categories.store'
+import { useOrdersStore } from '@/stores/orders.store'
+import { useContractorsStore } from '@/stores/contractors.store'
+
+const app = createApp(App);
+const pinia = createPinia();
+app.use(pinia);
+app.use(VueCookies);
+app.use(router);
+useOrdersStore();
+useContractorsStore();
+useCategoriesStore();
+useSiteControlStore();
+
+
+export const axiosInstance = axios.create({
+  baseURL: 'https://zamowienia.mleczarnia-kuzma.pl/api',
+  withCredentials: true
+});
 
-const app = createApp(App)
 app.component('VueDatePicker', VueDatePicker);
 app.component('ConfirmationModal', ConfirmationModal);
+app.component('LoginModal', LoginModal);
 app.component('NavBar', NavBar);
 app.component('MainForm', MainForm);
 app.component('OrdersSelector', OrdersSelector);
@@ -56,7 +81,7 @@ export interface Contractor {
   Knt_Nazwa1: string,
   Knt_Nazwa2: string,
   Knt_Nazwa3: string,
-  Knt_Niekatywny: number,
+  Knt_Nieaktywny: number,
   Knt_NipE: string,
   Knt_NrDomu: string,
   Knt_OpiekunId: number,

src/router/router.ts

@@ -0,0 +1,22 @@
+import { createRouter, createWebHistory } from 'vue-router';
+
+import { MainView, LoginView } from '@/views';
+
+export const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  linkActiveClass: 'active',
+  routes: [
+    { path: '/', component: MainView },
+    { path: '/login', component: LoginView }
+  ]
+});
+
+router.beforeEach(async (to) => {
+  // redirect to login page if not logged in and trying to access a restricted page
+  const publicPages = ['/login'];
+  const authRequired = !publicPages.includes(to.path);
+  //
+  // if (authRequired) {
+  //   return '/login';
+  // }
+});

src/stores/categories.store.ts

@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia'
+import type { Category } from '@/main'
+import { ref } from 'vue'
+import { axiosInstance } from '@/main'
+
+export const useCategoriesStore = defineStore('categories', () => {
+  const categories = ref<Array<Category>>([]);
+
+  async function fetchCategories() {
+    const response = await axiosInstance.get('/towary', {withCredentials: true});
+    categories.value = response.data;
+
+    if(categories.value != undefined) {
+      for (const category of categories.value) {
+        for (const product of category.Towary) {
+          product.Options = new Array(product.Twr_JM);
+          product.ChosenOption = product.Twr_JM;
+          if (product.Twr_JMZ != null) {
+            product.Options.push(product.Twr_JMZ);
+          }
+        }
+      }
+    }
+  }
+
+  return {categories, fetchCategories}
+})

src/stores/contractors.store.ts

@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia'
+import type { Contractor } from '@/main'
+import { ref } from 'vue'
+import { axiosInstance } from '@/main'
+
+
+export const useContractorsStore = defineStore('contractors', () => {
+  const contractors = ref<Array<Contractor>>([]);
+  contractors.value=[];
+  const contractor = ref<Contractor>();
+
+  async function fetchContractors() {
+    const response = await axiosInstance.get('/kontrahenci', {withCredentials: true});
+    console.log(response);
+    console.log(contractors.value);
+    contractors.value = [];
+    contractors.value.push(...response.data);
+  }
+
+  return {contractors, contractor, fetchContractors}
+})

src/stores/orders.store.ts

@@ -0,0 +1,71 @@
+import { defineStore } from 'pinia'
+import type { Category, Contractor, Order } from '@/main'
+import { type Ref, ref } from 'vue'
+import { axiosInstance } from '@/main'
+
+export const useOrdersStore = defineStore('orders', () => {
+  const orders = ref<Array<Order>>([]);
+  const order = ref<Order>();
+  const uuid = ref<string>();
+  const deliveryDate = ref<Date>();
+  const orderDate = ref<Date>();
+
+  async function fetchOrders() {
+    orders.value=[];
+    let ordersTemp : Array<Order> = await fetchOrdersInBuffer();
+    orders.value.push(...ordersTemp);
+    ordersTemp = await fetchOrdersOutOfBuffer();
+    orders.value.push(...ordersTemp);
+  }
+
+  async function fetchOrdersOutOfBuffer() : Promise<Array<Order>> {
+    const response = await axiosInstance.get('/zamowienia', {withCredentials: true});
+    const ordersTemp : Array<Order> = response.data;
+    return ordersTemp;
+  }
+
+  async function fetchOrdersInBuffer() : Promise<Array<Order>> {
+    const response = await axiosInstance.get('/zamowienia/bufor', {withCredentials: true});
+    const ordersTemp : Array<Order> = response.data;
+    return ordersTemp;
+  }
+
+  async function fetchOrder(uuid : string) {
+
+  }
+
+  async function loadOrder(uuidString: string, confirmed: boolean, contractor: Ref<Contractor|undefined>, contractors: Ref<Array<Contractor>>, categories: Ref<Array<Category>>) {
+    const response = await axiosInstance.get('/zamowienie/' + uuidString);
+    const tempOrder = response.data;
+
+    console.log(tempOrder);
+
+    if(confirmed) {
+      tempOrder.MZN_Bufor = 0;
+    }
+
+    contractor.value = <Contractor>contractors.value?.find((contractor) => contractor.Knt_KntId == tempOrder.MZN_PodID);
+    deliveryDate.value = new Date(tempOrder.MZN_DataDos);
+    orderDate.value = new Date(tempOrder.MZN_DataZam);
+    uuid.value = uuidString;
+    order.value = tempOrder;
+
+    if(categories.value == undefined) {
+      return;
+    }
+
+    for(const orderProduct of tempOrder.MZamElem){
+      for(const category of categories.value) {
+        const product = category.Towary.find(product => (product.Twr_TwrId == orderProduct.MZE_TwrId));
+        if(product != undefined && orderProduct.MZE_TwrCena != null) {
+          product.Twr_Cena = orderProduct.MZE_TwrCena.slice(0, -2);
+          product.Quantity = orderProduct.MZE_TwrIlosc.slice(0, -2);
+          category.isVisible = true;
+          break;
+        }
+      }
+    }
+  }
+
+  return {orders, order, uuid, deliveryDate, orderDate, fetchOrders, fetchOrdersInBuffer, fetchOrdersOutOfBuffer, loadOrder}
+})

src/stores/siteControl.store.ts

@@ -0,0 +1,55 @@
+import { defineStore, storeToRefs } from 'pinia'
+import { ref } from 'vue'
+import { useOrdersStore } from '@/stores/orders.store'
+import type { Order } from '@/main'
+import { useContractorsStore } from '@/stores/contractors.store'
+import { useCategoriesStore } from '@/stores/categories.store'
+
+export const useSiteControlStore = defineStore('siteControl', () => {
+  const isForm = ref<boolean>(true);
+  const isOrders = ref<boolean>(false);
+  const showConfirmationModal = ref<boolean>(false);
+  const isDarkTheme = ref<boolean>(false);
+  const isLoading = ref<boolean>(true);
+
+  function switchToFrom() {
+    if(!isForm.value) {
+      isForm.value = true;
+      isOrders.value = false;
+    }
+  }
+
+  async function switchToOrders() {
+    if(!isOrders.value) {
+      const orderStore = useOrdersStore();
+      const { orders } = storeToRefs(orderStore);
+      isLoading.value = true;
+      isForm.value = false;
+      isOrders.value = true;
+      orders.value = new Array<Order>();
+      orders.value.push(... await orderStore.fetchOrdersInBuffer());
+      orders.value.push(... await orderStore.fetchOrdersOutOfBuffer());
+      isLoading.value = false;
+    }
+  }
+
+  function checkTheme() {
+    isDarkTheme.value = !!window?.matchMedia?.('(prefers-color-scheme:dark)')?.matches;
+  }
+
+  async function viewOrder(uuid : string) {
+    const orderStore = useOrdersStore();
+    const contractorsStore = useContractorsStore();
+    const categoriesStore = useCategoriesStore();
+    isForm.value = true;
+    isOrders.value = false;
+    isLoading.value = true;
+    window.scrollTo(0, 0);
+    const { contractor, contractors } = storeToRefs(contractorsStore);
+    const { categories } = storeToRefs(categoriesStore);
+    await orderStore.loadOrder(uuid, false, contractor, contractors, categories);
+    isLoading.value=false;
+  }
+
+  return {isForm, isOrders, isLoading, showConfirmationModal, isDarkTheme, switchToFrom, switchToOrders, checkTheme, viewOrder};
+})

src/views/LoginView.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { Form, Field } from 'vee-validate';
+import * as Yup from 'yup';
+
+const schema = Yup.object().shape({
+  username: Yup.string().required('Username is required'),
+  password: Yup.string().required('Password is required')
+});
+
+function onSubmit(values : any) {
+  const { username, password } = values;
+
+}
+</script>
+
+<template>
+  <div>
+    <div class="alert alert-info">
+      Username: test<br />
+      Password: test
+    </div>
+    <h2>Login</h2>
+    <Form @submit="onSubmit" :validation-schema="schema" v-slot="{ errors, isSubmitting }">
+      <div class="form-group">
+        <label>Username</label>
+        <Field name="username" type="text" class="form-control" :class="{ 'is-invalid': errors.username }" />
+        <div class="invalid-feedback">{{errors.username}}</div>
+      </div>
+      <div class="form-group">
+        <label>Password</label>
+        <Field name="password" type="password" class="form-control" :class="{ 'is-invalid': errors.password }" />
+        <div class="invalid-feedback">{{errors.password}}</div>
+      </div>
+      <div class="form-group">
+        <button class="btn btn-primary" :disabled="isSubmitting">
+          <span v-show="isSubmitting" class="spinner-border spinner-border-sm mr-1"></span>
+          Login
+        </button>
+      </div>
+      <div v-if="errors.apiError" class="alert alert-danger mt-3 mb-0">{{errors.apiError}}</div>
+    </Form>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/MainView.vue

@@ -0,0 +1,77 @@
+<template>
+  <NavBar/>
+
+  <div v-if="isLoading">
+    <LoadingComponent/>
+  </div>
+  <div v-else>
+    <div v-if="isForm">
+      <MainForm
+        v-if="order == undefined || order.MZN_Bufor==1"
+      />
+      <ConfirmedForm v-else-if="order.MZN_Bufor==0"/>
+    </div>
+    <OrdersSelector class="box is-shadowless" v-else-if="isOrders"
+    />
+  </div>
+  <ConfirmationModal v-show="showConfirmationModal" @close="showConfirmationModal = false" @confirm="closeConfirmationModal" :order-uuid="uuid"></ConfirmationModal>
+</template>
+
+<script setup lang="ts">
+import '@/assets/base.css'
+import { useContractorsStore } from '@/stores/contractors.store'
+import { storeToRefs } from 'pinia'
+import { useCategoriesStore } from '@/stores/categories.store'
+import { useOrdersStore } from '@/stores/orders.store'
+import { useSiteControlStore } from '@/stores/siteControl.store'
+
+const contractorsStore = useContractorsStore();
+const categoriesStore = useCategoriesStore();
+const ordersStore = useOrdersStore();
+const siteControlStore = useSiteControlStore();
+const contractors = storeToRefs(contractorsStore).contractors;
+const contractor = storeToRefs(contractorsStore).contractor;
+const categories = storeToRefs(categoriesStore).categories;
+
+const { uuid, order } = storeToRefs(ordersStore);
+
+const { isForm, isOrders, showConfirmationModal, isLoading } = storeToRefs(siteControlStore);
+
+async function  fetchData() {
+  await categoriesStore.fetchCategories();
+  await contractorsStore.fetchContractors();
+  isLoading.value = false;
+}
+
+function closeConfirmationModal() {
+  showConfirmationModal.value = false;
+  if (uuid.value != undefined) {
+    isLoading.value = true;
+    ordersStore.loadOrder(uuid.value, true, contractor, contractors, categories);
+  }
+}
+
+siteControlStore.checkTheme();
+fetchData();
+</script>
+
+<style>
+@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;
+}
+
+body {
+  min-height: 100vh;
+}
+</style>

src/views/index.ts

@@ -0,0 +1,2 @@
+export { default as LoginView } from "./LoginView.vue";
+export { default as MainView } from "./MainView.vue";