generated from bisco/codex-bootstrap
feat: add Angular frontend skeleton
This commit is contained in:
74
frontend/src/app/pages/booking-placeholder-page.component.ts
Normal file
74
frontend/src/app/pages/booking-placeholder-page.component.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDividerModule } from '@angular/material/divider';
|
||||
import { MatListModule } from '@angular/material/list';
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
imports: [MatCardModule, MatDividerModule, MatListModule],
|
||||
template: `
|
||||
<section class="page">
|
||||
<header class="page-header">
|
||||
<p class="eyebrow">Booking</p>
|
||||
<h1>Performance {{ performanceId }}</h1>
|
||||
<p class="supporting">
|
||||
This page will host the reservation form and confirmation states backed by the existing booking APIs.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<mat-card class="content-card">
|
||||
<mat-card-title>Planned interactions</mat-card-title>
|
||||
<mat-card-content>
|
||||
<mat-list>
|
||||
<mat-list-item>Load performance detail and availability</mat-list-item>
|
||||
<mat-list-item>Submit pending reservation</mat-list-item>
|
||||
<mat-list-item>Show email confirmation guidance</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</section>
|
||||
`,
|
||||
styles: [`
|
||||
.page {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 10px;
|
||||
color: var(--azionelab-accent);
|
||||
text-transform: uppercase;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
}
|
||||
|
||||
.supporting {
|
||||
color: var(--azionelab-muted);
|
||||
line-height: 1.6;
|
||||
max-width: 50ch;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--azionelab-border);
|
||||
background: var(--azionelab-surface);
|
||||
box-shadow: var(--azionelab-shadow);
|
||||
}
|
||||
`],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class BookingPlaceholderPageComponent {
|
||||
protected readonly performanceId = this.route.snapshot.paramMap.get('performanceId') ?? '0';
|
||||
|
||||
constructor(private readonly route: ActivatedRoute) {}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
imports: [MatCardModule, MatFormFieldModule, MatInputModule],
|
||||
template: `
|
||||
<section class="page">
|
||||
<header class="page-header">
|
||||
<p class="eyebrow">Staff check-in</p>
|
||||
<h1>Mobile-friendly placeholder</h1>
|
||||
<p class="supporting">
|
||||
This route is ready for the authenticated token preview and check-in confirmation flow.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<mat-card class="content-card">
|
||||
<mat-card-title>Future scan/lookup input</mat-card-title>
|
||||
<mat-card-content>
|
||||
<mat-form-field appearance="outline" class="full-width">
|
||||
<mat-label>Opaque QR token</mat-label>
|
||||
<input matInput placeholder="Paste or scan token" readonly>
|
||||
</mat-form-field>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</section>
|
||||
`,
|
||||
styles: [`
|
||||
.page {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 10px;
|
||||
color: var(--azionelab-accent);
|
||||
text-transform: uppercase;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
}
|
||||
|
||||
.supporting {
|
||||
color: var(--azionelab-muted);
|
||||
line-height: 1.6;
|
||||
max-width: 50ch;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--azionelab-border);
|
||||
background: var(--azionelab-surface);
|
||||
box-shadow: var(--azionelab-shadow);
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
`],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class CheckInPlaceholderPageComponent {}
|
||||
113
frontend/src/app/pages/home-page.component.ts
Normal file
113
frontend/src/app/pages/home-page.component.ts
Normal file
@@ -0,0 +1,113 @@
|
||||
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
|
||||
import { API_BASE_URL } from '../services/api-config.token';
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
imports: [RouterLink, MatButtonModule, MatCardModule],
|
||||
template: `
|
||||
<section class="hero">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow">AzioneLab Theatre Company</p>
|
||||
<h1>Public website and booking UI foundations.</h1>
|
||||
<p class="supporting">
|
||||
This Angular shell is wired for the existing Django APIs and ready for the next booking-focused iterations.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a mat-flat-button color="primary" routerLink="/shows">Browse shows</a>
|
||||
<a mat-stroked-button routerLink="/check-in">Check-in area</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-panel">
|
||||
<mat-card>
|
||||
<mat-card-title>Frontend wiring</mat-card-title>
|
||||
<mat-card-content>
|
||||
<p><strong>API base URL</strong></p>
|
||||
<code>{{ apiBaseUrl }}</code>
|
||||
<p class="panel-note">Placeholders are in place for public content, booking, and staff check-in flows.</p>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</section>
|
||||
`,
|
||||
styles: [`
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
|
||||
gap: 28px;
|
||||
align-items: stretch;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
padding: 36px 0;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 12px;
|
||||
color: var(--azionelab-accent);
|
||||
text-transform: uppercase;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
max-width: 10ch;
|
||||
font-size: clamp(2.5rem, 5vw, 4.75rem);
|
||||
line-height: 0.95;
|
||||
}
|
||||
|
||||
.supporting {
|
||||
max-width: 52ch;
|
||||
color: var(--azionelab-muted);
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.65;
|
||||
margin: 20px 0 0;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.hero-panel mat-card {
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--azionelab-border);
|
||||
background: var(--azionelab-surface);
|
||||
box-shadow: var(--azionelab-shadow);
|
||||
}
|
||||
|
||||
code {
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
background: rgba(30, 27, 24, 0.06);
|
||||
}
|
||||
|
||||
.panel-note {
|
||||
margin-top: 20px;
|
||||
color: var(--azionelab-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
`],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class HomePageComponent {
|
||||
protected readonly apiBaseUrl = inject(API_BASE_URL);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||
import { TitleCasePipe } from '@angular/common';
|
||||
import { ActivatedRoute, RouterLink } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
imports: [TitleCasePipe, RouterLink, MatButtonModule, MatCardModule],
|
||||
template: `
|
||||
<section class="page">
|
||||
<header class="page-header">
|
||||
<p class="eyebrow">Show detail</p>
|
||||
<h1>{{ slug | titlecase }}</h1>
|
||||
<p class="supporting">
|
||||
This placeholder will bind to the public show detail and performance endpoints.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<mat-card class="content-card">
|
||||
<mat-card-title>Next UI step</mat-card-title>
|
||||
<mat-card-content>
|
||||
<p>Wire show copy, upcoming performances, and booking entry points from the backend contract.</p>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<a mat-button routerLink="/book/10">Open booking placeholder</a>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</section>
|
||||
`,
|
||||
styles: [`
|
||||
.page {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 10px;
|
||||
color: var(--azionelab-accent);
|
||||
text-transform: uppercase;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(2rem, 4vw, 3.2rem);
|
||||
}
|
||||
|
||||
.supporting {
|
||||
color: var(--azionelab-muted);
|
||||
line-height: 1.6;
|
||||
max-width: 52ch;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--azionelab-border);
|
||||
background: var(--azionelab-surface);
|
||||
box-shadow: var(--azionelab-shadow);
|
||||
}
|
||||
`],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class ShowDetailPlaceholderPageComponent {
|
||||
protected readonly slug = this.route.snapshot.paramMap.get('slug') ?? 'show';
|
||||
|
||||
constructor(private readonly route: ActivatedRoute) {}
|
||||
}
|
||||
125
frontend/src/app/pages/show-list-page.component.ts
Normal file
125
frontend/src/app/pages/show-list-page.component.ts
Normal file
@@ -0,0 +1,125 @@
|
||||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatChipsModule } from '@angular/material/chips';
|
||||
|
||||
type DemoShow = {
|
||||
slug: string;
|
||||
title: string;
|
||||
summary: string;
|
||||
venue: string;
|
||||
startsAt: string;
|
||||
};
|
||||
|
||||
@Component({
|
||||
standalone: true,
|
||||
imports: [RouterLink, MatButtonModule, MatCardModule, MatChipsModule],
|
||||
template: `
|
||||
<section class="page">
|
||||
<header class="page-header">
|
||||
<div>
|
||||
<p class="eyebrow">Public shows</p>
|
||||
<h1>Show list placeholder</h1>
|
||||
</div>
|
||||
<p class="supporting">
|
||||
This page is ready to bind to <code>GET /api/shows/</code> and <code>GET /api/performances/</code>.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div class="show-grid">
|
||||
@for (show of demoShows; track show.slug) {
|
||||
<mat-card class="show-card">
|
||||
<mat-card-title>{{ show.title }}</mat-card-title>
|
||||
<mat-card-subtitle>{{ show.venue }}</mat-card-subtitle>
|
||||
<mat-card-content>
|
||||
<p>{{ show.summary }}</p>
|
||||
<mat-chip-set>
|
||||
<mat-chip>{{ show.startsAt }}</mat-chip>
|
||||
</mat-chip-set>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<a mat-button [routerLink]="['/shows', show.slug]">Open detail</a>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
`,
|
||||
styles: [`
|
||||
.page {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
|
||||
gap: 24px;
|
||||
align-items: end;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 10px;
|
||||
color: var(--azionelab-accent);
|
||||
text-transform: uppercase;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(2rem, 4vw, 3rem);
|
||||
}
|
||||
|
||||
.supporting {
|
||||
margin: 0;
|
||||
color: var(--azionelab-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.show-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.show-card {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--azionelab-border);
|
||||
background: var(--azionelab-surface);
|
||||
box-shadow: var(--azionelab-shadow);
|
||||
}
|
||||
|
||||
.show-card p {
|
||||
color: var(--azionelab-muted);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.page-header {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
`],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class ShowListPageComponent {
|
||||
protected readonly demoShows: DemoShow[] = [
|
||||
{
|
||||
slug: 'open-stage',
|
||||
title: 'Open Stage',
|
||||
summary: 'Placeholder list item for the first published production.',
|
||||
venue: 'AzioneLab Theatre',
|
||||
startsAt: 'May 15, 20:30',
|
||||
},
|
||||
{
|
||||
slug: 'city-echoes',
|
||||
title: 'City Echoes',
|
||||
summary: 'Second sample entry showing how cards will map to live API data.',
|
||||
venue: 'Studio Nuovo',
|
||||
startsAt: 'May 22, 18:00',
|
||||
},
|
||||
];
|
||||
}
|
||||
Reference in New Issue
Block a user