results.html

{% extends "base.html" %}
{% block title %}Past Results{% endblock %}
{% block content %}
<div class="w-11/12 mx-auto">
  <label class="block text-gray-700 text-2xl xl:text-4xl font-bold text-center pb-2 pt-2" 
         style="background-clip: text; -webkit-background-clip: text; color: transparent;
         background-image: linear-gradient(to right, #2563eb, #2dd4bf);"> Past Results </label>
  <div class="bg-gray-800 shadow-md rounded-lg py-2">
    <table class="text-left w-full border-collapse">
      <thead class="bg-gray-800">
        <tr class="">
          <th class="py-1.5 px-0.5 font-bold uppercase text-center text-sm text-white border-b">Date</th>
          <th class="py-1.5 px-0.5 font-bold uppercase text-center text-sm text-white border-b">Prediction</th>
          <th class="py-1.5 px-0.5 font-bold uppercase text-center text-sm text-white border-b">Confidence Score</th>
          <th class="py-1.5 px-0.5 font-bold uppercase text-center text-sm text-white border-b">Actions</th>
        </tr>
      </thead>
      <tbody class="bg-white text-center">
        {% set sorted_results = results|sort(attribute='date_added', reverse=true) %}
        {% for result in sorted_results %}
        <tr class="hover:bg-gray-50 text-sm">
          <td class="py-0 px-4 border-b border-gray-200 justify-between">{{ result.date_added.strftime('%Y-%m-%d %H:%M:%S') }}</td>
          <td class="py-0 px-4 border-b border-gray-200 justify-between">{{ result.name }}</td>
          <td class="py-0 px-4 border-b border-gray-200 justify-between">{{ (result.confidence_score * 100)|float|round(1) }}%</td>
          <td class="py-0 px-4 border-b border-gray-200 justify-between">
            <a href="/result/{{ result.id }}?prediction_date={{ result.date_added }}" class="text-white font-bold py-1 px-3 rounded text-xs mx-1 my-1 bg-green-500 hover:bg-green-700">View Result</a>
            <button class="text-white font-bold py-1 px-3 rounded text-xs mx-1 my-1 bg-red-500 hover:bg-red-700 deleteResultBtn" data-result-id="{{ result.id }}">Delete Result</button>
          </td>        
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <!-- Pagination Controls -->
  <div class="flex justify-between mt-4">
    <div class="flex items-center">
        <a href="{% if page > 1 %}/results?page={{ page - 1 }}#content{% endif %}" 
            class="bg-blue-500 {% if page == 1 %}opacity-50 cursor-not-allowed pointer-events-none{% endif %} hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-2">
            &lt;
        </a>
        <span class="mx-2">Page {{ page }} of {{ total_pages }}</span>
        <a href="{% if page < total_pages %}/results?page={{ page + 1 }}#content{% endif %}" 
            class="bg-blue-500 {% if page == total_pages %}opacity-50 cursor-not-allowed pointer-events-none{% endif %} hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-2">
            &gt;
        </a>
    </div>
    <a href="/#content" class="bg-gray-400 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">Back</a>
</div>


</div>

<!-- Delete Confirmation Popup -->
<div id="deletePopup" class="hidden fixed inset-0 bg-gray-900 bg-opacity-50 flex justify-center items-center">
  <div class="bg-white p-6 rounded-lg">
    <p class="text-lg font-bold mb-2">Are you sure you want to delete this result?</p>
    <div class="flex justify-center"> <!-- Center the buttons horizontally -->
      <button id="confirmDeleteBtn" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mr-2">Delete</button>
      <button id="cancelDeleteBtn" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded ml-2">Cancel</button>
    </div>
  </div>
</div>

<script>
  // Delete Result functionality
  document.querySelectorAll('.deleteResultBtn').forEach(function(button) {
    button.addEventListener('click', function() {
      var resultId = this.getAttribute('data-result-id');
      document.getElementById('deletePopup').classList.remove('hidden');
      
      // Confirm delete
      document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
        // Send POST request for deletion
        fetch('/delete/' + resultId, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({}) // empty body since you may not need to send any additional data
        }).then(function(response) {
          if (!response.ok) {
            // Show error message
            alert('Failed to delete result');
          }
        }).catch(function(error) {
          console.error('Error:', error);
        }).finally(function() {
          // Hide the popup
          document.getElementById('deletePopup').classList.add('hidden');
          window.location.reload(); // Reload the current page
        });
      });
      
      // Cancel delete
      document.getElementById('cancelDeleteBtn').addEventListener('click', function() {
        document.getElementById('deletePopup').classList.add('hidden');
        window.location.reload(); // Reload the current page
      });
    });
  });
</script>
{% endblock %}