deadline-tracker/script.js at main · Soubhagya003/deadline-tracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
// const API_BASE = "http://127.0.0.1:8000/api/deadlines";


// function formatDate(dateStr) {
//   const date = new Date(dateStr);
//   return isNaN(date) ? "No Due Date" : date.toLocaleString();
// }

// // Render deadlines
// // function renderDeadlines(deadlines) {
// //   const list = document.getElementById("deadline-list");
// //   list.innerHTML = "";


// function renderDeadlines(deadlines) {
//   const list = document.getElementById("deadline-list");
//   list.innerHTML = "";

//   if (deadlines.length === 0) {
//     list.innerHTML = "<p>No deadlines found</p>";
//     return;
//   }

//   deadlines.forEach(d => {
//     const item = document.createElement("div");

//     // Priority
//     let priorityClass = "safe";
//     if (d.due) {
//       const due = new Date(d.due);
//       const now = new Date();
//       const diffDays = (due - now) / (1000 * 60 * 60 * 24);
//       if (diffDays < 1) priorityClass = "urgent";
//       else if (diffDays < 3) priorityClass = "soon";
//     }

//     item.className = `deadline-card ${priorityClass}`;
//     item.innerHTML = `
//       <h3>${d.title}</h3>
//       <p>Due: ${formatDate(d.due)}</p>
//     `;
//     list.appendChild(item);
//   });
// }


// // Fetchh  from backend
// async function fetchDeadlines() {
//   try {
//     const res = await fetch(`${API_BASE}/google/all`);
//     const data = await res.json();
//     renderDeadlines(data);
//   } catch (err) {
//     console.error("❌ Error fetching deadlines:", err);
//     document.getElementById("deadline-list").innerHTML = "<p>Error loading deadlines</p>";
//   }
// }

// // Auto-fetch when page loads
// fetchDeadlines();

const API_BASE = "http://127.0.0.1:8000/api/deadlines";

function formatDate(dateStr) {
  const date = new Date(dateStr);
  return isNaN(date) ? "No Due Date" : date.toLocaleString();
}

function renderDeadlines(active, missed) {
  const activeList = document.getElementById("deadline-list");
  const missedList = document.getElementById("missed-deadline-list");

  activeList.innerHTML = "";
  missedList.innerHTML = "";

  // Active deadlines
  if (active.length === 0) {
    activeList.innerHTML = "<p>No upcoming deadlines 🎉</p>";
  } else {
    active.forEach(d => {
      const item = document.createElement("div");

      // Priority class
      let priorityClass = "safe";
      if (d.due) {
        const due = new Date(d.due);
        const now = new Date();
        const diffDays = (due - now) / (1000 * 60 * 60 * 24);
        if (diffDays < 1) priorityClass = "urgent";    // orange
        else if (diffDays < 3) priorityClass = "soon"; // yellow
      }

      item.className = `deadline-card ${priorityClass}`;
      item.innerHTML = `
        <h3>${d.title}</h3>
        <p>Due: ${formatDate(d.due)}</p>
      `;
      activeList.appendChild(item);
    });
  }

  // Missed deadlines
  if (missed.length === 0) {
    missedList.innerHTML = "<p>No missed deadlines ✅</p>";
  } else {
    missed.forEach(d => {
      const item = document.createElement("div");
      item.className = "deadline-card missed";
      item.innerHTML = `
        <h3>${d.title}</h3>
        <p>Was due: ${formatDate(d.due)}</p>
      `;
      missedList.appendChild(item);
    });
  }
}

async function fetchDeadlines() {
  try {
    const res = await fetch(`${API_BASE}/google/all`);
    let data = await res.json();

    const now = new Date();

    // Separate active vs missed
    const active = data
      .filter(d => !d.due || new Date(d.due) >= now)
      .sort((a, b) => {
        if (!a.due) return 1;
        if (!b.due) return -1;
        return new Date(a.due) - new Date(b.due);
      });

    const missed = data
      .filter(d => d.due && new Date(d.due) < now)
      .sort((a, b) => new Date(b.due) - new Date(a.due)); // latest missed first

    renderDeadlines(active, missed);
  } catch (err) {
    console.error("❌ Error fetching deadlines:", err);
    document.getElementById("deadline-list").innerHTML = "<p>Error loading deadlines</p>";
  }
}

// Auto-fetch when page loads
fetchDeadlines();