mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-05 19:24:39 +00:00
feat: modern and animated notices on homepage
This commit is contained in:
SethBurkart123
+397
-5
@@ -1175,11 +1175,6 @@ div > ol:has(.uiFileHandlerWrapper) {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.notices-container h2 {
|
||||
margin: 20px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.notice {
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
@@ -3543,3 +3538,400 @@ body {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none !important;
|
||||
}
|
||||
|
||||
.notice-modal-content {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.notice-unified-content.notice-modal-state {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
// Notice card hover effects for main page cards
|
||||
.notice-unified-content.notice-card-state:not([data-transitioning]) {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--background-secondary) !important;
|
||||
border-color: rgba(255, 255, 255, 0.2) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-badge {
|
||||
padding: 4px 10px;
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.notice-staff {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.notice-preview {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// Modal styles
|
||||
.notice-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.notice-modal-transition {
|
||||
position: fixed;
|
||||
z-index: 10001;
|
||||
transition: none; // Controlled by motion animations
|
||||
}
|
||||
|
||||
.notice-modal-content {
|
||||
background: var(--background-primary);
|
||||
border-radius: 16px;
|
||||
max-width: 600px;
|
||||
max-height: 80vh;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
&.notice-transitioning {
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.notice-unified-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--background-primary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.notice-unified-content {
|
||||
// Override any conflicting .notice styles - unified for both states
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
font-weight: inherit !important;
|
||||
color: inherit !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.notice-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 12px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.notice-content-title {
|
||||
font-size: 20px !important; // Nice middle ground - not too big, not too small
|
||||
font-weight: 600 !important;
|
||||
color: var(--text-primary) !important;
|
||||
margin: 0 0 12px 0 !important;
|
||||
line-height: 1.3 !important;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.notice-content-body {
|
||||
font-size: 14px !important;
|
||||
color: var(--text-secondary) !important;
|
||||
line-height: 1.5 !important;
|
||||
margin: 0 !important;
|
||||
flex: 1;
|
||||
display: block;
|
||||
// Force stable layout dimensions - content renders at full size always
|
||||
min-width: 600px; // Ensure tables have consistent width for layout
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// The ONLY difference between states is clipping!
|
||||
&.notice-card-state {
|
||||
.notice-content-body {
|
||||
// Clip to show only 2 lines but keep full layout
|
||||
overflow: hidden;
|
||||
max-height: 3em; // ~2 lines worth of height
|
||||
}
|
||||
}
|
||||
|
||||
&.notice-modal-state {
|
||||
.notice-close-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.notice-content-body {
|
||||
// Show full content with scrolling
|
||||
overflow-y: auto;
|
||||
|
||||
// Custom scrollbar for long content
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
// Style content elements nicely
|
||||
p {
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--theme-primary);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 12px 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.notice-badge-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.notice-close-btn {
|
||||
position: absolute !important;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
background: var(--background-secondary);
|
||||
border: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
color: var(--text-primary);
|
||||
transition: all 0.2s ease !important;
|
||||
flex-shrink: 0;
|
||||
opacity: 0;
|
||||
|
||||
&:hover {
|
||||
background: var(--background-tertiary);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.notice-modal-badge-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.notice-modal-badge {
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.notice-modal-staff {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.notice-modal-close {
|
||||
background: var(--background-secondary);
|
||||
border: none;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
color: var(--text-primary);
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
background: var(--background-tertiary);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.notice-modal-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 16px 20px 20px 20px;
|
||||
line-height: 1.3;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.notice-modal-body {
|
||||
padding: 0 20px 20px 20px;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-secondary);
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
// Custom scrollbar
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
// Style content elements
|
||||
p {
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--theme-primary);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 12px 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark mode adjustments
|
||||
.dark {
|
||||
.notice-card {
|
||||
border-color: rgba(255, 255, 255, 0.05);
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.notice-modal-content {
|
||||
border-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile responsiveness
|
||||
@media (max-width: 768px) {
|
||||
.notice-modal-overlay {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.notice-modal-content {
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.notice-modal-title {
|
||||
font-size: 20px;
|
||||
margin: 12px 16px 16px 16px;
|
||||
}
|
||||
|
||||
.notice-modal-body {
|
||||
padding: 0 16px 16px 16px;
|
||||
}
|
||||
|
||||
.notice-card {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.notice-preview {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -328,6 +328,18 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center px-4 py-3">
|
||||
<div class="pr-4">
|
||||
<h2 class="text-sm font-bold">Mock Notices</h2>
|
||||
<p class="text-xs">Use fake notice data on homepage instead of real data</p>
|
||||
</div>
|
||||
<div>
|
||||
<Switch
|
||||
state={$settingsState.mockNotices ?? false}
|
||||
onChange={(isOn: boolean) => settingsState.mockNotices = isOn}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -370,8 +370,177 @@ const mockData = {
|
||||
"Mrs. Martinez",
|
||||
],
|
||||
},
|
||||
noticesData: [
|
||||
{
|
||||
id: 1,
|
||||
title: "Academic Lunch Support",
|
||||
contents: `The following table shows the names of the students who are required to attend at the beginning of lunchtime on the respective days.<br>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<p style="padding-left: 0px; padding-right: 0px;">Monday 16/06<br>
|
||||
Room S201<br>
|
||||
Week A Mrs Thompson<br>
|
||||
Week B Mrs Smith</p></th>
|
||||
<th>
|
||||
<p style="padding-left: 0px; padding-right: 0px;">Wednesday 18/06<br>
|
||||
Room S201<br>
|
||||
Week A Mrs Smith<br>
|
||||
Week B Mrs Smith</p></th>
|
||||
<th>
|
||||
<p style="padding-left: 0px; padding-right: 0px;">Friday 20/06<br>
|
||||
Room M201 <br>
|
||||
Week A Ms Anderson<br>
|
||||
Week B Ms Anderson </p></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>No Academic Support for year 9 and 10 <br>
|
||||
due to exam in P5/6</td>
|
||||
<td>
|
||||
<div>
|
||||
</div>John Smith (Mrs Jones)<br>
|
||||
Wednesday <br>
|
||||
Michael Brown<br>
|
||||
James Wilson (Miss Davis)<br>
|
||||
<br>
|
||||
</td>
|
||||
<td>Friday 20/6<br>
|
||||
Michael Brown<br>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div>
|
||||
</div>`,
|
||||
staff: "Mrs Jones",
|
||||
colour: "#9c27b0",
|
||||
label: 1,
|
||||
label_title: "Middle & Senior School (5-12)"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Year 12 Study Period Changes",
|
||||
contents: `Please note the following changes to Year 12 study periods for this week:<br><br>
|
||||
<ul>
|
||||
<li><strong>Tuesday:</strong> Study hall relocated to Library - periods 3 & 4</li>
|
||||
<li><strong>Wednesday:</strong> No supervised study - students may use common areas</li>
|
||||
<li><strong>Friday:</strong> Extended study session until 4:30 PM in Room A205</li>
|
||||
</ul>
|
||||
<br>
|
||||
Students are expected to bring all necessary materials and maintain academic focus during these sessions.`,
|
||||
staff: "Mr. David Chen",
|
||||
colour: "#2196f3",
|
||||
label: 2,
|
||||
label_title: "Year 12 Students"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Upcoming Science Fair Preparations",
|
||||
contents: `The Annual Science Fair is scheduled for <strong>Friday, June 28th</strong>. All participating students should note:<br><br>
|
||||
<table border="1" style="border-collapse: collapse; width: 100%;">
|
||||
<thead>
|
||||
<tr style="background-color: #f0f0f0;">
|
||||
<th style="padding: 8px;">Activity</th>
|
||||
<th style="padding: 8px;">Date</th>
|
||||
<th style="padding: 8px;">Location</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="padding: 8px;">Project Setup</td>
|
||||
<td style="padding: 8px;">Thursday 27/06 - Period 5</td>
|
||||
<td style="padding: 8px;">Main Hall</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 8px;">Practice Presentations</td>
|
||||
<td style="padding: 8px;">Thursday 27/06 - Period 6</td>
|
||||
<td style="padding: 8px;">Science Labs 1-3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding: 8px;">Final Event</td>
|
||||
<td style="padding: 8px;">Friday 28/06 - All Day</td>
|
||||
<td style="padding: 8px;">Main Hall & Courtyard</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<br>Please ensure all safety protocols are followed and display materials are ready by Thursday afternoon.`,
|
||||
staff: "Dr. Sarah Mitchell",
|
||||
colour: "#4caf50",
|
||||
label: 3,
|
||||
label_title: "Science Students"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Library Resource Updates",
|
||||
contents: `Our library has received several important updates this week:<br><br>
|
||||
<strong>New Digital Resources:</strong>
|
||||
<ul>
|
||||
<li>Access to Research Database Plus - now available through student portal</li>
|
||||
<li>Updated online textbook collection for all core subjects</li>
|
||||
<li>New citation management tools for senior students</li>
|
||||
</ul>
|
||||
<br>
|
||||
<strong>Facility Changes:</strong><br>
|
||||
The quiet study area has been expanded and now includes 8 additional desks with power outlets. Bookings can be made through the student portal under "Library Services".
|
||||
<br><br>
|
||||
For assistance with any digital resources, please contact the library staff during operating hours: 7:30 AM - 4:00 PM.`,
|
||||
staff: "Ms. Rebecca Torres",
|
||||
colour: "#ff9800",
|
||||
label: 4,
|
||||
label_title: "All Students"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Sports Carnival Team Registrations",
|
||||
contents: `House Sports Carnival is approaching on <strong>August 15th</strong>! Team registrations are now open for all year levels.<br><br>
|
||||
Available Events:
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0;">
|
||||
<div>
|
||||
<strong>Track Events:</strong>
|
||||
<ul>
|
||||
<li>100m Sprint</li>
|
||||
<li>200m Sprint</li>
|
||||
<li>400m Race</li>
|
||||
<li>800m Distance</li>
|
||||
<li>1500m Distance</li>
|
||||
<li>Relay Races</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<strong>Field Events:</strong>
|
||||
<ul>
|
||||
<li>Long Jump</li>
|
||||
<li>High Jump</li>
|
||||
<li>Shot Put</li>
|
||||
<li>Discus</li>
|
||||
<li>Javelin</li>
|
||||
<li>Triple Jump</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<strong>Registration Deadline:</strong> July 25th<br>
|
||||
<strong>Training Sessions:</strong> Tuesdays & Thursdays, 3:30-4:30 PM<br>
|
||||
<br>
|
||||
Register through the PE department or see your house captains for more information.`,
|
||||
staff: "Coach Michael Park",
|
||||
colour: "#e91e63",
|
||||
label: 5,
|
||||
label_title: "All Houses"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export function getMockNotices() {
|
||||
return {
|
||||
payload: mockData.noticesData
|
||||
};
|
||||
}
|
||||
|
||||
export default function hideSensitiveContent() {
|
||||
Object.entries(contentConfig).forEach(([_, { selector, action }]) => {
|
||||
const elements = document.querySelectorAll(selector);
|
||||
|
||||
@@ -12,6 +12,7 @@ import stringToHTML from "../stringToHTML";
|
||||
import { CreateCustomShortcutDiv } from "@/seqta/utils/CreateEnable/CreateCustomShortcutDiv";
|
||||
import { CreateElement } from "@/seqta/utils/CreateEnable/CreateElement";
|
||||
import { FilterUpcomingAssessments } from "@/seqta/utils/FilterUpcomingAssessments";
|
||||
import { getMockNotices } from "@/seqta/ui/dev/hideSensitiveContent";
|
||||
|
||||
let LessonInterval: any;
|
||||
let currentSelectedDate = new Date();
|
||||
@@ -20,37 +21,29 @@ let loadingTimeout: any;
|
||||
export async function loadHomePage() {
|
||||
console.info("[BetterSEQTA+] Started Loading Home Page");
|
||||
|
||||
// Reset currentSelectedDate to today when remounting the home page
|
||||
currentSelectedDate = new Date();
|
||||
|
||||
// Wait for the DOM to finish clearing
|
||||
await delay(10);
|
||||
|
||||
document.title = "Home ― SEQTA Learn";
|
||||
const element = document.querySelector("[data-key=home]");
|
||||
element?.classList.add("active");
|
||||
|
||||
// Cache DOM queries
|
||||
const main = document.getElementById("main");
|
||||
if (!main) {
|
||||
console.error("[BetterSEQTA+] Main element not found.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Create root container first
|
||||
const homeRoot = stringToHTML(
|
||||
/* html */ `<div id="home-root" class="home-root"></div>`,
|
||||
);
|
||||
const homeRoot = stringToHTML(`<div id="home-root" class="home-root"></div>`);
|
||||
|
||||
// Clear main and add home root
|
||||
main.innerHTML = "";
|
||||
main.appendChild(homeRoot?.firstChild!);
|
||||
|
||||
// Get reference to home container for all subsequent additions
|
||||
const homeContainer = document.getElementById("home-root");
|
||||
if (!homeContainer) return;
|
||||
|
||||
const skeletonStructure = stringToHTML(/* html */ `
|
||||
const skeletonStructure = stringToHTML(`
|
||||
<div class="home-container" id="home-container">
|
||||
<div class="border shortcut-container">
|
||||
<div class="border shortcuts" id="shortcuts"></div>
|
||||
@@ -88,10 +81,8 @@ export async function loadHomePage() {
|
||||
</div>
|
||||
</div>`);
|
||||
|
||||
// Add skeleton structure
|
||||
homeContainer.appendChild(skeletonStructure.firstChild!);
|
||||
|
||||
// Run animations if enabled
|
||||
if (settingsState.animations) {
|
||||
animate(
|
||||
".home-container > div",
|
||||
@@ -106,10 +97,8 @@ export async function loadHomePage() {
|
||||
);
|
||||
}
|
||||
|
||||
// Setup event listeners with cleanup
|
||||
const cleanup = setupTimetableListeners();
|
||||
|
||||
// Initialize shortcuts immediately
|
||||
try {
|
||||
addShortcuts(settingsState.shortcuts);
|
||||
} catch (err: any) {
|
||||
@@ -117,13 +106,10 @@ export async function loadHomePage() {
|
||||
}
|
||||
AddCustomShortcutsToPage();
|
||||
|
||||
// Get current date
|
||||
const date = new Date();
|
||||
const TodayFormatted = formatDate(date);
|
||||
|
||||
// Start all data fetching in parallel
|
||||
const [timetablePromise, assessmentsPromise, classesPromise, prefsPromise] = [
|
||||
// Timetable data
|
||||
fetch(`${location.origin}/seqta/student/load/timetable?`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
@@ -134,13 +120,10 @@ export async function loadHomePage() {
|
||||
}),
|
||||
}).then((res) => res.json()),
|
||||
|
||||
// Assessments data
|
||||
GetUpcomingAssessments(),
|
||||
|
||||
// Classes data
|
||||
GetActiveClasses(),
|
||||
|
||||
// Preferences data
|
||||
fetch(`${location.origin}/seqta/student/load/prefs?`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
@@ -148,7 +131,6 @@ export async function loadHomePage() {
|
||||
}).then((res) => res.json()),
|
||||
];
|
||||
|
||||
// Process all data in parallel
|
||||
const [timetableData, assessments, classes, prefs] = await Promise.all([
|
||||
timetablePromise,
|
||||
assessmentsPromise,
|
||||
@@ -156,7 +138,6 @@ export async function loadHomePage() {
|
||||
prefsPromise,
|
||||
]);
|
||||
|
||||
// Process timetable data
|
||||
const dayContainer = document.getElementById("day-container");
|
||||
if (dayContainer && timetableData.payload.items.length > 0) {
|
||||
const lessonArray = timetableData.payload.items.sort((a: any, b: any) =>
|
||||
@@ -164,7 +145,6 @@ export async function loadHomePage() {
|
||||
);
|
||||
const colours = await GetLessonColours();
|
||||
|
||||
// Process and display lessons
|
||||
dayContainer.innerHTML = "";
|
||||
for (let i = 0; i < lessonArray.length; i++) {
|
||||
const lesson = lessonArray[i];
|
||||
@@ -196,7 +176,6 @@ export async function loadHomePage() {
|
||||
dayContainer.appendChild(div.firstChild!);
|
||||
}
|
||||
|
||||
// Check current lessons
|
||||
if (currentSelectedDate.getDate() === date.getDate()) {
|
||||
for (let i = 0; i < lessonArray.length; i++) {
|
||||
CheckCurrentLesson(lessonArray[i], i + 1);
|
||||
@@ -204,7 +183,7 @@ export async function loadHomePage() {
|
||||
CheckCurrentLessonAll(lessonArray);
|
||||
}
|
||||
} else if (dayContainer) {
|
||||
dayContainer.innerHTML = /* html */ `
|
||||
dayContainer.innerHTML = `
|
||||
<div class="day-empty">
|
||||
<img src="${browser.runtime.getURL(LogoLight)}" />
|
||||
<p>No lessons available.</p>
|
||||
@@ -212,7 +191,6 @@ export async function loadHomePage() {
|
||||
}
|
||||
dayContainer?.classList.remove("loading");
|
||||
|
||||
// Process assessments data
|
||||
const activeClass = classes.find((c: any) => c.hasOwnProperty("active"));
|
||||
const activeSubjects = activeClass?.subjects || [];
|
||||
const activeSubjectCodes = activeSubjects.map((s: any) => s.code);
|
||||
@@ -226,7 +204,6 @@ export async function loadHomePage() {
|
||||
upcomingItems.classList.remove("loading");
|
||||
}
|
||||
|
||||
// Process notices data
|
||||
const labelArray = prefs.payload
|
||||
.filter((item: any) => item.name === "notices.filters")
|
||||
.map((item: any) => item.value);
|
||||
@@ -271,12 +248,10 @@ function setupTimetableListeners() {
|
||||
const timetableForward = document.getElementById("home-timetable-forward");
|
||||
|
||||
function changeTimetable(value: number) {
|
||||
// Clear any existing loading timeout
|
||||
if (loadingTimeout) {
|
||||
clearTimeout(loadingTimeout);
|
||||
}
|
||||
|
||||
// Only show loading state after 200ms to avoid flicker on fast connections
|
||||
loadingTimeout = setTimeout(() => {
|
||||
const dayContainer = document.getElementById("day-container");
|
||||
if (dayContainer) {
|
||||
@@ -340,19 +315,25 @@ function setupNotices(labelArray: string[], date: string) {
|
||||
) as HTMLInputElement;
|
||||
|
||||
const fetchNotices = async (date: string) => {
|
||||
const response = await fetch(
|
||||
`${location.origin}/seqta/student/load/notices?`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json; charset=utf-8" },
|
||||
body: JSON.stringify({ date }),
|
||||
},
|
||||
);
|
||||
const data = await response.json();
|
||||
let data;
|
||||
|
||||
if (settingsState.mockNotices) {
|
||||
data = getMockNotices();
|
||||
} else {
|
||||
const response = await fetch(
|
||||
`${location.origin}/seqta/student/load/notices?`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json; charset=utf-8" },
|
||||
body: JSON.stringify({ date }),
|
||||
},
|
||||
);
|
||||
data = await response.json();
|
||||
}
|
||||
|
||||
processNotices(data, labelArray);
|
||||
};
|
||||
|
||||
// Debounce the input handler
|
||||
const debouncedInputChange = debounce((e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
fetchNotices(target.value);
|
||||
@@ -399,7 +380,6 @@ function processNotices(response: any, labelArray: string[]) {
|
||||
const NoticeContainer = document.getElementById("notice-container");
|
||||
if (!NoticeContainer) return;
|
||||
|
||||
// Clear existing notices
|
||||
NoticeContainer.innerHTML = "";
|
||||
|
||||
const notices = response.payload;
|
||||
@@ -411,19 +391,20 @@ function processNotices(response: any, labelArray: string[]) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Create document fragment for batch DOM updates
|
||||
const fragment = document.createDocumentFragment();
|
||||
|
||||
// Process notices in batch
|
||||
notices.forEach((notice: any) => {
|
||||
if (labelArray.includes(JSON.stringify(notice.label))) {
|
||||
const shouldInclude =
|
||||
settingsState.mockNotices ||
|
||||
labelArray.includes(JSON.stringify(notice.label));
|
||||
|
||||
if (shouldInclude) {
|
||||
const colour = processNoticeColor(notice.colour);
|
||||
const noticeElement = createNoticeElement(notice, colour);
|
||||
fragment.appendChild(noticeElement);
|
||||
}
|
||||
});
|
||||
|
||||
// Single DOM update
|
||||
NoticeContainer.appendChild(fragment);
|
||||
}
|
||||
|
||||
@@ -438,33 +419,314 @@ function processNoticeColor(colour: string): string | undefined {
|
||||
}
|
||||
|
||||
function createNoticeElement(notice: any, colour: string | undefined): Node {
|
||||
const htmlContent = `
|
||||
<div class="notice" style="--colour: ${colour}">
|
||||
<h3 style="color:var(--colour)">${notice.title}</h3>
|
||||
${notice.label_title !== undefined ? `<h5 style="color:var(--colour)">${notice.label_title}</h5>` : ""}
|
||||
<h6 style="color:var(--colour)">${notice.staff}</h6>
|
||||
${notice.contents.replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "").replace(/ +/, " ")}
|
||||
<div class="colourbar" style="background: var(--colour)"></div>
|
||||
</div>`;
|
||||
const cleanContent = notice.contents
|
||||
.replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "")
|
||||
.replace(/ +/, " ");
|
||||
const noticeId = `notice-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
||||
|
||||
const element = stringToHTML(htmlContent).firstChild;
|
||||
if (element instanceof HTMLElement) {
|
||||
element.style.setProperty("--colour", colour ?? "");
|
||||
const htmlContent = `
|
||||
<div class="notice-unified-content notice-card-state" data-notice-id="${noticeId}" style="--colour: ${colour || "#8e8e8e"}; position: relative; background: var(--background-primary); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);">
|
||||
<div class="notice-header">
|
||||
<div class="notice-badge-row">
|
||||
<span class="notice-badge" style="background: linear-gradient(135deg, ${colour || "#8e8e8e"}, ${colour || "#8e8e8e"}dd); color: white;">
|
||||
${notice.label_title || "General"}
|
||||
</span>
|
||||
<span class="notice-staff">${notice.staff}</span>
|
||||
</div>
|
||||
<button class="notice-close-btn" style="opacity: 0; pointer-events: none;">×</button>
|
||||
</div>
|
||||
<h2 class="notice-content-title">${notice.title}</h2>
|
||||
<div class="notice-content-body">${cleanContent}</div>
|
||||
</div>`;
|
||||
|
||||
const element = stringToHTML(htmlContent).firstChild as HTMLElement;
|
||||
if (element) {
|
||||
element.addEventListener("click", () =>
|
||||
openNoticeModal(notice, colour, element),
|
||||
);
|
||||
}
|
||||
return element!;
|
||||
}
|
||||
|
||||
function openNoticeModal(
|
||||
notice: any,
|
||||
colour: string | undefined,
|
||||
sourceElement: HTMLElement,
|
||||
) {
|
||||
const cleanContent = notice.contents
|
||||
.replace(/\[\[[\w]+[:][\w]+[\]\]]+/g, "")
|
||||
.replace(/ +/, " ");
|
||||
|
||||
const existingModal = document.getElementById("notice-modal");
|
||||
if (existingModal) {
|
||||
existingModal.remove();
|
||||
}
|
||||
|
||||
const sourceRect = sourceElement.getBoundingClientRect();
|
||||
let scrollY = Math.round(window.scrollY);
|
||||
let scrollX = Math.round(window.scrollX);
|
||||
|
||||
let sourceLeft = sourceRect.left;
|
||||
let sourceTop = sourceRect.top;
|
||||
let sourceWidth = sourceRect.width;
|
||||
let sourceHeight = sourceRect.height;
|
||||
|
||||
const modalHtml = `
|
||||
<div id="notice-modal" class="notice-modal-overlay" style="opacity: 0;">
|
||||
<div class="notice-modal-transition" style="
|
||||
position: fixed;
|
||||
left: ${sourceLeft + scrollX}px;
|
||||
top: ${sourceTop + scrollY}px;
|
||||
width: ${sourceWidth}px;
|
||||
height: ${sourceHeight}px;
|
||||
transform-origin: center;
|
||||
z-index: 10001;
|
||||
">
|
||||
<div class="notice-modal-content notice-transitioning">
|
||||
<div class="notice-unified-content notice-card-state">
|
||||
<div class="notice-header">
|
||||
<div class="notice-badge-row">
|
||||
<span class="notice-badge" style="background: linear-gradient(135deg, ${colour || "#8e8e8e"}, ${colour || "#8e8e8e"}dd); color: white;">
|
||||
${notice.label_title || "General"}
|
||||
</span>
|
||||
<span class="notice-staff">${notice.staff}</span>
|
||||
</div>
|
||||
<button class="notice-close-btn">×</button>
|
||||
</div>
|
||||
<h2 class="notice-content-title">${notice.title}</h2>
|
||||
<div class="notice-content-body">${cleanContent}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
const modal = stringToHTML(modalHtml).firstChild as HTMLElement;
|
||||
const transitionContainer = modal.querySelector(
|
||||
".notice-modal-transition",
|
||||
) as HTMLElement;
|
||||
const unifiedContent = modal.querySelector(
|
||||
".notice-unified-content",
|
||||
) as HTMLElement;
|
||||
const closeBtn = modal.querySelector(".notice-close-btn") as HTMLElement;
|
||||
|
||||
document.body.appendChild(modal);
|
||||
|
||||
sourceElement.setAttribute("data-transitioning", "true");
|
||||
sourceElement.style.opacity = "0";
|
||||
sourceElement.style.transform = "scale(0.95)";
|
||||
|
||||
const viewportWidth = window.innerWidth;
|
||||
const viewportHeight = window.innerHeight;
|
||||
let targetWidth = Math.round(
|
||||
Math.min(Math.max(sourceWidth, 800), viewportWidth - 40),
|
||||
);
|
||||
|
||||
const tempMeasureDiv = document.createElement("div");
|
||||
tempMeasureDiv.style.position = "absolute";
|
||||
tempMeasureDiv.style.left = "-9999px";
|
||||
tempMeasureDiv.style.width = targetWidth + "px";
|
||||
tempMeasureDiv.style.visibility = "hidden";
|
||||
tempMeasureDiv.innerHTML = `
|
||||
<div class="notice-unified-content notice-modal-state" style="position: relative; width: 100%; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.1);">
|
||||
<div class="notice-header">
|
||||
<div class="notice-badge-row">
|
||||
<span class="notice-badge">${notice.label_title || "General"}</span>
|
||||
<span class="notice-staff">${notice.staff}</span>
|
||||
</div>
|
||||
<button class="notice-close-btn">×</button>
|
||||
</div>
|
||||
<h2 class="notice-content-title">${notice.title}</h2>
|
||||
<div class="notice-content-body">${cleanContent}</div>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(tempMeasureDiv);
|
||||
const measuredHeight =
|
||||
tempMeasureDiv.firstElementChild!.getBoundingClientRect().height;
|
||||
document.body.removeChild(tempMeasureDiv);
|
||||
|
||||
let targetHeight = Math.round(
|
||||
Math.min(Math.max(measuredHeight, 200), viewportHeight * 0.85),
|
||||
);
|
||||
|
||||
let targetLeft = Math.round((viewportWidth - targetWidth) / 2);
|
||||
let targetTop = Math.round((viewportHeight - targetHeight) / 2) + scrollY;
|
||||
|
||||
const closeModal = () => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
document.removeEventListener("keydown", handleEscape);
|
||||
|
||||
if (!settingsState.animations) {
|
||||
modal.remove();
|
||||
sourceElement.style.opacity = "1";
|
||||
sourceElement.style.transform = "";
|
||||
sourceElement.removeAttribute("data-transitioning");
|
||||
return;
|
||||
}
|
||||
|
||||
animate(
|
||||
modal,
|
||||
{
|
||||
backgroundColor: ["rgba(0, 0, 0, 0.5)", "rgba(0, 0, 0, 0)"],
|
||||
backdropFilter: ["blur(4px)", "blur(0px)"],
|
||||
},
|
||||
{ duration: 0.2 },
|
||||
);
|
||||
|
||||
animate(
|
||||
transitionContainer,
|
||||
{ opacity: [1, 0] },
|
||||
{ duration: 0.2, delay: 0.3 },
|
||||
);
|
||||
|
||||
sourceElement.style.opacity = "1";
|
||||
sourceElement.style.transform = "";
|
||||
|
||||
modal.style.pointerEvents = "none";
|
||||
|
||||
animate(
|
||||
transitionContainer,
|
||||
{
|
||||
left: [targetLeft + scrollX, sourceLeft + scrollX],
|
||||
top: [targetTop, sourceTop + scrollY],
|
||||
width: [targetWidth, sourceWidth],
|
||||
height: [targetHeight, sourceHeight],
|
||||
scale: [1, 1],
|
||||
},
|
||||
{
|
||||
duration: 0.35,
|
||||
type: "spring",
|
||||
stiffness: 400,
|
||||
damping: 35,
|
||||
},
|
||||
).finished.then(async () => {
|
||||
modal.remove();
|
||||
sourceElement.removeAttribute("data-transitioning");
|
||||
});
|
||||
};
|
||||
|
||||
closeBtn?.addEventListener("click", closeModal);
|
||||
modal?.addEventListener("click", (e) => {
|
||||
if (e.target === modal) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
const handleEscape = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
closeModal();
|
||||
document.removeEventListener("keydown", handleEscape);
|
||||
window.removeEventListener("resize", handleResize);
|
||||
}
|
||||
};
|
||||
document.addEventListener("keydown", handleEscape);
|
||||
|
||||
const handleResize = () => {
|
||||
const newSourceRect = sourceElement.getBoundingClientRect();
|
||||
const newScrollY = Math.round(window.scrollY);
|
||||
const newScrollX = Math.round(window.scrollX);
|
||||
|
||||
// Get the current scale applied to the source element and compensate for it
|
||||
const computedStyle = getComputedStyle(sourceElement);
|
||||
const transform = computedStyle.transform;
|
||||
let scaleX = 1, scaleY = 1;
|
||||
|
||||
if (transform && transform !== 'none') {
|
||||
const matrix = transform.match(/matrix.*\((.+)\)/);
|
||||
if (matrix) {
|
||||
const values = matrix[1].split(', ');
|
||||
scaleX = parseFloat(values[0]);
|
||||
scaleY = parseFloat(values[3]);
|
||||
}
|
||||
}
|
||||
|
||||
// Apply inverse scale to get true original dimensions and positions
|
||||
const newSourceWidth = newSourceRect.width / scaleX;
|
||||
const newSourceHeight = newSourceRect.height / scaleY;
|
||||
|
||||
// Calculate position shift due to center-based scaling
|
||||
const deltaX = (newSourceWidth - newSourceRect.width) / 2;
|
||||
const deltaY = (newSourceHeight - newSourceRect.height) / 2;
|
||||
|
||||
const newSourceLeft = newSourceRect.left - deltaX;
|
||||
const newSourceTop = newSourceRect.top - deltaY;
|
||||
|
||||
const newViewportWidth = window.innerWidth;
|
||||
const newViewportHeight = window.innerHeight;
|
||||
const newTargetWidth = Math.round(
|
||||
Math.min(Math.max(newSourceWidth, 800), newViewportWidth - 40),
|
||||
);
|
||||
|
||||
// Just measure the existing modal content
|
||||
const currentHeight = unifiedContent.getBoundingClientRect().height;
|
||||
const newTargetHeight = Math.round(
|
||||
Math.min(Math.max(currentHeight, 200), newViewportHeight * 0.85),
|
||||
);
|
||||
|
||||
const newTargetLeft = Math.round((newViewportWidth - newTargetWidth) / 2);
|
||||
const newTargetTop =
|
||||
Math.round((newViewportHeight - newTargetHeight) / 2) + newScrollY;
|
||||
|
||||
transitionContainer.style.left =
|
||||
Math.round(newTargetLeft + newScrollX) + "px";
|
||||
transitionContainer.style.top = Math.round(newTargetTop) + "px";
|
||||
transitionContainer.style.width = Math.round(newTargetWidth) + "px";
|
||||
transitionContainer.style.height = Math.round(newTargetHeight) + "px";
|
||||
|
||||
sourceLeft = newSourceLeft;
|
||||
sourceTop = newSourceTop;
|
||||
sourceWidth = newSourceWidth;
|
||||
sourceHeight = newSourceHeight;
|
||||
targetLeft = newTargetLeft;
|
||||
targetTop = newTargetTop;
|
||||
targetWidth = newTargetWidth;
|
||||
targetHeight = newTargetHeight;
|
||||
scrollY = newScrollY;
|
||||
scrollX = newScrollX;
|
||||
};
|
||||
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
if (settingsState.animations) {
|
||||
animate(modal, { opacity: [0, 1] }, { duration: 0.2 });
|
||||
|
||||
animate(
|
||||
transitionContainer,
|
||||
{
|
||||
left: [sourceLeft + scrollX, targetLeft + scrollX],
|
||||
top: [sourceTop + scrollY, targetTop],
|
||||
width: [sourceWidth, targetWidth],
|
||||
height: [sourceHeight, targetHeight],
|
||||
scale: [1, 1],
|
||||
},
|
||||
{
|
||||
duration: 0.5,
|
||||
type: "spring",
|
||||
stiffness: 280,
|
||||
damping: 24,
|
||||
},
|
||||
);
|
||||
|
||||
unifiedContent.classList.remove("notice-card-state");
|
||||
unifiedContent.classList.add("notice-modal-state");
|
||||
} else {
|
||||
modal.style.opacity = "1";
|
||||
transitionContainer.style.left = Math.round(targetLeft + scrollX) + "px";
|
||||
transitionContainer.style.top = Math.round(targetTop) + "px";
|
||||
transitionContainer.style.width = Math.round(targetWidth) + "px";
|
||||
transitionContainer.style.height = Math.round(targetHeight) + "px";
|
||||
unifiedContent.classList.remove("notice-card-state");
|
||||
unifiedContent.classList.add("notice-modal-state");
|
||||
}
|
||||
}
|
||||
|
||||
function callHomeTimetable(date: string, change?: any) {
|
||||
// Creates a HTTP Post Request to the SEQTA page for the students timetable
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("POST", `${location.origin}/seqta/student/load/timetable?`, true);
|
||||
// Sets the response type to json
|
||||
|
||||
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
|
||||
|
||||
xhr.onreadystatechange = function () {
|
||||
// Once the response is ready
|
||||
if (xhr.readyState === 4) {
|
||||
// Clear the loading timeout since we got a response
|
||||
if (loadingTimeout) {
|
||||
clearTimeout(loadingTimeout);
|
||||
loadingTimeout = null;
|
||||
@@ -475,100 +737,95 @@ function callHomeTimetable(date: string, change?: any) {
|
||||
try {
|
||||
var serverResponse = JSON.parse(xhr.response);
|
||||
let lessonArray: Array<any> = [];
|
||||
// If items in response:
|
||||
if (serverResponse.payload.items.length > 0) {
|
||||
if (DayContainer.innerText || change) {
|
||||
for (let i = 0; i < serverResponse.payload.items.length; i++) {
|
||||
lessonArray.push(serverResponse.payload.items[i]);
|
||||
}
|
||||
lessonArray.sort(function (a, b) {
|
||||
return a.from.localeCompare(b.from);
|
||||
});
|
||||
// If items in the response, set each corresponding value into divs
|
||||
// lessonArray = lessonArray.splice(1)
|
||||
GetLessonColours().then((colours) => {
|
||||
let subjects = colours;
|
||||
for (let i = 0; i < lessonArray.length; i++) {
|
||||
let subjectname = `timetable.subject.colour.${lessonArray[i].code}`;
|
||||
|
||||
let subject = subjects.find(
|
||||
(element: any) => element.name === subjectname,
|
||||
);
|
||||
if (!subject) {
|
||||
lessonArray[i].colour = "--item-colour: #8e8e8e;";
|
||||
} else {
|
||||
lessonArray[i].colour = `--item-colour: ${subject.value};`;
|
||||
let result = GetThresholdOfColor(subject.value);
|
||||
|
||||
if (result > 300) {
|
||||
lessonArray[i].invert = true;
|
||||
}
|
||||
}
|
||||
// Removes seconds from the start and end times
|
||||
lessonArray[i].from = lessonArray[i].from.substring(0, 5);
|
||||
lessonArray[i].until = lessonArray[i].until.substring(0, 5);
|
||||
|
||||
if (settingsState.timeFormat === "12") {
|
||||
lessonArray[i].from = convertTo12HourFormat(
|
||||
lessonArray[i].from,
|
||||
);
|
||||
lessonArray[i].until = convertTo12HourFormat(
|
||||
lessonArray[i].until,
|
||||
);
|
||||
}
|
||||
|
||||
// Checks if attendance is unmarked, and sets the string to " ".
|
||||
lessonArray[i].attendanceTitle = CheckUnmarkedAttendance(
|
||||
lessonArray[i].attendance,
|
||||
);
|
||||
if (serverResponse.payload.items.length > 0) {
|
||||
if (DayContainer.innerText || change) {
|
||||
for (let i = 0; i < serverResponse.payload.items.length; i++) {
|
||||
lessonArray.push(serverResponse.payload.items[i]);
|
||||
}
|
||||
// If on home page, apply each lesson to HTML with information in each div
|
||||
DayContainer.innerText = "";
|
||||
for (let i = 0; i < lessonArray.length; i++) {
|
||||
var div = makeLessonDiv(lessonArray[i], i + 1);
|
||||
// Append each of the lessons into the day-container
|
||||
if (lessonArray[i].invert) {
|
||||
const div1 = div.firstChild! as HTMLElement;
|
||||
div1.classList.add("day-inverted");
|
||||
}
|
||||
lessonArray.sort(function (a, b) {
|
||||
return a.from.localeCompare(b.from);
|
||||
});
|
||||
|
||||
DayContainer.append(div.firstChild as HTMLElement);
|
||||
}
|
||||
|
||||
// Remove loading state after lessons are loaded
|
||||
DayContainer.classList.remove("loading");
|
||||
|
||||
const today = new Date();
|
||||
if (currentSelectedDate.getDate() == today.getDate()) {
|
||||
GetLessonColours().then((colours) => {
|
||||
let subjects = colours;
|
||||
for (let i = 0; i < lessonArray.length; i++) {
|
||||
CheckCurrentLesson(lessonArray[i], i + 1);
|
||||
}
|
||||
// For each lesson, check the start and end times
|
||||
CheckCurrentLessonAll(lessonArray);
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
DayContainer.innerHTML = "";
|
||||
var dummyDay = document.createElement("div");
|
||||
dummyDay.classList.add("day-empty");
|
||||
let img = document.createElement("img");
|
||||
img.src = browser.runtime.getURL(LogoLight);
|
||||
let text = document.createElement("p");
|
||||
text.innerText = "No lessons available.";
|
||||
dummyDay.append(img);
|
||||
dummyDay.append(text);
|
||||
DayContainer.append(dummyDay);
|
||||
let subjectname = `timetable.subject.colour.${lessonArray[i].code}`;
|
||||
|
||||
// Remove loading state when no lessons available
|
||||
DayContainer.classList.remove("loading");
|
||||
}
|
||||
let subject = subjects.find(
|
||||
(element: any) => element.name === subjectname,
|
||||
);
|
||||
if (!subject) {
|
||||
lessonArray[i].colour = "--item-colour: #8e8e8e;";
|
||||
} else {
|
||||
lessonArray[i].colour = `--item-colour: ${subject.value};`;
|
||||
let result = GetThresholdOfColor(subject.value);
|
||||
|
||||
if (result > 300) {
|
||||
lessonArray[i].invert = true;
|
||||
}
|
||||
}
|
||||
|
||||
lessonArray[i].from = lessonArray[i].from.substring(0, 5);
|
||||
lessonArray[i].until = lessonArray[i].until.substring(0, 5);
|
||||
|
||||
if (settingsState.timeFormat === "12") {
|
||||
lessonArray[i].from = convertTo12HourFormat(
|
||||
lessonArray[i].from,
|
||||
);
|
||||
lessonArray[i].until = convertTo12HourFormat(
|
||||
lessonArray[i].until,
|
||||
);
|
||||
}
|
||||
|
||||
lessonArray[i].attendanceTitle = CheckUnmarkedAttendance(
|
||||
lessonArray[i].attendance,
|
||||
);
|
||||
}
|
||||
|
||||
DayContainer.innerText = "";
|
||||
for (let i = 0; i < lessonArray.length; i++) {
|
||||
var div = makeLessonDiv(lessonArray[i], i + 1);
|
||||
|
||||
if (lessonArray[i].invert) {
|
||||
const div1 = div.firstChild! as HTMLElement;
|
||||
div1.classList.add("day-inverted");
|
||||
}
|
||||
|
||||
DayContainer.append(div.firstChild as HTMLElement);
|
||||
}
|
||||
|
||||
DayContainer.classList.remove("loading");
|
||||
|
||||
const today = new Date();
|
||||
if (currentSelectedDate.getDate() == today.getDate()) {
|
||||
for (let i = 0; i < lessonArray.length; i++) {
|
||||
CheckCurrentLesson(lessonArray[i], i + 1);
|
||||
}
|
||||
|
||||
CheckCurrentLessonAll(lessonArray);
|
||||
}
|
||||
});
|
||||
}
|
||||
} else {
|
||||
DayContainer.innerHTML = "";
|
||||
var dummyDay = document.createElement("div");
|
||||
dummyDay.classList.add("day-empty");
|
||||
let img = document.createElement("img");
|
||||
img.src = browser.runtime.getURL(LogoLight);
|
||||
let text = document.createElement("p");
|
||||
text.innerText = "No lessons available.";
|
||||
dummyDay.append(img);
|
||||
dummyDay.append(text);
|
||||
DayContainer.append(dummyDay);
|
||||
|
||||
DayContainer.classList.remove("loading");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading timetable data:", error);
|
||||
// Remove loading state even if there's an error
|
||||
|
||||
DayContainer.classList.remove("loading");
|
||||
|
||||
// Show error message
|
||||
DayContainer.innerHTML = "";
|
||||
const errorDiv = document.createElement("div");
|
||||
errorDiv.classList.add("day-empty");
|
||||
@@ -582,17 +839,15 @@ function callHomeTimetable(date: string, change?: any) {
|
||||
};
|
||||
xhr.send(
|
||||
JSON.stringify({
|
||||
// Information sent to SEQTA page as a request with the dates and student number
|
||||
from: date,
|
||||
until: date,
|
||||
// Funny number
|
||||
|
||||
student: 69,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
function CheckCurrentLessonAll(lessons: any) {
|
||||
// Checks each lesson and sets an interval to run every 60 seconds to continue updating
|
||||
LessonInterval = setInterval(
|
||||
function () {
|
||||
for (let i = 0; i < lessons.length; i++) {
|
||||
@@ -614,7 +869,6 @@ async function CheckCurrentLesson(lesson: any, num: number) {
|
||||
} = lesson;
|
||||
const currentDate = new Date();
|
||||
|
||||
// Create Date objects for start and end times
|
||||
const [startHour, startMinute] = startTime.split(":").map(Number);
|
||||
const [endHour, endMinute] = endTime.split(":").map(Number);
|
||||
|
||||
@@ -624,7 +878,6 @@ async function CheckCurrentLesson(lesson: any, num: number) {
|
||||
const endDate = new Date(currentDate);
|
||||
endDate.setHours(endHour, endMinute, 0);
|
||||
|
||||
// Check if the current time is within the lesson time range
|
||||
const isValidTime = startDate < currentDate && endDate > currentDate;
|
||||
|
||||
const elementId = `${code}${num}`;
|
||||
@@ -687,8 +940,7 @@ function makeLessonDiv(lesson: any, num: number) {
|
||||
assessments,
|
||||
} = lesson;
|
||||
|
||||
// Construct the base lesson string with default values using ternary operators
|
||||
let lessonString = /* html */ `
|
||||
let lessonString = `
|
||||
<div class="day" id="${code + num}" style="${colour}">
|
||||
<h2>${description || "Unknown"}</h2>
|
||||
<h3>${staff || "Unknown"}</h3>
|
||||
@@ -697,15 +949,13 @@ function makeLessonDiv(lesson: any, num: number) {
|
||||
<h5>${attendanceTitle || "Unknown"}</h5>
|
||||
`;
|
||||
|
||||
// Add buttons for assessments and courses if applicable
|
||||
if (programmeID !== 0) {
|
||||
lessonString += /* html */ `
|
||||
lessonString += `
|
||||
<div class="day-button clickable" style="right: 5px;" onclick="location.href='${buildAssessmentURL(programmeID, metaID)}'">${assessmentsicon}</div>
|
||||
<div class="day-button clickable" style="right: 35px;" onclick="location.href='../#?page=/courses/${programmeID}:${metaID}'">${coursesicon}</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Add assessments if they exist
|
||||
if (assessments && assessments.length > 0) {
|
||||
const assessmentString = assessments
|
||||
.map(
|
||||
@@ -714,7 +964,7 @@ function makeLessonDiv(lesson: any, num: number) {
|
||||
)
|
||||
.join("");
|
||||
|
||||
lessonString += /* html */ `
|
||||
lessonString += `
|
||||
<div class="tooltip assessmenttooltip">
|
||||
<svg style="width:28px;height:28px;border-radius:0;" viewBox="0 0 24 24">
|
||||
<path fill="#ed3939" d="M16 2H4C2.9 2 2 2.9 2 4V20C2 21.11 2.9 22 4 22H16C17.11 22 18 21.11 18 20V4C18 2.9 17.11 2 16 2M16 20H4V4H6V12L8.5 9.75L11 12V4H16V20M20 15H22V17H20V15M22 7V13H20V7H22Z" />
|
||||
@@ -752,7 +1002,6 @@ async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
|
||||
|
||||
var Today = new Date();
|
||||
|
||||
// Removes overdue assessments from the upcoming assessments array and pushes to overdue array
|
||||
for (let i = 0; i < assessments.length; i++) {
|
||||
const assessment = assessments[i];
|
||||
let assessmentdue = new Date(assessment.due);
|
||||
@@ -782,7 +1031,7 @@ async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
|
||||
assessments[i].colour = "--item-colour: #8e8e8e;";
|
||||
} else {
|
||||
assessments[i].colour = `--item-colour: ${subject.value};`;
|
||||
GetThresholdOfColor(subject.value); // result (originally) result = GetThresholdOfColor
|
||||
GetThresholdOfColor(subject.value);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -803,9 +1052,7 @@ async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
|
||||
|
||||
CreateFilters(activeSubjects);
|
||||
|
||||
// @ts-ignore
|
||||
let type;
|
||||
// @ts-ignore
|
||||
let class_;
|
||||
|
||||
for (let i = 0; i < assessments.length; i++) {
|
||||
@@ -813,10 +1060,7 @@ async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
|
||||
if (!upcomingDates[element.due as keyof typeof upcomingDates]) {
|
||||
let dateObj: any = new Object();
|
||||
dateObj.div = CreateElement(
|
||||
// TODO: not sure whats going on here?
|
||||
// eslint-disable-next-line
|
||||
(type = "div"),
|
||||
// eslint-disable-next-line
|
||||
(class_ = "upcoming-date-container"),
|
||||
);
|
||||
dateObj.assessments = [];
|
||||
@@ -845,7 +1089,7 @@ async function CreateUpcomingSection(assessments: any, activeSubjects: any) {
|
||||
assessmentDate = createAssessmentDateDiv(
|
||||
date,
|
||||
upcomingDates[date as keyof typeof upcomingDates],
|
||||
// eslint-disable-next-line
|
||||
|
||||
datecase,
|
||||
);
|
||||
} else {
|
||||
@@ -950,9 +1194,6 @@ function createAssessmentDateDiv(date: string, value: any, datecase?: any) {
|
||||
if (response.payload.length > 0) {
|
||||
const assessment = document.querySelector(`#assessment${element.id}`);
|
||||
|
||||
// ticksvg = stringToHTML(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="var(--item-colour)" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>`).firstChild
|
||||
// ticksvg.classList.add('upcoming-tick')
|
||||
// assessment.append(ticksvg)
|
||||
let submittedtext = document.createElement("div");
|
||||
submittedtext.classList.add("upcoming-submittedtext");
|
||||
submittedtext.innerText = "Submitted";
|
||||
@@ -1009,7 +1250,7 @@ function CreateFilters(subjects: any) {
|
||||
let filterdiv = document.querySelector("#upcoming-filters");
|
||||
for (let i = 0; i < subjects.length; i++) {
|
||||
const element = subjects[i];
|
||||
// eslint-disable-next-line
|
||||
|
||||
if (!Object.prototype.hasOwnProperty.call(filteroptions, element.code)) {
|
||||
filteroptions[element.code] = true;
|
||||
settingsState.subjectfilters = filteroptions;
|
||||
|
||||
@@ -36,6 +36,7 @@ export interface SettingsState {
|
||||
devMode?: boolean;
|
||||
originalDarkMode?: boolean;
|
||||
newsSource?: string;
|
||||
mockNotices?: boolean;
|
||||
|
||||
// depreciated keys
|
||||
animatedbk: boolean;
|
||||
|
||||
Reference in New Issue
Block a user