diff --git a/app/static/app/css/katalog_kontri.css b/app/static/app/css/katalog_kontri.css new file mode 100644 index 0000000000000000000000000000000000000000..c6ff672311e4bfad5a4811ff2b0816fcb5c99e9c --- /dev/null +++ b/app/static/app/css/katalog_kontri.css @@ -0,0 +1,9 @@ +.img-profile { + width: 10vw; + height: 10vw; +} + +.profile-data { + color: #615CFD; + padding-right: 75px; +} \ No newline at end of file diff --git a/app/templates/app/detail_materi.html b/app/templates/app/detail_materi.html index 7eade72301d133cf466a3d71a7ba3606c1484866..3a0db58e5b88b78a8c4ffa721e037b290442ce06 100644 --- a/app/templates/app/detail_materi.html +++ b/app/templates/app/detail_materi.html @@ -5,7 +5,8 @@ <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 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 %} @@ -14,51 +15,53 @@ {% 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"> +{% 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"> + <!-- 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> + </button> - <div class="sidebar-brand-text mx-3">Diskominfo Kota Depok</div> + <div class="sidebar-brand-text mx-3">Diskominfo Kota Depok</div> - <!-- Topbar Navbar --> - <ul class="navbar-nav ml-auto"> + <!-- Topbar Navbar --> + <ul class="navbar-nav ml-auto"> {% if request.user.is_contributor %} - {% if materi_data.status == "DISAPPROVE" %} - <li class="nav-item black-text"> - <a class="nav-link feedback" data-toggle="modal" data-target="#umpanBalikModal"> - <span class="mr-2 d-none d-lg-inline text-gray-600 small">Umpan Balik Materi</span> - </a> - <div class="modal fade" id="umpanBalikModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> - <div class="modal-dialog" role="document"> - <div class="modal-content"> + {% if materi_data.status == "DISAPPROVE" %} + <li class="nav-item black-text"> + <a class="nav-link feedback" data-toggle="modal" data-target="#umpanBalikModal"> + <span class="mr-2 d-none d-lg-inline text-gray-600 small">Umpan Balik Materi</span> + </a> + <div class="modal fade" id="umpanBalikModal" tabindex="-1" role="dialog" + aria-labelledby="exampleModalLabel" aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title black-text" id="exampleModalLabel">Umpan Balik Materi</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> + <h5 class="modal-title black-text" id="exampleModalLabel">Umpan Balik Materi</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> </div> <div class="modal-body"> - {% for item in report %} + {% for item in report %} <p class="black-text">Alasan materi ditolak:</p> <p class="black-text">{{ item.report.feedback }}</p> - <p class="black-text">Untuk merevisi materi, sila tekan tombol revisi di halaman riwayat unggah.</p> - {% endfor %} + <p class="black-text">Untuk merevisi materi, sila tekan tombol revisi di halaman riwayat + unggah.</p> + {% endfor %} </div> <div class="modal-footer"> - <button type="button" class="btn btn-danger" data-dismiss="modal">Tutup</button> + <button type="button" class="btn btn-danger" data-dismiss="modal">Tutup</button> </div> - </div> </div> - </div> - </li> - {% endif %} + </div> + </div> + </li> + {% endif %} {% endif %} <li class="nav-item"> @@ -80,222 +83,239 @@ <!-- Nav Item - User Information --> {% if request.user.is_authenticated %} <li class="nav-item dropdown no-arrow"> - <a class="nav-link dropdown-toggle" href="/dashboard/"> - <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> + <a class="nav-link dropdown-toggle" href="/dashboard/"> + <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> + </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"> + </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="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 class="info-wrapper"> + <div class="info" id="1"> + <dl class="col col-4"> + <dt class="info-name">Penulis</dt> + </dl> + <dd> + <p class="info-content">{{materi_data.author}}</p> + </dd> </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 class="info" id="1"> + <dl class="col col-4"> + <dt class="info-name">Penerbit</dt> + </dl> + <dd> + <p class="info-content">{{materi_data.publisher}}</p> + </dd> </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&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 class="info" id="1"> + <dl class="col col-4"> + <dt class="info-name">Kontributor</dt> + </dl> + <dd> + <a class="info-content" + href="{% url 'katalog-per-kontributor' materi_data.uploader.email %}">{{materi_data.uploader.name}}</a> + </dd> + </div> + <div class="info" id="1"> + <dl class="col col-4"> + <dt class="info-name">Jumlah Halaman</dt> + </dl> + <dd> + <p class="info-content">{{materi_data.pages}}</p> + </dd> + </div> + <div class="info" id="1"> + <dl class="col col-4"> + <dt class="info-name">Ukuran File</dt> + </dl> + <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&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> - <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> + <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 %} - {% if user.is_authenticated %} - <div class="dropdown"> - <button class="btn dropdown-toggle btn-book shadow-sm p-2 mr-2 bg-white rounded align-self-center" - type="button" data-toggle="dropdown" aria-haspopup="true" - aria-expanded="false"> - <em id="button-rating-star-icon" class="align-self-center far fa-star"></em> - <span id="button-rating-text">Beri Rating</span> - </button> - <div id="star-dropdown" class="dropdown-menu" aria-labelledby="dropdownMenuButton"> - <div class="text-center btn-book"> - <em onclick="postAddRating(1)" id="star-1" class="far fa-star fa-lg"></em> - <em onclick="postAddRating(2)" id="star-2" class="far fa-star fa-lg"></em> - <em onclick="postAddRating(3)" id="star-3" class="far fa-star fa-lg"></em> - <em onclick="postAddRating(4)" id="star-4" class="far fa-star fa-lg"></em> - <em onclick="postAddRating(5)" id="star-5" class="far fa-star fa-lg"></em> - </div> - </div> + {% if user.is_authenticated %} + <div class="dropdown"> + <button class="btn dropdown-toggle btn-book shadow-sm p-2 mr-2 bg-white rounded align-self-center" + type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <em id="button-rating-star-icon" class="align-self-center far fa-star"></em> + <span id="button-rating-text">Beri Rating</span> + </button> + <div id="star-dropdown" class="dropdown-menu" aria-labelledby="dropdownMenuButton"> + <div class="text-center btn-book"> + <em onclick="postAddRating(1)" id="star-1" class="far fa-star fa-lg"></em> + <em onclick="postAddRating(2)" id="star-2" class="far fa-star fa-lg"></em> + <em onclick="postAddRating(3)" id="star-3" class="far fa-star fa-lg"></em> + <em onclick="postAddRating(4)" id="star-4" class="far fa-star fa-lg"></em> + <em onclick="postAddRating(5)" id="star-5" class="far fa-star fa-lg"></em> </div> - {% else %} - <button class="btn dropdown-toggle btn-book shadow-sm p-2 mr-2 bg-white rounded align-self-center" - type="button" - id="dropdownMenuButton" aria-haspopup="true" - aria-expanded="false" data-toggle="modal" - data-target="#notLoggedInModal"> - <em class="align-self-center far fa-star"></em> Beri Rating - </button> - {% endif %} + </div> </div> + {% else %} + <button class="btn dropdown-toggle btn-book shadow-sm p-2 mr-2 bg-white rounded align-self-center" + type="button" id="dropdownMenuButton" aria-haspopup="true" aria-expanded="false" data-toggle="modal" + data-target="#notLoggedInModal"> + <em class="align-self-center far fa-star"></em> Beri Rating + </button> + {% endif %} </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> + <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> - {% 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> + {% 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> - {% 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 %} - {% if not user.default_profile_picture %} - <img class="profile" src="https://i.ibb.co/9wgPzyZ/default-image.png" alt="profile-picture"> - {% else %} - <img class="profile" src="{{ comment.user.profile_picture.url }}" alt="profile-picture"> - {% endif %} - {% 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">×</span> - </a> - {% endif %} - </div> - <p class="text">{{comment.comment}}</p> - </div> - {% endfor %} + </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 %} + {% if not user.default_profile_picture %} + <img class="profile" src="https://i.ibb.co/9wgPzyZ/default-image.png" alt="profile-picture"> + {% else %} + <img class="profile" src="{{ comment.user.profile_picture.url }}" alt="profile-picture"> + {% endif %} + {% 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">×</span> + </a> + {% endif %} </div> - {% endif %} + <p class="text">{{comment.comment}}</p> + </div> + {% endfor %} </div> + {% endif %} </div> - <footer class="sticky-footer bg-white p-4"> - <div class="container my-auto"> - <div class="copyright text-center my-auto"> +</div> +<footer class="sticky-footer bg-white p-4"> + <div class="container my-auto"> + <div class="copyright text-center my-auto"> <span>Copyright © Diskominfo Kota Depok 2020</span> - </div> </div> - </footer> + </div> +</footer> - <!-- Modal --> - <div class="modal fade" id="notLoggedInModal" tabindex="-1" role="dialog" aria-labelledby="notLoggedInModalLabel" - aria-hidden="true"> - <div class="modal-dialog" role="document"> - <div class="modal-content"> - <div class="modal-header"> - <h5 class="modal-title" id="notLoggedInModalLabel">Belum Login</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> - </div> - <div class="modal-body"> - Login untuk memberikan rating - </div> - <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button> - <button type="button" class="btn btn-primary" onclick="window.location.href = '/login';">Login</button> - </div> +<!-- Modal --> +<div class="modal fade" id="notLoggedInModal" tabindex="-1" role="dialog" aria-labelledby="notLoggedInModalLabel" + aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="notLoggedInModalLabel">Belum Login</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + Login untuk memberikan rating + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button> + <button type="button" class="btn btn-primary" onclick="window.location.href = '/login';">Login</button> </div> </div> </div> +</div> {% endblock content %} {% block extra_scripts %} <script src="https://kit.fontawesome.com/bc2cedd6b2.js" crossorigin="anonymous"></script> @@ -329,9 +349,9 @@ function fillRatingStar(ratingScore) { for (let i = 1; i <= ratingScore; i++) { - $('#star-' + i).addClass('fas'); - $('#star-' + i).removeClass('far'); - } + $('#star-' + i).addClass('fas'); + $('#star-' + i).removeClass('far'); + } } function makeHoverStar(starAmount) { @@ -365,63 +385,63 @@ } </script> <script> - $('#thumb').click(function () { + $('#thumb').click(function () { - $.ajaxSetup({ - beforeSend: function (xhr, settings) { - if (!csrfSafeMethod(settings.type) && !this.crossDomain) { - xhr.setRequestHeader("X-CSRFToken", csrftoken); - } + $.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' - }); + } }); + $.ajax({ + type: 'POST', + url: "{% url 'PostLikeToggle' %}", + data: { + 'materi_id': "{{ materi_data.id }}", + 'session_id': "{{ session_id }}" + }, + success: LikePost, + dataType: 'html' + }); + }); - function postAddRating(rating_score) { - $.ajaxSetup({ - beforeSend: function (xhr, settings) { - if (!csrfSafeMethod(settings.type) && !this.crossDomain) { - xhr.setRequestHeader("X-CSRFToken", csrftoken); - } + function postAddRating(rating_score) { + $.ajaxSetup({ + beforeSend: function (xhr, settings) { + if (!csrfSafeMethod(settings.type) && !this.crossDomain) { + xhr.setRequestHeader("X-CSRFToken", csrftoken); } - }); + } + }); - $.ajax({ - type: 'POST', - url: "{% url 'rate-materi' %}", - data: { - 'materi_id': "{{ materi_data.id }}", - 'rating_score': rating_score - }, - success: function (data) { - const response = JSON.parse(data) - currentRating = response.rating_score - makeUnHoverStar(currentRating)() - changeButtonIntoRated() + $.ajax({ + type: 'POST', + url: "{% url 'rate-materi' %}", + data: { + 'materi_id': "{{ materi_data.id }}", + 'rating_score': rating_score + }, + success: function (data) { + const response = JSON.parse(data) + currentRating = response.rating_score + makeUnHoverStar(currentRating)() + changeButtonIntoRated() - }, - dataType: 'html' - }); - } + }, + 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" - } + 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 %} +{% endblock extra_scripts %} \ No newline at end of file diff --git a/app/templates/app/katalog_kontri.html b/app/templates/app/katalog_kontri.html new file mode 100644 index 0000000000000000000000000000000000000000..3ddaf130261abbbb2ccc0c546f855e93b876f14d --- /dev/null +++ b/app/templates/app/katalog_kontri.html @@ -0,0 +1,135 @@ +{% extends "base.html" %} +{% load static %} +{% block title %}Digipus - {% endblock %} +{% block header %} + +<!DOCTYPE html> +<html lang="en"> + +<head> + <title>Digipus Home</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + + <link href="../../static/app/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> + <link href="../../static/app/css/heroic-features.css" rel="stylesheet"> + + <link rel="stylesheet" type="text/css" href="{% static 'app/css/katalog_materi.css' %}"> + <link rel="stylesheet" type="text/css" href="{% static 'app/css/katalog_kontri.css' %}"> + + <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}"> + <link rel="stylesheet" type="text/css" href="{% static 'css/util.css' %}"> + <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}"> + + <link rel="stylesheet" type="text/css" href="{% static 'fonts/font-awesome-4.7.0/css/font-awesome.min.css' %}"> + <link rel="stylesheet" type="text/css" href="{% static 'vendor/animsition/css/animsition.min.css' %}"> + <link rel="stylesheet" type="text/css" href="{% static 'vendor/daterangepicker/daterangepicker.css' %}"> + <link rel="stylesheet" type="text/css" href="{% static 'vendor/css-hamburgers/hamburgers.min.css' %}"> + <link rel="stylesheet" type="text/css" href="{% static 'vendor/select2/select2.min.css' %}"> + <link rel="stylesheet" type="text/css" href="{% static 'vendor/animate/animate.css' %}"> + + <link rel="icon" type="image/png" href="{% static 'images/icons/logo.ico' %}" /> + + + {% endblock header %} + {% block content %} + +</head> + +<body style="background-color: #f8f8f8;"> + <div class="container main"> + <header class="jumbotron my-4" id="profile"> + <div class="container sub"> + <div class="row"> + <div class="col-lg-3"> + <div class="img-squared"> + {% if not contributor.default_profile_picture %} + <img class="img-profile rounded-circle" src="https://i.ibb.co/9wgPzyZ/default-image.png" + alt="Contributor profile picture"> + {% else %} + <img class="img-profile rounded-circle" src="{{ contributor.profile_picture.url }}" + alt="Contributor profile picture"> + {% endif %} + </div> + </div> + <div class="col-lg-9"> + + <table aria-describedby="profile"> + <th colspan="2" id="contributor-data"> + <h3 class="profile-data">{{ contributor.name }}</h3> + <br> + </th> + <tr> + <td class="profile-data">Instansi</td> + <td>{{ contributor.instansi }}</td> + </tr> + + <tr> + <td class="profile-data">LinkedIn</td> + <td><a href="https://linkedin.com">{{ contributor.linkedin }}</a></td> + </tr> + + <tr> + <td class="profile-data">Facebook</td> + <td><a href="https://facebook.com">{{ contributor.facebook }}</a></td> + </tr> + + <tr> + <td class="profile-data">Twitter</td> + <td><a href="https://twitter.com">{{ contributor.twitter }}</a></td> + </tr> + + <tr> + <td class="profile-data">Instagram</td> + <td><a href="https://instagram.com">{{ contributor.instagram }}</a></td> + </tr> + </table> + </div> + </div> + </div> + </header> + + <div class="container"> + <div class="row content"> + <div class="col books"> + {% for materi in materi_list %} + <div class="card book"> + <img src={{materi.cover.url}} class="card-img-top" alt="cover" + style="height:200px; widows: 200px; overflow: hidden;"></img> + <div class="card-body"> + <h5 class="card-title">{{materi.title}}</h5> + <p class="card-text">{{materi.author}}</p> + <a href="{% url 'view-materi' materi.id %}" class="btn btn-book">Baca</a> + <a href="{% url 'detail-materi' materi.id %}" class="btn btn-book">Detail</a> + </div> + </div> + {% endfor %} + </div> + <div class="center"> + <div class="pagination"> + <span class="step-links"> + <span class="current"> + Page {{ materi_list.number }} of {{ materi_list.paginator.num_pages }} + </span> + <br> + {% if materi_list.has_previous %} + <a href="?page=1{{url}}">« first</a> + <a href="?page={{ materi_list.previous_page_number }}{{url}}">previous</a> + {% endif %} + + {% if materi_list.has_next %} + <a href="?page={{ materi_list.next_page_number }}{{url}}">next</a> + <a href="?page={{ materi_list.paginator.num_pages }}{{url}}">last »</a> + {% endif %} + </span> + </div> + </div> + + </div> + </div> + </div> +</body> + +</html> + +{% endblock %} \ No newline at end of file diff --git a/app/templates/app/katalog_materi.html b/app/templates/app/katalog_materi.html index 9782d19d98c75aafb5239947bcd5ffbfdb193cec..c4013e21b6549391bcea6a7281e3540f782a98d0 100644 --- a/app/templates/app/katalog_materi.html +++ b/app/templates/app/katalog_materi.html @@ -41,13 +41,13 @@ <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}"> <!--===============================================================================================--> -{% endblock header %} -{% block content %} + {% endblock header %} + {% block content %} </head> <body style="background-color: #f8f8f8;"> -<!-- Page Content --> + <!-- Page Content --> <div class="container"> <header class="jumbotron my-4"> @@ -56,18 +56,20 @@ <div class="col"> <h2 class="pageTitle">Temukan Materi Yang Kamu Mau!</h2> <p class="description">Cari dengan judul buku, penerbit, atau penulis</p> - <form class="searchBar" action=''> + <form class="searchBar" action=''> <div class="col-6 form-group"> - <input type="text" name='search' class="form-control" placeholder="Tulis di sini" value='{{request.GET.search}}'> + <input type="text" name='search' class="form-control" placeholder="Tulis di sini" + value='{{request.GET.search}}'> </div> <button type="submit" class="btn btn-cari">Cari</button> </form> - <p class="pageTitle">Tidak menemukan materi yang kamu cari ? ajukan permintaan materi kami <a href="/req-materi">disini</a></p> + <p class="pageTitle">Tidak menemukan materi yang kamu cari ? ajukan permintaan materi kami <a + href="/req-materi">disini</a></p> </div> </div> - </div> + </div> </header> - + <div class="container"> <div class="row content"> <div class="col-3 sidebar"> @@ -75,26 +77,20 @@ <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> - <button class="btn collapsed" - type="button" - data-toggle="collapse" - data-target="#collapseOne" - aria-expanded="true" - aria-controls="collapseOne"> - Filter + <button class="btn collapsed" type="button" data-toggle="collapse" + data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + Filter </button> </h2> </div> - - <div id="collapseOne" - class="collapse" - aria-labelledby="headingOne" - data-parent="#accordionExample"> + + <div id="collapseOne" class="collapse" aria-labelledby="headingOne" + data-parent="#accordionExample"> <div class="card-body"> {% for itemKategori in kategori_list %} - <li> - <a href="?kategori={{itemKategori.pk}}">{{itemKategori.name}}</a> - </li> + <li> + <a href="?kategori={{itemKategori.pk}}">{{itemKategori.name}}</a> + </li> {% endfor %} </div> </div> @@ -102,33 +98,35 @@ <div class="card"> <div class="card-header" id="headingTwo"> - <h2 class="mb-0"> - <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> - Sort - </button> - </h2> - </div> - <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> - <div class="card-body"> - <li> - <a href="?sort=terbaru">terbaru</a> - </li> - <li> - <a href="?sort=terlama">terlama</a> - </li> - <li> - <a href="?sort=terpopuler">terpopuler</a> - </li> - <li> - <a href="?sort=judul">judul</a> - </li> - <li> - <a href="?sort=penulis">penulis</a> - </li> - <li> - <a href="?sort=pengunggah">pengunggah</a> - </li> + <h2 class="mb-0"> + <button class="btn collapsed" type="button" data-toggle="collapse" + data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> + Sort + </button> + </h2> </div> + <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" + data-parent="#accordionExample"> + <div class="card-body"> + <li> + <a href="?sort=terbaru">terbaru</a> + </li> + <li> + <a href="?sort=terlama">terlama</a> + </li> + <li> + <a href="?sort=terpopuler">terpopuler</a> + </li> + <li> + <a href="?sort=judul">judul</a> + </li> + <li> + <a href="?sort=penulis">penulis</a> + </li> + <li> + <a href="?sort=pengunggah">pengunggah</a> + </li> + </div> </div> </div> </div> @@ -137,11 +135,16 @@ <div class="col-9 books"> {% for item in materi_list %} <div class="card book"> - <img src={{item.cover.url}} class="card-img-top" alt="cover" + <img src={{item.cover.url}} class="card-img-top" alt="cover" style="height:200px; widows: 200px;; overflow: hidden;"></img> <div class="card-body"> <h5 class="card-title">{{item.title}}</h5> <p class="card-text">{{item.author}}</p> + <p class="card-text">Diunggah oleh + <a class="card-link" href="{% url 'katalog-per-kontributor' item.uploader.email %}"> + {{item.uploader.name}} + </a> + </p> <a href="{% url 'view-materi' item.id %}" class="btn btn-book">Baca</a> <a href="{% url 'detail-materi' item.id %}" class="btn btn-book">Detail</a> </div> @@ -158,14 +161,14 @@ <br> </br> - + {% if materi_list.has_previous %} - <a href="?page=1{{url}}" >« first</a> + <a href="?page=1{{url}}">« first</a> <a href="?page={{ materi_list.previous_page_number }}{{url}}">previous</a> {% endif %} - - - + + + {% if materi_list.has_next %} <a href="?page={{ materi_list.next_page_number }}{{url}}">next</a> <a href="?page={{ materi_list.paginator.num_pages }}{{url}}">last »</a> @@ -173,16 +176,14 @@ </span> </div> </div> - + </div> </div> </div> - -<!-- /.container --> + + <!-- /.container --> </body> </html> -{% endblock %} - - \ No newline at end of file +{% endblock %} \ No newline at end of file diff --git a/app/tests.py b/app/tests.py index e17d391a3e362c5179a15649d368369a12e9bb26..c298f5f420f4dcf817749f7d3ef209dd2a6c0a57 100644 --- a/app/tests.py +++ b/app/tests.py @@ -19,7 +19,8 @@ from .models import Category, Comment, Materi, Like, Rating from .views import (DaftarKatalog, DashboardKontributorView, DetailMateri, ProfilKontributorView, SuksesLoginAdminView, SuksesLoginKontributorView, SuntingProfilView, - ProfilAdminView, PostsView, SuntingProfilAdminView, RevisiMateriView) + ProfilAdminView, PostsView, SuntingProfilAdminView, + RevisiMateriView, KatalogPerKontributorView) from app.forms import SuntingProfilForm from app.utils.fileManagementUtil import get_random_filename, remove_image_exifdata @@ -48,6 +49,60 @@ class DaftarKatalogTest(TestCase): resp = Materi.objects.get(id=materi.id) self.assertEqual(resp, materi) +class DaftarKatalogPerKontributorTest(TestCase): + def setUp(self): + self.client = Client() + + self.contributor_credential = { + "email": "kontributor@gov.id", + "password": "passwordtest" + } + + self.contributor_credential_2 = { + "email": "kontributor2@gov.id", + "password": "passwordtest" + } + + self.contributor = get_user_model().objects.create_user( + **self.contributor_credential, name="Kontributor 1", is_contributor=True) + self.contributor2 = get_user_model().objects.create_user( + **self.contributor_credential_2, name="Kontributor 2", is_contributor=True) + + self.cover = SimpleUploadedFile( + "Cherprang_Areekul40_nJM9dGt.jpg", b"Test file") + self.content = SimpleUploadedFile("Bahan_PA_RKK.pdf", b"Test file") + + Materi(title="Materi 1", author="Agas", uploader=self.contributor, + publisher="Kelas SC", descriptions="Deskripsi Materi 1", + status="APPROVE", cover=self.cover, content=self.content).save() + Materi(title="Materi 2", author="Agas", uploader=self.contributor, + publisher="Kelas SC", descriptions="Deskripsi Materi 2", + status="APPROVE", cover=self.cover, content=self.content).save() + Materi(title="Materi 3", author="Agas", uploader=self.contributor2, + publisher="Kelas SC", descriptions="Deskripsi Materi 3", + status="APPROVE", cover=self.cover, content=self.content).save() + + self.url = f"/profil/{self.contributor.email}/" + + def test_katalog_per_kontributor_url_exist(self): + response = self.client.get(self.url) + self.assertEqual(response.status_code, 200) + + def test_katalog_per_kontributor_using_katalog_kontri_template(self): + response = self.client.get(self.url) + self.assertTemplateUsed(response, "app/katalog_kontri.html") + + def test_katalog_per_kontributor_using_katalog_per_kontributor_func(self): + found = resolve(self.url) + self.assertEqual(found.func.__name__, KatalogPerKontributorView.as_view().__name__) + + def test_katalog_per_kontributor_show_daftar_materi_kontributor(self): + response = self.client.get(self.url) + + list_materi = Materi.objects.filter(uploader=self.contributor) + data = response.context_data['materi_list'] + self.assertEqual(len(list_materi), len(data)) + class DetailMateriTest(TestCase): def setUp(self): diff --git a/app/urls.py b/app/urls.py index 1d28cfd54a29e5d262ae013de98e1d4a5b3ed360..ac2c7682946dd6e6bb6eb4c7a500fb9c2c8f414e 100644 --- a/app/urls.py +++ b/app/urls.py @@ -4,7 +4,8 @@ from app import views from app.views import (DashboardKontributorView, ProfilKontributorView, SuksesLoginAdminView, SuksesLoginKontributorView, SuntingProfilView, UploadMateriHTML, UploadMateriView, - ProfilAdminView, PostsView, SuntingProfilAdminView, ReqMateriView) + ProfilAdminView, PostsView, SuntingProfilAdminView, + ReqMateriView, KatalogPerKontributorView) urlpatterns = [ path("", views.DaftarKatalog.as_view(), name="daftar_katalog"), @@ -28,5 +29,7 @@ urlpatterns = [ path("sunting-admin/", SuntingProfilAdminView.as_view(), name="sunting-admin"), path("req-materi/", ReqMateriView.as_view(), name="req-materi"), path("post-req-materi/", views.post_req_materi, name="post-req-materi"), + path("profil/<str:email>/", KatalogPerKontributorView.as_view(), + name="katalog-per-kontributor"), path("materi/rate/", views.add_rating_materi, name="rate-materi"), ] diff --git a/app/views.py b/app/views.py index 08c480443d37699e08d1030683c55dbadced92c1..31dbbbcada3a5dd3783cc813a6538b52d90336c4 100644 --- a/app/views.py +++ b/app/views.py @@ -77,6 +77,26 @@ class DaftarKatalog(TemplateView): context["url"] = url return self.render_to_response(context=context) +class KatalogPerKontributorView(TemplateView): + template_name = "app/katalog_kontri.html" + + def get_context_data(self, **kwargs): + context = super().get_context_data(**kwargs) + contributor = get_object_or_404(User, email=kwargs["email"]) + context["contributor"] = contributor + return context + + def get(self, request, *args, **kwargs): + context = self.get_context_data(**kwargs) + + materi_list = Materi.objects.filter(status="APPROVE", uploader=context["contributor"]).order_by("date_modified") + + paginator = Paginator(materi_list, 15) + page_number = request.GET.get('page') + materi_list_by_page = paginator.get_page(page_number) + context["materi_list"] = materi_list_by_page + + return self.render_to_response(context=context) class DetailMateri(TemplateView): template_name = "app/detail_materi.html"