Merge branch 'dashboardv2' into 'main'

Dashboardv2

See merge request !14

README.txt

@@ -4,7 +4,7 @@ Idquival, Andrew Justin, C., 213017
 Lim, Jayson, G., 213446
 Redoble, Almira Princess, N., 214897
 Sy, Star Neptune, R., 215662;
-Widget v1;
+Widget v2;
 Joaquin Crisologo - Forum
 Andrew Idquival - Calendar
 Jayson Lim - Announcement Board
@@ -18,9 +18,13 @@ https://www.w3schools.com/html/html_css.asp
 https://www.w3schools.com/html/html_styles.asp
 https://github.com/github/gitignore/blob/main/Python.gitignore;
 https://www.onespacemedia.com/news/getting-started-generic-class-based-views-django/
+https://www.w3docs.com/snippets/html/how-to-create-an-html-button-that-acts-like-a-link.html
+https://stackoverflow.com/questions/44492393/how-to-add-custom-styling-to-forms-created-with-django-createview
+https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation
 
 (sgd) Joaquin Crisologo, 28 February, 2023
 (sgd) Andrew Idquival, 28 February, 2023
 (sgd) Jayson Lim, 28 February, 2023
-(sgd) Almira Redoble, 28 February, 2023
+(sgd) Almira Redoble, 1 May, 2023
 (sgd) Neptune Sy, 28 February, 2023
\ No newline at end of file

widget_vincentdjango/dashboard/forms.py

+from django import forms
+from .models import WidgetUser
+
+class UserForm(forms.ModelForm):
+    
+    def __init__(self, *args, **kwargs):
+        super(UserForm, self).__init__(*args, **kwargs)
+        for visible in self.visible_fields():
+            visible.field.widget.attrs['class'] = 'form-design'
+
+    class Meta:
+        model = WidgetUser
+        fields = '__all__'
+        labels = {
+            'first_name': ('First Name'),
+            'middle_name': ('Middle Name'),
+            'last_name': ('Last Name'),
+            'department': ('Department, Home Unit'),
+        }
+        
\ No newline at end of file

widget_vincentdjango/dashboard/models.py

 from django.db import models
-
+from django.urls import reverse
 
 class Department(models.Model):
     dept_name = models.CharField(max_length=100, default="")
@@ -25,3 +25,6 @@ class WidgetUser(models.Model):
             self.first_name,
             self.middle_name
         )
+    
+    def get_absolute_url(self):
+        return reverse('dashboard:user-details', kwargs={'pk': self.pk})

widget_vincentdjango/dashboard/static/dashboard/formStyle.css

+body {
+    min-height: 100vh;
+    margin: 0;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 0.15fr 1fr;
+    font-family: 'Segoe UI', sans-serif;
+    background-image: linear-gradient(0deg, #C1C9DD, #F6F8F3);
+}
+
+.heading {
+    grid-area: 1 / 1 / 2 / 3;
+    padding: 20px;
+    padding-left: 4%;
+    font-weight: 650;
+    font-size: 265%;
+    display: flex;
+    align-items:flex-end;
+    color: #E7F4FC;
+    background: #3b5998;
+}
+
+img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.content {
+    grid-area: 2 / 1 / 3 / 3;
+    width: 100%;
+}
+
+#main {
+    padding-top: 8%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
+
+.content p {
+    text-align: end;
+}
+
+p label {
+    margin-right: 4px;
+    color: #1B3155;
+}
+
+.form-design {
+    width: 61%;
+    color: #646874;
+}
+
+#btn {
+    text-align: center;
+}
+
+#btn input {
+    color: #E7F4FC;
+    background-color: #80A271;
+    border-color: #436E44;
+    font-weight: bold;
+    padding: 8px 12px;
+}
+
+hr {
+    width: 80%;
+    margin-bottom: 5%;
+}
+
+.navigation {
+    margin-top: 12%;
+    padding: 0 12px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.navigation ul {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+}
+
+.navigation li:not(:last-child)::after {
+    margin: 0 .5rem;
+    display: inline-block;
+    content: "/";
+}
+
+a {
+    color: #1B3155;
+}
\ No newline at end of file

widget_vincentdjango/dashboard/static/dashboard/style.css

+body {
+    min-height: 100vh;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 0.15fr 0.15fr 1fr;
+    font-family: 'Segoe UI', sans-serif;
+}
+
+.heading {
+    grid-area: 1 / 1 / 2 / 4;
+    margin: 0;
+    padding-left: 126px;
+    font-weight: 650;
+    font-size: 265%;
+    color: #3b5998;
+    background-image: linear-gradient(0deg, #18366F, #274E97);
+}
+
+.heading p {
+    display: flex;
+    align-items: center;
+}
+
+#white {
+    color: #FFFEFE;
+}
+
+#yellow {
+    color: #E1BC3D;
+    padding-left: 12px;
+}
+
+#uppercase {
+    text-transform: uppercase;
+}
+
+.content {
+    grid-area: 3 / 2 / 4 / 3;
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+}
+
+#main {
+    grid-area: 1 / 1 / 2 / 2;
+    background-color: #F6F8F3;
+}
+
+.navigation {
+    grid-area: 2 / 1 / 3 / 2;
+    display: grid;
+    grid-template-rows: 0.1fr 0.5fr 0.2fr;
+}
+
+#btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8px 12px;
+    background-color: #F6F8F3;
+}
+
+button {
+    color: #E7F4FC;
+    background-color: #818081;
+    border-color: #313031;
+    font-weight: bold;
+    padding: 4px 8px;
+}
+
+#footer {
+    grid-area: 3 / 1 / 4 / 2;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+}
+
+.navigation ul {
+    grid-area: 3 / 1 / 4 / 2;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: flex-end;
+    flex-wrap: wrap;
+    list-style: none;
+    justify-content: center;
+}
+
+.navigation li:not(:last-child)::after {
+    display: inline-block;
+    content: "/";
+    margin: 0 .5rem;
+}
+
+.content ul {
+    list-style: none;
+}
+
+.content p {
+    padding-left: 48px;
+}
+
+#subheading {
+    margin: 0;
+    padding: 8px 12px;
+    background-color: #A8BCDF;
+}
+
+a {
+    color: #1B3155;
+}
\ No newline at end of file

