| <!DOCTYPE html>
|
| <html lang="en">
|
|
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Lecturer Dashboard - Attendr</title>
|
| <link rel="stylesheet" href="style.css">
|
| <link
|
| href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@700;800&display=swap"
|
| rel="stylesheet">
|
| </head>
|
|
|
| <body>
|
|
|
|
|
| {% include '_navbar.html' %}
|
|
|
|
|
| <section class="section">
|
| <div class="container">
|
| <h1 class="text-center mb-3">Lecturer Dashboard</h1>
|
|
|
| <div class="grid grid-2 gap-2">
|
|
|
| <div>
|
|
|
| <div id="createSessionCard" class="glass-card mb-2">
|
| <h2>Create Attendance Session</h2>
|
|
|
| <div class="form-group">
|
| <label class="form-label">Course Name</label>
|
| <select id="courseName" class="form-select">
|
| <option value="">Select a course...</option>
|
|
|
| <optgroup label="CORE COURSES">
|
| <option value="SECI1013 - Discrete Structure">SECI1013 - Discrete Structure
|
| </option>
|
| <option value="SECJ1013 - Programming Technique I">SECJ1013 - Programming
|
| Technique
|
| I</option>
|
| <option value="SECR1013 - Digital Logic">SECR1013 - Digital Logic</option>
|
| <option value="SECP1513 - Technology & Information System">SECP1513 - Technology
|
| &
|
| Information System</option>
|
| <option value="SECI1113 - Computational Mathematics">SECI1113 - Computational
|
| Mathematics</option>
|
| <option value="SECI2143 - Probability & Statistical Data Analysis">SECI2143 -
|
| Probability & Statistical Data Analysis</option>
|
| <option value="SECJ1023 - Programming Technique II">SECJ1023 - Programming
|
| Technique
|
| II</option>
|
| <option value="SECR1033 - Computer Organisation and Architecture">SECR1033 -
|
| Computer Organisation and Architecture</option>
|
| <option value="SECD2523 - Database">SECD2523 - Database</option>
|
| <option value="SECD2613 - System Analysis and Design">SECD2613 - System Analysis
|
| and
|
| Design</option>
|
| <option value="SECJ2013 - Data Structure and Algorithm">SECJ2013 - Data
|
| Structure
|
| and Algorithm</option>
|
| <option value="SECR1213 - Network Communications">SECR1213 - Network
|
| Communications
|
| </option>
|
| <option value="SECV2113 - Human Computer Interaction">SECV2113 - Human Computer
|
| Interaction</option>
|
| <option value="SECJ2203 - Software Engineering">SECJ2203 - Software Engineering
|
| </option>
|
| <option value="SECV1223 - Web Programming">SECV1223 - Web Programming</option>
|
| <option value="SECR2043 - Operating Systems">SECR2043 - Operating Systems
|
| </option>
|
| <option value="SECJ2154 - Object Oriented Programming">SECJ2154 - Object
|
| Oriented
|
| Programming</option>
|
| <option value="SECR3032 - Computer Networks and Security Project I">SECR3032 -
|
| Computer Networks and Security Project I</option>
|
| <option value="SECJ3203 - Theory of Computer Science">SECJ3203 - Theory of
|
| Computer
|
| Science</option>
|
| <option value="SECR4118 - Industrial Training">SECR4118 - Industrial Training
|
| </option>
|
| <option value="SECR4114 - Industrial Training Report">SECR4114 - Industrial
|
| Training
|
| Report</option>
|
| <option value="SECR4134 - Computer Networks and Security Project II">SECR4134 -
|
| Computer Networks and Security Project II</option>
|
| <option value="SCSD3761 - Technopreneurship Seminar">SCSD3761 -
|
| Technopreneurship
|
| Seminar</option>
|
| </optgroup>
|
|
|
| <optgroup label="ELECTIVES - SECRH">
|
| <option value="SECR3104 - Applications Development">SECR3104 - Applications
|
| Development</option>
|
| <option value="SECJ3553 - Artificial Intelligence">SECJ3553 - Artificial
|
| Intelligence</option>
|
| <option value="SECR2242 - Computer Networks">SECR2242 - Computer Networks
|
| </option>
|
| <option value="SECR2941 - Computer Networks Lab">SECR2941 - Computer Networks
|
| Lab
|
| </option>
|
| <option value="SECR3241 - Internetworking Technology">SECR3241 - Internetworking
|
| Technology</option>
|
| <option value="SECR3941 - Internetworking Technology Lab">SECR3941 -
|
| Internetworking
|
| Technology Lab</option>
|
| <option value="SECR3413 - Computer Security">SECR3413 - Computer Security
|
| </option>
|
| <option value="SECR3443 - Cryptography">SECR3443 - Cryptography</option>
|
| <option value="SECR3223 - High Performance & Parallel Computing">SECR3223 - High
|
| Performance & Parallel Computing</option>
|
| <option value="SECR3253 - Network Programming">SECR3253 - Network Programming
|
| </option>
|
| <option value="SECR3263 - Wireless Sensor Network">SECR3263 - Wireless Sensor
|
| Network</option>
|
| <option value="SECR4453 - Network Security">SECR4453 - Network Security</option>
|
| <option value="SECR4483 - Secure Programming">SECR4483 - Secure Programming
|
| </option>
|
| <option value="SECR4973 - Special Topics on Computer Network & Security">
|
| SECR4973 -
|
| Special Topics on Computer Network & Security</option>
|
| </optgroup>
|
|
|
| <optgroup label="ELECTIVES - PRISMS">
|
| <option value="SECR5013 - Cryptographic Engineering">SECR5013 - Cryptographic
|
| Engineering</option>
|
| <option value="SECR5023 - Digital Forensics">SECR5023 - Digital Forensics
|
| </option>
|
| <option value="SECR5033 - Information Security Governance and Risk Management">
|
| SECR5033 - Information Security Governance and Risk Management</option>
|
| <option value="SECR5043 - Cloud Computing Security">SECR5043 - Cloud Computing
|
| Security</option>
|
| <option value="SECR5053 - Penetration Testing">SECR5053 - Penetration Testing
|
| </option>
|
| <option value="SECJ5013 - Secure Software Engineering">SECJ5013 - Secure
|
| Software
|
| Engineering</option>
|
| <option value="SECJ5023 - Advanced Theory of Computer Science">SECJ5023 -
|
| Advanced
|
| Theory of Computer Science</option>
|
| <option value="SECJ5033 - Advanced Data Structure and Algorithms">SECJ5033 -
|
| Advanced Data Structure and Algorithms</option>
|
| <option value="SECJ5043 - Advanced Artificial Intelligence">SECJ5043 - Advanced
|
| Artificial Intelligence</option>
|
| <option value="SECP5013 - Advanced Analytics for Data Science">SECP5013 -
|
| Advanced
|
| Analytics for Data Science</option>
|
| <option value="SECP5023 - Big Data Management">SECP5023 - Big Data Management
|
| </option>
|
| <option value="SECP5033 - Business Intelligence and Analytics">SECP5033 -
|
| Business
|
| Intelligence and Analytics</option>
|
| <option value="SECP5043 - Data Science Governance">SECP5043 - Data Science
|
| Governance</option>
|
| <option value="SECP5053 - Massive Mining and Streaming">SECP5053 - Massive
|
| Mining
|
| and Streaming</option>
|
| <option value="SECP5063 - Statistics for Data Science">SECP5063 - Statistics for
|
| Data Science</option>
|
| </optgroup>
|
|
|
| <optgroup label="UNIVERSITY GENERAL COURSES">
|
| <option value="UHIS1022 - Philosophy and Current Issues">UHIS1022 - Philosophy
|
| and
|
| Current Issues</option>
|
| <option value="UHMS1182 - Appreciation of Ethics and Civilisation">UHMS1182 -
|
| Appreciation of Ethics and Civilisation</option>
|
| <option value="UHLM1012 - Malaysia Language for Communication">UHLM1012 -
|
| Malaysia
|
| Language for Communication</option>
|
| <option value="ULRS3032 - Entrepreneurship and Innovation">ULRS3032 -
|
| Entrepreneurship and Innovation</option>
|
| <option value="ULRS1012 - Value and Identity">ULRS1012 - Value and Identity
|
| </option>
|
| <option value="UKQF2xx2 - Service Learning Co-curriculum Elective">UKQF2xx2 -
|
| Service Learning Co-curriculum Elective</option>
|
| <option value="UHLB2122 - Academic Communication Skills">UHLB2122 - Academic
|
| Communication Skills</option>
|
| <option value="UHLB3132 - Professional Communication Skills">UHLB3132 -
|
| Professional
|
| Communication Skills</option>
|
| <option value="UHLx1112 - Foreign Language Elective">UHLx1112 - Foreign Language
|
| Elective</option>
|
| </optgroup>
|
| </select>
|
| </div>
|
|
|
| <div class="form-group">
|
| <label class="form-label">Lecturer Name</label>
|
| <input type="text" id="lecturerName" class="form-input" placeholder="Your name">
|
| </div>
|
|
|
| <div class="form-group">
|
| <label class="form-label">Classroom</label>
|
| <select id="classroomSelect" class="form-select">
|
| <option value="">Loading classrooms...</option>
|
| </select>
|
| </div>
|
|
|
| <button id="createSessionBtn" class="btn btn-primary">Create Session</button>
|
| </div>
|
|
|
|
|
| <div class="glass-card">
|
| <h3>Active Sessions</h3>
|
| <div id="sessionsList" class="mt-2">
|
| <p class="text-muted">No active sessions</p>
|
| </div>
|
| <div class="mt-3" style="border-top: 1px solid var(--color-border); padding-top: 1rem;">
|
| <a href="/lecturer/history" class="btn btn-outline" style="width: 100%;">📊 View All Session
|
| History</a>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div>
|
|
|
| <div id="codeDisplayCard" class="glass-card mb-2 hidden">
|
| <h2 class="text-center">Attendance Code</h2>
|
| <div class="code-display" id="attendanceCodeDisplay">------</div>
|
| <div class="text-center">
|
| <p class="text-muted" id="codeTimer">Refreshes in: --s</p>
|
| <p class="text-muted" style="font-size: 0.875rem;">Code refreshes every 10 seconds</p>
|
| </div>
|
| <button id="endSessionBtn" class="btn btn-outline mt-2" style="width: 100%;">End
|
| Session</button>
|
| </div>
|
|
|
|
|
| <div id="statsCard" class="glass-card mb-2 hidden">
|
| <h3>Attendance Statistics</h3>
|
| <div class="grid grid-2 gap-2 mt-2">
|
| <div class="text-center">
|
| <div style="font-size: 2.5rem; font-weight: 700; color: var(--color-success);"
|
| id="presentCount">0</div>
|
| <p class="text-muted">Present</p>
|
| </div>
|
| <div class="text-center">
|
| <div style="font-size: 2.5rem; font-weight: 700; color: var(--color-primary);"
|
| id="sessionDuration">0m</div>
|
| <p class="text-muted">Duration</p>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="attendanceListCard" class="glass-card hidden">
|
| <div
|
| style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
| <h3 style="margin: 0;">Attendance Records</h3>
|
| <button id="exportBtn" class="btn btn-secondary"
|
| style="padding: 0.5rem 1rem; font-size: 0.875rem;">📥 Export</button>
|
| </div>
|
| <div id="attendanceList" style="max-height: 400px; overflow-y: auto;">
|
| <p class="text-muted">No attendance records yet</p>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </section>
|
|
|
|
|
| <div id="loadingOverlay" class="loading-overlay hidden">
|
| <div class="text-center">
|
| <div class="spinner"></div>
|
| <p class="mt-2" id="loadingText">Processing...</p>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="messageDisplay" class="hidden"
|
| style="position: fixed; top: 100px; right: 20px; z-index: 9999; max-width: 400px;"></div>
|
|
|
| <script src="{{ url_for('static', filename='js/lecturer.js') }}"></script>
|
| <script>
|
| async function logout() {
|
| if (!confirm('Are you sure you want to logout?')) return;
|
|
|
| try {
|
| const response = await fetch('/api/auth/logout', {
|
| method: 'POST',
|
| headers: { 'Content-Type': 'application/json' }
|
| });
|
|
|
| const data = await response.json();
|
|
|
| if (data.success) {
|
| alert(data.message);
|
| window.location.href = '/';
|
| } else {
|
| alert('Logout failed');
|
| }
|
| } catch (error) {
|
| alert('Logout failed');
|
| }
|
| }
|
| </script>
|
| </body>
|
|
|
| </html> |
