Add webpages for each data package with package metadata overview and tables.js for individual resources

[AyrtonB]

Description: We need to create webpages for each data package that displays an overview of the package metadata and a detailed breakdown of the individual resources. For each resource, we should use tables.js to show the tabular data in a table format. These webpages should utilize Jinja templating, Bootstrap for styling, and fetch data from our backend API.

Feature requirements:

Create a Jinja template for the data package webpages. The template should include: a. An overview section for the package metadata, displaying the package name, description, and other relevant information. b. A separate section for each resource in the package, displaying the resource name, description, and other relevant information.

Use Bootstrap to style the webpage, following our existing design guidelines and making the page responsive.

Implement JavaScript code that fetches data from the backend API for: a. Package metadata (e.g., /api/metadata/{package_name}) b. Raw tabular data for each resource (e.g., /api/data/{resource_name})

In the JavaScript code, use tables.js to create tables for each resource's tabular data. Populate the tables with the fetched data and render them inside the corresponding resource section in the Jinja template.

Ensure that the webpage loads and displays data correctly, handling any errors or edge cases gracefully.

Example Jinja template structure:

{% extends "base.html" %}

{% block content %}
  <div class="container">
    <h1>{{ package.name }}</h1>
    <p>{{ package.description }}</p>

    {% for resource in package.resources %}
      <div class="resource-section">
        <h2>{{ resource.name }}</h2>
        <p>{{ resource.description }}</p>

        <div id="table-{{ resource.name }}"></div>
      </div>
    {% endfor %}
  </div>
{% endblock %}

Example JavaScript code structure for fetching data and rendering tables.js tables:

document.addEventListener("DOMContentLoaded", async function () {
  {% for resource in metadata.resources %}
    const tableContainer_{{ resource.name }} = document.getElementById("table-{{ resource.name }}");

    try {
      // Replace this with the correct API route for fetching raw data for each resource
      const dataUrl = `/data/{{ resource.name }}`;
      const response = await fetch(dataUrl);
      const data = await response.json();

      const columns = [
        {% for field in resource.schema.fields %}
          { key: "{{ field.name }}", label: "{{ field.name }}" },
        {% endfor %}
      ];

      const table_{{ resource.name }} = new Tables(data, columns);
      table_{{ resource.name }}.render(tableContainer_{{ resource.name }});
    } catch (error) {
      console.error("Error fetching data for resource {{ resource.name }}:", error);
    }
  {% endfor %}
});
});

Once this feature is implemented, users will be able to view detailed information about each data package and its resources on the webpages. The tables.js tables will provide a user-friendly way to display and interact with the tabular data for each resource.