0👍
✅
I will give you only a guide. This is just a "pseudo code" I did not check it.
Firstly, you need to create a component to render only one row of your sheet. Something like:
<template>
<div>
<strong>{{date}}</strong>
<div v-for="(hour, index) in hours" :key="index" >
<input type="text" v-model.number="hour.value">
</div>
<input type="text" :value="total">
</div>
</template>
<script>
export default{
name: 'ActiveHoursRow'
props:['date','hours'],
computed:{
total(){
return this.hours.reduce((a, v) => a + v);
}
}
}
</script>
Secondly, you need to create a component that renders the whole sheet with the help of row-rendering component.
<template>
<div v-for="(row, index) in backendData">
<ActiveHoursRow :date="row.date" :hours="row.hours" />
</div>
</template>
<script>
export default{
name: 'ActiveHoursRow'
data: function(){
return {
"backendData":[
@foreach($dates as $date)
{
"date":"{{$date->date}}",
"hours": [
@if(empty($analysis->act1))
@else
{"name":"12_07_2019_act1", "value": 0},
@endif
@if(empty($analysis->act2))
@else
{"name":"12_07_2019_act2", "value": 0},
@endif
]
},
@endforeach
]
}
}
}
</script>
It also always better to draw data as JSON in and then use it. It is more clear to understand and later you can easily to switch to dynamic loading.
See more about components: https://v2.vuejs.org/v2/guide/components.html
0👍
thanks for the help, but I decided to use Jquery as shown below.
$(document).on(“keyup change paste”, “td > input.auto-calc”, function() {
row = $(this).closest("tr");
h = parseFloat(row.find("td input.hour").val()) || 0;
h1 = parseFloat(row.find("td input.hour1").val()) || 0;
h2 = parseFloat(row.find("td input.hour2").val()) || 0;
h3 = parseFloat(row.find("td input.hour3").val()) || 0;
h4 = parseFloat(row.find("td input.hour4").val()) || 0;
h5 = parseFloat(row.find("td input.hour5").val()) || 0;
row.find(".total_hours").val(h + h1 + h2 + h3 + h4 + h5);
var sum = 0;
var sum1 = 0;
var sum2 = 0;
var sum3 = 0;
var sum4 = 0;
var sum5 = 0;
var sum6 = 0;
$("input.total_hours").each(function() {
sum += +$(this).val();
});
$("input.hour").each(function() {
sum1 += +$(this).val();
});
$("input.hour1").each(function() {
sum2 += +$(this).val();
});
$("input.hour2").each(function() {
sum3 += +$(this).val();
});
$("input.hour3").each(function() {
sum4 += +$(this).val();
});
$("input.hour4").each(function() {
sum5 += +$(this).val();
});
$("input.hour5").each(function() {
sum5 += +$(this).val();
});
$("#total-month").text(sum);
$("#total-hour").text(sum1);
$("#total-hour1").text(sum2);
$("#total-hour2").text(sum3);
$("#total-hour3").text(sum4);
$("#total-hour4").text(sum5);
$("#total-hour5").text(sum6);
});
var i = 0;
$('.addy').on('click', function () {
++i;
addy();
});
function addy(){
var tr='<tr>'
+'<td><input type="text" name="timesheets['+i+'][date]" id="date[]" class="form-control " data-provide="datepicker" autocomplete="off"><input type="hidden" id="analysis_id" name="timesheets['+i+'][analysis_id]" value="{{$analysis->analysisid}}">'
+'<input type="hidden" id="activity_id5" name="timesheets['+i+'][activity_id5]" value="{{@$tact6->activity_id5}}"><input type="hidden" id="activity_id4" name="timesheets['+i+'][activity_id4]" value="{{@$tact5->activity_id4}}"><input type="hidden" id="activity_id3" name="timesheets['+i+'][activity_id3]" value="{{@$tact4->activity_id3}}"><input type="hidden" id="activity_id2" name="timesheets['+i+'][activity_id2]" value="{{@$tact3->activity_id2}}"><input type="hidden" id="activity_id1" name="timesheets['+i+'][activity_id1]" value="{{@$tact2->activity_id1}}"><input type="hidden" id="activity_id" name="timesheets['+i+'][activity_id]" value="{{@$tact1->activity_id}}"></td>'
+'<td><input type="text" name="timesheets['+i+'][hour]" value="0" id="hour" class="form-control hour auto-calc"></div></td>'
+'@if(empty($analysis->act1)) @else <td><input type="number" name="timesheets['+i+'][hour1]" value="0" id="hour1" class="form-control hour1 auto-calc" min="0" max="8"></div></td>@endif'
+'@if(empty($analysis->act2)) @else <td><input type="number" name="timesheets['+i+'][hour2]" value="0" id="hour2" class="form-control hour2 auto-calc" min="0" max="8"></div></td>@endif'
+'@if(empty($analysis->act3)) @else <td><input type="number" name="timesheets['+i+'][hour3]" value="0" id="hour3" class="form-control hour3 auto-calc" min="0" max="8"></div></td>@endif'
+'@if(empty($analysis->act4)) @else <td><input type="number" name="timesheets['+i+'][hour4]" value="0" id="hour4" class="form-control hour4 auto-calc" min="0" max="8"></div></td>@endif'
+'@if(empty($analysis->act5)) @else <td><input type="number" name="timesheets['+i+'][hour5]" value="0" id="hour5" class="form-control hour5 auto-calc" min="0" max="8"></div></td>@endif'
+'<td><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-list-ol"></i></span></div><input type="text" name="timesheets['+i+'][total_hours]" id="total_hours" class="form-control total_hours" max="9" ></div><input type="hidden" id="approved" name="timesheets['+i+'][approved]" value="No"> <input type="hidden" id="approved_by" name="timesheets['+i+'][approved_by]" value="{{$approved->supervisor_id}}"></td>'
+'<td><button type="button" class="btn btn-danger remove">Remove</button></td>'
+'</tr>'
$('tbody').append(tr);
};
$('body').on('click','.remove', function () {
var last=$('tbody tr').length;
$(this).parent().parent().remove();
});
Source:stackexchange.com