refactored sstv and qsl carousels and javascript to be a little easier to read and reason about

application/views/interface_assets/footer.php

@@ -2474,10 +2474,10 @@ if ($this->session->userdata('user_id') != null) {
 
 <script>
     function viewQsl(picture, callsign) {
-        var baseURL = "<?php echo base_url(); ?>";
+        let title = '';
-        var $textAndPic = $('<div></div>');
+        const baseURL = "<?php echo base_url(); ?>";
-        $textAndPic.append('<center><img class="img-fluid w-qsl" style="height:auto;width:auto;"src="' + baseURL + '/assets/qslcard/' + picture + '" /><center>');
+        const textAndPic = $('<div></div>').append('<center><img class="img-fluid w-qsl" style="height:auto;width:auto;"src="' + baseURL + '/assets/qslcard/' + picture + '" /><center>');
-        var title = '';
+
         if (callsign == null) {
             title = 'QSL Card';
         } else {
@@ -2487,7 +2487,7 @@ if ($this->session->userdata('user_id') != null) {
         BootstrapDialog.show({
             title: title,
             size: BootstrapDialog.SIZE_WIDE,
-            message: $textAndPic,
+            message: textAndPic,
             buttons: [{
                 label: lang_admin_close,
                 action: function(dialogRef) {
@@ -2499,6 +2499,7 @@ if ($this->session->userdata('user_id') != null) {
 </script>
 <script>
     function deleteQsl(id) {
+        const baseURL = "<?php echo base_url(); ?>";
         BootstrapDialog.confirm({
             title: 'DANGER',
             message: 'Warning! Are you sure you want to delete this QSL card?',
@@ -2508,7 +2509,6 @@ if ($this->session->userdata('user_id') != null) {
             btnOKClass: 'btn-danger',
             callback: function(result) {
                 if (result) {
-                    var baseURL = "<?php echo base_url(); ?>";
                     $.ajax({
                         url: baseURL + 'index.php/qsl/delete',
                         type: 'post',
@@ -2535,18 +2535,16 @@ if ($this->session->userdata('user_id') != null) {
         });
     }
 </script>
-
 <script>
     function viewSstv(picture) {
-        var baseURL = "<?php echo base_url(); ?>";
+        const title = 'SSTV Image';
-        var $textAndPic = $('<div></div>');
+        const baseURL = "<?php echo base_url(); ?>";
-        $textAndPic.append('<center><img class="img-fluid w-qsl" style="height:auto;width:auto;"src="' + baseURL + '/assets/sstvimages/' + picture + '" /><center>');
+        const textAndPic = $('<div></div>').append(`<center><img class="img-fluid w-qsl" style="height:auto;width:auto;"src="${baseURL}/assets/sstvimages/${picture}" /><center>`);
-        title = 'SSTV Image';
 
         BootstrapDialog.show({
             title: title,
             size: BootstrapDialog.SIZE_WIDE,
-            message: $textAndPic,
+            message: textAndPic,
             buttons: [{
                 label: lang_admin_close,
                 action: function(dialogRef) {
@@ -2555,9 +2553,9 @@ if ($this->session->userdata('user_id') != null) {
             }]
         });
     }
-</script>
+
-<script>
     function deleteSstv(id) {
+        const baseURL = "<?php echo base_url(); ?>";
         BootstrapDialog.confirm({
             title: 'DANGER',
             message: 'Warning! Are you sure you want to delete this SSTV Image?',
@@ -2567,7 +2565,6 @@ if ($this->session->userdata('user_id') != null) {
             btnOKClass: 'btn-danger',
             callback: function(result) {
                 if (result) {
-                    var baseURL = "<?php echo base_url(); ?>";
                     $.ajax({
                         url: baseURL + 'index.php/sstv/delete',
                         type: 'post',
@@ -2747,9 +2744,53 @@ if ($this->session->userdata('user_id') != null) {
             }
         });
     }
+
+    function createTable(title, type) {
+        const tableClass = type === 'sstv' ? 'sstvtable' : 'qsltable';
+        return `<table style="width:100%" class="${tableClass} table table-sm table-bordered table-hover table-striped table-condensed">` +
+                    '<thead>' +
+                        '<tr>' +
+                        '<th style="text-align: center">' + title + '</th>' +
+                        '<th style="text-align: center"></th>' +
+                        '<th style="text-align: center"></th>' +
+                        '</tr>' +
+                    '</thead>' +
+                    '<tbody></tbody>' +
+                '</table>'
+    }
+
+    function createTableRow(image, type){
+        const viewFunction = type === 'sstv' ? 'viewSstv' : 'viewQsl';
+        const deleteFunction = type === 'sstv' ? 'deleteSstv' : 'deleteQsl';
+        return '<tr><td style="text-align: center">' + image.filename + '</td>' +
+                    `<td id="${image.insertid}" style="text-align: center"><button onclick="${deleteFunction}(${image.insertid});" class="btn btn-sm btn-danger">Delete</button></td>` +
+                    `<td style="text-align: center"><button onclick="${viewFunction}('${image.filename}')" class="btn btn-sm btn-success">View</button></td>` +
+                '</tr>'
+    }
+
+    function handleSSTVImageUpload(sstvImage){
+        const baseURL = "<?php echo base_url(); ?>";
+        const numCarouselItems = $('#sstv-carousel-indicators li').length;
+
+        // Next, append card to the table
+        $('.sstvtable').length === 0 ? $("#sstvupload").prepend(createTable("SSTV image file", "sstv")) : null;
+        $('.sstvtable tbody:last').append(createTableRow(sstvImage, "sstv"));
+
+        // Append card to the carousel
+        const newCarouselItem = '<div class="' + (numCarouselItems === 0 ? 'active ' : '') + 'carousel-item carouselimageid_' + sstvImage.insertid +'"><img class="img-fluid w-qsl" src="' + baseURL + '/assets/sstvimages/' + sstvImage.filename +  '" alt="QSL picture"></div>';
+        $("#sstv-carousel-inner").append(newCarouselItem);
+
+        // Append new carousel indicator
+        const newCarouselIndicator = '<li class="' + (numCarouselItems === 0 ? 'active ' : '') + '" data-bs-target="#sstvCarouselIndicators" data-bs-slide-to="' + numCarouselItems + '"></li>';
+        $("#sstv-carousel-indicators").append(newCarouselIndicator);
+
+        // Initialize the bootstrap carousel
+        $("#sstvCarouselIndicators").carousel();
+    }
+
     function uploadSSTV() {
-        var baseURL = "<?php echo base_url(); ?>";
+        const baseURL = "<?php echo base_url(); ?>";
-        var formdata = new FormData(document.getElementById("sstvinfo"));
+        const formdata = new FormData(document.getElementById("sstvinfo"));
         
         $.ajax({
             url: baseURL + 'index.php/sstv/uploadsstv',
@@ -2759,67 +2800,49 @@ if ($this->session->userdata('user_id') != null) {
             processData: false,
             contentType: false,
             success: function(data) {
+                // Iterate over each SSTV image and handle it
                 data.forEach((sstvImage) => {
                     if (sstvImage.status == 'Success') {
-                    // Check if the table exists, if it does we'll update it, if not, we'll create it
+                        // Show the SSTV image tab
-                    if ($('.sstvtable').length > 0) {
-                        // Update table on Manage SSTV Image tab
-                        $('.sstvtable tr:last').after('<tr><td style="text-align: center">' + sstvImage.filename + '</td>' +
-                            '<td id="' + sstvImage.insertid + '"style="text-align: center"><button onclick="deleteSstv(' + sstvImage.insertid + ');" class="btn btn-sm btn-danger">Delete</button></td>' +
-                            '<td style="text-align: center"><button onclick="viewSstv(\'' + sstvImage.filename + '\')" class="btn btn-sm btn-success">View</button></td>' +
-                            '</tr>');
-                        
-                        // Update SSTV Image carousel
-                        var quantity = $("#sstv-carousel-indicators").length;
-                        $("#sstvCarouselIndicators .sstv-carousel-indicators").append('<li data-bs-target="#sstvCarouselIndicators" data-bs-slide-to="' + quantity + '"></li>');
-                        $("#sstvCarouselIndicators .carousel-inner").append('<center><div class="carousel-item carouselimageid_' + sstvImage.insertid + '"><img class="img-fluid w-qsl" src="' + baseURL + '/assets/sstvimages/' + sstvImage.filename + '" alt="SSTV picture #' + (quantity + 1) + '"></div></center>');
-
-                        // Initialize the bootstrap image carousel
-                        $("#sstvCarouselIndicators").carousel();
-
-                        // Reset the image input
-                        $("#sstvimages").val(null);
-                    } else {
-                        // Create table on Manage SSTV Image tab
-                        $("#sstvupload").prepend('<table style="width:100%" class="sstvtable table table-sm table-bordered table-hover table-striped table-condensed">' +
-                            '<thead>' +
-                            '<tr>' +
-                            '<th style="text-align: center">SSTV image file</th>' +
-                            '<th style="text-align: center"></th>' +
-                            '<th style="text-align: center"></th>' +
-                            '</tr>' +
-                            '</thead><tbody>' +
-                            '<tr><td style="text-align: center">' + sstvImage.filename + '</td>' +
-                            '<td id="' + sstvImage.insertid + '"style="text-align: center"><button onclick="deleteSstv(' + sstvImage.insertid + ');" class="btn btn-sm btn-danger">Delete</button></td>' +
-                            '<td style="text-align: center"><button onclick="viewSstv(\'' + sstvImage.filename + '\')" class="btn btn-sm btn-success">View</button></td>' +
-                            '</tr>' +
-                            '</tbody></table>');
-
-                        //  Make the SSTV image tab visible by remvoving the hidden attribute 
                         $('.sstvimagetab').removeAttr('hidden');
                         
-                        // Create SSTV Image carousel
+                        // Handle the SSTV image upload
-                        var quantity = $("#sstv-carousel-indicators").length;
+                        handleSSTVImageUpload(sstvImage);
-                        $("#sstv-carousel-indicators").append('<li class="active" data-bs-target="#sstvCarouselIndicators" data-bs-slide-to="' + quantity + '" />');
-                        $("#sstv-carousel-inner").append('<center><div class="active carousel-item carouselimageid_' + sstvImage.insertid + '"><img class="img-fluid w-qsl" src="' + baseURL + '/assets/sstvimages/' + sstvImage.filename + '" alt="SSTV picture #' + (quantity + 1) + '"></div></center>');
-
-                        // Initialize the bootstrap carousel
-                        $("#sstvCarouselIndicators").carousel();
-                    }
-
                     } else if (sstvImage.status != '') {
-                    $("#sstvupload").append('<div class="alert alert-danger">SSTV Image:' +
+                        $("#sstvupload").append('<div class="alert alert-danger">SSTV image:' +
                             sstvImage.error +
                             '</div>');
                     }
+                    // Reset the image inputs
+                    $("#sstvimages").val(null);
                 })
             }
         });
     }
 
+    function handleQslCardUpload(qslCard) {
+        const baseURL = "<?php echo base_url(); ?>";
+        const numCarouselItems = $('#qsl-carousel-indicators li').length;
+
+        // append card to the qsl management table
+        $('.qsltable').length === 0 ? $("#qslupload").prepend(createTable("QSL image file", "qsl")) : null;
+        $('.qsltable tbody:last').append(createTableRow(qslCard, "qsl"));
+
+        // Append card image to the carousel
+        const newCarouselItem = '<div class="' + (numCarouselItems === 0 ? 'active ' : '') + 'carousel-item carouselimageid_' + qslCard.insertid +'"><img class="img-fluid w-qsl" src="' + baseURL + '/assets/qslcard/' + qslCard.filename +  '" alt="QSL picture"></div>';
+        $("#qsl-carousel-inner").append(newCarouselItem);
+
+        // Append carousel indicator for the new card
+        const newCarouselIndicator = '<li class="' + (numCarouselItems === 0 ? 'active ' : '') + '" data-bs-target="#qslCarouselIndicators" data-bs-slide-to="' + numCarouselItems + '"></li>';
+        $("#qsl-carousel-indicators").append(newCarouselIndicator);
+
+        // Initialize the bootstrap carousel
+        $("#qslCarouselIndicators").carousel();
+    }
+
     function uploadQsl() {
-        var baseURL = "<?php echo base_url(); ?>";
+        const baseURL = "<?php echo base_url(); ?>";
-        var formdata = new FormData(document.getElementById("fileinfo"));
+        const formdata = new FormData(document.getElementById("fileinfo"));
 
         $.ajax({
             url: baseURL + 'index.php/qsl/uploadqsl',
@@ -2829,80 +2852,29 @@ if ($this->session->userdata('user_id') != null) {
             processData: false,
             contentType: false,
             success: function(data) {
+                const qslCard = data.status || {}
                 if (data.status.front.status == 'Success') {
-                    if ($('.qsltable').length > 0) {
+                    handleQslCardUpload(qslCard.front);
-                        $('.qsltable tr:last').after('<tr><td style="text-align: center">' + data.status.front.filename + '</td>' +
+                } else if (qslCard.front.status != '') {
-                            '<td id="' + data.status.front.insertid + '"style="text-align: center"><button onclick="deleteQsl(' + data.status.front.insertid + ');" class="btn btn-sm btn-danger">Delete</button></td>' +
+                    $("#qslupload").append('<div class="alert alert-danger">Front QSL Card:' +
-                            '<td style="text-align: center"><button onclick="viewQsl(\'' + data.status.front.filename + '\')" class="btn btn-sm btn-success">View</button></td>' +
+                        qslCard.front.error +
-                            '</tr>');
+                        '</div>');
-                        var quantity = $(".carousel-indicators li").length;
-                        $(".carousel-indicators").append('<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="' + quantity + '"></li>');
-                        $(".carousel-inner").append('<center><div class="carousel-item carouselimageid_' + data.status.front.insertid + '"><img class="img-fluid w-qsl" src="' + baseURL + '/assets/qslcard/' + data.status.front.filename + '" alt="QSL picture #' + (quantity + 1) + '"></div></center>');
-                        $("#qslcardfront").val(null);
-                    } else {
-                        $("#qslupload").prepend('<table style="width:100%" class="qsltable table table-sm table-bordered table-hover table-striped table-condensed">' +
-                            '<thead>' +
-                            '<tr>' +
-                            '<th style="text-align: center">QSL image file</th>' +
-                            '<th style="text-align: center"></th>' +
-                            '<th style="text-align: center"></th>' +
-                            '</tr>' +
-                            '</thead><tbody>' +
-                            '<tr><td style="text-align: center">' + data.status.front.filename + '</td>' +
-                            '<td id="' + data.status.front.insertid + '"style="text-align: center"><button onclick="deleteQsl(' + data.status.front.insertid + ');" class="btn btn-sm btn-danger">Delete</button></td>' +
-                            '<td style="text-align: center"><button onclick="viewQsl(\'' + data.status.front.filename + '\')" class="btn btn-sm btn-success">View</button></td>' +
-                            '</tr>' +
-                            '</tbody></table>');
-                        $('.qslcardtab').removeAttr('hidden');
-                        var quantity = $(".carousel-indicators li").length;
-                        $(".carousel-indicators").append('<li class="active" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="' + quantity + '"></li>');
-                        $(".carousel-inner").append('<center><div class="active carousel-item carouselimageid_' + data.status.front.insertid + '"><img class="img-fluid w-qsl" src="' + baseURL + '/assets/qslcard/' + data.status.front.filename + '" alt="QSL picture #' + (quantity + 1) + '"></div></center>');
-                        $(".carouselExampleIndicators").carousel();
-                        $("#qslcardfront").val(null);
                 }
 
-                } else if (data.status.front.status != '') {
+                if (qslCard.back.status == 'Success') {
-                    $("#qslupload").append('<div class="alert alert-danger">Front QSL Card:' +
+                    handleQslCardUpload(qslCard.back);
-                        data.status.front.error +
+                } else if (qslCard.back.status != '') {
-                        '</div>');
-                }
-                if (data.status.back.status == 'Success') {
-                    var qsoid = $("#qsoid").text();
-                    if ($('.qsltable').length > 0) {
-                        $('.qsltable tr:last').after('<tr><td style="text-align: center">' + data.status.back.filename + '</td>' +
-                            '<td id="' + data.status.back.insertid + '"style="text-align: center"><button onclick="deleteQsl(' + data.status.back.insertid + ');" class="btn btn-sm btn-danger">Delete</button></td>' +
-                            '<td style="text-align: center"><button onclick="viewQsl(\'' + data.status.back.filename + '\')" class="btn btn-sm btn-success">View</button></td>' +
-                            '</tr>');
-                        var quantity = $(".carousel-indicators li").length;
-                        $(".carousel-indicators").append('<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="' + quantity + '"></li>');
-                        $(".carousel-inner").append('<center><div class="carousel-item carouselimageid_' + data.status.back.insertid + '"><img class="img-fluid w-qsl" src="' + baseURL + '/assets/qslcard/' + data.status.back.filename + '" alt="QSL picture #' + (quantity + 1) + '"></div></center>');
-                        $("#qslcardback").val(null);
-                    } else {
-                        $("#qslupload").prepend('<table style="width:100%" class="qsltable table table-sm table-bordered table-hover table-striped table-condensed">' +
-                            '<thead>' +
-                            '<tr>' +
-                            '<th style="text-align: center">QSL image file</th>' +
-                            '<th style="text-align: center"></th>' +
-                            '<th style="text-align: center"></th>' +
-                            '</tr>' +
-                            '</thead><tbody>' +
-                            '<tr><td style="text-align: center">' + data.status.back.filename + '</td>' +
-                            '<td id="' + data.status.back.insertid + '"style="text-align: center"><button onclick="deleteQsl(' + data.status.back.insertid + ');" class="btn btn-sm btn-danger">Delete</button></td>' +
-                            '<td><button onclick="viewQsl(\'' + data.status.back.filename + '\')" class="btn btn-sm btn-success">View</button></td>' +
-                            '</tr>' +
-                            '</tbody></table>');
-                        $('.qslcardtab').removeAttr('hidden');
-                        var quantity = $(".carousel-indicators li").length;
-                        $(".carousel-indicators").append('<li class="active" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="' + quantity + '"></li>');
-                        $(".carousel-inner").append('<center><div class="active carousel-item carouselimageid_' + data.status.back.insertid + '"><img class="img-fluid w-qsl" src="' + baseURL + '/assets/qslcard/' + data.status.back.filename + '" alt="QSL picture #' + (quantity + 1) + '"></div></center>');
-                        $(".carouselExampleIndicators").carousel();
-                        $("#qslcardback").val(null);
-                    }
-                } else if (data.status.back.status != '') {
                     $("#qslupload").append('<div class="alert alert-danger">\nBack QSL Card: ' +
-                        data.status.back.error +
+                        qslCard.back.error +
                         '</div>');
                 }
+
+                // Show the QSL card tab
+                $('.qslcardtab').removeAttr('hidden');
+
+                // Reset the image inputs
+                $("#qslcardfront").val(null);
+                $("#qslcardback").val(null);
             }
         });
     }

application/views/qslcard/qslcarousel.php

@@ -1,10 +1,9 @@
-<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
+<div id="qslCarouselIndicators" class="carousel slide" data-bs-ride="carousel">
-<?php if (count($qslimages) > 1) { ?>
+    <ol class="carousel-indicators" id="qsl-carousel-indicators">
-<ol class="carousel-indicators">
         <?php
         $i = 0;
         foreach ($qslimages as $image) {
-        echo '<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="' . $i . '"';
+            echo '<li data-bs-target="#qslCarouselIndicators" data-bs-slide-to="' . $i . '"';
             if ($i == 0) {
                 echo 'class="active"';
             }
@@ -13,9 +12,7 @@
         }
         ?>
     </ol>
-<?php } ?>
+    <div id="qsl-carousel-inner" class="carousel-inner">    
-<div class="carousel-inner">
-
         <?php
             $i = 1;
             foreach ($qslimages as $image) {
@@ -29,14 +26,12 @@
             }
         ?>
     </div>
-<?php if (count($qslimages) > 1) { ?>
+    <a class="carousel-control-prev" href="#qslCarouselIndicators" role="button" data-bs-slide="prev">
-	<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Previous</span>
     </a>
-	<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
+    <a class="carousel-control-next" href="#qslCarouselIndicators" role="button" data-bs-slide="next">
         <span class="carousel-control-next-icon" aria-hidden="true"></span>
         <span class="visually-hidden">Next</span>
     </a>
-<?php } ?>
 </div>

application/views/sstv/sstvcarousel.php

@@ -13,7 +13,6 @@
         ?>
     </ol>
     <div id="sstv-carousel-inner" class="carousel-inner">
-
         <?php
             $i = 1;
             foreach ($sstvimages as $image) {