Fakultas Ilmu Komputer UI

given-rating.html 4.8 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
{% extends 'app/base_profile.html' %}
{% load static %}

{% block title %}
    <title>Sunting Profil | Digipus</title>
{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{% static 'app/css/given-rating.css' %}">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
            integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
    <script>
        const order = '{{ order_by }}';
        const order_by_key = '{{ order_by_key }}';
        $(function () {

            if (order === 'asc') {
                $('#sort-ascending-option').attr('selected', true);
            } else {
                $('#sort-descending-option').attr('selected', true);
            }

            if (order_by_key === 'materi__title') {
                $('#sort-by-title-option').attr('selected', true);
            } else if (order_by_key === 'score') {
                $('#sort-by-rating-option').attr('selected', true);
            } else {
                $('#sort-by-date-option').attr('selected', true);
            }


        });


        function onSortChange(evt) {
            window.location.href = `/given-rating/?order_by_key=${order_by_key}&order=${evt.target.value}`;
        }

        function onSortKeyChange(evt) {
            window.location.href = `/given-rating/?order_by_key=${evt.target.value}&order=${order}`;
        }


    </script>

{% endblock %}

{% block content %}
    <div class="container">
        <div class="col-20">
            <h1 class="mt-2">Rating Yang Anda Berikan Ke Materi</h1>
            <hr class="mt-0 mb-4">


            {% if rating_list %}
                <div class="justify-content-end d-flex align-items-center">
                    <span class="text-sort">Urutkan Berdasarkan : </span>
                    <div class="form-group" id="form-sort-by">
                        <select class="form-control" onchange="onSortKeyChange(event)">
                            <option value="timestamp" id="sort-by-date-option">Tanggal</option>
                            <option value="materi__title" id="sort-by-title-option">Judul</option>
                            <option value="score" id="sort-by-rating-option">Rating</option>
                        </select>
                    </div>
                    <span class="text-sort">Dari : </span>
                    <div class="form-group" id="form-sort-by">
                        <select class="form-control" onchange="onSortChange(event)">
                            <option value="dsc" id="sort-descending-option">Besar ke Kecil
                            </option>
                            <option value="asc" id="sort-ascending-option">Kecil ke Besar
                            </option>
                        </select>
                    </div>
                </div>

                <table class="table table-bordered table-striped" id="table-given-rating"
                       aria-describedby="Your Given Rating List">
                    <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Judul Materi</th>
                        <th scope="col">Tanggal</th>
                        <th scope="col">Rating</th>
92
                        <th scope="col">Keterangan</th>
93
94
95
96
97
98
99
100
101
                    </tr>
                    </thead>
                    <tbody>
                    {% for i in rating_list %}
                        <tr>
                            <th scope="row">{{ forloop.counter }}</th>
                            <td><a href="/materi/1/">{{ i.materi.title }}</a></td>
                            <td>{{ i.timestamp }}</td>
                            <td>{{ i.score }}</td>
102
                            <td>
103
104
                                <a href="/edit/{{ i.score }}"><span class="glyphicon glyphicon-pencil" >Edit</span></a>
                                <a href="/delete/{{ i.score }}"><span class="glyphicon glyphicon-pencil" >Delete</span></a>  
105
                            </td>
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
                        </tr>
                    {% endfor %}


                    </tbody>
                </table>
            {% else %}
                <h3>Anda belum pernah memberikan rating ke materi</h3>
            {% endif %}

        </div>
    </div>


{% endblock %}