+ 
+ 
+ 
+
+ ${this.createGradeCard()}
+ ${this.createAbsenceCard()}
+ ${this.createNoteCard()}
+ ${this.createExamCard()}
+ ${this.createNewsCard()}
+
+
+ 
+
Firka extension
+ + ++ Modern, testre szabható felhasználói felület az e-KRÉTA rendszerhez +
+ + + + + +## 📱 Funkciók + +- **Modern Dizájn**: Teljesen újratervezett, modern felhasználói felület +- **Személyre Szabható Témák**: Világos és sötét mód vagy akár egyedi témáddal +- **Továbbfejlesztett Felületek**: + - Átdolgozott bejelentkezési képernyő + - Átláthatóbb jegynapló + - Modernizált órarend + - Fejlett hiányzás kezelés + - Egyszerűsített szerepkör választó + - Új kezdőlap elrendezés + +## 🚀 Telepítés + +1. Töltsd le a legfrissebb verziót a fenti gombok segítségével a böngésződnek megfelelően. + +## ⚙️ Beállítások + +A bővítmény beállításait a böngésző eszköztárán található Firka ikonra kattintva érheted el. Itt módosíthatod: + +- A felület témáját, legyen az világos, sötét vagy akár egyedi témáddal. + +## 💡 Támogatott Oldalak + +A bővítmény jelenleg az alábbi e-KRÉTA oldalakat támogatja: + +- Bejelentkezés +- Kijelentkezés +- Szerepkörválasztó +- Órarend (Házi feladatok, Számonkérések) +- Faliújság +- Hiányzások +- Jegyek +- Intézménykereső +- Üzenetek +- Profil (Béta) + +## 👥 Csapat + +- **[Zan1456](https://github.com/Zan1456)** - Vezető Fejlesztő +- **[Xou](https://yoursit.ee/xou)** - Designer + +## 🤝 Közreműködés + +Örömmel fogadunk minden fejlesztési javaslatot és hibajelentést! Ha szeretnél hozzájárulni a projekthez: + +1. Fork-old a repository-t +2. Hozz létre egy új branch-et a fejlesztésednek +3. Commit-old a változtatásaidat +4. Push-old a branch-et +5. Nyiss egy Pull Request-et + +## 📝 Licensz + +A projekt [GNU Affero General Public License v3.0](LICENSE) alatt jelent meg. További információért lásd a LICENSE fájlt. + +## 💬 Kapcsolat + +- Discord: [discord.gg/6DvjyPAw2T](https://discord.gg/6DvjyPAw2T) +- GitHub: [QwIT-Development](https://github.com/QwIT-Development/) + +--- + ++ Készült ❤️-vel diákoktól diákoknak +
diff --git a/firka/absences/absences.css b/firka/absences/absences.css new file mode 100644 index 0000000..747bd52 --- /dev/null +++ b/firka/absences/absences.css @@ -0,0 +1,485 @@ +* { + box-sizing:border-box; + margin:0; + padding:0; +} +body { + margin:0; + padding:0; + color:var(--text-primary); + background-color:var(--background) !important; + font-family:"Montserrat",serif !important; + min-height:100vh; + font-size:16px; +} +@media (max-width:768px) { + body { + font-size:14px; +} +}.kreta-container { + min-height:100vh; + display:flex; + flex-direction:column; +} +.kreta-header { + padding:clamp(1rem,3vw,2rem); + display:grid; + grid-template-columns:minmax(300px,400px) 1fr minmax(200px,300px); + align-items:center; + gap:1rem; +} +@media (max-width:1200px) { + .kreta-header { + grid-template-columns:minmax(250px,350px) 1fr minmax(180px,250px); +} +}@media (max-width:768px) { + .kreta-header { + grid-template-columns:1fr auto auto; + grid-template-areas:"school toggle user" + "nav nav nav"; + padding:1rem; + gap:0.5rem; +} +}.school-info { + margin:0; +} +@media (max-width:768px) { + .school-info { + grid-area:school; + max-width:none; + display:flex; + align-items:center; + gap:0.5rem; +} +}.logo-text { + color:var(--text-primary); + font-size:24px; + font-weight:600; + margin:0 0 0.5rem; + display:flex; + align-items:center; +} +@media (max-width:768px) { + .logo-text { + margin:0; + font-size:20px; +} +}.logo { + width:24px; + border-radius:8px; + margin-right:0.5rem; +} +.school-details { + color:var(--text-secondary); + font-size:14px; +} +.school-details span { + display:block; + white-space:nowrap; + overflow:hidden; + text-overflow:ellipsis; + max-width:300px; +} +@media (max-width:768px) { + .school-details span { + max-width:200px; +} +.school-details { + font-size:12px; +} +}.user-profile { + position:relative; + justify-self:flex-end; +} +@media (max-width:768px) { + .user-profile { + grid-area:user; +} +}.user-dropdown-btn { + display:flex; + align-items:center; + gap:1rem; + background:none; + border:none; + cursor:pointer; + padding:0.5rem; + border-radius:8px; + transition:background-color 0.2s; +} +.user-dropdown-btn:hover { + background:var(--card-card); +} +.user-info { + text-align:right; +} +.user-dropdown { + position:absolute; + top:100%; + right:0; + margin-top:0.5rem; + background:var(--card-card); + border-radius:12px; + box-shadow:0 4px 6px -1px rgba(0,0,0,0.1); + width:200px; + display:none; + z-index:1000; +} +.user-dropdown.show { + display:block; + animation:dropdownShow 0.2s ease; +} +.dropdown-item { + display:flex; + align-items:center; + gap:0.75rem; + padding:0.75rem 1rem; + color:var(--text-primary); + text-decoration:none; + transition:background-color 0.2s; +} +.dropdown-item:hover { + background:var(--button-secondaryFill); + text-decoration:none; +} +.kreta-main { + flex:1; + padding:clamp(1rem,3vw,2rem); + max-width:1200px; + margin:0 auto; + width:100%; +} +.filter-card { + background:var(--card-card); + border-radius:24px; + padding:20px; + margin-bottom:24px; + box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow); +} +.filter-header { + margin-bottom:16px; +} +.filter-header h2 { + font-size:18px; + font-weight:600; + color:var(--text-primary); + background-color:var(--card-card); +} +.filter-content { + display:grid; + grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); + gap:16px; +} +.filter-group { + display:flex; + flex-direction:column; + gap:8px; +} +.filter-group label { + display:flex; + align-items:center; + gap:8px; + color:var(--text-secondary); + font-size:14px; +} +.filter-input { + padding:10px; + border:none; + border-radius:8px; + background:var(--button-secondaryFill); + color:var(--text-primary); + font-family:inherit; + font-size:14px; + transition:all 0.2s ease; +} +.filter-input:focus { + outline:none; + box-shadow:0 0 0 2px var(--accent-accent); +} +.stats-overview { + display:grid; + grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); + gap:16px; + margin-bottom:24px; +} +.stat-card { + background:var(--card-card); + border-radius:16px; + padding:20px; + text-align:center; + box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow); + transition:transform 0.2s ease; +} +.stat-card:hover { + transform:translateY(-2px); +} +.stat-number { + font-size:32px; + font-weight:700; + color:var(--accent-accent); + margin-bottom:8px; +} +.stat-label { + color:var(--text-secondary); + font-size:14px; + font-weight:500; +} +.absences-container { + background:var(--card-card); + border-radius:16px; + overflow:hidden; + box-shadow:0px 1px var(--shadow-blur) 0px var(--accent-shadow); +} +.absences-table { + width:100%; + border-collapse:collapse; +} +.table-header { + background:var(--accent-15); + border-bottom:1px solid var(--accent-30); +} +.table-header th { + padding:16px; + text-align:left; + font-weight:600; + color:var(--text-primary); + font-size:14px; + text-transform:uppercase; + letter-spacing:0.5px; +} +.table-row { + border-bottom:1px solid var(--accent-15); + transition:background-color 0.2s ease; +} +.table-row:hover { + background:var(--accent-10); +} +.table-row:last-child { + border-bottom:none; +} +.table-cell { + padding:16px; + color:var(--text-primary); + vertical-align:middle; +} +.date-cell { + font-weight:600; + color:var(--accent-accent); +} +.lesson-cell { + text-align:center; + font-weight:500; +} +.subject-cell { + font-weight:600; +} +.topic-cell { + color:var(--text-secondary); + font-size:14px; + max-width:200px; + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap; +} +.status-cell { + text-align:center; +} +.status-badge { + display:inline-flex; + align-items:center; + gap:4px; + padding:6px 12px; + border-radius:20px; + font-size:12px; + font-weight:600; + text-transform:uppercase; + letter-spacing:0.5px; +} +.status-badge.justified { + background:var(--grades-4-bg); + color:var(--grades-4); +} +.status-badge.unjustified { + background:var(--grades-1-bg); + color:var(--grades-1); +} +.status-badge.pending { + background:var(--grades-3-bg); + color:var(--grades-3); +} +@media (max-width:768px) { + .absences-table { + font-size:14px; +} +.table-header th,.table-cell { + padding:12px 8px; +} +.topic-cell { + max-width:120px; +} +.stats-overview { + grid-template-columns:repeat(2,1fr); +} +}@media (max-width:480px) { + .absences-table,.table-header,.table-row { + display:block; +} +.table-header { + display:none; +} +.date-group { + margin-bottom:24px; +} +.date-group-header { + background:var(--accent-accent); + color:white; + padding:12px 16px; + border-radius:12px 12px 0 0; + font-weight:600; + font-size:16px; + margin-bottom:0; +} +.date-group-content { + background:var(--card-card); + border:1px solid var(--accent-15); + border-radius:0 0 12px 12px; + overflow:hidden; +} +.table-row { + width:100%; + margin-bottom:0; + border:none; + border-bottom:1px solid var(--accent-15); + border-radius:0; + padding:16px; + background:transparent; +} +.table-row:last-child { + border-bottom:none; +} +.table-cell { + display:flex; + justify-content:space-between; + align-items:flex-start; + padding:6px 0; + border-bottom:1px solid var(--accent-15); +} +.table-cell:last-child { + border-bottom:none; +} +.table-cell::before { + content:attr(data-label); + font-weight:600; + color:var(--text-secondary); + font-size:12px; + text-transform:uppercase; + flex-shrink:0; +} +.topic-cell { + max-width:none; + white-space:normal; + text-overflow:initial; + overflow:visible; + text-align:right; + flex:1; +} +.stats-overview { + grid-template-columns:1fr; +} +}.absence-details { + display:flex; + flex-direction:column; + gap:4px; +} +.absence-subject { + font-weight:600; + color:var(--text-primary); +} +.absence-topic { + color:var(--text-secondary); + font-size:14px; +} +.absence-status { + display:flex; + align-items:center; + gap:4px; + font-size:14px; + font-weight:500; +} +.absence-status.justified { + color:var(--grades-4); +} +.absence-status.unjustified { + color:var(--grades-1); +} +.absence-status.pending { + color:var(--grades-3); +} +.loading-overlay { + position:fixed; + top:0; + left:0; + width:100%; + height:100%; + background:var(--background); + display:flex; + flex-direction:column; + align-items:center; + justify-content:center; + z-index:9999; +} +.loading-container { + display:flex; + flex-direction:column; + align-items:center; + gap:1rem; + padding:2rem; + border-radius:24px; +} +.loading-text { + color:var(--Text-Primary); + text-align:center; + font-family:Montserrat; + font-size:20px; + font-style:normal; + font-weight:700; + line-height:normal; +} +.loading-text2 { + align-self:stretch; + color:var(--Text-Secondary); + text-align:center; + font-family:Figtree; + font-size:16px; + font-style:normal; + font-weight:500; + line-height:130%; +} +.loading-logo { + width:48px; + height:48px; + margin-bottom:1rem; + border-radius:8px; +} +@keyframes fadeIn { + from { + opacity:0; + transform:translateY(-10px); +} +to { + opacity:1; + transform:translateY(0); +} +}@keyframes dropdownShow { + from { + opacity:0; + transform:translateY(-10px); +} +to { + opacity:1; + transform:translateY(0); +} +}@keyframes spin { + to { + transform:rotate(360deg); +} +} \ No newline at end of file diff --git a/firka/absences/absences.js b/firka/absences/absences.js new file mode 100644 index 0000000..0729a96 --- /dev/null +++ b/firka/absences/absences.js @@ -0,0 +1,638 @@ +async function collectAbsencesData() { + const basicData = { + schoolInfo: { + name: await storageManager.get("schoolName", "OM azonosító - Iskola neve"), + id: await storageManager.get("schoolCode", ""), + }, + userData: { + name: await storageManager.get("userName", "Felhasználónév"), + time: + document.querySelector(".usermenu_timer")?.textContent?.trim() || + "45:00", + }, + }; + + try { + const currentDomain = window.location.hostname; + const response = await fetch( + `https://${currentDomain}/api/HianyzasokApi/GetHianyzasGrid?sort=MulasztasDatum-desc&page=1&pageSize=100&group=&filter=&data=%7B%7D&_=${Date.now()}`, + { + method: "GET", + credentials: "include", + headers: { + Accept: "application/json, text/javascript, */*; q=0.01", + "X-Requested-With": "XMLHttpRequest", + }, + }, + ); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const apiData = await response.json(); + const absences = []; + + if (apiData.Data && Array.isArray(apiData.Data)) { + apiData.Data.forEach((item) => { + const date = new Date(item.MulasztasDatum); + const formattedDate = `${date.getFullYear()}.${(date.getMonth() + 1).toString().padStart(2, "0")}.${date.getDate().toString().padStart(2, "0")}.`; + + let justificationStatus = "pending"; + if (item.Igazolt_BOOL === true) { + justificationStatus = "justified"; + } else if (item.Igazolt_BOOL === false && item.IgazolasTipus !== null) { + justificationStatus = "unjustified"; + } + + absences.push({ + date: formattedDate, + lesson: item.Oraszam?.toString() || "", + subject: item.Targy || "", + topic: item.Tema || "", + type: item.MulasztasTipus_DNAME || "", + justified: item.Igazolt_BOOL === true, + justificationStatus: justificationStatus, + purposeful: item.TanoraiCeluMulasztas_BNAME || "", + justificationType: item.IgazolasTipus_DNAME || "", + }); + }); + } + + const groupedAbsences = {}; + absences.forEach((absence) => { + if (!groupedAbsences[absence.date]) { + groupedAbsences[absence.date] = []; + } + groupedAbsences[absence.date].push(absence); + }); + + return { basicData, absences, groupedAbsences }; + } catch (error) { + console.error("Hiba az API hívás során:", error); + return { basicData, absences: [], groupedAbsences: {} }; + } +} + +function createFilterCard(absences) { + const filterCard = document.createElement('div'); + filterCard.className = 'filter-card'; + + const filterHeader = document.createElement('div'); + filterHeader.className = 'filter-header'; + const h2 = document.createElement('h2'); + h2.textContent = LanguageManager.t('absences.filter_title'); + filterHeader.appendChild(h2); + + const filterContent = document.createElement('div'); + filterContent.className = 'filter-content'; + + const dateGroup = createFilterGroup( + 'Calendar.svg', + 'Dátum', + LanguageManager.t('absences.date'), + 'input', + { type: 'date', id: 'dateFilter', className: 'filter-input' } + ); + filterContent.appendChild(dateGroup); + + const subjectGroup = createSubjectFilterGroup(absences); + filterContent.appendChild(subjectGroup); + + const justificationGroup = createJustificationFilterGroup(); + filterContent.appendChild(justificationGroup); + + filterCard.appendChild(filterHeader); + filterCard.appendChild(filterContent); + + return filterCard; +} + +function createFilterGroup(iconName, altText, labelText, elementType, attributes) { + const group = document.createElement('div'); + group.className = 'filter-group'; + + const label = document.createElement('label'); + const img = document.createElement('img'); + img.src = chrome.runtime.getURL(`icons/${iconName}`); + img.alt = altText; + img.style.width = '24px'; + img.style.height = '24px'; + + label.appendChild(img); + label.appendChild(document.createTextNode(' ' + labelText)); + + const element = document.createElement(elementType); + Object.assign(element, attributes); + + group.appendChild(label); + group.appendChild(element); + + return group; +} + +function createSubjectFilterGroup(absences) { + const group = document.createElement('div'); + group.className = 'filter-group'; + + const label = document.createElement('label'); + const img = document.createElement('img'); + img.src = chrome.runtime.getURL('icons/Subject.svg'); + img.alt = 'Tantárgy'; + img.style.width = '24px'; + img.style.height = '24px'; + + label.appendChild(img); + label.appendChild(document.createTextNode(' ' + LanguageManager.t('absences.subject'))); + + const select = document.createElement('select'); + select.id = 'subjectFilter'; + select.className = 'filter-input'; + + const defaultOption = document.createElement('option'); + defaultOption.value = ''; + defaultOption.textContent = LanguageManager.t('absences.all_subjects'); + select.appendChild(defaultOption); + + const subjects = [...new Set(absences.map(a => a.subject))].sort(); + subjects.forEach(subject => { + const option = document.createElement('option'); + option.value = subject; + option.textContent = subject; + select.appendChild(option); + }); + + group.appendChild(label); + group.appendChild(select); + + return group; +} + +function createJustificationFilterGroup() { + const group = document.createElement('div'); + group.className = 'filter-group'; + + const label = document.createElement('label'); + const img = document.createElement('img'); + img.src = chrome.runtime.getURL('icons/BadgeCheck.svg'); + img.alt = 'Igazolás'; + img.style.width = '24px'; + img.style.height = '24px'; + + label.appendChild(img); + label.appendChild(document.createTextNode(' ' + LanguageManager.t('absences.justification'))); + + const select = document.createElement('select'); + select.id = 'justificationFilter'; + select.className = 'filter-input'; + + const options = [ + { value: '', text: LanguageManager.t('absences.all_types') }, + { value: 'justified', text: LanguageManager.t('absences.justified') }, + { value: 'unjustified', text: LanguageManager.t('absences.unjustified') }, + { value: 'pending', text: LanguageManager.t('absences.pending') } + ]; + + options.forEach(optionData => { + const option = document.createElement('option'); + option.value = optionData.value; + option.textContent = optionData.text; + select.appendChild(option); + }); + + group.appendChild(label); + group.appendChild(select); + + return group; +} + +function createStatsOverview(absences) { + const statsOverview = document.createElement('div'); + statsOverview.className = 'stats-overview'; + + const stats = [ + { number: absences.length, label: LanguageManager.t('absences.total_absences') }, + { number: absences.filter(a => a.justificationStatus === 'justified').length, label: LanguageManager.t('absences.justified') }, + { number: absences.filter(a => a.justificationStatus === 'unjustified').length, label: LanguageManager.t('absences.unjustified') }, + { number: absences.filter(a => a.justificationStatus === 'pending').length, label: LanguageManager.t('absences.pending') } + ]; + + stats.forEach(stat => { + const statCard = document.createElement('div'); + statCard.className = 'stat-card'; + + const statNumber = document.createElement('div'); + statNumber.className = 'stat-number'; + statNumber.textContent = stat.number; + + const statLabel = document.createElement('div'); + statLabel.className = 'stat-label'; + statLabel.textContent = stat.label; + + statCard.appendChild(statNumber); + statCard.appendChild(statLabel); + statsOverview.appendChild(statCard); + }); + + return statsOverview; +} + +function createAbsencesContainer(absences) { + const container = document.createElement('div'); + container.className = 'absences-container'; + + const table = document.createElement('table'); + table.className = 'absences-table'; + + const thead = document.createElement('thead'); + thead.className = 'table-header'; + + const headerRow = document.createElement('tr'); + const headers = [ + LanguageManager.t('absences.date'), + LanguageManager.t('absences.lesson'), + LanguageManager.t('absences.subject'), + LanguageManager.t('absences.topic'), + LanguageManager.t('absences.status') + ]; + + headers.forEach(headerText => { + const th = document.createElement('th'); + th.textContent = headerText; + headerRow.appendChild(th); + }); + + thead.appendChild(headerRow); + + const tbody = document.createElement('tbody'); + generateAbsencesRows(absences, tbody); + + table.appendChild(thead); + table.appendChild(tbody); + container.appendChild(table); + + return container; +} + +async function transformAbsencesPage() { + const { basicData, absences, groupedAbsences } = await collectAbsencesData(); + document.body.textContent = ''; + const container = document.createElement('div'); + container.className = 'kreta-container'; + const headerDiv = document.createElement('div'); + const parser = new DOMParser(); + const doc = parser.parseFromString(await createTemplate.header(), 'text/html'); + const tempDiv = doc.body; + while (tempDiv.firstChild) { + headerDiv.appendChild(tempDiv.firstChild); + } + container.appendChild(headerDiv); + const main = document.createElement('main'); + main.className = 'kreta-main'; + const filterCard = createFilterCard(absences); + main.appendChild(filterCard); + const statsOverview = createStatsOverview(absences); + main.appendChild(statsOverview); + const absencesContainer = createAbsencesContainer(absences); + main.appendChild(absencesContainer); + + container.appendChild(main); + document.body.appendChild(container); + + + setupUserDropdown(); + setupMobileNavigation(); + + setupEventListeners(); + setupFilters(); + + loadingScreen.hide(); +} + +function generateAbsencesRows(absences, tbody) { + const groupedByDate = absences.reduce((groups, absence) => { + const date = absence.date; + if (!groups[date]) { + groups[date] = []; + } + groups[date].push(absence); + return groups; + }, {}); + + const sortedDates = Object.keys(groupedByDate).sort( + (a, b) => new Date(b) - new Date(a), + ); + + sortedDates.forEach((date) => { + const dateAbsences = groupedByDate[date]; + const divider = document.createElement('tr'); + divider.className = 'date-group-divider'; + divider.style.display = 'none'; + tbody.appendChild(divider); + + dateAbsences.forEach((absence) => { + const row = document.createElement('tr'); + row.className = 'table-row'; + row.dataset.subject = absence.subject; + row.dataset.justified = absence.justified; + row.dataset.date = absence.date; + row.dataset.dateGroup = date; + + const dateCell = document.createElement('td'); + dateCell.className = 'table-cell date-cell'; + dateCell.dataset.label = LanguageManager.t('absences.date'); + dateCell.textContent = absence.date; + row.appendChild(dateCell); + + const lessonCell = document.createElement('td'); + lessonCell.className = 'table-cell lesson-cell'; + lessonCell.dataset.label = LanguageManager.t('absences.lesson'); + lessonCell.textContent = absence.lesson + '.'; + row.appendChild(lessonCell); + + const subjectCell = document.createElement('td'); + subjectCell.className = 'table-cell subject-cell'; + subjectCell.dataset.label = LanguageManager.t('absences.subject'); + subjectCell.textContent = absence.subject; + row.appendChild(subjectCell); + + const topicCell = document.createElement('td'); + topicCell.className = 'table-cell topic-cell'; + topicCell.dataset.label = LanguageManager.t('absences.topic'); + topicCell.title = absence.topic; + topicCell.textContent = absence.topic; + row.appendChild(topicCell); + + const statusCell = document.createElement('td'); + statusCell.className = 'table-cell status-cell'; + statusCell.dataset.label = LanguageManager.t('absences.status'); + + const statusBadge = document.createElement('span'); + statusBadge.className = `status-badge ${absence.justificationStatus}`; + + if (absence.justificationStatus === 'justified') { + const img = document.createElement('img'); + img.src = chrome.runtime.getURL('icons/BadgeCheck.svg'); + img.alt = 'Igazolt'; + img.style.width = '16px'; + img.style.height = '16px'; + statusBadge.appendChild(img); + statusBadge.appendChild(document.createTextNode(' ' + LanguageManager.t('absences.justified'))); + } else if (absence.justificationStatus === 'unjustified') { + const span = document.createElement('span'); + span.className = 'material-icons-round'; + span.textContent = 'cancel'; + statusBadge.appendChild(span); + statusBadge.appendChild(document.createTextNode(' ' + LanguageManager.t('absences.unjustified'))); + } else { + const span = document.createElement('span'); + span.className = 'material-icons-round'; + span.textContent = 'pending'; + statusBadge.appendChild(span); + statusBadge.appendChild(document.createTextNode(' ' + LanguageManager.t('absences.pending'))); + } + + statusCell.appendChild(statusBadge); + row.appendChild(statusCell); + + tbody.appendChild(row); + }); + }); +} + +function setupEventListeners() { + function setupMobileGrouping() { + if (window.innerWidth <= 480) { + createMobileGroups(); + } else { + removeMobileGroups(); + } + } + + window.addEventListener("resize", setupMobileGrouping); + + setupMobileGrouping(); +} + +function createMobileGroups() { + const tbody = document.querySelector(".absences-table tbody"); + if (!tbody) return; + + removeMobileGroups(); + + const rows = Array.from(tbody.querySelectorAll(".table-row")); + const groupedRows = {}; + + rows.forEach((row) => { + const date = row.dataset.date; + if (!groupedRows[date]) { + groupedRows[date] = []; + } + groupedRows[date].push(row); + }); + + const sortedDates = Object.keys(groupedRows).sort( + (a, b) => new Date(b) - new Date(a), + ); + + while (tbody.firstChild) { + tbody.removeChild(tbody.firstChild); + } + + sortedDates.forEach((date) => { + const dateRows = groupedRows[date]; + + const dateGroup = document.createElement("div"); + dateGroup.className = "date-group"; + + const dateHeader = document.createElement("div"); + dateHeader.className = "date-group-header"; + dateHeader.textContent = date; + + const dateContent = document.createElement("div"); + dateContent.className = "date-group-content"; + + dateRows.forEach((row) => { + dateContent.appendChild(row); + }); + + dateGroup.appendChild(dateHeader); + dateGroup.appendChild(dateContent); + tbody.appendChild(dateGroup); + }); +} + +function removeMobileGroups() { + const tbody = document.querySelector(".absences-table tbody"); + if (!tbody) return; + + const dateGroups = tbody.querySelectorAll(".date-group"); + if (dateGroups.length === 0) return; + + const allRows = []; + dateGroups.forEach((group) => { + const rows = group.querySelectorAll(".table-row"); + rows.forEach((row) => allRows.push(row)); + }); + + while (tbody.firstChild) { + tbody.removeChild(tbody.firstChild); + } + allRows.forEach((row) => tbody.appendChild(row)); +} + +function updateDateGroupsVisibility() { + if (window.innerWidth > 480) return; + + const dateGroups = document.querySelectorAll(".date-group"); + + dateGroups.forEach((group) => { + const visibleRows = group.querySelectorAll( + '.table-row[style=""], .table-row:not([style])', + ); + + if (visibleRows.length > 0) { + group.style.display = ""; + } else { + group.style.display = "none"; + } + }); +} + +function setupFilters() { + try { + const filters = { + dateFilter: document.getElementById("dateFilter"), + subject: document.getElementById("subjectFilter"), + justified: document.getElementById("justificationFilter"), + }; + + if (!filters.dateFilter || !filters.subject || !filters.justified) { + console.warn("Some filter elements were not found in the DOM"); + return; + } + + const filterAbsences = () => { + try { + const dateFilterValue = filters.dateFilter.value; + const subject = filters.subject.value; + const justified = filters.justified.value; + const selectedDate = dateFilterValue ? new Date(dateFilterValue) : null; + + document.querySelectorAll(".table-row").forEach((row) => { + const dateStr = row.dataset.date; + const dateParts = dateStr.split("."); + + if (dateParts.length < 3) { + console.error(`Invalid date format: ${dateStr}`); + return; + } + + const parsedYear = parseInt(dateParts[0].trim(), 10); + const parsedMonth = parseInt(dateParts[1].trim(), 10) - 1; + const parsedDay = parseInt(dateParts[2].trim(), 10); + + if (isNaN(parsedDay) || isNaN(parsedMonth) || isNaN(parsedYear)) { + console.error(`Invalid date components: ${dateStr}`); + return; + } + + const rowDate = new Date(parsedYear, parsedMonth, parsedDay); + + let showRow = true; + + if (selectedDate) { + if ( + rowDate.getFullYear() !== selectedDate.getFullYear() || + rowDate.getMonth() !== selectedDate.getMonth() || + rowDate.getDate() !== selectedDate.getDate() + ) { + showRow = false; + } + } + + if (subject && row.dataset.subject !== subject) { + showRow = false; + } + + if (justified) { + const statusElement = row.querySelector(".status-badge"); + const hasStatus = statusElement.classList.contains(justified); + if (!hasStatus) showRow = false; + } + + row.style.display = showRow ? "" : "none"; + }); + + updateDateGroupsVisibility(); + updateStatistics(); + } catch (err) { + console.error("Error during filtering absences:", err); + } + }; + + Object.values(filters).forEach((filter) => { + try { + if (filter) { + filter.addEventListener("change", filterAbsences); + } + } catch (err) { + if ( + err.message && + err.message.includes("Extension context invalidated") + ) { + console.warn( + "Extension context invalidated during event listener setup", + ); + } else { + console.error("Error setting up filter event listener:", err); + } + } + }); + + filterAbsences(); + } catch (err) { + if (err.message && err.message.includes("Extension context invalidated")) { + console.warn("Extension context invalidated during filter setup"); + } else { + console.error("Error setting up filters:", err); + } + } +} + +function updateStatistics() { + try { + const visibleRows = document.querySelectorAll( + '.table-row:not([style*="display: none"])', + ); + const totalVisible = visibleRows.length; + const justifiedVisible = Array.from(visibleRows).filter((row) => + row.querySelector(".status-badge.justified"), + ).length; + const unjustifiedVisible = Array.from(visibleRows).filter((row) => + row.querySelector(".status-badge.unjustified"), + ).length; + const pendingVisible = Array.from(visibleRows).filter((row) => + row.querySelector(".status-badge.pending"), + ).length; + + const statCards = document.querySelectorAll(".stat-card"); + if (statCards[0]) + statCards[0].querySelector(".stat-number").textContent = totalVisible; + if (statCards[1]) + statCards[1].querySelector(".stat-number").textContent = justifiedVisible; + if (statCards[2]) + statCards[2].querySelector(".stat-number").textContent = + unjustifiedVisible; + if (statCards[3]) + statCards[3].querySelector(".stat-number").textContent = pendingVisible; + } catch (err) { + console.error("Error updating statistics:", err); + } +} + +if (window.location.href.includes("/Hianyzas/Hianyzasok")) { + transformAbsencesPage().catch((error) => { + console.error(LanguageManager.t("absences.page_transform_error"), error); + }); +} \ No newline at end of file diff --git a/firka/dashboard/dashboard.css b/firka/dashboard/dashboard.css new file mode 100644 index 0000000..ed105e7 --- /dev/null +++ b/firka/dashboard/dashboard.css @@ -0,0 +1,449 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + margin: 0; + padding: 0; + color: var(--text-primary); + background-color: var(--background) !important; + font-family: "Montserrat", serif !important; + min-height: 100vh; + font-size: 16px; +} + +h2 { + background-color: #00000000 !important; +} + +.kreta-container { + min-height: 100vh; + display: flex; + flex-direction: column; +} + + +.kreta-main { + flex: 1; + padding: clamp(1rem, 3vw, 2rem); + max-width: 1400px; + margin: 0 auto; + width: 100%; +} + +.grid-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); + gap: 20px; +} + +.widget-card { + background: var(--card-card); + border-radius: 24px; + overflow: hidden; + animation: fadeIn 0.5s ease forwards; + box-shadow: 0px 1px var(--shadow-blur, 2px) 0px var(--accent-shadow); + display: flex; + flex-direction: column; + height: 100%; + border: none; + min-height: 400px; +} + +.widget-header { + padding: 20px 20px 0 20px; + background: var(--card-card) !important; +} + +.widget-card-title { + font-size: 18px; + font-weight: 600; + color: var(--text-primary); + margin: 0; + padding-bottom: 16px; +} + +.widget-content { + flex: 1; + padding: 0 20px; + background: var(--card-card); + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.widget-footer { + padding: 0px 20px 20px 20px; + background: var(--card-card); +} + +.widget-link { + margin: 0; + padding: 0; +} + +.card h2 { + font-size: 18px; + font-weight: 600; + color: var(--text-primary); + margin: 0; + padding: 20px 0 16px 0; +} + +.card:last-child { + grid-column: 1 / -1; +} + +.widget-item { + border-radius: 12px; + transition: transform 0.2s ease, box-shadow 0.2s ease; + border: none; + background: var(--card-card); + display: flex; + flex-direction: column; + padding: 8px; + position: relative; + min-height: 80px; +} + +.widget-row { + display: flex; + align-items: flex-start; + justify-content: space-between; + width: 100%; + gap: 12px; + min-height: 40px; +} + +.widget-row.grade-row { + align-items: center; + justify-content: flex-start; +} + +.widget-details { + flex: 1; + display: flex; + flex-direction: column; + gap: 6px; + min-width: 0; +} + +.widget-details.grade-details { + flex: 1; + margin-right: auto; +} + +.widget-title { + color: var(--text-primary); + font-weight: 600; + font-size: 16px; + line-height: 1.3; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; + max-width: 100%; +} + +.widget-subtitle { + color: var(--text-secondary); + font-weight: 500; + font-size: 14px; + line-height: 1.2; + word-wrap: break-word; + overflow-wrap: break-word; +} + +.widget-content { + color: var(--text-secondary); + font-size: 14px; + line-height: 1.4; + margin-top: 4px; +} + +.widget-date { + color: var(--text-secondary); + font-size: 14px; + font-weight: 500; + white-space: nowrap; + text-align: right; + align-self: center; +} + +.grade-type-with-date { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + gap: 8px; +} + +.grade-type-with-date .grade-type { + flex: 1; + min-width: 0; +} + +.note-author { + color: var(--text-tertiary); + font-size: 12px; + font-weight: 400; + margin-top: 4px; + word-wrap: break-word; + overflow-wrap: break-word; +} + +.grade-date { + color: var(--text-secondary); + font-size: 13px; + font-weight: 400; + white-space: nowrap; + text-align: right; +} + +.widget-author { + color: var(--text-tertiary); + font-size: 12px; + font-weight: 400; + word-wrap: break-word; + overflow-wrap: break-word; + max-width: 100%; +} + +.news-author { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 4px; + text-align: right; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; + max-width: 200px; +} + +/* Mobile view: author below content */ +@media (max-width: 768px) { + .news-item .widget-row { + flex-direction: column; + align-items: stretch; + } + + .news-item .widget-meta { + order: 2; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 8px; + } + + .news-item .widget-details { + order: 1; + } + + .news-author { + align-items: center; + text-align: center; + max-width: 100%; + margin-top: 4px; + } + + .widget-date { + order: 1; + } + + .news-author { + order: 2; + } +} + +/* Desktop view: limit author width and wrap text */ +@media (min-width: 769px) { + .news-author { + max-width: 180px; + white-space: normal; + line-height: 1.3; + } +} + +.widget-empty { + color: var(--text-secondary); + font-style: italic; + text-align: center; + padding: 20px; +} + +.grade { + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 16px; + font-weight: 700; + margin-right: 1rem; + color: var(--text-primary); + font-size: 22px; +} + +.news-title { + font-size: 16px; + font-weight: 600; + margin-bottom: 8px; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; + line-height: 1.4; +} + +.news-content { + font-size: 14px; + line-height: 1.4; + color: var(--text-secondary); + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; +} + +.exam-type { + font-size: 12px; + font-weight: 500; + letter-spacing: 0.5px; +} + +.more-link { + margin-top: auto; + display: inline-flex; + align-items: center; + gap: 0.5rem; + color: var(--accent-accent); + text-decoration: none; + font-weight: 500; + padding-top: 16px; + transition: gap 0.2s ease; + font-size: clamp(0.875rem, 1.5vw, 1rem); +} +@media (hover: hover) { + .more-link:hover { + color: var(--accent-secondary); + gap: 0.75rem; + } +} +.more-link i { + font-size: 0.875rem; +} +.grade-1 {color: var(--grades-1); background-color: var(--grades-background-1);} +.grade-2 {color: var(--grades-2); background-color: var(--grades-background-2);} +.grade-3 {color: var(--grades-3); background-color: var(--grades-background-3);} +.grade-4 {color: var(--grades-4); background-color: var(--grades-background-4);} +.grade-5 {color: var(--grades-5); background-color: var(--grades-background-5);} +.grade-Sz {color: var(--grades-3); background-color: var(--grades-background-3);} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} +.user-profile { + position: relative; +} + +.user-dropdown-btn { + background: none; + border: none; + cursor: pointer; + padding: 8px; + display: flex; + align-items: center; + color: var(--text-primary); +} + +.user-dropdown { + position: absolute; + top: 100%; + right: 0; + background: var(--card-card); + border-radius: 12px; + box-shadow: 0 4px 12px var(--accent-shadow); + min-width: 200px; + display: none; + z-index: 1000; +} + +.user-dropdown.active { + display: block; +} + +.dropdown-item { + display: flex; + align-items: center; + gap: 8px; + padding: 12px 16px; + color: var(--text-primary); + text-decoration: none; + transition: background-color 0.2s ease; +} + +.dropdown-item:hover { + background-color: var(--accent-15); + text-decoration: none; +} + +.dropdown-item svg { + width: 20px; + height: 20px; +} + +.news-title { + font-size: 16px; + font-weight: 600; + margin-bottom: 8px; +} + +.news-content { + font-size: 14px; + line-height: 1.4; + color: var(--text-secondary); +} +.more-link { + margin-top: auto; + display: inline-flex; + align-items: center; + gap: 0.5rem; + color: var(--accent-accent); + text-decoration: none; + font-weight: 500; + padding-top: 16px; + transition: gap 0.2s ease; + font-size: clamp(0.875rem, 1.5vw, 1rem); +} +@media (hover: hover) { + .more-link:hover { + color: var(--accent-secondary); + gap: 0.75rem; + } +} +.more-link i { + font-size: 0.875rem; +} + +.exam-info { + display: flex; + gap: 8px; + margin-top: 4px; + color: var(--text-secondary); + font-size: 14px; +} + +.exam-info { + display: flex; + gap: 8px; + margin-top: 4px; + color: var(--text-secondary); + font-size: 14px; +} \ No newline at end of file diff --git a/firka/dashboard/dashboard.js b/firka/dashboard/dashboard.js new file mode 100644 index 0000000..fdedd2f --- /dev/null +++ b/firka/dashboard/dashboard.js @@ -0,0 +1,588 @@ +const DashboardUtils = { + formatGradeValue(value) { + const trimmedValue = value?.trim() || ""; + if (trimmedValue.toLowerCase() === "szöveges") { + return "Sz"; + } + return trimmedValue; + }, + + parseDate(dateStr) { + return dateStr?.trim() || ""; + }, + + formatHungarianDate(dateStr) { + if (!dateStr) return ""; + + const dateParts = dateStr.trim().split("."); + if (dateParts.length < 3) return dateStr; + + const month = parseInt(dateParts[1], 10); + const day = parseInt(dateParts[2], 10); + + if (isNaN(month) || month < 1 || month > 12) return dateStr; + + if (typeof window.LanguageManager !== "undefined") { + const monthKeys = [ + "months.january", + "months.february", + "months.march", + "months.april", + "months.may", + "months.june", + "months.july", + "months.august", + "months.september", + "months.october", + "months.november", + "months.december", + ]; + const monthName = window.LanguageManager.t(monthKeys[month - 1]); + return `${monthName} ${day}.`; + } + + const monthKeys = [ + "months.january", + "months.february", + "months.march", + "months.april", + "months.may", + "months.june", + "months.july", + "months.august", + "months.september", + "months.october", + "months.november", + "months.december", + ]; + + return `${LanguageManager.t(monthKeys[month - 1])} ${day}.`; + }, +}; + +class DashboardDataManager { + constructor() { + this.dashboardData = { + grades: [], + absences: [], + notes: [], + upcomingExams: [], + news: [], + }; + } + + extractGradeData() { + const gradeRows = document.querySelectorAll( + "#legutobbiErtekelesek tr:not(:first-child)", + ); + + this.dashboardData.grades = Array.from(gradeRows) + .map((row) => { + const gradeValue = row.querySelector( + 'span[style*="font-size: 200%"]', + )?.textContent; + const gradeInfo = row.querySelector( + 'span[style*="float: right"]', + )?.textContent; + + if (!gradeValue || !gradeInfo) return null; + + const [fullSubject, date] = gradeInfo + .split("\n") + .map((str) => str.trim()); + const { subject, type, dateInSubject } = + this.parseSubjectInformation(fullSubject); + + return { + value: DashboardUtils.formatGradeValue(gradeValue), + subject, + date: DashboardUtils.parseDate(date), + type: type || LanguageManager.t("dashboard.evaluation"), + dateInSubject: dateInSubject || null, + }; + }) + .filter(Boolean); + } + + parseSubjectInformation(fullSubject) { + const hungarianMonths = [ + "január", + "február", + "március", + "április", + "május", + "június", + "július", + "augusztus", + "szeptember", + "október", + "november", + "december", + ]; + const monthPattern = hungarianMonths.join("|"); + const datePattern = new RegExp(`(${monthPattern})\\s+(\\d{1,2})\\.?$`, "i"); + const dateMatch = fullSubject.match(datePattern); + + if (dateMatch) { + const subjectPart = fullSubject.substring(0, dateMatch.index).trim(); + const datePart = dateMatch[0].trim(); + return { + subject: subjectPart, + type: "", + dateInSubject: datePart, + }; + } + + const months = [ + LanguageManager.t("months.january"), + LanguageManager.t("months.february"), + LanguageManager.t("months.march"), + LanguageManager.t("months.april"), + LanguageManager.t("months.may"), + LanguageManager.t("months.june"), + LanguageManager.t("months.july"), + LanguageManager.t("months.august"), + LanguageManager.t("months.september"), + LanguageManager.t("months.october"), + LanguageManager.t("months.november"), + LanguageManager.t("months.december"), + ]; + const fallbackMonthPattern = new RegExp(months.join("|"), "i"); + const monthMatch = fullSubject.match(fallbackMonthPattern); + + if (monthMatch) { + const monthIndex = fullSubject.lastIndexOf(monthMatch[0]); + return { + subject: fullSubject.substring(0, monthIndex).trim(), + type: fullSubject.substring(monthIndex).trim(), + }; + } + + return { subject: fullSubject, type: "" }; + } + + extractAbsenceData() { + const absenceRows = document.querySelectorAll( + "#legutobbiMulasztasok tr:not(:first-child)", + ); + + this.dashboardData.absences = Array.from(absenceRows) + .map((row) => { + const spans = row.querySelectorAll("span"); + if (spans.length < 4) return null; + + return { + date: spans[0]?.textContent?.trim() || "", + day: spans[2]?.textContent?.trim() || "", + type: spans[1]?.textContent?.trim() || "", + count: spans[3]?.textContent?.trim() || "", + }; + }) + .filter(Boolean); + } + + extractNoteData() { + const noteRows = document.querySelectorAll( + "#legutobbiFeljegyzesek tr:not(:first-child)", + ); + + this.dashboardData.notes = Array.from(noteRows) + .map((row) => { + const spans = row.querySelectorAll("span"); + if (spans.length < 3) return null; + + return { + title: spans[0]?.textContent?.trim() || "", + author: spans[1]?.textContent?.trim() || "", + date: spans[2]?.textContent?.trim() || "", + }; + }) + .filter(Boolean); + } + + extractExamData() { + const examRows = document.querySelectorAll( + "#legutobbiBejelentettSzamonkeres tr:not(:first-child)", + ); + + this.dashboardData.upcomingExams = Array.from(examRows) + .map((row) => { + const spans = row.querySelectorAll("span"); + if (spans.length < 4) return null; + + return { + date: spans[0]?.textContent?.trim() || "", + subject: spans[1]?.textContent?.trim() || "", + day: spans[2]?.textContent?.trim() || "", + type: spans[3]?.textContent?.trim() || "", + }; + }) + .filter(Boolean); + } + + async extractNewsData() { + try { + const timestamp = Date.now(); + const apiUrl = `https://${window.location.hostname}/Intezmeny/Faliujsag/GetMoreEntries?startindex=0&range=10&_=${timestamp}`; + + const response = await fetch(apiUrl, { + method: "GET", + credentials: "include", + headers: { + Accept: "application/json, text/javascript, */*; q=0.01", + "X-Requested-With": "XMLHttpRequest", + }, + }); + + if (!response.ok) { + throw new Error(`API request failed with status: ${response.status}`); + } + + const data = await response.json(); + + if (!data.FaliujsagElemek || !Array.isArray(data.FaliujsagElemek)) { + return; + } + + data.FaliujsagElemek.forEach((item, index) => { + let formattedDate = ""; + if (item.DatumNap && item.DatumHonap && item.DatumEv) { + formattedDate = `${item.DatumEv}. ${item.DatumHonap} ${item.DatumNap}.`; + } else if (item.Idopont) { + const match = item.Idopont.match(/\/Date\((\d+)\)\//); + if (match) { + const timestamp = parseInt(match[1]); + const date = new Date(timestamp); + formattedDate = date.toLocaleDateString("hu-HU"); + } + } + + if (!formattedDate) { + formattedDate = new Date().toLocaleDateString("hu-HU"); + } + + let cleanContent = item.EsemenySzovege || ""; + cleanContent = cleanContent.replace(/<[^>]*>/g, ""); + cleanContent = cleanContent.replace(/\r\n/g, " "); + cleanContent = cleanContent.replace(/\s+/g, " ").trim(); + + const newsItem = { + title: item.EsemenyCime || `Hír ${index + 1}`, + content: cleanContent || "Nincs elérhető tartalom", + date: formattedDate, + author: `${item.Nev || "Ismeretlen"} (${item.Munkakor || "Ismeretlen"})`, + }; + + this.dashboardData.news.push(newsItem); + }); + } catch (error) { + console.error("❌ Error fetching news from API:", error); + } + } + + async extractAllData() { + this.extractGradeData(); + this.extractAbsenceData(); + this.extractNoteData(); + this.extractExamData(); + await this.extractNewsData(); + return this.dashboardData; + } +} + +class DashboardRenderer { + constructor(data) { + this.baseData = data; + } + + async init() { + this.data = { + ...this.baseData, + schoolInfo: { + name: + await storageManager.get("schoolName", "OM azonosító - Iskola neve"), + id: await storageManager.get("schoolCode", ""), + }, + userData: { + name: await storageManager.get("userName", "Felhasználónév"), + time: + document.querySelector(".usermenu_timer")?.textContent?.trim() || + "45:00", + }, + }; + this.schoolNameFull = `${this.data.schoolInfo.id} - ${this.data.schoolInfo.name}`; + this.shortenedSchoolName = helper.shortenSchoolName(this.schoolNameFull); + } + + generateMainContent() { + return ` +