diff --git a/homework/homework.css b/homework/homework.css
index a4de72d..ec34b6d 100644
--- a/homework/homework.css
+++ b/homework/homework.css
@@ -200,6 +200,108 @@ body {
background-color: var(--card-card);
}
+/* Checkbox oszlop stílusai */
+.checkbox-header {
+ width: 50px;
+ text-align: center;
+ font-size: 16px;
+}
+
+.checkbox-cell {
+ width: 50px;
+ text-align: center;
+ padding: 8px !important;
+}
+
+.homework-checkbox {
+ width: 20px;
+ height: 20px;
+ cursor: pointer;
+ appearance: none;
+ border: 2px solid var(--accent-30);
+ border-radius: 4px;
+ background-color: var(--card-card);
+ position: relative;
+ transition: all 0.2s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.homework-checkbox:hover {
+ border-color: var(--accent);
+ background-color: var(--accent-15);
+ transform: scale(1.05);
+}
+
+.homework-checkbox:checked {
+ background-color: var(--accent);
+ border-color: var(--accent);
+}
+
+.homework-checkbox:checked::after {
+ content: '✓';
+ color: white;
+ font-size: 14px;
+ font-weight: bold;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.homework-checkbox:focus {
+ outline: 2px solid var(--accent);
+ outline-offset: 2px;
+}
+
+.homework-checkbox:active {
+ transform: scale(0.95);
+}
+
+/* Megjelölt házi feladatok stílusai */
+.table-row.user-completed {
+ opacity: 0.6;
+ background-color: var(--accent-15) !important;
+}
+
+.table-row.user-completed .table-cell {
+ color: var(--text-secondary);
+}
+
+.table-row.user-completed .status-badge.completed {
+ background-color: var(--success);
+ color: white;
+}
+
+
+
+/* Mobil nézet checkbox stílusai */
+@media (max-width: 768px) {
+ .checkbox-header {
+ width: 40px;
+ font-size: 14px;
+ }
+
+ .checkbox-cell {
+ width: 40px;
+ padding: 6px !important;
+ }
+
+ .homework-checkbox {
+ width: 18px;
+ height: 18px;
+ }
+
+ .homework-checkbox:checked::after {
+ font-size: 12px;
+ }
+
+ .table-row.user-completed {
+ opacity: 0.7;
+ }
+}
+
.filter-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
diff --git a/homework/homework.js b/homework/homework.js
index 989974d..c01a2d2 100644
--- a/homework/homework.js
+++ b/homework/homework.js
@@ -119,17 +119,10 @@ function isTomorrow(dateStr) {
async function transformHomeworkPage() {
const { basicData, homeworkItems, groupedHomework } =
await collectHomeworkData();
-
- // Biztonságos DOM létrehozás innerHTML helyett
document.body.innerHTML = '';
-
- // Fő konténer létrehozása
const kretaContainer = document.createElement('div');
kretaContainer.className = 'kreta-container';
-
- // Header hozzáadása
const headerDiv = document.createElement('div');
- // Biztonságos HTML parsing DOMParser használatával
const parser = new DOMParser();
const headerDoc = parser.parseFromString(createTemplate.header(), 'text/html');
const headerContent = headerDoc.body;
@@ -137,12 +130,9 @@ async function transformHomeworkPage() {
headerDiv.appendChild(headerContent.firstChild);
}
kretaContainer.appendChild(headerDiv);
-
- // Main elem létrehozása
const main = document.createElement('main');
main.className = 'kreta-main';
-
- // Filter card létrehozása
+
const filterCard = document.createElement('div');
filterCard.className = 'filter-card';
@@ -154,8 +144,7 @@ async function transformHomeworkPage() {
const filterContent = document.createElement('div');
filterContent.className = 'filter-content';
-
- // Subject filter
+
const subjectGroup = document.createElement('div');
subjectGroup.className = 'filter-group';
const subjectLabel = document.createElement('label');
@@ -179,8 +168,7 @@ async function transformHomeworkPage() {
subjectGroup.appendChild(subjectLabel);
subjectGroup.appendChild(subjectSelect);
-
- // Teacher filter
+
const teacherGroup = document.createElement('div');
teacherGroup.className = 'filter-group';
const teacherLabel = document.createElement('label');
@@ -204,8 +192,7 @@ async function transformHomeworkPage() {
teacherGroup.appendChild(teacherLabel);
teacherGroup.appendChild(teacherSelect);
-
- // Deadline filter
+
const deadlineGroup = document.createElement('div');
deadlineGroup.className = 'filter-group';
const deadlineLabel = document.createElement('label');
@@ -236,8 +223,7 @@ async function transformHomeworkPage() {
filterCard.appendChild(filterHeader);
filterCard.appendChild(filterContent);
-
- // Stats overview
+
const statsOverview = document.createElement('div');
statsOverview.className = 'stats-overview';
statsOverview.id = 'statsOverview';
@@ -266,8 +252,7 @@ async function transformHomeworkPage() {
statCard.appendChild(statLabel);
statsOverview.appendChild(statCard);
});
-
- // Homework container
+
const homeworkContainer = document.createElement('div');
homeworkContainer.className = 'homework-container';
@@ -280,6 +265,7 @@ async function transformHomeworkPage() {
const headerRow = document.createElement('tr');
const headers = [
+ '✓',
LanguageManager.t('homework.due_date'),
LanguageManager.t('homework.subject'),
LanguageManager.t('homework.description'),
@@ -287,9 +273,12 @@ async function transformHomeworkPage() {
LanguageManager.t('homework.status')
];
- headers.forEach(headerText => {
+ headers.forEach((headerText, index) => {
const th = document.createElement('th');
th.textContent = headerText;
+ if (index === 0) {
+ th.className = 'checkbox-header';
+ }
headerRow.appendChild(th);
});
@@ -297,12 +286,9 @@ async function transformHomeworkPage() {
const tbody = document.createElement('tbody');
tbody.id = 'homeworkTableBody';
-
- // Biztonságos HTML tartalom hozzáadása
const homeworkHTML = generateHomeworkHTML(homeworkItems);
if (homeworkHTML.trim()) {
- // Biztonságos HTML parsing DOMParser használatával - table kontextusban
const parser = new DOMParser();
const doc = parser.parseFromString(``, 'text/html');
const tempTbody = doc.querySelector('tbody');
@@ -310,7 +296,6 @@ async function transformHomeworkPage() {
tbody.appendChild(tempTbody.firstChild);
}
} else {
- // Ha nincs házi feladat, üres sor hozzáadása
const emptyRow = document.createElement('tr');
const emptyCell = document.createElement('td');
emptyCell.colSpan = 5;
@@ -324,8 +309,7 @@ async function transformHomeworkPage() {
homeworkTable.appendChild(thead);
homeworkTable.appendChild(tbody);
homeworkContainer.appendChild(homeworkTable);
-
- // Összeállítás
+
main.appendChild(filterCard);
main.appendChild(statsOverview);
main.appendChild(homeworkContainer);
@@ -355,22 +339,30 @@ function generateHomeworkHTML(homeworkItems) {
return sortedHomework
.map((homework) => {
const isUrgent = isTomorrow(homework.deadline);
- const status = homework.completed
+ const isUserCompleted = getHomeworkCompletionStatus(homework.id);
+ const status = homework.completed || isUserCompleted
? "completed"
: isUrgent
? "urgent"
: "pending";
- const statusText = homework.completed
+ const statusText = homework.completed || isUserCompleted
? LanguageManager.t("homework.completed")
: isUrgent
? LanguageManager.t("homework.urgent")
: LanguageManager.t("homework.pending");
return `
-
+ data-deadline="${homework.deadline}"
+ data-homework-id="${homework.id}">
+ |
+
+ |
${homework.deadline} |
${homework.subject} |
${homework.description} |
@@ -503,19 +495,7 @@ function setupFilters(homeworkItems, groupedHomework) {
updateDateGroupsVisibility();
updateStatistics();
- };
-
- const resetFilters = () => {
- subjectFilter.value = "";
- teacherFilter.value = "";
- deadlineFilter.value = "";
-
- document.querySelectorAll(".table-row").forEach((row) => {
- row.style.display = "";
- });
-
- updateDateGroupsVisibility();
- updateStatistics();
+ setupHomeworkCheckboxes();
};
subjectFilter.addEventListener("change", applyFilters);
@@ -611,6 +591,8 @@ function createMobileGroups() {
dateGroup.appendChild(content);
tableBody.appendChild(dateGroup);
});
+
+ setupHomeworkCheckboxes();
}
function removeMobileGroups() {
@@ -627,6 +609,8 @@ function removeMobileGroups() {
tableBody.innerHTML = "";
allRows.forEach((row) => tableBody.appendChild(row));
+
+ setupHomeworkCheckboxes();
}
function updateDateGroupsVisibility() {
@@ -640,8 +624,89 @@ function updateDateGroupsVisibility() {
});
}
+function getHomeworkCompletionStatus(homeworkId) {
+ const completedHomework = cookieManager.get('completedHomework');
+ if (!completedHomework) return false;
+
+ try {
+ const completedList = JSON.parse(completedHomework);
+ return completedList.includes(homeworkId.toString());
+ } catch (error) {
+ console.error('Error parsing completed homework cookie:', error);
+ return false;
+ }
+}
+
+function setHomeworkCompletionStatus(homeworkId, isCompleted) {
+ let completedHomework = cookieManager.get('completedHomework');
+ let completedList = [];
+
+ if (completedHomework) {
+ try {
+ completedList = JSON.parse(completedHomework);
+ } catch (error) {
+ console.error('Error parsing completed homework cookie:', error);
+ completedList = [];
+ }
+ }
+
+ const homeworkIdStr = homeworkId.toString();
+
+ if (isCompleted) {
+ if (!completedList.includes(homeworkIdStr)) {
+ completedList.push(homeworkIdStr);
+ }
+ } else {
+ completedList = completedList.filter(id => id !== homeworkIdStr);
+ }
+
+ cookieManager.set('completedHomework', JSON.stringify(completedList));
+}
+
+function setupHomeworkCheckboxes() {
+ const checkboxes = document.querySelectorAll('.homework-checkbox');
+
+ checkboxes.forEach(checkbox => {
+ checkbox.addEventListener('change', function() {
+ const homeworkId = this.getAttribute('data-homework-id');
+ const isChecked = this.checked;
+ const row = this.closest('.table-row');
+ setHomeworkCompletionStatus(homeworkId, isChecked);
+
+ if (isChecked) {
+ row.classList.add('user-completed');
+ this.title = 'Megcsinált házi - kattints a visszaállításhoz';
+ } else {
+ row.classList.remove('user-completed');
+ this.title = 'Kattints a megjelöléshez';
+ }
+
+ const statusBadge = row.querySelector('.status-badge');
+ if (statusBadge) {
+ if (isChecked) {
+ statusBadge.className = 'status-badge completed';
+ statusBadge.textContent = LanguageManager.t('homework.completed');
+ } else {
+ const isUrgent = row.classList.contains('due-tomorrow');
+ if (isUrgent) {
+ statusBadge.className = 'status-badge urgent';
+ statusBadge.textContent = LanguageManager.t('homework.urgent');
+ } else {
+ statusBadge.className = 'status-badge pending';
+ statusBadge.textContent = LanguageManager.t('homework.pending');
+ }
+ }
+ }
+
+ updateStatistics();
+ });
+ });
+}
+
if (window.location.href.includes("/Tanulo/TanuloHaziFeladat")) {
- transformHomeworkPage().catch((error) => {
+ transformHomeworkPage().then(() => {
+ setupHomeworkCheckboxes();
+ }).catch((error) => {
console.error("Error transforming homework page:", error);
});
}