Skip to content

Commit

Permalink
updated rules
Browse files Browse the repository at this point in the history
  • Loading branch information
@shiv3679
shiv3679 committed Feb 29, 2024
1 parent 08d7cb7 commit ef975a7
Show file tree
Hide file tree
Showing 6 changed files with 173 additions and 74 deletions.
53 changes: 53 additions & 0 deletions aiden_frontend/src/AddTaskForm.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
align-items: center;
height: 100vh; /* Full viewport height */
padding: 20px;
margin-top: 60px;
}

.task-form {
Expand Down Expand Up @@ -103,3 +104,55 @@ button:hover {
.subtask input {
flex-grow: 1;
}

.icon-btn {
background: transparent;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}

.add-btn::before {
content: '+';
font-size: 24px;
color: #007bff;
}

.delete-btn::before {
content: '🗑';
font-size: 24px;
color: red;
}

.submit-btn {
background-color: #007bff;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px; /* Ensure there's some space above the submit button */
}

.submit-btn:hover {
background-color: #0056b3;
}

.subtask {
display: flex;
align-items: center;
gap: 10px; /* Creates space between the input and the button */
margin-bottom: 10px; /* Space between subtask entries */
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group textarea,
.form-group select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
width: calc(100% - 22px); /* Adjust width to prevent overflow */
}
31 changes: 22 additions & 9 deletions aiden_frontend/src/AddTaskForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React, { useState } from 'react';
import { db } from './firebaseConfig'; // Ensure this path matches your project structure
import { db, auth } from './firebaseConfig'; // Ensure auth is imported
import { collection, addDoc } from "firebase/firestore";
import './AddTaskForm.css';

const AddTaskForm = () => {
// Form state initialization
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
const [dueDate, setDueDate] = useState('');
Expand All @@ -13,6 +14,7 @@ const AddTaskForm = () => {
const [hasSubtasks, setHasSubtasks] = useState(false);
const [subtasks, setSubtasks] = useState([{ id: Date.now(), title: '', completed: false }]);

// Handlers for form inputs
const handleSubtaskChange = (id, value) => {
const updatedSubtasks = subtasks.map(subtask =>
subtask.id === id ? { ...subtask, title: value } : subtask
Expand All @@ -31,8 +33,16 @@ const AddTaskForm = () => {
const handleSubmit = async (e) => {
e.preventDefault();
const taskTags = tags.split(',').map(tag => tag.trim());
const userId = auth.currentUser ? auth.currentUser.uid : null; // Get the current user's UID

if (!userId) {
console.error("No authenticated user found.");
return;
}

try {
await addDoc(collection(db, "tasks"), {
userId, // Include the userId in the document
title,
description,
dueDate,
Expand All @@ -41,14 +51,14 @@ const AddTaskForm = () => {
tags: taskTags,
subtasks: hasSubtasks ? subtasks : [],
});
console.log("Task added!");
// Reset form fields after successful submission
console.log("Task added successfully!");
resetForm();
} catch (error) {
console.error("Error adding task: ", error);
}
};

// Function to reset form fields
const resetForm = () => {
setTitle('');
setDescription('');
Expand All @@ -60,6 +70,7 @@ const AddTaskForm = () => {
setSubtasks([{ id: Date.now(), title: '', completed: false }]);
};


return (
<div className="form-container">
<form onSubmit={handleSubmit} className="task-form">
Expand All @@ -73,6 +84,7 @@ const AddTaskForm = () => {
value={title}
onChange={(e) => setTitle(e.target.value)}
required
placeholder='Enter a title for the task'
/>
</div>
<div className="form-group">
Expand All @@ -82,6 +94,7 @@ const AddTaskForm = () => {
value={description}
onChange={(e) => setDescription(e.target.value)}
required
placeholder='Enter a description for the task'
/>
</div>
<div className="form-group">
Expand Down Expand Up @@ -125,12 +138,13 @@ const AddTaskForm = () => {
id="tags"
value={tags}
onChange={(e) => setTags(e.target.value)}
placeholder='e.g. academics, daily, lifestyle, miscellaneous'
/>
</div>

{/* Subtasks Section */}
<div className="form-group">
<label htmlFor="hasSubtasks">Has Subtasks:</label>
<label htmlFor="hasSubtasks">Has Subtasks:</label>
<input
type="checkbox"
id="hasSubtasks"
Expand All @@ -147,15 +161,14 @@ const AddTaskForm = () => {
onChange={(e) => handleSubtaskChange(subtask.id, e.target.value)}
required={hasSubtasks}
/>
<button type="button" onClick={() => removeSubtask(subtask.id)}>Remove</button>
<button type="button" onClick={() => removeSubtask(subtask.id)} className="icon-btn delete-btn"></button>
</div>
))}
{hasSubtasks && <button type="button" onClick={addSubtask}>Add Subtask</button>}

<button type="submit">Add Task</button>
{hasSubtasks && <button type="button" onClick={addSubtask} className="icon-btn add-btn"></button>}
<button type="submit" className="submit-btn">Add Task</button>
</form>
</div>
);
};

export default AddTaskForm;
export default AddTaskForm;
50 changes: 22 additions & 28 deletions aiden_frontend/src/TaskList.css
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,36 @@
.task-list-container {
padding: 20px;
margin-top: 60px; /* Adjust based on navbar height */
}

.task-list {
margin-top: 20px;
}
.task-list {}

.task-item {
border: 1px solid #ccc;
border-radius: 8px;
padding: 15px;
margin-bottom: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
position: relative;
}

.task-item.completed {
background-color: #e0ffe0; /* Light green background for completed tasks */
}

.task-item h3 {
margin-top: 0;
background-color: #e0ffe0;
}

.task-item p {
.task-item h3, .task-item p {
margin: 5px 0;
}

.task-actions {
position: absolute;
right: 10px;
top: 10px;
display: flex;
justify-content: flex-end;
gap: 10px;
}

.complete-btn, .delete-btn {
.icon-btn {
border: none;
background: none;
cursor: pointer;
margin-left: 10px;
font-size: 1.2rem;
}

.complete-btn:hover, .delete-btn:hover {
opacity: 0.7;
}

.complete-btn {
color: green;
}

.delete-btn {
color: red;
}

.progress-bar {
Expand All @@ -66,3 +46,17 @@
border-radius: 18px;
transition: width 0.3s ease-in-out;
}

.subtask {
display: flex;
align-items: center;
gap: 10px;
}

.subtask .icon-btn {
padding: 0;
}

#delete{
color: red;
}
43 changes: 22 additions & 21 deletions aiden_frontend/src/TaskList.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
import React, { useState, useEffect } from 'react';
import { db } from './firebaseConfig';
import { collection, getDocs, updateDoc, deleteDoc, doc } from "firebase/firestore";
import React, { useEffect, useState } from 'react';
import { auth, db } from './firebaseConfig'; // Ensure auth is imported correctly
import { collection, query, where, getDocs, updateDoc, deleteDoc, doc } from 'firebase/firestore';
import './TaskList.css';

const TaskList = () => {
const [tasks, setTasks] = useState([]);

useEffect(() => {
const fetchTasks = async () => {
const querySnapshot = await getDocs(collection(db, "tasks"));
const fetchedTasks = querySnapshot.docs.map(doc => ({
id: doc.id,
...doc.data(),
// Calculate initial completion percentage for tasks with subtasks
completion: doc.data().subtasks ? calculateCompletion(doc.data().subtasks) : doc.data().status === 'Completed' ? 100 : 0,
}));
setTasks(fetchedTasks);
// Ensure the user is logged in before fetching their tasks
if (auth.currentUser) {
const userQuery = query(collection(db, 'tasks'), where('userId', '==', auth.currentUser.uid));
const querySnapshot = await getDocs(userQuery);
const fetchedTasks = querySnapshot.docs.map(doc => ({
id: doc.id,
...doc.data(),
completion: doc.data().subtasks
? calculateCompletion(doc.data().subtasks)
: doc.data().status === 'Completed' ? 100 : 0,
}));
setTasks(fetchedTasks);
}
};

fetchTasks();
Expand All @@ -27,7 +32,7 @@ const TaskList = () => {
};

const deleteTask = async (id) => {
await deleteDoc(doc(db, "tasks", id));
await deleteDoc(doc(db, 'tasks', id));
setTasks(tasks.filter(task => task.id !== id));
};

Expand All @@ -36,7 +41,6 @@ const TaskList = () => {
let updatedTask;

if (subtaskId) {
// Mark the specific subtask as completed
updatedTask = tasks.map(task => {
if (task.id === taskId) {
const updatedSubtasks = task.subtasks.map(subtask =>
Expand All @@ -47,7 +51,6 @@ const TaskList = () => {
return task;
});
} else {
// Mark the entire task as completed
updatedTask = tasks.map(task =>
task.id === taskId ? { ...task, status: "Completed", completion: 100 } : task
);
Expand All @@ -62,26 +65,25 @@ const TaskList = () => {
<h2>Tasks</h2>
<div className="task-list">
{tasks.map(task => (
<div key={task.id} className={`task-item ${task.status === "Completed" ? "completed" : ""}`}>
<div key={task.id} className={`task-item ${task.status === 'Completed' ? 'completed' : ''}`}>
<h3>{task.title}</h3>
<p>{task.description}</p>
<p>Due: {task.dueDate}</p>
<p>Priority: {task.priority}</p>
<p>Status: {task.status}</p>
<p>Tags: {task.tags.join(', ')}</p>
{/* Display subtasks if they exist */}
{task.subtasks && task.subtasks.map(subtask => (
<div key={subtask.id} className={`subtask ${subtask.completed ? "completed" : ""}`}>
<div key={subtask.id} className={`subtask ${subtask.completed ? 'completed' : ''}`}>
<span>{subtask.title}</span>
<button onClick={() => markAsCompleted(task.id, subtask.id)}>Mark Subtask Completed</button>
<button onClick={() => markAsCompleted(task.id, subtask.id)} className="icon-btn">✔️</button>
</div>
))}
<div className="progress-bar">
<div className="progress-bar-fill" style={{ width: `${task.completion}%` }}></div>
</div>
<div className="task-actions">
<button onClick={() => markAsCompleted(task.id)} className="complete-btn">Mark Task Completed</button>
<button onClick={() => deleteTask(task.id)} className="delete-btn">Delete Task</button>
<button onClick={() => markAsCompleted(task.id)} className="icon-btn" id='complete'>✔️</button>
<button onClick={() => deleteTask(task.id)} className="icon-btn" id='delete'>🗑️</button>
</div>
</div>
))}
Expand All @@ -91,4 +93,3 @@ const TaskList = () => {
};

export default TaskList;

34 changes: 34 additions & 0 deletions aiden_frontend/src/UserProfile.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
.profile-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}

.user-info, .completed-tasks {
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
padding: 20px;
margin: 10px 0;
width: 100%;
max-width: 600px;
}

.user-details p, .completed-tasks ul {
margin: 10px 0;
}

.completed-tasks ul {
list-style-type: none;
padding: 0;
}

.completed-tasks li {
background-color: #e4e4e4;
border-radius: 4px;
padding: 10px;
margin-bottom: 5px;
}

/* Add more styles as needed */
Loading

0 comments on commit ef975a7

Please sign in to comment.