Çözüldü JS kodundaki sorun nedir?

var reserve = {
  // (B) SAVE RESERVATION
  save: function() {
    // (B1) GET SELECTED PIXEL
    var selected = document.querySelector(".selected");

    // (B2) ERROR!
    if (selected == null) {
      alert("No pixel selected.");
    } else {
      // (B3) SELECTED PIXEL NUMBER
      var pixelValue = selected.textContent.trim();
      var extractedValue = pixelValue.match(/\d+/);
      var pixelID = extractedValue ? extractedValue[0] : "";
      var selectedNeighborNumbers = [];
      // (B3-2) SEND TO SERVER
      var data = new FormData();
      data.append("pixel_id", pixelID);
      // Asagida Aldigimiz Selected Neighbor Listesini Ekle
      data.append("selected_neighbors", selectedNeighborNumbers);
      console.log("Selected Neighbors:", JSON.stringify(selectedNeighborNumbers));
      data.append("KEY", "VALUE"); // add more data as required
      fetch("/reserve_pixel", {
        method: "POST",
        body: data
      })
        .then(function(res) {
          return res.text();
        })
        .then(function(txt) {
          alert(txt); // Show error message as an alert
          // Store the updated pixel status in localStorage
          localStorage.setItem("pixel_" + pixelID, "dolu");
        })
        .catch(function(error) {
          console.log("An error occurred:", error); // Log the error message to the console
        });
    }
  },

  // (A) CHOOSE THIS PIXEL
  toggle: function(pixel) {
    var pixelValue = pixel.textContent.trim();
    console.log(pixelValue);
    fetch("/check_pixel_status?pixel_id=" + pixelValue)
      .then(function(res) {
        return res.json();
      })
      .then(function(data) {
        console.log("Response:", data);
        if (data.reserved_status === "Dolu") {     //// DATA.RESERVED_STATUS yazdik duzeldi.  Eskiden data.status yaziyordu
          alert("This pixel is already taken."); // Show the alert message here
          pixel.classList.add("dolu");
          // Store the updated pixel status in localStorage
          localStorage.setItem("pixel_" + pixelValue, "dolu");
        } else {
          var selected = document.querySelectorAll(".selected");
          for (var i = 0; i < selected.length; i++) {
            selected[i].classList.remove("selected");
            selected[i].classList.remove("dolu");
          }
          pixel.classList.add("selected");
          // Remove the pixel status from localStorage if it is empty
          localStorage.removeItem("pixel_" + pixelValue);
        }
      })
      .catch(function(error) {
        console.log("Error:", error);
      });
  }
};

// Check pixel status on page load
document.addEventListener("DOMContentLoaded", function() {
  var pixels = document.querySelectorAll(".pixel");
  pixels.forEach(function(pixel) {
    var pixelValue = pixel.textContent.trim();
    var status = localStorage.getItem("pixel_" + pixelValue);
    if (status === "dolu") {
      pixel.classList.add("dolu");
    }
  });
});


// Call the toggle function with a pixel element to see the alert in action
var pixelElement = document.querySelector(".pixel");
pixelElement.addEventListener("click", function() {
  reserve.toggle(pixelElement);
});



//
function uploadImage() {
  var selectedPixel = document.querySelector(".selected");
  var pixelValue = selectedPixel.querySelector(".pixel-number").textContent.trim();
  var imageUpload = document.getElementById("imageUpload");

  var formData = new FormData();
  formData.append("pixel_id", pixelValue);
  formData.append("image_file", imageUpload.files[0]);

  fetch("/upload", {
    method: "POST",
    body: formData
  })
    .then(function(res) {
      return res.text();
    })
    .then(function(txt) {
      alert(txt); // Upload işlemi tamamlandıktan sonra kullanıcıya mesaj gösterilebilir
      // İşlem tamamlandıktan sonra gerekiyorsa sayfayı yenileyebilirsiniz.
    })
    .catch(function(error) {
      console.log("An error occurred:", error);
    });
}
// grid_homepage.js dosyası içerisinde yapılacak işlemler

