yetangitu/Oinktube
1
0
Fork 0
mirror of https://github.com/DanielnetoDotCom/YouPHPTube synced 2025-10-06 03:50:04 +02:00
Code Issues Releases Wiki Activity

Update

Browse source
This commit is contained in:
Daniel Neto 2024-10-10 14:53:02 -03:00
parent b1154fe991
commit e734e34508
4 changed files with 111 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

2
objects/functions.php
View file

@ -7312,7 +7312,7 @@ function getTourHelpButton($stepsFileRelativePath, $class = 'btn btn-default', $
$label = __('Help');
}
}
return "<button class=\"startTourBtn {$class}\" onclick=\"startTour('{$stepsFileRelativePath}')\"><i class=\"fa-solid fa-circle-question\"></i> {$label}</button>";
return "<button type=\"button\" class=\"startTourBtn {$class}\" onclick=\"startTour('{$stepsFileRelativePath}')\"><i class=\"fa-solid fa-circle-question\"></i> {$label}</button>";
}
function getInfoButton($info)

67
plugin/AD_Server/reports.help.json Normal file
View file

@ -0,0 +1,67 @@
[
{
"element": "#report-form",
"intro": "This is the form where you can filter your ad report by date range, campaign source, event type, and report type.",
"position": "top"
},
{
"element": "#date-range",
"intro": "Select a date range for your report. You can choose from preset ranges or manually enter a custom date range below.",
"position": "right"
},
{
"element": "#start-date",
"intro": "If you select a custom date range, use this field to specify the start date for your report.",
"position": "right"
},
{
"element": "#end-date",
"intro": "Specify the end date here for your custom date range.",
"position": "right"
},
{
"element": "#campaign-type",
"intro": "Choose the source of the ad campaigns. You can select ads from your own videos or third-party sources like Google Ads.",
"position": "right"
},
{
"element": "#event-type",
"intro": "Select the type of ad event you want to analyze (e.g., AdStarted, AdClicked, AdCompleted). You can also leave it blank to include all event types.",
"position": "right"
},
{
"element": "#report-type",
"intro": "Choose the type of report you want to generate. Different options will display various views of your ad data.",
"position": "right"
},
{
"element": "#videos-select-container",
"intro": "If you're generating a report for a specific video, use this field to search for and select the video.",
"position": "right"
},
{
"element": "#users-select-container",
"intro": "If you're generating a report for a specific user, search for and select the user here.",
"position": "right"
},
{
"element": "#genReports",
"intro": "After setting your filters, click here to generate the report.",
"position": "top"
},
{
"element": "#reportChart",
"intro": "This is the chart that visualizes the ad events based on your selected filters. You can hover over or click on the bars to see more details.",
"position": "top"
},
{
"element": "#reportTable",
"intro": "Here is the detailed table of ad data. Each row represents an event, user, or video depending on your report type.",
"position": "top"
},
{
"element": "#download-csv-btn",
"intro": "Click this button to download the report as a CSV file for further analysis.",
"position": "top"
}
]

15
plugin/AD_Server/reports.php
View file

