From cad90ef793c16968244f9d8dc88b3228a103b787 Mon Sep 17 00:00:00 2001
From: Michael Christopher Manullang <michael.christopher@ui.ac.id>
Date: Sat, 31 Oct 2020 22:21:07 +0700
Subject: [PATCH] [#96] User Guide
---
.../app/includes/navbar_katalog_materi.html | 5 +-
app/templates/app/katalog_materi.html | 1 +
digipus/settings.py | 1 +
digipus/urls.py | 1 +
userguide/__init__.py | 0
userguide/admin.py | 3 +
userguide/apps.py | 5 +
userguide/migrations/__init__.py | 0
userguide/models.py | 3 +
userguide/static/css/home.css | 37 ++++++
userguide/static/js/home.js | 85 ++++++++++++++
userguide/templates/changed.html | 108 ++++++++++++++++++
userguide/templates/home.html | 82 +++++++++++++
userguide/tests.py | 35 ++++++
userguide/urls.py | 6 +
userguide/views.py | 13 +++
16 files changed, 384 insertions(+), 1 deletion(-)
create mode 100644 userguide/__init__.py
create mode 100644 userguide/admin.py
create mode 100644 userguide/apps.py
create mode 100644 userguide/migrations/__init__.py
create mode 100644 userguide/models.py
create mode 100644 userguide/static/css/home.css
create mode 100644 userguide/static/js/home.js
create mode 100644 userguide/templates/changed.html
create mode 100644 userguide/templates/home.html
create mode 100644 userguide/tests.py
create mode 100644 userguide/urls.py
create mode 100644 userguide/views.py
diff --git a/app/templates/app/includes/navbar_katalog_materi.html b/app/templates/app/includes/navbar_katalog_materi.html
index 2ab5d5d..cceaec0 100644
--- a/app/templates/app/includes/navbar_katalog_materi.html
+++ b/app/templates/app/includes/navbar_katalog_materi.html
@@ -4,7 +4,7 @@
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
-
+
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
@@ -16,6 +16,9 @@
<li class="nav-item">
<a class="nav-link" href="/news/all">Berita</a>
</li>
+ <li class="user-guide">
+ <a class="nav-link" href="/userguide/">User Guide</a>
+ </li>
{% if not request.user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="/registrasi/umum">Registrasi Umum</a>
diff --git a/app/templates/app/katalog_materi.html b/app/templates/app/katalog_materi.html
index 62736df..c2e2d31 100644
--- a/app/templates/app/katalog_materi.html
+++ b/app/templates/app/katalog_materi.html
@@ -66,6 +66,7 @@
</div>
<button type="submit" class="btn btn-cari">Cari</button>
</form>
+ <p class="pageTitle">Tidak tahu cara menggunakan Digipus? Silahkan kunjungi <a href="/userguide/"> user guide ini</a></p>
<p class="pageTitle">Tidak menemukan materi yang kamu cari ? ajukan permintaan materi kami <a
href="/req-materi">disini</a></p>
<p class="pageTitle">Ingin diskusi lebih mendalam? Silahkan kunjungi <a
diff --git a/digipus/settings.py b/digipus/settings.py
index 884c3e6..a5c78be 100644
--- a/digipus/settings.py
+++ b/digipus/settings.py
@@ -51,6 +51,7 @@ INSTALLED_APPS = [
"traffic_statistics",
"forum",
"rest_framework",
+ 'userguide'
]
MIDDLEWARE = [
diff --git a/digipus/urls.py b/digipus/urls.py
index a58c0fb..835b6c4 100644
--- a/digipus/urls.py
+++ b/digipus/urls.py
@@ -27,6 +27,7 @@ urlpatterns = [
path("", include("news.urls"), name="news"),
path("statistics/", include("traffic_statistics.urls")),
path("forum/", include("forum.urls")),
+ path("userguide/", include(("userguide.urls")))
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
handler403 = 'app.views.permission_denied'
diff --git a/userguide/__init__.py b/userguide/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/userguide/admin.py b/userguide/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/userguide/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/userguide/apps.py b/userguide/apps.py
new file mode 100644
index 0000000..986e41e
--- /dev/null
+++ b/userguide/apps.py
@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class UserguideConfig(AppConfig):
+ name = 'userguide'
diff --git a/userguide/migrations/__init__.py b/userguide/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/userguide/models.py b/userguide/models.py
new file mode 100644
index 0000000..71a8362
--- /dev/null
+++ b/userguide/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
diff --git a/userguide/static/css/home.css b/userguide/static/css/home.css
new file mode 100644
index 0000000..3961d49
--- /dev/null
+++ b/userguide/static/css/home.css
@@ -0,0 +1,37 @@
+.purple {
+ background-color : #615CFD !important;
+ color : #ffffff !important;
+}
+
+.rounded {
+ border-radius: 5px;
+}
+
+.padded {
+ height: 64px;
+ padding: 20px;
+}
+
+li {
+ padding-top: 5px;
+ padding-bottom: 5px;
+}
+
+#userGuideText {
+ font-size: 80px;
+ color: #615CFD;
+ padding-left: 10px;
+}
+
+body {
+ background-color: #F8F8F8;
+}
+
+#changedDiv {
+ background-color: #FFFFFF;
+ padding-top: 10px;
+}
+
+h1 {
+ color: #615CFD;
+}
\ No newline at end of file
diff --git a/userguide/static/js/home.js b/userguide/static/js/home.js
new file mode 100644
index 0000000..3cb3143
--- /dev/null
+++ b/userguide/static/js/home.js
@@ -0,0 +1,85 @@
+$("#loginAdmin").click(function(e) {
+ e.preventDefault();
+ ajaxCallToChangeTemplateBasedOnState(10);
+})
+
+$("#approveRejectAdmin").click(function(e) {
+ e.preventDefault();
+ ajaxCallToChangeTemplateBasedOnState(11);
+})
+
+$("#configCategoryAdmin").click(function(e) {
+ e.preventDefault();
+ ajaxCallToChangeTemplateBasedOnState(12);
+})
+
+$("#manageContributorAdmin").click(function(e) {
+ e.preventDefault();
+ ajaxCallToChangeTemplateBasedOnState(13);
+})
+
+$("#manageAdminAdmin").click(function(e) {
+ e.preventDefault();
+ ajaxCallToChangeTemplateBasedOnState(14);
+})
+
+$("#editProfileAdmin, #editProfileContributor, #editProfileUser").click(function(e) {
+ e.preventDefault();
+ ajaxCallToChangeTemplateBasedOnState(15);
+})
+
+$("#loginContributor").click(function(e) {
+ e.preventDefault();
+ ajaxCallToChangeTemplateBasedOnState(21);
+})
+
+$("#uploadMaterialContributor").click(function(e) {
+ e.preventDefault();
+ ajaxCallToChangeTemplateBasedOnState(22);
+})
+
+$("#historyUploadsContributor").click(function(e) {
+ e.preventDefault();
+ ajaxCallToChangeTemplateBasedOnState(23);
+})
+
+$("#lookStatisticCommentsContributor").click(function(e) {
+ e.preventDefault();
+ ajaxCallToChangeTemplateBasedOnState(25);
+})
+
+$("#lookMaterialUser").click(function(e) {
+ e.preventDefault();
+ ajaxCallToChangeTemplateBasedOnState(31);
+})
+
+$("#giveCommentUser").click(function(e) {
+ e.preventDefault();
+ ajaxCallToChangeTemplateBasedOnState(32);
+})
+
+$("#downloadReadMaterials").click(function(e) {
+ e.preventDefault();
+ ajaxCallToChangeTemplateBasedOnState(33);
+})
+
+
+function ajaxCallToChangeTemplateBasedOnState(state){
+ $.ajax({
+ url: '/userguide/',
+ headers: {'X-CSRFToken': csrftoken},
+ data :{
+ 'state' : state
+ },
+ dataType : 'html',
+ type : 'POST',
+ success : function(data) {
+ console.log(data)
+ $('#changedDiv').html(data)
+ },
+ error: function(xhr, status, error) {
+ var err = eval("(" + xhr.responseText + ")");
+ alert(err.Message);
+ }
+ })
+}
\ No newline at end of file
diff --git a/userguide/templates/changed.html b/userguide/templates/changed.html
new file mode 100644
index 0000000..43e5dc1
--- /dev/null
+++ b/userguide/templates/changed.html
@@ -0,0 +1,108 @@
+{% if state == 0 %}
+Digipus is a system application that can accommodate archiving educational material from regional
+apparatus, academics, and practitioners, and organizing it properly so that it becomes material for
+increasing knowledge and skills for the community at large.
+{% elif state == 10 %}
+ <h1>Login as an admin</h1>
+ <ol>
+ <li>Click on the Login Admin button on the dashboard.</li>
+ <li>Type your credentials and solve the captcha problem.</li>
+ <li>Click “Login”</li>
+ </ol>
+ <h1>Register as an admin</h1>
+ <ol>
+ <li>Click on the Login Admin button on the dashboard.</li>
+ <li>Click on the “Belum mendaftar? klik di sini” Text</li>
+ <li>Type your registration details and click “Daftar”</li>
+ <li>Wait for our internal team to accept your admin account</li>
+ </ol>
+{% elif state == 11 %}
+ <h1>Approve/Reject a Material</h1>
+ <ol>
+ <li>Click on "Administrasi" on the navigation bar</li>
+ <li>Click on "Verifikasi Materi" on the top left</li>
+ <li>Assuming that a material has been submitted, you can click on "Approve" or "Reject" on that particular material</li>
+ </ol>
+{% elif state == 12 %}
+ <h1>Configuration Category and Criteria of Material</h1>
+ <ol>
+ <li>Click on "Administrasi" on the navigation bar</li>
+ <li>Click on "Pengaturan Kategori"</li>
+ <li>To add category, fill in the form and click "Tambahkan"</li>
+ <li>On the List of Categories, you can either edit or delete the category by clicking on “Edit” and “Hapus” respectively</li>
+ <li>You can view the list of categories and erased categories on the table on that page.</li>
+ </ol>
+{% elif state == 13 %}
+ <h1>Manage contributor</h1>
+ <ol>
+ <li>Click on "Administrasi" on the navigation bar</li>
+ <li>Click on "Kelola Contributor"</li>
+ <li>On the “Tabel Daftar Kontributor” table, you can view all contributors. For each contributor, you can either look at the details or delete by pressing “Detail” or “Delete”</li>
+ </ol>
+{% elif state == 14 %}
+ <h1>Manage Admin</h1>
+ <ol>
+ <li>Click on "Administrasi" on the navigation bar</li>
+ <li>Click on "Kelola Admin"</li>
+ <li>On the “Tabel Daftar Kontributor” table, you can view all contributors. For each contributor, you can either look at the details or delete by pressing “Detail” or “Delete”</li>
+ </ol>
+{% elif state == 15 %}
+ <h1>Edit Profile</h1>
+ <ol>
+ <li>Click "Profil" on the top navigation bar</li>
+ <li>Configure your profile from there</li>
+ </ol>
+{% elif state == 21 %}
+ <h1>Login as a kontributor</h1>
+ <ol>
+ <li>Click on the Login Kontributor button on the dashboard.</li>
+ <li>Type your credentials and solve the captcha problem.</li>
+ <li>Click “Login”</li>
+ </ol>
+ <h1>Register as an admin</h1>
+ <ol>
+ <li>Click on the Login Kontributor button on the dashboard.</li>
+ <li>Click on the “Belum mendaftar? klik di sini” Text</li>
+ <li>Type your registration details and click “Daftar”</li>
+ </ol>
+{% elif state == 22 %}
+ <h1>Upload a material</h1>
+ <ol>
+ <li>Click on Dashboard on the Navigation Bar</li>
+ <li>Click on "Unggah Materi" on the top left</li>
+ <li>Fill in the form</li>
+ <li>Click "Simpan"</li>
+ <li>You can also upload through excel by clicking on “Unggah Materi (Excel)” instead of “Unggah Materi” The template for the excel can be downloaded from there</li>
+ </ol>
+{% elif state == 23 %}
+ <h1>History of Uploads</h1>
+ <ol>
+ <li>Click on Dashboard on the Navigation Bar</li>
+ <li>Click on "Riwayat Unggah"</li>
+ <li>For each of the things on the table, you can either view the details or delete by clicking “Detail” or “Hapus” respectively</li>
+ </ol>
+{% elif state == 24 %}
+ <h1>Edit Profile</h1>
+ <ol>
+ <li>Click "Profil" on the top navigation bar</li>
+ <li>Configure your profile from there</li>
+ </ol>
+{% elif state == 25 %}
+ <h1>Look at statistic comments</h1>
+ This feature is under construction
+{% elif state == 31 %}
+ <h1>Look on a material</h1>
+ <ol>
+ <li>Find the material that you want to look at</li>
+ <li>Click on "Detil"</li>
+ </ol>
+{% elif state == 32 %}
+ <h1>Give Comment</h1>
+This feature is under construction
+{% elif state == 33 %}
+ <h1> Download or Read Materials </h1>
+ <ol>
+ <li>Find the material that you want to look at</li>
+ <li>Download or read by clicking on “Unduh” or “Baca” respectively</li>
+ </ol>
+{% endif %}
\ No newline at end of file
diff --git a/userguide/templates/home.html b/userguide/templates/home.html
new file mode 100644
index 0000000..02009e8
--- /dev/null
+++ b/userguide/templates/home.html
@@ -0,0 +1,82 @@
+{% extends "base.html" %}
+{% load static %}
+{% block header %}
+
+
+<!DOCTYPE html>
+<html>
+ <head>
+ {% csrf_token %}
+ <link href="../../static/app/css/heroic-features.css" rel="stylesheet">
+ <!--===============================================================================================-->
+ <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
+ <link rel="stylesheet" type="text/css" href="{% static 'css/util.css' %}">
+ <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
+ <link rel="stylesheet" type="text/css" href="{% static 'css/home.css' %}">
+ <script>
+ const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
+ </script>
+ {% endblock header %}
+ {% block content%}
+ </head>
+
+ <div class="container">
+ {% include 'app/includes/navbar_katalog_materi.html' %}
+ <div class="row">
+ <div><span id = "userGuideText">USER GUIDE</span></div>
+ </div>
+ <div class="row">
+ <div class="col-5">
+ <a class="btn-block rounded padded purple" data-toggle="collapse" href="#collapseAdmin" role="button" aria-expanded="false" aria-controls="collapseAdmin">
+ Admin
+ </a>
+ <div class="card">
+ <div class="collapse" id="collapseAdmin">
+ <ul>
+ <li><a href = "" id = "loginAdmin">Login/Register as Admin</a></li>
+ <li><a href = "" id = "approveRejectAdmin">Approve/Reject a material</a></li>
+ <li><a href = "" id = "configCategoryAdmin">Configuration Category and Criteria of material</a></li>
+ <li><a href = "" id = "manageContributorAdmin">Manage Contributor</a></li>
+ <li><a href = "" id = "manageAdminAdmin">Manage Admin</a></li>
+ <li><a href = "" id = "editProfileAdmin">Edit Profile</a></li>
+ </ul>
+ </div>
+ </div>
+ <a class="btn-block rounded padded purple" data-toggle="collapse" href="#collapseContributor" role="button" aria-expanded="false" aria-controls="collapseContributor">
+ Contributor
+ </a>
+ <div class="card">
+ <div class="collapse" id="collapseContributor">
+ <ul>
+ <li><a href = "" id = "loginContributor">Login/Register as Contributor</a></li>
+ <li><a href = "" id = "uploadMaterialContributor">Upload a Material</a></li>
+ <li><a href = "" id = "historyUploadsContributor">History of Uploads</a></li>
+ <li><a href = "" id = "editProfileContributor">Edit Profile</a></li>
+ <li><a href = "" id = "lookStatisticCommentsContributor">Look at Statistic Comments</a></li>
+ </ul>
+ </div>
+ </div>
+ <a class="btn-block rounded padded purple" data-toggle="collapse" href="#collapseUser" role="button" aria-expanded="false" aria-controls="collapseContributor">
+ User
+ </a>
+ <div class="card">
+ <div class="collapse" id="collapseUser">
+ <ul>
+ <li><a href = "" id = "lookMaterialUser">Look on a Material</a></li>
+ <li><a href = "" id = "giveCommentUser">Give Comment</a></li>
+ <li><a href = "" id = "downloadReadMaterials">Download or Read Materials</a></li>
+ <li><a href = "" id = "editProfileUser">Edit Profile</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class = "col-7" id = "changedDiv">
+ {% include "changed.html" %}
+ </div>
+ </div>
+ </div>
+{% endblock content %}
+{% block extra_scripts %}
+<script src="../static/js/home.js"></script>
+{% endblock extra_scripts%}
+</html>
\ No newline at end of file
diff --git a/userguide/tests.py b/userguide/tests.py
new file mode 100644
index 0000000..57a8e1d
--- /dev/null
+++ b/userguide/tests.py
@@ -0,0 +1,35 @@
+from django.test import TestCase
+
+
+# Create your tests here.
+# Tests must start with the keyword test
+# Relevant Resource: https://stackoverflow.com/questions/2037364/django-test-runner-not-finding-tests/4747444
+
+class TestUserGuide(TestCase):
+
+ def test_response_returns_correct_html(self):
+ c = self.client.get('/userguide/')
+ self.assertTemplateUsed(c, 'home.html')
+
+ def test_response_returns_state_variable(self):
+ c = self.client.get('/userguide/')
+ self.assertIn('state', c.context)
+
+ def test_state_variable_is_int(self):
+ c = self.client.get('/userguide/')
+ state = c.context['state']
+ isinstance(state, int)
+
+ def test_state_sends_request_to_controller_and_receives_state_variable_equal_to_sent_number(self):
+ for number in range(10,34):
+ c = self.client.post('/userguide/', data={'state': number})
+ self.assertEquals(number, c.context['state'])
+
+ def test_when_state_changed_html_also_changes(self):
+ state_before = 10
+ state_after = 11
+ c_before = self.client.post('/userguide/', data={'state': state_before}).content
+ c_after = self.client.post('/userguide/', data={'state': state_after}).content
+ self.assertNotEquals(c_before, c_after)
+
+
\ No newline at end of file
diff --git a/userguide/urls.py b/userguide/urls.py
new file mode 100644
index 0000000..e58a155
--- /dev/null
+++ b/userguide/urls.py
@@ -0,0 +1,6 @@
+from django.urls import path
+from userguide.views import UserGuideHome
+
+urlpatterns = [
+ path("", UserGuideHome, name="user_guide_home"),
+]
diff --git a/userguide/views.py b/userguide/views.py
new file mode 100644
index 0000000..76008cd
--- /dev/null
+++ b/userguide/views.py
@@ -0,0 +1,13 @@
+from django.shortcuts import render
+from django.views.decorators.csrf import ensure_csrf_cookie
+from django.http import JsonResponse
+
+
+# Create your views here.
+@ensure_csrf_cookie
+def UserGuideHome(request):
+ state = 0
+ if (request.method == 'POST'):
+ state = int(request.POST['state'])
+ return render(request, 'changed.html', {'state' : state})
+ return render(request, 'home.html', {'state': state})
\ No newline at end of file
--
GitLab