kopia lustrzana https://github.com/magicbug/Cloudlog
[QSL Card image] jQuery upload, dynamically adding/deleting to table and carousel.
rodzic
6de9ff69b0
commit
bcfe979573
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -38,6 +38,8 @@ class Qsl_model extends CI_Model {
|
|||
);
|
||||
|
||||
$this->db->insert('qsl_images', $data);
|
||||
|
||||
return $this->db->insert_id();
|
||||
}
|
||||
|
||||
function deleteQsl($id) {
|
||||
|
|
|
@ -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">×</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">×</a>\n' +
|
||||
data.status.back +
|
||||
'</div>');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -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';
|
||||
}
|
||||
|
|
Ładowanie…
Reference in New Issue