article_list.html

{% extends "base.html" %}


{% block content-header %}
<div class="row justify-content-left">
  <div class="col-md-6 offset-md-1">
    <h4>Participez à l'aventure !</h4>
    <p>En tant que padawan
      <img class="inline-image" role="img" src="{% static 'img/padawan.svg' %}" />,
      aidez-nous à sélectionner les prochains articles à intégrer dans la
      revue de presse en votant pour les meilleurs. Les jedis
      <img class="inline-image" role="img" src="{% static 'img/jedi.svg' %}" />
      s'occupent ensuite de la relecture et de la mise en page des articles.
    </p>

    <p>Faites-vous connaître sur le
      <a target="_blank" href="https://www.laquadrature.net/wiki/IRC">salon IRC #lqdn-rp</a>
      où il vous sera fait bon accueil, ou en nous
      <a target="_blank" href="https://www.laquadrature.net/fr/contact">contactant par email</a>.
    </p>
  </div>
  <div class="col-md-4">
    <h4>Comment sélectionner un article ?</h4>
  <ol>
    <li>Il aborde les sujets sur lesquels La Quadrature est engagée (paquet télécom, ACTA, <i>etc.</i>).</li>
    <li>Il reflète ou appuie l'avis de La Quadrature.</li>
    <li>Il provient prioritairement de médias importants (presse nationale, régionale ou internationale).</li>
  </ol>

  </div>
</div>
{% endblock %}

