···
import { css, html, LitElement } from "lit";
import { customElement, state } from "lit/decorators.js";
+
import type { MeetingTime } from "./meeting-time-picker";
+
import "./meeting-time-picker";
···
@state() showCreateModal = false;
@state() activeTab: "classes" | "waitlist" = "classes";
@state() approvingEntry: WaitlistEntry | null = null;
+
@state() meetingTimes: MeetingTime[] = [];
+
@state() editingClass = {
+
year: new Date().getFullYear(),
static override styles = css`
···
+
.form-group input:focus,
+
.form-group select:focus {
border-color: var(--primary);
+
border: 2px solid var(--secondary);
+
background: var(--background);
+
box-sizing: border-box;
+
grid-template-columns: 1fr 1fr;
···
private handleApproveWaitlist(entry: WaitlistEntry) {
this.approvingEntry = entry;
+
// Pre-fill form with waitlist data
+
courseCode: entry.course_code,
+
courseName: entry.course_name,
+
professor: entry.professor,
+
semester: entry.semester,
// Parse meeting times from JSON if available, otherwise use empty array
if (entry.meeting_times) {
const parsed = JSON.parse(entry.meeting_times);
+
this.meetingTimes = Array.isArray(parsed) && parsed.length > 0 ? parsed : [];
+
this.meetingTimes = [];
+
this.meetingTimes = [];
+
private handleMeetingTimesChange(e: CustomEvent) {
+
this.meetingTimes = e.detail;
+
private handleClassFieldInput(field: string, e: Event) {
+
const value = (e.target as HTMLInputElement | HTMLSelectElement).value;
+
this.editingClass = { ...this.editingClass, [field]: value };
private cancelApproval() {
this.approvingEntry = null;
+
this.meetingTimes = [];
+
year: new Date().getFullYear(),
private async submitApproval() {
if (!this.approvingEntry) return;
+
if (this.meetingTimes.length === 0) {
this.error = "Please add at least one meeting time";
+
// Convert MeetingTime objects to label strings
+
const labels = this.meetingTimes.map((t) => t.label);
const response = await fetch("/api/classes", {
headers: { "Content-Type": "application/json" },
+
course_code: this.editingClass.courseCode,
+
name: this.editingClass.courseName,
+
professor: this.editingClass.professor,
+
semester: this.editingClass.semester,
+
year: this.editingClass.year,
+
const data = await response.json();
+
console.error("Failed to create class:", data);
+
throw new Error(data.error || "Failed to create class");
+
await fetch(`/api/admin/waitlist/${this.approvingEntry.id}`, {
···
this.activeTab = "classes";
this.approvingEntry = null;
+
this.meetingTimes = [];
+
year: new Date().getFullYear(),
+
console.error("Error in submitApproval:", error);
+
this.error = error instanceof Error ? error.message : "Failed to approve waitlist entry. Please try again.";
private renderApprovalModal() {
if (!this.approvingEntry) return "";
<div class="modal-overlay" @click=${this.cancelApproval}>
<div class="modal" @click=${(e: Event) => e.stopPropagation()}>
+
<h2 class="modal-title">Review & Create Class</h2>
<p style="margin-bottom: 1.5rem; color: var(--paynes-gray);">
+
Review the class details and make any edits before creating
+
${this.error ? html`<div class="error-message">${this.error}</div>` : ""}
+
<div class="form-grid">
+
<div class="form-group">
+
<label>Course Code *</label>
+
.value=${this.editingClass.courseCode}
+
@input=${(e: Event) => this.handleClassFieldInput("courseCode", e)}
+
<div class="form-group">
+
<label>Course Name *</label>
+
.value=${this.editingClass.courseName}
+
@input=${(e: Event) => this.handleClassFieldInput("courseName", e)}
+
<div class="form-group">
+
<label>Professor *</label>
+
.value=${this.editingClass.professor}
+
@input=${(e: Event) => this.handleClassFieldInput("professor", e)}
+
<div class="form-group">
+
<label>Semester *</label>
+
.value=${this.editingClass.semester}
+
@change=${(e: Event) => this.handleClassFieldInput("semester", e)}
+
<option value="">Select semester</option>
+
<option value="Spring">Spring</option>
+
<option value="Summer">Summer</option>
+
<option value="Fall">Fall</option>
+
<option value="Winter">Winter</option>
+
<div class="form-group">
+
.value=${this.editingClass.year.toString()}
+
@input=${(e: Event) => this.handleClassFieldInput("year", e)}
+
<div class="form-group form-group-full">
+
<label>Meeting Times *</label>
+
.value=${this.meetingTimes}
+
@change=${this.handleMeetingTimesChange}
+
></meeting-time-picker>
···
@click=${this.submitApproval}
+
?disabled=${this.meetingTimes.length === 0}
dunkirk.sh