Update UI elements
This commit is contained in:
Chris Veleris
parent
f0bdaca58d
commit
8b14b50286
6 changed files with 74 additions and 60 deletions
|
|
@ -112,7 +112,7 @@ TUDUDI_SESSION_SECRET
|
|||
-e TUDUDI_USER_EMAIL=myemail@example.com \
|
||||
-e TUDUDI_USER_PASSWORD=mysecurepassword \
|
||||
-e TUDUDI_SESSION_SECRET=3337c138d17ac7acefa412e5db0d7ef6540905b198cc28c5bf0d11e48807a71bdfe48d82ed0a0a6eb667c937cbdd1db3e1e6073b3148bff37f73cc6398a39671 \
|
||||
-v ~/tududi_db:/db \
|
||||
-v ~/tududi_db:/usr/src/app/db \
|
||||
-p 9292:9292 \
|
||||
-d chrisvel/tududi:0.5
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
class Sinatra::Application
|
||||
get '/projects' do
|
||||
@projects_with_tasks = current_user.projects.with_incomplete_tasks.order(:name)
|
||||
@projects_with_tasks_complete = current_user.projects.with_complete_tasks.order(:name)
|
||||
@projects_with_tasks = current_user.projects.includes(:tasks, :area).order(:name)
|
||||
|
||||
erb :'projects/index'
|
||||
end
|
||||
|
|
|
|||
|
|
@ -3,25 +3,33 @@
|
|||
<i class="fs-4 bi bi-plus-circle-fill text-primary me-2"></i> <span class="fs-6">New task</span>
|
||||
</div>
|
||||
<div class="collapse" id="newTaskForm">
|
||||
<div class="card bg-white shadow-sm border-0 p-4">
|
||||
<div class="card bg-white shadow-sm border-0 mt-2 p-4 mx-3">
|
||||
<%= partial :'tasks/_form', locals: { task: Task.new } %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-3 my-2">
|
||||
<% if @projects_with_tasks.any? %>
|
||||
<% @projects_with_tasks.each do |project| %>
|
||||
<h5 class="mt-4 mb-2">
|
||||
<a class="px-2 py-1 btn btn-outline-dark rounded-0 d-inline-block" href="/project/<%= project.id %>">
|
||||
<%= project.name.upcase %>
|
||||
</a>
|
||||
</h5>
|
||||
<% if project.tasks.any? %>
|
||||
<h5 class="mt-4 mb-2">
|
||||
<div class="px-2 py-1 mb-1 border border-dark d-inline-block"><%= project.name.upcase %></div>
|
||||
</h5>
|
||||
<% project.tasks.each do |task| %>
|
||||
<div id="edit_task_form_<%= task.id %>" class="d-none">
|
||||
<%= partial :'tasks/_form', locals: { task: task } %>
|
||||
</div>
|
||||
<div class="">
|
||||
<%= partial :'tasks/_task', locals: { task: task } %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="mb-4">
|
||||
<% project.tasks.each do |task| %>
|
||||
<div id="edit_task_form_<%= task.id %>" class="d-none">
|
||||
<%= partial :'tasks/_form', locals: { task: task } %>
|
||||
</div>
|
||||
<div class="">
|
||||
<%= partial :'tasks/_task', locals: { task: task } %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="px-4 py-2 mb-4 bg-secondary-subtle fw-light opacity-50">
|
||||
No tasks have been created yet for this project
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -3,16 +3,16 @@
|
|||
</a>
|
||||
<hr>
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="/inbox" class="<%= nav_link('/inbox') %>" aria-current="page">
|
||||
<i class="bi bi-inbox-fill me-1"></i> Inbox
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/tasks?due_date=today" class="<%= nav_link('/tasks', 'due_date' => 'today') %>">
|
||||
<i class="bi bi-calendar-day-fill me-1"></i> Today
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="/inbox" class="<%= nav_link('/inbox') %>" aria-current="page">
|
||||
<i class="bi bi-inbox-fill me-1"></i> Inbox
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/tasks?due_date=upcoming" class="<%= nav_link('/tasks', 'due_date' => 'upcoming') %>">
|
||||
<i class="bi bi-calendar3 me-1"></i> Upcoming
|
||||
|
|
|
|||
|
|
@ -7,8 +7,9 @@
|
|||
<fieldset>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-12">
|
||||
<label for="task_name" class="form-label">Task:</label>
|
||||
<input type="text" id="task_name" name="name" value="<%= task.name %>" class="form-control" required>
|
||||
<div class="input-group input-group-lg">
|
||||
<input type="text" id="task_name" name="name" value="<%= task.name %>" class="form-control" placeholder="+ Add Task" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
|
|
@ -19,12 +20,12 @@
|
|||
<% current_user.projects.each do |project| %>
|
||||
<option value="<%= project.id %>" <%= 'selected' if task.project_id == project.id %>><%= project.name %></option>
|
||||
<% end %>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="task_priority" class="form-label">Priority:</label>
|
||||
<select id="task_priority" name="priority" class="form-select">
|
||||
<option value="Low" <%= 'selected' if task.priority == 'Low' %>>Low</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="task_priority" class="form-label">Priority:</label>
|
||||
<select id="task_priority" name="priority" class="form-select">
|
||||
<option value="Low" <%= 'selected' if task.priority == 'Low' %>>Low</option>
|
||||
<option value="Medium" <%= 'selected' if task.priority == 'Medium' %>>Medium</option>
|
||||
<option value="High" <%= 'selected' if task.priority == 'High' %>>High</option>
|
||||
</select>
|
||||
|
|
@ -32,36 +33,35 @@
|
|||
<div class="col-md-4">
|
||||
<label for="task_due_date" class="form-label">Due Date:</label>
|
||||
<input type="date" id="task_due_date" name="due_date" value="<%= task.due_date.strftime('%Y-%m-%d') if task.due_date %>" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-12">
|
||||
<label for="task_tags" class="form-label">Tags:</label>
|
||||
<input name="tags" id="task_tags" class="form-control" value="<%= task.tags&.map(&:name)&.join(',') %>">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<%= task.new_record? ? 'Create Task' : 'Update Task' %>
|
||||
</button>
|
||||
<% unless task.new_record? %>
|
||||
<button type="button" class="btn btn-outline-danger" onclick="deleteTask('<%= task.id %>')">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
<% end %>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<% if !task.new_record? %>
|
||||
<form id="delete_task_<%= task.id %>" action="/task/<%= task.id %>" method="post" class="d-none">
|
||||
<input type="hidden" name="_method" value="delete">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-12">
|
||||
<input name="tags" id="task_tags" class="form-control" value="<%= task.tags&.map(&:name)&.join(',') %>" placeholder="Add Tags">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<%= task.new_record? ? 'Create Task' : 'Update Task' %>
|
||||
</button>
|
||||
<% unless task.new_record? %>
|
||||
<button type="button" class="btn btn-outline-danger" onclick="deleteTask('<%= task.id %>')">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
<% end %>
|
||||
<script>
|
||||
function deleteTask(taskId) {
|
||||
if (confirm('Are you sure you want to delete this task?')) {
|
||||
var form = document.getElementById('delete_task_' + taskId);
|
||||
form.submit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<% if !task.new_record? %>
|
||||
<form id="delete_task_<%= task.id %>" action="/task/<%= task.id %>" method="post" class="d-none">
|
||||
<input type="hidden" name="_method" value="delete">
|
||||
</form>
|
||||
<% end %>
|
||||
<script>
|
||||
function deleteTask(taskId) {
|
||||
if (confirm('Are you sure you want to delete this task?')) {
|
||||
var form = document.getElementById('delete_task_' + taskId);
|
||||
form.submit();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -77,4 +77,11 @@ h6 {
|
|||
|
||||
.login-content {
|
||||
margin-left: 200px;
|
||||
}
|
||||
|
||||
/* task form */
|
||||
|
||||
#task_name::placeholder {
|
||||
color: #ccc;
|
||||
opacity: 1; /* Firefox */
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue