From bcfe97957333054ec12167948956383fa6bf68b8 Mon Sep 17 00:00:00 2001
From: Andreas <andreask@online.no>
Date: Sun, 1 Nov 2020 12:36:02 +0100
Subject: [PATCH] [QSL Card image] jQuery upload, dynamically adding/deleting
 to table and carousel.

---
 application/controllers/Qsl.php               |  23 ++--
 application/models/Qsl_model.php              |   2 +
 application/views/interface_assets/footer.php | 100 +++++++++++++++++-
 application/views/view_log/qso.php            |  23 ++--
 4 files changed, 124 insertions(+), 24 deletions(-)

diff --git a/application/controllers/Qsl.php b/application/controllers/Qsl.php
index a79f7067b..7a590d15f 100644
--- a/application/controllers/Qsl.php
+++ b/application/controllers/Qsl.php
@@ -67,13 +67,8 @@ class Qsl extends CI_Controller {
             $result['back'] = $this->uploadQslCardBack($qsoid);
         }
 
-        // Set Page Title
-        $data['page_title'] = "QSL Upload";
-
-        // Load Views
-        $this->load->view('interface_assets/header', $data);
-        $this->load->view('qslcard/upload_done', $result);
-        $this->load->view('interface_assets/footer');
+        header("Content-type: application/json");
+        echo json_encode(['status' => $result]);
     }
 
     function uploadQslCardFront($qsoid) {
@@ -100,9 +95,12 @@ class Qsl extends CI_Controller {
 
             // Now we need to insert info into database about file
             $filename = $data['file_name'];
-            $this->Qsl_model->saveQsl($qsoid, $filename);
+            $insertid = $this->Qsl_model->saveQsl($qsoid, $filename);
 
-            return 'Success';
+            $result['status']  = 'Success';
+            $result['insertid'] = $insertid;
+            $result['filename'] = $filename;
+            return $result;
         }
     }
 
@@ -130,9 +128,12 @@ class Qsl extends CI_Controller {
 
             // Now we need to insert info into database about file
             $filename = $data['file_name'];
-            $this->Qsl_model->saveQsl($qsoid, $filename);
+            $insertid = $this->Qsl_model->saveQsl($qsoid, $filename);
 
-            return 'Success';
+            $result['status']  = 'Success';
+            $result['insertid'] = $insertid;
+            $result['filename'] = $filename;
+            return $result;
         }
     }
 
diff --git a/application/models/Qsl_model.php b/application/models/Qsl_model.php
index 4071ffd7d..cb7640c94 100644
--- a/application/models/Qsl_model.php
+++ b/application/models/Qsl_model.php
@@ -38,6 +38,8 @@ class Qsl_model extends CI_Model {
         );
 
         $this->db->insert('qsl_images', $data);
+
+        return $this->db->insert_id();
     }
 
     function deleteQsl($id) {
diff --git a/application/views/interface_assets/footer.php b/application/views/interface_assets/footer.php
index d716f535c..4e7764a3d 100644
--- a/application/views/interface_assets/footer.php
+++ b/application/views/interface_assets/footer.php
@@ -1449,7 +1449,6 @@ $(document).ready(function(){
                                 L.marker([lat,long], {icon: redIcon}).addTo(mymap)
                                     .bindPopup(callsign);
 
-                                mymap.on('click', onMapClick);
                             },
                         });
 
@@ -2317,7 +2316,18 @@ function deleteQsl(id) {
                             data: {'id': id
                             },
                             success: function(data) {
-                                $("#" + id).parent("tr:first").remove(); // removes mode from table
+                                $("#" + id).parent("tr:first").remove(); // removes qsl from table
+
+                                // remove qsl from carousel
+                                $(".carousel-indicators li:last-child").remove();
+                                $(".carouselimageid_"+id).remove();
+                                $('#carouselExampleIndicators').find('.carousel-item').first().addClass('active');
+
+                                // remove table and hide tab if all qsls are deleted
+                                if ($('.qsltable tr').length == 1) {
+                                    $('.qsltable').remove();
+                                    $('.qslcardtab').attr('hidden','');
+                                }
                             }
                         });
                     }
@@ -2325,5 +2335,91 @@ function deleteQsl(id) {
             });
         }
 </script>
