detail_materi.html

{% extends 'base.html' %}
{% load static %} {% load humanize %}

{% block header %}
<link href="{% static 'css/sb-admin-2.min.css' %}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{% static 'app/css/detail_materi.css' %}">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;1,100&display=swap" rel="stylesheet">
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0"></script>
<script src="{% static 'js/detail_materi.js'%}"></script>
{% endblock header %}

{% block title %}
{{materi_data.title}} | Digipus
{% endblock title %}

{% block content %}
    {% block verification %} {% endblock verification %}
    <div id="fb-root"></div>
    <div class="container-fluid p-0 bg detail-materi-color">
        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

          <!-- Sidebar Toggle (Topbar) -->
          <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
            <i class="fa fa-bars" aria-hidden="true"></i>
          </button>

          <div class="sidebar-brand-text mx-3">Diskominfo Kota Depok</div>

          <!-- Topbar Navbar -->
          <ul class="navbar-nav ml-auto">

            <li class="nav-item">
                <a class="nav-link" href="/">
                    <span class="mr-2 d-none d-lg-inline text-gray-600 small">Halaman Katalog</span>
                </a>
            </li>

            <div class="topbar-divider d-none d-sm-block"></div>

            <!-- Nav Item - User Information -->
            {% if request.user.is_authenticated %}
            <li class="nav-item dropdown no-arrow">
              <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                <span class="mr-2 d-none d-lg-inline text-gray-600 small">{{ user.name }}</span>
                {% if not user.default_profile_picture %}
                <img class="img-profile rounded-circle" src="https://i.ibb.co/9wgPzyZ/default-image.png" alt="User profile picture">
                {% else %}
                <img class="img-profile rounded-circle" src="{{ user.profile_picture.url }}" alt="User profile picture">
                {% endif %}
              </a>
            </li>
            {% endif %}

          </ul>

        </nav>
        <div class="row materi-data mr-4 ml-4 p-3 shadow-sm rounded">
            <div class="col col-3 cover">
                <img src={{materi_data.cover.url}} alt="cover">
            </div>
            <div class="col col-6 ml-3 book">
                <h2>{{materi_data.title}}</h2>
                <div class="category-wrapper">
                    {% for category in materi_data.categories.all %}
                        <span class="mr-1">#{{category.name}}</span>
                    {% endfor %}
                </div>
                <div class="info-wrapper">
                    <div class="info" id="1">
                        <dt class="col col-4">
                            <p class="info-name">Penulis</p>
                        </dt>
                        <dd>
                            <p class="info-content">{{materi_data.author}}</p>
                        </dd>
                    </div>
                    <div class="info" id="1">
                        <dt class="col col-4">
                            <p class="info-name">Penerbit</p>
                        </dt>
                        <dd>
                            <p class="info-content">{{materi_data.publisher}}</p>
                        </dd>
                    </div>
                    <div class="info" id="1">
                        <dt class="col col-4">
                            <p class="info-name">Jumlah Halaman</p>
                        </dt>
                        <dd>
                            <p class="info-content">{{materi_data.pages}}</p>
                        </dd>
                    </div>
                    <div class="info" id="1">
                        <dt class="col col-4">
                            <p class="info-name">Ukuran File</p>
                        </dt>
                        <dd>
                            <p class="info-content">{{materi_data.content.size|filesizeformat}}</p>
                        </dd>
                    </div>
                </div>
                <div class="buttons d-flex flex-row bd-highlight mb-1">
                    <a href="{% url 'view-materi' materi_data.id %}" class="btn btn-link btn-book shadow-sm p-2 mr-2 bg-white rounded">Baca</a>
                    <a href="{% url 'download-materi' materi_data.id %}" class="btn btn-link btn-book shadow-sm p-2 mr-2 bg-white rounded">Unduh</a>
                    <div class="dropdown">
                        <button class="btn dropdown-toggle btn-book shadow-sm p-2 mr-2 bg-white rounded" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Bagikan
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <div class="fb-share-button" data-href="{% url 'detail-materi' materi_data.id %}" data-layout="button" data-size="small">
                                <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdigipus-staging-2.herokuapp.com%2Fmateri%2F{{materi_data.id}}%2F&amp;src=sdkpreparse" class="dropdown-item fb-xfbml-parse-ignore">Facebook</a>
                            </div>
                            <a class="twitter-share-button dropdown-item"
                                href="https://twitter.com/intent/tweet?text=Cek%20materi%20ini%20yuk%20https%3A%2F%2Fdigipus-staging-2.herokuapp.com%2Fmateri%2F{{materi_data.id}}%2F"
                                target="_blank"
                                data-size="large">
                                Twitter
                            </a>
                            <a class="dropdown-item" href="whatsapp://send?text=Cek materi ini yuk! https://digipus-staging-2.herokuapp.com{{request.path}}" target="_blank">Whatsapp</a>
                            <a class="dropdown-item" href="https://social-plugins.line.me/lineit/share?url=https%3A%2F%2Fdigipus-staging-2.herokuapp.com%2Fmateri%2F{{materi_data.id}}%2F" target="_blank">Line</a>
                            <p id="url" style="display: none">https://digipus-staging-2.herokuapp.com{{request.path}}</p>
                            <button class="dropdown-item btn-book" onclick="copyToClipboard('#url')">Bagikan Tautan</button>
                        </div>
                    </div>
                    <form action="" method="POST">
                        <input type="hidden" name="action" value="like">
                    </form>
                    {% if has_liked %}
                    <button id="thumb" class="btn btn-link btn-book shadow-sm p-2 mr-2 bg-white rounded"><i id="thumbIcon" aria-hidden="true" class="fas fa-thumbs-up"></i> Disukai</button>
                    {% else %}
                    <button id="thumb" class="btn btn-link btn-book shadow-sm p-2 mr-2 bg-white rounded"><i id="thumbIcon" aria-hidden="true" class="far fa-thumbs-up"></i> Sukai</button>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="row menu-wrapper mr-4 ml-4 p-3">
            <nav class="navbar navbar-expand-sm border-top border-bottom p-0 mt-3 mb-3">  
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#deskripsi">Deskripsi</a>
                    </li>
                    {% if materi_data.status == "APPROVE" %}
                    <li class="nav-item">
                        <a class="nav-link" href="#komentar">Komentar</a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            <div id="deskripsi" class="container-fluid description-wrapper bg-white shadow-sm rounded p-3">
                <h1>Deskripsi</h1>
                <div class="col col-8 description">
                    <p>{{materi_data.descriptions}}</p>
                </div>
            </div>
            {% if materi_data.status == "APPROVE" %}
                <div id="komentar" class="container-fluid comments-wrapper p-0">
                    <div class="add-comments col col-8 bg-white shadow-sm rounded p-3 mb-3">
                        <form method="POST">
                            {% csrf_token %}
                            <h1>Komentar</h1>
                            <div class="form-group">
                                <textarea placeholder="Beri komentar..." class="form-control" 
                                        id="exampleFormControlTextarea1" 
                                        rows="3" name="comment" required
                                ></textarea>
                                <button type="submit" class="btn btn-link btn-book shadow-sm p-2 mt-2 bg-white rounded">Kirim</button>
                            </div>
                        </form>
                    </div>
                    {% for comment in comment_data %}
                        <div class="col col-8 comment shadow-sm p-3 mb-1 bg-white rounded">
                            <div class="d-flex bd-highlight mb-3 align-items-center user">
                                {% if comment.user != Null %}
                                    <img class="profile" src="{{ comment.user.profile_picture.url }}" alt="profile-picture">
                                {% else %}
                                    <span style="background-color: #{{comment.profile}}" class="profile p-1 bd-highligh"></span>
                                {% endif %}
                                <p class="p-1 bd-highligh m-0"><b>{{comment.user.name}}</b></p>
                                <p class="p-1 bd-highligh m-0">•</p>
                                <p
                                    class="timestamp p-1 bd-highligh m-0 text-muted"
                                >
                                    {{ comment.timestamp|naturaltime }}
                                </p>
                                {% if user.is_admin %}
                                    <a class="ml-auto p-1 bd-highlight close" href="{% url 'delete-comment' materi_data.id comment.id %}">
                                        <span aria-hidden="true">&times;</span>
                                    </a>
                                {% endif %}
                            </div>
                            <p class="text">{{comment.comment}}</p>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>
    <footer class="sticky-footer bg-white p-4">
        <div class="container my-auto">
          <div class="copyright text-center my-auto">
            <span>Copyright &copy; Diskominfo Kota Depok 2020</span>
          </div>
        </div>
      </footer>
{% endblock content %}
{% block extra_scripts %}
<script src="https://kit.fontawesome.com/bc2cedd6b2.js" crossorigin="anonymous"></script>
<script type="text/javascript">
    // using jQuery
    var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
</script>
<script>
    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
</script>
<script>
        $('#thumb').click(function () {

            $.ajaxSetup({
                beforeSend: function (xhr, settings) {
                    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                }
            });
            $.ajax({
                type: 'POST',
                url: "{% url 'PostLikeToggle' %}",
                data: {
                    'materi_id': "{{ materi_data.id }}",
                    'session_id': "{{ session_id }}"
                },
                success: LikePost,
                dataType: 'html'
            });
        });


        function LikePost(data, jqXHR) {
            var data = $.parseJSON(data)
            if (data['liked']) {
                $('#thumbIcon').removeClass("fas fa-thumbs-up").addClass('far fa-thumbs-up')
                document.getElementById("thumb").firstChild.data = " Sukai"
            } else {
                $('#thumbIcon').removeClass("far fa-thumbs-up").addClass('fas fa-thumbs-up')
                document.getElementById("thumb").firstChild.data = " Disukai"
            }
        }
</script>
{% endblock extra_scripts %}