1 Gemnew
Uploaded by
v4201muvabiradar1 Gemnew
Uploaded by
v4201muvabiradar<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>College Timetable</title>
<!-- Tailwind CSS from CDN -->
<script src="[Link]
<style>
/* Custom styles for animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Custom styles for the application */
body {
font-family: 'Inter', sans-serif;
background-color: #111827;
color: white;
}
/* Top Bar */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
background-color: rgba(31, 41, 55, 0.8);
backdrop-filter: blur(12px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0,
0, 0, 0.06);
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
/* Main Content */
main {
flex-grow: 1;
width: 100%;
max-width: 80rem;
margin-left: auto;
margin-right: auto;
padding-top: 6rem;
padding-bottom: 2rem;
padding-left: 1rem;
padding-right: 1rem;
}
/* Auth Form */
.auth-container {
background-color: #1f2937;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px
rgba(0, 0, 0, 0.04);
border: 1px solid #374151;
width: 100%;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.auth-input-container {
position: relative;
}
.auth-input {
width: 100%;
padding: 0.75rem;
padding-left: 2.5rem;
background-color: #374151;
border-radius: 0.75rem;
border: 1px solid #4b5563;
outline: none;
}
.auth-input:focus {
box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.5);
}
.auth-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
}
.auth-button {
width: 100%;
padding: 0.75rem;
border-radius: 0.75rem;
font-weight: bold;
font-size: 1.125rem;
color: white;
background-color: #4f46e5;
}
.auth-button:hover {
background-color: #4338ca;
}
/* Dashboard */
.dashboard-header {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
margin-bottom: -22px;
gap: 1rem;
}
.tab-button {
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
font-weight: 600;
font-size: 1.125rem;
}
.active-tab {
background-color: #4f46e5;
color: white;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0,
0, 0, 0.05);
}
.inactive-tab {
background-color: #374151;
color: #d1d5db;
}
.inactive-tab:hover {
background-color: #4b5563;
}
.logout-button {
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
font-weight: bold;
font-size: 1.125rem;
color: white;
background-color: #dc2626;
}
.logout-button:hover {
background-color: #b91c1c;
}
/* Timetable */
.timetable-container {
background-color: #1f2937;
padding: 1rem;
border-radius: 1rem;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px
rgba(0, 0, 0, 0.04);
border: 1px solid #374151;
}
.timetable-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1rem;
}
.timetable-day-header {
text-align: center;
font-weight: bold;
font-size: 1.125rem;
color: #d1d5db;
border-bottom-width: 2px;
border-color: #818cf8;
padding-bottom: 0.5rem;
}
.timetable-day {
background-color: #374151;
padding: 1rem;
border-radius: 0.75rem;
min-height: 150px;
border: 1px solid #4b5563;
}
.timetable-item {
position: relative;
padding: 0.75rem;
margin-bottom: 0.5rem;
border-radius: 0.5rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0,
0.06);
margin-bottom: 0.5rem; /* Adds space below each item */
transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effects
*/
}
.timetable-item:hover {
transform: translateY(-2px); /* Slight lift effect on hover */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Shadow on hover */
}
.lecture-item {
background-color: #4f46e5;
}
.break-item {
background-color: #4b5563;
}
/* Notifications */
.notification-item {
position: relative;
background-color: #374151;
padding: 1rem;
border-radius: 0.75rem;
border: 1px solid #4b5563;
}
.notification-item:hover {
background-color: #4b5563;
}
/* Modals */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
}
.modal-container1{
background-color: #1f2937;
padding: 1.5rem;
border-radius: 1rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
border: 1px solid #374151;
width: 100%;
max-width: 30rem;
position: relative;
animation: fadeIn 0.3s ease-out;
}
.modal-container {
background-color: #1f2937;
padding: 1.5rem;
border-radius: 1rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
border: 1px solid #374151;
width: 100%;
max-width: 55rem;
position: relative;
animation: fadeIn 0.3s ease-out;
}
.modal-close-button {
position: absolute;
top: 1rem;
right: 1rem;
color: #9ca3af;
}
.modal-close-button:hover {
color: white;
}
#close-edit-department-modal{
width: 2.5rem;
height: 2.5rem;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
border-radius: 50%;
transition: all 0.2s ease;
}
#close-view-departments-modal {
width: 2.5rem;
height: 2.5rem;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
border-radius: 50%;
transition: all 0.2s ease;
}
#close-view-students-modal {
width: 2.5rem;
height: 2.5rem;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
border-radius: 50%;
transition: all 0.2s ease;
}
.modal-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.modal-form-group {
display: flex;
gap: 1rem;
}
.modal-form-input {
width: 100%;
padding: 0.5rem;
border-radius: 0.5rem;
background-color: #374151;
color: white;
}
.modal-form-select {
width: 100%;
padding: 0.5rem;
border-radius: 0.5rem;
background-color: #374151;
color: white;
}
.modal-form-button {
width: 100%;
padding: 0.5rem;
border-radius: 0.5rem;
font-weight: bold;
color: white;
background-color: #4f46e5;
}
.modal-form-button:hover {
background-color: #4338ca;
}
/* Preview Panels */
.preview-panel {
width: 512px;
background-color: #374151;
padding: 1rem;
border-radius: 0.5rem;
}
.preview-item {
padding: 0.75rem;
border-radius: 0.5rem;
margin-bottom: 0.5rem;
margin-bottom: 0.5rem; /* Consistent spacing */
/* Faculty Checkboxes */
.faculty-checkbox-container {
background-color: #374151;
padding: 0.5rem;
border-radius: 0.5rem;
max-height: 10rem;
overflow-y: auto;
}
.faculty-checkbox-item {
display: flex;
align-items: center;
margin-bottom: 0.25rem;
}
/* Subject Inputs */
.subject-input-container {
display: flex;
}
.subject-input {
width: 100%;
padding: 0.5rem;
border-radius: 0.5rem;
background-color: #374151;
color: white;
}
.add-subject-button {
margin-left: 0.5rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
border-radius: 0.5rem;
background-color: #4f46e5;
color: white;
}
.add-subject-button:hover {
background-color: #4338ca;
}
.remove-subject-button {
margin-left: 0.5rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
border-radius: 0.5rem;
background-color: #dc2626;
color: white;
}
.remove-subject-button:hover {
background-color: #b91c1c;
}
/* Tables */
.data-table {
width: 100%;
text-align: left;
}
.data-table thead {
position: sticky;
top: 0;
background-color: #374151;
}
.data-table th {
padding: 0.75rem;
font-weight: 600;
}
.data-table td {
padding: 0.75rem;
}
.data-table tr {
border-bottom-width: 1px;
border-color: #374151;
}
.data-table tr:hover {
background-color: #374151;
}
/* Utility Classes */
.animate-fade-in-up {
animation: fadeIn 0.3s ease-out;
}
.dragging {
opacity: 0.5;
}
.day-highlight {
border: 2px solid #818cf8 !important;
}
.delete-button {
position: absolute;
top: -7px;
right: -5px;
color: white;
background-color: #d95555;
border-radius: 8px;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
border: none;
outline: none;
}
.delete-button:hover {
background-color: #dc2626;
}
.space-y-8 {
margin-top: -20px;
}
.form-checkbox {
border-radius: 0.25rem;
border-width: 1px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 1rem;
height: 1rem;
transition: all 0.2s ease;
}
.form-checkbox:checked {
background-color: #818cf8;
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16'
fill='white' xmlns='[Link] d='M5.707 7.293a1 1 0 0
0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707
7.293z'/%3e%3c/svg%3e");
background-position: center;
background-repeat: no-repeat;
background-size: 75%;
}
/* Add these styles to your CSS section */
.dashboard-header-controls {
display: flex;
gap: 1rem;
align-items: center;
margin-left: auto; /* This pushes the container to the right */
}
/* For the department selector */
.department-selector {
background-color: #374151;
color: white;
padding: 14px;
border-radius: 0.5rem;
border: 1px solid #4b5563;
}
/* For the logout button */
.logout-btn {
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
font-weight: bold;
font-size: 1.125rem;
color: white;
background-color: #dc2626;
border: none;
cursor: pointer;
}
.logout-btn:hover {
background-color: #b91c1c;
}
/* Add this to your CSS section */
.notification-btn {
padding: 0.5rem 1rem; /* Consistent padding with other buttons */
border-radius: 0.5rem;
font-weight: 600;
font-size: 1rem;
color: white;
background-color: #16a34a; /* green-600 */
border: none;
cursor: pointer;
white-space: nowrap; /* Prevent text wrapping */
transition: background-color 0.2s ease;
}
.notification-btn:hover {
background-color: #15803d; /* green-700 */
}
.view-students-btn {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 1rem;
color: white;
background-color: #7c3aed; /* purple-600 */
border: none;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.2s ease;
}
.view-students-btn:hover {
background-color: #6d28d9; /* purple-700 */
}
.notification-item {
position: relative;
padding: 1rem;
padding-right: 3rem; /* Add space for buttons on the right */
}
.notification-item .absolute {
z-index: 10; /* Ensure buttons stay above other content */
margin-top: 7px;
}
.notification-item .[Link]-between {
align-items: flex-start;
gap: 0.5rem;
}
.notification-item .[Link]-gray-800 {
margin-right: 20px;
margin-left: auto; /* Push department badge to the right */
white-space: nowrap; /* Prevent badge text from wrapping */
flex-shrink: 0; /* Prevent badge from shrinking */
}
</style>
</head>
<body>
<div id="app">
<!-- Top Bar -->
<header>
<h1 class="text-xl sm:text-2xl font-bold text-indigo-400">University
Portal</h1>
<div class="flex items-center space-x-4 text-sm sm:text-base">
<span id="current-date" class="font-semibold"></span>
<span id="current-time" class="font-mono bg-gray-700 text-green-400
py-1 px-2 rounded-lg"></span>
</div>
</header>
<!-- Main Content Area - will be dynamically populated -->
<main id="main-content">
<!-- Content will be loaded here by JavaScript -->
</main>
</div>
<script>
function formatTimeForDisplay(time24) {
// Split the time into hours and minutes
const [hours, minutes] = [Link](':').map(Number);
// Determine AM/PM and convert to 12-hour format
const period = hours >= 12 ? 'AM' : 'PM';
let hours12 = hours % 12;
hours12 = hours12 === 0 ? 12 : hours12; // Convert 0 to 12 for 12-hour format
// Format with leading zero for minutes and return
return `${hours12}:${[Link]().padStart(2, '0')} ${period}`;
}
// Add this function to your script
function hasTimeConflict(day, newStartTime, newEndTime, department) {
const timetableForDay = [Link][department][day] || [];
const newStart = convertTimeToMinutes(newStartTime);
const newEnd = convertTimeToMinutes(newEndTime);
// Special case: if end is 0 (midnight), make it 1440 (24:00)
const normalizedNewEnd = newEnd === 0 ? 1440 : newEnd;
for (const item of timetableForDay) {
if ([Link]) {
const [itemStartTime, itemEndTime] = [Link](' - ');
let itemStart = convertTimeToMinutes(itemStartTime);
let itemEnd = convertTimeToMinutes(itemEndTime);
// Normalize midnight (0) to 1440 for proper comparison
itemEnd = itemEnd === 0 ? 1440 : itemEnd;
// Check for overlap
if ((newStart < normalizedNewEnd && itemStart < itemEnd) &&
(newStart < itemEnd && normalizedNewEnd > itemStart)) {
return true;
}
}
}
return false;
}
// Add this after your time conflict checking functions
function showTimeConflictError(message) {
// Remove any existing error modal first
const existingModal = [Link]('.[Link]-modal');
if (existingModal) {
[Link]();
}
// Add the new modal
[Link]('beforeend', renderErrorModal(message));
// Add event listeners to close buttons
const closeModal = () => {
const modal = [Link]('.[Link]-0');
if (modal) {
[Link]();
}
};
// OK button
const closeBtn = [Link]('close-error-modal-btn');
if (closeBtn) {
[Link]('click', closeModal);
}
// X button
const closeBtnX = [Link]('close-error-modal-x');
if (closeBtnX) {
[Link]('click', closeModal);
}
// Also close when clicking outside the modal
const overlay = [Link]('.[Link]-0');
if (overlay) {
[Link]('click', (e) => {
if ([Link] === overlay) {
closeModal();
}
});
}
}
// Helper function to convert time string to minutes
function convertTimeToMinutes(timeStr) {
// Handle empty case
if (!timeStr) return 0;
// Handle 24-hour format (from time inputs)
if ([Link](':') && ) {
const [hours, minutes] = [Link](':').map(Number);
return hours * 60 + minutes;
}
// Handle 12-hour format with AM/PM
if ([Link](' ')) {
const [time, modifier] = [Link](' ');
let [hours, minutes] = [Link](':').map(Number);
if (modifier === 'PM' && hours !== 12) {
hours += 12;
}
if (modifier === 'AM' && hours === 12) {
hours = 0;
}
return hours * 60 + minutes;
}
return 0; // fallback
}
// Constants
const MOCK_ADMINS_KEY = "mockAdmins";
const MOCK_USERS_KEY = "mockUsers";
const TIMETABLE_KEY = "timetableData";
const NOTIFICATIONS_KEY = "notificationsData";
const FACULTY_SUBJECTS_KEY = "facultySubjectsData";
const DEPARTMENTS_KEY = "departmentsData";
const DAYS_OF_WEEK = ['Monday', 'Tuesday', 'Wednesday', 'Thursday',
'Friday', 'Saturday'];
// Initial mock data
const initialTimetable = {};
const initialFacultySubjects = [];
const initialNotifications = [
{ id: 1, title: 'Welcome!', message: 'Welcome to the new digital notice
board.', timestamp: new Date().toISOString() },
{ id: 2, title: 'Exam Timetable', message: 'The mid-term exam schedule
has been updated on the website.', timestamp: new Date([Link]() -
3600000).toISOString() }
];
const initialAdmins = [{ email: 'admin@[Link]', username: 'admin',
password: 'password123' }];
const initialUsers = [{ email: 'student@[Link]', username: 'student',
password: 'password123', department: 'Computer Science' }];
const initialDepartments = ['Computer Science', 'Electrical Engineering',
'Mechanical Engineering'];
// Local storage management
const storage = {
get: (key, defaultValue) => {
try {
const value = [Link](key);
return value ? [Link](value) : defaultValue;
} catch (e) {
[Link]("Error reading from local storage", e);
return defaultValue;
}
},
set: (key, value) => {
try {
[Link](key, [Link](value));
} catch (e) {
[Link]("Error writing to local storage", e);
}
}
};
// Initialize mock data in local storage if it doesn't exist
if () {
[Link](MOCK_ADMINS_KEY, initialAdmins);
}
if () {
[Link](MOCK_USERS_KEY, initialUsers);
}
if () {
[Link](TIMETABLE_KEY, initialTimetable);
}
if () {
[Link](NOTIFICATIONS_KEY, initialNotifications);
}
if () {
[Link](FACULTY_SUBJECTS_KEY, initialFacultySubjects);
}
if () {
[Link](DEPARTMENTS_KEY, initialDepartments);
}
// State management
let state = {
isLoggedIn: false,
isAdmin: false,
view: 'login',
adminTimetable: [Link](TIMETABLE_KEY, {}),
notifications: [Link](NOTIFICATIONS_KEY,
initialNotifications),
facultySubjects: [Link](FACULTY_SUBJECTS_KEY,
initialFacultySubjects),
departments: [Link](DEPARTMENTS_KEY, initialDepartments),
currentDepartment: '',
currentTime: new Date(),
dragItem: null,
draggedOverDay: null,
currentUser: null
};
// Update live time every second
setInterval(() => {
[Link] = new Date();
updateDateTimeDisplay();
}, 1000);
// Update date and time display
function updateDateTimeDisplay() {
const options = { weekday: 'long', year: 'numeric', month: 'numeric',
day: 'numeric' };
[Link]('current-date').textContent =
[Link]('en-GB', options).replace(/,/, '');
const timeOptions = { hour: '2-digit', minute: '2-digit', second: '2-
digit', hour12: false };
[Link]('current-time').textContent =
[Link]('en-US', timeOptions);
}
// Initial render
updateDateTimeDisplay();
render();
// Main render function
function render() {
const mainContent = [Link]('main-content');
switch ([Link]) {
case 'login':
[Link] = renderAuthForm('login');
break;
case 'register':
[Link] = renderAuthForm('register');
break;
case 'forgot-password':
[Link] = renderAuthForm('forgot-password');
break;
case 'dashboard':
[Link] = renderDashboard();
break;
default:
[Link] = renderAuthForm('login');
}
// Attach event listeners after rendering
attachEventListeners();
}
// Auth Form rendering
function renderAuthForm(type) {
return `
<div class="auth-container">
<h2 class="text-3xl font-bold text-center mb-6 text-white
capitalize">${[Link]('-', ' ')}</h2>
password123
<form id="auth-form" class="space-y-6">
${type !== 'forgot-password' ? `
<div class="flex items-center space-x-2">
<input
type="checkbox"
id="adminCheckbox"
class="form-checkbox"
/>
<label for="adminCheckbox" class="text-gray-
300">Admin Login</label>
</div>
` : ''}
${type === 'register' ? `
<div class="auth-input-container">
<svg xmlns="[Link] width="20"
height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="auth-icon">
<rect x="2" y="4" width="20" height="16"
rx="2"></rect>
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06
0L2 7"></path>
</svg>
<input
type="email"
id="email"
placeholder="Email"
required
class="auth-input"
/>
</div>
` : ''}
${(type === 'login' || type === 'register') ? `
<div class="auth-input-container">
<svg xmlns="[Link] width="20"
height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="auth-icon">
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4
4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
<input
type="text"
id="username"
placeholder="Username"
required
class="auth-input"
/>
</div>
` : ''}
${type !== 'forgot-password' ? `
<div class="auth-input-container">
<svg xmlns="[Link] width="20"
height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="auth-icon">
<rect x="3" y="11" width="18" height="11"
rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
<input
type="password"
id="password"
placeholder="Password"
required
class="auth-input"
/>
</div>
` : ''}
${type === 'register' ? `
<div class="auth-input-container">
<label class="block text-gray-400 mb-
1">Department</label>
<select id="department" class="modal-form-select"
required>
<option value="" disabled selected>Select
Department</option>
${[Link](dept => `
<option value="${dept}">${dept}</option>
`).join('')}
</select>
</div>
` : ''}
${type === 'forgot-password' ? `
<div class="auth-input-container">
<svg xmlns="[Link] width="20"
height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="auth-icon">
<rect x="2" y="4" width="20" height="16"
rx="2"></rect>
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06
0L2 7"></path>
</svg>
<input
type="email"
id="forgot-email"
placeholder="Enter your registered email"
required
class="auth-input"
/>
</div>
<div id="otp-container" class="auth-input-container
hidden">
<svg xmlns="[Link] width="20"
height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="auth-icon">
<path d="m21 2-11.4 11.4"></path>
<path d="m14.2 6.6-7.8 7.8"></path>
<circle cx="10" cy="10" r="2"></circle>
<path d="M10 10 2 18"></path>
<path d="m2 22 2-2"></path>
<path d="m18 6 2-2"></path>
</svg>
<input
type="text"
id="otp"
placeholder="Enter OTP"
required
class="auth-input"
/>
</div>
` : ''}
<div id="auth-message" class="text-center text-red-400
text-sm hidden"></div>
<button
type="submit"
class="auth-button"
>
${type === 'login' ? 'Login' : type === 'register' ?
'Register' : 'Send OTP'}
</button>
</form>
<div class="mt-6 text-center text-sm">
${type === 'login' ? `
<div class="space-y-2">
<p class="text-gray-400">
Don't have an account? <span id="go-to-
register" class="text-indigo-400 hover:underline cursor-pointer">Sign up</span>
</p>
<p class="text-gray-400">
<span id="go-to-forgot-password" class="text-
indigo-400 hover:underline cursor-pointer">Forgot Password?</span>
</p>
</div>
` : `
<p class="text-gray-400">
Already have an account? <span id="go-to-login"
class="text-indigo-400 hover:underline cursor-pointer">Log in</span>
</p>
`}
</div>
</div>
`;
}
// Update the renderDashboard() function to this:
function renderDashboard() {
return `
<div class="space-y-8">
<div class="dashboard-header">
<div class="flex space-x-4">
<button id="timetable-tab" class="tab-button ${[Link]
=== 'timetable' ? 'active-tab' : 'inactive-tab'}">
Timetable
</button>
<button id="notifications-tab" class="tab-button $
{[Link] === 'notifications' ? 'active-tab' : 'inactive-tab'}">
Notifications
</button>
${[Link] ? `
<button id="students-tab" class="tab-button $
{[Link] === 'students' ? 'active-tab' : 'inactive-tab'}">
View Students
</button>
` : ''}
</div>
<div class="dashboard-header-controls">
${[Link] ? `
<select id="department-selector" class="department-selector">
<option value="" disabled ${![Link] ? 'selected' :
''}>Select Department</option>
${[Link](dept => `
<option value="${dept}" ${[Link] === dept ? 'selected'
: ''}>${dept}</option>
`).join('')}
</select>
` : `
<select id="student-department-selector"
class="department-selector" disabled>
<option value="${[Link]?.department || ''}" selected>$
{[Link]?.department || 'No Department'}</option>
</select>
`}
<button id="logout-btn" class="logout-btn">
Logout
</button>
</div>
</div>
${[Link] === 'timetable' ? renderTimetable() :
[Link] === 'notifications' ? renderNotifications() :
[Link] === 'students' ? renderStudentsView() : ''}
</div>
`;
}
// Timetable rendering
function renderTimetable() {
const timetableData = ([Link] ?
[Link][[Link]] || {} :
[Link][[Link]?.department] || {});
return `
<div class="timetable-container">
<div class="flex justify-between items-center mb-6">
<h2 class="text-3xl font-bold text-indigo-400">$
{[Link] ? [Link] : [Link]?.department}</h2>
${[Link] ? `
<div class="flex flex-col sm:flex-row space-y-2
sm:space-y-0 sm:space-x-4">
<button id="add-department-btn" class="modal-form-
button bg-blue-800 hover:bg-blue-900">
+ Add Department
</button>
<button id="view-departments-btn" class="modal-
form-button bg-blue-700 hover:bg-blue-800">
View Departments
</button>
<button id="add-faculty-btn" class="modal-form-
button bg-blue-600 hover:bg-blue-700">
+ Add Faculty
</button>
<button id="view-faculty-btn" class="modal-form-
button bg-purple-600 hover:bg-purple-700">
View Faculty
</button>
<button id="add-lecture-btn" class="modal-form-
button bg-green-600 hover:bg-green-700">
+ Add Lecture
</button>
<button id="add-break-btn" class="modal-form-button
bg-gray-600 hover:bg-gray-700">
+ Add Break
</button>
</div>
` : ''}
</div>
<div class="overflow-x-auto">
<div class="timetable-grid">
${DAYS_OF_WEEK.map(day => `
<div key="${day}" class="timetable-day-header">
${day}
</div>
`).join('')}
${DAYS_OF_WEEK.map((day, dayIndex) => `
<div
id="day-${dayIndex}"
class="timetable-day ${[Link] ?
'hover:bg-gray-600' : ''} ${[Link] === dayIndex && [Link] ?
'day-highlight' : ''}"
>
<div class="md:hidden font-bold text-lg text-
indigo-400 border-b border-gray-600 pb-2 mb-2">${day}</div>
${(timetableData[day] || []).map((item, itemIndex) => `
<div
id="item-${dayIndex}-${itemIndex}"
draggable="${[Link]}"
class="timetable-item ${[Link] === 'lecture' ? 'lecture-item' : 'break-
item'} ${[Link] ? 'cursor-grab' : ''}"
>
<p class="font-bold">${[Link] || 'Break'}</p>
<p class="text-sm text-gray-200">${[Link]}</p>
${[Link] ? `<p class="text-xs text-gray-300">(${[Link]})</p>` :
''}
${[Link] ? `
<button
onclick="handleDeleteItem(${dayIndex}, ${itemIndex})"
class="delete-button"
>
x
</button>
` : ''}
</div>
`).join('')}
</div>
`).join('')}
</div>
</div>
</div>
`;
}
// Notifications rendering
function renderNotifications() {
// Filter notifications based on user type and department
let notificationsToShow = [];
if ([Link]) {
// Admins see all notifications
notificationsToShow = [...[Link]];
} else {
// Students see only notifications for their department or 'all'
notifications
notificationsToShow = [Link](n =>
[Link] === [Link]?.department ||
[Link] === 'all' ||
![Link] // Backward compatibility for existing notifications
);
}
const sortedNotifications = [Link]((a, b) => new
Date([Link]) - new Date([Link]));
return `
<div class="timetable-container">
<div class="flex justify-between items-center mb-6">
<h2 class="text-3xl font-bold text-indigo-400">Notifications</h2>
${[Link] ? `
<button id="add-notification-btn" class="notification-btn">
+ Post Notification
</button>
` : ''}
</div>
<div class="space-y-4">
${[Link] > 0 ? [Link](n => `
<div key="${[Link]}" class="notification-item relative">
<div class="flex justify-between items-start mb-2">
<h3 class="font-bold text-xl text-indigo-300">$
{[Link]}</h3>
${[Link] && [Link] !== 'all' ? `
<span class="text-xs bg-gray-800 px-2 py-1
rounded">${[Link]}</span>
` : ''}
</div>
<p class="text-gray-300">${[Link]}</p>
<p class="text-xs text-gray-400 mt-2">
${new Date([Link]).toLocaleString()}
</p>
${[Link] ? `
<div class="absolute top-2 right-2 flex space-x-1">
<button
onclick="handleEditNotification(${[Link]})"
class="text-white bg-blue-500 rounded-full w-6
h-6 flex items-center justify-center text-xs font-bold hover:bg-blue-600"
>
✏️
</button>
<button
onclick="handleDeleteNotification(${[Link]})"
class="text-white bg-red-500 rounded-full w-6
h-6 flex items-center justify-center text-xs font-bold hover:bg-red-600"
>
×
</button>
</div>
` : ''}
</div>
`).join('') : `
<p class="text-center text-gray-400 p-8">No notifications to
display.</p>
`}
</div>
</div>
`;
}
// Add this function to render the students view
function renderStudentsView() {
const users = [Link](MOCK_USERS_KEY, []);
const filteredUsers = [Link] ?
[Link](u => [Link] === [Link]) :
users;
return `
<div class="timetable-container">
<div class="flex justify-between items-center mb-6">
<h2 class="text-3xl font-bold text-indigo-400">Students - $
{[Link] || 'All Departments'}</h2>
</div>
<div class="overflow-x-auto">
<table class="data-table">
<thead>
<tr>
<th>Username</th>
<th>Email</th>
<th>Department</th>
</tr>
</thead>
<tbody>
${[Link] > 0 ? [Link](user => `
<tr>
<td>${[Link]}</td>
<td>${[Link]}</td>
<td>${[Link]}</td>
</tr>
`).join('') : `
<tr>
<td colspan="3" class="text-center py-4 text-gray-
400">No students found</td>
</tr>
`}
</tbody>
</table>
</div>
</div>
`;
}
// Modal rendering functions
function renderAddLectureModal() {
return `
<div class="modal-overlay">
<div class="modal-container">
<h3 class="text-2xl font-bold text-white mb-4">Add New Lecture - $
{[Link]}</h3>
<div class="flex flex-col md:flex-row gap-6">
<!-- Lecture Form (left side) -->
<form id="add-lecture-form" class="modal-form flex-1">
<div>
<label class="block text-gray-400">Day</label>
<select id="lecture-day" class="modal-form-select">
${DAYS_OF_WEEK.map(day => `<option value="${day}">$
{day}</option>`).join('')}
</select>
</div>
<div>
<label class="block text-gray-400">Subject</label>
<select id="lecture-subject" required class="modal-
form-select">
<option value="">Select Subject</option>
${[Link]
.filter(f => [Link] ===
[Link])
.map(f => `<option value="${[Link]}">$
{[Link]}</option>`)
.join('')}
</select>
</div>
<div>
<label class="block text-gray-400">Teacher</label>
<select id="lecture-teacher" required class="modal-
form-select">
<option value="">Select Teacher</option>
</select>
</div>
<div class="modal-form-group">
<div>
<label class="block text-gray-400">Start
Time</label>
<input type="time" id="lecture-start-time"
value="09:00" required class="modal-form-input" />
</div>
<div>
<label class="block text-gray-400">End Time</label>
<input type="time" id="lecture-end-time"
value="10:00" required class="modal-form-input" />
</div>
</div>
<button type="submit" class="modal-form-button">
Add Lecture
</button>
</form>
<!-- Timetable Preview (right side) - Updated with two columns
-->
<div class="preview-panel">
<h4 class="text-lg font-semibold text-indigo-300 mb-3">$
{[Link]}'s <span id="preview-day-name">Monday</span> Schedule</h4>
<div class="flex gap-4">
<div id="day-schedule-preview-col1" class="flex-1
space-y-2">
<!-- First 6 items will appear here -->
</div>
<div id="day-schedule-preview-col2" class="flex-1
space-y-2">
<!-- Items 7+ will appear here -->
</div>
</div>
</div>
</div>
<button id="close-lecture-modal" class="modal-close-button">
<svg xmlns="[Link] width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
</div>
`;
}
function renderAddBreakModal() {
return `
<div class="modal-overlay">
<div class="modal-container">
<h3 class="text-2xl font-bold text-white mb-4">Add New Break - $
{[Link]}</h3>
<div class="flex flex-col md:flex-row gap-6">
<!-- Break Form (left side) -->
<form id="add-break-form" class="modal-form flex-1">
<div>
<label class="block text-gray-400">Day</label>
<select id="break-day" class="modal-form-select">
${DAYS_OF_WEEK.map(day => `<option value="${day}">$
{day}</option>`).join('')}
</select>
</div>
<div class="modal-form-group">
<div>
<label class="block text-gray-400">Start
Time</label>
<input type="time" id="break-start-time"
value="11:00" required class="modal-form-input" />
</div>
<div>
<label class="block text-gray-400">End Time</label>
<input type="time" id="break-end-time"
value="12:00" required class="modal-form-input" />
</div>
</div>
<button type="submit" class="modal-form-button">
Add Break
</button>
</form>
<!-- Updated Timetable Preview with two columns -->
<div class="preview-panel">
<h4 class="text-lg font-semibold text-indigo-300 mb-3">$
{[Link]}'s <span id="preview-break-day-name">Monday</span>
Schedule</h4>
<div class="flex gap-4">
<div id="day-break-schedule-preview-col1" class="flex-1
space-y-2">
<!-- First 6 items will appear here -->
</div>
<div id="day-break-schedule-preview-col2" class="flex-1
space-y-2">
<!-- Items 7+ will appear here -->
</div>
</div>
</div>
</div>
<button id="close-break-modal" class="modal-close-button">
<svg xmlns="[Link] width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
</div>
`;
}
function renderAddNotificationModal() {
return `
<div class="modal-overlay">
<div class="modal-container">
<h3 class="text-2xl font-bold text-white mb-4">Post New
Notification</h3>
<form id="add-notification-form" class="modal-form">
<div>
<label class="block text-gray-400">Department</label>
<select id="notification-department" class="modal-form-
select" required>
<option value="" disabled selected>Select
Department</option>
${[Link](dept => `
<option value="${dept}">${dept}</option>
`).join('')}
<option value="all">All Departments</option>
</select>
</div>
<div>
<label class="block text-gray-400">Title</label>
<input type="text" id="notification-title" required
class="modal-form-input" />
</div>
<div>
<label class="block text-gray-400">Message</label>
<textarea id="notification-message" required class="modal-
form-input" rows="4"></textarea>
</div>
<button type="submit" class="modal-form-button">
Post
</button>
</form>
<button id="close-notification-modal" class="modal-close-button">
<svg xmlns="[Link] width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
</div>
`;
}
function renderAddFacultyModal() {
return `
<div class="modal-overlay">
<div class="modal-container1">
<h3 class="text-2xl font-bold text-white mb-4">Add New Faculty
Subject</h3>
<form id="add-faculty-form" class="modal-form">
<div>
<label class="block text-gray-400">Department(s)</label>
<div class="faculty-checkbox-container">
${[Link](dept => `
<div class="faculty-checkbox-item">
<input
type="checkbox"
id="dept-${dept}"
value="${dept}"
class="form-checkbox"
>
<label for="dept-${dept}" class="ml-2 text-
gray-300">${dept}</label>
</div>
`).join('')}
</div>
</div>
<div>
<label class="block text-gray-400">Teacher Name</label>
<input type="text" id="faculty-teacher" required
class="modal-form-input" />
</div>
<div>
<label class="block text-gray-400">Subjects</label>
<div id="subjects-container" class="space-y-2">
<div class="subject-input-container">
<input type="text" class="subject-input"
placeholder="Subject name" />
<button type="button" onclick="addSubjectField()"
class="add-subject-button">+</button>
</div>
</div>
</div>
<button type="submit" class="modal-form-button">
Add Faculty
</button>
</form>
<button id="close-faculty-modal" class="modal-close-button">
<svg xmlns="[Link] width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
</div>
`;
}
// Add to the global window object for inline event handlers
[Link] = function() {
const container = [Link]('subjects-container');
if (container) {
const newField = [Link]('div');
[Link] = 'subject-input-container';
[Link] = `
<input type="text" class="subject-input" placeholder="Subject name" />
<button type="button" onclick="[Link]()"
class="remove-subject-button">×</button>
`;
[Link](newField);
}
};
function getSelectedDepartments() {
const checkboxes = [Link]('input[type="checkbox"]
[id^="dept-"]:checked');
return [Link](checkboxes).map(cb => [Link]);
}
function getEnteredSubjects() {
const inputs = [Link]('.subject-input');
return [Link](inputs)
.map(input => [Link]())
.filter(subject => [Link] > 0);
}
function renderAddDepartmentModal() {
return `
<div class="modal-overlay">
<div class="modal-container1">
<h3 class="text-2xl font-bold text-white mb-4">Add New
Department</h3>
<form id="add-department-form" class="modal-form">
<div>
<label class="block text-gray-400">Department
Name</label>
<input type="text" id="department-name" required
class="modal-form-input" />
</div>
<button type="submit" class="modal-form-button">
Add Department
</button>
</form>
<button id="close-department-modal" class="modal-close-
button">
<svg xmlns="[Link] width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
</div>
`;
}
function renderViewDepartmentsModal() {
return `
<div class="modal-overlay">
<div class="modal-container" style="max-width: 56rem;">
<h3 class="text-2xl font-bold text-white mb-4">Departments
List</h3>
<div class="overflow-y-auto max-h-[60vh]">
<table class="data-table">
<thead>
<tr>
<th>Department Name</th>
<th>Number of Faculty</th>
<th>Number of Classes</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
${[Link]((department, index) => {
const uniqueTeachers = new Set(
[Link]
.filter(f => [Link] === department)
.map(f => [Link])
);
const facultyCount = [Link];
const classCount =
[Link]([Link][department] || {}).flat().length;
return `
<tr class="hover:bg-gray-700" id="department-row-$
{index}">
<td>${department}</td>
<td>${facultyCount}</td>
<td>${classCount}</td>
<td class="text-right">
<button
onclick="handleEditDepartment('$
{department}')"
class="mr-2 text-blue-400 hover:text-
blue-300"
>
Edit
</button>
<button
onclick="handleDeleteDepartment('$
{department}')"
class="text-red-400 hover:text-red-300"
>
Delete
</button>
</td>
</tr>
`;
}).join('')}
</tbody>
</table>
</div>
<button id="close-view-departments-modal" class="modal-close-
button">
×
</button>
</div>
</div>
`;
}
function renderEditDepartmentModal(oldDepartmentName) {
return `
<div class="modal-overlay">
<div class="modal-container1">
<h3 class="text-2xl font-bold text-white mb-4">Edit Department</h3>
<form id="edit-department-form" class="modal-form">
<input type="hidden" id="old-department-name" value="$
{oldDepartmentName}">
<div>
<label class="block text-gray-400">Department Name</label>
<input type="text" id="new-department-name" value="$
{oldDepartmentName}" required class="modal-form-input" />
</div>
<button type="submit" class="modal-form-button">
Update Department
</button>
</form>
<button id="close-edit-department-modal" class="modal-close-
button">
×
</button>
</div>
</div>
`;
}
function handleEditDepartment(departmentName) {
[Link]('.modal-overlay').remove();
[Link]('beforeend',
renderEditDepartmentModal(departmentName));
attachModalEventListeners('edit-department');
}
function handleUpdateDepartment(oldName, newName) {
if (oldName === newName) {
[Link]('.modal-overlay').remove();
[Link]('beforeend',
renderViewDepartmentsModal());
attachModalEventListeners('view-departments');
return;
}
if ([Link](newName)) {
alert('Department with this name already exists!');
return;
}
// Update departments list
const newDepartments = [Link](d => d === oldName ? newName : d);
[Link] = newDepartments;
[Link](DEPARTMENTS_KEY, newDepartments);
// Update faculty subjects
const newFacultySubjects = [Link](f =>
[Link] === oldName ? {...f, department: newName} : f
);
[Link] = newFacultySubjects;
[Link](FACULTY_SUBJECTS_KEY, newFacultySubjects);
// Update timetable
const newTimetable = {...[Link]};
if (newTimetable[oldName]) {
newTimetable[newName] = newTimetable[oldName];
delete newTimetable[oldName];
}
[Link] = newTimetable;
[Link](TIMETABLE_KEY, newTimetable);
// Update current department if it was the edited one
if ([Link] === oldName) {
[Link] = newName;
}
[Link]('.modal-overlay').remove();
[Link]('beforeend', renderViewDepartmentsModal());
attachModalEventListeners('view-departments');
}
function renderEditNotificationModal(notification) {
return `
<div class="modal-overlay">
<div class="modal-container">
<h3 class="text-2xl font-bold text-white mb-4">Edit
Notification</h3>
<form id="edit-notification-form" class="modal-form">
<input type="hidden" id="edit-notification-id" value="$
{[Link]}">
<div>
<label class="block text-gray-400">Department</label>
<select id="edit-notification-department" class="modal-
form-select" required>
${[Link](dept => `
<option value="${dept}" ${[Link]
=== dept ? 'selected' : ''}>${dept}</option>
`).join('')}
<option value="all" ${[Link] === 'all'
? 'selected' : ''}>All Departments</option>
</select>
</div>
<div>
<label class="block text-gray-400">Title</label>
<input type="text" id="edit-notification-title" value="$
{[Link]}" required class="modal-form-input" />
</div>
<div>
<label class="block text-gray-400">Message</label>
<textarea id="edit-notification-message" required
class="modal-form-input" rows="4">${[Link]}</textarea>
</div>
<button type="submit" class="modal-form-button">
Update Notification
</button>
</form>
<button id="close-edit-notification-modal" class="modal-close-
button">
<svg xmlns="[Link] width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
</div>
`;
}
function renderViewFacultyModal() {
// Group subjects by teacher and include all departments
const facultyByTeacher = {};
[Link](faculty => {
if (!facultyByTeacher[[Link]]) {
facultyByTeacher[[Link]] = {
subjects: [],
departments: []
};
}
// Add unique subjects
if (!facultyByTeacher[[Link]].[Link]([Link]))
{
facultyByTeacher[[Link]].[Link]([Link]);
}
// Add unique departments
if (!
facultyByTeacher[[Link]].[Link]([Link])) {
facultyByTeacher[[Link]].[Link]([Link]);
}
});
return `
<div class="modal-overlay">
<div class="modal-container" style="max-width: 56rem;">
<h3 class="text-2xl font-bold text-white mb-4">Faculty List</h3>
<div class="overflow-y-auto max-h-[60vh]">
<table class="data-table">
<thead>
<tr>
<th>Teacher</th>
<th>Subjects</th>
<th>Departments</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
${[Link](facultyByTeacher).map(([teacher,
data], index) => {
return `
<tr class="hover:bg-gray-700" id="faculty-row-$
{index}">
<td>${teacher}</td>
<td>${[Link](', ')}</td>
<td>${[Link](', ')}</td>
<td class="text-right">
<button
onclick="handleEditFacultyByTeacher('${teacher}')" class="mr-2 text-blue-400
hover:text-blue-300">
Edit
</button>
<button
onclick="handleDeleteFacultyByTeacher('${teacher}')" class="text-red-400
hover:text-red-300">
Delete
</button>
</td>
</tr>
`;
}).join('')}
</tbody>
</table>
</div>
<button id="close-view-faculty-modal" class="modal-close-button">
<svg xmlns="[Link] width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
</div>
`;
}
function renderEditFacultyModal(index) {
const faculty = [Link][index];
return `
<div class="modal-overlay">
<div class="modal-container1">
<h3 class="text-2xl font-bold text-white mb-4">Edit Faculty</h3>
<form id="edit-faculty-form" class="modal-form">
<input type="hidden" id="edit-faculty-index" value="${index}">
<div>
<label class="block text-gray-400">Department</label>
<select id="edit-faculty-department" class="modal-form-
select">
${[Link](dept => `
<option value="${dept}" ${[Link] ===
dept ? 'selected' : ''}>${dept}</option>
`).join('')}
</select>
</div>
<div>
<label class="block text-gray-400">Subject</label>
<input type="text" id="edit-faculty-subject" value="$
{[Link]}" required class="modal-form-input" />
</div>
<div>
<label class="block text-gray-400">Teacher</label>
<input type="text" id="edit-faculty-teacher" value="$
{[Link]}" required class="modal-form-input" />
</div>
<button type="submit" class="modal-form-button">
Update Faculty
</button>
</form>
<button id="close-edit-faculty-modal" class="modal-close-button">
<svg xmlns="[Link] width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
</div>
`;
}
function renderErrorModal(message) {
return `
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-
black bg-opacity-50 backdrop-blur-sm">
<div class="bg-gray-800 p-6 rounded-2xl shadow-2xl border border-red-
500 w-full max-w-md relative animate-fade-in-up">
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-red-400"
xmlns="[Link] fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-
3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div class="ml-3">
<h3 class="text-lg font-medium text-white">Time
Conflict</h3>
<div class="mt-2 text-sm text-gray-300">
<p>${message}</p>
</div>
</div>
</div>
<div class="mt-4 flex justify-end">
<button id="close-error-modal-btn" type="button" class="px-4
py-2 rounded-lg text-sm font-medium text-white bg-red-600 hover:bg-red-700
focus:outline-none focus:ring-2 focus:ring-red-500 transition-colors">
OK
</button>
</div>
<button id="close-error-modal-x" class="absolute top-4 right-4
text-gray-400 hover:text-white transition-colors">
<svg xmlns="[Link] width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
</div>
`;
}
// Event handlers
function handleEditNotification(id) {
const notification = [Link](n => [Link] === id);
if (!notification) return;
[Link]('.modal-overlay')?.remove();
[Link]('beforeend',
renderEditNotificationModal(notification));
attachModalEventListeners('edit-notification');
}
function handleLogin(credentials, userType) {
const users = [Link](userType === 'admin' ? MOCK_ADMINS_KEY :
MOCK_USERS_KEY, []);
const user = [Link](u => [Link] === [Link] &&
[Link] === [Link]);
if (user) {
[Link] = true;
[Link] = userType === 'admin';
[Link] = 'dashboard';
[Link] = 'timetable';
[Link] = user;
[Link] = [Link] || '';
render();
return true;
}
return false;
}
function handleEditFaculty(index) {
[Link]('.modal-overlay').remove();
[Link]('beforeend', renderEditFacultyModal(index));
attachModalEventListeners('edit-faculty');
}
function handleDeleteFaculty(index) {
if (confirm('Are you sure you want to delete this faculty?')) {
const newFacultySubjects = [...[Link]];
[Link](index, 1);
[Link] = newFacultySubjects;
[Link](FACULTY_SUBJECTS_KEY, newFacultySubjects);
// Close the modal and re-render the view
[Link]('.modal-overlay').remove();
[Link]('beforeend', renderViewFacultyModal());
attachModalEventListeners('view-faculty');
}
}
function handleDeleteDepartment(department) {
// Prevent deletion of default departments
if (confirm(`Are you sure you want to delete the ${department} department? This
will also remove all associated faculty and timetable entries.`)) {
// Remove department from departments list
const newDepartments = [Link](d => d !== department);
[Link] = newDepartments;
[Link](DEPARTMENTS_KEY, newDepartments);
// Remove faculty associated with this department
const newFacultySubjects = [Link](f => [Link] !
== department);
[Link] = newFacultySubjects;
[Link](FACULTY_SUBJECTS_KEY, newFacultySubjects);
// Remove timetable entries for this department
const newTimetable = {...[Link]};
delete newTimetable[department];
[Link] = newTimetable;
[Link](TIMETABLE_KEY, newTimetable);
// Update current department if it was the deleted one
// Update current department if it was the deleted one
if ([Link] === department) {
[Link] = newDepartments[0] || '';
}
if ([Link] === 0) {
// Initialize with empty timetable if no departments exist
[Link] = {};
[Link](TIMETABLE_KEY, {});
}
// Close the modal and re-render the view
[Link]('.modal-overlay').remove();
render();
}
}
function handleEditFacultyByTeacher(teacher) {
// Find all faculty entries for this teacher
const facultyEntries = [Link](f => [Link] ===
teacher);
// Create a modal for editing all subjects for this teacher
[Link]('.modal-overlay').remove();
[Link]('beforeend',
renderEditFacultyByTeacherModal(teacher, facultyEntries));
function renderEditFacultyByTeacherModal(teacher, facultyEntries) {
// Get unique subjects and departments for this teacher
const subjects = [...new Set([Link](f => [Link]))];
const departments = [...new Set([Link](f => [Link]))];
return `
<div class="modal-overlay">
<div class="modal-container1">
<h3 class="text-2xl font-bold text-white mb-4">Edit Faculty - $
{teacher}</h3>
<form id="edit-faculty-teacher-form" class="modal-form">
<input type="hidden" id="original-teacher-name" value="$
{teacher}">
<div>
<label class="block text-gray-400">Department(s)</label>
<div class="faculty-checkbox-container">
${[Link](dept => `
<div class="faculty-checkbox-item">
<input
type="checkbox"
id="edit-dept-${dept}"
value="${dept}"
${[Link](dept) ? 'checked' :
''}
class="form-checkbox"
>
<label for="edit-dept-${dept}" class="ml-2
text-gray-300">${dept}</label>
</div>
`).join('')}
</div>
</div>
<div>
<label class="block text-gray-400">Teacher Name</label>
<input type="text" id="edit-teacher-name" value="$
{teacher}" required class="modal-form-input" />
</div>
<div>
<label class="block text-gray-400">Subjects</label>
<div id="edit-subjects-container" class="space-y-2">
${[Link]((subject, i) => `
<div class="subject-input-container">
<input type="text" value="${subject}"
class="subject-input" placeholder="Subject name" />
<button type="button" onclick="${i === 0 ?
'addEditSubjectField()' : '[Link]()'}" class="${i === 0 ? 'add-
subject-button' : 'remove-subject-button'}">
${i === 0 ? '+' : '×'}
</button>
</div>
`).join('')}
</div>
</div>
<button type="submit" class="modal-form-button">
Update
</button>
</form>
<button id="close-edit-faculty-teacher-modal" class="modal-close-
button">
<svg xmlns="[Link] width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-
linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
</div>
`;
}
attachModalEventListeners('edit-faculty-teacher');
}
function handleDeleteFacultyByTeacher(teacher) {
if (confirm(`Are you sure you want to delete all entries for ${teacher}?`)) {
const newFacultySubjects = [Link](f => [Link] !==
teacher);
[Link] = newFacultySubjects;
[Link](FACULTY_SUBJECTS_KEY, newFacultySubjects);
// Close the modal and re-render the view
[Link]('.modal-overlay').remove();
[Link]('beforeend', renderViewFacultyModal());
attachModalEventListeners('view-faculty');
}
}
function handleRegistration(user) {
const users = [Link](MOCK_USERS_KEY, []);
if ([Link](u => [Link] === [Link])) {
return false; // Email already registered
}
const newUsers = [...users, user];
[Link](MOCK_USERS_KEY, newUsers);
return true;
}
function handleLogout() {
[Link] = false;
[Link] = false;
[Link] = 'login';
[Link] = null;
render();
}
function handleDeleteItem(dayIndex, itemIndex) {
if (![Link]) return;
const day = DAYS_OF_WEEK[dayIndex];
const newTimetable = { ...[Link] };
newTimetable[[Link]][day].splice(itemIndex, 1);
[Link] = newTimetable;
[Link](TIMETABLE_KEY, newTimetable);
render();
}
function handleDeleteNotification(id) {
const newNotifications = [Link](n => [Link] !== id);
[Link] = newNotifications;
[Link](NOTIFICATIONS_KEY, newNotifications);
render();
}
// Drag and drop functionality
function handleDragStart(e, dayIndex, itemIndex) {
if (![Link]) return;
[Link] = { dayIndex, itemIndex };
[Link]('dragging');
}
function handleDragOver(e, dayIndex) {
if (![Link]) return;
[Link]();
[Link] = dayIndex;
render();
}
function handleDragEnd(e) {
if (![Link]) return;
[Link]('dragging');
[Link] = null;
[Link] = null;
render();
}
function handleDrop(e, dropDayIndex) {
if (![Link] || ![Link]) return;
[Link]();
const newTimetable = { ...[Link] };
const originalDay = DAYS_OF_WEEK[[Link]];
const dropDay = DAYS_OF_WEEK[dropDayIndex];
const [itemToMove] = newTimetable[[Link]]
[originalDay].splice([Link], 1);
// Check if the item being moved would conflict with existing items
if ([Link]) {
const [startTime, endTime] = [Link](' - ');
if (hasTimeConflict(dropDay, startTime, endTime, [Link]))
{
showTimeConflictError('Cannot move this item - it would conflict with
an existing schedule.');
[Link] = null;
[Link] = null;
render();
return;
}
}
newTimetable[[Link]][dropDay] = [...
(newTimetable[[Link]][dropDay] || []), itemToMove];
[Link] = newTimetable;
[Link](TIMETABLE_KEY, newTimetable);
[Link] = null;
[Link] = null;
render();
}
// Attach event listeners
function attachEventListeners() {
// Auth form events
const authForm = [Link]('auth-form');
if (authForm) {
[Link]('submit', (e) => {
[Link]();
const messageEl = [Link]('auth-message');
[Link]('hidden');
const type = [Link];
const isAdminLogin =
[Link]('adminCheckbox')?.checked || false;
if (type === 'login') {
const username = [Link]('username').value;
const password = [Link]('password').value;
const success = handleLogin({ username, password },
isAdminLogin ? 'admin' : 'student');
if (!success) {
[Link] = 'Invalid credentials. Please
try again.';
[Link]('hidden');
}
} else if (type === 'register') {
const email = [Link]('email').value;
const username = [Link]('username').value;
const password = [Link]('password').value;
const department =
[Link]('department').value;
const success = handleRegistration({ email, username,
password, department });
if (success) {
[Link] = 'Registration successful! You
can now log in.';
[Link]('hidden');
[Link] = 'login';
render();
} else {
[Link] = 'Registration failed. Email
might already be in use.';
[Link]('hidden');
}
} else if (type === 'forgot-password') {
// Mock OTP sending
const otpContainer = [Link]('otp-
container');
[Link]('hidden');
[Link] = 'A mock OTP has been sent to your
email.';
[Link]('hidden');
}
});
}
// Navigation events
const goToRegister = [Link]('go-to-register');
if (goToRegister) {
[Link]('click', () => {
[Link] = 'register';
render();
});
}
const goToLogin = [Link]('go-to-login');
if (goToLogin) {
[Link]('click', () => {
[Link] = 'login';
render();
});
}
const goToForgotPassword = [Link]('go-to-forgot-
password');
if (goToForgotPassword) {
[Link]('click', () => {
[Link] = 'forgot-password';
render();
});
}
// Dashboard events
const timetableTab = [Link]('timetable-tab');
if (timetableTab) {
[Link]('click', () => {
[Link] = 'timetable';
render();
});
}
const notificationsTab = [Link]('notifications-tab');
if (notificationsTab) {
[Link]('click', () => {
[Link] = 'notifications';
render();
});
}
const studentsTab = [Link]('students-tab');
if (studentsTab) {
[Link]('click', () => {
[Link] = 'students';
render();
});
}
const logoutBtn = [Link]('logout-btn');
if (logoutBtn) {
[Link]('click', handleLogout);
}
// Department selector events
const departmentSelector = [Link]('department-
selector');
if (departmentSelector) {
[Link]('change', (e) => {
if ([Link]) { // Only update if a real department was selected
[Link] = [Link];
render();
}
});
}
const studentDepartmentSelector = [Link]('student-
department-selector');
if (studentDepartmentSelector) {
[Link]('change', (e) => {
[Link] = [Link];
render();
});
}
// Timetable events
const addDepartmentBtn = [Link]('add-department-btn');
if (addDepartmentBtn) {
[Link]('click', () => {
[Link]('beforeend',
renderAddDepartmentModal());
attachModalEventListeners('department');
});
}
const viewDepartmentsBtn = [Link]('view-departments-
btn');
if (viewDepartmentsBtn) {
[Link]('click', () => {
[Link]('beforeend',
renderViewDepartmentsModal());
attachModalEventListeners('view-departments');
});
}
const addFacultyBtn = [Link]('add-faculty-btn');
if (addFacultyBtn) {
[Link]('click', () => {
[Link]('beforeend',
renderAddFacultyModal());
attachModalEventListeners('faculty');
});
}
const addLectureBtn = [Link]('add-lecture-btn');
if (addLectureBtn) {
[Link]('click', () => {
[Link]('beforeend',
renderAddLectureModal());
attachModalEventListeners('lecture');
});
}
const addBreakBtn = [Link]('add-break-btn');
if (addBreakBtn) {
[Link]('click', () => {
[Link]('beforeend',
renderAddBreakModal());
attachModalEventListeners('break');
});
}
// Notifications events
const addNotificationBtn = [Link]('add-notification-
btn');
if (addNotificationBtn) {
[Link]('click', () => {
[Link]('beforeend',
renderAddNotificationModal());
attachModalEventListeners('notification');
});
}
const viewFacultyBtn = [Link]('view-faculty-btn');
if (viewFacultyBtn) {
[Link]('click', () => {
[Link]('beforeend', renderViewFacultyModal());
attachModalEventListeners('view-faculty');
});
}
// Drag and drop events
if ([Link] && [Link] === 'timetable') {
DAYS_OF_WEEK.forEach((day, dayIndex) => {
const dayElement = [Link](`day-${dayIndex}`);
if (dayElement) {
[Link]('dragover', (e) =>
handleDragOver(e, dayIndex));
[Link]('drop', (e) => handleDrop(e,
dayIndex));
}
const timetable =
[Link][[Link]]?.[day] || [];
[Link]((item, itemIndex) => {
const itemElement = [Link](`item-$
{dayIndex}-${itemIndex}`);
if (itemElement) {
[Link]('dragstart', (e) =>
handleDragStart(e, dayIndex, itemIndex));
[Link]('dragend', handleDragEnd);
}
});
});
}
}
// Attach modal event listeners
function attachModalEventListeners(type) {
if (type === 'lecture') {
const addLectureForm = [Link]('add-lecture-form');
if (addLectureForm) {
// Function to update the schedule preview
const updateSchedulePreview = () => {
const day = [Link]('lecture-day').value;
[Link]('preview-day-name').textContent = day;
const previewCol1 = [Link]('day-schedule-preview-col1');
const previewCol2 = [Link]('day-schedule-preview-col2');
const schedule = [Link][[Link]]?.[day] || [];
// Clear both columns
[Link] = '';
[Link] = '';
if ([Link] === 0) {
[Link] = '<p class="text-gray-400 text-center py-4">No
classes scheduled for this day</p>';
return;
}
// Split items into two columns
const firstColumnItems = [Link](0, 5);
const secondColumnItems = [Link](5);
// Render first column
[Link](item => {
[Link]('beforeend', `
<div class="preview-item ${[Link] === 'lecture' ? 'bg-indigo-600' :
'bg-gray-600'}">
<div class="flex justify-between items-start">
<div>
<p class="font-bold">${[Link] || 'Break'}</p>
<p class="text-sm text-gray-200">${[Link]}</p>
</div>
${[Link] ? `<span class="text-xs bg-gray-800 px-2 py-1
rounded">${[Link]}</span>` : ''}
</div>
</div>
`);
});
// Render second column if needed
if ([Link] > 0) {
[Link](item => {
[Link]('beforeend', `
<div class="preview-item ${[Link] === 'lecture' ? 'bg-indigo-
600' : 'bg-gray-600'}">
<div class="flex justify-between items-start">
<div>
<p class="font-bold">${[Link] || 'Break'}</p>
<p class="text-sm text-gray-200">${[Link]}</p>
</div>
${[Link] ? `<span class="text-xs bg-gray-800 px-2 py-
1 rounded">${[Link]}</span>` : ''}
</div>
</div>
`);
});
}
};
// Initial update
updateSchedulePreview();
// Update when day changes
[Link]('lecture-day').addEventListener('change',
updateSchedulePreview);
// Update teacher dropdown based on selected subject
const lectureSubject = [Link]('lecture-subject');
const lectureTeacher = [Link]('lecture-teacher');
if (lectureSubject && lectureTeacher) {
[Link]('change', (e) => {
const selectedSubject = [Link];
const teachers = [Link]
.filter(f => [Link] === selectedSubject && [Link] ===
[Link])
.map(f => [Link]);
[Link] = [Link](t =>
`<option value="${t}">${t}</option>`
).join('');
// Trigger schedule preview update when subject changes
updateSchedulePreview();
});
// Trigger initial update
[Link](new Event('change'));
}
// Form submission handler
[Link]('submit', (e) => {
[Link]();
const day = [Link]('lecture-day').value;
const subject = [Link]('lecture-subject').value;
const teacher = [Link]('lecture-teacher').value;
const startTime = [Link]('lecture-start-time').value;
const endTime = [Link]('lecture-end-time').value;
// Format times for display (convert 24h to 12h format)
const formattedStartTime = formatTimeForDisplay(startTime);
const formattedEndTime = formatTimeForDisplay(endTime);
// Check for time conflicts
if (hasTimeConflict(day, formattedStartTime, formattedEndTime,
[Link])) {
showTimeConflictError('There is already a lecture or break
scheduled at this time. Please choose a different time.');
return;
}
const newLecture = {
type: 'lecture',
subject,
teacher,
time: `${formattedStartTime} - ${formattedEndTime}`
};
const newTimetable = {
...[Link],
[[Link]]: {
...[Link][[Link]],
[day]: [...([Link][[Link]][day]
|| []), newLecture]
}
};
[Link] = newTimetable;
[Link](TIMETABLE_KEY, newTimetable);
[Link]('.modal-overlay').remove();
render();
});
const closeLectureModal = [Link]('close-lecture-modal');
if (closeLectureModal) {
[Link]('click', () => {
[Link]('.modal-overlay').remove();
});
}
}
}
else if (type === 'break') {
const addBreakForm = [Link]('add-break-form');
if (addBreakForm) {
// Function to update the break schedule preview with two columns
const updateBreakSchedulePreview = () => {
const day = [Link]('break-day').value;
[Link]('preview-break-day-name').textContent = day;
const previewCol1 = [Link]('day-break-schedule-
preview-col1');
const previewCol2 = [Link]('day-break-schedule-
preview-col2');
const schedule = [Link][[Link]]?.[day]
|| [];
// Clear both columns
[Link] = '';
[Link] = '';
if ([Link] === 0) {
[Link] = '<p class="text-gray-400 text-center py-
4">No classes scheduled for this day</p>';
return;
}
// Split items into two columns
const firstColumnItems = [Link](0, 6);
const secondColumnItems = [Link](6);
// Render first column
[Link](item => {
[Link]('beforeend', `
<div class="preview-item ${[Link] === 'lecture' ? 'bg-
indigo-600' : 'bg-gray-600'}">
<div class="flex justify-between items-start">
<div>
<p class="font-bold">${[Link] || 'Break'}</p>
<p class="text-sm text-gray-200">${[Link]}</p>
</div>
${[Link] ? `<span class="text-xs bg-gray-800 px-2
py-1 rounded">${[Link]}</span>` : ''}
</div>
</div>
`);
});
// Render second column if needed
if ([Link] > 0) {
[Link](item => {
[Link]('beforeend', `
<div class="preview-item ${[Link] === 'lecture' ? 'bg-
indigo-600' : 'bg-gray-600'}">
<div class="flex justify-between items-start">
<div>
<p class="font-bold">${[Link] ||
'Break'}</p>
<p class="text-sm text-gray-200">$
{[Link]}</p>
</div>
${[Link] ? `<span class="text-xs bg-gray-800
px-2 py-1 rounded">${[Link]}</span>` : ''}
</div>
</div>
`);
});
}
};
// Initial update
updateBreakSchedulePreview();
// Update when day changes
[Link]('break-day').addEventListener('change',
updateBreakSchedulePreview);
// Rest of your break modal form submission handler...
[Link]('submit', (e) => {
[Link]();
const day = [Link]('break-day').value;
const startTime = [Link]('break-start-time').value;
const endTime = [Link]('break-end-time').value;
const formattedStartTime = formatTimeForDisplay(startTime);
const formattedEndTime = formatTimeForDisplay(endTime);
if (hasTimeConflict(day, formattedStartTime, formattedEndTime,
[Link])) {
showTimeConflictError('There is already a lecture or break
scheduled at this time. Please choose a different time.');
return;
}
const newBreak = {
type: 'break',
subject: 'Break',
time: `${formattedStartTime} - ${formattedEndTime}`
};
const newTimetable = {
...[Link],
[[Link]]: {
...[Link][[Link]],
[day]: [...([Link][[Link]][day]
|| []), newBreak]
}
};
[Link] = newTimetable;
[Link](TIMETABLE_KEY, newTimetable);
[Link]('.modal-overlay').remove();
render();
});
const closeBreakModal = [Link]('close-break-modal');
if (closeBreakModal) {
[Link]('click', () => {
[Link]('.modal-overlay').remove();
});
}
}
}
else if (type === 'notification') {
const addNotificationForm = [Link]('add-notification-form');
if (addNotificationForm) {
[Link]('submit', (e) => {
[Link]();
const department = [Link]('notification-
department').value;
const title = [Link]('notification-title').value;
const message = [Link]('notification-message').value;
const newNotification = {
id: [Link](),
title,
message,
department, // Store the department with the notification
timestamp: new Date().toISOString()
};
const newNotifications = [...[Link], newNotification];
[Link] = newNotifications;
[Link](NOTIFICATIONS_KEY, newNotifications);
[Link]('.modal-overlay').remove();
render();
});
}
const closeNotificationModal = [Link]('close-notification-
modal');
if (closeNotificationModal) {
[Link]('click', () => {
[Link]('.modal-overlay').remove();
});
}
}
else if (type === 'faculty') {
const addFacultyForm = [Link]('add-faculty-form');
if (addFacultyForm) {
[Link]('submit', (e) => {
[Link]();
const departments = getSelectedDepartments();
const teacher = [Link]('faculty-teacher').value;
const subjects = getEnteredSubjects();
if ([Link] === 0) {
alert('Please select at least one department!');
return;
}
if ([Link] === 0) {
alert('Please enter at least one subject!');
return;
}
if (!teacher) {
alert('Please enter teacher name!');
return;
}
// Create new faculty entries for each department-subject combination
const newFacultySubjects = [...[Link]];
let addedCount = 0;
[Link](department => {
[Link](subject => {
// Check if this combination already exists
if () {
[Link]({ subject, teacher, department });
addedCount++;
}
});
});
if (addedCount === 0) {
alert('All these faculty-subject-department combinations already
exist!');
return;
}
[Link] = newFacultySubjects;
[Link](FACULTY_SUBJECTS_KEY, newFacultySubjects);
[Link]('.modal-overlay').remove();
render();
});
}
const closeFacultyModal = [Link]('close-faculty-modal');
if (closeFacultyModal) {
[Link]('click', () => {
[Link]('.modal-overlay').remove();
});
}
}
else if (type === 'department') {
const addDepartmentForm = [Link]('add-department-
form');
if (addDepartmentForm) {
[Link]('submit', (e) => {
[Link]();
const departmentName = [Link]('department-
name').value;
if ([Link](departmentName)) {
alert('This department already exists!');
return;
}
const newDepartments = [...[Link],
departmentName];
[Link] = newDepartments;
[Link](DEPARTMENTS_KEY, newDepartments);
// Initialize empty timetable for new department if it
doesn't exist
if (![Link][departmentName]) {
const newTimetable = {
...[Link],
[departmentName]: {
'Monday': [],
'Tuesday': [],
'Wednesday': [],
'Thursday': [],
'Friday': [],
'Saturday': []
}
};
[Link] = newTimetable;
[Link](TIMETABLE_KEY, newTimetable);
}
[Link]('.modal-overlay').remove();
render();
});
}
const closeDepartmentModal = [Link]('close-
department-modal');
if (closeDepartmentModal) {
[Link]('click', () => {
[Link]('.modal-overlay').remove();
});
}
}
else if (type === 'view-departments') {
const closeViewDepartmentsModal = [Link]('close-
view-departments-modal');
if (closeViewDepartmentsModal) {
[Link]('click', () => {
[Link]('.modal-overlay').remove();
});
}
}
else if (type === 'view-faculty') {
const closeViewFacultyModal = [Link]('close-view-faculty-
modal');
if (closeViewFacultyModal) {
[Link]('click', () => {
[Link]('.modal-overlay').remove();
});
}
}
else if (type === 'edit-faculty') {
const editFacultyForm = [Link]('edit-faculty-form');
if (editFacultyForm) {
[Link]('submit', (e) => {
[Link]();
const index = [Link]('edit-faculty-index').value;
const department = [Link]('edit-faculty-
department').value;
const subject = [Link]('edit-faculty-subject').value;
const teacher = [Link]('edit-faculty-teacher').value;
const newFacultySubjects = [...[Link]];
newFacultySubjects[index] = { subject, teacher, department };
[Link] = newFacultySubjects;
[Link](FACULTY_SUBJECTS_KEY, newFacultySubjects);
// Close both modals and show updated view
[Link]('.modal-overlay').remove();
render(); // Re-render the main view
});
}
const closeEditFacultyModal = [Link]('close-edit-faculty-
modal');
if (closeEditFacultyModal) {
[Link]('click', () => {
[Link]('.modal-overlay').remove();
// Return to view faculty modal
[Link]('beforeend',
renderViewFacultyModal());
attachModalEventListeners('view-faculty');
});
}
}
else if (type === 'edit-department') {
const editForm = [Link]('edit-department-form');
if (editForm) {
[Link]('submit', (e) => {
[Link]();
const oldName = [Link]('old-department-
name').value;
const newName = [Link]('new-department-
name').value;
handleUpdateDepartment(oldName, newName);
});
}
const closeModal = [Link]('close-edit-department-modal');
if (closeModal) {
[Link]('click', () => {
[Link]('.modal-overlay').remove();
[Link]('beforeend',
renderViewDepartmentsModal());
attachModalEventListeners('view-departments');
});
}
}
else if (type === 'edit-faculty-teacher') {
// In the edit faculty teacher section
const editForm = [Link]('edit-faculty-teacher-form');
if (editForm) {
[Link]('submit', (e) => {
[Link]();
const originalTeacher = [Link]('original-teacher-
name').value;
const newTeacher = [Link]('edit-teacher-name').value;
const departments = getEditSelectedDepartments();
const subjects = getEditEnteredSubjects();
if ([Link] === 0) {
alert('Please select at least one department!');
return;
}
if ([Link] === 0) {
alert('Please enter at least one subject!');
return;
}
if (!newTeacher) {
alert('Please enter teacher name!');
return;
}
// Remove all old entries for this teacher
let newFacultySubjects = [Link](f => [Link] !==
originalTeacher);
// Add new entries for each department-subject combination
[Link](department => {
[Link](subject => {
[Link]({ subject, teacher: newTeacher,
department });
});
});
[Link] = newFacultySubjects;
[Link](FACULTY_SUBJECTS_KEY, newFacultySubjects);
// Close both modals and show updated view
[Link]('.modal-overlay').remove();
[Link]('beforeend', renderViewFacultyModal());
attachModalEventListeners('view-faculty');
});
}
const closeModal = [Link]('close-edit-faculty-teacher-modal');
if (closeModal) {
[Link]('click', () => {
[Link]('.modal-overlay').remove();
[Link]('beforeend',
renderViewFacultyModal());
attachModalEventListeners('view-faculty');
});
}
}
else if (type === 'edit-notification') {
const editForm = [Link]('edit-notification-form');
if (editForm) {
[Link]('submit', (e) => {
[Link]();
const id = parseInt([Link]('edit-notification-
id').value);
const department = [Link]('edit-notification-
department').value;
const title = [Link]('edit-notification-title').value;
const message = [Link]('edit-notification-
message').value;
const updatedNotifications = [Link](n =>
[Link] === id ? { ...n, title, message, department } : n
);
[Link] = updatedNotifications;
[Link](NOTIFICATIONS_KEY, updatedNotifications);
[Link]('.modal-overlay').remove();
render();
});
}
const closeModal = [Link]('close-edit-notification-modal');
if (closeModal) {
[Link]('click', () => {
[Link]('.modal-overlay').remove();
});
}
}
}
// Make some functions globally available for inline event handlers
[Link] = function() {
const container = [Link]('edit-subjects-container');
if (container) {
const newField = [Link]('div');
[Link] = 'subject-input-container';
[Link] = `
<input type="text" class="subject-input" placeholder="Subject name" />
<button type="button" onclick="[Link]()"
class="remove-subject-button">×</button>
`;
[Link](newField);
}
};
function getEditSelectedDepartments() {
const checkboxes = [Link]('input[type="checkbox"][id^="edit-
dept-"]:checked');
return [Link](checkboxes).map(cb => [Link]);
}
function getEditEnteredSubjects() {
const inputs = [Link]('.subject-input');
return [Link](inputs)
.map(input => [Link]())
.filter(subject => [Link] > 0);
}
[Link] = handleDeleteItem;
[Link] = handleDeleteNotification;
[Link] = handleEditFaculty;
[Link] = handleDeleteFaculty;
[Link] = handleEditNotification;
[Link] = handleDeleteDepartment;
[Link] = handleEditDepartment;
</script>
</body>
</html>
You might also like
- Data User 0 Com - Zoho.notebook Files UntitledNo ratings yetData User 0 Com - Zoho.notebook Files Untitled29 pages
