Javascript DataTables警告：表（id）无法重新初始化DataTable。（在服务器上有错误，但在本地主机上没有）
我实现了表的创建（基于ODDataTables库）。奇怪的是，我在服务器端收到了DataTables警告：（table id=scoringtable I-无法在我的服务器上重新初始化DataTable），但在本地主机上一切正常。下面的文字是PrintScreen和我的源代码。有人知道哪里有问题吗 scoringDetailView.jsJavascript DataTables警告：表（id）无法重新初始化DataTable。（在服务器上有错误，但在本地主机上没有）,javascript,jquery,datatable,Javascript,Jquery,Datatable,我实现了表的创建（基于ODDataTables库）。奇怪的是，我在服务器端收到了DataTables警告：（table id=scoringtable I-无法在我的服务器上重新初始化DataTable），但在本地主机上一切正常。下面的文字是PrintScreen和我的源代码。有人知道哪里有问题吗 scoringDetailView.js /* timer to reinit datatable after it is properly loaded */ var reinitInterva
/*
timer to reinit datatable after it is properly loaded
*/
var reinitInterval;
var scoreDown = false;
const scaleHeight = 20; // Height of the canvases on which to draw the score scales
const sliderHeight = 15; // Height of the slider controlling the scores
$(document).ready(function() {
console.log('document ready');
initTables();
reinitScoringTable();
initSliders();
$('.alert-dismissable').delay(2500).fadeOut();
$('[data-toggle="popover"]').popover();
$(document).keydown(function(event) { // bind function called when key is released
if (event.keyCode == 16){
scoreDown = true;
}
});
$(document).keyup(function() { // click method to call keydown() function
scoreDown = false;
});
});
/*
init all tables for the first time
*/
function initTables(){
$( ".table-bordered" ).each(function( index ) {
var id = '#' + this.getAttribute('id');
initTable(id);
console.log(id);
if($(this).has('input.score-slider').length){
// Add event listener to recalculate slider size on data table column width change
$(this).on('column-sizing.dt', function (){
initSliders();
});
}
// reinit table page to avoid empty buttons
$(id).on( 'page.dt', function () {
var reinitInterval = setInterval(function(){ reinitScoringTable() }, 10);
});
//reinit table on click of the first field.
//If the table shrunk due to the responsiveness the expanding buttons
//is placed there
$(id).DataTable().on( 'select', function ( e, dt, type, indexes ) {
dt.deselect();
if ( dt[0][0].column == 0) {
reinitScoringTable();
}
});
});
}
/*
options of one single table
*/
function initTable(id){
console.log('initTable(id=' + id + ')');
$(id).DataTable({
paging : true,
lengthChange: true,
pageLength : 10,
searching : true,
ordering : true,
info : true,
autoWidth : false,
responsive : true,
aaSorting : [],
language: {
paginate: {
previous: '<i class="fa fa-angle-left" aria-hidden="true"></i>',
next: '<i class="fa fa-angle-right" aria-hidden="true"></i>',
}
},
lengthMenu : [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
select: {
style: 'single',
items: 'cell'
},
dom: "<'row'<'col-12 col-sm-12 col-md-12 col-lg-12 additional-buttons'B><'float-right col-12 col-sm-8 col-md-8 col-lg-8'f><'col-12 col-sm-4 col-md-4 col-lg-4'l>>" +
"<'row'<'col-md-12't>><'row'<'col-md-12'ip>>",
buttons: [
{
extend: 'pdf',
className: 'btn btn-default h-spacer-3',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'print',
className: 'btn btn-default h-spacer-3',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excel',
className: 'btn btn-default h-spacer-3',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csv',
className: 'btn btn-default h-spacer-3',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'copy',
className: 'btn btn-default h-spacer-3',
exportOptions: {
columns: ':visible'
}
},
]
});
console.log('initTable(id=' + id + ')' + ' finished');
}
/*
fixes detached buttons, corrects displayed values in table buttons,
recalculates responsive table
*/
function reinitScoringTable() {
console.log('reinitScoringTable()');
clearInterval(reinitInterval);
$( ".table-bordered" ).each(function( index ) {
var id = '#' + this.getAttribute('id');
$(id).DataTable().columns.adjust().responsive.recalc();
});
//rebind all buttons. Used for AOI scoring
$('.btn-scoring').unbind();
$('.btn-scoring').click(function() {
var form = $($(this).attr('form-id'));
var typeId = form.attr('type-id');
var min = parseFloat(form.attr('min'));
var max = parseFloat(form.attr('max'));
var stepsize = parseFloat(form.attr('stepsize'));
var view = $(this).attr('view');
//will only be executed in the beginning and will update all scores to minimum
if(isNaN(parseFloat(form.val()))){
var newVal = min;
//updates the rest of the row
$('.' + form.attr('class').split(' ').join('.')).each(function( index ) {
$(this).val(parseFloat($(this).attr('min')));
updateButtons();
});
}else{
//normal increment by stepsize
var val = parseFloat(form.val()) == 0 ? form.val() : parseFloat(form.val()) || min;
if(scoreDown){
a = val-min-stepsize
b = max-min+stepsize
var newVal = ((a%b)+b)%b+min;
}else {
var newVal = (val-min+stepsize)%(max-min+stepsize)+min;
}
}
form.val(newVal);
updateSystemScores(form.attr('class'), form, view);
setTypeLabel(typeId, (newVal-min)/stepsize, this, newVal);
});
// Slider for image scoring
$('.score-slider').off("input change");
$('.score-slider').on('input change', function(){
var newVal = $(this).val();
var form = $($(this).attr('form-id'));
var typeId = form.attr('type-id');
var min = parseFloat($(this).attr('min'));
var stepsize = parseFloat($(this).attr('step'));
var label = $($(this).parent().parent().find('.score-label'));
// If no score was saved yet, initialise all to minimum
if(isNaN(parseFloat(form.val()))){
$('.' + form.attr('class').split(' ').join('.')).each(function(){
$(this).val(parseFloat($(this).attr('min')));
});
// Set the current one to the new value
form.val(newVal);
updateSliderLabels();
} else {
form.val(newVal);
}
setTypeLabel(typeId, (newVal-min)/stepsize, label, newVal);
// The saving of the new score is only done on slider release
if(event.type == 'change'){
var view = $(this).attr('view');
updateSystemScores(form.attr('class'), form, view);
}
})
updateButtons();
updateAllSystemScorings();
}
//set values of all buttons in table
function updateButtons(){
$( ".btn-scoring" ).each(function( index ) {
var form = $($(this).attr('form-id'));
if(isNaN(parseFloat(form.val()))){
$(this).html('n.d.');
}else{
var typeId = form.attr('type-id');
var val = parseFloat(form.val()) || 0;
var min = parseFloat(form.attr('min'));
var max = parseFloat(form.attr('max'));
var stepsize = parseFloat(form.attr('stepsize'));
setTypeLabel(typeId, (val-min)/stepsize, this, val);
}
});
}
/*
* Set values for all slider labels
*/
function updateSliderLabels(){
$('.score-slider').each(function(){
var form = $($(this).attr('form-id'));
var label = $($(this).parent().parent().find('.score-label'));
// If no value for this type yet, label is 'n.d.'
if(isNaN(parseFloat(form.val()))){
label.html('n.d.');
} else { // Else set label to current value
var val = parseFloat(form.val()) || 0;
setTypeLabel(form.attr('type-id'), (val - parseFloat($(this).attr('min'))/parseFloat($(this).attr('step'))), label, val);
}
})
}
// recalc responsive on resizing
$(window).resize( function(){
if(document.readyState === 'complete'){
reinitScoringTable();
}
});
/*
Save type scores, recalculate system score and load the result
*/
function updateSystemScores(rowClass, form, view){
$('.active .scoring-status-symbol').attr( "class" , 'fa fa-spinner fa-spin scoring-status-symbol');
var data = $('.' + rowClass.split(' ').join('.')).serialize() + "&imageId=" + $('#image_id').attr('value');
if(form[0].hasAttribute('subSystem-id')){
data = data + '&subSystemId=' + form.attr('subSystem-id');
}
$.ajax({
type: 'POST',
url: "/scoring/systemscore",
data: data,
success: function(data, textStatus, xhr){
if(xhr.status == 200){
var scores = data[0];
var summary = data[1];
// Refill the score system scores with the new calculated scores
for (var score in scores) {
$(form.attr('score-ref') + '_' + scores[score]['score_system_id']).attr('value',scores[score]['result']);
}
updateAllSystemScorings();
// Reload summary view
$("#summary-pane" + view).html(summary);
$('.active .scoring-status-symbol').attr( "class" , 'fa fa-check scoring-status-symbol');
}else{
$('.active .scoring-status-symbol').attr( "class" , 'fa fa-exclamation scoring-status-symbol');
}
},
error: function() {
console.log("AJAX save failed")
$('.active .scoring-status-symbol').attr( "class" , 'fa fa-exclamation scoring-status-symbol');
}
});
}
/**
* sets right system scores in scoring tables
*/
function updateAllSystemScorings(){
$( ".lab-scoring" ).each(function( index ) {
var form = $($(this).attr('form-id'));
var val = form.attr('value');
$(this).html(val);
});
}
/*
reinit on tab change
*/
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
reinitScoringTable();
});
/**
* Delete image (div_id = I) or AOI (div_id = AOI) scores
* @param String div_id, indicates if request for deletion is coming from AOI or Image
* @param Int subSystemId potential subSystem to delete the scores from
*/
function deleteScores(div_id, subSystemId = null){
if(subSystemId){
var url = '/scoring/deletetimepointscores/';
url = url + $('#image_id').attr('value') + '/' + subSystemId;
} else {
var url = (div_id.indexOf('AOI') !== -1) ? '/scoring/deleteaoiscores/' : '/scoring/deleteimgscores/';
url = url + $('#image_id').attr('value');
}
$('.active .scoring-status-symbol').attr('class', 'fa fa-spinner fa-spin scoring-status-symbol');
$.ajax({
type: 'POST',
url: url,
success: function(data, textStatus, xhr){
console.log('Ajax successful');
$('.active .scoring-status-symbol').attr('class', 'fa fa-exclamation scoring-status-symbol');
if(xhr.status == 200){
var summary = data[0];
var score_labels = data[1];
$('#summary-pane' + div_id).html(summary);
$('#scoringTable' + div_id).find('.btn-scoring').each(function(index){
var form = $($(this).attr('form-id'));
// Reset buttons to n.d
$(this).html('n.d.');
form.val('n.d');
// Reset labels to minimum values
for (var score_label in score_labels) {
$(form.attr('score-ref') + '_' + score_labels[score_label][0]).attr('value', score_labels[score_label][1]);
}
});
if(subSystemId){
var scoringTableId = '#scoringTable' + subSystemId;
} else {
var scoringTableId = '#scoringTable' + div_id;
}
$(scoringTableId).find('.score-slider').each(function(index){
var form = $($(this).attr('form-id'));
var typeId = form.attr('type-id');
// Set slider to minimun
setSliderToMin($(this));
form.val('n.d');
$($(this).parent().parent().find('.score-label')).html('n.d.');
for (var score_label in score_labels) {
$(form.attr('score-ref') + '_' + score_labels[score_label][0]).attr('value', score_labels[score_label][1]);
}
})
updateAllSystemScorings();
$('.active .scoring-status-symbol').attr( "class" , 'fa fa-check scoring-status-symbol');
}else{
$('.active .scoring-status-symbol').attr( "class" , 'fa fa-exclamation scoring-status-symbol');
}
},
error: function(){
console.log('Ajax failed');
$('.active .scoring-status-symbol').attr( "class" , 'fa fa-exclamation scoring-status-symbol');
}
});
}
/*
* Display modal for delete confirm and callback the delete function
* @param element: button triggering the function
* @param text: description text to display in the delete modal
* @param title: title for the delete modal
* remark: text and title should not be undefined, otherwise the modal message will not be related to its function anymore
*/
function ConfirmDeleteScores(element, text, title)
{
setUpDeleteScoresModal(text, title);
var div_id = (element.id).replace('delete-scores', ''); // check if AOI or image scores
$('#confirm-delete-modal').find('.modal-footer #modal-delete-btn').on('click', function(){
$("#confirm-delete-modal").modal("hide");
deleteScores(div_id, element.getAttribute('subSystem'));
return true;
});
return false;
}
$("#delete-scoresAOI").unbind();
$("#delete-scoresI").unbind();
/*
正确加载数据表后重新初始化数据表的计时器
*/
var重新区间；
var scoreDown=假；
常量刻度高度=20；//用于绘制分数标尺的画布的高度
常量滑块高度=15；//控制分数的滑块的高度
$（文档）.ready（函数（）{
console.log（“文档准备就绪”）；
initTables（）；
reinitScoringTable（）；
初始化滑块（）；
$（'.alert dismissable'）.delay（2500.fadeOut（）；
$（'[data toggle=“popover”]'）。popover（）；
$（document）.keydown（函数（事件）{//释放键时调用的绑定函数
如果（event.keyCode==16）{
scoreDown=true；
}
});
$（document）.keyup（function（）{//单击方法调用keydown（）函数
得分下降=错误；
});
});
/*
第一次初始化所有表
*/
函数initTables（）{
$（“.table bordered”）.each（函数（索引）{
var id='#'+this.getAttribute（'id'）；
初始化表（id）；
console.log（id）；
if（$（this）.has（'input.score slider'）.length）{
//添加事件侦听器以在数据表列宽更改时重新计算滑块大小
$（this）.on（'column-sizing.dt'，function（）{
初始化滑块（）；
});
}
//重新编辑表格页面以避免出现空按钮
$（id）.on（'page.dt'，函数（）{
var reinitInterval=setInterval（函数（）{reinitScoringTable（）}，10）；
});
//单击第一个字段重新输入表格。
//如果表格因响应而收缩，请单击展开按钮
//放在那里
$（id）.DataTable（）.on（'select'，函数（e，dt，type，index）{
dt.取消选择（）；
if（dt[0][0]。列==0）{
reinitScoringTable（）；
}
});
});
}
/*
一个表的选项
*/
函数初始化表（id）{
log（'initTable（id='+id+'））；
$（id）.DataTable({
是的，
长度变化：对，
页长：10，
搜索：是的，
顺序：对，
信息：没错，
自动宽度：false，
回答：是的，
A排序：[]，
语言：{
分页：{
以前的：''，
下一步：''，
}
},
长度菜单：[[5,10,25,50，-1]，[5,10,25,50，“全部”]，
选择：{
风格：“单身”，
项目：“单元”
},
dom:“+
"",
按钮：[
{
扩展：“pdf”，
className:'btn btn默认h-spacer-3'，
出口选择：{
列：“：可见”
}
},
{
扩展：“打印”，
className:'btn btn默认h-spacer-3'，
出口选择：{
列：“：可见”
}
},
{
扩展：“excel”，
className:'btn btn默认h-spacer-3'，
出口选择：{
列：“：可见”
}
},
{
扩展：“csv”，
className:'btn btn默认h-spacer-3'，
出口选择：{
列：“：可见”
}
},
{
扩展：“复制”，
className:'btn btn默认h-spacer-3'，
出口选择：{
列：“：可见”
}
},
]
});
log（'initTable（id='+id+'）、'+'finished'）；
}
/*
修复分离的按钮，更正表格按钮中显示的值，
重新计算响应表
*/
函数reinitScoringTable（）{
log（'reinitScoringTable（）'）；
clearInterval（重新初始化区间）；
$（“.table bordered”）.each（函数（索引）{
var id='#'+this.getAttribute（'id'）；
$（id）.DataTable（）.columns.adjust（）.responsive.recalc（）；
});
//重新绑定所有按钮。用于AOI评分
$（'.btn scoring'）.unbind（）；
$（'.btn评分'）。单击（函数（）{
var form=$（$（this.attr（'form-id'））；
var typeId=form.attr（'type-id'）；
var min=parseFloat（form.attr（'min'）；
var max=parseFloat（form.attr（'max'）；
var stepsize=parseFloat（form.attr（'stepsize'）；
var view=$（this.attr（'view'）；
//将仅在开始时执行，并将所有分数更新到最低
if（isNaN（parseFloat（form.val（）））{
var newVal=min；
//更新行的其余部分
$（'..+form.attr（'class'）.split（''）.join（'.'）.each（函数（索引）{
$（this.val）（parseFloat（$（this.attr（'min'））；
updateButtons（）；
});
}否则{
//步长法向增量
var val=parseFloat（form.val（））==0？form.val（）：parseFloat（form.val（））| min；
如果（得分下降）{
a=最小步长值
b=最大最小值+步长
var newVal=（（a%b）+b）%b+min；
}否则{
var newVal=（最小值+步长）%（最小最大值+步长）+最小值；
}
}
表格.val（newVal）；
更新系统核心（form.attr（'class'）、form、view）；
setTypeLabel（typeId，（newVal-min）/步长，this，newVal）；
});
//用于图像评分的滑块
$（'.score slider'）.off（“输入更改”）；
$（'.score slider'）。在（'input change'，function（）上{
var newVal=$（this.val（）；
var form=$（$（this.attr（'form-id'））；
var typeId=form.attr（'type-id'）；
var min=parseFloat（$（this）.attr（'min'））
@if($scoreConfig->scoring_enabled)
<div class="row">
<div class="card ml-2" style="width: 100%;">
<div class="card-body" id="score-button-small" style="height: 10px;">
<button class="btn btn-box-tool collapse-tab-content float-right" href="#note-tabs">
<i style="color: #1e88e5;" class="fa fa-minus"></i>
</button>
</div>
<div class="card-body">
<div class="row">
<div class="nav-tabs-custom nav-tabs-documentation" style="width: 100%;">
<ul class="nav nav-tabs customtab" id="score-tabs">
@php
$activePane = "active";
@endphp
@if($scoreConfig->scoring_enabled && $scoreConfig->image_based_score)
<li class="nav-item {{$activePane}}">
@php
$activePane = "";
@endphp
<a class="nav-link active" href="#{{trans('scoring.scoring')}}" data-toggle="tab" aria-expanded="true">
<span data-toggle="tooltip" data-placement="top" title="{{trans('scoring.scoring_per_img')}}">
<span class="hidden-lg-up">ScI <i class="fa fa-check scoring-status-symbol"></i></span> </span>
<span class="hidden-md-down">{{trans('scoring.scoring_per_img')}} <i class="fa fa-check scoring-status-symbol"></i></span>
</a>
</li>
@if(in_array(\Auth::user()->userGroup->id,config('usergroups.summaryScoring')))
<li class="nav-item">
<a class="nav-link" href="#summary-paneI" data-toggle="tab" aria-expanded="true">
<span data-toggle="tooltip" data-placement="top" title="{{trans('scoring.summary_per_img')}}">
<span class="hidden-lg-up">SuI</span> </span>
<span class="hidden-md-down">{{trans('scoring.summary_per_img')}}</span>
</a>
</li>
@endif
@endif
@if($scoreConfig->scoring_enabled && $scoreConfig->aoi_based_score)
<li class="nav-item {{$activePane}}">
<a class="nav-link" href="#{{trans('scoring.scoring')}}-aoi" data-toggle="tab" aria-expanded="true">
<span data-toggle="tooltip" data-placement="top" title="{{trans('scoring.scoring_per_AOI')}} ">
<span class="hidden-lg-up">ScA <i class="fa fa-check scoring-status-symbol"></i></span> </span>
<span class="hidden-md-down">{{trans('scoring.scoring_per_AOI')}} <i class="fa fa-check scoring-status-symbol"></i></span>
</a>
</li>
@if(in_array(\Auth::user()->userGroup->id,config('usergroups.summaryScoring')))
<li class="nav-item ">
<a class="nav-link" href="#summary-paneAOI" data-toggle="tab" aria-expanded="true">
<span data-toggle="tooltip" data-placement="top" title="{{trans('scoring.summary_per_AOI')}} ">
<span class="hidden-lg-up">SuA</span> </span>
<span class="hidden-md-down">{{trans('scoring.summary_per_AOI')}}</span>
</a>
</li>
@endif
@endif
<div class="box-tools ml-auto" id="score-button-big">
<button class="btn btn-box-tool collapse-tab-content" href="#note-tabs">
<i style="color: #1e88e5;" class="fa fa-minus"></i>
</button>
</div>
</ul>
<div class="tab-content" id="note-tabs">
@php
$activePane = "active";
@endphp
@if($scoreConfig->scoring_enabled && $scoreConfig->image_based_score)
<div class="tab-pane {{$activePane}}" id="{{trans('scoring.scoring')}}">
@php
$activePane = "";
@endphp
@if($scoreConfig->scoreSuperSystem)
@include('scoring.image.subsystem')
@elseif($scoreConfig->types->isEmpty())
@include('scoring.demo.scoring')
@else
@include('scoring.image.scoring')
@endif
</div>
<div class="tab-pane" id="summary-paneI">
@if($scoreConfig->scoreSuperSystem)
@include('scoring.image.subsystemsummary')
@elseif($scoreConfig->types->isEmpty())
@include('scoring.demo.summary')
@else
@include('scoring.image.summary')
@endif
</div>
@endif
@if($scoreConfig->scoring_enabled && $scoreConfig->aoi_based_score)
@php
$demoAOI = 1;
@endphp
<div class="tab-pane {{$activePane}}" id="{{trans('scoring.scoring')}}-aoi">
@if($scoreConfig->types->isEmpty())
@include('scoring.demo.scoring')
@else
@include('scoring.aoi.scoring')
@endif
</div>
<div class="tab-pane" id="summary-paneAOI">
@if($scoreConfig->types->isEmpty())
@include('scoring.demo.summary')
@else
@include('scoring.aoi.summary')
@endif
</div>
@endif
</div>
</div>
</div>
@endif
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="{{asset('/plugins/DataTablesBootstrap4/bootstrap4.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{asset('/plugins/DataTablesBootstrap4/responsive.bootstrap4.min.css') }}"/>
<link rel="stylesheet" type="text/css" href="{{asset('/plugins/DataTablesBootstrap4/datatables.min.css') }}"/>
<script src="{{asset('/plugins/DataTablesBootstrap4/jquery.dataTables.min.js') }}"></script>
<script src="{{asset('/plugins/DataTablesBootstrap4/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{asset('/plugins/DataTablesBootstrap4/dataTables.responsive.min.js') }}"></script>
<script src="{{asset('/plugins/DataTablesBootstrap4/responsive.bootstrap4.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/plugins/datatables/1.10.16/datatables.min.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/dataTables.buttons.min.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/buttons.flash.min.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/jszip.min.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/pdfmake.min.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/vfs_fonts.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/buttons.html5.min.js') }}"></script>
<script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/buttons.print.min.js') }}"></script>
<script src="{{ asset('/js/jquery.form.js') }}"></script>
<script src="{{ asset('/js/scoring/scoringDetailView.js?v=2.25.0') }}"></script>
<script src="{{ asset('/js/scoring/scoring.js?v=2.25.0') }}"></script>
<style>
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
.dataTables_wrapper {
width: 100%;
}
</style>
{!! Form::open(['route' => ['documentation.scoring.scoring',$image->id], 'onSubmit' => '$.fn.showPleaseWait();', 'id' => 'scoringFormI']) !!}
<div style='position: absolute; visibility: hidden'>
@foreach ($scoreConfig->types as $type)
{!! Form::number('scoring',
$value = $prevScoresI->isEmpty() ? 'n.d.' : $prevScoresI->get($type->id)->score ,
['min' => $type->min, 'max' => $type->max,'stepsize' => $type->stepsize,
'class' => 'btn btn-default btn-datarow-image',
// id : id which is set as form-id in the according button,
// number code is the same as in the name field
'id' => 'scores'.$type->id,
// href to the system score div
'score-ref' => '#systemScoreImage',
// array field in which the score is saved
'name' => 'scores['.$type->id.']',
'type-id' => $type->id,
'style' => 'outline: none; visibility: hidden','required','readonly']) !!}
@endforeach
@if ($systemScoresI->count())
@foreach ($systemScoresI as $key => $scoreI)
<div id="systemScoreImage_{{$scoreI->systemScore->scoreSystem->id}}" style="visibility: hidden;" value="
{{ $scoreI->systemScore->result($scoreI, $scoreI->systemScore->scoreSystem->style->name) }}"></div>
@endforeach
@else
@foreach ($scoreConfig->scoreSystems as $key => $systems)
<div id="systemScoreImage_{{$systems->id}}" style="visibility: hidden;" value="
{{$systems->scoreSystemScores[0]->result(NULL, $systems->style->name)}}"></div>
@endforeach
@endif
</div>
<div class="card-body">
<div class="row">
<div class="table-responsive">
<table id='scoringTableI' class="table table-striped table-bordered">
<thead>
<tr>
<th style="width: 30%">{{trans('scoring.parameter')}}</th>
<th>{{trans('scoring.score')}}</th>
</tr>
</thead>
<tbody>
@foreach ($scoreConfig->types as $type)
<tr>
<!-- If the type has a description, show it, otherwise show the name -->
@if(isset($type->description))
<th title="{{$type->name}}">{{$type->description}} ({{$type->min}}-{{$type->max}})</th>
@else
<th>{{$type->name}} ({{$type->min}}-{{$type->max}})</th>
@endif
<td>
<div class="row">
<!-- The JS of this view relies on the position of the slider and its label in the DOM.
If the DOM structure is changed, please update the JS file accordingly
regarding the slider event listener which also updates the label -->
@php
if($prevScoresI->isEmpty()){
$savedScore = 'n.d.';
$hasScore = false;
} else {
$savedScore = $prevScoresI->get($type->id)->score;
$hasScore = true;
}
$savedScore = $prevScoresI->isEmpty() ? 'n.d.' : $prevScoresI->get($type->id)->score;
@endphp
<div class="col-lg-9 col-md-6 col-sm-6 col-xs-12">
<canvas class="score-scale" style="position: absolute"></canvas>
<input style="position: inherit; width: 80%;" class="score-slider" type="range" min="{{$type->min}}" max="{{$type->max}}" step="{{$type->stepsize}}" value="@if($hasScore){{$savedScore}}@else{{$type->min}}@endif" style=" position: absolute;" view="I" form-id="{{'#scores'.$type->id}} "class="form-control-range">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<label class="score-label float-right">{{$savedScore}} @if(count($type->labels) && $hasScore)({{$type->labels->where('type_index', ($savedScore - $type->min) / $type->stepsize)->pluck('label')->first()}})@endif </label>
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
@if($scoreConfig->scoreSystems->count())
<div class="row">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th style="width: 30%">{{trans('scoring.scoreSystem')}}</th>
<th>{{trans('scoring.score')}}</th>
</tr>
</thead>
<tbody>
@foreach ($scoreConfig->scoreSystems as $key => $system)
<tr>
<td>{{$system->name}}</td>
<td><label class="lab-scoring" form-id="#systemScoreImage_{{$system->id}}"></label></td>
</tr>
@endforeach
</tbody>
</table>
</div>
@endif
</div>
{!! Form::close() !!}
<div class ='card-footer' style="background-color: white;">
<div class="row justify-content-center">
<div class='col-md-2'>
<button id='delete-scoresI' class='btn btn-default btn-2icons btn-wrapper' onclick="return ConfirmDeleteScores(this, '{{trans('modals.delete_current_image_scores')}}', '{{trans('modals.delete_current_image_scores_title')}}')" data-toggle='tooltip' data-placement='top' title="{{trans('tooltips.delete_current_image_scores')}}">
<i class='fa fa-trash'></i>
</button>
</div>
</div>
</div>