TTMK/web2.0-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling claim form

Browse Source
This commit is contained in:
Leo Kivikunnas
2019-11-09 01:12:01 +02:00
parent ba9b5d02b2
commit 06723e3f69
8 changed files with 298 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
expenses_claim/forms.py
+3 -2
View File
@@ -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
+169
View File
@@ -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
+27
View File
@@ -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
+19
View File
@@ -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
-8
View File
@@ -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
+72
View File
@@ -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
+6
View File
@@ -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
+2 -3
View File
@@ -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})