first commit
This commit is contained in:
222
src/pages/Index.vue
Normal file
222
src/pages/Index.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<Header/>
|
||||
<div class="flex">
|
||||
<div class="">
|
||||
<SideBar/>
|
||||
</div>
|
||||
<div class=" w-full px-10 ">
|
||||
<div class="text-sm breadcrumbs">
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
Home
|
||||
</router-link>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex text-2xl mb-5">
|
||||
Welcome {{ employee.employee_first_name }} {{ employee.employee_last_name }}!
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12 gap-5">
|
||||
<div class="col-span-12 bg-neutral ">
|
||||
<div class="grid grid-cols-12 p-5">
|
||||
<div class="col-span-12 font-bold text-xl">Todays stats</div>
|
||||
<div class="col-span-6 py-2"> Total Deliveries: {{delivery_count}}</div>
|
||||
<div class="col-span-6 py-2"> Total Service Calls: {{service_count}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 bg-neutral" >
|
||||
<div class="grid grid-cols-12 p-5 ">
|
||||
<div class="col-span-12 font-bold text-xl">Todays Oil Price</div>
|
||||
<div class="col-span-12 py-2"> Price / Gallon: {{today_oil_price}}</div>
|
||||
<div class="col-span-12 py-2"> Same Day: ${{same_day}}</div>
|
||||
<div class="col-span-12 py-2"> Prime: ${{prime}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6 bg-neutral" >
|
||||
<div class="grid grid-cols-12 p-5 ">
|
||||
<div class="col-span-12 font-bold text-xl">Todays Service Price</div>
|
||||
<div class="col-span-12 py-2"> Price / hour: ${{price_hourly}}</div>
|
||||
<div class="col-span-12 py-2"> Emergency Fee: ${{emergency_fee}}</div>
|
||||
<div class="col-span-12 py-2"> Emergency Price / hour: ${{emergency_rate}}</div>
|
||||
|
||||
<div class="col-span-12 py-2"> Cleaning ${{cleaning}}</div>
|
||||
<div class="col-span-12 py-2"> Out of Oil: ${{out_of_oil}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<Footer/>
|
||||
</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'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Home',
|
||||
|
||||
components: {
|
||||
Header,
|
||||
SideBar,
|
||||
Footer,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
token: null,
|
||||
delivery_count: 0,
|
||||
service_count: 0,
|
||||
today_oil_price: '',
|
||||
|
||||
same_day: '',
|
||||
price_hourly: '',
|
||||
emergency_fee: '',
|
||||
emergency_rate: '',
|
||||
prime: '',
|
||||
cleaning: '',
|
||||
out_of_oil: '',
|
||||
|
||||
user: {
|
||||
user_id: 0,
|
||||
user_name: '',
|
||||
},
|
||||
employee: {
|
||||
id: '',
|
||||
user_id: '',
|
||||
employee_last_name: "",
|
||||
employee_first_name: "",
|
||||
employee_town: "",
|
||||
employee_address: "",
|
||||
employee_apt: "",
|
||||
employee_zip: "",
|
||||
employee_birthday: "",
|
||||
employee_phone_number: "",
|
||||
employee_start_date: "",
|
||||
employee_end_date: "",
|
||||
employee_type: '',
|
||||
employee_state: '',
|
||||
},
|
||||
loaded: false,
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.userStatus()
|
||||
this.today_delivery_count()
|
||||
this.today_service_count()
|
||||
this.today_price_oil()
|
||||
this.today_price_service()
|
||||
},
|
||||
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;
|
||||
this.employeeStatus()
|
||||
} else {
|
||||
|
||||
localStorage.removeItem('user');
|
||||
this.$router.push('/login');
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
employeeStatus() {
|
||||
let path = import.meta.env.VITE_BASE_URL + '/employee/userid/' + this.user.user_id;
|
||||
axios({
|
||||
method: "get",
|
||||
url: path,
|
||||
withCredentials: true,
|
||||
headers: authHeader(),
|
||||
})
|
||||
.then((response: any) => {
|
||||
this.employee = response.data;
|
||||
this.loaded = true;
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
today_delivery_count() {
|
||||
let path = import.meta.env.VITE_BASE_URL + '/stats/delivery/count/today'
|
||||
axios({
|
||||
method: "get",
|
||||
url: path,
|
||||
withCredentials: true,
|
||||
headers: authHeader(),
|
||||
})
|
||||
.then((response: any) => {
|
||||
this.delivery_count = response.data.data;
|
||||
})
|
||||
},
|
||||
today_service_count() {
|
||||
let path = import.meta.env.VITE_BASE_URL + '/stats/service/count/today'
|
||||
axios({
|
||||
method: "get",
|
||||
url: path,
|
||||
withCredentials: true,
|
||||
headers: authHeader(),
|
||||
})
|
||||
.then((response: any) => {
|
||||
this.service_count = response.data.data;
|
||||
})
|
||||
},
|
||||
today_price_oil() {
|
||||
let path = import.meta.env.VITE_BASE_URL + '/info/price/oil'
|
||||
axios({
|
||||
method: "get",
|
||||
url: path,
|
||||
withCredentials: true,
|
||||
headers: authHeader(),
|
||||
})
|
||||
.then((response: any) => {
|
||||
this.today_oil_price = response.data.price;
|
||||
})
|
||||
},
|
||||
today_price_service() {
|
||||
let path = import.meta.env.VITE_BASE_URL + '/info/price/service'
|
||||
axios({
|
||||
method: "get",
|
||||
url: path,
|
||||
withCredentials: true,
|
||||
headers: authHeader(),
|
||||
})
|
||||
.then((response: any) => {
|
||||
this.same_day = response.data.same_day;
|
||||
this.price_hourly = response.data.price_hourly;
|
||||
this.emergency_fee = response.data.emergency_fee;
|
||||
this.emergency_rate = response.data.emergency_rate;
|
||||
this.prime = response.data.prime;
|
||||
this.cleaning = response.data.cleaning;
|
||||
this.out_of_oil = response.data.out_of_oil;
|
||||
})
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
Reference in New Issue
Block a user