|
|
|
@ -100,188 +100,114 @@
|
|
|
|
|
<!-- ALL TASKS -->
|
|
|
|
|
<div class="w-full mt-10">
|
|
|
|
|
<!-- TASKS TABLE -->
|
|
|
|
|
<div class="w-full bg-white h-fit rounded-md border border-gray-300 mt-5">
|
|
|
|
|
<!-- TABLE HEADER -->
|
|
|
|
|
<div class="w-full flex h-[70px] rounded-t-md">
|
|
|
|
|
<div
|
|
|
|
|
class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-green-700 rounded-tl-md">
|
|
|
|
|
<p class="text-xl text-white">Task Name</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
|
|
|
|
|
<p class="text-xl text-slate-700">Open</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
|
|
|
|
|
<p class="text-xl text-slate-700">1/2/2021</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-[15%] flex justify-center items-center border-b border-gray-300">
|
|
|
|
|
<p class="text-xl text-slate-700">1/2/2022</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- TABLE BODY -->
|
|
|
|
|
<div class="w-full h-fit flex">
|
|
|
|
|
<!-- LEFT SIDE OF TABLE BODY -->
|
|
|
|
|
<div class="w-[55%] h-fit bg-white p-3 rounded-bl-md">
|
|
|
|
|
<!-- 1st row -->
|
|
|
|
|
<div class="w-full flex flex-col gap-2">
|
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
|
|
|
<p class="text-gray-400 text-base">Project:</p>
|
|
|
|
|
<p class="text-slate-700 text-base">Osina Project</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
|
|
|
<p class="text-gray-400 text-base">Epic:</p>
|
|
|
|
|
<p class="text-slate-700 text-base">epic</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
|
|
|
<p class="text-gray-400 text-base">Assigned To:</p>
|
|
|
|
|
<p class="text-slate-700 text-base">Nataly</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
|
|
|
<p class="text-gray-400 text-base">Files:</p>
|
|
|
|
|
<p class="text-slate-700 text-base">Documentation.pdf, Project.doc</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
|
|
|
<p class="text-gray-400 text-base">Tags:</p>
|
|
|
|
|
<p class="text-slate-700 text-base">Live Streaming, Media Streaming</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
|
|
|
<p class="text-gray-400 text-base">Extra:</p>
|
|
|
|
|
<p class="text-slate-700 text-base">Yes</p>
|
|
|
|
|
</div>
|
|
|
|
|
{% for task in my_tasks %}
|
|
|
|
|
<div class="w-full h-fit bg-white p-3 rounded-md shadow-md mt-5">
|
|
|
|
|
<div class="w-full bg-white h-fit rounded-md border border-gray-300">
|
|
|
|
|
<!-- TABLE HEADER -->
|
|
|
|
|
<div class="w-full flex h-[70px] rounded-t-md">
|
|
|
|
|
{% if task.status == 'Open' %}
|
|
|
|
|
<div
|
|
|
|
|
class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-green-700 rounded-tl-md">
|
|
|
|
|
<p class="text-xl text-white">{{task.name}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
{% if task.status == 'Working On' %}
|
|
|
|
|
<div
|
|
|
|
|
class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-yellow-400 rounded-tl-md">
|
|
|
|
|
<p class="text-xl text-white">{{task.name}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
{% endif %}
|
|
|
|
|
<div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
|
|
|
|
|
<p class="text-slate-700">{{task.status}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
|
|
|
|
|
<p class="text-slate-700">{{task.formatted_start_date}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-[15%] flex justify-center items-center border-b border-gray-300">
|
|
|
|
|
<p class="text-slate-700">{{task.formatted_end_date}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- RIGHT SIDE OF TABLE BODY -->
|
|
|
|
|
<div class="w-[45%] h-fit bg-white flex flex-wrap justify-start rounded-br-md">
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
|
|
|
|
|
id="updateStatusButton" data-modal-url="{% url 'updatestatus' %}">Update
|
|
|
|
|
Status</button>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
|
|
|
|
|
id="addTimeButton" data-modal-url="{% url 'addtime' %}">Add
|
|
|
|
|
Time</button>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white"
|
|
|
|
|
id="deleteTaskButton" data-modal-url="{% url 'deletetask' %}">Delete</button>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Update</button>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
|
|
|
|
|
id="showPointsButton" data-modal-url="{% url 'showpoints' %}">Show
|
|
|
|
|
Points</button>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
|
|
|
|
|
id="addPointButton" data-modal-url="{% url 'addpoint' %}">Add
|
|
|
|
|
Point</button>
|
|
|
|
|
<a href="./task-details.html" class="w-[33.33%]">
|
|
|
|
|
<button
|
|
|
|
|
class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
|
|
|
|
|
</a>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md"
|
|
|
|
|
id="timelineButton" data-modal-url="{% url 'timeline' %}">Timeline</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- TASKS TABLE -->
|
|
|
|
|
<div class="w-full bg-white h-fit rounded-md border border-gray-300 mt-5">
|
|
|
|
|
<!-- TABLE HEADER -->
|
|
|
|
|
<div class="w-full flex h-[70px] rounded-t-md">
|
|
|
|
|
<div
|
|
|
|
|
class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-green-700 rounded-tl-md">
|
|
|
|
|
<p class="text-xl text-white">Task Name</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
|
|
|
|
|
<p class="text-xl text-slate-700">Open</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
|
|
|
|
|
<p class="text-xl text-slate-700">1/2/2021</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-[15%] flex justify-center items-center border-b border-gray-300">
|
|
|
|
|
<p class="text-xl text-slate-700">1/2/2022</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- TABLE BODY -->
|
|
|
|
|
<div class="w-full h-fit flex">
|
|
|
|
|
<!-- LEFT SIDE OF TABLE BODY -->
|
|
|
|
|
<div class="w-[55%] h-fit bg-white p-3 rounded-bl-md">
|
|
|
|
|
<!-- 1st row -->
|
|
|
|
|
<div class="w-full flex flex-col gap-2">
|
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
|
|
|
<p class="text-gray-400 text-base">Project:</p>
|
|
|
|
|
<p class="text-slate-700 text-base">Osina Project</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
|
|
|
<p class="text-gray-400 text-base">Epic:</p>
|
|
|
|
|
<p class="text-slate-700 text-base">epic</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
|
|
|
<p class="text-gray-400 text-base">Assigned To:</p>
|
|
|
|
|
<p class="text-slate-700 text-base">Nataly</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
|
|
|
<p class="text-gray-400 text-base">Files:</p>
|
|
|
|
|
<p class="text-slate-700 text-base">Documentation.pdf, Project.doc</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
|
|
|
<p class="text-gray-400 text-base">Tags:</p>
|
|
|
|
|
<p class="text-slate-700 text-base">Live Streaming, Media Streaming</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
|
|
|
<p class="text-gray-400 text-base">Extra:</p>
|
|
|
|
|
<p class="text-slate-700 text-base">Yes</p>
|
|
|
|
|
<!-- TABLE BODY -->
|
|
|
|
|
<div class="w-full h-fit flex">
|
|
|
|
|
<!-- LEFT SIDE OF TABLE BODY -->
|
|
|
|
|
<div class="w-[55%] h-fit bg-white p-3 rounded-bl-md">
|
|
|
|
|
<!-- 1st row -->
|
|
|
|
|
<div class="w-full flex flex-col gap-2">
|
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
|
|
|
<p class="text-gray-400 text-base">Project:</p>
|
|
|
|
|
<p class="text-slate-700 text-base">{{task.project.name}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
|
|
|
<p class="text-gray-400 text-base">Epic:</p>
|
|
|
|
|
<p class="text-slate-700 text-base">{{task.epic.title}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
|
|
|
<p class="text-gray-400 text-base">Assigned To:</p>
|
|
|
|
|
<p class="text-slate-700 text-base">{{task.assigned_to.first_name}}
|
|
|
|
|
{{task.assigned_to.last_name}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
|
|
|
<p class="text-gray-400 text-base">Files:</p>
|
|
|
|
|
<p class="text-slate-700 text-base"></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
|
|
|
<p class="text-gray-400 text-base">Tags:</p>
|
|
|
|
|
<p class="text-slate-700 text-base"></p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-start items-center gap-2">
|
|
|
|
|
<p class="text-gray-400 text-base">Extra:</p>
|
|
|
|
|
<p class="text-slate-700 text-base">{{task.extra}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- RIGHT SIDE OF TABLE BODY -->
|
|
|
|
|
<div class="w-[45%] h-fit bg-white flex flex-wrap justify-start rounded-br-md">
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
|
|
|
|
|
id="updateStatusButton" data-modal-url="{% url 'updatestatus' %}">Update
|
|
|
|
|
Status</button>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
|
|
|
|
|
id="addTimeButton" data-modal-url="{% url 'addtime' %}">Add
|
|
|
|
|
Time</button>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white"
|
|
|
|
|
id="deleteTaskButton" data-modal-url="{% url 'deletetask' %}">Delete</button>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Update</button>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
|
|
|
|
|
id="showPointsButton" data-modal-url="{% url 'showpoints' %}">Show
|
|
|
|
|
Points</button>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
|
|
|
|
|
id="addPointButton" data-modal-url="{% url 'addpoint' %}">Add
|
|
|
|
|
Point</button>
|
|
|
|
|
<a href="./task-details.html" class="w-[33.33%]">
|
|
|
|
|
<!-- RIGHT SIDE OF TABLE BODY -->
|
|
|
|
|
<div class="w-[45%] h-fit bg-white flex flex-wrap justify-start rounded-br-md">
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 updateStatusButton"
|
|
|
|
|
data-modal-url="{% url 'updatestatus' %}">Update
|
|
|
|
|
Status</button>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 addTimeButton"
|
|
|
|
|
data-modal-url="{% url 'addtime' %}">Add
|
|
|
|
|
Time</button>
|
|
|
|
|
<button
|
|
|
|
|
class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
|
|
|
|
|
</a>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md"
|
|
|
|
|
id="timelineButton" data-modal-url="{% url 'timeline' %}">Timeline</button>
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white deleteTaskButton"
|
|
|
|
|
data-modal-url="{% url 'deletetask' %}">Delete</button>
|
|
|
|
|
<a href="{% url 'edittask' %}" class="w-[33.33%]">
|
|
|
|
|
<button
|
|
|
|
|
class="w-full p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Edit</button>
|
|
|
|
|
</a>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 showPointsButton"
|
|
|
|
|
data-modal-url="{% url 'showpoints' %}">Show
|
|
|
|
|
Points</button>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 addPointButton"
|
|
|
|
|
data-modal-url="{% url 'addpoint' %}">Add
|
|
|
|
|
Point</button>
|
|
|
|
|
<a href="{% url 'detailed-task' task.task_id %}" class="w-[33.33%]">
|
|
|
|
|
<button
|
|
|
|
|
class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
|
|
|
|
|
</a>
|
|
|
|
|
<button
|
|
|
|
|
class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md timelineButton"
|
|
|
|
|
data-modal-url="{% url 'timeline' %}">Timeline</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|