Talk Component Frontend

The talk component includes two specialized frontend applications for schedule management and navigation.

Note

This documentation covers the frontend applications specific to the talk component. For the video webapp, see Video Component Frontend - Web Application.

Schedule Editor Application

A TypeScript/Vue 3 application for visual schedule editing and management.

Location: app/eventyay/frontend/schedule-editor/

Framework: Vue 3 with TypeScript

Purpose: Interactive drag-and-drop schedule management for event organizers

Architecture

Build System: Vite

Language: TypeScript

Styling: Stylus preprocessor

i18n: Custom i18next integration

Key Features

Interactive Schedule Management

  • Drag-and-Drop Interface: Move sessions between time slots and rooms

  • Visual Grid Layout: See the entire schedule at a glance

  • Time Slot Management: Create and adjust time blocks

  • Room/Track Visualization: Manage parallel tracks and venues

  • Conflict Detection: Automatically detect scheduling conflicts

  • Real-Time Updates: Changes saved immediately via API

  • Responsive Design: Works on desktop and tablet devices

Components

Main Application

File: src/App.vue

The main schedule editor interface containing: - Grid-based schedule view - Session management - Room and track controls - Save/undo functionality

Grid Schedule Component

File: src/components/GridSchedule.vue

Renders the interactive schedule grid with: - Time slots on Y-axis - Rooms/tracks on X-axis - Draggable session cards - Visual conflict indicators - Zoom and pan controls

Session Component

File: src/components/Session.vue

Individual session card showing: - Session title and speaker - Duration and time - Track/category - Status indicators - Quick-edit options

API Integration

TypeScript API Client

File: src/api.ts

Provides typed API methods for:

Schedule Operations:

 1   // Fetch schedule data
 2   async function fetchSchedule(eventId: string): Promise<Schedule>
 3// Update session time
 4async function updateSessionTime(
 5    sessionId: string,
 6    start: Date,
 7    room: string
 8): Promise<void>
 9
10// Validate schedule
11async function validateSchedule(eventId: string): Promise<ValidationResult>

Data Models:

 1   interface Session {
 2       id: string;
 3       title: string;
 4       speakers: Speaker[];
 5       start: Date;
 6       end: Date;
 7       room: Room;
 8       track: Track;
 9   }
10interface Schedule {
11    sessions: Session[];
12    rooms: Room[];
13    tracks: Track[];
14    days: Day[];
15}

Utilities

File: src/utils.ts

Utility functions for: - Date/time manipulation - Conflict detection - Schedule validation - Data formatting

File: src/schemas.ts

TypeScript schemas and types for: - API responses - Schedule data structures - Validation rules

Internationalization

Implementation: i18next

Locales (locales/): - English (en) - Complete

Parser Configuration: i18next-parser.config.cjs

Usage:

   import { t } from './lib/i18n';
// In components
const title = t('schedule.edit_session');

Styling

Files (src/styles/):

  • global.styl - Global styles and layout

  • variables.styl - CSS variables, colors, breakpoints

Theme: - eventyay brand colors - Consistent with main application - Responsive grid layout - Accessible color contrast

Development

Setup: .. code-block:: bash

cd app/eventyay/frontend/schedule-editor npm install npm run dev

Build: .. code-block:: bash

npm run build # Output: dist/ directory

Configuration: - vite.config.js - Vite build configuration - tsconfig.json - TypeScript configuration - eslint.config.js - Code quality rules

Development Workflow

Local Development

1. Start Backend: .. code-block:: bash

cd app make run

2. Start Schedule Editor: .. code-block:: bash

cd app/eventyay/frontend/schedule-editor npm install npm run dev # Access: http://localhost:5173

3. Start Global Nav Menu: .. code-block:: bash

cd app/eventyay/frontend/global-nav-menu npm install npm run dev # Access: http://localhost:5174

Testing

Linting:

1# Schedule Editor
2cd app/eventyay/frontend/schedule-editor
3npm run lint
4
5# Global Nav Menu
6cd app/eventyay/frontend/global-nav-menu
7npx biome check src/

Type Checking:

# Both projects
npm run type-check  # or tsc --noEmit

Production Build

1# Schedule Editor
2cd app/eventyay/frontend/schedule-editor
3npm run build
4# Output: dist/
5
6# Global Nav Menu
7cd app/eventyay/frontend/global-nav-menu
8npm run build
9# Output: dist/js/global-nav-menu.js

Deployment: Built assets are collected by Django’s static file system.

Best Practices

TypeScript

  1. Use Strict Mode: Enable all strict checks

  2. Type Everything: Avoid any, use proper types

  3. Interfaces First: Define interfaces before implementation

  4. Generics: Use generics for reusable components

Vue 3 Composition API

  1. Setup Function: Use <script setup> syntax

  2. Reactive: Use ref and reactive properly

  3. Computed: Use computed for derived state

  4. Lifecycle: Use composition API lifecycle hooks

Code Quality

  1. Biome/ESLint: Follow configured rules

  2. Formatting: Consistent code style

  3. Comments: Document complex logic

  4. Naming: Clear, descriptive names

Performance

  1. Lazy Loading: Dynamic imports for routes

  2. Virtual Scrolling: For large schedules

  3. Debouncing: Debounce API calls

  4. Caching: Cache computed values

Troubleshooting

Common Issues

TypeScript Errors

  • Check tsconfig.json settings

  • Verify type definitions installed

  • Run npm install to update types

Build Fails

  • Clear node_modules and reinstall

  • Check Node.js version (18+)

  • Verify Vite configuration

Component Not Loading

  • Check browser console for errors

  • Verify script path in templates

  • Check for CORS issues

Schedule Not Saving

  • Verify backend API is running

  • Check network tab for failed requests

  • Verify authentication token

UnoCSS Classes Not Working

  • Check uno.config.ts configuration

  • Verify class names are valid

  • Rebuild to regenerate CSS

Further Reading

See Also