window.addEventListener('DOMContentLoaded', function() {
  var pixelImages = document.querySelectorAll('.placeholder-img');

  pixelImages.forEach(function(img) {
    var pixelNumber = img.parentNode.querySelector('.pixel-number').innerText;
    img.src = pixelNumber; // veya get_selected_pixel_image(pixelNumber) ile resim yolu alınabilir
  });
});


var resolutions = {
  "2x2": { width: 80, height: 80 },
  "4x4": { width: 120, height: 120 },
  "8x8": { width: 220, height: 220 }
};

var selectedPixelData = {}; // Seçili piksel verilerini tutmak için bir nesne

function sendHrefValue() {
  var linkValue = document.getElementById('linkInput').value;
  console.log("Link Value:", linkValue);
 
  // Link değerini seçili piksel verilerine ekle
  selectedPixelData['hrefValue'] = linkValue;

  // Seçili piksel verilerini sunucuya yolla
  sendResolutionValue();
}

function changeResolution(resolution) {
  var pixels = document.getElementsByClassName('pixel');

  // Tüm piksellerin boyutunu sıfırla
  for (var i = 0; i < pixels.length; i++) {
    pixels[i].style.width = "";
    pixels[i].style.height = "";
  }

  // Seçili pikselin boyutunu güncelle
  var selectedPixel = document.querySelector('.selected');
  console.log(resolution)
  if (selectedPixel) {
    var width = resolution * 18 + "px";
    var height = resolution * 18 + "px";

    selectedPixel.style.width = width;
    selectedPixel.style.height = height;
    console.log(selectedPixel.style.width);
    console.log(selectedPixel.style.height);
   
    // Seçili piksel verilerini güncelle
    selectedPixelData['width'] = width;
    selectedPixelData['height'] = height;
  }
}

function sendResolutionValue() {
  // Width, height ve hrefValue değerlerini kullanarak yapılacak işlemleri burada gerçekleştirin
  // Örneğin, bu değerleri bir AJAX isteği ile sunucuya göndermek gibi
 
  // Örnek bir AJAX isteği
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/update_html", true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  var data = JSON.stringify(selectedPixelData);
  xhr.send(data);
  console.log(data);
}


document.addEventListener("DOMContentLoaded", function() {
  var pixels = document.querySelectorAll('.pixel');

  pixels.forEach(function(pixel) {
    pixel.addEventListener('click', function() {
      var selectedPixelIndex = Array.from(pixels).indexOf(pixel);
      var numRows = 32; // Change this to the number of rows in your grid

      var selectedRow = Math.floor(selectedPixelIndex / numRows);
      var selectedCol = selectedPixelIndex % numRows;

      var selectedNeighbors = [];

      for (var rowOffset = 0; rowOffset < 2; rowOffset++) {
        for (var colOffset = 0; colOffset < 2; colOffset++) {
          var neighborRow = selectedRow + rowOffset;
          var neighborCol = selectedCol + colOffset;
         
          // Check if the neighbor is within grid bounds
          if (neighborRow >= 0 && neighborRow < numRows && neighborCol >= 0 && neighborCol < numRows) {
            var neighborIndex = neighborRow * numRows + neighborCol;
            var neighborPixel = pixels[neighborIndex];
            selectedNeighbors.push(neighborPixel);
          }
        }
      }

      // Highlight selected pixel and its neighbors
      pixels.forEach(function(p) {
        p.style.backgroundColor = '';
      });
      selectedNeighbors.forEach(function(n) {
        n.style.backgroundColor = 'yellow';
      });

      // Get the numbers of the selected neighbors
      var selectedNeighborNumbers = selectedNeighbors.map(function(neighbor) {
        return neighbor.querySelector('.pixel-number').textContent;
      });
      console.log("Selected Neighbor Numbers:", selectedNeighborNumbers);


      // Check if all selected neighbors are reserved
      var allReserved = selectedNeighborNumbers.every(function(neighborNumber) {
        var neighborPixel = document.querySelector('.pixel[data-pixel="' + neighborNumber + '"]');
        return neighborPixel && neighborPixel.classList.contains("dolu");
      });

      // Color selected neighbors accordingly
      if (allReserved) {
        selectedNeighbors.forEach(function(n) {
          n.style.backgroundColor = 'blue';
        });
      }
    });
  });
});