Django Check boxes and progress bar - python-2.7

Question

I'm new to Django a few week or two in to learning.
Django Ver 1.11
Python Ver 2.7
I'm making a Todo app in Django and I'm done with the application, but I want to add some extra features to it.
1. Sub tasks Checkbox that update the progress bar on the main page
2. and after the progress bar has reached 100% the status changes to done of the task.
I've made the login, registration, logout, adding new tasks and deleting the ones that are complete to my app so far.
here is the code
Models.
from __future__ import unicode_literals
from django.db import models
from django.contrib.auth.models import User
class To_DO_Fun(models.Model):
Task_Name = models.CharField(max_length=20, default='')
Task_Text = models.TextField(max_length=45, default='')
Task_Done = models.BooleanField(default=False)
owner = models.ForeignKey(User)
def __str__(self):
return self.Task_Name + ' is ' + str(self.Task_Done) + ' by ' + str(self.owner)
forms
from .models import To_DO_Fun
from django import forms
class Form_todo(forms.ModelForm):
class Meta:
model = To_DO_Fun
fields = ['Task_Name','Task_Done']
class Form_Task(forms.ModelForm):
class Meta:
model = To_DO_Fun
exclude = ['Task_Name','Task_Done', 'owner']
fields = ['Task_Text']
views
from __future__ import unicode_literals
from django.shortcuts import render, redirect
from .models import To_DO_Fun #Class Name
from .forms import Form_todo, Form_Task #Form Name
from django.contrib import messages
from django.contrib.auth import login, logout, authenticate
from django.contrib.auth.forms import UserCreationForm
from django.http import HttpResponseRedirect
from django.contrib.auth.decorators import login_required
from django.contrib.auth.models import User
from django.http import JsonResponse
def HomeFun(request): #To view contents of the home page
return render(request, "ToDo_Files/HomePage.html")
#login_required(login_url='Login-Page')
def Display_Page(request):
if request.user.is_superuser:
all_items = To_DO_Fun.objects.all()
else:
all_items = To_DO_Fun.objects.filter(owner = request.user)
context = {'all_items':all_items}
if request.method == "POST":
obj_todo = To_DO_Fun()
obj_todo.Task_Name = request.POST.get('Task_Name')
obj_todo.owner_id = request.POST.get('owner_id')
obj_todo.save()
context = {'all_items': all_items}
messages.success(request, ("Good Luck."))
return render(request,'ToDo_Files/Display_Page.html',context )
else:
return render(request , 'ToDo_Files/Display_Page.html', context)
return render(request,'ToDo_Files/Display_Page.html',context )
#login_required(login_url='Login-Page')
def remove(request, To_DO_Fun_id):
if request.user.is_superuser:
item = To_DO_Fun.objects.get(pk=To_DO_Fun_id)
item.delete()
messages.success(request, ('Task Deleted.'))
return redirect('Display-Page')
else:
return redirect('Logout-Page')
#login_required(login_url='Login-Page')
def data(request, To_DO_Fun_id):
if request.method == "POST":
item_all = To_DO_Fun.objects.get(pk=To_DO_Fun_id)
form = Form_Task(request.POST, instance= item_all)
if form.is_valid():
form.save()
messages.success(request, ("Task Updated."))
return redirect('Display-Page')
else:
item_all = To_DO_Fun.objects.get(pk=To_DO_Fun_id)
return render(request, 'ToDo_Files/details.html', {'item_all' : item_all})
return redirect('Display-Page')
#login_required(login_url='Login-Page')
def Done_status(request, To_DO_Fun_id):
item = To_DO_Fun.objects.get(pk=To_DO_Fun_id)
item.Task_Done = True
item.save()
messages.success(request, ("Congratulations."))
return redirect('Display-Page')
#login_required
def Pen_status(request, To_DO_Fun_id):
item = To_DO_Fun.objects.get(pk=To_DO_Fun_id)
item.Task_Done = False
item.save()
return redirect('Display-Page')
# def change_status(request, To_DO_Fun_id):
# Task_Done = request.GET.get('active', False)
# To_DO_Fun_id = request.GET.get('To_DO_Fun_id', False)
# # first you get your Job model
# task = To_DO_Fun.objects.get(pk=To_DO_Fun_id)
# try:
# task.Task_Done = Task_Done
# task.save()
# return JsonResponse({"Success": True})
# except Exception as e:
# return JsonResponse({"success": False})
# return JsonResponse('Display-Page')
def Reg_Fun(request):
if request.method == "POST":
UserReg_Form = UserCreationForm(request.POST)
if UserReg_Form.is_valid():
UserReg_Form.save()
return redirect('Login-Page')
else:
messages.error(request, ('USERNAME TAKEN'))
return redirect('Reg-Page')
else:
UserReg_Form = UserCreationForm(request.POST)
return render(request, "ToDo_Files/reg.html", {'UserReg_Form':UserReg_Form})
return redirect('Login-Page')
html for main page
{% extends 'ToDo_Files/base.html' %}
{% block asd %}
<title>Task</title>
{% if messages %}
<br>
{% for msg in messages%}
<div class="alert alert-info alert-dismissable" role="alert">
<button class="close" data-dismiss="alert">
<h4>☀</h4>
</button>
{{ msg }}
</div>
{% endfor %}
{% endif %}
<br>
<center><h5>WORK HARD <br> <i>{{ user.username }}</i></h5>
{% if all_items %}
<div>
<br>
{% if request.user.is_superuser %}
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th><center><font color='#218838'>Task Name </font></center></th>
<th><center><font color='#218838'>Task Completion </font></center></th>
<th><center><font color='#218838'>Task Details </font></center></th>
<th><center><font color='#218838'>Task Author </font></center></th>
<th><center><font color='#218838'>Task Done </font></center></th>
</tr>
</thead>
{% for some in all_items %}
{% if some.Task_Done %}
<tr class="table-Success">
<td><center> <strong>{{ some.Task_Name }} </strong></center></td>
<td><center><a href='{% url 'Task-Pen' some.id %}'>Task Done</a></center></td>
<td><a href='{% url 'Task-Data' some.id %}'><center>Details </center></td>
<td><center> <strong>{{ some.owner }} </strong></center></td>
<td><center><a href='{% url 'Del-Page' some.id %}'>Remove</a></center></td>
</tr>
{% else %}
<tr class="table-default">
<td><center> <strong>{{ some.Task_Name }} </strong></center></td>
<td><center><a href='{% url 'Task-Done' some.id %}'>Task Pending </a></center></td>
<td><a href='{% url 'Task-Data' some.id %}'><center>Details </center></td>
<td><center> <strong>{{ some.owner }} </strong></center></td>
<td><center><a href='{% url 'Del-Page' some.id %}'>Remove</a></center></td>
</tr>
{% endif %}
{% endfor %}
</table>
{% else %}
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th><center><font color='#218838'>Task Name </font></center></th>
<th><center><font color='#218838'>Task Completion </font></center></th>
<th><center><font color='#218838'>Task Details </font></center></th>
<th><center><font color='#218838'>Task Done </font></center></th>
</tr>
</thead>
{% for some in all_items %}
{% if some.Task_Done %}
<tr class="table-Success">
<td><center> <strong>{{ some.Task_Name }} </strong></center></td>
<td><center><a href='{% url 'Task-Pen' some.id %}'>Task Done</a></center></td>
<td><a href='{% url 'Task-Data' some.id %}'><center>Details </center></td>
<td><center><a href='{% url 'Del-Page' some.id %}'>Remove</a></center></td>
</tr>
{% else %}
<tr class="table-default">
<td><center> <strong>{{ some.Task_Name }} </strong></center></td>
<td><center><a href='{% url 'Task-Done' some.id %}'>Task Pending </a></center></td>
<td><a href='{% url 'Task-Data' some.id %}'><center>Details </center></td>
<td><center><a href='{% url 'Del-Page' some.id %}'>Remove</a></center></td>
</tr>
{% endif %}
{% endfor %}
{% endif %}
</div>
{% endif %}
{% endblock %}
Base.html
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<style>
body {
background-color:#fffff7;
}
</style>
<body >
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href='{% url 'Display-Page' %}'>Django</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!----><!----><!----><!---->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href='{% url 'Home-Page' %}'>Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href='{% url 'Logout-Page' %}'>Logout<span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" method="POST">
{% csrf_token %}
<input type="hidden" name="owner_id" value="{{request.user.id}}">
<input class="form-control mr-sm-2" type="search"placeholder="Add TO-DO" aria-label="Search" name="Task_Name">
<button class="btn btn-success my-2 my-sm-0" type="submit" >Add TODO</button>
</form>
</div>
</nav>
<div class="container">
{% block asd %}
{% endblock %}
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
html for the subtask
{% extends 'ToDo_Files/base.html' %}
{% block asd %}
<title>Task Details</title>
{% if item_all %}
<form class="form-inline my-2 my-lg-0" method="POST" action="">
{% csrf_token %}
<br> <br>
<input class="form-control mr-sm-2" placeholder='Subtask' aria-label="Search" name="subTask">
<br>
<button class="btn btn-success my-2 my-sm-2" type="submit" >Add</button>
</form>
<br><br><br>
{% endif %}
{% endblock %}
urls
from django.conf.urls import url
from . import views
from django.contrib.auth import views as auth_views
urlpatterns = [
url(r'^(?i)Home/', views.HomeFun, name='Home-Page'),
url(r'^(?i)Display/', views.Display_Page, name='Display-Page'),
url(r'^(?i)delete/(?P<To_DO_Fun_id>\d+)/$', views.remove, name='Del-Page'),
url(r'^(?i)details/(?P<To_DO_Fun_id>\d+)/$', views.data, name='Task-Data'),
url(r'^(?i)registraion/', views.Reg_Fun, name='Reg-Page'),
url(r'^(?i)login/', auth_views.LoginView.as_view(template_name='ToDo_Files/login.html'), name='Login-Page'),
url(r'^(?i)logout/', auth_views.LogoutView.as_view(template_name='ToDo_Files/logout.html'), name='Logout-Page'),
url(r'^(?i)Done/(?P<To_DO_Fun_id>\d+)/$', views.Done_status, name='Task-Done'),
url(r'^(?i)Pending/(?P<To_DO_Fun_id>\d+)/$', views.Pen_status, name='Task-Pen'),
]
I want to see a progress bar on the main page that shows how much % the task is done after comparing or getting input from the sub task checkbox.
also that I am able to add and remove new sub tasks in the sub tasks page where I can check the and uncheck any sub task.
Thank you in advance