javascript — Предупреждение DataTables: таблица (id) Невозможно повторно инициализировать DataTable. (на сервере есть ошибка, но на локальном хосте нет)

Предупреждение DataTables: table (id) Невозможно повторно инициализировать DataTable. (На сервере есть ошибка, но на localhost нет)

Я реализовал создание таблиц (на основе библиотеки od Datatables). Странно то, что я получаю предупреждение DataTables: (таблица id = scoringTableI — Невозможно повторно инициализировать DataTable на моем сервере) на стороне сервера, но на локальном хосте все работает отлично. Ниже приведен текст PrintScreen и мой исходный код. Кто-нибудь знает, где проблема?

Таблица данных

scoringDetailView.js

 /* 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: '{amp}lt;i class="fa fa-angle-left" aria-hidden="true"{amp}gt;{amp}lt;/i{amp}gt;', next: '{amp}lt;i class="fa fa-angle-right" aria-hidden="true"{amp}gt;{amp}lt;/i{amp}gt;', } }, lengthMenu : [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]], select: { style: 'single', items: 'cell' }, dom: "{amp}lt;'row'{amp}lt;'col-12 col-sm-12 col-md-12 col-lg-12 additional-buttons'B{amp}gt;{amp}lt;'float-right col-12 col-sm-8 col-md-8 col-lg-8'f{amp}gt;{amp}lt;'col-12 col-sm-4 col-md-4 col-lg-4'l{amp}gt;{amp}gt;"   "{amp}lt;'row'{amp}lt;'col-md-12't{amp}gt;{amp}gt;{amp}lt;'row'{amp}lt;'col-md-12'ip{amp}gt;{amp}gt;", 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('nd'); }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 'nd' if(isNaN(parseFloat(form.val()))){ label.html('nd'); } 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()   "{amp}amp;imageId="   $('#image_id').attr('value'); if(form[0].hasAttribute('subSystem-id')){ data = data   '{amp}amp;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 nd $(this).html('nd'); 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('nd'); 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(); й /* 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: '{amp}lt;i class="fa fa-angle-left" aria-hidden="true"{amp}gt;{amp}lt;/i{amp}gt;', next: '{amp}lt;i class="fa fa-angle-right" aria-hidden="true"{amp}gt;{amp}lt;/i{amp}gt;', } }, lengthMenu : [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]], select: { style: 'single', items: 'cell' }, dom: "{amp}lt;'row'{amp}lt;'col-12 col-sm-12 col-md-12 col-lg-12 additional-buttons'B{amp}gt;{amp}lt;'float-right col-12 col-sm-8 col-md-8 col-lg-8'f{amp}gt;{amp}lt;'col-12 col-sm-4 col-md-4 col-lg-4'l{amp}gt;{amp}gt;"   "{amp}lt;'row'{amp}lt;'col-md-12't{amp}gt;{amp}gt;{amp}lt;'row'{amp}lt;'col-md-12'ip{amp}gt;{amp}gt;", 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('nd'); }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 'nd' if(isNaN(parseFloat(form.val()))){ label.html('nd'); } 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()   "{amp}amp;imageId="   $('#image_id').attr('value'); if(form[0].hasAttribute('subSystem-id')){ data = data   '{amp}amp;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 nd $(this).html('nd'); 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('nd'); 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(); й /* 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: '{amp}lt;i class="fa fa-angle-left" aria-hidden="true"{amp}gt;{amp}lt;/i{amp}gt;', next: '{amp}lt;i class="fa fa-angle-right" aria-hidden="true"{amp}gt;{amp}lt;/i{amp}gt;', } }, lengthMenu : [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]], select: { style: 'single', items: 'cell' }, dom: "{amp}lt;'row'{amp}lt;'col-12 col-sm-12 col-md-12 col-lg-12 additional-buttons'B{amp}gt;{amp}lt;'float-right col-12 col-sm-8 col-md-8 col-lg-8'f{amp}gt;{amp}lt;'col-12 col-sm-4 col-md-4 col-lg-4'l{amp}gt;{amp}gt;"   "{amp}lt;'row'{amp}lt;'col-md-12't{amp}gt;{amp}gt;{amp}lt;'row'{amp}lt;'col-md-12'ip{amp}gt;{amp}gt;", 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('nd'); }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 'nd' if(isNaN(parseFloat(form.val()))){ label.html('nd'); } 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()   "{amp}amp;imageId="   $('#image_id').attr('value'); if(form[0].hasAttribute('subSystem-id')){ data = data   '{amp}amp;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 nd $(this).html('nd'); 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('nd'); 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(); 

documentation.blade.php

 @if($scoreConfig-{amp}gt;scoring_enabled) {amp}lt;div class="row"{amp}gt; {amp}lt;div class="card ml-2" style="width: 100%;"{amp}gt; {amp}lt;div class="card-body" id="score-button-small" style="height: 10px;"{amp}gt; {amp}lt;button class="btn btn-box-tool collapse-tab-content float-right" href="#note-tabs"{amp}gt; {amp}lt;i style="color: #1e88e5;" class="fa fa-minus"{amp}gt;{amp}lt;/i{amp}gt; {amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="card-body"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="nav-tabs-custom nav-tabs-documentation" style="width: 100%;"{amp}gt; {amp}lt;ul class="nav nav-tabs customtab" id="score-tabs"{amp}gt; @php $activePane = "active"; @endphp @if($scoreConfig-{amp}gt;scoring_enabled {amp}amp;{amp}amp; $scoreConfig-{amp}gt;image_based_score) {amp}lt;li class="nav-item {{$activePane}}"{amp}gt; @php $activePane = ""; @endphp {amp}lt;a class="nav-link active" href="#{{trans('scoring.scoring')}}" data-toggle="tab" aria-expanded="true"{amp}gt; {amp}lt;span data-toggle="tooltip" data-placement="top" title="{{trans('scoring.scoring_per_img')}}"{amp}gt; {amp}lt;span class="hidden-lg-up"{amp}gt;ScI {amp}lt;i class="fa fa-check scoring-status-symbol"{amp}gt;{amp}lt;/i{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span class="hidden-md-down"{amp}gt;{{trans('scoring.scoring_per_img')}} {amp}lt;i class="fa fa-check scoring-status-symbol"{amp}gt;{amp}lt;/i{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; @if(in_array(Auth::user()-{amp}gt;userGroup-{amp}gt;id,config('usergroups.summaryScoring'))) {amp}lt;li class="nav-item"{amp}gt; {amp}lt;a class="nav-link" href="#summary-paneI" data-toggle="tab" aria-expanded="true"{amp}gt; {amp}lt;span data-toggle="tooltip" data-placement="top" title="{{trans('scoring.summary_per_img')}}"{amp}gt; {amp}lt;span class="hidden-lg-up"{amp}gt;SuI{amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span class="hidden-md-down"{amp}gt;{{trans('scoring.summary_per_img')}}{amp}lt;/span{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; @endif @endif @if($scoreConfig-{amp}gt;scoring_enabled {amp}amp;{amp}amp; $scoreConfig-{amp}gt;aoi_based_score) {amp}lt;li class="nav-item {{$activePane}}"{amp}gt; {amp}lt;a class="nav-link" href="#{{trans('scoring.scoring')}}-aoi" data-toggle="tab" aria-expanded="true"{amp}gt; {amp}lt;span data-toggle="tooltip" data-placement="top" title="{{trans('scoring.scoring_per_AOI')}} "{amp}gt; {amp}lt;span class="hidden-lg-up"{amp}gt;ScA {amp}lt;i class="fa fa-check scoring-status-symbol"{amp}gt;{amp}lt;/i{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span class="hidden-md-down"{amp}gt;{{trans('scoring.scoring_per_AOI')}} {amp}lt;i class="fa fa-check scoring-status-symbol"{amp}gt;{amp}lt;/i{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; @if(in_array(Auth::user()-{amp}gt;userGroup-{amp}gt;id,config('usergroups.summaryScoring'))) {amp}lt;li class="nav-item "{amp}gt; {amp}lt;a class="nav-link" href="#summary-paneAOI" data-toggle="tab" aria-expanded="true"{amp}gt; {amp}lt;span data-toggle="tooltip" data-placement="top" title="{{trans('scoring.summary_per_AOI')}} "{amp}gt; {amp}lt;span class="hidden-lg-up"{amp}gt;SuA{amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt; {amp}lt;span class="hidden-md-down"{amp}gt;{{trans('scoring.summary_per_AOI')}}{amp}lt;/span{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; @endif @endif {amp}lt;div class="box-tools ml-auto" id="score-button-big"{amp}gt; {amp}lt;button class="btn btn-box-tool collapse-tab-content" href="#note-tabs"{amp}gt; {amp}lt;i style="color: #1e88e5;" class="fa fa-minus"{amp}gt;{amp}lt;/i{amp}gt; {amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;div class="tab-content" id="note-tabs"{amp}gt; @php $activePane = "active"; @endphp @if($scoreConfig-{amp}gt;scoring_enabled {amp}amp;{amp}amp; $scoreConfig-{amp}gt;image_based_score) {amp}lt;div class="tab-pane {{$activePane}}" id="{{trans('scoring.scoring')}}"{amp}gt; @php $activePane = ""; @endphp @if($scoreConfig-{amp}gt;scoreSuperSystem) @include('scoring.image.subsystem') @elseif($scoreConfig-{amp}gt;types-{amp}gt;isEmpty()) @include('scoring.demo.scoring') @else @include('scoring.image.scoring') @endif {amp}lt;/div{amp}gt; {amp}lt;div class="tab-pane" id="summary-paneI"{amp}gt; @if($scoreConfig-{amp}gt;scoreSuperSystem) @include('scoring.image.subsystemsummary') @elseif($scoreConfig-{amp}gt;types-{amp}gt;isEmpty()) @include('scoring.demo.summary') @else @include('scoring.image.summary') @endif {amp}lt;/div{amp}gt; @endif @if($scoreConfig-{amp}gt;scoring_enabled {amp}amp;{amp}amp; $scoreConfig-{amp}gt;aoi_based_score) @php $demoAOI = 1; @endphp {amp}lt;div class="tab-pane {{$activePane}}" id="{{trans('scoring.scoring')}}-aoi"{amp}gt; @if($scoreConfig-{amp}gt;types-{amp}gt;isEmpty()) @include('scoring.demo.scoring') @else @include('scoring.aoi.scoring') @endif {amp}lt;/div{amp}gt; {amp}lt;div class="tab-pane" id="summary-paneAOI"{amp}gt; @if($scoreConfig-{amp}gt;types-{amp}gt;isEmpty()) @include('scoring.demo.summary') @else @include('scoring.aoi.summary') @endif {amp}lt;/div{amp}gt; @endif {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; @endif {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;link rel="stylesheet" type="text/css" href="{{asset('/plugins/DataTablesBootstrap4/bootstrap4.min.css') }}"/{amp}gt; {amp}lt;link rel="stylesheet" type="text/css" href="{{asset('/plugins/DataTablesBootstrap4/responsive.bootstrap4.min.css') }}"/{amp}gt; {amp}lt;link rel="stylesheet" type="text/css" href="{{asset('/plugins/DataTablesBootstrap4/datatables.min.css') }}"/{amp}gt; {amp}lt;script src="{{asset('/plugins/DataTablesBootstrap4/jquery.dataTables.min.js') }}"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="{{asset('/plugins/DataTablesBootstrap4/dataTables.bootstrap4.min.js') }}"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="{{asset('/plugins/DataTablesBootstrap4/dataTables.responsive.min.js') }}"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="{{asset('/plugins/DataTablesBootstrap4/responsive.bootstrap4.min.js') }}"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script type="text/javascript" src="{{ asset('/plugins/datatables/1.10.16/datatables.min.js') }}"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/dataTables.buttons.min.js') }}"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/buttons.flash.min.js') }}"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/jszip.min.js') }}"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/pdfmake.min.js') }}"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/vfs_fonts.js') }}"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/buttons.html5.min.js') }}"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script type="text/javascript" src="{{asset('/plugins/DataTablesBootstrap4/buttons.print.min.js') }}"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="{{ asset('/js/jquery.form.js') }}"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="{{ asset('/js/scoring/scoringDetailView.js?v=2.25.0') }}"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="{{ asset('/js/scoring/scoring.js?v=2.25.0') }}"{amp}gt;{amp}lt;/script{amp}gt; 

scoring.blade.php

 {amp}lt;style{amp}gt; 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%; } {amp}lt;/style{amp}gt; {!! Form::open(['route' ={amp}gt; ['documentation.scoring.scoring',$image-{amp}gt;id], 'onSubmit' ={amp}gt; '$.fn.showPleaseWait();', 'id' ={amp}gt; 'scoringFormI']) !!} {amp}lt;div style='position: absolute; visibility: hidden'{amp}gt; @foreach ($scoreConfig-{amp}gt;types as $type) {!! Form::number('scoring', $value = $prevScoresI-{amp}gt;isEmpty() ? 'nd' : $prevScoresI-{amp}gt;get($type-{amp}gt;id)-{amp}gt;score , ['min' ={amp}gt; $type-{amp}gt;min, 'max' ={amp}gt; $type-{amp}gt;max,'stepsize' ={amp}gt; $type-{amp}gt;stepsize, 'class' ={amp}gt; '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' ={amp}gt; 'scores'.$type-{amp}gt;id, // href to the system score div 'score-ref' ={amp}gt; '#systemScoreImage', // array field in which the score is saved 'name' ={amp}gt; 'scores['.$type-{amp}gt;id.']', 'type-id' ={amp}gt; $type-{amp}gt;id, 'style' ={amp}gt; 'outline: none; visibility: hidden','required','readonly']) !!} @endforeach @if ($systemScoresI-{amp}gt;count()) @foreach ($systemScoresI as $key ={amp}gt; $scoreI) {amp}lt;div id="systemScoreImage_{{$scoreI-{amp}gt;systemScore-{amp}gt;scoreSystem-{amp}gt;id}}" style="visibility: hidden;" value=" {{ $scoreI-{amp}gt;systemScore-{amp}gt;result($scoreI, $scoreI-{amp}gt;systemScore-{amp}gt;scoreSystem-{amp}gt;style-{amp}gt;name) }}"{amp}gt;{amp}lt;/div{amp}gt; @endforeach @else @foreach ($scoreConfig-{amp}gt;scoreSystems as $key ={amp}gt; $systems) {amp}lt;div id="systemScoreImage_{{$systems-{amp}gt;id}}" style="visibility: hidden;" value=" {{$systems-{amp}gt;scoreSystemScores[0]-{amp}gt;result(NULL, $systems-{amp}gt;style-{amp}gt;name)}}"{amp}gt;{amp}lt;/div{amp}gt; @endforeach @endif {amp}lt;/div{amp}gt; {amp}lt;div class="card-body"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="table-responsive"{amp}gt; {amp}lt;table id='scoringTableI' class="table table-striped table-bordered"{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th style="width: 30%"{amp}gt;{{trans('scoring.parameter')}}{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;{{trans('scoring.score')}}{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt; @foreach ($scoreConfig-{amp}gt;types as $type) {amp}lt;tr{amp}gt; {amp}lt;!-- If the type has a description, show it, otherwise show the name --{amp}gt; @if(isset($type-{amp}gt;description)) {amp}lt;th title="{{$type-{amp}gt;name}}"{amp}gt;{{$type-{amp}gt;description}} ({{$type-{amp}gt;min}}-{{$type-{amp}gt;max}}){amp}lt;/th{amp}gt; @else {amp}lt;th{amp}gt;{{$type-{amp}gt;name}} ({{$type-{amp}gt;min}}-{{$type-{amp}gt;max}}){amp}lt;/th{amp}gt; @endif {amp}lt;td{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;!-- 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 --{amp}gt; @php if($prevScoresI-{amp}gt;isEmpty()){ $savedScore = 'nd'; $hasScore = false; } else { $savedScore = $prevScoresI-{amp}gt;get($type-{amp}gt;id)-{amp}gt;score; $hasScore = true; } $savedScore = $prevScoresI-{amp}gt;isEmpty() ? 'nd' : $prevScoresI-{amp}gt;get($type-{amp}gt;id)-{amp}gt;score; @endphp {amp}lt;div class="col-lg-9 col-md-6 col-sm-6 col-xs-12"{amp}gt; {amp}lt;canvas class="score-scale" style="position: absolute"{amp}gt;{amp}lt;/canvas{amp}gt; {amp}lt;input style="position: inherit; width: 80%;" class="score-slider" type="range" min="{{$type-{amp}gt;min}}" max="{{$type-{amp}gt;max}}" step="{{$type-{amp}gt;stepsize}}" value="@if($hasScore){{$savedScore}}@else{{$type-{amp}gt;min}}@endif" style=" position: absolute;" view="I" form-id="{{'#scores'.$type-{amp}gt;id}} "class="form-control-range"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"{amp}gt; {amp}lt;label class="score-label float-right"{amp}gt;{{$savedScore}} @if(count($type-{amp}gt;labels) {amp}amp;{amp}amp; $hasScore)({{$type-{amp}gt;labels-{amp}gt;where('type_index', ($savedScore - $type-{amp}gt;min) / $type-{amp}gt;stepsize)-{amp}gt;pluck('label')-{amp}gt;first()}})@endif {amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; @endforeach {amp}lt;/tbody{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; @if($scoreConfig-{amp}gt;scoreSystems-{amp}gt;count()) {amp}lt;div class="row"{amp}gt; {amp}lt;table class="table table-striped table-bordered"{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th style="width: 30%"{amp}gt;{{trans('scoring.scoreSystem')}}{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;{{trans('scoring.score')}}{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt; @foreach ($scoreConfig-{amp}gt;scoreSystems as $key ={amp}gt; $system) {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;{{$system-{amp}gt;name}}{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;label class="lab-scoring" form-id="#systemScoreImage_{{$system-{amp}gt;id}}"{amp}gt;{amp}lt;/label{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; @endforeach {amp}lt;/tbody{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/div{amp}gt; @endif {amp}lt;/div{amp}gt; {!! Form::close() !!} {amp}lt;div class ='card-footer' style="background-color: white;"{amp}gt; {amp}lt;div class="row justify-content-center"{amp}gt; {amp}lt;div class='col-md-2'{amp}gt; {amp}lt;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')}}"{amp}gt; {amp}lt;i class='fa fa-trash'{amp}gt;{amp}lt;/i{amp}gt; {amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector