diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/index.html.j2 | 21 | ||||
| -rw-r--r-- | templates/manage.html.j2 | 70 | ||||
| -rw-r--r-- | templates/poll_choice_datetime_range.html.j2 | 24 | ||||
| -rw-r--r-- | templates/poll_info_table.html.j2 | 24 | ||||
| -rw-r--r-- | templates/poll_vote_list.html.j2 | 21 | ||||
| -rw-r--r-- | templates/poll_vote_table.html.j2 | 20 |
6 files changed, 92 insertions, 88 deletions
diff --git a/templates/index.html.j2 b/templates/index.html.j2 index f84b428..db458da 100644 --- a/templates/index.html.j2 +++ b/templates/index.html.j2 @@ -3,26 +3,7 @@ {% block content %} <h2>Create new diddle</h2> <form class="poll-form" action="/poll/create" method="post"> - <table> - <tbody> - <tr> - <td><label for="title">Title</label></td> - <td><input type="text" name="title" required></td> - </tr> - <tr> - <td><label for="description">Description (optional)</label></td> - <td><textarea name="description"></textarea></td> - </tr> - <tr> - <td><label for="author_name">Your name</label></td> - <td><input type="text" name="author_name" required></td> - </tr> - <tr> - <td><label for="author_email">Your email (optional)</label></td> - <td><input type="text" name="author_email"></td> - </tr> - </tbody> - </table> + {% include "poll_info_table.html.j2" %} <p>You can add options after submitting.</p> <input class="green" type="submit" value="Create"> diff --git a/templates/manage.html.j2 b/templates/manage.html.j2 index 55a14bd..4a5da8d 100644 --- a/templates/manage.html.j2 +++ b/templates/manage.html.j2 @@ -14,27 +14,8 @@ </p> <form class="poll-form" action="/manage/{{ poll.manage_code }}/update_info" method="post"> - <table> - <tbody> - <tr> - <td><label for="title">Title</label></td> - <td><input type="text" name="title" value="{{ poll.title }}" required></td> - </tr> - <tr> - <td><label for="description">Description (optional)</label></td> - <td><textarea name="description">{{ poll.description }}</textarea></td> - </tr> - <tr> - <td><label for="author_name">Your name</label></td> - <td><input type="text" name="author_name" value="{{ poll.author_name }}" required></td> - </tr> - <tr> - <td><label for="author_email">Your email (optional)</label></td> - <td><input type="text" name="author_email" value="{{ poll.author_email }}"></td> - </tr> - </tbody> - </table> - <br> + {% include "poll_info_table.html.j2" %} + <p></p> <input type="submit" value="Update"> </form> @@ -55,11 +36,17 @@ <form action="/manage/{{ poll.manage_code }}/delete_choice/{{ choice.id }}" method="post"> <tr> <td> - <input type="datetime-local" name="start_datetime_{{ choice.id }}" value="{{ choice.start_datetime_notz() }}" disabled + <input type="{% if poll.is_whole_day %}date{% else %}datetime-local{% endif %}" + name="start_datetime_{{ choice.id }}" + value="{% if poll.is_whole_day %}{{ choice.start_date_notz() }}{% else %}{{ choice.start_datetime_notz() }}{% endif %}" + disabled {% if last_choice_id == choice.id %}id="last-start-datetime"{% endif %}> </td> <td> - <input type="datetime-local" name="end_datetime_{{ choice.id }}" value="{{ choice.end_datetime_notz() }}" disabled + <input type="{% if poll.is_whole_day %}date{% else %}datetime-local{% endif %}" + name="end_datetime_{{ choice.id }}" + value="{% if poll.is_whole_day %}{{ choice.end_date_notz() }}{% else %}{{ choice.end_datetime_notz() }}{% endif %}" + disabled {% if last_choice_id == choice.id %}id="last-end-datetime"{% endif %}> </td> <td> @@ -71,10 +58,10 @@ <form action="/manage/{{ poll.manage_code }}/add_choice" method="post"> <tr> <td> - <input type="datetime-local" name="start_datetime" required> + <input type="{% if poll.is_whole_day %}date{% else %}datetime-local{% endif %}" name="start_datetime" required> </td> <td> - <input type="datetime-local" name="end_datetime" required> + <input type="{% if poll.is_whole_day %}date{% else %}datetime-local{% endif %}" name="end_datetime" required> </td> <td> <input class="green" type="submit" value="Add"> @@ -94,7 +81,9 @@ </div> <script> +const isWholeDay = {% if poll.is_whole_day %}true{% else %}false{% endif %}; const hour = 1000 * 60 * 60; +const day = hour * 24; const startDatetimeInput = document.querySelector('input[name="start_datetime"]'); const endDatetimeInput = document.querySelector('input[name="end_datetime"]'); @@ -103,15 +92,38 @@ const lastStartDatetimeInput = document.getElementById('last-start-datetime'); const lastEndDatetimeInput = document.getElementById('last-end-datetime'); if (lastStartDatetimeInput !== null && startDatetimeInput.valueAsDate === null) { - startDatetimeInput.valueAsDate = new Date(lastStartDatetimeInput.valueAsDate.getTime() + hour); + if (isWholeDay) { + // set the start date to the last end date + 1 day if in whole day mode + startDatetimeInput.valueAsDate = new Date(lastEndDatetimeInput.valueAsDate.getTime() + day); + endDatetimeInput.valueAsDate = new Date(startDatetimeInput.valueAsDate.getTime()); + } else { + // set the start date to the last end date + 1 hour if not in whole day mode + startDatetimeInput.valueAsDate = new Date(lastEndDatetimeInput.valueAsDate.getTime()); + endDatetimeInput.valueAsDate = new Date(startDatetimeInput.valueAsDate.getTime() + hour); + } } -startDatetimeInput.addEventListener('blur', onStartDatetimeBlur); +startDatetimeInput.addEventListener('change', onStartDatetimeChange); -function onStartDatetimeBlur(event) { +function onStartDatetimeChange(event) { const endDatetimeInput = document.querySelector('input[name="end_datetime"]'); if (endDatetimeInput.valueAsDate === null) { - endDatetimeInput.valueAsDate = new Date(event.target.valueAsDate.getTime() + hour); + if (isWholeDay) { + // set the end date to the start date if in whole day mode + endDatetimeInput.valueAsDate = new Date(event.target.valueAsDate.getTime()); + } else { + // set the end date to the start date + 1 hour if not in whole day mode + endDatetimeInput.valueAsDate = new Date(event.target.valueAsDate.getTime() + hour); + } + } +} + +const query = new URLSearchParams(window.location.search); +const focusNext = query.get('focus_next'); +if (focusNext !== null) { + const nextInput = document.querySelector(`input[name="start_datetime"]`); + if (nextInput !== null) { + nextInput.focus(); } } </script> diff --git a/templates/poll_choice_datetime_range.html.j2 b/templates/poll_choice_datetime_range.html.j2 new file mode 100644 index 0000000..ddfa970 --- /dev/null +++ b/templates/poll_choice_datetime_range.html.j2 @@ -0,0 +1,24 @@ +<span> +{{ choice.start_datetime.strftime("%a %d.%m") }} +</span> +<span> + {% if now.year != choice.start_datetime.year %}.{{choice.start_datetime.year}}{% endif %} +</span> +<span> + {% if not poll.is_whole_day %}{{ choice.start_datetime.strftime("%H:%M") }}{% endif %} +</span> +{% if (poll.is_whole_day and not choice.ends_on_same_day()) or (not poll.is_whole_day and not choice.ends_at_same_datetime()) %} +<span>—</span> +{% endif %} + +{% if not choice.ends_on_same_day() %} +<span> + {{ choice.end_datetime.strftime("%a %d.%m") }} +</span> +<span> + {% if now.year != choice.end_datetime.year %}.{{choice.end_datetime.year}}{% endif %} +</span> +{% endif %} +<span> + {% if not poll.is_whole_day %}{{ choice.end_datetime.strftime("%H:%M") }}{% endif %} +</span> diff --git a/templates/poll_info_table.html.j2 b/templates/poll_info_table.html.j2 new file mode 100644 index 0000000..7955ca8 --- /dev/null +++ b/templates/poll_info_table.html.j2 @@ -0,0 +1,24 @@ +<table> + <tbody> + <tr> + <td><label for="title">Title</label></td> + <td><input type="text" name="title" value="{% if poll %}{{ poll.title }}{% endif %}" required></td> + </tr> + <tr> + <td><label for="description">Description (optional)</label></td> + <td><textarea name="description">{% if poll %}{{ poll.description }}{% endif %}</textarea></td> + </tr> + <tr> + <td><label for="author_name">Your name</label></td> + <td><input type="text" name="author_name" value="{% if poll %}{{ poll.author_name }}{% endif %}" required></td> + </tr> + <tr> + <td><label for="author_email">Your email (optional)</label></td> + <td><input type="text" name="author_email" value="{% if poll %}{{ poll.author_email }}{% endif %}"></td> + </tr> + <tr> + <td><label for="is_whole_day">Whole day event?</label></td> + <td class="checkbox-field"><input type="checkbox" name="is_whole_day" {% if poll and poll.is_whole_day %}checked{% endif %}></td> + </tr> + </tbody> +</table> diff --git a/templates/poll_vote_list.html.j2 b/templates/poll_vote_list.html.j2 index c18b3e0..845356b 100644 --- a/templates/poll_vote_list.html.j2 +++ b/templates/poll_vote_list.html.j2 @@ -4,26 +4,7 @@ <label for="choice_{{ choice.id }}"> <input type="checkbox" name="choice_{{ choice.id }}" id="choice_{{ choice.id }}"> <strong> - {{ choice.start_datetime.strftime("%a %d.%m") }} - <span> - {% if now.year != choice.start_datetime.year %}.{{choice.start_datetime.year}}{% endif %} - </span> - <span> - {{ choice.start_datetime.strftime("%H:%M") }} - </span> - <span>—</span> - {% if not choice.ends_on_same_day() %} - <span> - {{ choice.end_datetime.strftime("%a %d.%m") }} - </span> - <span> - {% if now.year != choice.end_datetime.year %}.{{choice.end_datetime.year}}{% endif %} - </span> - {% endif %} - <span> - {{ choice.end_datetime.strftime("%H:%M") }} - </span> - </span> + {% include "poll_choice_datetime_range.html.j2" %} </strong> <span> <i>{{ choice.votes | length }} votes</i> diff --git a/templates/poll_vote_table.html.j2 b/templates/poll_vote_table.html.j2 index cfa336a..97fcac5 100644 --- a/templates/poll_vote_table.html.j2 +++ b/templates/poll_vote_table.html.j2 @@ -3,25 +3,7 @@ <th></th> {% for choice in choices %} <th> - {{ choice.start_datetime.strftime("%a %d.%m") }} - <span> - {% if now.year != choice.start_datetime.year %}.{{choice.start_datetime.year}}{% endif %} - </span> - <span> - {{ choice.start_datetime.strftime("%H:%M") }} - </span> - <span>—</span> - {% if not choice.ends_on_same_day() %} - <span> - {{ choice.end_datetime.strftime("%a %d.%m") }} - </span> - <span> - {% if now.year != choice.end_datetime.year %}.{{choice.end_datetime.year}}{% endif %} - </span> - {% endif %} - <span> - {{ choice.end_datetime.strftime("%H:%M") }} - </span> + {% include "poll_choice_datetime_range.html.j2" %} <span> <i>{{ choice.votes | length }} votes</i> </span> |