general fixes

fawzi-iit · Dec 2, 2023 · 31ee013 · 31ee013
1 parent 9c2b904
commit 31ee013
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 10 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -136,6 +136,51 @@ footer {
   display: none;
 }
 
+/* Style for links that should look like buttons */
+.button-like {
+  display: inline-block;
+  background-color: #5cb85c; /* Example button color */
+  color: white;
+  padding: 10px 15px;
+  border: none;
+  border-radius: 4px;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  font-size: 1em;
+}
+
+.button-like:hover {
+  background-color: #4cae4c; /* Darker shade for hover effect */
+}
+
+/* Style for the Project Dashboard link */
+#dashboardLink {
+  color: white;
+  text-decoration: none; /* Optional: removes underline from the link */
+}
+
+#dashboardLink:hover {
+  text-decoration: underline; /* Optional: adds underline on hover */
+}
+
+.status {
+  font-weight: bold;
+}
+
+.status.Not-Started {
+  color: gray;
+}
+
+.status.In-Progress {
+  color: blue;
+}
+
+.status.Completed {
+  color: green;
+}
+
+
 /* Media Queries for Responsive Design */
 @media (max-width: 700px) {
   .main {

diff --git a/public/index.html b/public/index.html
@@ -8,23 +8,22 @@
 </head>
 <body>
     <header>
-        <h1><a href="#" id="dashboardLink">Project Dashboard</a></h1>
+        <h1><a href="#" id="dashboardLink" title="Home">Project Dashboard</a></h1>
     </header>
 
-    <!-- Project Creation Form -->
-    <div id="createProjectForm">
-        <h3>Create Project</h3>
+    <!-- Create Project Link -->
+<h3><a href="#" id="createProjectLink" class="button-like">Create Project</a></h3>
+
+    <!-- Hidden Form for Creating a Project -->
+    <div id="createProjectForm" class="hidden">
         <input type="text" id="newProjectName" placeholder="Project Name">
         <textarea id="newProjectDescription" placeholder="Project Description"></textarea>
         <button onclick="createProject()">Create Project</button>
     </div>
 
     <!-- Task Creation Form (hidden initially) -->
     <div id="createTaskForm" class="hidden">
-        <h3>Create Task</h3>
-        <input type="text" id="newTaskTitle" placeholder="Task Title">
-        <textarea id="newTaskDescription" placeholder="Task Description"></textarea>
-        <button onclick="createTask(currentProjectId)">Create Task</button>
+        <!-- Task form content -->
     </div>
 
     <!-- Projects and Tasks Display Area -->

diff --git a/public/js/main.js b/public/js/main.js
@@ -3,10 +3,20 @@ let currentProjectId = null;
 document.addEventListener('DOMContentLoaded', function() {
     loadProjects();
 
+    // Event listener for the 'Project Dashboard' link
     const dashboardLink = document.getElementById('dashboardLink');
     dashboardLink.addEventListener('click', function(event) {
         event.preventDefault();
         loadProjects();
+        hideCreateProjectForm();
+        hideCreateTaskForm(); // Hide task form as well if it's visible
+    });
+
+    // Event listener for the 'Create Project' link
+    const createProjectLink = document.getElementById('createProjectLink');
+    createProjectLink.addEventListener('click', function(event) {
+        event.preventDefault();
+        showCreateProjectForm();
     });
 });
 
@@ -70,7 +80,8 @@ function attachProjectClickHandlers() {
             event.preventDefault();
             currentProjectId = this.getAttribute('data-projectid');
             fetchTasksForProject(currentProjectId);
-            document.getElementById('createTaskForm').style.display = 'block';
+            showCreateTaskForm();
+            showBackButton();
         });
     });
 }
@@ -79,26 +90,53 @@ function fetchTasksForProject(projectId) {
     fetch(`/tasks/project/${projectId}`)
         .then(response => response.json())
         .then(tasks => {
-            console.log(tasks);
             const projectsContainer = document.getElementById('projects');
             projectsContainer.innerHTML = '';
 
+            // Add a 'Back' button
+            const backButton = document.createElement('button');
+            backButton.textContent = 'Back to Projects';
+            backButton.onclick = loadProjects; // Load projects when clicked
+            projectsContainer.appendChild(backButton);
+
+            // Display tasks for the selected project
             tasks.forEach(task => {
                 const taskDiv = document.createElement('div');
                 taskDiv.className = 'task';
                 taskDiv.innerHTML = `
                     <h3>${task.title}</h3>
                     <p>${task.description}</p>
+                    <!-- ... other task details ... -->
                 `;
                 projectsContainer.appendChild(taskDiv);
             });
         })
         .catch(error => console.error('Error:', error));
 }
+
+function showCreateProjectForm() {
+    document.getElementById('createProjectForm').classList.remove('hidden');
+}
+
+function hideCreateProjectForm() {
+    document.getElementById('createProjectForm').classList.add('hidden');
+}
+
 function showCreateTaskForm() {
     document.getElementById('createTaskForm').classList.remove('hidden');
 }
 
 function hideCreateTaskForm() {
     document.getElementById('createTaskForm').classList.add('hidden');
+}
+
+function showBackButton() {
+    const projectsContainer = document.getElementById('projects');
+    const backButton = document.createElement('button');
+    backButton.textContent = 'Back to Projects';
+    backButton.onclick = function() {
+        loadProjects();
+        hideCreateTaskForm();
+    };
+    projectsContainer.insertBefore(backButton, projectsContainer.firstChild);
 }