From d8756b9ce06dec987c4f1c58b8917d17f2b9f49b Mon Sep 17 00:00:00 2001
From: Andreas <andreask@online.no>
Date: Tue, 9 Mar 2021 18:24:22 +0100
Subject: [PATCH] [Refactoring] Split js for Acumulated Statistics into
 separate js-file.

---
 application/views/interface_assets/footer.php | 134 +-----------------
 assets/js/sections/accumulatedstatistics.js   | 130 +++++++++++++++++
 2 files changed, 131 insertions(+), 133 deletions(-)
 create mode 100644 assets/js/sections/accumulatedstatistics.js

diff --git a/application/views/interface_assets/footer.php b/application/views/interface_assets/footer.php
index 5608b17d..e68875b9 100644
--- a/application/views/interface_assets/footer.php
+++ b/application/views/interface_assets/footer.php
@@ -1550,139 +1550,7 @@ $(document).ready(function(){
 
 <?php if ($this->uri->segment(1) == "accumulated") { ?>
     <script src="<?php echo base_url(); ?>assets/js/chart.js"></script>
-    <script>
-        function accumulatePlot(form) {
-            $(".ld-ext-right").addClass('running');
-            $(".ld-ext-right").prop('disabled', true);
-
-            // using this to change color of legend and label according to background color
-            var background = $('body').css( "background-color");
-            var color = 'grey';
-            if (background != ('rgb(255, 255, 255)')) {
-                color = 'white';
-            }
-
-            var baseURL= "<?php echo base_url();?>";
-            var award = form.awardradio.value;
-            var mode = form.mode.value;
-            var period = form.periodradio.value;
-            $.ajax({
-                url: baseURL+'index.php/accumulated/get_accumulated_data',
-                type: 'post',
-                data: {'Band': form.band.value, 'Award': award, 'Mode': mode, 'Period': period},
-                success: function(data) {
-                    // used for switching award text in the table and the chart
-                    switch(award) {
-                        case 'dxcc': var awardtext = "DXCC\'s"; break;
-                        case 'was':  var awardtext = "states";break;
-                        case 'iota': var awardtext = "IOTA\'s";break;
-                        case 'waz':  var awardtext = "CQ zones"; break;
-                    }
-
-                    var periodtext = 'Year';
-                    if (period == 'month') {
-                        periodtext += ' + month';
-                    }
-                    // removing the old chart so that it will not interfere when loading chart again
-                    $("#accumulateContainer").empty();
-                    $("#accumulateContainer").append("<canvas id=\"myChartAccumulate\" width=\"400\" height=\"150\"></canvas><div id=\"accumulateTable\"></div>");
-
-                    // appending table to hold the data
-                    $("#accumulateTable").append('<table style="width:100%" class="accutable table table-sm table-bordered table-hover table-striped table-condensed text-center"><thead>' +
-                        '<tr>' +
-                        '<td>#</td>' +
-                        '<td>' + periodtext + '</td>' +
-                        '<td>Accumulated # of ' + awardtext + ' worked </td>'+
-                        '</tr>' +
-                        '</thead>' +
-                        '<tbody></tbody></table>');
-                    var labels = [];
-                    var dataDxcc = [];
-
-                    var $myTable = $('.accutable');
-                    var i = 1;
-
-                    // building the rows in the table
-                    var rowElements = data.map(function ( row ) {
-
-                        var $row = $('<tr></tr>');
-
-                        var $iterator = $('<td></td>').html(i++);
-                        var $type = $('<td></td>').html(row.year);
-                        var $content = $('<td></td>').html(row.total);
-
-                        $row.append($iterator, $type, $content);
-
-                        return $row;
-                    });
-
-                    // finally inserting the rows
-                    $myTable.append(rowElements);
-
-                    $.each(data, function(){
-                        labels.push(this.year);
-                        dataDxcc.push(this.total);
-                    });
-
-                    var ctx = document.getElementById("myChartAccumulate").getContext('2d');
-                    var myChart = new Chart(ctx, {
-                        type: 'bar',
-                        data: {
-                            labels: labels,
-                            datasets: [{
-                                label: 'Accumulated number of ' + awardtext + ' worked each ' + period,
-                                data: dataDxcc,
-                                backgroundColor: 'rgba(54, 162, 235, 0.2)',
-                                borderColor: 'rgba(54, 162, 235, 1)',
-                                borderWidth: 2,
-                            }]
-                        },
-                        options: {
-                            scales: {
-                                yAxes: [{
-                                    ticks: {
-                                        beginAtZero:true,
-                                        fontColor: color
-                                    }
-                                }],
-                                xAxes: [{
-                                    ticks: {
-                                        fontColor: color
-                                    }
-                                }]
-                            },
-                            legend: {
-                                labels: {
-                                    fontColor: color,
-                                }
-                            },
-                        }
-                    });
-                    $(".ld-ext-right").removeClass('running');
-                    $(".ld-ext-right").prop('disabled', false);
-                    $('.accutable').DataTable({
-                        responsive: false,
-                        ordering: false,
-                        "scrollY":        "400px",
-                        "scrollCollapse": true,
-                        "paging":         false,
-                        "scrollX": true,
-                        dom: 'Bfrtip',
-                        buttons: [
-                            'csv'
-                        ]
-                    });
-
-                    // using this to change color of csv-button if dark mode is chosen
-                    var background = $('body').css( "background-color");
-
-                    if (background != ('rgb(255, 255, 255)')) {
-                        $(".buttons-csv").css("color", "white");
-                    }
-                }
-            });
-        }
-    </script>
+	<script src="<?php echo base_url(); ?>assets/js/sections/accumulatedstatistics.js"></script>
 <?php } ?>
 
 <?php if ($this->uri->segment(1) == "timeplotter") { ?>
diff --git a/assets/js/sections/accumulatedstatistics.js b/assets/js/sections/accumulatedstatistics.js
new file mode 100644
index 00000000..0de4e902
--- /dev/null
+++ b/assets/js/sections/accumulatedstatistics.js
@@ -0,0 +1,130 @@
+function accumulatePlot(form) {
+	$(".ld-ext-right").addClass('running');
+	$(".ld-ext-right").prop('disabled', true);
+
+	// using this to change color of legend and label according to background color
+	var background = $('body').css( "background-color");
+	var color = 'grey';
+	if (background != ('rgb(255, 255, 255)')) {
+		color = 'white';
+	}
+
+	var award = form.awardradio.value;
+	var mode = form.mode.value;
+	var period = form.periodradio.value;
+	$.ajax({
+		url: base_url+'index.php/accumulated/get_accumulated_data',
+		type: 'post',
+		data: {'Band': form.band.value, 'Award': award, 'Mode': mode, 'Period': period},
+		success: function(data) {
+			// used for switching award text in the table and the chart
+			switch(award) {
+				case 'dxcc': var awardtext = "DXCC\'s"; break;
+				case 'was':  var awardtext = "states";break;
+				case 'iota': var awardtext = "IOTA\'s";break;
+				case 'waz':  var awardtext = "CQ zones"; break;
+			}
+
+			var periodtext = 'Year';
+			if (period == 'month') {
+				periodtext += ' + month';
+			}
+			// removing the old chart so that it will not interfere when loading chart again
+			$("#accumulateContainer").empty();
+			$("#accumulateContainer").append("<canvas id=\"myChartAccumulate\" width=\"400\" height=\"150\"></canvas><div id=\"accumulateTable\"></div>");
+
+			// appending table to hold the data
+			$("#accumulateTable").append('<table style="width:100%" class="accutable table table-sm table-bordered table-hover table-striped table-condensed text-center"><thead>' +
+				'<tr>' +
+				'<td>#</td>' +
+				'<td>' + periodtext + '</td>' +
+				'<td>Accumulated # of ' + awardtext + ' worked </td>'+
+				'</tr>' +
+				'</thead>' +
+				'<tbody></tbody></table>');
+			var labels = [];
+			var dataDxcc = [];
+
+			var $myTable = $('.accutable');
+			var i = 1;
+
+			// building the rows in the table
+			var rowElements = data.map(function ( row ) {
+
+				var $row = $('<tr></tr>');
+
+				var $iterator = $('<td></td>').html(i++);
+				var $type = $('<td></td>').html(row.year);
+				var $content = $('<td></td>').html(row.total);
+
+				$row.append($iterator, $type, $content);
+
+				return $row;
+			});
+
+			// finally inserting the rows
+			$myTable.append(rowElements);
+
+			$.each(data, function(){
+				labels.push(this.year);
+				dataDxcc.push(this.total);
+			});
+
+			var ctx = document.getElementById("myChartAccumulate").getContext('2d');
+			var myChart = new Chart(ctx, {
+				type: 'bar',
+				data: {
+					labels: labels,
+					datasets: [{
+						label: 'Accumulated number of ' + awardtext + ' worked each ' + period,
+						data: dataDxcc,
+						backgroundColor: 'rgba(54, 162, 235, 0.2)',
+						borderColor: 'rgba(54, 162, 235, 1)',
+						borderWidth: 2,
+					}]
+				},
+				options: {
+					scales: {
+						yAxes: [{
+							ticks: {
+								beginAtZero:true,
+								fontColor: color
+							}
+						}],
+						xAxes: [{
+							ticks: {
+								fontColor: color
+							}
+						}]
+					},
+					legend: {
+						labels: {
+							fontColor: color,
+						}
+					},
+				}
+			});
+			$(".ld-ext-right").removeClass('running');
+			$(".ld-ext-right").prop('disabled', false);
+			$('.accutable').DataTable({
+				responsive: false,
+				ordering: false,
+				"scrollY":        "400px",
+				"scrollCollapse": true,
+				"paging":         false,
+				"scrollX": true,
+				dom: 'Bfrtip',
+				buttons: [
+					'csv'
+				]
+			});
+
+			// using this to change color of csv-button if dark mode is chosen
+			var background = $('body').css( "background-color");
+
+			if (background != ('rgb(255, 255, 255)')) {
+				$(".buttons-csv").css("color", "white");
+			}
+		}
+	});
+}