Styling claim form

expenses_claim/forms.py

@@ -5,11 +5,12 @@ from string import ascii_uppercase
 
 
 class ExpensesClaim(forms.Form):
-    """Expenses claim form"""
+    """Expenses claim form."""
 
     name = forms.CharField(label='Nimi', max_length=100)
     iban = forms.CharField(label='IBAN', max_length=100)
-    amount = forms.DecimalField(label='Summa', decimal_places=2)
+    email = forms.EmailField(label='Sähköposti', max_length=100)
+    amount = forms.DecimalField(label='Yhteensä', decimal_places=2)
 
     def clean_iban(self):
         """Validate IBAN."""

expenses_claim/static/claim_form/css/base.css

@@ -0,0 +1,169 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+.heading {
+    padding: 20px 10px;
+    text-align: center;
+}
+
+.claim-form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%
+}
+
+.form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+    width: 60%;
+}
+
+.table {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: space-between;
+    padding: 20px 10px;
+}
+
+.scrollarea {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    overflow-y: scroll;
+}
+
+.tablerow {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 10px 5px;
+}
+
+.fieldscolumn {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-end;
+}
+
+.fieldsrow {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: stretch;
+    padding: 5px 10px;
+}
+
+.submit {
+    align-self: center;
+    width: 30%;
+    margin: 20px 10px;
+}
+
+.imageupload > input {
+    display: none;
+}
+
+.fieldsrow > div {
+    margin: 10px 20px;
+}
+
+.fieldscolumn > div {
+    margin: 10px 20px;
+}
+
+
+.fieldscolumn > div > label {
+    margin-right: 20px;
+}
+
+.money > input {
+    width: 100px;
+}
+
+#addreceipt {
+    height: 40px;
+}
+
+#total {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    padding: 20px 10px; 
+}
+
+#receiptslist {
+    height: 20rem;
+}
+
+#info2 {
+    justify-content: flex-end;
+}
+
+#textbox > textarea {
+    align-self: flex-end;
+}
+
+#id_iban {
+    width: 18rem;
+}
+
+
+.fieldscolumn > #textbox > textarea {
+    height: 8rem;
+    width: 18rem;
+}
+
+
+@media only screen and (max-width: 768px) {
+    .heading {
+        font-size: 18px;
+        padding: 5px 5px;
+    }
+    
+    h1.heading {
+        visibility: hidden;
+        height: 0px;
+    }
+
+    .table {
+        padding: 5px 5px
+    }
+
+    #total {
+        justify-content: center;
+    }
+
+    .fieldsrow {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        padding: 5px 5px
+    }
+    
+    #receiptslist {
+        width: 12rem;
+    }
+}
+
+@media only screen and (max-height: 741px) {
+    #receiptslist {
+        height: 17rem;
+    }
+}
+
+@media only screen and (max-height: 569px) {
+    #receiptslist {
+        height: 10rem;
+    }
+}

expenses_claim/static/claim_form/js/addReceipt.js

@@ -0,0 +1,27 @@
+function addReceipt(event) {
+    event.preventDefault();
+    var receipts = document.getElementById("receiptslist");
+    var div2append = document.createElement("div");
+    var newrow = receipts.appendChild(div2append);
+    newrow.classList.add("tablerow");
+    
+    div2append = document.createElement("div");
+    var div1 = newrow.appendChild(div2append);
+    div1.classList.add("imageupload");
+    div2append = document.createElement("div");
+    var div2 = newrow.appendChild(div2append);
+    div2.classList.add("desc");
+    div2append = document.createElement("div");
+    var div3 = newrow.appendChild(div2append);
+    div3.classList.add("money");
+
+    var file = document.getElementById("newreceipt");
+    var desc = document.getElementById("adddescription");
+    var sum = document.getElementById("addsum");
+    div1.appendChild(file.cloneNode(true));
+    div2.appendChild(document.createTextNode(desc.value));
+    div3.appendChild(document.createTextNode(sum.value));
+
+    var total = document.getElementById("totalsum");
+    total.value = Number(total.value) + Number(sum.value);
+}

expenses_claim/templates/base.html

@@ -0,0 +1,19 @@
+{% extends "project.html" %}
+
+{% load static %}
+{% load i18n %}
+
+{% block styles %}
+<script src="{% static "claim_form/js/addReceipt.js" %}"></script> 
+<link rel="stylesheet" href="{% static "claim_form/css/base.css" %}"></script> 
+{% endblock styles %}
+
+{% block body %}
+
+<div class="claim-form">
+    {% block content %}
+        {% include "expenses_claim:form.html" %}
+    {% endblock %}
+</div>
+
+{% endblock body %}

expenses_claim/templates/claim.html

@@ -1,8 +0,0 @@
-Dis is claim
-
-<form action="" method="post">
-  {{ form }}
-  <input type="file" name="fileupload" value="fileupload" id="fileupload">
-  <input type="submit" value="Submit">
-  {% csrf_token %}
-</form>

expenses_claim/templates/form.html

