mirror of
https://github.com/QwIT-Development/firka-extension.git
synced 2026-06-12 03:41:39 +02:00
Page settings
This commit is contained in:
Zan
@@ -37,6 +37,8 @@ h2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.widget-card {
|
||||
@@ -50,6 +52,7 @@ h2 {
|
||||
height: 100%;
|
||||
border: none;
|
||||
min-height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.widget-header {
|
||||
@@ -222,7 +225,6 @@ h2 {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
/* Mobile view: author below content */
|
||||
@media (max-width: 768px) {
|
||||
.news-item .widget-row {
|
||||
flex-direction: column;
|
||||
@@ -257,7 +259,6 @@ h2 {
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop view: limit author width and wrap text */
|
||||
@media (min-width: 769px) {
|
||||
.news-author {
|
||||
max-width: 180px;
|
||||
|
||||
@@ -291,8 +291,9 @@ class DashboardDataManager {
|
||||
}
|
||||
|
||||
class DashboardRenderer {
|
||||
constructor(data) {
|
||||
constructor(data, settings = {}) {
|
||||
this.baseData = data;
|
||||
this.settings = settings;
|
||||
}
|
||||
|
||||
async init() {
|
||||
@@ -315,14 +316,31 @@ class DashboardRenderer {
|
||||
}
|
||||
|
||||
generateMainContent() {
|
||||
const cards = [];
|
||||
|
||||
if (!this.settings.hideGrades) {
|
||||
cards.push(this.createGradeCard());
|
||||
}
|
||||
if (!this.settings.hideAbsences) {
|
||||
cards.push(this.createAbsenceCard());
|
||||
}
|
||||
if (!this.settings.hideNotes) {
|
||||
cards.push(this.createNoteCard());
|
||||
}
|
||||
if (!this.settings.hideExams) {
|
||||
cards.push(this.createExamCard());
|
||||
}
|
||||
|
||||
cards.push(this.createNewsCard());
|
||||
|
||||
if (cards.length === 1) {
|
||||
cards.unshift(this.createGradeCard());
|
||||
}
|
||||
|
||||
return `
|
||||
<main class="kreta-main">
|
||||
<div class="grid-container">
|
||||
${this.createGradeCard()}
|
||||
${this.createAbsenceCard()}
|
||||
${this.createNoteCard()}
|
||||
${this.createExamCard()}
|
||||
${this.createNewsCard()}
|
||||
${cards.join('')}
|
||||
</div>
|
||||
</main>
|
||||
`;
|
||||
@@ -513,6 +531,26 @@ class DashboardApplication {
|
||||
this.init();
|
||||
}
|
||||
|
||||
async loadBulletinSettings() {
|
||||
try {
|
||||
const settings = await storageManager.get("pageSettings_bulletin", {});
|
||||
return {
|
||||
hideGrades: settings.hideGrades || false,
|
||||
hideAbsences: settings.hideAbsences || false,
|
||||
hideNotes: settings.hideNotes || false,
|
||||
hideExams: settings.hideExams || false
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error loading bulletin settings:", error);
|
||||
return {
|
||||
hideGrades: false,
|
||||
hideAbsences: false,
|
||||
hideNotes: false,
|
||||
hideExams: false
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
async init() {
|
||||
if (!window.location.href.includes("/Intezmeny/Faliujsag")) {
|
||||
return;
|
||||
@@ -575,8 +613,9 @@ class DashboardApplication {
|
||||
try {
|
||||
const dataManager = new DashboardDataManager();
|
||||
const dashboardData = await dataManager.extractAllData();
|
||||
const bulletinSettings = await this.loadBulletinSettings();
|
||||
|
||||
const renderer = new DashboardRenderer(dashboardData);
|
||||
const renderer = new DashboardRenderer(dashboardData, bulletinSettings);
|
||||
await renderer.render();
|
||||
} catch (error) {
|
||||
console.error("Error initializing dashboard:", error);
|
||||
|
||||
@@ -458,6 +458,9 @@ to {
|
||||
gap:1rem;
|
||||
padding:1rem;
|
||||
}
|
||||
.grade-distribution.centered {
|
||||
justify-content:center;
|
||||
}
|
||||
.grade-count {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
|
||||
@@ -1,6 +1,25 @@
|
||||
(() => {
|
||||
let gradesSettings = {
|
||||
hideChart: false,
|
||||
hideClassAverage: false
|
||||
};
|
||||
|
||||
async function loadGradesSettings() {
|
||||
try {
|
||||
const settings = await storageManager.get("pageSettings_grades", {});
|
||||
gradesSettings = {
|
||||
hideChart: settings.hideChart || false,
|
||||
hideClassAverage: settings.hideClassAverage || false
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error loading grades settings:", error);
|
||||
}
|
||||
}
|
||||
|
||||
async function transformGradesPage() {
|
||||
try {
|
||||
await loadGradesSettings();
|
||||
|
||||
const tanuloIdElement = document.querySelector("#TanuloId");
|
||||
const tanuloId = tanuloIdElement ? tanuloIdElement.value : "772481";
|
||||
|
||||
@@ -24,13 +43,15 @@
|
||||
|
||||
setupUserDropdown();
|
||||
|
||||
const script = document.createElement("script");
|
||||
script.src = chrome.runtime.getURL("grades/chart.js");
|
||||
document.head.appendChild(script);
|
||||
if (!gradesSettings.hideChart) {
|
||||
const script = document.createElement("script");
|
||||
script.src = chrome.runtime.getURL("grades/chart.js");
|
||||
document.head.appendChild(script);
|
||||
|
||||
script.onload = () => {
|
||||
setupGradesChart(gradesData.subjects);
|
||||
};
|
||||
script.onload = () => {
|
||||
setupGradesChart(gradesData.subjects);
|
||||
};
|
||||
}
|
||||
|
||||
setupEventListeners();
|
||||
setupGradesListScrolling();
|
||||
@@ -390,12 +411,16 @@
|
||||
schoolNameFull = `${data.schoolInfo.id} - ${data.schoolInfo.name}`;
|
||||
shortenedSchoolName = helper.shortenSchoolName(schoolNameFull);
|
||||
|
||||
const showClassAverage = !gradesSettings.hideClassAverage && classAverage > 0;
|
||||
const showChart = !gradesSettings.hideChart;
|
||||
|
||||
return `
|
||||
<div class="kreta-container">
|
||||
${await createTemplate.header()}
|
||||
|
||||
<main class="kreta-main">
|
||||
<div class="grades-overview">
|
||||
${showChart ? `
|
||||
<div class="overall-averages card">
|
||||
<div class="chart-header">
|
||||
<div class="chart-title">${LanguageManager.t("grades.chart_title")} (${totalGrades}db)</div>
|
||||
@@ -404,7 +429,7 @@
|
||||
<span class="average-value ${studentAverage < 2 && studentAverage > 0 ? "warning" : ""}">${studentAverage > 0 ? studentAverage.toFixed(2) : "-"}</span>
|
||||
</div>
|
||||
${
|
||||
classAverage > 0
|
||||
showClassAverage
|
||||
? `
|
||||
<div class="average-circle class-average" data-grade="${classGradeLevel}">
|
||||
<span class="average-value">${classAverage.toFixed(2)}</span>
|
||||
@@ -430,6 +455,39 @@
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
` : `
|
||||
<div class="overall-averages card">
|
||||
<div class="chart-header">
|
||||
<div class="chart-title">${LanguageManager.t("grades.chart_title")} (${totalGrades}db)</div>
|
||||
<div class="chart-averages">
|
||||
<div class="average-circle my-average" data-grade="${studentGradeLevel}">
|
||||
<span class="average-value ${studentAverage < 2 && studentAverage > 0 ? "warning" : ""}">${studentAverage > 0 ? studentAverage.toFixed(2) : "-"}</span>
|
||||
</div>
|
||||
${
|
||||
showClassAverage
|
||||
? `
|
||||
<div class="average-circle class-average" data-grade="${classGradeLevel}">
|
||||
<span class="average-value">${classAverage.toFixed(2)}</span>
|
||||
</div>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="grade-distribution centered">
|
||||
${Object.entries(gradeDistribution)
|
||||
.map(
|
||||
([grade, count]) => `
|
||||
<div class="grade-count grade-${grade}">
|
||||
<span class="grade-value">${grade}</span>
|
||||
<span class="grade-amount">${count}</span>
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
${
|
||||
yearEndGrades.length > 0
|
||||
? `
|
||||
@@ -635,6 +693,7 @@
|
||||
.reverse();
|
||||
const myGrade = Math.floor(subject.average) || 0;
|
||||
const classGrade = Math.floor(subject.classAverage) || 0;
|
||||
const showClassAvg = !gradesSettings.hideClassAverage && subject.classAverage > 0;
|
||||
|
||||
return `
|
||||
<div class="subject-card card">
|
||||
@@ -647,7 +706,7 @@
|
||||
<span class="average-value">${subject.average > 0 ? subject.average.toFixed(2) : "-"}</span>
|
||||
</div>
|
||||
${
|
||||
subject.classAverage > 0
|
||||
showClassAvg
|
||||
? `
|
||||
<div class="average-circle class-average" data-grade="${classGrade}">
|
||||
<span class="average-value">${subject.classAverage.toFixed(2)}</span>
|
||||
|
||||
39
i18n/en.json
39
i18n/en.json
@@ -5,8 +5,47 @@
|
||||
},
|
||||
"settings": {
|
||||
"title": "Settings",
|
||||
"appearance": "Appearance",
|
||||
"theme": "Theme",
|
||||
"language": "Language",
|
||||
"tabs": {
|
||||
"home": "Home",
|
||||
"settings": "Settings",
|
||||
"about": "About"
|
||||
},
|
||||
"page_settings": {
|
||||
"title": "Page Settings",
|
||||
"current_page": "Current page",
|
||||
"no_settings": "No custom settings available for this page.",
|
||||
"login": {
|
||||
"hide_system_message": "Hide system message",
|
||||
"hide_system_message_desc": "Hide the system message shown on the login page",
|
||||
"hide_school_info": "Hide school name and ID",
|
||||
"hide_school_info_desc": "The school name and KRÉTA ID will not be displayed"
|
||||
},
|
||||
"roleselect": {
|
||||
"auto_redirect": "Auto redirect",
|
||||
"auto_redirect_desc": "Automatically redirect to the gradebook",
|
||||
"hide_school_info": "Hide school and name",
|
||||
"hide_school_info_desc": "The school name and user name will not be displayed"
|
||||
},
|
||||
"bulletin": {
|
||||
"hide_grades": "Hide grades",
|
||||
"hide_grades_desc": "Hide the grades card",
|
||||
"hide_absences": "Hide absences",
|
||||
"hide_absences_desc": "Hide the absences card",
|
||||
"hide_notes": "Hide notes",
|
||||
"hide_notes_desc": "Hide the notes card",
|
||||
"hide_exams": "Hide announced exams",
|
||||
"hide_exams_desc": "Hide the announced exams card"
|
||||
},
|
||||
"grades": {
|
||||
"hide_chart": "Hide chart",
|
||||
"hide_chart_desc": "Hide the grades chart",
|
||||
"hide_class_average": "Hide class average",
|
||||
"hide_class_average_desc": "Hide class average values"
|
||||
}
|
||||
},
|
||||
"themes": {
|
||||
"light_green": "Light Green",
|
||||
"dark_green": "Dark Green",
|
||||
|
||||
39
i18n/hu.json
39
i18n/hu.json
@@ -5,8 +5,47 @@
|
||||
},
|
||||
"settings": {
|
||||
"title": "Beállítások",
|
||||
"appearance": "Megjelenés",
|
||||
"theme": "Téma",
|
||||
"language": "Nyelv",
|
||||
"tabs": {
|
||||
"home": "Főoldal",
|
||||
"settings": "Beállítások",
|
||||
"about": "Névjegy"
|
||||
},
|
||||
"page_settings": {
|
||||
"title": "Oldal beállítások",
|
||||
"current_page": "Aktuális oldal",
|
||||
"no_settings": "Ehhez az oldalhoz nincsenek egyéni beállítások.",
|
||||
"login": {
|
||||
"hide_system_message": "Rendszerüzenet elrejtése",
|
||||
"hide_system_message_desc": "A bejelentkezési oldalon megjelenő rendszerüzenet elrejtése",
|
||||
"hide_school_info": "Iskola nevének és azonosítójának elrejtése",
|
||||
"hide_school_info_desc": "Az iskola neve és KRÉTA azonosítója nem jelenik meg"
|
||||
},
|
||||
"roleselect": {
|
||||
"auto_redirect": "Automatikus továbblépés",
|
||||
"auto_redirect_desc": "Automatikusan átirányít az ellenőrzőkönyvre",
|
||||
"hide_school_info": "Iskola és név elrejtése",
|
||||
"hide_school_info_desc": "Az iskola neve és a felhasználó neve nem jelenik meg"
|
||||
},
|
||||
"bulletin": {
|
||||
"hide_grades": "Értékelések elrejtése",
|
||||
"hide_grades_desc": "Az értékeléseid kártya elrejtése",
|
||||
"hide_absences": "Mulasztások elrejtése",
|
||||
"hide_absences_desc": "A mulasztások kártya elrejtése",
|
||||
"hide_notes": "Feljegyzések elrejtése",
|
||||
"hide_notes_desc": "A feljegyzések kártya elrejtése",
|
||||
"hide_exams": "Bejelentett dolgozatok elrejtése",
|
||||
"hide_exams_desc": "A bejelentett dolgozatok kártya elrejtése"
|
||||
},
|
||||
"grades": {
|
||||
"hide_chart": "Grafikon elrejtése",
|
||||
"hide_chart_desc": "A jegyek grafikonjának elrejtése",
|
||||
"hide_class_average": "Osztályátlag elrejtése",
|
||||
"hide_class_average_desc": "Az osztályátlag értékek elrejtése"
|
||||
}
|
||||
},
|
||||
"themes": {
|
||||
"light_blue": "Világos Kék",
|
||||
"light_green": "Világos Zöld",
|
||||
|
||||
@@ -54,7 +54,6 @@ body {
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
gap:8px;
|
||||
margin:16px 0;
|
||||
background:var(--card-card) !important;
|
||||
border-bottom:1px solid rgba(0,0,0,0) !important;
|
||||
}
|
||||
@@ -66,6 +65,7 @@ body {
|
||||
font-style:normal;
|
||||
font-weight:700;
|
||||
line-height:normal;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.logo {
|
||||
width:48px;
|
||||
|
||||
@@ -14,6 +14,8 @@ async function transformLoginPage() {
|
||||
});
|
||||
}
|
||||
|
||||
const loginSettings = await loadLoginSettings();
|
||||
|
||||
const existingForm = document.querySelector("form");
|
||||
const formData = {
|
||||
action: existingForm?.getAttribute("action") || "",
|
||||
@@ -58,11 +60,11 @@ async function transformLoginPage() {
|
||||
<img src=${chrome.runtime.getURL("images/firka_logo.png")} alt="Firka" class="logo">
|
||||
Firka
|
||||
</p>
|
||||
<h1 class="school-name">${schoolInfo.name}</h1>
|
||||
${!loginSettings.hideSchoolInfo ? `<h1 class="school-name">${schoolInfo.name}</h1>
|
||||
<div class="school-details">
|
||||
${schoolInfo.kretaId ? `<div>${schoolInfo.kretaId}</div>` : ""}
|
||||
${schoolInfo.omCode ? `<div>${LanguageManager.t("login.kreta_id")}: ${schoolInfo.omCode}</div>` : ""}
|
||||
</div>
|
||||
</div>` : ''}
|
||||
</div>
|
||||
|
||||
<form class="login-form" method="post" action="${formData.action}" id="loginForm" novalidate>
|
||||
@@ -101,7 +103,7 @@ async function transformLoginPage() {
|
||||
</div>
|
||||
|
||||
${
|
||||
systemMessage
|
||||
systemMessage && !loginSettings.hideSystemMessage
|
||||
? `
|
||||
<div class="system-message">
|
||||
<h4>${LanguageManager.t("login.system_message")}</h4>
|
||||
@@ -203,6 +205,28 @@ function handleSubmit(event) {
|
||||
form.submit();
|
||||
}
|
||||
|
||||
async function loadLoginSettings() {
|
||||
try {
|
||||
const settings = await storageManager.get("pageSettings_login", {});
|
||||
return {
|
||||
hideSystemMessage: settings.hideSystemMessage || false,
|
||||
hideSchoolInfo: settings.hideSchoolInfo || false
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error loading login settings:", error);
|
||||
return {
|
||||
hideSystemMessage: false,
|
||||
hideSchoolInfo: false
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
|
||||
if (message.action === "pageSettingChanged" && message.pageType === "login") {
|
||||
transformLoginPage();
|
||||
}
|
||||
});
|
||||
|
||||
if (window.location.href.includes("idp.e-kreta.hu/Account/Login")) {
|
||||
(async () => {
|
||||
while (typeof window.LanguageManager === "undefined") {
|
||||
|
||||
@@ -13,7 +13,8 @@
|
||||
}
|
||||
},
|
||||
"permissions": [
|
||||
"storage"
|
||||
"storage",
|
||||
"tabs"
|
||||
],
|
||||
"background": {
|
||||
"service_worker": "tools/background.js"
|
||||
|
||||
@@ -13,7 +13,8 @@
|
||||
}
|
||||
},
|
||||
"permissions": [
|
||||
"storage"
|
||||
"storage",
|
||||
"tabs"
|
||||
],
|
||||
"background": {
|
||||
"service_worker": "tools/background.js",
|
||||
|
||||
@@ -18,6 +18,25 @@
|
||||
return setInterval(updateTimer, 1000);
|
||||
};
|
||||
|
||||
async function loadRoleselectSettings() {
|
||||
try {
|
||||
const settings = await storageManager.get("pageSettings_roleselect", {
|
||||
autoRedirect: false,
|
||||
hideSchoolInfo: true
|
||||
});
|
||||
return {
|
||||
autoRedirect: settings.autoRedirect || false,
|
||||
hideSchoolInfo: settings.hideSchoolInfo !== undefined ? settings.hideSchoolInfo : true
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error loading roleselect settings:", error);
|
||||
return {
|
||||
autoRedirect: false,
|
||||
hideSchoolInfo: true
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const handleRoleChange = async (role) => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
@@ -41,7 +60,7 @@
|
||||
}
|
||||
};
|
||||
|
||||
const createHTML = (schoolCode, fullSchoolName, userName) => `
|
||||
const createHTML = (schoolCode, fullSchoolName, userName, settings) => `
|
||||
<div class="kreta-container">
|
||||
<header class="kreta-header">
|
||||
<div class="school-info">
|
||||
@@ -49,15 +68,17 @@
|
||||
<img src=${chrome.runtime.getURL("images/firka_logo.png")} alt="Firka" class="logo">
|
||||
Firka
|
||||
</p>
|
||||
<div class="school-details">
|
||||
${!settings.hideSchoolInfo ? `<div class="school-details">
|
||||
<span>${schoolCode || ""} - ${fullSchoolName || "Iskola"}</span>
|
||||
</div>
|
||||
</div>` : ''}
|
||||
</div>
|
||||
<div class="user-profile">
|
||||
<div class="user-info">
|
||||
${!settings.hideSchoolInfo ? `<div class="user-info">
|
||||
<span class="user-name">${userName}</span>
|
||||
<span class="logout-timer" id="logoutTimer">5:00</span>
|
||||
</div>
|
||||
</div>` : `<div class="user-info">
|
||||
<span class="logout-timer" id="logoutTimer">5:00</span>
|
||||
</div>`}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -108,6 +129,12 @@
|
||||
window.addEventListener("load", resolve),
|
||||
);
|
||||
}
|
||||
const settings = await loadRoleselectSettings();
|
||||
|
||||
if (settings.autoRedirect) {
|
||||
handleRoleChange("Ellenorzo");
|
||||
return;
|
||||
}
|
||||
|
||||
const schoolNameEl = document.querySelector(".IntezmenyNev");
|
||||
const schoolName = schoolNameEl?.textContent.trim() || "Iskola neve";
|
||||
@@ -133,6 +160,7 @@
|
||||
schoolCode,
|
||||
fullSchoolName,
|
||||
userName,
|
||||
settings,
|
||||
), 'text/html');
|
||||
const tempDiv = doc.body;
|
||||
while (tempDiv.firstChild) {
|
||||
|
||||
@@ -24,7 +24,7 @@ body {
|
||||
}
|
||||
.popup-header {
|
||||
text-align:center;
|
||||
margin-bottom:16px;
|
||||
margin-bottom:12px;
|
||||
}
|
||||
.logo-text {
|
||||
color:var(--text-primary);
|
||||
@@ -40,6 +40,58 @@ body {
|
||||
border-radius:6px;
|
||||
margin-right:8px;
|
||||
}
|
||||
|
||||
.tab-navigation {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
padding: 4px;
|
||||
background: var(--card-card);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0px 1px var(--shadow-blur) 0px var(--accent-shadow);
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 10px 12px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
font-family: "Montserrat", serif;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
background: var(--accent-15);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background: var(--accent-accent);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tab-button .material-icons-round {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
.settings-card,.about-card,.support-card {
|
||||
background:var(--card-card);
|
||||
border-radius:16px;
|
||||
@@ -122,14 +174,13 @@ h2 {
|
||||
border-radius:8px;
|
||||
}
|
||||
.language-option {
|
||||
background:var(--card-card);
|
||||
background:var(--button-secondaryFill);
|
||||
border:1px solid var(--border-border);
|
||||
border-radius:8px;
|
||||
padding:12px;
|
||||
transition:all 0.2s ease;
|
||||
}
|
||||
.language-option:hover {
|
||||
background:var(--card-hover);
|
||||
border-color:var(--accent-accent);
|
||||
}
|
||||
.language-option.active {
|
||||
@@ -748,3 +799,148 @@ h2 {
|
||||
#importCode {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.page-settings-info {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.current-page-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: var(--button-secondaryFill);
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.current-page-indicator .material-icons-round {
|
||||
color: var(--accent-accent);
|
||||
}
|
||||
|
||||
.page-badge {
|
||||
margin-left: auto;
|
||||
padding: 4px 10px;
|
||||
background: var(--accent-15);
|
||||
color: var(--accent-accent);
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.page-specific-settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.no-settings-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32px 16px;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.no-settings-placeholder .material-icons-round {
|
||||
font-size: 48px;
|
||||
margin-bottom: 12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.no-settings-placeholder p {
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px;
|
||||
background: var(--button-secondaryFill);
|
||||
border-radius: 10px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.setting-item-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.setting-item-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.setting-item-description {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toggle-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.toggle-slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--text-teritary);
|
||||
border-radius: 24px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.toggle-slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.toggle-switch input:checked + .toggle-slider {
|
||||
background: var(--accent-accent);
|
||||
}
|
||||
|
||||
.toggle-switch input:checked + .toggle-slider:before {
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.setting-select {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--border-border, var(--text-teritary));
|
||||
border-radius: 8px;
|
||||
background: var(--button-secondaryFill);
|
||||
color: var(--text-primary);
|
||||
font-family: "Montserrat", serif;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.setting-select:focus {
|
||||
border-color: var(--accent-accent);
|
||||
}
|
||||
|
||||
@@ -22,106 +22,143 @@
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="settings-card">
|
||||
<h2 data-i18n="settings.title">Beállítások</h2>
|
||||
<div class="settings-group">
|
||||
<div class="setting-section">
|
||||
<div class="setting-header">
|
||||
<span class="material-icons-round">palette</span>
|
||||
<span data-i18n="settings.theme">Téma</span>
|
||||
</div>
|
||||
<div class="theme-grid">
|
||||
<button class="theme-option" data-theme="light-green">
|
||||
<div class="theme-preview light-green">
|
||||
<div class="preview-header"></div>
|
||||
<div class="preview-content">
|
||||
<div class="preview-card"></div>
|
||||
<div class="tab-navigation">
|
||||
<button class="tab-button active" data-tab="home">
|
||||
<span class="material-icons-round">home</span>
|
||||
<span data-i18n="settings.tabs.home">Főoldal</span>
|
||||
</button>
|
||||
<button class="tab-button" data-tab="settings">
|
||||
<span class="material-icons-round">tune</span>
|
||||
<span data-i18n="settings.tabs.settings">Beállítások</span>
|
||||
</button>
|
||||
<button class="tab-button" data-tab="about">
|
||||
<span class="material-icons-round">info</span>
|
||||
<span data-i18n="settings.tabs.about">Névjegy</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-content active" id="tab-home">
|
||||
<div class="settings-card">
|
||||
<h2 data-i18n="settings.appearance">Megjelenés</h2>
|
||||
<div class="settings-group">
|
||||
<div class="setting-section">
|
||||
<div class="setting-header">
|
||||
<span class="material-icons-round">palette</span>
|
||||
<span data-i18n="settings.theme">Téma</span>
|
||||
</div>
|
||||
<div class="theme-grid">
|
||||
<button class="theme-option" data-theme="light-green">
|
||||
<div class="theme-preview light-green">
|
||||
<div class="preview-header"></div>
|
||||
<div class="preview-content">
|
||||
<div class="preview-card"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="theme-name" data-i18n="settings.themes.light_green">Világos Zöld</span>
|
||||
</button>
|
||||
|
||||
<button class="theme-option" data-theme="dark-green">
|
||||
<div class="theme-preview dark-green">
|
||||
<div class="preview-header"></div>
|
||||
<div class="preview-content">
|
||||
<div class="preview-card"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="theme-name" data-i18n="settings.themes.dark_green">Sötét Zöld</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="custom-themes-section">
|
||||
<div class="custom-themes-header">
|
||||
<span data-i18n="settings.custom_themes.title">Egyéni témák</span>
|
||||
<div class="custom-themes-buttons">
|
||||
<button class="theme-btn" id="addCustomTheme" title="Új téma">
|
||||
<span class="material-icons-round">add</span>
|
||||
</button>
|
||||
<button class="theme-btn" id="importCustomTheme" title="Téma importálása">
|
||||
<span class="material-icons-round">download</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span class="theme-name" data-i18n="settings.themes.light_green">Világos Zöld</span>
|
||||
</button>
|
||||
|
||||
<button class="theme-option" data-theme="dark-green">
|
||||
<div class="theme-preview dark-green">
|
||||
<div class="preview-header"></div>
|
||||
<div class="preview-content">
|
||||
<div class="preview-card"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="theme-name" data-i18n="settings.themes.dark_green">Sötét Zöld</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="custom-themes-section">
|
||||
<div class="custom-themes-header">
|
||||
<span data-i18n="settings.custom_themes.title">Egyéni témák</span>
|
||||
<div class="custom-themes-buttons">
|
||||
<button class="theme-btn" id="addCustomTheme" title="Új téma">
|
||||
<span class="material-icons-round">add</span>
|
||||
</button>
|
||||
<button class="theme-btn" id="importCustomTheme" title="Téma importálása">
|
||||
<span class="material-icons-round">download</span>
|
||||
</button>
|
||||
<div class="theme-grid custom-themes-grid" id="customThemesGrid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-grid custom-themes-grid" id="customThemesGrid">
|
||||
</div>
|
||||
<div class="setting-section">
|
||||
<div class="setting-header">
|
||||
<span class="material-icons-round">language</span>
|
||||
<span data-i18n="settings.language">Nyelv</span>
|
||||
</div>
|
||||
<div class="language-grid">
|
||||
<button class="language-option" data-language="hu">
|
||||
<span class="language-name" data-i18n="settings.languages.hu">Magyar</span>
|
||||
</button>
|
||||
<button class="language-option" data-language="en">
|
||||
<span class="language-name" data-i18n="settings.languages.en">English</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-section">
|
||||
<div class="setting-header">
|
||||
<span class="material-icons-round">language</span>
|
||||
<span data-i18n="settings.language">Nyelv</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" id="tab-settings">
|
||||
<div class="settings-card">
|
||||
<h2 data-i18n="settings.page_settings.title">Oldal beállítások</h2>
|
||||
<div class="page-settings-info">
|
||||
<div class="current-page-indicator">
|
||||
<span class="material-icons-round">web</span>
|
||||
<span id="currentPageName" data-i18n="settings.page_settings.current_page">Aktuális oldal</span>
|
||||
<span id="currentPageValue" class="page-badge">-</span>
|
||||
</div>
|
||||
<div class="language-grid">
|
||||
<button class="language-option" data-language="hu">
|
||||
<span class="language-name" data-i18n="settings.languages.hu">Magyar</span>
|
||||
</button>
|
||||
<button class="language-option" data-language="en">
|
||||
<span class="language-name" data-i18n="settings.languages.en">English</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="pageSpecificSettings" class="page-specific-settings">
|
||||
<div class="no-settings-placeholder">
|
||||
<span class="material-icons-round">settings_suggest</span>
|
||||
<p data-i18n="settings.page_settings.no_settings">Ehhez az oldalhoz nincsenek egyéni beállítások.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about-card">
|
||||
<h2 data-i18n="settings.about.title">Névjegy</h2>
|
||||
<div class="about-content">
|
||||
<p data-i18n="settings.about.description">A Firka egy nyílt forráskódú projekt, amely a KRÉTA rendszerhez készít saját felhasználói felületet.</p>
|
||||
<div class="about-links">
|
||||
<a href="https://firka.app" target="_blank" class="about-link">
|
||||
<span class="material-icons-round">language</span>
|
||||
<span>Weboldal</span>
|
||||
</a>
|
||||
<a href="https://github.com/QwIT-Development/" target="_blank" class="about-link">
|
||||
<span class="material-icons-round">code</span>
|
||||
<span data-i18n="settings.about.github">GitHub</span>
|
||||
</a>
|
||||
<a href="https://discord.gg/firka-1111649116020285532" target="_blank" class="about-link">
|
||||
<span class="material-icons-round">forum</span>
|
||||
<span>Discord</span>
|
||||
</a>
|
||||
<div class="tab-content" id="tab-about">
|
||||
<div class="about-card">
|
||||
<h2 data-i18n="settings.about.title">Névjegy</h2>
|
||||
<div class="about-content">
|
||||
<p data-i18n="settings.about.description">A Firka egy nyílt forráskódú projekt, amely a KRÉTA rendszerhez készít saját felhasználói felületet.</p>
|
||||
<div class="about-links">
|
||||
<a href="https://firka.app" target="_blank" class="about-link">
|
||||
<span class="material-icons-round">language</span>
|
||||
<span>Weboldal</span>
|
||||
</a>
|
||||
<a href="https://github.com/QwIT-Development/" target="_blank" class="about-link">
|
||||
<span class="material-icons-round">code</span>
|
||||
<span data-i18n="settings.about.github">GitHub</span>
|
||||
</a>
|
||||
<a href="https://discord.gg/firka-1111649116020285532" target="_blank" class="about-link">
|
||||
<span class="material-icons-round">forum</span>
|
||||
<span>Discord</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="support-card">
|
||||
<h2 data-i18n="settings.support.title">Támogatás</h2>
|
||||
<div class="support-content">
|
||||
<p data-i18n="settings.support.description">Ha tetszik a munkánk és szeretnéd támogatni a fejlesztést, az alábbi módon teheted meg:</p>
|
||||
<div class="support-buttons">
|
||||
<a href="https://ko-fi.com/zan1456" target="_blank" class="support-button">
|
||||
<span class="material-icons-round">coffee</span>
|
||||
<span data-i18n="settings.support.kofi">Ko-Fi</span>
|
||||
</a>
|
||||
<div class="support-card">
|
||||
<h2 data-i18n="settings.support.title">Támogatás</h2>
|
||||
<div class="support-content">
|
||||
<p data-i18n="settings.support.description">Ha tetszik a munkánk és szeretnéd támogatni a fejlesztést, az alábbi módon teheted meg:</p>
|
||||
<div class="support-buttons">
|
||||
<a href="https://ko-fi.com/zan1456" target="_blank" class="support-button">
|
||||
<span class="material-icons-round">coffee</span>
|
||||
<span data-i18n="settings.support.kofi">Ko-Fi</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="version-info" id="version">v1.4.0</div>
|
||||
</div>
|
||||
|
||||
<footer class="popup-footer">
|
||||
<div class="version-info" id="version">v1.3.0</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="themeEditorModal">
|
||||
|
||||
@@ -5,6 +5,338 @@ document.addEventListener("DOMContentLoaded", async () => {
|
||||
|
||||
let customThemes = [];
|
||||
let editingThemeId = null;
|
||||
let currentPageType = null;
|
||||
|
||||
async function initTabs() {
|
||||
const tabButtons = document.querySelectorAll(".tab-button");
|
||||
const tabContents = document.querySelectorAll(".tab-content");
|
||||
|
||||
const lastTab = localStorage.getItem("settingsLastTab") || "home";
|
||||
switchTab(lastTab);
|
||||
|
||||
tabButtons.forEach(button => {
|
||||
button.addEventListener("click", () => {
|
||||
const tabId = button.dataset.tab;
|
||||
switchTab(tabId);
|
||||
localStorage.setItem("settingsLastTab", tabId);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function switchTab(tabId) {
|
||||
const tabButtons = document.querySelectorAll(".tab-button");
|
||||
const tabContents = document.querySelectorAll(".tab-content");
|
||||
|
||||
tabButtons.forEach(btn => {
|
||||
btn.classList.toggle("active", btn.dataset.tab === tabId);
|
||||
});
|
||||
|
||||
tabContents.forEach(content => {
|
||||
content.classList.toggle("active", content.id === `tab-${tabId}`);
|
||||
});
|
||||
|
||||
if (tabId === "settings") {
|
||||
detectCurrentPage();
|
||||
}
|
||||
}
|
||||
|
||||
async function detectCurrentPage() {
|
||||
try {
|
||||
const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
|
||||
if (tabs.length > 0) {
|
||||
const url = tabs[0].url || "";
|
||||
currentPageType = getPageTypeFromUrl(url);
|
||||
updateCurrentPageIndicator(currentPageType);
|
||||
await loadPageSpecificSettings(currentPageType);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error detecting current page:", error);
|
||||
currentPageType = "unknown";
|
||||
updateCurrentPageIndicator(currentPageType);
|
||||
await loadPageSpecificSettings(currentPageType);
|
||||
}
|
||||
}
|
||||
|
||||
function getPageTypeFromUrl(url) {
|
||||
if (url.includes("/Orarend/InformaciokOrarend")) return "timetable";
|
||||
if (url.includes("/TanuloErtekeles/Osztalyzatok")) return "grades";
|
||||
if (url.includes("/Hianyzas/Hianyzasok")) return "absences";
|
||||
if (url.includes("/uzenetek")) return "messages";
|
||||
if (url.includes("/Adminisztracio/Profil")) return "profile";
|
||||
if (url.includes("intezmenykereso.e-kreta.hu/")) return "search";
|
||||
if (url.includes("/Intezmeny/Faliujsag")) return "dashboard";
|
||||
if (url.includes("/Adminisztracio/BelepesKezelo")) return "roleselect";
|
||||
if (url.includes("/ElfelejtettJelszo")) return "forgotpassword";
|
||||
if (url.includes("idp.e-kreta.hu/Account/Login")) return "login";
|
||||
if (url.includes("/Login") || url.includes("/Belepes")) return "login";
|
||||
return "unknown";
|
||||
}
|
||||
|
||||
function getPageDisplayName(pageType) {
|
||||
const pageNames = {
|
||||
"timetable": "Órarend",
|
||||
"grades": "Jegyek",
|
||||
"absences": "Mulasztások",
|
||||
"messages": "Üzenetek",
|
||||
"profile": "Profil",
|
||||
"search": "Intézménykereső",
|
||||
"dashboard": "Faliújság",
|
||||
"roleselect": "Szerepkörválasztó",
|
||||
"login": "Bejelentkezés",
|
||||
"forgotpassword": "Elfelejtett jelszó",
|
||||
"unknown": "Ismeretlen"
|
||||
};
|
||||
return pageNames[pageType] || pageType;
|
||||
}
|
||||
|
||||
function updateCurrentPageIndicator(pageType) {
|
||||
const pageValueEl = document.getElementById("currentPageValue");
|
||||
if (pageValueEl) {
|
||||
pageValueEl.textContent = getPageDisplayName(pageType);
|
||||
}
|
||||
}
|
||||
|
||||
async function getLoginPageSettings() {
|
||||
const settingsKey = "pageSettings_login";
|
||||
const savedSettings = await storageManager.get(settingsKey, {});
|
||||
|
||||
return [
|
||||
{
|
||||
key: "hideSystemMessage",
|
||||
type: "toggle",
|
||||
label: "Rendszerüzenet elrejtése",
|
||||
labelKey: "settings.page_settings.login.hide_system_message",
|
||||
description: "A bejelentkezési oldalon megjelenő rendszerüzenet elrejtése",
|
||||
descriptionKey: "settings.page_settings.login.hide_system_message_desc",
|
||||
value: savedSettings.hideSystemMessage || false
|
||||
},
|
||||
{
|
||||
key: "hideSchoolInfo",
|
||||
type: "toggle",
|
||||
label: "Iskola nevének és azonosítójának elrejtése",
|
||||
labelKey: "settings.page_settings.login.hide_school_info",
|
||||
description: "Az iskola neve és KRÉTA azonosítója nem jelenik meg",
|
||||
descriptionKey: "settings.page_settings.login.hide_school_info_desc",
|
||||
value: savedSettings.hideSchoolInfo || false
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
async function getRoleselectPageSettings() {
|
||||
const settingsKey = "pageSettings_roleselect";
|
||||
const savedSettings = await storageManager.get(settingsKey, {
|
||||
autoRedirect: false,
|
||||
hideSchoolInfo: true
|
||||
});
|
||||
|
||||
return [
|
||||
{
|
||||
key: "autoRedirect",
|
||||
type: "toggle",
|
||||
label: "Automatikus továbblépés",
|
||||
labelKey: "settings.page_settings.roleselect.auto_redirect",
|
||||
description: "Automatikusan átirányít az ellenőrzőkönyvre",
|
||||
descriptionKey: "settings.page_settings.roleselect.auto_redirect_desc",
|
||||
value: savedSettings.autoRedirect || false
|
||||
},
|
||||
{
|
||||
key: "hideSchoolInfo",
|
||||
type: "toggle",
|
||||
label: "Iskola és név elrejtése",
|
||||
labelKey: "settings.page_settings.roleselect.hide_school_info",
|
||||
description: "Az iskola neve és a felhasználó neve nem jelenik meg",
|
||||
descriptionKey: "settings.page_settings.roleselect.hide_school_info_desc",
|
||||
value: savedSettings.hideSchoolInfo !== undefined ? savedSettings.hideSchoolInfo : true
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
async function getBulletinPageSettings() {
|
||||
const settingsKey = "pageSettings_bulletin";
|
||||
const savedSettings = await storageManager.get(settingsKey, {});
|
||||
|
||||
return [
|
||||
{
|
||||
key: "hideGrades",
|
||||
type: "toggle",
|
||||
label: "Értékelések elrejtése",
|
||||
labelKey: "settings.page_settings.bulletin.hide_grades",
|
||||
description: "Az értékeléseid kártya elrejtése",
|
||||
descriptionKey: "settings.page_settings.bulletin.hide_grades_desc",
|
||||
value: savedSettings.hideGrades || false
|
||||
},
|
||||
{
|
||||
key: "hideAbsences",
|
||||
type: "toggle",
|
||||
label: "Mulasztások elrejtése",
|
||||
labelKey: "settings.page_settings.bulletin.hide_absences",
|
||||
description: "A mulasztások kártya elrejtése",
|
||||
descriptionKey: "settings.page_settings.bulletin.hide_absences_desc",
|
||||
value: savedSettings.hideAbsences || false
|
||||
},
|
||||
{
|
||||
key: "hideNotes",
|
||||
type: "toggle",
|
||||
label: "Feljegyzések elrejtése",
|
||||
labelKey: "settings.page_settings.bulletin.hide_notes",
|
||||
description: "A feljegyzések kártya elrejtése",
|
||||
descriptionKey: "settings.page_settings.bulletin.hide_notes_desc",
|
||||
value: savedSettings.hideNotes || false
|
||||
},
|
||||
{
|
||||
key: "hideExams",
|
||||
type: "toggle",
|
||||
label: "Bejelentett dolgozatok elrejtése",
|
||||
labelKey: "settings.page_settings.bulletin.hide_exams",
|
||||
description: "A bejelentett dolgozatok kártya elrejtése",
|
||||
descriptionKey: "settings.page_settings.bulletin.hide_exams_desc",
|
||||
value: savedSettings.hideExams || false
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
async function getGradesPageSettings() {
|
||||
const settingsKey = "pageSettings_grades";
|
||||
const savedSettings = await storageManager.get(settingsKey, {});
|
||||
|
||||
return [
|
||||
{
|
||||
key: "hideChart",
|
||||
type: "toggle",
|
||||
label: "Grafikon elrejtése",
|
||||
labelKey: "settings.page_settings.grades.hide_chart",
|
||||
description: "A jegyek grafikonjának elrejtése",
|
||||
descriptionKey: "settings.page_settings.grades.hide_chart_desc",
|
||||
value: savedSettings.hideChart || false
|
||||
},
|
||||
{
|
||||
key: "hideClassAverage",
|
||||
type: "toggle",
|
||||
label: "Osztályátlag elrejtése",
|
||||
labelKey: "settings.page_settings.grades.hide_class_average",
|
||||
description: "Az osztályátlag értékek elrejtése",
|
||||
descriptionKey: "settings.page_settings.grades.hide_class_average_desc",
|
||||
value: savedSettings.hideClassAverage || false
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
async function loadPageSpecificSettings(pageType) {
|
||||
const container = document.getElementById("pageSpecificSettings");
|
||||
if (!container) return;
|
||||
|
||||
const pageSettings = {
|
||||
"timetable": [],
|
||||
"grades": await getGradesPageSettings(),
|
||||
"absences": [],
|
||||
"messages": [],
|
||||
"profile": [],
|
||||
"search": [],
|
||||
"dashboard": await getBulletinPageSettings(),
|
||||
"roleselect": await getRoleselectPageSettings(),
|
||||
"login": await getLoginPageSettings(),
|
||||
"forgotpassword": [],
|
||||
"unknown": []
|
||||
};
|
||||
|
||||
const settings = pageSettings[pageType] || [];
|
||||
|
||||
if (settings.length === 0) {
|
||||
container.innerHTML = `
|
||||
<div class="no-settings-placeholder">
|
||||
<span class="material-icons-round">settings_suggest</span>
|
||||
<p data-i18n="settings.page_settings.no_settings">Ehhez az oldalhoz nincsenek egyéni beállítások.</p>
|
||||
</div>
|
||||
`;
|
||||
if (window.LanguageManager) {
|
||||
window.LanguageManager.loadTranslationsForPage();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = settings.map(setting => renderSettingItem(setting)).join("");
|
||||
initSettingItems(container);
|
||||
|
||||
if (window.LanguageManager) {
|
||||
window.LanguageManager.loadTranslationsForPage();
|
||||
}
|
||||
}
|
||||
|
||||
function renderSettingItem(setting) {
|
||||
let control = "";
|
||||
|
||||
switch (setting.type) {
|
||||
case "toggle":
|
||||
control = `
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" data-setting="${setting.key}" ${setting.value ? "checked" : ""}>
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
`;
|
||||
break;
|
||||
case "select":
|
||||
control = `
|
||||
<select class="setting-select" data-setting="${setting.key}">
|
||||
${setting.options.map(opt =>
|
||||
`<option value="${opt.value}" ${opt.value === setting.value ? "selected" : ""}>${opt.label}</option>`
|
||||
).join("")}
|
||||
</select>
|
||||
`;
|
||||
break;
|
||||
default:
|
||||
control = "";
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="setting-item" data-setting-key="${setting.key}">
|
||||
<div class="setting-item-info">
|
||||
<div class="setting-item-label" data-i18n="${setting.labelKey || ""}">${setting.label}</div>
|
||||
${setting.description ? `<div class="setting-item-description" data-i18n="${setting.descriptionKey || ""}">${setting.description}</div>` : ""}
|
||||
</div>
|
||||
${control}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function initSettingItems(container) {
|
||||
container.querySelectorAll('input[type="checkbox"]').forEach(input => {
|
||||
input.addEventListener("change", async () => {
|
||||
const key = input.dataset.setting;
|
||||
await savePageSetting(currentPageType, key, input.checked);
|
||||
});
|
||||
});
|
||||
|
||||
container.querySelectorAll(".setting-select").forEach(select => {
|
||||
select.addEventListener("change", async () => {
|
||||
const key = select.dataset.setting;
|
||||
await savePageSetting(currentPageType, key, select.value);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function savePageSetting(pageType, key, value) {
|
||||
try {
|
||||
const storagePageType = pageType === "dashboard" ? "bulletin" : pageType;
|
||||
const settingsKey = `pageSettings_${storagePageType}`;
|
||||
const existingSettings = await storageManager.get(settingsKey, {});
|
||||
existingSettings[key] = value;
|
||||
await storageManager.set(settingsKey, existingSettings);
|
||||
|
||||
const tabs = await chrome.tabs.query({});
|
||||
tabs.forEach((tab) => {
|
||||
chrome.tabs
|
||||
.sendMessage(tab.id, {
|
||||
action: "pageSettingChanged",
|
||||
pageType: storagePageType,
|
||||
key: key,
|
||||
value: value,
|
||||
})
|
||||
.catch(() => {});
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error saving page setting:", error);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadCustomThemes() {
|
||||
try {
|
||||
@@ -603,4 +935,6 @@ document.addEventListener("DOMContentLoaded", async () => {
|
||||
window.addEventListener("languageChanged", (event) => {
|
||||
updateLanguageButtons(event.detail.language);
|
||||
});
|
||||
|
||||
await initTabs();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user