goodspeed/Cloudlog
1
0
派生 0
代码 工单 合并请求 项目 版本发布 软件包 百科 动态 Actions

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

浏览代码
这个提交包含在：
Patrick Burns 2024-04-03 21:50:47 -05:00
父节点 f8eeaab064
当前提交 b5a7bc2847
共有 3 个文件被更改，包括 160 次插入 和 194 次删除
显示统计信息 下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件

244
application/views/interface_assets/footer.php
查看文件

@ -2474,10 +2474,10 @@ if ($this->session->userdata('user_id') != null) {
<script> <script>
function viewQsl(picture, callsign) { 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) { if (callsign == null) {
title = 'QSL Card'; title = 'QSL Card';
} else { } else {
@ -2487,7 +2487,7 @@ if ($this->session->userdata('user_id') != null) {
BootstrapDialog.show({ BootstrapDialog.show({
title: title, title: title,
size: BootstrapDialog.SIZE_WIDE, size: BootstrapDialog.SIZE_WIDE,
message: $textAndPic, message: textAndPic,
buttons: [{ buttons: [{
label: lang_admin_close, label: lang_admin_close,
action: function(dialogRef) { action: function(dialogRef) {
@ -2499,6 +2499,7 @@ if ($this->session->userdata('user_id') != null) {
</script> </script>
<script> <script>
function deleteQsl(id) { function deleteQsl(id) {
const baseURL = "<?php echo base_url(); ?>";
BootstrapDialog.confirm({ BootstrapDialog.confirm({
title: 'DANGER', title: 'DANGER',
message: 'Warning! Are you sure you want to delete this QSL card?', 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', btnOKClass: 'btn-danger',
callback: function(result) { callback: function(result) {
if (result) { if (result) {
var baseURL = "<?php echo base_url(); ?>";
$.ajax({ $.ajax({
url: baseURL + 'index.php/qsl/delete', url: baseURL + 'index.php/qsl/delete',
type: 'post', type: 'post',
@ -2535,18 +2535,16 @@ if ($this->session->userdata('user_id') != null) {
}); });
} }
</script> </script>
<script> <script>
function viewSstv(picture) { 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({ BootstrapDialog.show({
title: title, title: title,
size: BootstrapDialog.SIZE_WIDE, size: BootstrapDialog.SIZE_WIDE,
message: $textAndPic, message: textAndPic,
buttons: [{ buttons: [{
label: lang_admin_close, label: lang_admin_close,
action: function(dialogRef) { action: function(dialogRef) {
@ -2555,9 +2553,9 @@ if ($this->session->userdata('user_id') != null) {
}] }]
}); });
} }
</script>
<script>
function deleteSstv(id) { function deleteSstv(id) {
const baseURL = "<?php echo base_url(); ?>";
BootstrapDialog.confirm({ BootstrapDialog.confirm({
title: 'DANGER', title: 'DANGER',
message: 'Warning! Are you sure you want to delete this SSTV Image?', 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', btnOKClass: 'btn-danger',
callback: function(result) { callback: function(result) {
if (result) { if (result) {
var baseURL = "<?php echo base_url(); ?>";
$.ajax({ $.ajax({
url: baseURL + 'index.php/sstv/delete', url: baseURL + 'index.php/sstv/delete',
type: 'post', 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() { 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({ $.ajax({
url: baseURL + 'index.php/sstv/uploadsstv', url: baseURL + 'index.php/sstv/uploadsstv',
@ -2759,67 +2800,49 @@ if ($this->session->userdata('user_id') != null) {
processData: false, processData: false,
contentType: false, contentType: false,
success: function(data) { success: function(data) {
// Iterate over each SSTV image and handle it
data.forEach((sstvImage) => { data.forEach((sstvImage) => {
if (sstvImage.status == 'Success') { 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'); $('.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 + '" />'); } else if (sstvImage.status != '') {
$("#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>'); $("#sstvupload").append('<div class="alert alert-danger">SSTV image:' +
sstvImage.error +
// Initialize the bootstrap carousel '</div>');
$("#sstvCarouselIndicators").carousel();
} }
// Reset the image inputs
} else if (sstvImage.status != '') { $("#sstvimages").val(null);
$("#sstvupload").append('<div class="alert alert-danger">SSTV Image:' +
sstvImage.error +
'</div>');
}
}) })
} }
}); });
} }
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() { 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({ $.ajax({
url: baseURL + 'index.php/qsl/uploadqsl', url: baseURL + 'index.php/qsl/uploadqsl',
@ -2829,80 +2852,29 @@ if ($this->session->userdata('user_id') != null) {
processData: false, processData: false,
contentType: false, contentType: false,
success: function(data) { success: function(data) {
const qslCard = data.status || {}
if (data.status.front.status == 'Success') { 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>' +
'<td style="text-align: center"><button onclick="viewQsl(\'' + data.status.front.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.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 != '') {
$("#qslupload").append('<div class="alert alert-danger">Front QSL Card:' + $("#qslupload").append('<div class="alert alert-danger">Front QSL Card:' +
data.status.front.error + qslCard.front.error +
'</div>'); '</div>');
} }
if (data.status.back.status == 'Success') {
var qsoid = $("#qsoid").text(); if (qslCard.back.status == 'Success') {
if ($('.qsltable').length > 0) { handleQslCardUpload(qslCard.back);
$('.qsltable tr:last').after('<tr><td style="text-align: center">' + data.status.back.filename + '</td>' + } else if (qslCard.back.status != '') {
'<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: ' + $("#qslupload").append('<div class="alert alert-danger">\nBack QSL Card: ' +
data.status.back.error + qslCard.back.error +
'</div>'); '</div>');
} }
// Show the QSL card tab
$('.qslcardtab').removeAttr('hidden');
// Reset the image inputs
$("#qslcardfront").val(null);
$("#qslcardback").val(null);
} }
}); });
} }

75
application/views/qslcard/qslcarousel.php
查看文件

@ -1,42 +1,37 @@
<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
<?php $i = 0;
$i = 0; foreach ($qslimages as $image) {
foreach ($qslimages as $image) { echo '<li data-bs-target="#qslCarouselIndicators" data-bs-slide-to="' . $i . '"';
echo '<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="' . $i . '"'; if ($i == 0) {
if ($i == 0) { echo 'class="active"';
echo 'class="active"'; }
$i++;
echo '></li>';
} }
$i++; ?>
echo '></li>'; </ol>
} <div id="qsl-carousel-inner" class="carousel-inner">
?> <?php
</ol> $i = 1;
<?php } ?> foreach ($qslimages as $image) {
<div class="carousel-inner"> echo '<div class="text-center carousel-item carouselimageid_' . $image->id;
if ($i == 1) {
<?php echo ' active';
$i = 1; }
foreach ($qslimages as $image) { echo '">';
echo '<div class="text-center carousel-item carouselimageid_' . $image->id; echo '<img class="img-fluid w-qsl" src="' . base_url() . '/assets/qslcard/' . $image->filename .'" alt="QSL picture #'. $i++.'">';
if ($i == 1) { echo '</div>';
echo ' active'; }
} ?>
echo '">'; </div>
echo '<img class="img-fluid w-qsl" src="' . base_url() . '/assets/qslcard/' . $image->filename .'" alt="QSL picture #'. $i++.'">'; <a class="carousel-control-prev" href="#qslCarouselIndicators" role="button" data-bs-slide="prev">
echo '</div>'; <span class="carousel-control-prev-icon" aria-hidden="true"></span>
} <span class="visually-hidden">Previous</span>
?> </a>
</div> <a class="carousel-control-next" href="#qslCarouselIndicators" role="button" data-bs-slide="next">
<?php if (count($qslimages) > 1) { ?> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev"> <span class="visually-hidden">Next</span>
<span class="carousel-control-prev-icon" aria-hidden="true"></span> </a>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" 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> </div>

35
application/views/sstv/sstvcarousel.php
查看文件

@ -13,26 +13,25 @@
?> ?>
</ol> </ol>
<div id="sstv-carousel-inner" class="carousel-inner"> <div id="sstv-carousel-inner" class="carousel-inner">
<?php <?php
$i = 1; $i = 1;
foreach ($sstvimages as $image) { foreach ($sstvimages as $image) {
echo '<div class="text-center carousel-item carouselimageid_' . $image->id; echo '<div class="text-center carousel-item carouselimageid_' . $image->id;
if ($i == 1) { if ($i == 1) {
echo ' active'; echo ' active';
}
echo '">';
echo '<img class="img-fluid w-qsl" src="' . base_url() . '/assets/sstvimages/' . $image->filename .'" alt="SSTV picture #'. $i++.'">';
echo '</div>';
} }
echo '">';
echo '<img class="img-fluid w-qsl" src="' . base_url() . '/assets/sstvimages/' . $image->filename .'" alt="SSTV picture #'. $i++.'">';
echo '</div>';
}
?> ?>
</div> </div>
<a class="carousel-control-prev" href="#sstvCarouselIndicators" role="button" data-bs-slide="prev"> <a class="carousel-control-prev" href="#sstvCarouselIndicators" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span> <span class="visually-hidden">Previous</span>
</a> </a>
<a class="carousel-control-next" href="#sstvCarouselIndicators" role="button" data-bs-slide="next"> <a class="carousel-control-next" href="#sstvCarouselIndicators" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span> <span class="visually-hidden">Next</span>
</a> </a>
</div> </div>