@@ -0,0 +1,72 @@
+{% load i18n %}
+{% load static %}
+{% block content %}
+
+<form class="form" id="claim" action="" method="post">
+  <h1 class="heading">Aalto Yliopiston Sähköinsinöörikilta ry Raha-anomuslomake</h1>
+  <div class="fieldsrow">
+    <div class="imageupload" id="newreceipt">
+      <label for="newreceipt">
+          Kuitti
+          <img class="thumbnail" src="{% static "claim_form/img/icon.png" %}"/>
+      </label>
+      <input id="selectreceipt" type="file"/>
+    </div>
+    <div>
+      <label for="adddescription">
+        Kuvaus
+      </label>
+      <input id="adddescription" type="text">
+    </div>
+    <div class="money">
+      <label for="addsum">
+        Summa
+      </label>
+      <input type="number" id="addsum" maxlength=100/>
+    </div>
+    <div>
+      <button id="addreceipt" onclick="addReceipt(event)">Lisää kuitti</button>
+    </div>
+  </div>
+  <div class="table">
+    <div class="scrollarea" id="receiptslist">
+      <div class="tablerow">
+        <div class="tableelement">Kuitti</div>
+        <div class="tableelement">Kuvaus</div>
+        <div class="tableelement">Summa</div>
+      </div>
+    </div>
+    <div class="money" id="total">
+      <label for="id_amount">Yhteensä</label>
+      {{ form.amount }}
+    </div>
+  </div>
+  <div class="fieldscolumn">
+    <div class="fieldsrow">
+      <div class="fieldscolumn" id="info1">
+        <div id="textbox">
+          <label for="selite">Selite</label>
+          <textarea id="selite"></textarea>
+        </div>
+        <div>
+          <label for="id_iban">{{ form.iban.label }}</label>
+          {{ form.iban }}
+        </div>
+      </div>
+      <div class="fieldscolumn" id="info2">
+        <div>
+          <label for="id_name">{{ form.name.label }}</label>
+          {{ form.name }}
+        </div>
+        <div>
+          <label for="id_email">{{ form.email.label }}</label>
+          {{ form.email }}
+        </div>
+        <input class="submit" id="submitclaim" type="submit" value="Submit"/>
+      </div>
+    </div>
+  </div>
+  {% csrf_token %}
+</form>
+
+{% endblock content %}

expenses_claim/tests.py

@@ -8,6 +8,7 @@ class ExpensesClaimTest(TestCase):
     def test_valid_data1(self):
         form = ExpensesClaim({
             'name': "John Doe",
+            'email': 'john@doe.com',
             'iban': "FI37 1590 3000 0007 76",
             'amount': 12.54
         })
@@ -16,6 +17,7 @@ class ExpensesClaimTest(TestCase):
     def test_valid_data2(self):
         form = ExpensesClaim({
             'name': "John Cena",
+            'email': 'john@cena.com',
             'iban': "AL35202111090000000001234567",
             'amount': 12
         })
@@ -24,6 +26,7 @@ class ExpensesClaimTest(TestCase):
     def test_valid_data3(self):
         form = ExpensesClaim({
             'name': "John Wayne",
+            'email': 'john@wayne.com',
             'iban': "BR1500000000000010932840814P2",
             'amount': 12.0
         })
@@ -32,6 +35,7 @@ class ExpensesClaimTest(TestCase):
     def test_invalid_iban(self):
         form = ExpensesClaim({
             'name': "John Lennon",
+            'email': 'john@lennon.com',
             'iban': "FI3734 1590 3000 0007 76",
             'amount': 12.54
         })
@@ -40,6 +44,7 @@ class ExpensesClaimTest(TestCase):
     def test_invalid_amount(self):
         form = ExpensesClaim({
             'name': "John Kenedy",
+            'email': 'john@kenedy.com',
             'iban': "FI37 1590 3000 0007 76",
             'amount': "asd"
         })
@@ -48,6 +53,7 @@ class ExpensesClaimTest(TestCase):
     def test_invalid_amount_decimal_places(self):
         form = ExpensesClaim({
             'name': "John Travolta",
+            'email': 'john@travolta.com',
             'iban': "FI37 1590 3000 0007 76",
             'amount': 12.544
         })

expenses_claim/views.py

@@ -6,7 +6,6 @@ from django.http import HttpResponse
 from webapp.utils import send_email_with_attachment
 from django.template.loader import render_to_string
 from weasyprint import HTML
-import tempfile
 from .forms import ExpensesClaim
 
 
@@ -20,7 +19,7 @@ def claim(request):
             name = form.cleaned_data['name']
             amount = form.cleaned_data['amount']
             iban = form.cleaned_data['iban']
-            html_string = render_to_string('claim2pdf.html',
+            html_string = render_to_string('expenses_claim:claim2pdf.html',
                                            {'name': name, 'iban': iban,
                                             'amount': amount}).encode('UTF-8')
             html = HTML(string=html_string)
@@ -39,4 +38,4 @@ def claim(request):
     elif request.method == 'GET':
         form = ExpensesClaim()
 
-    return render(request, 'claim.html', {'form': form})
+    return render(request, 'expenses_claim:base.html', {'form': form})