feat: Add campaign comments functionality with API support and database migration

templates/campaigns/main_view.php

@@ -235,23 +235,25 @@ function reloadChart()
     {
       var parsedData = JSON.parse( response );
       var plotLines = [];
+      var chartComments = parsedData.comments || [];
+      var commentData = [];
+
+      chartComments.forEach( function( comment ) {
+        var idx = parsedData.dates.indexOf( comment.date_add.split(' ')[0] );
+        if ( idx < 0 ) return;
+
+        commentData.push({ idx: idx, text: comment.comment, date: comment.date_add });
 
-      parsedData.comments.forEach( function( comment ) {
         plotLines.push({
-          color: '#333333',
-          width: 1,
-          value: parsedData.dates.indexOf( comment.date_add.split(' ')[0] ),
-          dashStyle: 'Solid',
-          label: {
-            text: comment.comment,
-            align: 'left',
-            style: { color: '#333333', fontSize: '13px' }
-          },
+          color: '#FF6B00',
+          width: 2,
+          value: idx,
+          dashStyle: 'Dash',
           zIndex: 5
         });
       });
 
-      Highcharts.chart( 'container', {
+      var chart = Highcharts.chart( 'container', {
         chart: {
           style: { fontFamily: '"Roboto", sans-serif' },
           backgroundColor: 'transparent'
@@ -296,6 +298,47 @@ function reloadChart()
         tooltip: { style: { fontSize: '13px' } },
         credits: { enabled: false }
       });
+
+      // Nakładamy klikalne ikonki komentarzy jako elementy HTML nad wykresem
+      $( '#container .chart-comment-icons' ).remove();
+      if ( chart && commentData.length ) {
+        var $wrap = $( '<div class="chart-comment-icons"></div>' ).css({ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, 'pointer-events': 'none', 'z-index': 10, overflow: 'visible' });
+        $( '#container' ).css({ position: 'relative', overflow: 'visible' }).append( $wrap );
+
+        commentData.forEach( function( c, i ) {
+          var px = chart.xAxis[0].toPixels( c.idx, false );
+          var $icon = $( '<i class="fa-solid fa-comment"></i>' )
+            .css({
+              position: 'absolute',
+              left: px - 8,
+              top: chart.plotTop + 5,
+              color: '#FF6B00',
+              fontSize: '16px',
+              cursor: 'pointer',
+              'pointer-events': 'auto'
+            })
+            .attr( 'title', 'Komentarz \u2014 ' + c.date )
+            .data( 'comment-index', i );
+          $wrap.append( $icon );
+        });
+
+        $wrap.on( 'click', 'i', function() {
+          var c = commentData[ $( this ).data( 'comment-index' ) ];
+          if ( !c ) return;
+
+          var html = $( '<span>' ).text( c.text ).html();
+          html = html.replace( /\n/g, '<br>' );
+          html = html.replace( /\. /g, '.<br>' );
+
+          $.alert({
+            title: '<i class="fa-solid fa-comment" style="color:#FF6B00;"></i> Komentarz \u2014 ' + c.date,
+            content: '<div style="font-size:14px;line-height:1.7;">' + html + '</div>',
+            closeIcon: true,
+            columnClass: 'col-md-6 col-md-offset-3',
+            buttons: { ok: { text: 'Zamknij', btnClass: 'btn-blue' } }
+          });
+        });
+      }
     },
     error: function( jqXHR, textStatus, errorThrown ) {
       console.error( 'Error AJAX:', textStatus, errorThrown );