@piljac1
<script setup>
import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
import Checkbox from '@/Components/Checkbox.vue';
import { createApp } from 'vue'
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';
import { defineComponent, ref } from 'vue';
import VueSelect from 'vue-next-select';
import 'vue-next-select/dist/index.min.css';
const app = createApp({})
app.component('vue-select', VueSelect)
defineProps({
form:useForm,
trains:Array,
trns:Array,
stations:Array,
station_distance1:Array,
drivers:Array,
rec:Number
});
let km=ref();
let fstation=ref([]);
let tstation=ref([]);
let total_liters;
function getDistance(index){
console.log(index);
console.log(tstation.value[index]);
let fst =fstation[index];
let tst =tstation[index];
axios.get('/station_distance/'+fst+'/'+tst).then((response) => {
console.log(response.data)
km.value=response.data;
})
return km.value;
}
</script>
<script>
export default {
data() {
return {
tableRows: [
{
"id": 1,
trainno: '',
driver: '',
from_station: '',
to_station: '',
trip_started: '',
trip_ended: '',
ltrs: '',
shunting: '',
load: '',
}
]
}
},
methods: {
insert_Row() {
this.tableRows.push(
{
"id": this.tableRows.length+1,
trainno: [],
driver: [],
from_station: [],
to_station: [],
trip_started: [],
trip_ended: [],
ltrs: [],
shunting: [],
load: [],
}
)
},
setLiters(dip,tank,index){
//if(tank != undefined) {
// this.tableRows[index].ltrs=q;
// }
},
deleteRow(index){
if(index>0)
this.tableRows.splice(index,1);
}
}
}
</script>
<style>
.tinput, .sinput {
width: 90%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/* fancy Button */
.fancy-button {
display: inline-block;
margin: 20px;
font-family: 'Heebo', Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 16px;
background:red;
}
</style>
<template >
<table style="margin: 0 auto; width:100%">
<thead>
<tr>
<th>Sr#</th>
<th>Train#</th>
<th>Driver</th>
<th>Fuel Received</th>
<th>From Station</th>
<th>To Station</th>
<th>KM</th>
<th>Trip Started</th>
<th>Trip Ended</th>
<th>Fuel Handed Over</th>
<th>Shunting</th>
<th>Load</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in tableRows" :key="item.id" style="width:1" >
<td>{{item.id}} </td>
<td v-if="item.id==1"><vue-select v-on:change="form.trainno = $event.target.value" v-model="form.trainno[index]" :options="trns" searchable close-on-select label-by="trainno" class="text-left h-10 sinput" search-placeholder="Search Train No" placeholder="Train No" track-by="trainno"></vue-select></td>
<td v-else><vue-select v-on:change="form.trainno = $event.target.value" v-model="form.trainno[index]" :options="trains" searchable close-on-select label-by="trainno" class="text-left h-10 " search-placeholder="Search Train No" placeholder="Train No" track-by="trainno"></vue-select></td>
<td><vue-select @input="form.driver[index] = $event.target.value" v-model="form.driver[index]" :options="drivers" searchable close-on-select label-by="name" class="text-left absolute h-10 " search-placeholder="Search drivers" placeholder="Driver" track-by="name"></vue-select></td>
<td v-if="item.id==1"><input type="number" disabled @input="form.rec[index] = $event.target.value" v-bind:value="rec" class="tinput" required></td>
<td v-else><input type="number" disabled @input="form.rec[index] = $event.target.value" v-bind:value="form.ltrs[index-1]" class="tinput" required></td>
<td><vue-select ref="fstation" v-model="form.from_station[index]" :options="station_distance1" searchable close-on-select label-by="station_code" class="text-left h-10 " search-placeholder="Search Station" placeholder="From Station" track-by="id"></vue-select></td>
<td><vue-select v-model="form.to_station[index]" :options="station_distance1" searchable close-on-select label-by="station_code" class="text-left h-10 " id="tstation" @update:modelValue="getDistance(index)" search-placeholder="Search Station" placeholder="To Station" ref="tstation" track-by="id"></vue-select></td>
<td><input type="number" v-model="item.km" @input="form.km[index] = $event.target.value" class="" required></td>
<td><input type="datetime-local" v-model="item.trip_started" @input="form.trip_started[index] = $event.target.value" class="tinput" required></td>
<td><input type="datetime-local" v-model="item.trip_ended" @input="form.trip_ended[index] = $event.target.value" class="tinput" required></td>
<!-- <td><input type="number" v-model="item.dip" @input="form.dip[index] = $event.target.value" class="tinput" @change="setLiters(form.dip[index],form.tankno[index],index)"></td>-->
<td><input type="number" v-model="item.ltrs" @input="form.ltrs[index] = $event.target.value" class="tinput"></td>
<td><input type="number" v-model="item.shunting" @input="form.shunting[index] = $event.target.value" class="tinput" ></td>
<td><input type="text" v-model="item.load" @input="form.load[index] = $event.target.value" class="tinput"></td>
<td v-if="index>0">
<a class="shadow-xl cursor-pointer text-white font-bold fancy-button py-2 px-4 rounded rounded-sm" @click="deleteRow(index)">Remove</a>
</td>
</tr>
</tbody>
</table>
<a class="shadow-xl cursor-pointer text-white font-bold fancy-button py-2 px-4 rounded rounded-sm" @click="insert_Row">Add Row</a>
</template>
