picture

Hello, I made the changes you mentioned, and now my JSON data is coming through correctly. However, I still can't display the images on the screen as I want. When I refresh the page with F5, the images appear, but I don't want to keep refreshing the page manually; I want it to work with AJAX.

Here is the code for you to review:

 private static readonly object _fileLock = new object();
 private static Dictionary<string, Dictionary<string, (string LocalFilePath, DateTime LastModified)>> _latestImages
     = new Dictionary<string, Dictionary<string, (string, DateTime)>>();

[HttpGet]
public JsonResult GetLatestImages()
{
    lock (_fileLock)
    {
        if (_latestImages == null || !_latestImages.Any())
        {
            return Json(new { Error = "Henüz resim bilgileri mevcut değil." });
        }

        var result = _latestImages.ToDictionary(
            project => project.Key,
            project => project.Value.ToDictionary(
                folder => folder.Key,
                folder => new
                {
                    item1 = folder.Value.LocalFilePath, // LocalFilePath
                    item2 = folder.Value.LastModified   // LastModified
                }
            )
        );

        return Json(result);
    }
}

    private async Task StartImageUpdateLoop()
    {
        while (true)
        {
            try
            {
                UpdateImages();
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Arka plan güncelleme hatası: {ex.Message}");
            }

            await Task.Delay(5000);
        }
    }

   private void UpdateImages()
   {
       var projects = new Dictionary<string, string[]>
       {
           { "J74 PROJESI", new[] { "FEM_KAMERA_104", "FEM_KAMERA_103", "FEM_KAMERA_105" } }
       };

       var updatedImages = projects.ToDictionary(
           project => project.Key,
           project => project.Value.ToDictionary(
               folder => folder,
               folder => CopyLatestFileFromFtpToLocal(folder)
           )
       );

       lock (_fileLock)
       {
           _latestImages = updatedImages;

           Console.WriteLine("Güncellenen Resimler:");
           foreach (var project in _latestImages)
           {
               foreach (var folder in project.Value)
               {
                   Console.WriteLine($"Kamera: {folder.Key}, Yol: {folder.Value.LocalFilePath}, Tarih: {folder.Value.LastModified}");
               }
           }
       }
   }

and the script:

  <script>
     
      const lastUpdatedTimes = {};
      function checkImageTimeout() {
          const currentTime = new Date().getTime();
          for (const projectKey in lastUpdatedTimes) {
              for (const folderKey in lastUpdatedTimes[projectKey]) {
                  const lastUpdatedTime = lastUpdatedTimes[projectKey][folderKey];
                  const imageBox = $(`#image-${projectKey}-${folderKey}`);
                  const messageTag = imageBox.find('p.date');

                  if (currentTime - lastUpdatedTime > 45000) { // 45 saniyeden uzun süre geçtiyse
                      imageBox.find('img').attr('src', '').attr('alt', '');
                      messageTag.text('İmaj Bekleniyor..');
                  }
              }
          }
      }

      function updateImages() {
          // AJAX ile sunucudan veri çek
          $.ajax({
              url: '/Home/GetLatestImages', // API endpoint
              method: 'GET',
              dataType: 'json', // Gelen verinin formatı
              cache: false, // Cache'i kapat
              success: function (data) {
                  // Gelen veriyi işleme
                  console.log("Gelen JSON Verisi:", data);

                  for (const projectKey in data) {
                      const project = data[projectKey];

                      for (const folderKey in project) {
                          const folder = project[folderKey];
                          const imageBox = $(`#image-${projectKey}-${folderKey}`);
                          const imgTag = imageBox.find('img');
                          const dateTag = imageBox.find('.date');

                          if (folder.item1) {
                              // Yeni resim URL'si (Cache'i önlemek için zaman damgası eklenir)
                              const newImageSrc = `${folder.item1}?t=${new Date().getTime()}`;

                              // Eğer resim değiştiyse güncelle
                              if (imgTag.attr('src') !== newImageSrc) {
                                  imgTag
                                      .attr('src', newImageSrc)
                                      .attr('alt', 'Güncellenmiş resim')
                                      .off('error') // Eski error eventlerini kaldır
                                      .on('error', function () {
                                          console.error(`Resim yüklenemedi: ${newImageSrc}`);
                                          dateTag.text('Resim yüklenemedi.');
                                      });

                                  dateTag.text(`Son Çekilen Tarih: ${new Date(folder.item2).toLocaleString()}`);
                              }
                          } else {
                              // Resim yoksa 'İmaj Bekleniyor' mesajını göster
                              imgTag.attr('src', '').attr('alt', 'Resim bulunamadı');
                              dateTag.text('İmaj Bekleniyor..');
                          }
                      }
                  }
              },
              error: function (xhr, status, error) {
                  console.error("Resim güncelleme hatası:", error);
              }
          });
      }

      // Resimleri her 10 saniyede bir güncelle
      setInterval(updateImages, 10000);


      // Resim 45 saniyedir değişmediyse kontrol et
      setInterval(checkImageTimeout, 1000); // Her saniyede bir kontrol

  </script>