From 3c7f82b1ae5ded7db2a23302300318110217e4a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacek=20Fefli=C5=84ski?= <feflik@gmail.com>
Date: Wed, 22 Apr 2026 14:04:56 +0200
Subject: [PATCH] Genetrowanie PNG

---
 includes/admin/pages/page-infographic.php | 67 ++++++++++++++++++-----
 1 file changed, 53 insertions(+), 14 deletions(-)

diff --git a/includes/admin/pages/page-infographic.php b/includes/admin/pages/page-infographic.php
index be8b4f9..543a2af 100644
--- a/includes/admin/pages/page-infographic.php
+++ b/includes/admin/pages/page-infographic.php
@@ -71,6 +71,7 @@ function statpress_infographic_page() {
 
 	// Włączenie skryptów dla Chart.js
 	wp_enqueue_script( 'chart-js', 'https://cdn.jsdelivr.net/npm/chart.js', array(), null, true );
+	wp_enqueue_script( 'html2canvas', 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js', array(), null, true );
 	wp_register_script( 'statpress-infographic-chart-loader', false );
 	wp_enqueue_script( 'statpress-infographic-chart-loader' );
 	wp_add_inline_script(
@@ -101,6 +102,36 @@ function statpress_infographic_page() {
                     }
                 }
             });
+
+            // Logika eksportu PNG
+            const exportBtn = document.getElementById("statpress-export-btn");
+            if (exportBtn) {
+                exportBtn.addEventListener("click", function() {
+                    const originalText = exportBtn.innerText;
+                    exportBtn.innerText = "Generowanie obrazu...";
+                    exportBtn.disabled = true;
+
+                    const exportArea = document.getElementById("statpress-export-area");
+                    html2canvas(exportArea, {
+                        scale: 2, // 2x lepsza rozdzielczość obrazka (Retina)
+                        backgroundColor: "#f0f0f1", // Domyślne tło WP Admin
+                        onclone: function(clonedDoc) {
+                            // Pokazujemy nasz ukryty tytuł i dodajemy marginesy tylko na obrazku
+                            const brand = clonedDoc.getElementById("statpress-export-brand");
+                            if (brand) brand.style.display = "block";
+                            clonedDoc.getElementById("statpress-export-area").style.padding = "24px";
+                        }
+                    }).then(canvas => {
+                        let link = document.createElement("a");
+                        link.download = "statpress-podsumowanie-' . esc_js( $current_year ) . '.png";
+                        link.href = canvas.toDataURL("image/png");
+                        link.click();
+                        
+                        exportBtn.innerText = originalText;
+                        exportBtn.disabled = false;
+                    });
+                });
+            }
         });
     '
 	);
@@ -110,7 +141,7 @@ function statpress_infographic_page() {
 		<h1>Infografika Statystyk Sportowych</h1>
 		<hr class="wp-header-end">
 
-		<div style="margin-bottom: 20px;">
+		<div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
 			<form method="get" style="display: flex; gap: 10px; align-items: center;">
 				<input type="hidden" name="page" value="statpress-infographic">
 				<label for="filter-by-year" style="font-weight: 500; color: #3c4043;">Filtruj według roku:</label>
@@ -121,6 +152,7 @@ function statpress_infographic_page() {
 				</select>
 				<?php submit_button( 'Filtruj', 'secondary', 'filter_action', false, array( 'style' => 'margin: 0;' ) ); ?>
 			</form>
+			<button type="button" id="statpress-export-btn" class="button button-primary">Pobierz PNG</button>
 		</div>
 
 		<div class="postbox" style="margin-bottom: 20px;">
@@ -133,21 +165,28 @@ function statpress_infographic_page() {
 			</div>
 		</div>
 
-		<div class="postbox" style="margin-bottom: 20px;">
-			<div class="postbox-header"><h2 class="hndle">Statystyki dla <?php echo esc_html( $current_year ); ?></h2></div>
-			<div class="inside statpress-infographic-grid">
-				<div class="statpress-infographic-card"><h3>Dystans</h3><p><?php echo number_format( $yearly_stats->total_distance, 2, ',', ' ' ); ?> km</p></div>
-				<div class="statpress-infographic-card"><h3>Czas</h3><p><?php echo esc_html( $yearly_stats->total_duration ); ?></p></div>
-				<div class="statpress-infographic-card"><h3>Wznios</h3><p><?php echo number_format( $yearly_stats->total_elevation_gain, 0, ',', ' ' ); ?> m</p></div>
-				<div class="statpress-infographic-card"><h3>Aktywności</h3><p><?php echo number_format( $yearly_stats->total_activities, 0, ',', ' ' ); ?></p></div>
+		<div id="statpress-export-area">
+			<div id="statpress-export-brand" style="display: none; text-align: center; margin-bottom: 24px;">
+				<h2 style="font-size: 28px; margin: 0 0 6px 0; color: #202124;">Podsumowanie Sportowe <?php echo esc_html( $current_year ); ?></h2>
+				<p style="margin: 0; color: #5f6368; font-size: 14px;">Wygenerowano z wtyczki StatPress</p>
 			</div>
-		</div>
 
-		<div class="postbox" style="margin-bottom: 20px;">
-			<div class="postbox-header"><h2 class="hndle">Rozkład Dystansu wg Kategorii w <?php echo esc_html( $current_year ); ?></h2></div>
-			<div class="inside">
-				<div style="position: relative; height:40vh; width:100%; max-width: 600px; margin: 0 auto;">
-					<canvas id="statpressCategoryPieChart"></canvas>
+			<div class="postbox" style="margin-bottom: 20px;">
+				<div class="postbox-header"><h2 class="hndle">Statystyki dla <?php echo esc_html( $current_year ); ?></h2></div>
+				<div class="inside statpress-infographic-grid">
+					<div class="statpress-infographic-card"><h3>Dystans</h3><p><?php echo number_format( $yearly_stats->total_distance, 2, ',', ' ' ); ?> km</p></div>
+					<div class="statpress-infographic-card"><h3>Czas</h3><p><?php echo esc_html( $yearly_stats->total_duration ); ?></p></div>
+					<div class="statpress-infographic-card"><h3>Wznios</h3><p><?php echo number_format( $yearly_stats->total_elevation_gain, 0, ',', ' ' ); ?> m</p></div>
+					<div class="statpress-infographic-card"><h3>Aktywności</h3><p><?php echo number_format( $yearly_stats->total_activities, 0, ',', ' ' ); ?></p></div>
+				</div>
+			</div>
+	
+			<div class="postbox" style="margin-bottom: 20px;">
+				<div class="postbox-header"><h2 class="hndle">Rozkład Dystansu wg Kategorii w <?php echo esc_html( $current_year ); ?></h2></div>
+				<div class="inside">
+					<div style="position: relative; height:40vh; width:100%; max-width: 600px; margin: 0 auto;">
+						<canvas id="statpressCategoryPieChart"></canvas>
+					</div>
 				</div>
 			</div>
 		</div>