3.15.0-beta.9

QkeleQ10 · QkeleQ10 · commit 2dc1a4fae3a4 · 2025-11-23T23:43:01.000+01:00
diff --git a/manifest-firefox.json b/manifest-firefox.json
@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "__MSG_appName__",
     "description": "__MSG_appDesc__",
-    "version": "3.15.0.8",
+    "version": "3.15.0.9",
     "default_locale": "nl",
     "icons": {
         "16": "icons/icon@16px.png",
diff --git a/manifest.json b/manifest.json
@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "__MSG_appName__",
     "description": "__MSG_appDesc__",
-    "version": "3.15.0.8",
+    "version": "3.15.0.9",
     "default_locale": "nl",
     "icons": {
         "16": "icons/icon@16px.png",
diff --git a/src/scripts/api.js b/src/scripts/api.js
@@ -111,8 +111,8 @@ class MagisterApi {
         return new MagisterApiRequestKwtRegistration(id).delete();
     }
 
-    gradesRecent() {
-        return new MagisterApiRequestGradesRecent().get();
+    gradesRecent(size = 25) {
+        return new MagisterApiRequestGradesRecent(size).get();
     }
 
     gradesForYear(year) {
@@ -408,10 +408,10 @@ class MagisterApiRequestKwtRegistration extends MagisterApiRequest {
 }
 
 class MagisterApiRequestGradesRecent extends MagisterApiRequest {
-    constructor() {
+    constructor(size = 25) {
         super();
         this.identifier = 'gradesRecent';
-        this.path = `api/personen/$USERID/cijfers/laatste?top=20&skip=0`;
+        this.path = `api/personen/$USERID/cijfers/laatste?top=${size}&skip=0`;
     }
     outputFormat = (res) => res.items;
     sample = [{ omschrijving: "Voorbeeld", ingevoerdOp: new Date(now.getTime() - 172800000), vak: { code: "netl", omschrijving: "Nederlandse taal" }, waarde: "6,9", weegfactor: 0, isVoldoende: true }, { omschrijving: "Baguette", ingevoerdOp: new Date(now.getTime() - 691200000), vak: { code: "fatl", omschrijving: "Franse taal" }, waarde: "U", weegfactor: 0, isVoldoende: true }, { omschrijving: "Grade mockery", ingevoerdOp: new Date(now.getTime() - 6891200000), vak: { code: "entl", omschrijving: "Engelse taal" }, waarde: "5,4", weegfactor: 0 }];
diff --git a/src/scripts/grades/grades.js b/src/scripts/grades/grades.js
@@ -30,7 +30,7 @@ async function gradeOverview() {
 
     const gradesContainer = contentContainer.createChildElement('div', { id: 'st-grades-container' });
 
-    const panesContainer = contentContainer.createChildElement('div', { class: 'st-panes-container st-hidden' });
+    const panesContainer = contentContainer.createChildElement('div', { class: 'st-panes-container' });
 
     listPane = new GradeListPane(panesContainer);
     backupPane = new GradeBackupPane(panesContainer);
@@ -56,8 +56,9 @@ async function gradeOverview() {
         const input = label.createChildElement('input', {
             id: `st-grade-${config.instance.id}-input`,
             class: 'st-checkbox-input',
-            type: 'checkbox',
+            type: 'checkbox'
         });
+        if (config.instance.isVisible) input.checked = true;
         config.input = input;
         input.addEventListener('change', () => {
             config.instance.toggle(input.checked);
@@ -250,7 +251,7 @@ class GradeTable {
                         id: grade.CijferId,
                         innerText: grade.CijferStr,
                         classList: [
-                            ['insufficient', grade.IsVoldoende === false],
+                            ['st-insufficient', grade.IsVoldoende === false],
                             ['inh', grade.Inhalen],
                             ['vr', grade.Vrijstelling],
                             ['not-counted', grade.TeltMee === false],
@@ -346,12 +347,16 @@ class GradeDetailDialog extends Dialog {
         const column1 = createElement('div', this.body, { class: 'st-grade-detail-dialog-column' });
         createElement('h3', column1, { class: 'st-section-heading', innerText: this.grade.CijferKolom.KolomOmschrijving || i18n('details') });
 
-        const metricsStrip = createElement('div', column1, { style: 'display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;' });
+        const gradeItem = column1.createChildElement('div', { class: 'st-grade-item', style: 'font-size: 12.5px;' });
 
-        if (this.grade.CijferStr.length < 5)
-            createElement('div', metricsStrip, { class: 'st-metric', innerText: this.grade.CijferStr || '-', dataset: { description: i18n('assessment') }, style: syncedStorage['insufficient'] !== 'off' && this.grade.IsVoldoende === false ? 'color: var(--st-accent-warn)' : '' });
-        if (this.grade.CijferKolom?.Weging >= 0)
-            createElement('div', metricsStrip, { class: 'st-metric', innerText: `${this.grade.CijferKolom.Weging}x`, dataset: { description: i18n('weight') } });
+        const col1 = gradeItem.createChildElement('div')
+        col1.createChildElement('div', { innerText: this.grade.Vak?.Omschrijving || '-' })
+        col1.createChildElement('div', { innerText: this.grade.CijferKolom.WerkInformatieOmschrijving || this.grade.CijferKolom.KolomOmschrijving || '-' })
+        col1.createChildElement('div', { innerText: new Date(this.grade.DatumIngevoerd).toLocaleDateString(locale) });
+
+        const col2 = gradeItem.createChildElement('div')
+        col2.createChildElement('div', { innerText: this.grade.CijferStr, classList: this.grade.IsVoldoende === false ? ['st-insufficient'] : [] })
+        col2.createChildElement('div', { innerText: (this.grade.CijferKolom?.Weging ?? '?') + 'x' });
 
         let table1 = createElement('table', column1, { class: 'st' });
 
diff --git a/src/scripts/grades/list.js b/src/scripts/grades/list.js
@@ -1,6 +1,6 @@
 class GradeListPane extends Pane {
     id = 'cl';
-    icon = '';
+    icon = '';
 
     #div1;
     #div2;
@@ -22,8 +22,8 @@ class GradeListPane extends Pane {
         },
         {
             id: 'result_desc', label: i18n('cl.sortByResultDesc'), comparator: (a, b) => {
-                const resultA = Number(a.CijferStr);
-                const resultB = Number(b.CijferStr);
+                const resultA = Number(a.CijferStr?.replace(',', '.'));
+                const resultB = Number(b.CijferStr?.replace(',', '.'));
                 if (isNaN(resultA) && isNaN(resultB)) return a.CijferStr.localeCompare(b.CijferStr);
                 if (isNaN(resultA)) return 1;
                 if (isNaN(resultB)) return -1;
@@ -32,8 +32,8 @@ class GradeListPane extends Pane {
         },
         {
             id: 'result_asc', label: i18n('cl.sortByResultAsc'), comparator: (a, b) => {
-                const resultA = Number(a.CijferStr);
-                const resultB = Number(b.CijferStr);
+                const resultA = Number(a.CijferStr?.replace(',', '.'));
+                const resultB = Number(b.CijferStr?.replace(',', '.'));
                 if (isNaN(resultA) && isNaN(resultB)) return a.CijferStr.localeCompare(b.CijferStr);
                 if (isNaN(resultA)) return 1;
                 if (isNaN(resultB)) return -1;
@@ -42,28 +42,16 @@ class GradeListPane extends Pane {
         },
     ];
     sortingOption = this.sortingOptions[0];
+    sortingShown = false;
 
     constructor(parentElement) {
         super(parentElement);
 
         this.element.id = 'st-grade-recents-pane';
-        this.#div1 = this.element.createChildElement('div', { class: 'st-div' });
-        this.#div1.createChildElement('h3', { class: 'st-section-heading', innerText: i18n('cl.title') });
-        const select = this.#div1.createChildElement('select', { class: 'st-select' });
-        for (const option of this.sortingOptions) {
-            const optionElement = select.createChildElement('option', { value: option.id, innerText: option.label });
-            if (option === this.sortingOption) {
-                optionElement.selected = true;
-            }
-        }
-        select.addEventListener('change', () => {
-            const selectedOption = this.sortingOptions.find(option => option.id === select.value);
-            if (selectedOption && selectedOption !== this.sortingOption) {
-                this.sortingOption = selectedOption;
-                this.redraw();
-            }
-        });
+        this.element.classList.remove('st-hidden');
 
+        this.#div1 = this.element.createChildElement('div', { class: 'st-div', style: 'margin-bottom: 16px' });
+        this.#div1.createChildElement('h3', { class: 'st-section-heading', innerText: i18n('cl.title') });
         this.element.createChildElement('hr');
         this.#div2 = this.element.createChildElement('div', { class: 'st-div' });
     }
@@ -73,11 +61,40 @@ class GradeListPane extends Pane {
         super.show();
     }
 
-    redraw() {
+    async redraw() {
         this.progressBar.dataset.visible = 'true';
 
+        this.#div1.innerHTML = '';
         this.#div2.innerHTML = '';
 
+        if (this.sortingShown) {
+            this.#div1.createChildElement('h3', { class: 'st-section-heading', innerText: i18n('cl.title') });
+            const select = this.#div1.createChildElement('select', { class: 'st-select', style: 'width: 100%' });
+            for (const option of this.sortingOptions) {
+                const optionElement = select.createChildElement('option', { value: option.id, innerText: option.label });
+                if (option === this.sortingOption) {
+                    optionElement.selected = true;
+                }
+            }
+            select.addEventListener('change', () => {
+                const selectedOption = this.sortingOptions.find(option => option.id === select.value);
+                if (selectedOption && selectedOption !== this.sortingOption) {
+                    this.sortingOption = selectedOption;
+                    this.redraw();
+                }
+            });
+        } else {
+            this.#div1.createChildElement('h3', { class: 'st-section-heading', innerText: i18n('cl.recents') });
+            this.#div1.createChildElement('button', { class: 'st-button icon', 'data-icon': '', title: i18n('cl.sort'), style: { position: 'absolute', top: '12px', right: '12px' } })
+                .addEventListener('click', () => {
+                    this.sortingShown = true;
+                    this.redraw();
+                });
+        }
+        this.element.querySelector('hr').style.display = this.sortingShown ? 'block' : 'none';
+
+        const recentGrades = await magisterApi.gradesRecent(currentGradeTable.grades.length);
+
         const grades = currentGradeTable.grades.filter(grade => grade.CijferStr?.length > 0 && grade.CijferKolom?.KolomSoort !== 2);
         grades.sort(this.sortingOption.comparator);
 
@@ -93,11 +110,28 @@ class GradeListPane extends Pane {
 
         const list = this.#div2.createChildElement('ul', { class: 'st-grade-list' });
         for (const grade of grades) {
-            const listItem = list.createChildElement('li', { class: 'st-grade-list-item' });
-            listItem.createChildElement('span', { class: 'st-grade-list-item-result', innerText: grade.CijferStr });
-            listItem.createChildElement('span', { class: 'st-grade-list-item-course', innerText: grade.VakNaam });
-            listItem.createChildElement('span', { class: 'st-grade-list-item-date', innerText: new Date(grade.DatumIngevoerd).toLocaleDateString(locale) });
-            listItem.createChildElement('span', { class: 'st-grade-list-item-description', innerText: grade.CijferKolom.WerkInformatieOmschrijving || grade.CijferKolom.KolomOmschrijving || '-' });
+            const recentGrade = recentGrades.find(rg => rg.kolomId === grade.CijferKolom.Id);
+            if (!recentGrade && !this.sortingShown) {
+                this.sortingShown = true;
+                this.redraw();
+                return;
+            }
+            const gradeItem = list.createChildElement('li', { class: 'st-grade-item' });
+
+            const col1 = gradeItem.createChildElement('div')
+            col1.createChildElement('div', { innerText: grade.Vak?.Omschrijving || '-' })
+            if (grade.CijferKolom.WerkInformatieOmschrijving || grade.CijferKolom.KolomOmschrijving || recentGrade?.omschrijving) col1.createChildElement('div', { innerText: grade.CijferKolom.WerkInformatieOmschrijving || grade.CijferKolom.KolomOmschrijving || recentGrade?.omschrijving || '-' })
+            col1.createChildElement('div', { innerText: new Date(grade.DatumIngevoerd).toLocaleDateString(locale) });
+
+            const col2 = gradeItem.createChildElement('div')
+            col2.createChildElement('div', { innerText: grade.CijferStr, classList: grade.IsVoldoende === false ? ['st-insufficient'] : [] })
+            if (grade.CijferKolom?.Weging ?? recentGrade) col2.createChildElement('div', { innerText: (grade.CijferKolom?.Weging ?? recentGrade?.weegfactor ?? '?') + 'x' });
+
+            gradeItem.style.cursor = 'pointer';
+            gradeItem.addEventListener('click', () => {
+                const dialog = new GradeDetailDialog(grade, currentGradeTable.identifier.year);
+                dialog.show();
+            });
         }
 
         this.progressBar.dataset.visible = 'false';
diff --git a/src/scripts/style.js b/src/scripts/style.js
@@ -1979,7 +1979,7 @@ table.table-grid-layout>tbody>tr.selected {
     switch (syncedStorage['insufficient']) {
         case 'underline':
             createStyle(`
-            .st-grade-table tr:nth-child(n+3) td:not(:first-child).insufficient {
+            .st-insufficient {
                 font-weight: bold;
                 text-decoration: underline var(--st-accent-warn) 2px;
                 text-underline-offset: 2px;
@@ -1988,7 +1988,7 @@ table.table-grid-layout>tbody>tr.selected {
 
         case 'background':
             createStyle(`
-            .st-grade-table tr:nth-child(n+3) td:not(:first-child).insufficient {
+            .st-insufficient {
                 font-weight: bold;
                 background-color: var(--st-highlight-warn);
 
@@ -2004,7 +2004,7 @@ table.table-grid-layout>tbody>tr.selected {
 
         case 'textcolor':
             createStyle(`
-            .st-grade-table tr:nth-child(n+3) td:not(:first-child).insufficient {
+            .st-insufficient {
                 font-weight: bold;
                 color: var(--st-accent-warn);
             }`, 'study-tools-insufficient')
diff --git a/src/strings/nl.json b/src/strings/nl.json
@@ -209,7 +209,7 @@
         "title": "Lijstweergave",
         "recents": "Laatste cijfers",
         "emptyDesc": "Er zijn geen cijfers in deze cijferlijst.",
-        "sortBy": "Sorteren op",
+        "sort": "Sorteren",
         "sortByDateDesc": "Datum (nieuwste eerst)",
         "sortByDateAsc": "Datum (oudste eerst)",
         "sortByResultDesc": "Resultaat (hoogste eerst)",
diff --git a/src/styles/grades.css b/src/styles/grades.css
@@ -300,7 +300,7 @@
 #st-grades-toolbar {
     display: flex;
     justify-content: space-between;
-    background-color: var(--st-background-secondary);
+    background-color: var(--st-background-tertiary);
     border-bottom: var(--st-border);
     border-top-left-radius: var(--st-border-radius);
     border-top-right-radius: var(--st-border-radius);
@@ -324,7 +324,7 @@
     height: 32px;
     padding: 0;
     margin: 0;
-    background-color: var(--st-background-tertiary);
+    background-color: var(--st-background-secondary);
     border: var(--st-border);
     border-radius: calc(var(--st-border-radius) * 0.75);
     font-weight: 600;
@@ -360,6 +360,54 @@
     border-bottom-right-radius: 0;
 }
 
+.st-grade-item {
+    display: grid;
+    grid-template-columns: 1fr 2.8em;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 10px;
+    margin-bottom: 6px;
+    font-size: 11px;
+
+    font-family: var(--st-font-family-secondary);
+    background-color: var(--st-background-secondary);
+    border: var(--st-border);
+    border-radius: var(--st-border-radius);
+
+    & * {
+        text-overflow: ellipsis;
+        overflow-x: hidden;
+        white-space: nowrap;
+    }
+
+    &>div:first-child {
+        &>div {
+            font-size: .9em;
+        }
+
+        &>div:first-child {
+            font-size: 1.25em;
+            font-weight: 500;
+            font-family: var(--st-font-family-primary);
+        }
+    }
+
+    &>div:last-child {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        &>div:first-child {
+            font-size: 1.45em;
+            font-weight: 500;
+            font-family: var(--st-font-family-primary);
+            padding: 4px;
+            margin: -4px;
+            margin-bottom: -2px;
+        }
+    }
+}
+
 #st-grades-container {
     overflow: auto;
 }
@@ -427,19 +475,7 @@
 #st-grade-recents-pane {
     max-width: 300px;
 
-    .st-grade-list {
-
-        .st-grade-list-item {
-            font-family: var(--st-font-family-secondary);
-
-            .st-grade-list-item-result {
-                font-size: 16px;
-                font-weight: 500;
-                font-family: var(--st-font-family-primary);
-                display: block;
-            }
-        }
-    }
+    .st-grade-list {}
 }
 
 #st-grade-backup-pane {
@@ -541,12 +577,6 @@
         }
     }
 
-    /* TODO: use */
-    #st-cs-central-tendencies[data-great=true] {
-        background-image: linear-gradient(35deg, var(--st-accent-primary), var(--st-accent-primary-dark));
-        color: var(--st-contrast-accent);
-    }
-
     #st-cs-suf-insuf {
         padding-bottom: 8px;
         display: grid;

Original file line number	Diff line number	Diff line change
`@@ -111,8 +111,8 @@ class MagisterApi {`
`111`	`111`	`return new MagisterApiRequestKwtRegistration(id).delete();`
`112`	`112`	`}`
`113`	`113`
`114`		`- gradesRecent() {`
`115`		`- return new MagisterApiRequestGradesRecent().get();`
	`114`	`+ gradesRecent(size = 25) {`
	`115`	`+ return new MagisterApiRequestGradesRecent(size).get();`
`116`	`116`	`}`
`117`	`117`
`118`	`118`	`gradesForYear(year) {`
`@@ -408,10 +408,10 @@ class MagisterApiRequestKwtRegistration extends MagisterApiRequest {`
`408`	`408`	`}`
`409`	`409`
`410`	`410`	`class MagisterApiRequestGradesRecent extends MagisterApiRequest {`
`411`		`- constructor() {`
	`411`	`+ constructor(size = 25) {`
`412`	`412`	`super();`
`413`	`413`	`this.identifier = 'gradesRecent';`
`414`		- this.path = `api/personen/$USERID/cijfers/laatste?top=20&skip=0`;
	`414`	+ this.path = `api/personen/$USERID/cijfers/laatste?top=${size}&skip=0`;
`415`	`415`	`}`
`416`	`416`	`outputFormat = (res) => res.items;`
`417`	`417`	sample = [{ omschrijving: "Voorbeeld", ingevoerdOp: new Date(now.getTime() - 172800000), vak: { code: "netl", omschrijving: "Nederlandse taal" }, waarde: "6,9", weegfactor: 0, isVoldoende: true }, { omschrijving: "Baguette", ingevoerdOp: new Date(now.getTime() - 691200000), vak: { code: "fatl", omschrijving: "Franse taal" }, waarde: "U", weegfactor: 0, isVoldoende: true }, { omschrijving: "Grade mockery", ingevoerdOp: new Date(now.getTime() - 6891200000), vak: { code: "entl", omschrijving: "Engelse taal" }, waarde: "5,4", weegfactor: 0 }];