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

View File

@@ -1,12 +1,12 @@
<template>
<Header/>
<Header />
<div class="flex">
<div class="">
<SideBar/>
<SideBar />
</div>
<div class=" w-full px-10">
<div class="text-sm breadcrumbs">
<div class="text-sm breadcrumbs mb-10">
<ul>
<li>
<router-link :to="{ name: 'home' }">
@@ -22,7 +22,7 @@
</div>
<div class="grid grid-cols-1 rounded-md pb-5">
<div class="text-[24px]">
<div class="text-2xl border-b-2 border-gray-500 mb-10">
View Oil Order # {{ deliveryOrder.id }}
</div>
<div class="grid grid-cols-12">
@@ -30,16 +30,16 @@
<div class="col-span-12 font-bold">
Customer
</div>
<div class="col-span-6 bg-neutral p-5">
<div class="col-span-6 p-5 text-gray-500 text-sm">
<div class="grid grid-cols-12">
<div class="col-span-12 font-bold flex mb-10 ">
{{ customer.account_number }}
<div class="col-span-12 flex ">
{{ customer.account_number }}
</div>
<div class="col-span-12 font-bold flex">
<div class="col-span-12 flex">
{{ customer.customer_first_name }}
{{ customer.customer_last_name }}
</div>
<div class="col-span-12 font-bold flex">
<div class="col-span-12 flex ">
<div class="pr-2">
{{ customer.customer_town }},
</div>
@@ -58,10 +58,10 @@
</div>
</div>
<div class="col-span-12 font-bold flex" v-if="customer.customer_apt !== 'None'">
<div class="col-span-12 flex" v-if="customer.customer_apt !== 'None'">
{{ customer.customer_apt }}
</div>
<div class="col-span-12 font-bold flex">
<div class="col-span-12 flex">
<div v-if="customer.customer_home_type == 0">Residential</div>
<div v-else-if="customer.customer_home_type == 1">apartment</div>
<div v-else-if="customer.customer_home_type == 2">condo</div>
@@ -70,7 +70,7 @@
<div v-else-if="customer.customer_home_type == 5">construction</div>
<div v-else-if="customer.customer_home_type == 6">container</div>
</div>
<div class="col-span-12 font-bold flex">
<div class="col-span-12 flex">
{{ customer.customer_phone_number }}
</div>
</div>
@@ -78,9 +78,9 @@
</div>
<div class="col-span-6 ">
<div class="flex justify-end" v-if="deliveryOrder.id ">
<div class="flex justify-end" v-if="deliveryOrder.id">
<router-link :to="{ name: 'deliveryEdit', params: { id: deliveryOrder.id } }">
<button class="btn btn-accent">Edit Order</button>
<button class="btn btn-accent btn-sm">Edit Order</button>
</router-link>
</div>
</div>
@@ -93,66 +93,72 @@
<div class="col-span-12 font-bold">
Delivery Status
</div>
<div class="grid grid-cols-12 bg-neutral p-5">
<div class="grid grid-cols-12 p-5">
<div class="col-span-12 font-bold">
Status
</div>
<div class="col-span-12">
<div v-if="deliveryOrder.delivery_status == 0">waiting</div>
<div v-else-if="deliveryOrder.delivery_status == 1">delivered</div>
<div class="col-span-12 text-sm mb-5 text-gray-500">
<div v-if="deliveryOrder.delivery_status == 0">waiting</div>
<div v-else-if="deliveryOrder.delivery_status == 1">delivered</div>
<div v-else-if="deliveryOrder.delivery_status == 2">Out for Delivery</div>
<div v-else-if="deliveryOrder.delivery_status == 3">Cancelled</div>
<div v-else-if="deliveryOrder.delivery_status == 4">Partial Delivery</div>
<div v-else-if="deliveryOrder.delivery_status == 5">misdelivery</div>
<div v-else-if="deliveryOrder.delivery_status == 6">unknown</div>
<div v-else-if="deliveryOrder.delivery_status == 3">Cancelled</div>
<div v-else-if="deliveryOrder.delivery_status == 4">Partial Delivery</div>
<div v-else-if="deliveryOrder.delivery_status == 5">misdelivery</div>
<div v-else-if="deliveryOrder.delivery_status == 6">unknown</div>
<div v-else></div>
</div>
<div class="col-span-12 font-bold mt-10">
<div class="col-span-12 font-bold ">
Scheduled date/time
</div>
<div class="col-span-12 ">
<div class="col-span-12 mb-5 text-sm text-gray-500">
{{ deliveryOrder.expected_delivery_date }}
</div>
<div class="col-span-12 font-bold mt-10">
<div class="col-span-12 font-bold">
When Called
</div>
<div class="col-span-12 ">
<div class="col-span-12 mb-5 text-sm text-gray-500">
{{ format_date(deliveryOrder.when_ordered) }}
</div>
<div class="col-span-12 font-bold mt-10">
<!-- Driver Name -->
<div class="col-span-12 font-bold ">
Driver:
</div>
<div class="col-span-12 ">
<div class="col-span-12 text-gray-500">
{{ deliveryOrder.driver_first_name }} {{ deliveryOrder.driver_last_name }}
</div>
</div>
</div>
<div class="col-span-6 mt-5">
<div class="col-span-6">
<div class="col-span-12 font-bold">
Amount
</div>
<div class="grid grid-cols-12 bg-neutral p-5">
<div class="col-span-12 font-bold">
<div v-if="deliveryOrder.customer_asked_for_fill==1">Fill</div>
<div v-else>{{ deliveryOrder.gallons_ordered }}</div>
<div class="grid grid-cols-12 p-5">
<div class="col-span-12 text-sm text-gray-500">
<div v-if="deliveryOrder.customer_asked_for_fill == 1">FILL</div>
<div v-else>{{ deliveryOrder.gallons_ordered }} gallons</div>
</div>
</div>
</div>
<div class="col-span-6 mt-5">
<div class="col-span-6 ">
<div class="col-span-12 font-bold">
Payment
</div>
<div class="grid grid-cols-12 bg-neutral p-5">
<div class="col-span-12 font-bold">
<div v-if="deliveryOrder.payment_type==0">Cash</div>
<div v-else-if="deliveryOrder.payment_type==1">Credit Card</div>
<div v-else-if="deliveryOrder.payment_type==2">Credit Card & cash</div>
<div class="grid grid-cols-12 p-5">
<div class="col-span-12 text-sm">
<div v-if="deliveryOrder.payment_type == 0">Cash</div>
<div v-else-if="deliveryOrder.payment_type == 1">Credit Card</div>
<div v-else-if="deliveryOrder.payment_type == 2">Credit Card & cash</div>
<div v-else>No Payment Type Added</div>
</div>
<div class="col-span-12" v-if="deliveryOrder.payment_type==1">
<div class="col-span-12" v-if="deliveryOrder.payment_type == 1">
<div class="flex">
<div class="basis-1/3 p-2">
<div class="bg-neutral rounded-md border-2 ">
@@ -173,7 +179,7 @@
</div>
</div>
<div class="col-span-12" v-if="deliveryOrder.payment_type==2">
<div class="col-span-12" v-if="deliveryOrder.payment_type == 2">
<div class="flex">
<div class="basis-1/3 p-2">
<div class="bg-neutral rounded-md border-2 ">
@@ -200,20 +206,20 @@
<div class="col-span-12 font-bold">
Info
</div>
<div class="grid grid-cols-12 bg-neutral p-5">
<div class="col-span-12 font-bold">
<div v-if="deliveryOrder.prime==1">
<div class="grid grid-cols-12 p-5">
<div class="col-span-12 text-gray-500">
<div v-if="deliveryOrder.prime == 1">
Prime Required: Yes
</div>
<div v-if="deliveryOrder.prime==0">
<div v-if="deliveryOrder.prime == 0">
Prime Required: No
</div>
</div>
<div class="col-span-12 font-bold">
<div v-if="deliveryOrder.same_day==1">
<div class="col-span-12 text-gray-500">
<div v-if="deliveryOrder.same_day == 1">
Same Day: Yes
</div>
<div v-if="deliveryOrder.same_day==0">
<div v-if="deliveryOrder.same_day == 0">
Same Day: No
</div>
</div>
@@ -223,11 +229,9 @@
<div class="col-span-12 font-bold">
Notes
</div>
<div class="grid grid-cols-12 bg-neutral p-5">
<div class="col-span-12 font-bold">
<div v-if="deliveryOrder.dispatcher_notes!='None'">
{{ deliveryOrder.dispatcher_notes }}
</div>
<div class="grid grid-cols-12 p-5">
<div class="col-span-12 text-gray-500">
{{ deliveryOrder.dispatcher_notes }}
</div>
</div>
</div>
@@ -235,19 +239,19 @@
</div>
</div>
<Footer/>
<Footer />
</template>
<script lang="ts">
import {defineComponent} from 'vue'
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 { notify } from "@kyvg/vue3-notification"
import moment from 'moment';
export default defineComponent({
@@ -353,11 +357,11 @@ export default defineComponent({
},
methods: {
format_date(value: string){
if (value) {
return moment(String(value)).format('LLLL')
}
},
format_date(value: string) {
if (value) {
return moment(String(value)).format('LLLL')
}
},
userStatus() {
let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
@@ -367,12 +371,12 @@ export default defineComponent({
withCredentials: true,
headers: authHeader(),
})
.then((response: any) => {
if (response.data.ok) {
this.user = response.data.user;
this.user.id = response.data.user_id;
}
})
.then((response: any) => {
if (response.data.ok) {
this.user = response.data.user;
this.user.id = response.data.user_id;
}
})
},
getCustomer(user_id: any) {
let path = import.meta.env.VITE_BASE_URL + "/customer/" + user_id;
@@ -381,16 +385,16 @@ export default defineComponent({
url: path,
withCredentials: true,
})
.then((response: any) => {
this.customer = response.data;
})
.catch(() => {
notify({
title: "Error",
text: "Could not find customer",
type: "error",
});
.then((response: any) => {
this.customer = response.data;
})
.catch(() => {
notify({
title: "Error",
text: "Could not find customer",
type: "error",
});
});
},
getPaymentCard(card_id: any) {
@@ -400,11 +404,11 @@ export default defineComponent({
url: path,
withCredentials: true,
})
.then((response: any) => {
this.userCard = response.data;
})
.catch(() => {
});
.then((response: any) => {
this.userCard = response.data;
})
.catch(() => {
});
},
getOilOrder(delivery_id: any) {
@@ -415,15 +419,15 @@ export default defineComponent({
withCredentials: true,
headers: authHeader(),
})
.then((response: any) => {
if (response.data) {
this.deliveryOrder = response.data
this.getCustomer(this.deliveryOrder.customer_id)
if (this.deliveryOrder.payment_type == 1) {
this.getPaymentCard(this.deliveryOrder.payment_card_id);
}
.then((response: any) => {
if (response.data) {
this.deliveryOrder = response.data
this.getCustomer(this.deliveryOrder.customer_id)
if (this.deliveryOrder.payment_type == 1) {
this.getPaymentCard(this.deliveryOrder.payment_card_id);
}
})
}
})
},
getOilOrderMoney(delivery_id: any) {
let path = import.meta.env.VITE_BASE_URL + "/delivery/order/money/" + delivery_id;
@@ -433,11 +437,11 @@ export default defineComponent({
withCredentials: true,
headers: authHeader(),
})
.then((response: any) => {
if (response.data) {
this.deliveryMoney = response.data
}
})
.then((response: any) => {
if (response.data) {
this.deliveryMoney = response.data
}
})
},
},
})