single.html

{{ define "main" }}

{{ $projects := slice }}
{{ $topic_calls := slice }}
{{ range $index, $project := $.Site.Data.c19dpes_research_projects.research_projects }}
{{ $correct_type := true }}
{{ $has_data := true }}
  {{ if and $has_data $correct_type }}
    {{ $projects = $projects | append $project }}
    {{ range $index, $topic := $project.topic_call }}
      {{ if in $topic_calls $topic}}
      {{ else }}
        {{ if ne $topic "" }}
          {{ $topic_calls = $topic_calls | append $topic }}
        {{ end }}
      {{ end }}
    {{ end }}
  {{ end }}
{{ end }}
{{ $topic_calls = sort $topic_calls }}

<main class="container">
  <h1>{{ .Title }}</h1>
  <article>{{ .Content }}</article>
  <div class="d-flex">
    {{ partial "last-update.html" (dict "context" . "last_update" (substr $.Site.Data.c19dpes_research_projects.timestamp 0 10)) }}
  </div>
  <div class="row">
    <section class="col-md-2">
      <h5>{{ i18n "organisation" }}</h5>
      <div class="form-check mb-2 ml-3">
        <div class="row">
          <input type="checkbox" class="form-check-input" name="uni_or_multi" value="Unicentric">
          <span>{{ i18n "unicentric" }}</span>
        </div>
        <div class="row">
          <input type="checkbox" class="form-check-input" name="uni_or_multi" value="Multicentric">
          <span>{{ i18n "multicentric" }}</span>
        </div>
      </div>
      <h5>{{ i18n "clinical_trial" }}</h5>
      <div class="form-check mb-2 ml-3">
        <div class="row">
          <input type="checkbox" class="form-check-input" name="clinical_trial" value="Yes">
          <span>{{ i18n "yes" }}</span>
        </div>
        <div class="row">
          <input type="checkbox" class="form-check-input" name="clinical_trial" value="No">
          <span>{{ i18n "no" }}</span>
        </div>
      </div>
      <h5>{{ i18n "topic_call" }}</h5>
      <div class="form-check mb-2 ml-3">
        {{ range $index, $topic := $topic_calls }}
        <div class="row">
          <input type="checkbox" class="form-check-input" name="topic_call" value="{{ $topic }}">
          <span>{{ $topic }}</span>
        </div>
        {{ end }}
      </div>
    </section>
    <div class="col-md-10">
      <a id="downloadButton" class="btn btn-primary d-inline-block" target="_blank" href="http://eu-isciii.es/wp-content/uploads/2020/06/Excel-COVID19-Funded-Spain-Projects-v.04.06.2020.xlsx">
        {{ i18n "download_csv" }}
      </a>
      <table class="table table-responsive" id="projects-table">
        <thead class="thead-light">
          <tr>
            <th scope="col">{{ i18n "project" }}</th>
            <th scope="col">{{ i18n "reference_id" }}</th>

            <!-- This columns are not visible by DataTables but they are necessary for filtering and CSV downloading -->
            <th scope="col">{{ i18n "center" }}</th>
            <th scope="col">{{ i18n "trial" }}</th>
            <th scope="col">{{ i18n "organisation" }}</th>
            <th scope="col">{{ i18n "topic_call" }}</th>
          </tr>
        </thead>
        <tbody>
          {{ range $index, $project := $projects }}
            <tr>
              <td>
                <b>{{ .title }}{{ if .acronym }} ({{ .acronym }}){{ end }} </b><br>
                <span class="text-muted">{{ .pi }}</span><br>
                <i>{{ .center }}</i><br>
                <!-- <small>Project ID: {{ .isciii_reference }}</small><br> -->
                <small>{{ .uni_multi_centric }}</small><br>
                <small>Clinical trial: {{ .clinical_trial }}</small><br>
                <small>Topic call: {{ delimit .topic_call ", " }}</small><br>
                <!-- <a class="btn btn-primary btn-link badge badge-primary" data-toggle="collapse" href="#description-{{ $index }}" role="button" aria-expanded="false" aria-controls="description-{{ $index }}">
                  {{ i18n "project_description" }} <i class="bi bi-caret-down-fill"></i></a>
                <div class="collapse" id="description-{{ $index }}">
                    <p>{{ .description }}</p>
                    <p>{{ .more_information }}</p>
                </div> -->
              </td>
              <td>{{ .isciii_reference }}</td>
              <!-- <td>{{ .resolution_date }}</td> -->

              <!-- This columns are not visible by DataTables but they are necessary for filtering and CSV downloading -->
              <td>{{ .center }}</td>
              <td>{{ .clinical_trial }}</td>
              <td>{{ .uni_multi_centric }}</td>
              <td>{{ delimit .topic_call ", " }}</td>
            </tr>
          {{ end }}
        </tbody>
      </table>
    </div>
  </div>
</main>

<script src="/js/dp-table-filters.js"></script>
<script>
  $(document).ready(function() {
    const table = $('#projects-table').DataTable({
      dom: `
        <".container-fluid"
          <".row my-2"
            <".mr-auto"i>
            <"#search.mr-2"f>
          >
          <".row"t>
          <".row"
            <".mr-auto"l>
            <".ml-auto"p>
          >
        >
      `,
      // processing: true,
      order: [[ 1, "desc" ]],
      columnDefs: [

        // Hide columns that are present for filtering and for downloading the table as usable CSV.
        { visible: false, targets: [2, 3, 4, 5] },

        // Remove ordering for first mega-column (sorting alphabetically by title makes no sense).
        { orderable: false, targets: 0 },
      ],
    });

    // Move download buttons next to filter search box.
    const downloadButton = document.querySelector('#downloadButton');
    const search = document.querySelector('#search');
    search.insertAdjacentElement('afterend', downloadButton);

    // Define column indices and apply checkbox filters.
    const columnIndices = {
      clinical_trial: 3,
      uni_or_multi: 4,
      topic_call: 5,
    };
    applyFilters(table, columnIndices);
});
</script>

{{ end }}