Commit 1aef9a7a authored by dorothee.kueppers's avatar dorothee.kueppers
Browse files

Zwischenstand selection Seite

parent f771b73e
...@@ -125,3 +125,8 @@ RECURRENCE_USE_TZ = True ...@@ -125,3 +125,8 @@ RECURRENCE_USE_TZ = True
STATIC_URL = '/static/' STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static') STATIC_ROOT = os.path.join(BASE_DIR, 'static')
# STATICFILES_DIRS = [
# os.path.join(BASE_DIR, "static"),
# # '/var/www/static/',
# ]
...@@ -14,9 +14,11 @@ Including another URLconf ...@@ -14,9 +14,11 @@ Including another URLconf
2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) 2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
""" """
from django.conf.urls import url from django.conf.urls import url
from django.conf.urls.static import static
from django.contrib import admin from django.contrib import admin
from django.urls import path from django.urls import path
from django.views.i18n import JavaScriptCatalog from django.views.i18n import JavaScriptCatalog
from django.conf import settings
from todo.views import get_landing_page, get_selection_page, add_todo, get_impressum, get_show_todo, get_archiv from todo.views import get_landing_page, get_selection_page, add_todo, get_impressum, get_show_todo, get_archiv
...@@ -31,9 +33,12 @@ urlpatterns = [ ...@@ -31,9 +33,12 @@ urlpatterns = [
path('todo/archiv', get_archiv, name='archv'), path('todo/archiv', get_archiv, name='archv'),
] ]
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
# according to https://django-recurrence.readthedocs.io/en/latest/installation.html # according to https://django-recurrence.readthedocs.io/en/latest/installation.html
js_info_dict = { js_info_dict = {
'packages': ('recurrence', ), 'packages': ('recurrence',),
} }
urlpatterns += [ urlpatterns += [
......
...@@ -2,7 +2,56 @@ ...@@ -2,7 +2,56 @@
/* background: lightgrey;*/ /* background: lightgrey;*/
/*}*/ /*}*/
div.form-control.recurrence-widget{ div.form-control.recurrence-widget {
height: max-content; height: max-content;
margin-bottom: 16px; margin-bottom: 16px;
}
.list-group-item.select-todo-grid {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
}
.select-todo-grid .todo-text {
grid-column-start: 1;
}
.select-todo-grid .todo-due {
grid-row-start: 2;
grid-column-start: 2;
font-size: small;
justify-self: end;
width: fit-content;
}
.select-todo-grid .todo-duration {
grid-column-start: 2;
justify-self: end;
width: fit-content;
}
.todo-late {
background: indianred;
color: floralwhite;
}
.todo-late:hover, .todo-late:active,
.todo-today:hover, .todo-today:active {
color: darkslategray;
}
.todo-soon:hover, .todo-soon:active,
.todo-someday:hover, .todo-someday:active {
color: darkslategray;
}
.todo-today {
background: orange;
color: floralwhite;
}
.todo-soon, .todo-someday {
background: darkseagreen;
color: floralwhite;
} }
\ No newline at end of file
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
{% bootstrap_css %} {% bootstrap_css %}
{% bootstrap_javascript jquery='full' %} {% bootstrap_javascript jquery='full' %}
<link rel="stylesheet" href="{% static 'css/main.css' %}"> <link rel="stylesheet" href="{% static 'css/main.css' %}">
<script type='text/javascript' src={% static 'js/selectionpage.js' %}></script>
</head> </head>
<body> <body>
{# fix for https://github.com/django-recurrence/django-recurrence/issues/47 #} {# fix for https://github.com/django-recurrence/django-recurrence/issues/47 #}
...@@ -68,6 +67,7 @@ ...@@ -68,6 +67,7 @@
<nav class="navbar fixed-bottom navbar-light bg-light"> <nav class="navbar fixed-bottom navbar-light bg-light">
<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>
{% endblock %} {% endblock %}
</body> </body>
</html> </html>
\ No newline at end of file
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
{% load bootstrap4 %} {% load bootstrap4 %}
{% block content %} {% block content %}
<script src='../../todo/static/js/selectionpage.js'></script> <script type="text/javascript"></script>
<div class="row"> <div class="row">
<form action="" enctype="multipart/form-data" method="POST"> <div class="col-sm" class="todo-box">
{% csrf_token %} <form action="" enctype="multipart/form-data" method="POST">
<div class="col-sm todo-box"> {% csrf_token %}
<div class="row justify-content-center"> <div class="row justify-content-center">
<h3>Wie viel Zeit hast du?</h3> <h3>Wie viel Zeit hast du?</h3>
</div> </div>
...@@ -17,15 +17,29 @@ ...@@ -17,15 +17,29 @@
<div class="row justify-content-center"> <div class="row justify-content-center">
<input type="submit" class="btn btn-danger" value="submit"> <input type="submit" class="btn btn-danger" value="submit">
</div> </div>
</div> <div>
</form> <ul class="list-group">
<li class="list-group-item">Meine todos</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>
</div>
</form>
</div>
<div class="col-sm" id="todo-choices"> <div class="col-sm" id="todo-choices">
<div class="row justify-content-center">
<h3>Welche Todos willst du gleich erledigen?</h3>
</div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div id="accordion"> <div id="accordion">
<div class="card"> <div class="card">
<div class="card-header" id="headingOne"> <div class="card-header todo-late" id="headingOne">
<h5 class="mb-0"> <h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" <button class="btn btn-link todo-late" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne"> aria-expanded="true" aria-controls="collapseOne">
Dinge, die eigentlich schon getan sein sollten Dinge, die eigentlich schon getan sein sollten
</button> </button>
...@@ -34,19 +48,25 @@ ...@@ -34,19 +48,25 @@
<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"> <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 %}
<li class="list-group-item">{{ todo.0.text }}, {{ todo.1 }}</li> <div class="list-group-item list-group-item-action select-todo-grid">
<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-id" hidden>{{ todo.0.id }}</div>
</div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="card-header" id="headingTwo"> <div class="card-header todo-today" id="headingTwo">
<h5 class="mb-0"> <h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" <button class="btn btn-link collapsed todo-today" data-toggle="collapse"
data-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo"> aria-expanded="false" aria-controls="collapseTwo">
Dinge, die heute zu erledigen sind Dinge, die heute zu erledigen sind
</button> </button>
...@@ -54,20 +74,23 @@ ...@@ -54,20 +74,23 @@
</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">
<ul class="list-group list group-flush"> <div class="list-group list group-flush">
{% for todo in todos_today %} {% for todo in todos_today %}
<button type="button" class="list-group-item list-group-item-action"> <div class="list-group-item list-group-item-action select-todo-grid">
{{ todo.0.text }}, {{ todo.1 }} <div class="todo-text">{{ todo.0.text }}</div>
</button> <div class="todo-due">{{ todo.1 }}</div>
<div class="todo-duration">{{ todo.0.duration }} Minuten</div>
<div class="todo-id" hidden>{{ todo.0.id }}</div>
</div>
{% endfor %} {% endfor %}
</ul> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="card-header" id="headingThree"> <div class="card-header todo-soon" id="headingThree">
<h5 class="mb-0"> <h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" <button class="btn btn-link collapsed todo-soon" data-toggle="collapse"
data-target="#collapseThree" aria-expanded="false" data-target="#collapseThree" aria-expanded="false"
aria-controls="collapseThree"> aria-controls="collapseThree">
Dinge, die bald zu erledigen sind Dinge, die bald zu erledigen sind
...@@ -77,18 +100,23 @@ ...@@ -77,18 +100,23 @@
<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">
<ul class="list-group list group-flush"> <div class="list-group list group-flush">
{% for todo in todos_soon %} {% for todo in todos_soon %}
<li class="list-group-item">{{ todo.0.text }}, {{ todo.1 }}</li> <div class="list-group-item list-group-item-action select-todo-grid">
<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-id" hidden>{{ todo.0.id }}</div>
</div>
{% endfor %} {% endfor %}
</ul> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="card-header" id="headingFour"> <div class="card-header todo-someday" id="headingFour">
<h5 class="mb-0"> <h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" <button class="btn btn-link collapsed todo-someday" data-toggle="collapse"
data-target="#collapseFour" aria-expanded="false" data-target="#collapseFour" aria-expanded="false"
aria-controls="collapseFour"> aria-controls="collapseFour">
Dinge, die keinen Zeitdruck haben Dinge, die keinen Zeitdruck haben
...@@ -100,7 +128,10 @@ ...@@ -100,7 +128,10 @@
<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 %}
<li class="list-group-item">{{ todo.text }}</li> <div class="list-group-item list-group-item-action select-todo-grid">
<div class="todo-text">{{ todo.text }}</div>
<div class="todo-id" hidden>{{ todo.id }}</div>
</div>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
......
...@@ -2,7 +2,56 @@ ...@@ -2,7 +2,56 @@
/* background: lightgrey;*/ /* background: lightgrey;*/
/*}*/ /*}*/
div.form-control.recurrence-widget{ div.form-control.recurrence-widget {
height: max-content; height: max-content;
margin-bottom: 16px; margin-bottom: 16px;
}
.list-group-item.select-todo-grid {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
}
.select-todo-grid .todo-text {
grid-column-start: 1;
}
.select-todo-grid .todo-due {
grid-row-start: 2;
grid-column-start: 2;
font-size: small;
justify-self: end;
width: fit-content;
}
.select-todo-grid .todo-duration {
grid-column-start: 2;
justify-self: end;
width: fit-content;
}
.todo-late {
background: indianred;
color: floralwhite;
}
.todo-late:hover, .todo-late:active,
.todo-today:hover, .todo-today:active {
color: darkslategray;
}
.todo-soon:hover, .todo-soon:active,
.todo-someday:hover, .todo-someday:active {
color: darkslategray;
}
.todo-today {
background: orange;
color: floralwhite;
}
.todo-soon, .todo-someday {
background: darkseagreen;
color: floralwhite;
} }
\ No newline at end of file
$('#todo-choices').visibility = false; // hide todo elements before setting timer
\ No newline at end of file // $('#todo-choices').hide();
let element;
//event listener for choosing todos
$('.select-todo-grid').on('click', e => {
let node = e.target.closest(".select-todo-grid");
let id = node.lastElementChild.textContent;
let group = node.parentElement.id;
switch (group) {
case 'todo-late':
break;
default:
}
let clonedNode = node.cloneNode(true)
node.style.display = "none";
});
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment