Add template, form and view for Volunteer create.

pyconbalkan/core/static/css/components/datepicker.css

@@ -0,0 +1,10 @@
+.ui-datepicker {
+	background-color: #32383A;
+	border: 1px solid #66AFE9;
+	border-radius: 4px;
+	box-shadow: 0 0 8px rgba(102,175,233,.6);
+	display: none;
+	margin-top: 4px;
+	padding: 10px;
+	width: 240px;
+}

pyconbalkan/core/static/css/components/volunteer.css

@@ -0,0 +1,7 @@
+#id_country {
+    height: 40px;
+}
+
+#id_profile_picture{
+    color: white;
+}

pyconbalkan/core/static/js/volunteer.js

@@ -0,0 +1,7 @@
+$( ".datepicker" ).datepicker({
+  changeMonth: true,
+  changeYear: true,
+  yearRange: "1900:2018"
+});
+
+$("#id_description").addClass("form-control");

pyconbalkan/core/templates/base.html

@@ -22,6 +22,7 @@
     <link rel="stylesheet" href="{% static 'css/_fonts.css' %}">
     <link rel="stylesheet" href="{% static 'css/components/event-sidebar.css' %}">
     <link rel="stylesheet" href="{% static 'css/components/page.css' %}">
+    <link rel="stylesheet" href="{% static 'css/components/datepicker.css' %}">
     <link rel="stylesheet" href="{% static 'css/components/post.css' %}">
     <link rel="stylesheet" href="{% static 'css/components/title.css' %}">
     <link rel="stylesheet" href="{% static 'css/components/button.css' %}">
@@ -37,6 +38,7 @@
     <link rel="stylesheet" href="{% static 'css/components/page.css' %}">
     <link rel="stylesheet" href="{% static 'css/components/post.css' %}">
     <link rel="stylesheet" href="{% static 'css/components/sponsors.css' %}">
+    <link rel="stylesheet" href="{% static 'css/components/volunteer.css' %}">
     <link rel="stylesheet" href="{% static 'css/components/title.css' %}">
     <link rel="stylesheet" href="{% static 'css/components/timetable.css' %}">
     <link rel="stylesheet" href="{% static 'css/helpers/spacing.css' %}">

pyconbalkan/core/templates/includes/event_sidebar.html

@@ -20,11 +20,11 @@ <h1>#{{ conference.number }}</h1>
         {{ conference.get_type_display }}
     </p>
 
-    {% if conference.tickets %}
     <div class="event-button__wrapper">
-        <a class="button button--yellow mb-xs-40 event-button" href="{{ conference.tickets }}" target="_blank" role="button">Join Us!</a>
+        {% if conference.tickets %}
+            <a class="button button--yellow mb-xs-80" href="{{ conference.tickets }}" target="_blank" role="button">Join Us!</a>
+        {% endif %}
     </div>
-    {% endif %}
     <div class="social__links mb-xs-20">
     {% if conference.facebook %}<a href="{{ conference.facebook }}" class="facebook" target="_blank"></a>{% endif %}
 	{% if conference.instagram %}<a href="{{ conference.instagram }}" class="instagram" target="_blank"></a>{% endif %}

pyconbalkan/organizers/forms.py

@@ -0,0 +1,58 @@
+from django import forms
+from django.db import transaction
+
+from pyconbalkan.organizers.models import Volunteer, VolunteerPhoto
+
+
+class VolunteerCreateForm(forms.ModelForm):
+    required_fields = (
+        'full_name', 'name', 'date_of_birth', 'job',
+        'email', 'description', 'country', 'profile_photo'
+    )
+
+    profile_picture = forms.ImageField(label='Profile Photo', required=True)
+
+    def __init__(self, **kwargs):
+        super().__init__(**kwargs)
+
+        for name, field in self.fields.items():
+            self.add_required(name, field)
+            self.add_form_control(field)
+            self.label_as_placeholder(field, name)
+
+    def add_form_control(self, field):
+        old_classes = field.widget.attrs['class'] if 'class' in field.widget.attrs else ''
+        field.widget.attrs.update({'class': f'{old_classes} form-control'})
+
+    def label_as_placeholder(self, field, name):
+        placeholder = field.label if not field.required else field.label + '*'
+        field.widget.attrs.update({'placeholder': placeholder})
+
+        if name != 'profile_picture':
+            field.label = ''
+        else:
+            field.label = placeholder
+
+    def add_required(self, name, field):
+        if name in self.required_fields:
+            field.required = True
+
+    def save(self, commit=True):
+        """
+        Save both Volunteer model and VolunteerPhoto at once.
+        If more complex - maybe add formset.
+        """
+
+        with transaction.atomic():
+            instance = super().save(commit=commit)
+            VolunteerPhoto.objects.create(
+                volunteer=instance, profile_picture=self.cleaned_data['profile_picture']
+            )
+        return instance
+
+    class Meta:
+        model = Volunteer
+        exclude = ('active', 'user', 'type', 'slug', )
+        widgets = {
+            'date_of_birth': forms.DateInput(attrs={'class': 'datepicker'}),
+        }

