Fakultas Ilmu Komputer UI

detail_materi.html 12.6 KB
Newer Older
1
{% extends 'base.html' %}
2
{% load static %} {% load humanize %}
3
4

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

{% block title %}
13
{{materi_data.title}} | Digipus
14
{% endblock title %}
15
16

{% block content %}
17
    {% block verification %} {% endblock verification %}
18
    <div id="fb-root"></div>
19
    <div class="container-fluid p-0 bg detail-materi-color">
20
21
22
23
24
25
26
27
28
29
30
31
        <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">

32
33
34
35
            <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>
36
37
38
39
40
            </li>

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

            <!-- Nav Item - User Information -->
41
            {% if request.user.is_authenticated %}
42
43
44
            <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">
45
                <span class="mr-2 d-none d-lg-inline text-gray-600 small">{{ user.name }}</span>
46
47
48
                {% 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 %}
49
                <img class="img-profile rounded-circle" src="{{ user.profile_picture.url }}" alt="User profile picture">
50
                {% endif %}
51
52
              </a>
            </li>
53
            {% endif %}
54
55
56
57
58

          </ul>

        </nav>
        <div class="row materi-data mr-4 ml-4 p-3 shadow-sm rounded">
59
            <div class="col col-3 cover">
60
                <img src={{materi_data.cover.url}} alt="cover">
61
            </div>
62
63
64
65
66
67
68
            <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>
69
70
71
72
73
74
                <div class="info-wrapper">
                    <div class="info" id="1">
                        <dt class="col col-4">
                            <p class="info-name">Penulis</p>
                        </dt>
                        <dd>
75
                            <p class="info-content">{{materi_data.author}}</p>
76
77
78
79
80
81
82
                        </dd>
                    </div>
                    <div class="info" id="1">
                        <dt class="col col-4">
                            <p class="info-name">Penerbit</p>
                        </dt>
                        <dd>
83
                            <p class="info-content">{{materi_data.publisher}}</p>
84
85
86
87
88
89
90
                        </dd>
                    </div>
                    <div class="info" id="1">
                        <dt class="col col-4">
                            <p class="info-name">Jumlah Halaman</p>
                        </dt>
                        <dd>
91
                            <p class="info-content">{{materi_data.pages}}</p>
92
93
94
95
96
97
98
                        </dd>
                    </div>
                    <div class="info" id="1">
                        <dt class="col col-4">
                            <p class="info-name">Ukuran File</p>
                        </dt>
                        <dd>
99
                            <p class="info-content">{{materi_data.content.size|filesizeformat}}</p>
100
101
102
                        </dd>
                    </div>
                </div>
103
104
105
106
107
108
109
110
111
112
113
114
115
                <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"
116
                                target="_blank"
117
118
119
                                data-size="large">
                                Twitter
                            </a>
120
121
122
123
                            <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>
124
125
                        </div>
                    </div>
126
127
128
129
130
131
132
133
                    <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 %}
134
                </div>
135
136
            </div>
        </div>
137
138
        <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">  
139
140
                <ul class="navbar-nav">
                    <li class="nav-item">
141
                        <a class="nav-link" href="#deskripsi">Deskripsi</a>
142
                    </li>
143
                    {% if materi_data.status == "APPROVE" %}
144
                    <li class="nav-item">
145
                        <a class="nav-link" href="#komentar">Komentar</a>
146
                    </li>
147
                    {% endif %}
148
149
                </ul>
            </nav>
150
            <div id="deskripsi" class="container-fluid description-wrapper bg-white shadow-sm rounded p-3">
151
152
153
                <h1>Deskripsi</h1>
                <div class="col col-8 description">
                    <p>{{materi_data.descriptions}}</p>
154
                </div>
155
            </div>
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
            {% 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">
174
175
176
177
178
179
                                {% 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>
180
181
182
183
184
185
                                <p class="p-1 bd-highligh m-0"></p>
                                <p
                                    class="timestamp p-1 bd-highligh m-0 text-muted"
                                >
                                    {{ comment.timestamp|naturaltime }}
                                </p>
186
                                {% if user.is_admin %}
187
188
189
                                    <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>
190
191
192
                                {% endif %}
                            </div>
                            <p class="text">{{comment.comment}}</p>
193
                        </div>
194
                    {% endfor %}
195
                </div>
196
            {% endif %}
197
198
        </div>
    </div>
199
200
201
202
203
204
205
    <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>
206
{% endblock content %}
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
{% 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 %}