[QSL Card image] jQuery upload, dynamically adding/deleting to table and carousel.

pull/677/head
Andreas 2020-11-01 12:36:02 +01:00
rodzic 6de9ff69b0
commit bcfe979573
4 zmienionych plików z 124 dodań i 24 usunięć

Wyświetl plik

@ -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;
}
}

Wyświetl plik

@ -38,6 +38,8 @@ class Qsl_model extends CI_Model {
);
$this->db->insert('qsl_images', $data);
return $this->db->insert_id();
}
function deleteQsl($id) {

Wyświetl plik

@ -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>

Wyświetl plik

@ -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';
}