widget_vincentdjango/dashboard/templates/dashboard/dashboard.html

+{% extends 'base.html' %}
+{% load static %}
+
+{% block style %}{% static 'dashboard/style.css' %}{% endblock %}
+{% block title %}Widget v2{% endblock %}
+{% block heading %}
+    <p>
+        <span id="white">Welcome to</span>
+        <span id="yellow">Widget!</span>
+    </p>
+{% endblock %}
+{% block content %}
+    <div id="main">
+        <p id="subheading">Widget Users:</p>
+        <ul>
+            {% for user in users %}
+            <li>
+                <a href="{{ user.get_absolute_url }}">
+                    {{ user.last_name }}, {{ user.first_name }}</a>
+            </li>
+            {% endfor %}
+        </ul>
+    </div>
+{% endblock %}
+{% block navigation %}
+    <div id="btn">
+        <button onclick="window.location.href='{% url 'dashboard:user-add' %}';">
+            Add Widget User
+        </button>
+    </div>
+    <div id="footer">
+        <a href="{% url 'announcementBoard:index' %}">Announcement Board</a>
+        <a href="{% url 'forum:index' %}">Forum</a>
+        <a href="{% url 'assignments:homePage' %}">Assignments</a>
+        <a href="{% url 'widget_calendar:index' %}">Calendar</a>
+    </div>
+{% endblock %}
\ No newline at end of file

widget_vincentdjango/dashboard/templates/dashboard/widgetuser-add.html

+{% extends 'base.html' %}
+{% load static %}
+
+{% block style %}{% static 'dashboard/formStyle.css' %}{% endblock %}
+{% block title %}Add Widget User{% endblock %}
+{% block heading %}Add a new Widget User:{% endblock %}
+{% block content %}
+    <div id="main">
+        <img src="{% static 'dashboard/login.png' %}" 
+            alt="Facebook login image" width="644" height="234">
+
+        {{ form.non_field_errors }}
+        <form action="{% url 'dashboard:user-add' %}" method="post">
+            {% csrf_token %}
+            {{ form.as_p }}
+            <div id="btn">
+                <input type="submit" value="Add Widget User">
+            </div>
+        </form>
+    </div>
+{% endblock %}
+{% block navigation %}
+    <hr>
+    <ul>
+        <li><a href="{% url 'dashboard:index' %}">Dashboard</a></li>
+        <li>Add Widget User</li>
+    </ul>
+{% endblock %}
\ No newline at end of file

widget_vincentdjango/dashboard/templates/dashboard/widgetuser-details.html

+{% extends 'base.html' %}
+{% load static %}
+
+{% block style %}{% static 'dashboard/style.css' %}{% endblock %}
+{% block title %}{{ object.last_name }}, {{ object.first_name }}{% endblock %}
+{% block heading %}
+    <p id="uppercase">
+        <span id="white">
+            {{ object.first_name }} 
+            {{ object.middle_name }}
+        </span>
+        <span id="yellow">
+            {{ object.last_name }}
+        </span>
+    </p>
+{% endblock %}
+{% block content %}
+    <div id="main">
+        <p id="subheading"> {{ object.department.dept_name }} </p>
+        <p> {{ object.department.home_unit }} </p>
+    </div>
+{% endblock %}
+{% block navigation %}
+    <div id="btn">
+        <button onclick="window.location.href='{% url 'dashboard:user-edit' pk=object.pk%}';">
+            Edit Widget User
+        </button>
+    </div>
+    <ul>
+        <li><a href="{% url 'dashboard:index' %}">Dashboard</a></li>
+        <li>{{ object.last_name }}, {{ object.first_name }}</li>
+    </ul>
+{% endblock %}
\ No newline at end of file