@ -126,8 +126,13 @@ foreach ($types as $key => $value) {
<!-- Submit Button Row -->
<div class="row">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary btn-block"><?php echo __('Generate Report'); ?></button>
<div class="col-md-4 text-center">
<?php
echo getTourHelpButton('plugin/AD_Server/reports.help.json', 'btn btn-default btn-block');
?>
</div>
<div class="col-md-8 text-center">
<button type="submit" class="btn btn-primary btn-block" id="genReports"><i class="fas fa-chart-bar"></i> <?php echo __('Generate Report'); ?></button>
</div>
</div>
</form>
@ -158,7 +163,7 @@ foreach ($types as $key => $value) {
</tbody>
</table>
<!-- Add a button to download CSV -->
<button id="download-csv-btn" class="btn btn-success btn-block"><?php echo __('Download CSV'); ?></button>
<button id="download-csv-btn" class="btn btn-success btn-block"><i class="fas fa-file-csv"></i> <?php echo __('Download CSV'); ?></button>
</div>
</div>
@ -285,7 +290,7 @@ foreach ($types as $key => $value) {
if (typeof item.campaign_name !== 'undefined' && !empty(item.campaign_name)) {
videoLabel.push(item.campaign_name);
videoLabel.push(item.type);
}else if (typeof item.type !== 'undefined' && !empty(item.type)) {
} else if (typeof item.type !== 'undefined' && !empty(item.type)) {
if (empty(videoLabel)) {
videoLabel.push('Google Ads IMA');
}
@ -293,7 +298,7 @@ foreach ($types as $key => $value) {
}
videoLabel = videoLabel.map(function(label) {
if(typeof label == 'undefined'){
if (typeof label == 'undefined') {
return '';
}
return label.length > 40 ? label.substring(0, 40) + '...' : label;

36
view/js/script.js
View file

@ -4332,55 +4332,83 @@ function displayJsonAsHtml(jsonObjectOrString) {
}
function startTour(stepsFileRelativePath) {
console.log('Tour starting with steps file:', stepsFileRelativePath);
let id = stepsFileRelativePath.replace(/[^a-zA-Z0-9]/g, '');
console.log('Generated ID:', id);
// Check if Intro.js is already loaded
if (typeof introJs === 'undefined') {
console.log('Intro.js is not loaded, loading Intro.js now...');
// Load Intro.js CSS
$('head').append('<link rel="stylesheet" href="' + webSiteRootURL + 'node_modules/intro.js/minified/introjs.min.css" type="text/css" />');
console.log('Intro.js CSS loaded.');
if (isCurrentThemeDark) {
console.log('Applying dark theme for Intro.js.');
$('head').append('<link rel="stylesheet" href="' + webSiteRootURL + 'node_modules/intro.js/themes/introjs-modern.css" type="text/css" />');
}
// Load Intro.js JavaScript
console.log('Loading Intro.js JavaScript...');
$.getScript(webSiteRootURL + 'node_modules/intro.js/minified/intro.min.js', function () {
console.log('Intro.js JavaScript loaded successfully.');
loadAndStartTour(stepsFileRelativePath);
}).fail(function(jqxhr, settings, exception) {
console.error('Failed to load Intro.js script:', exception);
});
} else {
console.log('Intro.js is already loaded, starting the tour directly...');
loadAndStartTour(stepsFileRelativePath);
}
function loadAndStartTour(stepsFileRelativePath) {
console.log('Loading tour steps from:', webSiteRootURL + stepsFileRelativePath);
// Fetch the tour steps from a server
$.ajax({
url: webSiteRootURL + stepsFileRelativePath, // URL to the server-side script that returns JSON
type: 'GET',
dataType: 'json',
success: function (response) {
console.log('Tour steps fetched successfully:', response);
// Initialize the tour with the fetched data
var tour = introJs();
console.log('Filtering tour steps based on element visibility.');
var filteredSteps = $.grep(response, function (step) {
var $element = $(step.element);
// Only include steps where the element exists and is fully visible (not in a hidden parent)
return $element.length > 0 && isElementVisible($element);
var isVisible = $element.length > 0 && isElementVisible($element);
console.log('Step element:', step.element, 'Visible:', isVisible);
return isVisible;
});
console.log('Filtered steps:', filteredSteps);
tour.setOptions({
steps: filteredSteps
});
console.log('Starting the tour...');
tour.start();
},
error: function (xhr, status, error) {
console.log("Error fetching tour data: " + error);
console.error('Error fetching tour data:', error);
}
});
}
function isElementVisible($element) {
var visibility = $element.is(':visible') && $element.closest(':hidden').length === 0;
console.log('Element visibility check for', $element, ':', visibility);
// Check if the element itself and its parent chain are visible
return $element.is(':visible') && $element.closest(':hidden').length === 0;
return visibility;
}
}
function findIndex(value, array) {
return array.indexOf(value);
}