cbwebreader/comic/templates/comic/comic_list.html

{% extends "base.html" %}
{% load bootstrap4 %}
{% load static %}
{% block title %}{{ title }}{% endblock %}

{% block content %}

<div class="container">
    <div class="row">
        <div class="input-group">
            <input type="text" id="quicksearch" class="form-control" placeholder="Search" aria-label="Search list of comics" aria-describedby="button-addon4">
            <div id="filters" class="input-group-append">
                <button class="btn btn-outline-secondary filters" type="button" data-filter="*">All</button>
                <button class="btn btn-outline-secondary filters" type="button" data-filter=".read">Read</button>
                <button class="btn btn-outline-secondary filters" type="button" data-filter=".unread">Unread</button>
                    <div class="btn-group" role="group">
                        <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Actions
                        </button>
                        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                            <button type="button" class="btn btn-primary dropdown-item comic_action" title="Mark Un-Read" selector="{{ selector }}" itemtype="Directory" comic_action="mark_unread"><i class="fas fa-book">Mark Un-Read</i></button>
                            <button type="button" class="btn btn-primary dropdown-item comic_action" title="Mark Read" selector="{{ selector }}" itemtype="Directory" comic_action="mark_read"><i class="fas fa-book-open">Mark Read</i></button>
{#                            <button type="button" class="btn btn-primary dropdown-item" title="Edit Comic"><i class="fas fa-edit">Edit Comic</i></button>#}
                        </div>
                      </div>
            </div>
        </div>
    </div>
</div>
<div class="container comic-container">
    <div class="row grid ">
        {% for file in files %}
        <div class="m-2 grid-item {% if file.percent == 100 %}read{% else %}unread{% endif %}">
            <div class="card card_list_card">
                {% if file.item_type == 'Directory' %}
                    <a href="{% url "comic_list" file.selector %}">
                {% elif file.item_type == 'ComicBook' %}
                    <a href="{% url "read_comic" file.selector %}">
                {% endif %}

                    {% if file.obj.thumbnail %}
                    <img src="{{file.obj.thumbnail.url}}" class="card-img-top" alt="{{ file.name }}" alt_src="{% static "/img/placeholder.png" %}" onerror="this.onerror=null;this.src=this.getAttribute('alt_src');">
                    {% else %}
                        {% if file.item_type == 'Directory' %}
                            <img src="{% url 'directory_thumbnail' file.selector %}" class="card-img-top" alt="{{ file.name }}" alt_src="{% static "/img/placeholder.png" %}" onerror="this.onerror=null;this.src=this.getAttribute('alt_src');">
                        {% elif file.item_type == 'ComicBook' %}
                            <img src="{% url 'comic_thumbnail' file.selector %}" class="card-img-top" alt="{{ file.name }}" alt_src="{% static "/img/placeholder.png" %}" onerror="this.onerror=null;this.src=this.getAttribute('alt_src');">
                        {% endif %}
                    {% endif %}
                </a>
                <div class="card-body">
                    <h5 class="card-title {{ file.selector }}">
                        {% if file.item_type == 'Directory' %}
                            <a href="{% url "comic_list" file.selector %}" class="search-name">
                        {% elif file.item_type == 'ComicBook' %}
                            <a href="{% url "read_comic" file.selector %}" class="search-name">
                        {% endif %}
                            {{ file.name }}
                        </a>
                    </h5>
                    <p class="card-text">
                        <figure class="text-center w-100 mb-0">{{ file.total_read }} / {{ file.total }}</figure>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar"  aria-valuenow="{{ file.percent }}" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </p>
                <div class="btn-group w-100" role="group" aria-label="Comic Actions">
                    <button type="button" class="btn btn-primary comic_action" title="Mark Un-Read" selector="{{ file.selector }}" itemtype="{{ file.item_type }}" comic_action="mark_unread"><i class="fas fa-book"></i></button>
                    <button type="button" class="btn btn-primary comic_action" title="Mark Read" selector="{{ file.selector }}" itemtype="{{ file.item_type }}" comic_action="mark_read"><i class="fas fa-book-open"></i></button>
                    <div class="btn-group" role="group">
                        <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                        </button>
                        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                            <button type="button" class="btn btn-primary dropdown-item comic_action" title="Mark Un-Read"  selector="{{ file.selector }}" itemtype="{{ file.item_type }}" comic_action="mark_unread"><i class="fas fa-book">Mark Un-Read</i></button>
                            <button type="button" class="btn btn-primary dropdown-item comic_action" title="Mark Read" selector="{{ file.selector }}" itemtype="{{ file.item_type }}" comic_action="mark_read"><i class="fas fa-book-open">Mark Read</i></button>
                            {% if file.item_type != 'Directory' %}
                            <button type="button" class="btn btn-primary dropdown-item comic_action" title="Mark Previous Read" selector="{{ file.selector }}" itemtype="{{ file.item_type }}" comic_action="mark_previous"><i class="fas fa-book"><i class="fas fa-arrow-up">Mark Previous Read</i></i></button>
                            {% else %}
                            <button type="button" class="btn btn-primary dropdown-item modal-button" title="Edit Comic" data-toggle="modal" data-target="#editModal" selector="{{ file.selector }}" itemtype="{{ file.item_type }}"><i class="fas fa-edit">Edit Comic</i></button>
                            {% endif %}

                        </div>
                      </div>

                </div>
                </div>
                {% if file.total_unread and file.item_type == 'Directory' %}
                <span class="badge rounded-pill bg-primary unread-badge">{{ file.total_unread }}</span>
                {% endif %}
                <span class="badge rounded-pill bg-warning {{ file.selector }} classification-badge" classification="{{ file.obj.classification }}">{{ file.obj.get_classification_display }}</span>

            </div>
        </div>
        {% endfor %}
    </div>
</div>
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          {% csrf_token %}
          {% bootstrap_form form %}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="save_button">Save changes</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block script %}
    {{ js_urls|json_script:'js_urls' }}
    <script type="text/javascript" src="{% static "js/comic_list.min.js" %}"></script>
{% endblock %}