widget_vincentdjango/dashboard/templates/dashboard/widgetuser-edit.html

+{% extends 'base.html' %}
+{% load static %}
+
+{% block style %}{% static 'dashboard/formStyle.css' %}{% endblock %}
+{% block title %}Edit Widget User{% endblock %}
+{% block heading %}Edit Widget User:{% endblock %}
+{% block content %}
+    <div id="main">
+        <img src="{% static 'dashboard/login.png' %}" 
+            alt="Facebook login image" width="644" height="234">
+
+        {{ form.non_field_errors }}
+        <form action="{% url 'dashboard:user-edit' pk=object.pk %}" method="post">
+            {% csrf_token %}
+            {{ form.as_p }}
+            <div id="btn">
+                <input type="submit" value="Save Changes to Widget User">
+            </div>
+        </form>
+    </div>
+{% endblock %}
+{% block navigation %}
+    <hr>
+    <ul>
+        <li><a href="{% url 'dashboard:index' %}">Dashboard</a></li>
+        <li>Edit Widget User</li>
+    </ul>
+{% endblock %}
\ No newline at end of file

widget_vincentdjango/dashboard/urls.py

 from django.urls import path
-from .views import index
+from .views import index, UserDetailView, UserCreateView, UserUpdateView
 
 
 urlpatterns = [
-    path('', index, name='index'),
+    path('dashboard/', index, name='index'),
+    path('widgetusers/<int:pk>/details/', UserDetailView.as_view(), name='user-details'),
+    path('widgetusers/add/', UserCreateView.as_view(), name='user-add'),
+    path('widgetusers/<int:pk>/edit/', UserUpdateView.as_view(), name='user-edit'),
 ]
 
 

widget_vincentdjango/dashboard/views.py

 from django.shortcuts import render
-from django.http import HttpResponse
+from django.views.generic.detail import DetailView
+from django.views.generic.edit import CreateView, UpdateView
 
 from .models import WidgetUser
+from .forms import UserForm
 
 
 def index(request):
-
-    head = "<h1 style='border-bottom:4px solid lightgray;\
-            padding-bottom:30px;\
-            font-size:500%;'>\
-            Welcome to Widget!\
-            </h1>"
-
-    body = "<h2>WIDGET USERS:</h2>"
-
-    for user in WidgetUser.objects.all():
-        body += "<p style='border: 2px solid gray;\
-                border-radius:5px;\
-                padding:20px 30px;'>\
-                {}: {}<br>\
-                </p>".format(user, user.department)
-
-    return_string = "<html>\
-                    <body style = 'font-family:helvetica;\
-                    padding:30px;'>\
-                    {}{}\
-                    </body></html>".format(head, body)
-
-    return HttpResponse(return_string)
+        users = WidgetUser.objects.all()
+        return render(request, 'dashboard/dashboard.html', {'users': users, })
+
+class UserDetailView(DetailView):
+        model = WidgetUser
+        template_name = 'dashboard/widgetuser-details.html'
+
+class UserCreateView(CreateView):
+        model = WidgetUser
+        form_class = UserForm
+        template_name = 'dashboard/widgetuser-add.html'
+
+class UserUpdateView(UpdateView):
+        model = WidgetUser
+        form_class = UserForm
+        template_name = 'dashboard/widgetuser-edit.html'

widget_vincentdjango/templates/base.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="{% block style %}{% endblock %}">
+    <title>{% block title %}{% endblock %}</title>
+</head>
+<body>
+    <div class="heading">
+        {% block heading %}{% endblock %}
+    </div>
+    
+    <div class="content">
+        {% block content %}{% endblock %}
+		<div class="navigation">
+            {% block navigation %}{% endblock %}
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file

widget_vincentdjango/widget_vincentdjango/urls.py

@@ -18,7 +18,7 @@ from django.urls import include, path
 
 urlpatterns = [
     path('admin/', admin.site.urls),
-    path('dashboard/', include('dashboard.urls', namespace="dashboard")),
+    path('', include('dashboard.urls', namespace="dashboard")),
     path('widget_calendar/', include('widget_calendar.urls', namespace="widget_calendar")),
     path('assignments/', include('assignments.urls', namespace="assignments")),
     path('announcementBoard/', include('announcementBoard.urls', namespace="announcementBoard")),