pyconbalkan/organizers/templates/organizers.html

@@ -43,6 +43,14 @@ <h2 class="title title--white title--medium title--uppercase mt-xs-20 mb-xs-80">
     <h1 class="centered">Volunteers</h1>
     <hr class="line line__centered">
 
+    <div class="card">
+        <a class="button button--yellow mb-xs-40 event-button" href="https://docs.google.com/forms/d/e/1FAIpQLSdJO6rP5jtHvpioYWMoimIRaQx-W7TR3uLmeu-hFg-ad4ZpgA/viewform" target="_blank">
+            Join PyCon Balkan as a Volunteer!
+        </a>
+    </div>
+    <div class="event-button__wrapper">
+
+    </div>
     {% if volunteers %}
         <div class="card">
             {% for volunteer in volunteers %}

pyconbalkan/organizers/templates/volunteers_create.html

@@ -0,0 +1,34 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block main_content %}
+    <h1 class="title title--yellow mb-xs-40">Sign up as a Volunteer!</h1>
+    <hr class="line line--blue line--short line--spaced">
+
+    {% if success %}
+        <h2 class="success-message">
+            {{ success | safe }}
+        </h2>
+        <hr class="line line--blue line--short line--spaced">
+    {% endif %}
+
+    <form class="form" action="{% url 'volunteers_create' %}" method="POST"
+          enctype="multipart/form-data" novalidate>
+        <div class="form-group">
+            {% csrf_token %}
+            {{ form.as_p }}
+            <input class="button button--blue button--push button--fullwidth " type="submit"
+                   value="Submit"/>
+        </div>
+    </form>
+    {{ form.media }}
+
+{% endblock main_content %}
+
+
+{% block scripts %}
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
+            integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
+            crossorigin="anonymous"></script>
+    <script src="{% static 'js/volunteer.js' %}" type="text/javascript"></script>
+{% endblock %}

pyconbalkan/organizers/views.py

@@ -1,6 +1,8 @@
 from django.shortcuts import render, get_object_or_404
 from rest_framework import viewsets
 
+from pyconbalkan.conference.models import Conference
+from pyconbalkan.organizers.forms import VolunteerCreateForm
 from pyconbalkan.organizers.models import Volunteer
 from pyconbalkan.organizers.serializers import VolunteerSerializer
 
@@ -25,4 +27,22 @@ def organizers_listview(request):
         'volunteers': volunteers,
         'organizers': organizers,
     }
-    return render(request, 'organizers.html', context)
+    return render(request, 'organizers.html', context)
+
+
+def volunteers_createview(request):
+    context = {}
+
+    if request.method == 'POST':
+        form = VolunteerCreateForm(data=request.POST, files=request.FILES)
+        if form.is_valid():
+            volunteer = form.save()
+            context['success'] = f'{volunteer.full_name}, you have been successfully signed up ' \
+                                 f'as a volunteer! <br> We will contact you soon. <br><br> ' \
+                                 f'Thank you! :)<br>'
+            form = VolunteerCreateForm()
+    else:
+        form = VolunteerCreateForm()
+
+    context['form'] = form
+    return render(request, 'volunteers_create.html', context)

pyconbalkan/urls.py

@@ -12,7 +12,7 @@
 from pyconbalkan.news.views import *
 from pyconbalkan.settings import PDF_ROOT
 from pyconbalkan.speaker.views import *
-from pyconbalkan.organizers.views import organizer_view, organizers_listview
+from pyconbalkan.organizers.views import organizer_view, organizers_listview, volunteers_createview
 from pyconbalkan.coc.views import coc_view, response_guide
 from pyconbalkan.sponsors.views import sponsor_view, sponsoring_view, sponsors_view
 from pyconbalkan.organizers.api_urls import router as organizers
@@ -49,6 +49,7 @@
     path('robots.txt', TemplateView.as_view(template_name='robots.txt', content_type='text/plain')),
     path('organizers/<slug:slug>/', organizer_view, name='organizer_detail'),
     path('organizers', organizers_listview, name='organizers'),
+    path('volunteers/create/', volunteers_createview, name='volunteers_create'),
     path('about', about_view, name='about'),
     path('contact', contact_view, name='contact'),
     path('cfp', cfp_view, name='cfp'),