Whole site refactor. Added pinia stores and authentication capability.

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>