mirror of
https://github.com/QwIT-Development/firka-extension.git
synced 2026-06-12 03:41:39 +02:00
test
This commit is contained in:
Zan
@@ -1,551 +1,484 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
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;
|
||||
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) {
|
||||
@media (max-width:768px) {
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
.kreta-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}.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;
|
||||
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) {
|
||||
@media (max-width:1200px) {
|
||||
.kreta-header {
|
||||
grid-template-columns: minmax(250px, 350px) 1fr minmax(180px, 250px);
|
||||
}
|
||||
grid-template-columns:minmax(250px,350px) 1fr minmax(180px,250px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
}@media (max-width:768px) {
|
||||
.kreta-header {
|
||||
grid-template-columns: 1fr auto auto;
|
||||
grid-template-areas:
|
||||
"school toggle user"
|
||||
grid-template-columns:1fr auto auto;
|
||||
grid-template-areas:"school toggle user"
|
||||
"nav nav nav";
|
||||
padding: 1rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
padding:1rem;
|
||||
gap:0.5rem;
|
||||
}
|
||||
|
||||
.school-info {
|
||||
margin: 0;
|
||||
}.school-info {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width:768px) {
|
||||
.school-info {
|
||||
grid-area: school;
|
||||
max-width: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
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;
|
||||
}.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) {
|
||||
@media (max-width:768px) {
|
||||
.logo-text {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
margin:0;
|
||||
font-size:20px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 24px;
|
||||
border-radius: 8px;
|
||||
margin-right: 0.5rem;
|
||||
}.logo {
|
||||
width:24px;
|
||||
border-radius:8px;
|
||||
margin-right:0.5rem;
|
||||
}
|
||||
|
||||
.school-details {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
color:var(--text-secondary);
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
.school-details span {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 300px;
|
||||
display:block;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
max-width:300px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width:768px) {
|
||||
.school-details span {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.school-details {
|
||||
font-size: 12px;
|
||||
}
|
||||
max-width:200px;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
position: relative;
|
||||
justify-self: flex-end;
|
||||
.school-details {
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
}.user-profile {
|
||||
position:relative;
|
||||
justify-self:flex-end;
|
||||
}
|
||||
@media (max-width:768px) {
|
||||
.user-profile {
|
||||
grid-area: user;
|
||||
}
|
||||
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 {
|
||||
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);
|
||||
background:var(--card-card);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
text-align: right;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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);
|
||||
background:var(--button-secondaryFill);
|
||||
}
|
||||
|
||||
|
||||
.kreta-main {
|
||||
flex: 1;
|
||||
padding: clamp(1rem, 3vw, 2rem);
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
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);
|
||||
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;
|
||||
margin-bottom:16px;
|
||||
}
|
||||
|
||||
.filter-header h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
background-color: var(--card-card);
|
||||
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;
|
||||
display:grid;
|
||||
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
|
||||
gap:16px;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap:8px;
|
||||
}
|
||||
|
||||
.filter-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
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;
|
||||
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);
|
||||
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;
|
||||
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;
|
||||
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);
|
||||
transform:translateY(-2px);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: var(--accent-accent);
|
||||
margin-bottom: 8px;
|
||||
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;
|
||||
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);
|
||||
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;
|
||||
width:100%;
|
||||
border-collapse:collapse;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
background: var(--accent-15);
|
||||
border-bottom: 1px solid var(--accent-30);
|
||||
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;
|
||||
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;
|
||||
border-bottom:1px solid var(--accent-15);
|
||||
transition:background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.table-row:hover {
|
||||
background: var(--accent-10);
|
||||
background:var(--accent-10);
|
||||
}
|
||||
|
||||
.table-row:last-child {
|
||||
border-bottom: none;
|
||||
border-bottom:none;
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
padding: 16px;
|
||||
color: var(--text-primary);
|
||||
vertical-align: middle;
|
||||
padding:16px;
|
||||
color:var(--text-primary);
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
.date-cell {
|
||||
font-weight: 600;
|
||||
color: var(--accent-accent);
|
||||
font-weight:600;
|
||||
color:var(--accent-accent);
|
||||
}
|
||||
|
||||
.lesson-cell {
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
text-align:center;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.subject-cell {
|
||||
font-weight: 600;
|
||||
font-weight:600;
|
||||
}
|
||||
|
||||
.topic-cell {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color:var(--text-secondary);
|
||||
font-size:14px;
|
||||
max-width:200px;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
.status-cell {
|
||||
text-align: center;
|
||||
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;
|
||||
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);
|
||||
background:var(--grades-4-bg);
|
||||
color:var(--grades-4);
|
||||
}
|
||||
|
||||
.status-badge.unjustified {
|
||||
background: var(--grades-1-bg);
|
||||
color: var(--grades-1);
|
||||
background:var(--grades-1-bg);
|
||||
color:var(--grades-1);
|
||||
}
|
||||
|
||||
.status-badge.pending {
|
||||
background: var(--grades-3-bg);
|
||||
color: var(--grades-3);
|
||||
background:var(--grades-3-bg);
|
||||
color:var(--grades-3);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@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);
|
||||
}
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.absences-table,
|
||||
.table-header,
|
||||
.table-row {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid var(--accent-15);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
background: var(--card-card);
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 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;
|
||||
}
|
||||
|
||||
.stats-overview {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.table-header th,.table-cell {
|
||||
padding:12px 8px;
|
||||
}
|
||||
|
||||
.absence-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
.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);
|
||||
font-weight:600;
|
||||
color:var(--text-primary);
|
||||
}
|
||||
|
||||
.absence-topic {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
color:var(--text-secondary);
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
.absence-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
gap:4px;
|
||||
font-size:14px;
|
||||
font-weight:500;
|
||||
}
|
||||
|
||||
.absence-status.justified {
|
||||
color: var(--grades-4);
|
||||
color:var(--grades-4);
|
||||
}
|
||||
|
||||
.absence-status.unjustified {
|
||||
color: var(--grades-1);
|
||||
color:var(--grades-1);
|
||||
}
|
||||
|
||||
.absence-status.pending {
|
||||
color: var(--grades-3);
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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%;
|
||||
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;
|
||||
width:48px;
|
||||
height:48px;
|
||||
margin-bottom:1rem;
|
||||
border-radius:8px;
|
||||
}
|
||||
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
opacity:0;
|
||||
transform:translateY(-10px);
|
||||
}
|
||||
|
||||
@keyframes dropdownShow {
|
||||
to {
|
||||
opacity:1;
|
||||
transform:translateY(0);
|
||||
}
|
||||
}@keyframes dropdownShow {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
opacity:0;
|
||||
transform:translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity:1;
|
||||
transform:translateY(0);
|
||||
}
|
||||
}@keyframes spin {
|
||||
to {
|
||||
transform:rotate(360deg);
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@@ -1,25 +1,30 @@
|
||||
async function collectAbsencesData() {
|
||||
const basicData = {
|
||||
schoolInfo: {
|
||||
name: cookieManager.get('schoolName') || 'Iskola',
|
||||
id: cookieManager.get('schoolCode') || ''
|
||||
name: cookieManager.get("schoolName") || "Iskola",
|
||||
id: cookieManager.get("schoolCode") || "",
|
||||
},
|
||||
userData: {
|
||||
name: cookieManager.get('userName') || 'Felhasználó',
|
||||
time: document.querySelector('.usermenu_timer')?.textContent?.trim() || '45:00'
|
||||
}
|
||||
name: cookieManager.get("userName") || "Felhasználó",
|
||||
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'
|
||||
}
|
||||
});
|
||||
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}`);
|
||||
@@ -29,33 +34,33 @@ async function collectAbsencesData() {
|
||||
const absences = [];
|
||||
|
||||
if (apiData.Data && Array.isArray(apiData.Data)) {
|
||||
apiData.Data.forEach(item => {
|
||||
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')}.`;
|
||||
const formattedDate = `${date.getFullYear()}.${(date.getMonth() + 1).toString().padStart(2, "0")}.${date.getDate().toString().padStart(2, "0")}.`;
|
||||
|
||||
let justificationStatus = 'pending';
|
||||
let justificationStatus = "pending";
|
||||
if (item.Igazolt_BOOL === true) {
|
||||
justificationStatus = 'justified';
|
||||
justificationStatus = "justified";
|
||||
} else if (item.Igazolt_BOOL === false && item.IgazolasTipus !== null) {
|
||||
justificationStatus = 'unjustified';
|
||||
justificationStatus = "unjustified";
|
||||
}
|
||||
|
||||
absences.push({
|
||||
date: formattedDate,
|
||||
lesson: item.Oraszam?.toString() || '',
|
||||
subject: item.Targy || '',
|
||||
topic: item.Tema || '',
|
||||
type: item.MulasztasTipus_DNAME || '',
|
||||
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 || ''
|
||||
purposeful: item.TanoraiCeluMulasztas_BNAME || "",
|
||||
justificationType: item.IgazolasTipus_DNAME || "",
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const groupedAbsences = {};
|
||||
absences.forEach(absence => {
|
||||
absences.forEach((absence) => {
|
||||
if (!groupedAbsences[absence.date]) {
|
||||
groupedAbsences[absence.date] = [];
|
||||
}
|
||||
@@ -64,7 +69,7 @@ async function collectAbsencesData() {
|
||||
|
||||
return { basicData, absences, groupedAbsences };
|
||||
} catch (error) {
|
||||
console.error('Hiba az API hívás során:', error);
|
||||
console.error("Hiba az API hívás során:", error);
|
||||
return { basicData, absences: [], groupedAbsences: {} };
|
||||
}
|
||||
}
|
||||
@@ -79,38 +84,42 @@ async function transformAbsencesPage() {
|
||||
<main class="kreta-main">
|
||||
<div class="filter-card">
|
||||
<div class="filter-header">
|
||||
<h2>${LanguageManager.t('absences.filter_title')}</h2>
|
||||
<h2>${LanguageManager.t("absences.filter_title")}</h2>
|
||||
</div>
|
||||
<div class="filter-content">
|
||||
<div class="filter-group">
|
||||
<label>
|
||||
<span class="material-icons-round">date_range</span>
|
||||
${LanguageManager.t('absences.date')}
|
||||
${LanguageManager.t("absences.date")}
|
||||
</label>
|
||||
<input type="date" id="dateFilter" class="filter-input">
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label>
|
||||
<span class="material-icons-round">school</span>
|
||||
${LanguageManager.t('absences.subject')}
|
||||
${LanguageManager.t("absences.subject")}
|
||||
</label>
|
||||
<select id="subjectFilter" class="filter-input">
|
||||
<option value="">${LanguageManager.t('absences.all_subjects')}</option>
|
||||
${[...new Set(absences.map(a => a.subject))].sort().map(subject =>
|
||||
`<option value="${subject}">${subject}</option>`
|
||||
).join('')}
|
||||
<option value="">${LanguageManager.t("absences.all_subjects")}</option>
|
||||
${[...new Set(absences.map((a) => a.subject))]
|
||||
.sort()
|
||||
.map(
|
||||
(subject) =>
|
||||
`<option value="${subject}">${subject}</option>`,
|
||||
)
|
||||
.join("")}
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label>
|
||||
<span class="material-icons-round">check_circle</span>
|
||||
${LanguageManager.t('absences.justification')}
|
||||
${LanguageManager.t("absences.justification")}
|
||||
</label>
|
||||
<select id="justificationFilter" class="filter-input">
|
||||
<option value="">${LanguageManager.t('absences.all_types')}</option>
|
||||
<option value="justified">${LanguageManager.t('absences.justified')}</option>
|
||||
<option value="unjustified">${LanguageManager.t('absences.unjustified')}</option>
|
||||
<option value="pending">${LanguageManager.t('absences.pending')}</option>
|
||||
<option value="">${LanguageManager.t("absences.all_types")}</option>
|
||||
<option value="justified">${LanguageManager.t("absences.justified")}</option>
|
||||
<option value="unjustified">${LanguageManager.t("absences.unjustified")}</option>
|
||||
<option value="pending">${LanguageManager.t("absences.pending")}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -119,19 +128,19 @@ async function transformAbsencesPage() {
|
||||
<div class="stats-overview">
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">${absences.length}</div>
|
||||
<div class="stat-label">${LanguageManager.t('absences.total_absences')}</div>
|
||||
<div class="stat-label">${LanguageManager.t("absences.total_absences")}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">${absences.filter(a => a.justificationStatus === 'justified').length}</div>
|
||||
<div class="stat-label">${LanguageManager.t('absences.justified')}</div>
|
||||
<div class="stat-number">${absences.filter((a) => a.justificationStatus === "justified").length}</div>
|
||||
<div class="stat-label">${LanguageManager.t("absences.justified")}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">${absences.filter(a => a.justificationStatus === 'unjustified').length}</div>
|
||||
<div class="stat-label">${LanguageManager.t('absences.unjustified')}</div>
|
||||
<div class="stat-number">${absences.filter((a) => a.justificationStatus === "unjustified").length}</div>
|
||||
<div class="stat-label">${LanguageManager.t("absences.unjustified")}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-number">${absences.filter(a => a.justificationStatus === 'pending').length}</div>
|
||||
<div class="stat-label">${LanguageManager.t('absences.pending')}</div>
|
||||
<div class="stat-number">${absences.filter((a) => a.justificationStatus === "pending").length}</div>
|
||||
<div class="stat-label">${LanguageManager.t("absences.pending")}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -139,42 +148,15 @@ async function transformAbsencesPage() {
|
||||
<table class="absences-table">
|
||||
<thead class="table-header">
|
||||
<tr>
|
||||
<th>${LanguageManager.t('absences.date')}</th>
|
||||
<th>${LanguageManager.t('absences.lesson')}</th>
|
||||
<th>${LanguageManager.t('absences.subject')}</th>
|
||||
<th>${LanguageManager.t('absences.topic')}</th>
|
||||
<th>${LanguageManager.t('absences.status')}</th>
|
||||
<th>${LanguageManager.t("absences.date")}</th>
|
||||
<th>${LanguageManager.t("absences.lesson")}</th>
|
||||
<th>${LanguageManager.t("absences.subject")}</th>
|
||||
<th>${LanguageManager.t("absences.topic")}</th>
|
||||
<th>${LanguageManager.t("absences.status")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${absences.map(absence => `
|
||||
<tr class="table-row"
|
||||
data-subject="${absence.subject}"
|
||||
data-justified="${absence.justified}"
|
||||
data-date="${absence.date}">
|
||||
<td class="table-cell date-cell" data-label="${LanguageManager.t('absences.date')}">
|
||||
${absence.date}
|
||||
</td>
|
||||
<td class="table-cell lesson-cell" data-label="${LanguageManager.t('absences.lesson')}">
|
||||
${absence.lesson}.
|
||||
</td>
|
||||
<td class="table-cell subject-cell" data-label="${LanguageManager.t('absences.subject')}">
|
||||
${absence.subject}
|
||||
</td>
|
||||
<td class="table-cell topic-cell" data-label="${LanguageManager.t('absences.topic')}" title="${absence.topic}">
|
||||
${absence.topic}
|
||||
</td>
|
||||
<td class="table-cell status-cell" data-label="${LanguageManager.t('absences.status')}">
|
||||
<span class="status-badge ${absence.justificationStatus}">
|
||||
${absence.justificationStatus === 'justified' ?
|
||||
`<span class="material-icons-round">check_circle</span> ${LanguageManager.t('absences.justified')}` :
|
||||
absence.justificationStatus === 'unjustified' ?
|
||||
`<span class="material-icons-round">cancel</span> ${LanguageManager.t('absences.unjustified')}` :
|
||||
`<span class="material-icons-round">pending</span> ${LanguageManager.t('absences.pending')}`}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
${generateAbsencesHTML(absences)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -182,30 +164,180 @@ async function transformAbsencesPage() {
|
||||
</div>
|
||||
`;
|
||||
|
||||
createTemplate.importFonts();
|
||||
|
||||
setupUserDropdown();
|
||||
setupMobileNavigation();
|
||||
|
||||
setupEventListeners();
|
||||
setupFilters();
|
||||
|
||||
|
||||
loadingScreen.hide();
|
||||
}
|
||||
|
||||
function generateAbsencesHTML(absences) {
|
||||
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),
|
||||
);
|
||||
|
||||
let html = "";
|
||||
|
||||
sortedDates.forEach((date) => {
|
||||
const dateAbsences = groupedByDate[date];
|
||||
|
||||
html += `<tr class="date-group-divider" style="display: none;"></tr>`;
|
||||
|
||||
dateAbsences.forEach((absence) => {
|
||||
html += `
|
||||
<tr class="table-row"
|
||||
data-subject="${absence.subject}"
|
||||
data-justified="${absence.justified}"
|
||||
data-date="${absence.date}"
|
||||
data-date-group="${date}">
|
||||
<td class="table-cell date-cell" data-label="${LanguageManager.t("absences.date")}">
|
||||
${absence.date}
|
||||
</td>
|
||||
<td class="table-cell lesson-cell" data-label="${LanguageManager.t("absences.lesson")}">
|
||||
${absence.lesson}.
|
||||
</td>
|
||||
<td class="table-cell subject-cell" data-label="${LanguageManager.t("absences.subject")}">
|
||||
${absence.subject}
|
||||
</td>
|
||||
<td class="table-cell topic-cell" data-label="${LanguageManager.t("absences.topic")}" title="${absence.topic}">
|
||||
${absence.topic}
|
||||
</td>
|
||||
<td class="table-cell status-cell" data-label="${LanguageManager.t("absences.status")}">
|
||||
<span class="status-badge ${absence.justificationStatus}">
|
||||
${
|
||||
absence.justificationStatus === "justified"
|
||||
? `<span class="material-icons-round">check_circle</span> ${LanguageManager.t("absences.justified")}`
|
||||
: absence.justificationStatus === "unjustified"
|
||||
? `<span class="material-icons-round">cancel</span> ${LanguageManager.t("absences.unjustified")}`
|
||||
: `<span class="material-icons-round">pending</span> ${LanguageManager.t("absences.pending")}`
|
||||
}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
});
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
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),
|
||||
);
|
||||
|
||||
tbody.innerHTML = "";
|
||||
|
||||
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));
|
||||
});
|
||||
|
||||
tbody.innerHTML = "";
|
||||
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')
|
||||
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');
|
||||
console.warn("Some filter elements were not found in the DOM");
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -216,32 +348,34 @@ function setupFilters() {
|
||||
const justified = filters.justified.value;
|
||||
const selectedDate = dateFilterValue ? new Date(dateFilterValue) : null;
|
||||
|
||||
document.querySelectorAll('.table-row').forEach(row => {
|
||||
document.querySelectorAll(".table-row").forEach((row) => {
|
||||
const dateStr = row.dataset.date;
|
||||
const dateParts = dateStr.split('.');
|
||||
|
||||
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()) {
|
||||
if (
|
||||
rowDate.getFullYear() !== selectedDate.getFullYear() ||
|
||||
rowDate.getMonth() !== selectedDate.getMonth() ||
|
||||
rowDate.getDate() !== selectedDate.getDate()
|
||||
) {
|
||||
showRow = false;
|
||||
}
|
||||
}
|
||||
@@ -251,72 +385,83 @@ function setupFilters() {
|
||||
}
|
||||
|
||||
if (justified) {
|
||||
const statusElement = row.querySelector('.status-badge');
|
||||
const statusElement = row.querySelector(".status-badge");
|
||||
const hasStatus = statusElement.classList.contains(justified);
|
||||
if (!hasStatus) showRow = false;
|
||||
}
|
||||
|
||||
row.style.display = showRow ? '' : 'none';
|
||||
row.style.display = showRow ? "" : "none";
|
||||
});
|
||||
|
||||
updateDateGroupsVisibility();
|
||||
updateStatistics();
|
||||
} catch (err) {
|
||||
|
||||
console.error('Error during filtering absences:', err);
|
||||
console.error("Error during filtering absences:", err);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Object.values(filters).forEach(filter => {
|
||||
|
||||
Object.values(filters).forEach((filter) => {
|
||||
try {
|
||||
if (filter) {
|
||||
filter.addEventListener('change', filterAbsences);
|
||||
filter.addEventListener("change", filterAbsences);
|
||||
}
|
||||
} catch (err) {
|
||||
if (err.message && err.message.includes('Extension context invalidated')) {
|
||||
console.warn('Extension context invalidated during event listener setup');
|
||||
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);
|
||||
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');
|
||||
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);
|
||||
console.error("Error setting up filters:", err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateStatistics() {
|
||||
try {
|
||||
const visibleRows = document.querySelectorAll('.table-row:not([style*="display: none"])');
|
||||
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 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;
|
||||
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);
|
||||
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);
|
||||
if (window.location.href.includes("/Hianyzas/Hianyzasok")) {
|
||||
transformAbsencesPage().catch((error) => {
|
||||
console.error(LanguageManager.t("absences.page_transform_error"), error);
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user