|
|
|
|
@ -311,21 +311,24 @@
|
|
|
|
|
<div class="w-full mt-5">
|
|
|
|
|
<div class="w-full bg-slate-300 rounded-md shadow-md h-fit p-5 flex justify-between items-center">
|
|
|
|
|
<div>
|
|
|
|
|
<form method="GET" action="{% url 'detailed-project' project.project_id %}">
|
|
|
|
|
<form method="POST" action="{% url 'save_task' %}">
|
|
|
|
|
<select id="epicSelect" name="epic_id"
|
|
|
|
|
class="w-[250px] rounded-md border border-gray-300 p-3 outline-none text-gray-500 cursor-pointer">
|
|
|
|
|
<option selected disabled>EPICS</option>
|
|
|
|
|
{% for epic in epics %}
|
|
|
|
|
<option value="{{ epic.id }}" data-start-date="{{ epic.start_date }}" data-end-date="{{ epic.end_date }}">{{epic.title}}</option>
|
|
|
|
|
<option value="{{ epic.id }}" data-start-date="{{ epic.start_date }}"
|
|
|
|
|
data-end-date="{{ epic.end_date }}">{{epic.title}}</option>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</select>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-full flex justify-end gap-[3%] pl-5">
|
|
|
|
|
<div class="w-[50%] justify-start items-center gap-2 hidden" id="epicDetails">
|
|
|
|
|
<p class="text-gray-500 font-light">Start Date: <span id="startDate" class="text-slate-800"></span>
|
|
|
|
|
<p class="text-gray-500 font-light">Start Date: <span id="startDate"
|
|
|
|
|
class="text-slate-800"></span>
|
|
|
|
|
</p>
|
|
|
|
|
<p class="text-gray-500 font-light">End Date: <span id="endDate" class="text-slate-800"></span>
|
|
|
|
|
<p class="text-gray-500 font-light">End Date: <span id="endDate"
|
|
|
|
|
class="text-slate-800"></span>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-[50%] flex justify-end items-center gap-2">
|
|
|
|
|
@ -368,108 +371,139 @@
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="w-full px-4 hidden" id="epicRelatedTasks">
|
|
|
|
|
<div class="w-full p-3 bg-white rounded-md shadow-lg">
|
|
|
|
|
<p class="text-gray-500 text-xl">Related Tasks:</p>
|
|
|
|
|
<!-- TASK 1 -->
|
|
|
|
|
{% for task in related_tasks %}
|
|
|
|
|
<div class="w-full bg-white h-fit rounded-md border border-gray-300 mt-3">
|
|
|
|
|
<!-- 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">{{task.status}}</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">{{task.start_date}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="w-[15%] flex justify-center items-center border-b border-gray-300">
|
|
|
|
|
<p class="text-xl text-slate-700">{{task.end_date}}</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 class="w-full px-4 hidden" id="epicRelatedTasks">
|
|
|
|
|
</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>
|
|
|
|
|
<script>
|
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
|
|
|
var epicSelect = document.getElementById("epicSelect");
|
|
|
|
|
var epicRelatedTasks = document.getElementById("epicRelatedTasks");
|
|
|
|
|
|
|
|
|
|
epicSelect.addEventListener("change", function () {
|
|
|
|
|
// Get the selected option element
|
|
|
|
|
var selectedOption = epicSelect.options[epicSelect.selectedIndex];
|
|
|
|
|
|
|
|
|
|
// Check if an option other than the default "EPICS" is selected
|
|
|
|
|
if (selectedOption.value !== "") {
|
|
|
|
|
// Get the data attributes (start-date and end-date) from the selected option
|
|
|
|
|
var startDate = selectedOption.getAttribute("data-start-date");
|
|
|
|
|
var endDate = selectedOption.getAttribute("data-end-date");
|
|
|
|
|
|
|
|
|
|
// Fetch related tasks based on the selected epic ID
|
|
|
|
|
fetchTasks(selectedOption.value, startDate, endDate);
|
|
|
|
|
} else {
|
|
|
|
|
// Hide the related tasks container when the default "EPICS" option is selected
|
|
|
|
|
epicRelatedTasks.style.display = "none";
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
// Function to fetch and display related tasks
|
|
|
|
|
function fetchTasks(epicId, startDate, endDate) {
|
|
|
|
|
// Send an AJAX request to fetch related tasks
|
|
|
|
|
fetch("/fetch_related_tasks/?epic_id=" + epicId)
|
|
|
|
|
.then(function (response) {
|
|
|
|
|
return response.json();
|
|
|
|
|
})
|
|
|
|
|
.then(function (data) {
|
|
|
|
|
// Build the HTML for the related tasks
|
|
|
|
|
var tasksHtml = buildTasksHtml(data.tasks);
|
|
|
|
|
|
|
|
|
|
// Update the content of the epicRelatedTasks container with the fetched tasks
|
|
|
|
|
epicRelatedTasks.innerHTML = tasksHtml;
|
|
|
|
|
epicRelatedTasks.style.display = "block";
|
|
|
|
|
})
|
|
|
|
|
.catch(function (error) {
|
|
|
|
|
console.error("Error fetching tasks:", error);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
// Function to build the HTML for related tasks
|
|
|
|
|
function buildTasksHtml(tasks) {
|
|
|
|
|
// Initialize the HTML with the table header
|
|
|
|
|
var html = '<p class="text-gray-500 text-xl">Related Tasks: </p>';
|
|
|
|
|
html += '<div class="w-full bg-white h-fit rounded-md border border-gray-300 mt-3 flex flex-col gap-4 p-3">';
|
|
|
|
|
|
|
|
|
|
// Build HTML for each task
|
|
|
|
|
tasks.forEach(function (task) {
|
|
|
|
|
// TABLE HEADER
|
|
|
|
|
html += '<div class="w-full h-fit border border gray-300 rounded-t-md">';
|
|
|
|
|
html += '<div class="w-full flex h-[70px] rounded-t-md border-b border-gray-300">';
|
|
|
|
|
if (task.status == 'Open') {
|
|
|
|
|
html += '<div class="w-[55%] flex justify-center items-center border-r border-gray-300 bg-green-700 rounded-tl-md">';
|
|
|
|
|
} else if (task.status == 'Working On') {
|
|
|
|
|
html += '<div class="w-[55%] flex justify-center items-center border-r border-gray-300 bg-yellow-400 rounded-tl-md">';
|
|
|
|
|
} else {
|
|
|
|
|
html += '<div class="w-[55%] flex justify-center items-center border-r border-gray-300">';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
html += '<p class="text-xl text-white">' + task.name + '</p>';
|
|
|
|
|
html += '</div>';
|
|
|
|
|
|
|
|
|
|
html += '<div class="w-[15%] flex justify-center items-center border-r border-gray-300">';
|
|
|
|
|
html += '<p class="text-slate-700">' + task.status + '</p>';
|
|
|
|
|
html += '</div>';
|
|
|
|
|
|
|
|
|
|
html += '<div class="w-[15%] flex justify-center items-center border-r border-gray-300">';
|
|
|
|
|
html += '<p class="text-slate-700">' + task.start_date + '</p>';
|
|
|
|
|
html += '</div>';
|
|
|
|
|
|
|
|
|
|
html += '<div class="w-[15%] flex justify-center items-center border-gray-300">';
|
|
|
|
|
html += '<p class="text-slate-700">' + task.end_date + '</p>';
|
|
|
|
|
html += '</div>';
|
|
|
|
|
|
|
|
|
|
html += '</div>';
|
|
|
|
|
|
|
|
|
|
// TABLE BODY
|
|
|
|
|
html += '<div class="w-full h-fit flex">';
|
|
|
|
|
// Left side of the table
|
|
|
|
|
html += '<div class="w-[55%] h-fit bg-white p-3 rounded-bl-md">';
|
|
|
|
|
html += '<div class="w-full flex flex-col gap-2">';
|
|
|
|
|
html += '<div class="flex justify-start items-center gap-2">';
|
|
|
|
|
html += '<p class="text-gray-400 text-base"> Assigned To:</p>';
|
|
|
|
|
html += '<p class="text-slate-800 text-base"> nataly </p>';
|
|
|
|
|
html += '</div>';
|
|
|
|
|
|
|
|
|
|
html += '<div class="flex justify-start items-center gap-2">';
|
|
|
|
|
html += '<p class="text-gray-400 text-base">Files:</p>';
|
|
|
|
|
html += '<p class="text-slate-800 text-base"> pdf, docx </p>';
|
|
|
|
|
html += '</div>';
|
|
|
|
|
|
|
|
|
|
html += '<div class="flex justify-start items-center gap-2">';
|
|
|
|
|
html += '<p class="text-gray-400 text-base">Tags:</p>';
|
|
|
|
|
html += '<p class="text-slate-800 text-base"> tasg test </p>';
|
|
|
|
|
html += '</div>';
|
|
|
|
|
|
|
|
|
|
html += '<div class="flex justify-start items-center gap-2">';
|
|
|
|
|
html += '<p class="text-gray-400 text-base">Extra:</p>';
|
|
|
|
|
html += '<p class="text-slate-800 text-base">' + task.extra + '</p>';
|
|
|
|
|
html += '</div>';
|
|
|
|
|
html += '</div>';
|
|
|
|
|
html += '</div>';
|
|
|
|
|
|
|
|
|
|
// Right Side
|
|
|
|
|
html += '<div class="w-[45%] h-fit bg-white flex flex-wrap justify-start rounded-br-md">';
|
|
|
|
|
html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>';
|
|
|
|
|
html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Update Status</button>';
|
|
|
|
|
html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add Time</button>';
|
|
|
|
|
html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white">Delete</button>';
|
|
|
|
|
html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Update</button>';
|
|
|
|
|
html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Show Points</button>';
|
|
|
|
|
html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add Point</button>';
|
|
|
|
|
html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>';
|
|
|
|
|
html += '<button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md">Timelines</button>';
|
|
|
|
|
html += '</div>';
|
|
|
|
|
|
|
|
|
|
html += '</div>';
|
|
|
|
|
html += '</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">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">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">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">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">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">Timline</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
html += '</div>';
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
return html;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<div class="mt-10 flex flex-col justify-center items-center w-full">
|
|
|
|
|
<p class="text-xl text-gray-500">Total Extra Task Time : <span class="text-slate-800 font-semibold">46
|
|
|
|
|
|
