Commit 1721df9b authored by dorothee.kueppers's avatar dorothee.kueppers
Browse files

alle Todos anzeigen

parent a165e78d
...@@ -30,7 +30,7 @@ urlpatterns = [ ...@@ -30,7 +30,7 @@ urlpatterns = [
path('todo/add/', add_todo, name='add_todo'), path('todo/add/', add_todo, name='add_todo'),
path('impressum/', get_impressum, name='impressum'), path('impressum/', get_impressum, name='impressum'),
path('todo/show/', get_show_todo, name='show_todo'), path('todo/show/', get_show_todo, name='show_todo'),
path('todo/archiv', get_archiv, name='archv'), path('todo/archiv/', get_archiv, name='archv'),
] ]
if settings.DEBUG: if settings.DEBUG:
......
...@@ -68,6 +68,7 @@ ...@@ -68,6 +68,7 @@
<a class="navbar-brand" href="/impressum">Impressum</a> <a class="navbar-brand" href="/impressum">Impressum</a>
</nav> </nav>
<script type='text/javascript' src={% static 'js/selectionpage.js' %}></script> <script type='text/javascript' src={% static 'js/selectionpage.js' %}></script>
<script type='text/javascript' src={% static 'js/showtodos.js' %}></script>
{% endblock %} {% endblock %}
</body> </body>
</html> </html>
\ No newline at end of file
...@@ -5,26 +5,29 @@ ...@@ -5,26 +5,29 @@
{% block content %} {% block content %}
<script type="text/javascript"></script> <script type="text/javascript"></script>
<div class="row"> <div class="row">
<div class="col-sm" class="todo-box"> <div class="col-sm todo-box">
<form action="" enctype="multipart/form-data" method="POST"> <form action="" enctype="multipart/form-data" method="POST">
{% csrf_token %} {% csrf_token %}
<div class="row justify-content-center"> <div class="row justify-content-center">
<h3>Wie viel Zeit hast du?</h3> <h3 class="text-center">Wie viel Zeit hast du?</h3>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
{% bootstrap_form form %} {% bootstrap_form form %}
</div> </div>
<div> <div id="submit-time" class="row justify-content-center">
<button type="button" class="btn btn-danger">Aufgaben auswählen!</button>
</div>
<div id="timing-messages">
<p class="text-center" id="avail-time"></p>
<p class="text-center" id="chosen-time"></p>
<p class="text-center warning" id="time-warning">Wahrscheinlich nimmst du dir gerade zu viel vor. Konzentriere dich auf das Wichtigste ;)</p>
</div>
<div id="choices">
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item" id="chosen-todos">Meine todos</li> <li class="list-group-item" id="chosen-todos">Meine Aufgaben</li>
{# {% for todo in todos_selection %}#}
{# <div class="todo-text">{{ todo.0.text }}</div>#}
{# <div class="todo-due">{{ todo.1 }}</div>#}
{# <div class="todo-duration">{{ todo.0.duration }} Minuten</div>#}
{# {% endfor %}#}
</ul> </ul>
</div> </div>
<div class="row justify-content-center"> <div id="submit-selection" class="row justify-content-center" disabled="disabled">
<input type="submit" class="btn btn-danger" value="Auswahl speichern und loslegen!"> <input type="submit" class="btn btn-danger" value="Auswahl speichern und loslegen!">
</div> </div>
</form> </form>
...@@ -32,7 +35,7 @@ ...@@ -32,7 +35,7 @@
</div> </div>
<div class="col-sm" id="todo-choices"> <div class="col-sm" id="todo-choices">
<div class="row justify-content-center"> <div class="row justify-content-center">
<h3>Welche Todos willst du gleich erledigen?</h3> <h3 class="text-center">Welche Aufgaben willst du jetzt erledigen?</h3>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div id="accordion"> <div id="accordion">
...@@ -49,12 +52,12 @@ ...@@ -49,12 +52,12 @@
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
data-parent="#accordion"> data-parent="#accordion">
<div class="card-body" id="body-late"> <div class="card-body" id="body-late">
<div class="list-group list group-flush"> <div class="list-group list-group-flush">
{% for todo in todos_late %} {% for todo in todos_late %}
<div class="list-group-item list-group-item-action select-todo-grid"> <div class="list-group-item list-group-item-action select-todo-grid">
<div class="todo-text">{{ todo.0.text }}</div> <div class="todo-text">{{ todo.0.text }}</div>
<div class="todo-due">{{ todo.1 }}</div>
<div class="todo-duration">{{ todo.0.duration }} Minuten</div> <div class="todo-duration">{{ todo.0.duration }} Minuten</div>
<div class="todo-due">{{ todo.1 }}</div>
<div class="todo-id" hidden>{{ todo.0.id }}</div> <div class="todo-id" hidden>{{ todo.0.id }}</div>
</div> </div>
{% endfor %} {% endfor %}
...@@ -74,12 +77,12 @@ ...@@ -74,12 +77,12 @@
</div> </div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion"> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body"> <div class="card-body">
<div class="list-group list group-flush"> <div class="list-group list-group-flush">
{% for todo in todos_today %} {% for todo in todos_today %}
<div class="list-group-item list-group-item-action select-todo-grid"> <div class="list-group-item list-group-item-action select-todo-grid">
<div class="todo-text">{{ todo.0.text }}</div> <div class="todo-text">{{ todo.0.text }}</div>
<div class="todo-due">{{ todo.1 }}</div>
<div class="todo-duration">{{ todo.0.duration }} Minuten</div> <div class="todo-duration">{{ todo.0.duration }} Minuten</div>
<div class="todo-due">{{ todo.1 }}</div>
<div class="todo-id" hidden>{{ todo.0.id }}</div> <div class="todo-id" hidden>{{ todo.0.id }}</div>
</div> </div>
{% endfor %} {% endfor %}
...@@ -100,12 +103,12 @@ ...@@ -100,12 +103,12 @@
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
data-parent="#accordion"> data-parent="#accordion">
<div class="card-body"> <div class="card-body">
<div class="list-group list group-flush"> <div class="list-group list-group-flush">
{% for todo in todos_soon %} {% for todo in todos_soon %}
<div class="list-group-item list-group-item-action select-todo-grid"> <div class="list-group-item list-group-item-action select-todo-grid">
<div class="todo-text">{{ todo.0.text }}</div> <div class="todo-text">{{ todo.0.text }}</div>
<div class="todo-due">{{ todo.1 }}</div>
<div class="todo-duration">{{ todo.0.duration }} Minuten</div> <div class="todo-duration">{{ todo.0.duration }} Minuten</div>
<div class="todo-due">{{ todo.1 }}</div>
<div class="todo-id" hidden>{{ todo.0.id }}</div> <div class="todo-id" hidden>{{ todo.0.id }}</div>
</div> </div>
{% endfor %} {% endfor %}
...@@ -126,7 +129,7 @@ ...@@ -126,7 +129,7 @@
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" <div id="collapseFour" class="collapse" aria-labelledby="headingFour"
data-parent="#accordion"> data-parent="#accordion">
<div class="card-body"> <div class="card-body">
<ul class="list-group list group-flush"> <ul class="list-group list-group-flush">
{% for todo in todos_someday %} {% for todo in todos_someday %}
<div class="list-group-item list-group-item-action select-todo-grid"> <div class="list-group-item list-group-item-action select-todo-grid">
<div class="todo-text">{{ todo.text }}</div> <div class="todo-text">{{ todo.text }}</div>
......
...@@ -2,7 +2,123 @@ ...@@ -2,7 +2,123 @@
{% load bootstrap4 %} {% load bootstrap4 %}
{% block content %} {% block content %}
<div id="show-todos">
<div class="row justify-content-center">
<form action="" method="POST" enctype="multipart/form-data">
{% csrf_token %}
{{ form }}
<input type="submit" class="btn btn-primary" value="Änderungen speichern">
</form>
</div>
<div class="row justify-content-center">
<div id="accordion">
<div class="card">
<div class="card-header todo-late" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link todo-late" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
Dinge, die eigentlich schon getan sein sollten
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
data-parent="#accordion">
<div class="card-body" id="body-late">
<div class="list-group list-group-flush">
{% for todo in todos_late %}
<div class="list-group-item list-group-item-action select-todo-grid-show">
<input class="todo-check" type="checkbox">
<div class="todo-text">{{ todo.0.text }}</div>
<div class="todo-duration">{{ todo.0.duration }} Minuten</div>
<div class="todo-due">{{ todo.1 }}</div>
<div class="todo-id" hidden>{{ todo.0.id }}</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header todo-today" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed todo-today" data-toggle="collapse"
data-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
Dinge, die heute zu erledigen sind
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
<div class="list-group list-group-flush">
{% for todo in todos_today %}
<div class="list-group-item list-group-item-action select-todo-grid-show">
<input class="todo-check" type="checkbox">
<div class="todo-text">{{ todo.0.text }}</div>
<div class="todo-duration">{{ todo.0.duration }} Minuten</div>
<div class="todo-due">{{ todo.1 }}</div>
<div class="todo-id" hidden>{{ todo.0.id }}</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header todo-soon" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed todo-soon" data-toggle="collapse"
data-target="#collapseThree" aria-expanded="false"
aria-controls="collapseThree">
Dinge, die bald zu erledigen sind
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree"
data-parent="#accordion">
<div class="card-body">
<div class="list-group list-group-flush">
{% for todo in todos_soon %}
<div class="list-group-item list-group-item-action select-todo-grid-show">
<input class="todo-check" type="checkbox">
<div class="todo-text">{{ todo.0.text }}</div>
<div class="todo-duration">{{ todo.0.duration }} Minuten</div>
<div class="todo-due">{{ todo.1 }}</div>
<div class="todo-id" hidden>{{ todo.0.id }}</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header todo-someday" id="headingFour">
<h5 class="mb-0">
<button class="btn btn-link collapsed todo-someday" data-toggle="collapse"
data-target="#collapseFour" aria-expanded="false"
aria-controls="collapseFour">
Dinge, die keinen Zeitdruck haben
</button>
</h5>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour"
data-parent="#accordion">
<div class="card-body">
<ul class="list-group list-group-flush">
{% for todo in todos_someday %}
<div class="list-group-item list-group-item-action select-todo-grid-show">
<input class="todo-check" type="checkbox">
<div class="todo-text">{{ todo.text }}</div>
<div class="todo-duration">{{ todo.duration }} Minuten</div>
<div class="todo-id" hidden>{{ todo.id }}</div>
</div>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %} {% endblock %}
\ No newline at end of file
...@@ -21,17 +21,17 @@ class SelectionForm(forms.Form): ...@@ -21,17 +21,17 @@ class SelectionForm(forms.Form):
label='Stunden', label='Stunden',
max_value=24, max_value=24,
min_value=0, min_value=0,
widget=forms.NumberInput(attrs={'max': 24, 'min': 0, 'style': 'width:150px;'}) widget=forms.NumberInput(attrs={'max': 24, 'min': 0, 'style': 'width:150px;',
'id': 'duration-hours'})
) )
duration_minutes = forms.IntegerField( duration_minutes = forms.IntegerField(
label='Minuten', label='Minuten',
max_value=59, max_value=59,
min_value=0, min_value=0,
widget=forms.NumberInput(attrs={'max': 55, 'min': 0, 'step': 5, 'style': 'width: 150px;'}) widget=forms.NumberInput(attrs={'max': 55, 'min': 0, 'step': 5,
'style': 'width: 150px;', 'id': 'duration-minutes'})
) )
selection = forms.CharField( selection = forms.CharField(
label='Selection',
max_length=100,
widget=forms.TextInput(attrs={'type': 'hidden', 'id': 'selection-hidden-input'}) widget=forms.TextInput(attrs={'type': 'hidden', 'id': 'selection-hidden-input'})
) )
...@@ -44,3 +44,14 @@ class SelectionForm(forms.Form): ...@@ -44,3 +44,14 @@ class SelectionForm(forms.Form):
def todos_string_to_list(self): def todos_string_to_list(self):
cleaned_data = super(SelectionForm, self).clean() cleaned_data = super(SelectionForm, self).clean()
return cleaned_data['selection'].split(',') return cleaned_data['selection'].split(',')
class CheckedTodosForm(forms.Form):
checkedTodos = forms.CharField(
required=False,
widget=forms.TextInput(attrs={'type': 'hidden', 'id': 'checked-todos-hidden-input'})
)
def todos_string_to_list(self):
cleaned_data = super(CheckedTodosForm, self).clean()
return cleaned_data['checkedTodos'].split(',')
# Generated by Django 3.0.7 on 2020-07-05 13:38
import datetime
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('todo', '0008_auto_20200705_0002'),
]
operations = [
migrations.AddField(
model_name='selection',
name='active',
field=models.BooleanField(default=False),
),
migrations.AddField(
model_name='selection',
name='endtime',
field=models.DateField(default=datetime.datetime.today),
preserve_default=False,
),
migrations.AddField(
model_name='selection',
name='started',
field=models.DateField(default=datetime.datetime.today),
),
]
# Generated by Django 3.0.7 on 2020-07-05 13:39
import datetime
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('todo', '0009_auto_20200705_1538'),
]
operations = [
migrations.AlterField(
model_name='selection',
name='endtime',
field=models.DateTimeField(),
),
migrations.AlterField(
model_name='selection',
name='started',
field=models.DateTimeField(default=datetime.datetime.today),
),
]
...@@ -8,6 +8,9 @@ class Selection(models.Model): ...@@ -8,6 +8,9 @@ class Selection(models.Model):
name = models.CharField(max_length=30, default="name") name = models.CharField(max_length=30, default="name")
# items = models.ManyToManyField(Todo) # items = models.ManyToManyField(Todo)
total_time = models.IntegerField(default=0) # in minutes total_time = models.IntegerField(default=0) # in minutes
active = models.BooleanField(default=False)
started = models.DateTimeField(default=datetime.datetime.today)
endtime = models.DateTimeField()
def __str__(self): def __str__(self):
return f'{self.name}, total time: {self.total_time.__str__()}' return f'{self.name}, total time: {self.total_time.__str__()}'
......
...@@ -54,4 +54,44 @@ div.form-control.recurrence-widget { ...@@ -54,4 +54,44 @@ div.form-control.recurrence-widget {
.todo-soon, .todo-someday { .todo-soon, .todo-someday {
background: darkseagreen; background: darkseagreen;
color: floralwhite; color: floralwhite;
}
.warning {
color: indianred;
}
/*show todos*/
.list-group-item.select-todo-grid-show {
display: grid;
grid-template-columns: 20px auto auto 30px 30px;
grid-template-rows: auto auto;
}
.select-todo-grid-show .todo-check {
grid-column-start: 1;
grid-row: 1 / 2;
align-self: center;
}
.select-todo-grid-show .todo-text {
grid-column-start: 2;
}
.select-todo-grid-show .todo-due {
grid-row-start: 2;
grid-column-start: 3;
font-size: small;
justify-self: end;
width: fit-content;
}
.select-todo-grid-show .todo-duration {
grid-column-start: 3;
justify-self: end;
width: fit-content;
}
#show-todos #accordion {
width: -webkit-fill-available;
} }
\ No newline at end of file
let selections = []; if($('#todo-choices').length) {
// hide todo elements before setting timer let selections = [];
// $('#todo-choices').hide(); let duration_todos = 0;
let total_time = 0;
let formSubmittable = false;
let $todoChoices;
let $timingMessages;
let $timeWarning;
let $choices;
let $submitSelection;
let $submitTime;
let $durationHours;
let $durationMinutes;
let $form;
window.addEventListener('load', init, false);
function init() {
$todoChoices = $('#todo-choices');
$timingMessages = $('#timing-messages');
$timeWarning = $('#time-warning');
$choices = $('#choices');
$submitSelection = $('#submit-selection');
$submitTime = $('#submit-time');
$durationHours = $('#duration-hours');
$durationMinutes = $('#duration-minutes');
$form = $('form');
// hide everything before setting timer
$todoChoices.hide();
$timingMessages.hide();
$timeWarning.hide();
$submitSelection.hide();
$choices.hide();
$form.on('keyup keypress', e => {
const keyCode = e.keyCode || e.which;
if (e.keyCode === 13 && !formSubmittable) {
e.preventDefault();
return false;
}
})
//set avail_time string
$durationHours.on('blur', e => {
if ($submitTime.is(":visible")) {
return;
}
doTotalTimeThings();
})
$durationMinutes.on('blur', e => {
if ($submitTime.is(":visible")) {
return;
}
doTotalTimeThings();
})
$submitTime.on('click keyup keypress', e => {
const keyCode = e.keyCode || e.which;
if (e.keyCode && e.keyCode !== 13) {
return;
}
showWhenTimeSet();
doTotalTimeThings();
formSubmittable = true;
})
}
//event listener for choosing todos //event listener for choosing todos
$('.select-todo-grid').on('click', e => { $('.select-todo-grid').on('click keyup keypress', e => {
//get node with class "select-todo-grid" const keyCode = e.keyCode || e.which;
let node = e.target.closest(".select-todo-grid"); if (e.keyCode && e.keyCode !== 13) {
return;
//get id for todo-item and add it to selections }
let id = node.lastElementChild.textContent; //get node with class "select-todo-grid"
selections.push(id); let node = e.target.closest(".select-todo-grid");
$('#selection-hidden-input').val(selections.toString());
//get id for todo-item and add it to selections
let clonedNode = node.cloneNode(true) let id = node.lastElementChild.textContent;
document.getElementById('chosen-todos').appendChild(clonedNode); selections.push(id);
node.style.display = "none"; $('#selection-hidden-input').val(selections.toString());
});
//show node under "Meine Aufgaben"
let clonedNode = node.cloneNode(true)
document.getElementById('chosen-todos').appendChild(clonedNode);
node.style.display = "none";
//set chosen-time string
let durationStr = node.children[1].textContent;
let duration = durationStr.substring(0, durationStr.indexOf(' '));
duration_todos += parseInt(duration);
let hours = Math.floor(duration_todos / 60);
let minutes = duration_todos % 60;
setChosenTimeString(hours, minutes);
if (duration_todos > total_time) {
$('#time-warning').show();
} else {
$('#time-warning').hide();
}
});
function setChosenTimeString(hours, minutes) {
let hoursStr = hours ? ((hours < 10) ? ('0' + hours) : hours) : '00';
let minutesStr = minutes ? ((minutes < 10) ? ('0' + minutes) : minutes) : '00';
$('#chosen-time').text(`Deine bisher gewählten Aufgaben dauern ${hoursStr}:${minutesStr} Stunden.`);
}
function doTotalTimeThings() {
if ($submitTime.is(":visible")) {
return;
}
let hours = parseInt($durationHours.val());
let minutes = parseInt($durationMinutes.val());
total_time = hours * 60 + minutes;