{% block content %}
<div class="row">
<div class="col-md-12 white-bg">
  <ul class="nav nav-integrated">
    <li class="nav-item{% if filter_view == 'flux' %} active{% endif %}">
      <a class="nav-link" href="{% url 'rp:article-list' filter_view='flux'%}">
        Flux <img style="width: 2rem; margin-left: 0.5rem;" src="/static/img/cochon-01.png" alt="">
      </a>
    </li>
    <li class="nav-item {% if filter_view == 'draft' %} active{% endif %}">
      <a class="nav-link" href="{% url 'rp:article-list' filter_view='draft'%}">
        En attente <span class="badge badge-default">{{nb_draft}}</span>
      </a>
    </li>
    <li class="nav-item {% if filter_view == 'published' %} active{% endif %}">
      <a class="nav-link" href="{% url 'rp:article-list' filter_view='published'%}">Publiés</a>
    </li>
  </ul>

  <div class="well">
    {% if is_paginated %}
      <div class="pagination">
        <span class="page-links">
          {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
          {% endif %}
          <span class="page-current">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
          </span>
          {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
          {% endif %}
        </span>
      </div>
    {% endif %}

    {% if filter_view == "rejected" %}
      <div class="alert alert-danger" role="alert">
        {% trans "Rejected articles" %}
      </div>
    {% endif %}

    <table class="article-table table table-sm my-4">
      <thead>
        <tr>
          {% if filter_view != "published" %}<th>Priority</th>{% endif %}
          <th>ID</th>
          <th>Date</th>
          <th>Language</th>
          <th>Title</th>
          <th>Note</th>
          <th>Added&nbsp;by</th>
          <th>Actions<img class="inline-image ml-2" role="img" src="{% static 'img/jedi.svg' %}" /></th>
        </tr>
      </thead>
    <tbody>
    {% for article in object_list|slice:":10" %}
      <tr id="row_empty_{{article.id}}" class="empty-row"><td colspan="8"></td></tr>
      <tr id="row_{{article.id}}">
        {% if filter_view != "published" %}
        <td class="icon-cell actions-item" onclick="javascript:call_priority({{article.id}}, {{article.priority|yesno:"false,true"}})">
          <i id="priority_{{article.id}}" class="fa fa-star{{ article.priority|yesno:",-o" }}" aria-hidden="true"></i>
        </td>
        {% endif %}
        <td>{{article.id}}</td>
        <td>{{article.created_at |date:'d/m/y'}}<br />{{article.created_at |date:'H:i'}}</td>
        <td>{{article.lang}}</td>
        <td class="title-cell"><a target="_blank" href="{{article.url}}"><strong>{{article.title}}</strong></a></td>
        <td>
          {% if filter_view == "published" %}
          {{article.und_score}}
          {% else %}
          <ul class="votes-list">
            <li class="actions-item" onclick="javascript:call_upvote({{article.id}})">
              <span id="count_up_{{article.id}}">{{article.und_score_up}}</span>
              <i class="fa fa-thumbs-up" aria-hidden="true" style="color:green"></i>
            </li>
            <li class="actions-item" onclick="javascript:call_downvote({{article.id}})">
              <span id="count_down_{{article.id}}">{{article.und_score_down}}</span>
              <i class="fa fa-thumbs-down" aria-hidden="true" style="color:red"></i>
            </li>
          </ul>
          {% endif %}
        </td>
        <td>{{article.created_by}}</td>
        <td class="actions-cell">
          <ul class="actions-list">
            {% if filter_view == 'flux' %}
            <li class="actions-item actions-item-draft" onclick="javascript:call_recover({{article.id}})">
              <i class="fa fa-fw fa-chevron-right" aria-hidden="true"></i> Forcer</a>
            </li>
            {% else %}
            <li class="actions-item actions-item-edit"><a href="{% url 'rp:article-edit' article.id %}">
              <i class="fa fa-fw fa-pencil" aria-hidden="true"></i> Éditer</a>
            </li>
            {% endif %}
            {% if filter_view != 'published' %}
            <li class="actions-item actions-item-reject" onclick="javascript:call_reject({{article.id}})">
              <i class="fa fa-fw fa-times" aria-hidden="true"></i> Rejeter
            </li>
            {% endif %}
          </ul>
        </td>
      </tr>
      {% if filter_view != 'flux' and article.tags.count %}
      <tr id="row_tags_{{article.id}}" class="tags-row">
        <td colspan="8">
          {% for t in article.tags.all %}
          <span class="badge badge-info">{{t}}</span>
          {% endfor %}
        </td>
      </tr>
      {% endif %}
    {% endfor %}
    </tbody>
    </table>
  </div>
</div>
</div>

<script>
  function getCookie(name) {
      var cookieValue = null;
      if (document.cookie && document.cookie !== '') {
          var cookies = document.cookie.split(';');
          for (var i = 0; i < cookies.length; i++) {
              var cookie = jQuery.trim(cookies[i]);
              // Does this cookie string begin with the name we want?
              if (cookie.substring(0, name.length + 1) === (name + '=')) {
                  cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                  break;
              }
          }
      }
      return cookieValue;
  }
  var csrftoken = getCookie('csrftoken');

  function csrfSafeMethod(method) {
      // these HTTP methods do not require CSRF protection
      return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  }
  $.ajaxSetup({
      beforeSend: function(xhr, settings) {
          if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
              xhr.setRequestHeader("X-CSRFToken", csrftoken);
          }
      }
  });

  function call_upvote(id) {
    $.post("/api/articles/" + id + "/upvote/", function response(data) {
      $("#count_up_" + id).text(data.und_score_up);
    });
  }

  function call_downvote(id) {
    $.post("/api/articles/" + id + "/downvote/", function response(data) {
      $("#count_down_" + id).text(data.und_score_down);
    });
  }

  function clean_row(id) {
    $("#row_" + id).hide();
    $("#row_empty_" + id).hide();
    $("#row_tags_" + id).hide();
  }

  function call_recover(id) {
    $.post("/api/articles/" + id + "/recover/", function response(data) {
      clean_row(id);
    });
  }

  function call_reject(id) {
    $.post("/api/articles/" + id + "/reject/", function response(data) {
      clean_row(id);
    });
  }

  function call_publish(id) {
    $.post("/api/articles/" + id + "/publish/", function response(data) {
      clean_row(id);
    });
  }

  function call_priority(id, flag) {
    var url = "/api/articles/" + id + "/priority/" + (flag ? "on/" : "off/");
    $.post(url, {'priority': flag}, function response(data) {
      $("#priority_" + id).toggleClass("fa-star").toggleClass("fa-star-o");
    });
  }
</script>
{% endblock %}