Merge branch 'velasco/homepage' into 'master'

Created Add User view and functionality, added image to WidgetUser model

See merge request !18

WidgetFEKK/Homepage/forms.py

+from django import forms 
+from .models import Department, WidgetUser
+
+class AddUserFormModel(forms.ModelForm):
+    class Meta:
+        model = WidgetUser
+        fields = ['first_name', 'middle_name', 'last_name', 
+        'id_num', 'department', 'email', 'profile_image']
+        labels = { 
+            'last_name': 'Last Name',
+            'first_name': 'First Name',
+            'middle_name': 'Middle Name',
+            'id_num': 'ID Number',
+            'email': 'School Email',
+            'department': 'Department',
+            'profile_image': 'Profile Picture'
+        }
+    
+    def __init__(self, *args, **kwargs):
+        super(AddUserFormModel, self).__init__(*args, **kwargs)
+        self.label_suffix = ''
+        self.fields['profile_image'].widget.attrs['onchange'] = 'previewImage(event)'
\ No newline at end of file

WidgetFEKK/Homepage/models.py

 from django.db import models
 from django.urls import reverse
+from datetime import datetime
+import os
 
 """
 A model for a school department in Widget.
@@ -26,6 +28,8 @@ class WidgetUser(models.Model):
 
     department = models.ForeignKey(Department, on_delete=models.CASCADE)
 
+    profile_image = models.ImageField(upload_to=f"widget-users/images/{id_num}")
+
     def __str__(self):
         return f"""{self.last_name}, {self.first_name} {self.middle_name}: 
         {self.id_num}, {self.email}, {self.department}"""
@@ -34,3 +38,5 @@ class WidgetUser(models.Model):
         return f"{self.last_name}, {self.first_name} {self.middle_name}"
     
 
+
+

WidgetFEKK/Homepage/static/Homepage/add_user_styles.css

+@import url('styles.css');

WidgetFEKK/Homepage/templates/index.html

@@ -5,6 +5,32 @@
 
 {% block styles %}
 <link rel="stylesheet" href="{% static 'Homepage/styles.css' %}">
+<style>
+    #create-user { 
+        text-align: center;
+        background-color: blue;
+        padding: 0.5em;
+        border-radius: 0.5em;
+        margin: 0;
+        transition: 0.25s;
+    }
+
+    #create-user:hover { 
+        background-color: #DDDDDD;
+        transition: 0.25s;
+    }
+
+    #create-user > a { 
+        text-decoration: none;
+        color: white;
+        transition: 0.25s;
+    }
+
+    #create-user:hover > a { 
+        color: blue;
+        transition: 0.25s;
+    }
+</style>
 {% endblock %}
 
 {% block content %}
@@ -16,5 +42,6 @@
     {% empty %}
         <h2> No Widget Users. </h2>
     {% endfor %}
+    <h2 id="create-user"> <a href="users/add"> Create User </a></h2>
 </div>
 {% endblock %}
\ No newline at end of file

WidgetFEKK/Homepage/templates/user_add.html

+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %} Widget - Add User {% endblock %}
+
+{% block styles %}
+<link rel="stylesheet" href="{% static 'Homepage/add_user_styles.css' %}">
+<style>
+    body { 
+        text-align: center;
+    }
+    h2 { 
+        margin: 0;
+    }
+
+    img { 
+        object-fit: cover;
+        border-radius: 0.5em;
+    }
+
+    .add-user-container { 
+    display: flex;
+    gap: 0.5em;
+    justify-content: center;
+    margin: 1em;
+}
+
+.form-items { 
+    display: grid;
+    max-width: 1000px;
+    column-gap: 0.5em;
+    row-gap: 0.5em;
+
+    background-color: #A7C7E7;
+    padding: 1em;
+    border-radius: 0.5em;
+    text-align: left;
+}
+
+.form-items > .form-input:first-of-type { 
+    grid-column: 1 / 3;
+    grid-row: 1;
+}
+
+.form-items > .form-input:nth-of-type(2) { 
+    grid-column: 3 / 5;
+    grid-row: 1;
+}
+
+.form-items > .form-input:nth-of-type(3) { 
+    grid-column: 5 / 7;
+    grid-row: 1;
+}
+
+.form-items > .form-input:nth-of-type(4) { 
+    grid-column: 1 / 4;
+    grid-row: 2;
+}
+
+.form-items > .form-input:nth-of-type(5) { 
+    grid-column: 4 / 7;
+    grid-row: 2;
+}
+
+.form-items > .form-input:nth-of-type(6) { 
+    grid-column: 1 / 7;
+    grid-row: 3;
+}
+
+.form-input { 
+    display: grid;
+}
+
+.form-input:first-child { 
+    grid-column: 1;
+    grid-row: 1;
+}
+
+.form-input:nth-child(2) { 
+    grid-column: 1 / 2;
+    grid-row: 2;
+}
+
+.form-input:nth-child(3) { 
+    grid-column: 2;
+    grid-row: 1;
+}
+
+.submit-button {
+    background-color: blue;
+    font-weight: bold;
+    color: white;
+    transition: 0.25s;
+    padding: 1em 4em;
+    text-align: center;
+}
+
+.submit-button:hover { 
+    background-color: white;
+    color: blue;
+    transition: 0.25s;
+    border: 2px solid blue;
+    
+}
+
+input, select { 
+    font-size: 1em;
+    padding: 0.5em;
+    border-radius: 0.25em;
+    border: 0px;
+}
+
+.form-items-with-image { 
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    margin-bottom: 2em;
+}
+
+.image-uploader { 
+    display: block;
+    text-align: center;
+    min-width: 200px;
+    min-height: 200px;
+}
+
+.image-stack:hover > input { 
+    visibility: visible;
+}   
+
+.image-stack { 
+    display: flex;
+    position: relative;
+}
+
+.image-stack > input { 
+    visibility: hidden;
+    position: absolute;
+    width: 192px;
+    height: 192px;
+    z-index: 1;
+    padding: 0;
+    border: 0px;
+}
+
+.image-stack > img { 
+    position: absolute;
+    z-index: 0;
+    width: 192px;
+    height: 192px;
+    border-radius: 0.5em;
+}
+
+::-webkit-file-upload-button { 
+    background-color: rgba(255, 255, 255, 0.5);
+    width: 192px;
+    height: 192px;
+    border-radius: 0.5em;
+    padding: 0;
+    border: 0px;
+}
+
+.action-buttons { 
+    display: block;
+    flex-flow: row wrap;
+    gap: 2em;
+    align-items: center;
+}
+
+.action-buttons > a { 
+    text-decoration: none;
+    margin-left: 2em;
+}
+
+.action-buttons > a:hover { 
+    text-decoration: underline;
+}
+</style>
+{% endblock %}
+
+{% block content %}
+    <h1> Add Widget User </h1>
+    <div class="add-user-container">
+        <form action="{% url 'Homepage:user-add' %}" method="post" enctype="multipart/form-data" id="add-user-form">
+            {% csrf_token %} 
+            <div class="form-items-with-image">
+                <div class="image-uploader">
+                    <div class="image-stack">
+                        {{ form.profile_image }}
+                        <img src="{% static 'Homepage/profile_picture_placeholder.png' %}" id="image-preview">
+                    </div>
+                    {{ form.profile_image.label_tag }}
+                    {{ form.profile_image.errors }}
+                </div>
+                <div class="form-items">
+                    {% for field in form.visible_fields %}
+                        {% if field.name != "profile_image" %}
+                        <div class="form-input">
+                            {{ field.label_tag }}
+                            {{ field }}
+                            {{ field.errors }}
+                        </div>
+                        {% endif %}
+                    {% endfor %}
+                </div>
+            </div>
+
+            <div class="action-buttons">
+                <input class="submit-button" type="submit" value="Create User">
+                <a href="/homepage"> Go Back </a>
+            </div>
+        </form>
+    </div>
+    <script>
+        var previewImage = function(event) { 
+            var output = document.getElementById('image-preview');
+            output.src = URL.createObjectURL(event.target.files[0]);
+            output.onload = function() { 
+                URL.revokeObjectURL(output.src);
+            };
+        };
+    </script>
+{% endblock %}
\ No newline at end of file

WidgetFEKK/Homepage/templates/user_page.html

@@ -34,7 +34,11 @@
 {% block content %}
     <h1> Widget User Profile </h1>
     <div class="user-page-container">
+        {% if post.profile_image %}
+            <img src="{{ MEDIA_DIR }}/widget-users/images/{{ user.id_num }}" alt="Profile Image of {{ user.get_name }}" width="192" height="192">
+        {% else %}
             <img src="{% static 'Homepage/3.JPG' %}" alt="Profile Image of {{ user.get_name }}" width="192" height="192">
+        {% endif %}
         <div class="user-page-details">
             {{ user.id_num }}
             <h2> {{ user.get_name }} </h2>

WidgetFEKK/Homepage/urls.py

 from django.urls import path
-from .views import HomePageView, UserPageView
+from .views import HomePageView, UserPageView, UserAddView
 
 urlpatterns = [
     path('', HomePageView.as_view(), name='index'),
+    path('users/add', UserAddView.as_view(), name='user-add')
 ]
 
 app_name = "Homepage"
\ No newline at end of file

WidgetFEKK/Homepage/views.py

-from django.shortcuts import render
+from django.shortcuts import render, redirect
 from django.views import View
-from .models import WidgetUser
+from .models import Department, WidgetUser
+from .forms import AddUserFormModel
 
 class HomePageView(View):
     def get(self, request):
@@ -13,3 +14,19 @@ class UserPageView(View):
         user = WidgetUser.objects.get(id_num=user_id)
 
         return render(request, 'user_page.html', {'user': user})
+
+class UserAddView(View):
+    def get(self, request):
+        form = AddUserFormModel()
+
+        return render(request, 'user_add.html', {'form': form})
+    
+    def post(self, request):
+        form = AddUserFormModel(request.POST, request.FILES)
+
+        if form.is_valid():
+            form.save()
+            return redirect('/homepage')
+
+        return self.get(request)
+