Mark homework as done (timetable)

icons/pipa.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><g fill="#A7DC22"><path d="M19.707 6.293a1 1 0 0 1 0 1.414l-10 10a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414L9 15.586l9.293-9.293a1 1 0 0 1 1.414 0z"/></g></svg>

timetable/timetable.css

@@ -870,6 +870,99 @@ body {
   margin-bottom:0;
 }
 
+.homework-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.homework-header h4 {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.homework-completion-header-btn {
+  background: transparent;
+  border: 2px solid var(--border-color);
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  opacity: 0.6;
+}
+
+.homework-completion-header-btn:hover {
+  opacity: 1;
+  border-color: var(--accent-accent);
+  background: var(--background-hover);
+}
+
+.homework-completion-header-btn.completed {
+  background: var(--success-color, #4caf50);
+  border-color: var(--success-color, #4caf50);
+  opacity: 1;
+}
+
+.homework-completion-header-btn.completed:hover {
+  background: var(--success-color-hover, #45a049);
+  border-color: var(--success-color-hover, #45a049);
+}
+
+.homework-completion-header-btn img {
+  filter: var(--icon-filter, none);
+}
+
+.homework-completion-header-btn.completed img {
+  filter: brightness(0) invert(1);
+}
+
+.homework-completion {
+  margin-top:15px;
+  text-align:center;
+}
+
+.homework-completion-btn {
+  background:var(--background-secondary);
+  border:2px solid var(--border-color);
+  color:var(--text-primary);
+  padding:10px 20px;
+  border-radius:8px;
+  cursor:pointer;
+  font-size:14px;
+  font-weight:500;
+  transition:all 0.2s ease;
+  display:inline-flex;
+  align-items:center;
+  gap:8px;
+}
+
+.homework-completion-btn:hover {
+  background:var(--background-hover);
+  border-color:var(--accent-accent);
+}
+
+.homework-completion-btn.completed {
+  background:var(--success-background, #e8f5e8);
+  border-color:var(--success-color, #4caf50);
+  color:var(--success-color, #4caf50);
+}
+
+.homework-completion-btn.completed:hover {
+  background:var(--success-background-hover, #d4edda);
+}
+
+.homework-completion-btn span {
+  font-size:16px;
+  font-weight:bold;
+}
+
 .test-details p {
   margin:0.5rem 0;
   line-height:1.4;

timetable/timetable.js

@@ -1,4 +1,56 @@
 (() => {
+  function getCompletedHomework() {
+    if (typeof cookieManager !== 'undefined') {
+      try {
+        const value = cookieManager.get('completedHomework');
+        if (value) {
+          return JSON.parse(value);
+        }
+      } catch (e) {
+        return [];
+      }
+    }
+    return [];
+  }
+
+  function saveCompletedHomework(completedList) {
+    if (typeof cookieManager !== 'undefined') {
+      cookieManager.set('completedHomework', JSON.stringify(completedList), 365);
+    }
+  }
+
+  function toggleHomeworkCompletion(lessonId) {
+    const completed = getCompletedHomework();
+    const index = completed.indexOf(lessonId);
+    
+    if (index > -1) {
+      completed.splice(index, 1);
+    } else {
+      completed.push(lessonId);
+    }
+    
+    saveCompletedHomework(completed);
+    return index === -1;
+  }
+
+  function isHomeworkCompleted(lessonId) {
+    return getCompletedHomework().includes(lessonId);
+  }
+
+  function updateHomeworkIconsFromCookie() {
+    const completedHomework = getCompletedHomework();
+    completedHomework.forEach(lessonId => {
+      const lessonCards = document.querySelectorAll(`[data-lesson-id="${lessonId}"]`);
+      lessonCards.forEach(card => {
+        const homeworkImg = card.querySelector('.homework-indicator img');
+        if (homeworkImg) {
+          homeworkImg.src = chrome.runtime.getURL('icons/pipa.svg');
+          homeworkImg.alt = 'Megoldott házi feladat';
+        }
+      });
+    });
+  }
+
   async function loadHomeworkDetailsFromAPI(lessonId) {
     try {
       const timestamp = Date.now();
@@ -360,7 +412,8 @@
                 <div class="lesson-card ${lesson.isSubstituted ? "substituted" : ""} 
                                       ${lesson.isCancelled ? "cancelled" : ""}
                                       ${lesson.hasHomework ? "has-homework" : ""}"
-                     data-lesson='${JSON.stringify(lesson)}'>
+                     data-lesson='${JSON.stringify(lesson)}'
+                     data-lesson-id='${lesson.lessonId || ""}'>
                   <div class="lesson-subject">${lesson.subject}</div>
                   <div class="lesson-teacher">${lesson.teacher}</div>
                   <div class="lesson-bottom">
@@ -375,7 +428,7 @@
                         lesson.hasHomework
                           ? `
                         <span class="lesson-indicator homework-indicator" title="${LanguageManager.t("timetable.homework_indicator")}">
-                          <img src="${chrome.runtime.getURL("icons/homework.svg")}" alt="Házi feladat" style="width: 20px; height: 20px;">
+                          <img src="${chrome.runtime.getURL(lesson.lessonId && isHomeworkCompleted(lesson.lessonId) ? "icons/pipa.svg" : "icons/homework.svg")}" alt="${lesson.lessonId && isHomeworkCompleted(lesson.lessonId) ? 'Megoldott házi feladat' : 'Házi feladat'}" style="width: 20px; height: 20px;">
                         </span>
                       `
                           : ""
@@ -558,6 +611,9 @@
       const homeworkSection = document.createElement('div');
       homeworkSection.className = 'modal-section homework-section';
       
+      const homeworkHeader = document.createElement('div');
+      homeworkHeader.className = 'homework-header';
+      
       const homeworkH4 = document.createElement('h4');
       const homeworkIcon = document.createElement('img');
       homeworkIcon.src = chrome.runtime.getURL('icons/homework.svg');
@@ -567,6 +623,40 @@
       homeworkH4.appendChild(homeworkIcon);
       homeworkH4.appendChild(document.createTextNode(LanguageManager.t('timetable.homework_indicator')));
       
+      homeworkHeader.appendChild(homeworkH4);
+      
+      if (lesson.lessonId) {
+        const completionBtn = document.createElement('button');
+        completionBtn.className = 'homework-completion-header-btn';
+        
+        const isCompleted = isHomeworkCompleted(lesson.lessonId);
+        const checkIcon = document.createElement('img');
+        checkIcon.src = chrome.runtime.getURL('icons/pipa.svg');
+        checkIcon.alt = 'Megoldva';
+        checkIcon.style.width = '16px';
+        checkIcon.style.height = '16px';
+        
+        completionBtn.appendChild(checkIcon);
+        completionBtn.classList.toggle('completed', isCompleted);
+        completionBtn.title = isCompleted ? 'Megoldva - kattints a visszavonáshoz' : 'Megoldottként jelöl';
+        
+        completionBtn.addEventListener('click', () => {
+          const nowCompleted = toggleHomeworkCompletion(lesson.lessonId);
+          completionBtn.classList.toggle('completed', nowCompleted);
+          completionBtn.title = nowCompleted ? 'Megoldva - kattints a visszavonáshoz' : 'Megoldottként jelöl';
+          const lessonCards = document.querySelectorAll(`[data-lesson-id="${lesson.lessonId}"]`);
+          lessonCards.forEach(card => {
+            const homeworkImg = card.querySelector('.homework-indicator img');
+            if (homeworkImg) {
+              homeworkImg.src = chrome.runtime.getURL(nowCompleted ? 'icons/pipa.svg' : 'icons/homework.svg');
+              homeworkImg.alt = nowCompleted ? 'Megoldott házi feladat' : 'Házi feladat';
+            }
+          });
+        });
+        
+        homeworkHeader.appendChild(completionBtn);
+      }
+      
       const homeworkContent = document.createElement('div');
       homeworkContent.className = 'homework-content';
 
@@ -606,6 +696,7 @@
             homeworkContent.appendChild(noDetailsP);
           }
           
+          
           const moreLink = document.createElement('a');
           moreLink.href = `https://${window.location.hostname}/Tanulo/TanuloHaziFeladat`;
           moreLink.className = 'more-link';
@@ -685,7 +776,7 @@
         homeworkContent.appendChild(moreLink);
       }
       
-      homeworkSection.appendChild(homeworkH4);
+      homeworkSection.appendChild(homeworkHeader);
       homeworkSection.appendChild(homeworkContent);
       body.appendChild(homeworkSection);
     }
@@ -1474,6 +1565,9 @@
       
       timetableContainer.appendChild(timetableGrid);
       
+      setTimeout(() => {
+        updateHomeworkIconsFromCookie();
+      }, 100);
   
       main.appendChild(weekControls);
       main.appendChild(weekModal);
@@ -1629,6 +1723,10 @@
             timetableContainer.appendChild(tempDiv.firstChild);
           }
           setupLessonCardListeners();
+          
+          setTimeout(() => {
+            updateHomeworkIconsFromCookie();
+          }, 100);
         }
       })
       .catch((error) => {