+
+<script>
+    function uploadQsl() {
+        var baseURL= "<?php echo base_url();?>";
+        var formdata = new FormData(document.getElementById("fileinfo"));
+
+        $.ajax({
+            url: baseURL + 'index.php/qsl/uploadqsl',
+            type: 'post',
+            data: formdata,
+            enctype: 'multipart/form-data',
+            processData: false,
+            contentType: false,
+            success: function(data) {
+                if (data.status.front.status == 'Success') {
+                    if ($('.qsltable').length > 0) {
+                        $('.qsltable tr:last').after('<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></tr>');
+                        var quantity = $(".carousel-indicators li").length;
+                        $(".carousel-indicators").append('<li data-target="#carouselExampleIndicators" data-slide-to="'+quantity+'"></li>');
+                        $(".carousel-inner").append('<div class="carousel-item carouselimageid_'+data.status.front.insertid+'"><img class="d-block w-100" src="'+baseURL+'/assets/qslcard/'+data.status.front.filename+'" alt="QSL picture #'+(quantity+1)+'"></div>');
+                        $("#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>'+
+                            '</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>' +
+                            '</tr>'+
+                        '</tbody></table>');
+                        $('.qslcardtab').removeAttr('hidden');
+                        var quantity = $(".carousel-indicators li").length;
+                        $(".carousel-indicators").append('<li class="active" data-target="#carouselExampleIndicators" data-slide-to="'+quantity+'"></li>');
+                        $(".carousel-inner").append('<div class="active carousel-item carouselimageid_'+data.status.front.insertid+'"><img class="d-block w-100" src="'+baseURL+'/assets/qslcard/'+data.status.front.filename+'" alt="QSL picture #'+(quantity+1)+'"></div>');
+                        $(".carouselExampleIndicators").carousel();
+                        $("#qslcardfront").val(null);
+                    }
+
+                } else {
+                    $("#qslupload").append('<div class="alert alert-danger"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>\n' +
+                        data.status.front +
+                        '</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></tr>');
+                        var quantity = $(".carousel-indicators li").length;
+                        $(".carousel-indicators").append('<li data-target="#carouselExampleIndicators" data-slide-to="'+quantity+'"></li>');
+                        $(".carousel-inner").append('<div class="carousel-item carouselimageid_'+data.status.back.insertid+'"><img class="d-block w-100" src="'+baseURL+'/assets/qslcard/'+data.status.back.filename+'" alt="QSL picture #'+(quantity+1)+'"></div>');
+                        $("#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>'+
+                            '</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>' +
+                            '</tr>'+
+                            '</tbody></table>');
+                        $('.qslcardtab').removeAttr('hidden');
+                        var quantity = $(".carousel-indicators li").length;
+                        $(".carousel-indicators").append('<li class="active" data-target="#carouselExampleIndicators" data-slide-to="'+quantity+'"></li>');
+                        $(".carousel-inner").append('<div class="active carousel-item carouselimageid_'+data.status.back.insertid+'"><img class="d-block w-100" src="'+baseURL+'/assets/qslcard/'+data.status.back.filename+'" alt="QSL picture #'+(quantity+1)+'"></div>');
+                        $(".carouselExampleIndicators").carousel();
+                        $("#qslcardback").val(null);
+                    }
+                } else {
+                    $("#qslupload").append('<div class="alert alert-danger"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>\n' +
+                        data.status.back +
+                        '</div>');
+                }
+            }
+        });
+    }
+</script>
   </body>
 </html>
diff --git a/application/views/view_log/qso.php b/application/views/view_log/qso.php
index cafeceb9d..2440de91d 100644
--- a/application/views/view_log/qso.php
+++ b/application/views/view_log/qso.php
@@ -8,18 +8,19 @@
         <?php
         if (($this->config->item('use_auth')) && ($this->session->userdata('user_type') >= 2)) {
 
-            if (count($qslimages) > 0) {
-                echo '<li class="nav-item">
-                <a class="nav-link" id="map-tab" data-toggle="tab" href="#qslcard" role="tab" aria-controls="home" aria-selected="false">QSL Card</a>
-                </li>';
+            echo '<li ';
+            if (count($qslimages) == 0) {
+                echo 'hidden ';
             }
+                echo 'class="qslcardtab nav-item">
+                <a class="nav-link" id="qsltab" data-toggle="tab" href="#qslcard" role="tab" aria-controls="home" aria-selected="false">QSL Card</a>
+                </li>';
 
             echo '<li class="nav-item">
-            <a class="nav-link" id="map-tab" data-toggle="tab" href="#qslupload" role="tab" aria-controls="home" aria-selected="false">QSL Card Management</a>
+            <a class="nav-link" id="qslmanagementtab" data-toggle="tab" href="#qslupload" role="tab" aria-controls="home" aria-selected="false">QSL Card Management</a>
             </li>';
-
-
         }
+
         ?>
 
     </ul>
@@ -309,14 +310,14 @@
                 foreach ($qslimages as $qsl) {
                 echo '<tr>';
                     echo '<td style=\'text-align: center\'>' . $qsl->filename . '</td>';
-                    echo '<td id="'.$qsl->id.'" style=\'text-align: center\'><button onclick="deleteQsl(\''.$qsl->id.'\')" class="btn btn-sm btn-danger">Delete</button></td>';
+                    echo '<td id="'.$qsl->id.'" style=\'text-align: center\'><button onclick="deleteQsl('.$qsl->id.')" class="btn btn-sm btn-danger">Delete</button></td>';
                     echo '</tr>';
                 }
 
                 echo '</tbody></table>';
             }
             ?>
-            <form class="form" id="fileinfo" method="post" enctype="multipart/form-data" action="<?php echo site_url('qsl/uploadqsl');?>">
+            <form class="form" id="fileinfo" name="fileinfo" enctype="multipart/form-data">
                 <fieldset>
 
                     <div class="form-group">
@@ -331,7 +332,7 @@
 
                     <input type="hidden" class="form-control" id="qsoinputid" name="qsoid" value="<?php echo $row->COL_PRIMARY_KEY; ?>">
 
-                    <button  type="submit" id="button1id"  name="button1id" class="btn btn-primary">Upload QSL card image</button>
+                    <button type="button" onclick="uploadQsl();" id="button1id"  name="button1id" class="btn btn-primary">Upload QSL card image</button>
 
                 </fieldset>
             </form>
@@ -357,7 +358,7 @@
                     <?php
                     $i = 1;
                     foreach ($qslimages as $image) {
-                        echo '<div class="carousel-item';
+                        echo '<div class="carousel-item carouselimageid_' . $image->id;
                         if ($i == 1) {
                             echo ' active';
                         }