Updated looks

This commit is contained in:
2024-04-04 16:38:35 -04:00
parent 2d9fce2e89
commit 7164e41aa1
36 changed files with 2863 additions and 1567 deletions

231
src/pages/ticket/ticket.vue Normal file
View File

@@ -0,0 +1,231 @@
<template>
<div class=" absolute" id="page">
<div class="p-10 max-w-5xl bg-white text-black">
<div class="grid grid-cols-12">
<div class="col-span-9">
<div class="grid grid-cols-12 pb-10">
<div class="col-span-2">#2 Heating</div>
<div class="col-span-2"></div>
<div class="col-span-2">0</div>
<div class="col-span-2">275</div>
<div class="col-span-2">{{ customer.customer_phone_number }}</div>
</div>
<div class="grid grid-cols-12 pl-5 pb-10">
<div class="col-span-8">{{ customer.customer_first_name }} {{ customer.customer_last_name }}
</div>
<div class="col-span-4">{{ customer.account_number }}</div>
<div class="col-span-12">{{ customer.customer_address }} {{ customer.customer_apt }}</div>
<div class="col-span-3">
<div class="grid grid-cols-12">
<div class="col-span-5"> {{ customer.customer_town }}</div>
<div class="col-span-3">{{ customer.customer_state }}</div>
<div class="col-span-4"> {{ customer.customer_zip }}</div>
</div>
</div>
</div>
<div class="grid grid-cols-12 pl-5 pb-10">
<div class="col-span-12 pb-5">{{ delivery.dispatcher_notes }}</div>
<div class="col-span-12" v-if="delivery.payment_type == 0">CASH</div>
<div class="col-span-12" v-else-if="delivery.payment_type == 1">Credit Card</div>
<div class="col-span-12" v-else-if="delivery.payment_type == 2">Credit Card/Cash</div>
<div class="col-span-12" v-else></div>
</div>
<div class="grid grid-cols-12">
<div class="col-span-6 flex" v-for="past_delivery in past_deliveries">
<div>{{ past_delivery.when_delivered }} - {{ past_delivery.gallons_delivered }}</div>
</div>
</div>
</div>
<div class="col-span-3">
<div class="grid grid-cols-12">
<div class="col-span-12 h-7">{{ delivery.when_ordered }}</div>
<div class="col-span-12 h-7 ">{{ delivery.expected_delivery_date }}</div>
<div class="col-span-12 h-7 "></div>
<div class="col-span-12 h-7">{{ delivery.customer_price }}</div>
<div class="col-span-12 h-7">{{ delivery.when_ordered }}</div>
<div class="col-span-12 h-7"></div>
<div class="col-span-12 h-7"></div>
<div class="col-span-12 h-7 ">{{ delivery.driver_employee_id }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import axios from 'axios'
import authHeader from '../../services/auth.header'
import Header from '../../layouts/headers/headerauth.vue'
import SideBar from '../../layouts/sidebar/sidebar.vue'
import Footer from '../../layouts/footers/footer.vue'
import useValidate from "@vuelidate/core";
import { notify } from "@kyvg/vue3-notification"
import { minLength, required } from "@vuelidate/validators";
export default defineComponent({
name: 'Ticket',
components: {
Header,
SideBar,
Footer,
},
data() {
return {
v$: useValidate(),
loaded: false,
user: {
user_id: 0,
},
past_deliveries: [
{
gallons_delivered: 0,
when_delivered: '',
}
],
delivery: {
id: '',
customer_id: 0,
customer_name: '',
customer_address: '',
customer_town: '',
customer_state: 0,
customer_zip: '',
gallons_ordered: 0,
customer_asked_for_fill: 0,
gallons_delivered: '',
customer_filled: 0,
delivery_status: 0,
when_ordered: '',
when_delivered: '',
expected_delivery_date: '',
automatic: 0,
oil_id: 0,
supplier_price: '',
customer_price: '',
customer_temperature: '',
dispatcher_notes: '',
prime: 0,
same_day: 0,
payment_type: 0,
payment_card_id: 0,
driver_employee_id: 0,
driver_first_name: '',
driver_last_name: '',
},
customer: {
id: 0,
user_id: 0,
customer_first_name: '',
customer_last_name: '',
customer_town: '',
customer_address: '',
customer_state: 0,
customer_zip: '',
customer_apt: '',
customer_home_type: 0,
customer_phone_number: '',
account_number: '',
},
}
},
validations() {
return {
CreateOilOrderForm: {
basicInfo: {
gallons_ordered: { required, minLength: minLength(1) },
expected_delivery_date: { required },
},
},
};
},
created() {
this.userStatus()
},
watch: {
$route() {
},
},
mounted() {
this.getOilOrder(this.$route.params.id)
},
methods: {
userStatus() {
let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
axios({
method: 'get',
url: path,
withCredentials: true,
headers: authHeader(),
})
.then((response: any) => {
if (response.data.ok) {
this.user = response.data.user;
}
})
},
getOilOrder(delivery_id: any) {
let path = import.meta.env.VITE_BASE_URL + "/delivery/order/" + delivery_id;
axios({
method: "get",
url: path,
withCredentials: true,
})
.then((response: any) => {
this.delivery = response.data;
this.getCustomer(this.delivery.customer_id)
})
.catch(() => {
notify({
title: "Error",
text: "Could not get oil order",
type: "error",
});
});
},
getCustomer(userid: any) {
let path = import.meta.env.VITE_BASE_URL + '/customer/' + userid;
axios({
method: 'get',
url: path,
headers: authHeader(),
}).then((response: any) => {
this.customer = response.data
this.getPastDeliveries(this.customer.id)
})
},
getPastDeliveries(userid: any) {
let path = import.meta.env.VITE_BASE_URL + '/delivery/past/' + userid;
axios({
method: 'get',
url: path,
headers: authHeader(),
}).then((response: any) => {
this.past_deliveries = response.data
})
},
},
})
</script>
<style scoped></style>