Fakultas Ilmu Komputer UI

Commit 8ba8e2da authored by arif teguh wangi's avatar arif teguh wangi
Browse files

Merge branch 'master' of...

Merge branch 'master' of https://gitlab.cs.ui.ac.id/pmpl/class-project/marjinal-digipus into 1706040012-30
parents 59309e71 4a8b9a90
Pipeline #57865 passed with stages
in 8 minutes and 46 seconds
......@@ -62,12 +62,21 @@
</button>
</div>
<div class="modal-body">
<p>Sila konfirmasi penghapusan akun dengan tekan tombol hapus di bawah</p>
<p>Anda akan menghapus akun admin dengan email
<span class="bg-danger pr-1 pl-1 text-white" style="text-transform: lowercase">{{current.email}}</span>
. Lakukan konfirmasi penghapusan dengan mengetik: </p>
<p class="bg-danger text-white p-1"> {{current.email}} </p>
</div>
<form/>
{% csrf_token %}
<div class="form-group pl-3 pr-3">
<input name="{{ current.email }}" class="form-control" id="{{ current.id }}"required pattern="{{current.email}}" oninput="checkValue(this)">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
<a href="/administration/hapus-admin/{{current.id}}/" type="button" class="btn btn-danger">Hapus</a>
<a href="/administration/hapus-admin/{{current.id}}/" id="btn-hapus-{{current.id}}" type="button" class="btn btn-danger disabled">Hapus</a>
</div>
</form>
</div>
</div>
</div>
......@@ -118,4 +127,14 @@
</div>
</div>
</div>
<script type="text/javascript">
function checkValue(element){
buttonElement = document.getElementById("btn-hapus-" + element.id)
if(element.value != element.name) {
buttonElement.classList.add("disabled");
} else {
buttonElement.classList.remove("disabled");
}
}
</script>
{% endblock %}
\ No newline at end of file
.img-profile {
width: 10vw;
height: 10vw;
}
.profile-data {
color: #615CFD;
padding-right: 75px;
}
\ No newline at end of file
......@@ -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,9 +15,9 @@
{% endblock title %}
{% block content %}
{% block verification %} {% endblock verification %}
<div id="fb-root"></div>
<div class="container-fluid p-0 bg detail-materi-color">
{% 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) -->
......@@ -35,7 +36,8 @@
<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 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">
......@@ -48,7 +50,8 @@
{% 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>
<p class="black-text">Untuk merevisi materi, sila tekan tombol revisi di halaman riwayat
unggah.</p>
{% endfor %}
</div>
<div class="modal-footer">
......@@ -83,9 +86,11 @@
<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">
<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">
<img class="img-profile rounded-circle" src="{{ user.profile_picture.url }}"
alt="User profile picture">
{% endif %}
</a>
</li>
......@@ -107,38 +112,79 @@
</div>
<div class="info-wrapper">
<div class="info" id="1">
<dt class="col col-4">
<p class="info-name">Penulis</p>
</dt>
<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" id="1">
<dt class="col col-4">
<p class="info-name">Penerbit</p>
</dt>
<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="info" id="1">
<dt class="col col-4">
<p class="info-name">Jumlah Halaman</p>
</dt>
<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">
<dt class="col col-4">
<p class="info-name">Ukuran File</p>
</dt>
<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&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>
<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>
......@@ -161,15 +207,40 @@
<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>
<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>
<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>
</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>
......@@ -200,11 +271,10 @@
{% 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>
<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>
......@@ -222,13 +292,12 @@
{% 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"
>
<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 %}">
<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 %}
......@@ -239,20 +308,97 @@
</div>
{% endif %}
</div>
</div>
<footer class="sticky-footer bg-white p-4">
</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>
</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">&times;</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>
<script type="text/javascript">
// using jQuery
var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
let currentRating = {{ materi_rating_score }};
fillRatingStar(currentRating)
function changeButtonIntoRated() {
$('#button-rating-star-icon').addClass('fas');
$('#button-rating-star-icon').removeClass('far');
$('#button-rating-text').text("Rating Anda")
}
if (currentRating > 0) {
changeButtonIntoRated()
}
$("#star-dropdown").click(function (e) {
e.stopPropagation();
});
function clearRatingStar() {
for (let i = 1; i <= 5; i++) {
$('#star-' + i).addClass('far');
$('#star-' + i).removeClass('fas');
}
}
function fillRatingStar(ratingScore) {
for (let i = 1; i <= ratingScore; i++) {
$('#star-' + i).addClass('fas');
$('#star-' + i).removeClass('far');
}
}
function makeHoverStar(starAmount) {
function hoverStar() {
clearRatingStar()
fillRatingStar(starAmount)
}
return hoverStar
}
function makeUnHoverStar(starAmount) {
function unHoverStar() {
clearRatingStar()
fillRatingStar(currentRating)
}
return unHoverStar
}
$('#star-1').hover(makeHoverStar(1), makeUnHoverStar(1));
$('#star-2').hover(makeHoverStar(2), makeUnHoverStar(2));
$('#star-3').hover(makeHoverStar(3), makeUnHoverStar(3));
$('#star-4').hover(makeHoverStar(4), makeUnHoverStar(4));
$('#star-5').hover(makeHoverStar(5), makeUnHoverStar(5));
</script>
<script>
function csrfSafeMethod(method) {
......@@ -282,6 +428,32 @@
});
});
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()
},
dataType: 'html'
});
}
function LikePost(data, jqXHR) {
var data = $.parseJSON(data)
......@@ -292,7 +464,6 @@
$('#thumbIcon').removeClass("far fa-thumbs-up").addClass('fas fa-thumbs-up')
document.getElementById("thumb").firstChild.data = " Disukai"
}
}
function CitateAPA(text){
alert('Hasil citasi : '+text);
}
......
{% 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}}">&laquo; 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 &raquo;</a>
{% endif %}
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
{% endblock %}
\ No newline at end of file
......@@ -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">
......@@ -58,11 +58,13 @@
<p class="description">Cari dengan judul buku, penerbit, atau penulis</p>
<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>
......@@ -75,20 +77,14 @@
<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">
<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"