Initial commit
This commit is contained in:
260
src/App.vue
Normal file
260
src/App.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<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="switchToFrom">
|
||||
Formularz
|
||||
</a>
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<select v-model="contractor" class="is-expanded">
|
||||
<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">
|
||||
<input class="input is-small" type="text" placeholder="MM/DD/YYYY" v-model="deliveryDate"/>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<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="number" 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" @click="createJSON">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
<div v-else-if="isOrders" style="height: calc(100vh - 3.5rem);">
|
||||
<form class="box" style="height: calc(100vh - 3.5rem);">
|
||||
<div class="mb-3" style="height: max-content;">
|
||||
<div class="box">
|
||||
<h1 class="is-large mb-3"><b>ZAMÓWIENIA</b></h1>
|
||||
<div class="field mb-5">
|
||||
<label class="label is-small">Zamówienia do edycji</label>
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="select is-small is-expanded">
|
||||
<select v-model="contractor" class="is-expanded">
|
||||
<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>
|
||||
<button class="button is-primary is-small is-expanded" @click="createJSON">Podgląd</button>
|
||||
<button class="button is-primary is-small is-expanded" @click="createJSON">Edycja</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field mb-5">
|
||||
<label class="label is-small">Zamówienia do podglądu</label>
|
||||
<div class="field is-grouped is-grouped-multiline">
|
||||
<div class="select is-small is-expanded">
|
||||
<select v-model="contractor" class="is-expanded">
|
||||
<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>
|
||||
<button class="button is-primary is-small is-expanded" @click="createJSON">Podgląd</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import './assets/style.scss'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
contractors: [],
|
||||
contractor: {},
|
||||
wares: [],
|
||||
orders: [],
|
||||
order: {},
|
||||
deliveryDate: "01/01/2024",
|
||||
uuid: null,
|
||||
activator: false,
|
||||
isForm: true,
|
||||
isOrders: 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
let date = Date.parse(this.deliveryDate);
|
||||
},
|
||||
createJSON(event: Event) {
|
||||
event.preventDefault();
|
||||
console.log(this.contractor);
|
||||
const json = {
|
||||
MZN_UUID: this.uuid,
|
||||
MZN_DataZam: Date.parse(this.deliveryDate),
|
||||
MZN_DataDos: Date.now(),
|
||||
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,
|
||||
MZN_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)
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetchData()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
.select, .select select {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user