yeah man

QkeleQ10 · Jun 17, 2024 · f36fbd5 · f36fbd5
1 parent a4753e7
commit f36fbd5
Show file tree

Hide file tree

Showing 18 changed files with 228 additions and 171 deletions.
diff --git a/popup/dist/assets/index-BbP_NklL.css b/popup/dist/assets/index-BbP_NklL.css
diff --git a/popup/dist/assets/index-DIOI6ABn.css b/popup/dist/assets/index-DIOI6ABn.css
diff --git a/popup/dist/assets/index-BVWusu7F.js → popup/dist/assets/index-PeA3O4In.js b/popup/dist/assets/index-BVWusu7F.js → popup/dist/assets/index-PeA3O4In.js
diff --git a/popup/dist/index.html b/popup/dist/index.html
@@ -7,8 +7,8 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="./favicon.ico">
   <title>Study Tools-configuratiepaneel</title>
-  <script type="module" crossorigin src="./assets/index-BVWusu7F.js"></script>
-  <link rel="stylesheet" crossorigin href="./assets/index-DIOI6ABn.css">
+  <script type="module" crossorigin src="./assets/index-PeA3O4In.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-BbP_NklL.css">
 </head>
 
 <body>

diff --git a/popup/dist/settings.js b/popup/dist/settings.js
@@ -229,6 +229,16 @@ export default [
     {
         id: "grades",
         settings: [
+            {
+                id: "suf-threshold",
+                title: "Voldoendegrens",
+                type: "SlideInput",
+                default: 5.5,
+                decimals: 1,
+                min: 1,
+                max: 10,
+                step: 0.1,
+            },
             {
                 id: "cc",
                 title: "Cijfercalculator",

diff --git a/popup/package-lock.json b/popup/package-lock.json
diff --git a/popup/package.json b/popup/package.json
@@ -12,13 +12,13 @@
         "vue": "^3.4.27",
         "vue-slider-component": "^4.1.0-beta.7"
     },
+    "devDependencies": {
+        "@vitejs/plugin-vue": "^5.0.5",
+        "vite": "^5.3.1"
+    },
     "browserslist": [
         "> 1%",
         "last 2 versions",
         "not dead"
-    ],
-    "devDependencies": {
-        "@vitejs/plugin-vue": "^5.0.4",
-        "vite": "^5.1.1"
-    }
+    ]
 }
diff --git a/popup/public/settings.js b/popup/public/settings.js
@@ -229,6 +229,16 @@ export default [
     {
         id: "grades",
         settings: [
+            {
+                id: "suf-threshold",
+                title: "Voldoendegrens",
+                type: "SlideInput",
+                default: 5.5,
+                decimals: 1,
+                min: 1,
+                max: 10,
+                step: 0.1,
+            },
             {
                 id: "cc",
                 title: "Cijfercalculator",

diff --git a/popup/src/components/ThemePresets.vue b/popup/src/components/ThemePresets.vue
@@ -53,7 +53,8 @@ const presets = [
         'decoration': 'none,',
         'decoration-size': 1,
         'appbarcolor': 'false,207,95,47',
-        'shape': 8
+        'shape': 8,
+        'custom-css': ''
     },
     {
         name: "Hawaï",
@@ -65,7 +66,8 @@ const presets = [
         'decoration': 'custom,https://w0.peakpx.com/wallpaper/865/392/HD-wallpaper-hawaii-background-beautiful-colors-nature-outside-palm-trees-portrait-summer-water.jpg',
         'decoration-size': 1,
         'appbarcolor': 'false,207,95,47',
-        'shape': 8
+        'shape': 8,
+        'custom-css': ''
     },
     {
         name: "Vaporwave",
@@ -77,7 +79,8 @@ const presets = [
         'decoration': 'custom,https://wallpapers.com/images/hd/80s-neon-veqvixadrbra13q4.jpg',
         'decoration-size': 1,
         'appbarcolor': 'false,207,95,47',
-        'shape': 8
+        'shape': 8,
+        'custom-css': ''
     },
     {
         name: "Wilde Westen",
@@ -89,7 +92,8 @@ const presets = [
         'decoration': 'custom,https://static.vecteezy.com/system/resources/previews/023/592/503/non_2x/american-desert-landscape-western-background-vector.jpg',
         'decoration-size': 1,
         'appbarcolor': 'false,207,95,47',
-        'shape': 8
+        'shape': 8,
+        'custom-css': ''
     }
 ]
 </script>

diff --git a/popup/src/components/inputs/ColorPicker.vue b/popup/src/components/inputs/ColorPicker.vue
@@ -24,15 +24,23 @@ const swatches = [
     { name: "Oranjegeel", color: { h: 40, s: 51, l: 41 } }, // yellow
     { name: "Bloedrood", color: { h: 10, s: 51, l: 41 } }, // red
     { name: "Rozerood", color: { h: 341, s: 61, l: 41 } }, // pink
-    { name: "Lavendelpaars", color: { h: 290, s: 41, l: 41 } }, // purple
-    { name: "Bosbespaars", color: { h: 240, s: 41, l: 41 } }, // indigo
+    { name: "Mauvepaars", color: { h: 290, s: 41, l: 41 } }, // purple
+    { name: "Diepindigo", color: { h: 240, s: 41, l: 41 } }, // indigo
+    { name: "Babyblauw", color: { h: 207, s: 52, l: 66 } },
+    { name: "Mintgroen", color: { h: 161, s: 44, l: 60 } },
+    { name: "Pastelgroen", color: { h: 90, s: 44, l: 60 } },
+    { name: "Zandbeige", color: { h: 40, s: 44, l: 66 } },
+    { name: "Zalmrood", color: { h: 10, s: 44, l: 66 } },
+    { name: "Babyroze", color: { h: 341, s: 44, l: 66 } },
+    { name: "Lavendelpaars", color: { h: 290, s: 44, l: 66 } },
+    { name: "Zachtpaars", color: { h: 240, s: 44, l: 70 } },
 ]
 
 function isSelected(color) {
     return (color.h == value.value.h && color.s == value.value.s && color.l == value.value.l)
 }
 
-const isAnySwatchSelected = computed(() => swatches.some(swatch => isSelected(swatch.color)))
+const isAnyMainSwatchSelected = computed(() => swatches.slice(0,8).some(swatch => isSelected(swatch.color)))
 
 function updateColor(newColor) {
     value.value = newColor
@@ -47,13 +55,13 @@ function updatePickerOpen(newPickerOpenValue) {
     <div class="color-picker">
         <div class="gallery">
             <div class="swatches">
-                <button v-for="swatch in swatches" class="swatch" :class="{ 'selected': isSelected(swatch.color) }"
-                    :key="swatch.name" :title="swatch.name"
+                <button v-for="swatch in swatches.slice(0, 8)" class="swatch"
+                    :class="{ 'selected': isSelected(swatch.color) }" :key="swatch.name" :title="swatch.name"
                     :style="{ 'background-color': `hsl(${swatch.color.h} ${swatch.color.s}% ${swatch.color.l}%` }"
                     @click="value = swatch.color"></button>
             </div>
-            <button class="custom" :class="{ 'selected': !isAnySwatchSelected }"
-                :style="{ '--sel-color': !isAnySwatchSelected ? `hsl(${value.h} ${value.s}% ${value.l}%)` : 'transparent' }"
+            <button class="custom" :class="{ 'selected': !isAnyMainSwatchSelected }"
+                :style="{ '--sel-color': !isAnyMainSwatchSelected ? `hsl(${value.h} ${value.s}% ${value.l}%)` : 'transparent' }"
                 title="Kleur kiezen" @click="pickerOpen = true">
                 <!-- style="background-image: radial-gradient(var(--color-surface-container) 66%, transparent calc(66% + 2px)), conic-gradient(in hsl longer hue, hsl(0 65% 50%) 0 0);" -->
                 <Icon>palette</Icon>

diff --git a/popup/src/components/sheets/ColorWheelSheet.vue b/popup/src/components/sheets/ColorWheelSheet.vue
@@ -305,13 +305,19 @@ function isSelected(color) {
     transition: margin 50ms, outline 50ms;
 }
 
-.swatch:first-child {
+.swatch:nth-child(1) {
     border-top-left-radius: 6px;
-    border-bottom-left-radius: 6px;
 }
 
-.swatch:last-child {
+.swatch:nth-child(8) {
     border-top-right-radius: 6px;
+}
+
+.swatch:nth-child(9) {
+    border-bottom-left-radius: 6px;
+}
+
+.swatch:nth-child(16) {
     border-bottom-right-radius: 6px;
 }
 

diff --git a/src/magister/scripts/api.js b/src/magister/scripts/api.js
@@ -308,7 +308,7 @@ async function fetchWrapper(url, options, identifier = 'unknown', quiet = false)
                 ],
                 120000
             )
-            console.log(`Het zou me erg helpen als je een screenshot of kopie van de volgende informatie doorstuurt via e-mail (quinten@althues.nl) of Discord (https://discord.gg/2rP7pfeAKf) 💚`)
+            console.log(`Blijf je problemen ervaren? Neem contact op via e-mail (quinten@althues.nl) of Discord (https://discord.gg/2rP7pfeAKf)`)
         }
         console.error(`APIRQ: ${res2.status}\n\nurl: ${url}\nuserId: ${magisterApiUserId}\nuserToken.length: ${magisterApiUserToken?.length} (@ ${identifier})`)
         return resolve({})
@@ -332,7 +332,7 @@ async function fetchWrapper(url, options, identifier = 'unknown', quiet = false)
                     ],
                     120000
                 )
-                console.log(`Het zou me erg helpen als je een screenshot of kopie van de volgende informatie doorstuurt via e-mail (quinten@althues.nl) of Discord (https://discord.gg/2rP7pfeAKf) 💚`)
+                console.log(`Blijf je problemen ervaren? Neem contact op via e-mail (quinten@althues.nl) of Discord (https://discord.gg/2rP7pfeAKf)`)
             }
             console.error(`APIRQ: ${err}\n\nurl: ${url}\nuserId: ${magisterApiUserId}\nuserToken.length: ${magisterApiUserToken?.length} (@ ${identifier})`)
             return ({})

diff --git a/src/magister/scripts/gamification.js b/src/magister/scripts/gamification.js
@@ -4,7 +4,7 @@ let years = []
 let wrappedPage = 0
 
 const range1 = { start: new Date(now.getFullYear() + '-06-12 00:00'), end: new Date(now.getFullYear() + '-09-16 00:00') } // June 12th - September 15th
-const range2 = { start: new Date(now.getFullYear() + '-06-21 00:00'), end: new Date(now.getFullYear() + '-09-16 00:00') } // July 4th - September 15th
+const range2 = { start: new Date(now.getFullYear() + '-06-21 00:00'), end: new Date(now.getFullYear() + '-09-16 00:00') } // June 21st - September 15th
 const range3 = { start: new Date(now.getFullYear() + '-07-04 00:00'), end: new Date(now.getFullYear() + '-09-16 00:00') } // July 4th - September 15th
 // vakantie N: 07-20 to 09-01
 // vakantie M: 07-13 to 08-25
@@ -145,13 +145,20 @@ async function constructWrapped(lastYearOnly) {
 
         async function constructWrappedForYear(year, i) {
             return new Promise(async (resolveYear) => {
-                let seed = cyrb128(user.name.firstname + i)
+                let seed = cyrb128((year.groep?.code + year.lesperiode?.code) || (user.name?.firstname + i))
                 let rand = sfc32(seed[0], seed[1], seed[2], seed[3])
 
                 const yearElement = element('div', null, null, { class: 'st-wrapped-year', style: `--gradient: ${gradients.random(seed)} ; --pattern: url('https://raw.githubusercontent.com/QkeleQ10/http-resources/main/study-tools/decorations/wrapped/${i === years.length ? 'a' : year.studie.code.replace(/\D/gi, '')}.svg')` })
                 const yearTitle = element('span', null, yearElement, { class: 'st-wrapped-year-title', innerText: i === years.length ? "Magister Wrapped: alle leerjaren" : `Magister Wrapped: ${formatOrdinals(year.studie.code.replace(/\D/gi, ''), true)} klas` })
                 let cards = []
 
+                yearTitle.addEventListener('click', () => {
+                    yearTitle.innerText = `Magister Wrapped: ${year.groep?.omschrijving || '?'}`
+                    setTimeout(() => {
+                        yearTitle.innerText = i === years.length ? "Magister Wrapped: alle leerjaren" : `Magister Wrapped: ${formatOrdinals(year.studie.code.replace(/\D/gi, ''), true)} klas`
+                    }, 2000)
+                })
+
                 yearTitle.addEventListener('dblclick', () => {
                     yearElement.style.setProperty('--gradient', gradients.random())
                 })
@@ -209,7 +216,7 @@ async function constructWrapped(lastYearOnly) {
 
                 if (year.grades?.length > 0) {
                     const card1 = element('div', null, null, { class: 'st-wrapped-card', style: 'grid-row: span 7; grid-column: span 2;', innerText: `${year.grades.length} cijfers`, 'data-icon': '' })
-                    element('div', `st-wrapped-graph-${i}`, card1, { class: 'st-w-grade-chart st-force-light' })
+                    element('div', `st-wrapped-graph-${i}`, card1, { class: 'st-w-grade-chart st-force-light', style: `--suf-threshold-p: ${(1 - ((Number(syncedStorage['suf-threshold']) - 1) / 9)) * 100}%` })
                         .createLineChart(
                             year.grades
                                 .map(grade => Number(grade.CijferStr?.replace(',', '.'))),
@@ -225,8 +232,8 @@ async function constructWrapped(lastYearOnly) {
                     element('div', null, card2, { class: 'st-w-text-small', innerText: 'gemiddeld cijfer', style: 'grid-row: 1; grid-column: 1;' })
                     element('div', null, card2, { class: 'st-w-metric', innerText: calculateMean(year.grades.map(grade => Number(grade.CijferStr?.replace(',', '.')))).toLocaleString(locale, { minimumFractionDigits: 3, maximumFractionDigits: 3 }), style: 'grid-row: 2; grid-column: 1;' })
                     element('div', null, card2, { class: 'st-w-line-vertical', style: 'grid-row: 1 / -1; grid-column: 2;' })
-                    element('div', null, card2, { class: 'st-w-text-tiny', innerText: 'voldoendes', style: 'grid-row: 1; grid-column: 3;' })
-                    element('div', null, card2, { class: 'st-w-metric-med', innerText: (year.grades.filter(grade => { return Number(grade.CijferStr?.replace(',', '.')) >= 5.5 }).length / year.grades.length * 100).toLocaleString(locale, { minimumFractionDigits: 0, maximumFractionDigits: 0 }) + '%', style: 'grid-row: 2; grid-column: 3;' })
+                    element('div', null, card2, { class: 'st-w-text-tiny', innerText: Number(syncedStorage['suf-threshold']) === 5.5 ? 'voldoendes' : `voldoendes (≥ ${Number(syncedStorage['suf-threshold']).toLocaleString(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 })})`, style: 'grid-row: 1; grid-column: 3;' })
+                    element('div', null, card2, { class: 'st-w-metric-med', innerText: (year.grades.filter(grade => { return Number(grade.CijferStr?.replace(',', '.')) >= Number(syncedStorage['suf-threshold']) }).length / year.grades.length * 100).toLocaleString(locale, { minimumFractionDigits: 0, maximumFractionDigits: 0 }) + '%', style: 'grid-row: 2; grid-column: 3;' })
                     card2.addEventListener('click', async (event) => { event.stopPropagation(); dialog.close(); window.location.hash = '#/cijfers/cijferoverzicht'; (await awaitElement('#st-cs-tab-link')).click(); })
                     cards.push(card2)
                 }