game_form.html

{% extends "base.html" %}

{% block title %}
  Games
{% endblock title %}
{% block content %}
  <h1>
    {% if is_create %}
      Create
    {% else %}
      Update
    {% endif %}
    Game
  </h1>
  <!-- Game Form -->
  <form method="post" enctype="multipart/form-data" id="game_form">
    {% csrf_token %}
    <!-- Manually render each form field so that we can put in the search BGG button-->
    {% for field in form %}
      <div>
        {{ field.label_tag }} {{ field }}
        {% if field.name == 'name' and is_create %}
          <!-- BGG Search Button (only under 'name' field in Create view) -->
          <button type="button" id="bgg_search_button">Search on BoardGameGeek</button>
          <!-- Container for BGG search results -->
          <div id="bgg_search_results"></div>
        {% endif %}
      </div>
      <br />
    {% endfor %}
    <!-- Twine upload (manual field) -->
    <label for="id_twine_file">Upload Twine Game (.html):</label>
    <input type="file" name="twine_file" id="id_twine_file" accept=".html" />
    <br />
    <br />
    <button type="submit">Save</button>
  </form>
  <!-- AJAX script for BGG search (only in Create view) -->
  {% if is_create %}
    <script>
      document.getElementById('bgg_search_button').addEventListener('click', function() {
        var search_term = document.getElementById('id_name').value;
        if (!search_term) return; // Do nothing if search term is empty

        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
        fetch(`/games/bgg_search_by_name/?search_term=${encodeURIComponent(search_term)}`)
          .then(response => {
            if (!response.ok) {
              throw new Error(`HTTP error! Status: ${response.status}`); // Throws an error for bad HTTP status
            }
            return response.json();
          })
          .then(data => {
            var results = data.games_list;
            var resultsContainer = document.getElementById('bgg_search_results');
            resultsContainer.innerHTML = ''; // Clear previous results

            results.forEach(function(game) {
              // Create a div for each game
              var gameDiv = document.createElement('div');
              gameDiv.innerHTML = `<img src="${game.image}" style="width:50px; height:50px; vertical-align:middle; margin-right: 10px;" /> <span>${game.name}</span>`;
              // Some basic CSS to lay out search results in a readable way
              gameDiv.style.cursor = 'pointer';
              gameDiv.style.padding = '10px';
              gameDiv.style.borderBottom = '1px solid #ddd';
              gameDiv.style.display = 'flex';
              gameDiv.style.alignItems = 'center';

              gameDiv.addEventListener('click', function() {
                // Autofill the form fields
                Object.keys(game).forEach(key => {
                  let element = document.getElementById(`id_${key}`);
                  if (element) {
                    let apiFieldValue = game[key];
                    element.value = apiFieldValue;
                  }
                });
                resultsContainer.innerHTML = ''; // Clear results after selection
              });

              resultsContainer.appendChild(gameDiv);
            });
          })
          .catch(error => {
            console.error('There was a problem with the fetch operation:', error);
            // Handle the error here, like displaying a message to the user
            document.getElementById('bgg_search_results').innerHTML = `<p>Error fetching data: ${error.message}</p>`;
          });

      });
    </script>
  {% endif %}
{% endblock content %}