contribute.html

{# SPDX-FileCopyrightText: 2025 OPTIMETA and KOMET projects <https://projects.tib.eu/komet> #}
{# SPDX-License-Identifier: GPL-3.0-or-later #}

{% extends "main.html" %}
{% load static %}

{% block title %}Contribute Geolocation Data | {% endblock %}

{% block head %}
{{ block.super }}
<style>
  /* Hide search bar on contribute page (no functionality here) */
  #navbar-search-container {
    display: none !important;
  }
</style>
{% endblock %}

{% block content %}

<div class="container-fluid locate-container">
  <div class="row justify-content-center">
    <div class="col-md-10 col-lg-8 py-5">
    <h1 class="py-2">Contribute Geolocation Data</h1>

    <p class="lead">Help us add geographic metadata to scientific works!</p>

    <p class="text-wrap text-break">The works listed below have been harvested from various scientific sources but do not have geolocation data yet. If you know the geographic location or area mentioned in any of these works, you can help us improve our database.</p>

    {# --- Add a work by DOI --------------------------------------------------- #}
    <div class="card mb-4">
      <div class="card-header p-0">
        <button class="btn btn-link btn-block text-left text-decoration-none d-flex justify-content-between align-items-center px-3 py-2"
                type="button" data-toggle="collapse" data-target="#doiContributeForm"
                aria-expanded="false" aria-controls="doiContributeForm">
          <span><i class="fas fa-plus-circle" aria-hidden="true"></i> Add a work by DOI</span>
          <i class="fas fa-chevron-down" aria-hidden="true"></i>
        </button>
      </div>
      <div id="doiContributeForm" class="collapse">
        <div class="card-body">
          <p class="text-muted small mb-3">
            Know a publication that should be in OPTIMAP? Enter its DOI and we will fetch its metadata
            from Crossref and enrich it automatically. If we already have it, you will be taken to its page.
          </p>
          {% if request.user.is_authenticated %}
            <form id="doiForm" novalidate>
              {% csrf_token %}
              <div class="form-group">
                <label for="doiInput">DOI or DOI URL</label>
                <input type="text" class="form-control" id="doiInput" name="doi"
                       placeholder="10.5194/example or https://doi.org/10.5194/example"
                       autocomplete="off" aria-describedby="doiHelp doiFeedback">
                <small id="doiHelp" class="form-text text-muted">Example: <code>10.5194/gi-9-219-2020</code></small>
                <div id="doiFeedback" class="invalid-feedback" role="alert"></div>
              </div>
              <button type="submit" id="doiSubmit" class="btn btn-primary" disabled>
                <span id="doiSubmitSpinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                <i class="fas fa-paper-plane" aria-hidden="true"></i> Add work
              </button>
            </form>
          {% else %}
            <button disabled class="btn btn-outline-secondary"
                    aria-label="Log in to add a work — use the user menu at the top right">
              <i class="fas fa-user-circle" aria-hidden="true"></i> Add work
            </button>
            <p class="text-muted small mt-2 mb-0">
              Please log in to add works by DOI — use the user menu at the top right of the page.
            </p>
          {% endif %}
        </div>
      </div>
    </div>

    {% if filter_invalid %}
      <div class="alert alert-warning text-break" role="alert">
        <i class="fas fa-exclamation-triangle"></i>
        Unknown collection <code>{{ filter_raw }}</code>. Showing all works that need contribution.
        <a href="{% url 'optimap:contribute' %}" class="alert-link">Clear filter</a>.
      </div>
    {% endif %}

    {% if filter_collection %}
      <div class="alert alert-primary d-flex align-items-center justify-content-between flex-wrap" role="alert">
        <div class="mr-3 mb-2 mb-md-0">
          <i class="fas fa-filter"></i>
          Filtered to collection
          <a href="{{ filter_collection.get_absolute_url }}" class="alert-link"><strong>{{ filter_collection.name }}</strong></a>
          <small class="text-muted">(<code>{{ filter_collection.identifier }}</code>)</small>
        </div>
        <a href="{% url 'optimap:contribute' %}" class="btn btn-outline-primary btn-sm">
          <i class="fas fa-times"></i> Show all
        </a>
      </div>
    {% endif %}

    {% if total_count > 0 %}
      <div class="alert alert-info text-break" role="alert">
        <i class="fas fa-info-circle"></i>
        <strong>{{ total_count }}</strong> work{{ total_count|pluralize }} need{{ total_count|pluralize:"s," }} geolocation data{% if filter_collection %} in this collection{% endif %}.
      </div>

      {% if request.user.is_authenticated %}
      <a href="{% url 'optimap:contribute-next' %}{% if filter_collection %}?collection={{ filter_collection.identifier }}{% endif %}"
         class="btn btn-primary mb-3">
        <i class="fas fa-gamepad"></i> Play georeferencing game
      </a>
      {% endif %}

      <!-- Pagination controls (top) -->
      {% include "_pagination.html" with show_meta=True pagination_label="Works pagination" %}

      <div class="publication-grid">
        {% for work in works %}
          <div class="card locate-card">
            <div class="card-body">
              <h5 class="card-title">
                {% if work.doi %}
                  <a href="https://doi.org/{{ work.doi }}" target="_blank" rel="noopener noreferrer">
                    {{ work.title|truncatechars:120 }}
                  </a>
                {% else %}
                  <span>{{ work.title|truncatechars:120 }}</span>
                {% endif %}
              </h5>

              <div class="abstract-area">
                {% if work.abstract %}
                  <p class="card-text text-muted small">
                    {{ work.abstract|truncatechars:180 }}
                  </p>
                {% endif %}
              </div>
            </div>

            <div class="card-footer">
              <div class="d-flex justify-content-between align-items-start mb-2">
                <small class="text-muted">
                  {% if work.publicationDate %}
                    <div class="mb-1">Published: {{ work.publicationDate|date:"M d, Y" }}</div>
                  {% endif %}
                  {% if work.source %}
                    <div class="mb-1">Source: {{ work.source.name }}</div>
                  {% endif %}
                  {% if work.doi %}
                    <div class="mb-1">DOI: <span class="doi-text">{{ work.doi }}</span></div>
                  {% endif %}
                </small>
                {% if request.user.is_authenticated %}
                  <div class="text-right ml-2 flex-shrink-0">
                    <div class="mb-1">
                      <span class="badge {% if work.has_geo %}badge-success{% else %}badge-secondary{% endif %}"
                            data-toggle="tooltip"
                            title="{% if work.has_geo %}Has spatial extent{% else %}No spatial extent{% endif %}">
                        <i class="fas fa-map-marker-alt" aria-hidden="true"></i> Spatial
                      </span>
                    </div>
                    <div>
                      <span class="badge {% if work.has_temporal %}badge-success{% else %}badge-secondary{% endif %}"
                            data-toggle="tooltip"
                            title="{% if work.has_temporal %}Has temporal extent{% else %}No temporal extent{% endif %}">
                        <i class="fas fa-clock" aria-hidden="true"></i> Temporal
                      </span>
                    </div>
                  </div>
                {% endif %}
              </div>
              {% if request.user.is_authenticated %}
                {% if work.doi %}
                  <a href="{% url 'optimap:work-landing' work.doi %}" class="btn btn-primary btn-sm">
                    <i class="fas fa-map-marked-alt"></i> Contribute metadata
                  </a>
                {% else %}
                  <a href="{% url 'optimap:work-landing' work.id %}" class="btn btn-primary btn-sm">
                    <i class="fas fa-map-marked-alt"></i> Contribute metadata
                  </a>
                {% endif %}
              {% else %}
                <button disabled class="btn btn-outline-secondary btn-sm"
                        title="Please use the user menu at the top right to log in"
                        aria-label="Log in to contribute — use the user menu at the top right">
                  <i class="fas fa-user-circle" aria-hidden="true"></i> Please log in to contribute (user menu at top right)
                </button>
              {% endif %}
            </div>
          </div>
        {% endfor %}
      </div>

      <!-- Pagination controls (bottom) -->
      {% include "_pagination.html" with pagination_label="Works pagination" %}

    {% else %}
      <div class="alert alert-success" role="alert">
        <i class="fas fa-check-circle"></i>
        {% if filter_collection %}
          Great! All harvested works in this collection currently have geolocation data.
          <a href="{% url 'optimap:contribute' %}" class="alert-link">Show all works</a>.
        {% else %}
          Great! All harvested works currently have geolocation data.
        {% endif %}
      </div>
    {% endif %}

    <div class="mt-5">
      <h3>How to help</h3>
      <p>If you recognize any works that reference specific geographic locations, please login, confirm your account, and contribute metadata.</p>
      <p>In case you find any errors in other metadata fields, if you see a work with incorrect location or time information, or if you find works that should be included in our database, please contact us:</p>
      <p>
        <a href="/about" class="btn btn-primary">
          <i class="fas fa-envelope"></i> Contact Us
        </a>
        <a href="/" class="btn btn-outline-secondary">
          <i class="fas fa-map"></i> Back to Map
        </a>
      </p>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
{{ block.super }}
{% if request.user.is_authenticated %}
<script src="{% static 'js/doi-validate.js' %}"></script>
<script src="{% static 'js/contribute-doi.js' %}"></script>
{% endif %}
{% endblock %}