public/coins-demo
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Bootstrapping list_detail / Add Task view

Browse source
This commit is contained in:
Scot Hacker 2018-03-19 00:41:52 -07:00
parent c470864c86
commit 3be7ea7745
7 changed files with 92 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

36
todo/templates/todo/add_list.html
View file

@ -1,16 +1,34 @@
{% extends "todo/base.html" %}
{% block page_heading %}{% endblock %}
{% block title %}Add Todo List{% endblock %}
{% block content %}
<h2>Add a list:</h2>
<h2>Add a list:</h2>
<form action="" method="post">
{% csrf_token %}
<table>{{ form }}</table>
<p><input type="submit" value="Submit" class="todo-button"></p>
</form>
<form action="" method="post">
{% csrf_token %}
{% endblock %}
<div class="form-group">
<label for="id_name">List Name</label>
<input type="text" class="form-control" id="id_name" name="name" aria-describedby="inputNameHelp" placeholder="">
<small id="inputNameHelp" class="form-text text-muted">The full display name for this list.</small>
</div>
<div class="form-group">
<label for="id_slug">Slug</label>
<input type="text" class="form-control" id="id_slug" name="slug" aria-describedby="inputSlugHelp" placeholder="">
<small id="inputSlugHelp" class="form-text text-muted">
To be used in URL for this list e.g. 'ux-tasks'. All lowercase, no spaces.</small>
</div>
<div class="form-group">
<label for="id_group">Group</label>
<select id="id_group" name ="group" class="custom-select size="3" mb-3">
{% for g in form.group %}
{{ g }}
<option value="{{ g.id }}">{{ g.name }}</option>
{% endfor %}
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
{% endblock %}

1
todo/templates/todo/base.html
View file

@ -4,5 +4,4 @@
{% block extrahead %}
<!-- CSS and JavaScript for django-todo -->
<link rel="stylesheet" type="text/css" href="{% static 'todo/css/styles.css' %}" />
<script src="{% static 'todo/js/jquery.tablednd_0_5.js' %}" type="text/javascript"></script>
{% endblock extrahead %}

83
todo/templates/todo/list_detail.html
View file

@ -1,4 +1,5 @@
{% extends "todo/base.html" %}
{% load staticfiles %}
{% block title %}Todo List: {{ task_list.name }}{% endblock %}
@ -7,31 +8,48 @@
{% if list_slug != "mine" %}
<form action="" name="add_task" method="post">
{% csrf_token %}
<h2 id="slideToggle" >&rarr; Click to add task &larr;</h2>
<div id="AddTask">
<table class="table">
<tr>
<td><label for="id_title">Task:</label> {{ form.title }}</td>
<td><label for="id_due_date">Due date:</label> {{ form.due_date }}</td>
<td><label for="id_assigned">Assign to:</label> {{ form.assigned_to }}</td>
<td><label for="id_notify">Notify*:</label> <input type="checkbox" checked="checked" name="notify" value="1" id="notify"></td>
</tr>
<tr>
<td>
<label for="id_note">Note:</label>
{{ form.note }}
<p class="minor">*Email notifications will only be sent if task is assigned to someone besides yourself.</p>
</td>
</tr>
</table>
<input type="hidden" name="priority" value="999" id="id_priority">
<input type="hidden" name="created_by" value="{{ request.user.id }}" id="id_created_by">
<input type="hidden" name="task_list" value="{{ task_list.id }}" id="id_task_list">
<input type="hidden" name="created_date" value="{{ created_date }}" id="id_created_date">
<p><input type="submit" name="add_task" value="Add task" class="todo-button"></p>
<button class="btn btn-primary" id="AddTaskButton" type="button"
data-toggle="collapse" data-target="#AddTask">Add Task</button>
<div id="AddTask" class="collapse mt-3">
<div class="form-group">
<label for="id_title" name="title">Task</label>
<input type="text" class="form-control" id="id_title" name="title" required placeholder="Task title" value="{{ form.title.text }}">
</div>
<div class="form-group">
<label for="id_note">Description</label>
<textarea class="form-control" id="id_note" name="note"
rows="5" aria-describedby="inputNoteHelp">{{ form.note.text }}</textarea>
<small id="inputNoteHelp" class="form-text text-muted">Describe the task or bug. Provide steps to reproduce the issue.</small>
</div>
<div class="form-group">
<label for="id_due_date">Due Date</label>
<input type="date" class="form-control" id="id_due_date" name="due_date" value="{{ form.due_date.text }}">
</div>
<div class="form-group">
<label for="id_assigned_to">Assigned To</label>
{# See todo.forms.AddItemForm #}
{{form.assigned_to}}
</div>
<div class="form-group">
<label for="id_notify">Notify</label>
<input type="checkbox" checked="checked" class="form-control" id="id_notify" name="notify" aria-describedby="inputNotifyHelp" value="{{ form.notify.text }}">
<small id="inputNotifyHelp" class="form-text text-muted">Email notifications will only be sent if task is assigned to someone other than yourself.</small>
</div>
<input type="hidden" name="priority" value="999" id="id_priority">
<input type="hidden" name="created_by" value="{{ request.user.id }}" id="id_created_by">
<input type="hidden" name="task_list" value="{{ task_list.id }}" id="id_task_list">
<input type="hidden" name="created_date" value="{{ created_date }}" id="id_created_date">
<p><input type="submit" name="add_task" value="Submit" class="btn btn-primary"></p>
</div>
</form>
<hr />
{% endif %}
{% if items %}
@ -40,7 +58,6 @@
{% else %}
<h1>{{ view_completed|yesno:"Completed tasks, Tasks" }} in "{{ task_list.name }}"</h1>
<p>This list belongs to group {{ task_list.group }}</p>
<h3>Tasks :: Drag rows to set priorities</h3>
{% endif %}
<form action="" name="show_tasks" method="post">
@ -91,6 +108,9 @@
</tr>
{% endfor %}
</table>
<p>
<small><i>Drag rows to set priorities</i></small>
</p>
<p><input type="submit" name="process_tasks" value="Continue..." class="todo-button"></p>
</form>
{% else %}
@ -112,6 +132,8 @@
{% endblock %}
{% block extra_js %}
<script src="{% static 'todo/js/jquery.tablednd_0_5.js' %}" type="text/javascript"></script>
<script type="text/javascript">
function order_tasks(data) {
// The JQuery plugin tableDnD provides a serialize() function which provides the re-ordered
@ -131,13 +153,14 @@
}
});
// Initially hide the Add Task form
$('#AddTask').hide();
// toggle slide to show the Add Task form when link clicked
$('#slideToggle').click(function(){
$(this).siblings('#AddTask').slideToggle();
});
});
// When adding a task, change the text of the Add Task button
function handleClick()
{
console.log(this.innerHTML);
this.innerHTML = (this.innerHTML == 'Add Task' ? 'Cancel' : 'Add Task');
}
document.getElementById('AddTaskButton').onclick=handleClick;
</script>
{% endblock extra_js %}