364 lines
13 KiB
HTML
364 lines
13 KiB
HTML
<section class="admin-page">
|
|
<div class="container">
|
|
<div class="admin-header">
|
|
<h1>Admin Dashboard</h1>
|
|
<p>Manage programs, events, tiers, history, team, and community content</p>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="admin-tabs">
|
|
<button
|
|
class="tab-btn"
|
|
[class.active]="activeTab() === 'programs'"
|
|
(click)="activeTab.set('programs')"
|
|
>Programs</button>
|
|
<button
|
|
class="tab-btn"
|
|
[class.active]="activeTab() === 'events'"
|
|
(click)="activeTab.set('events')"
|
|
>Events</button>
|
|
<button
|
|
class="tab-btn"
|
|
[class.active]="activeTab() === 'tiers'"
|
|
(click)="activeTab.set('tiers')"
|
|
>Tiers</button>
|
|
<button
|
|
class="tab-btn"
|
|
[class.active]="activeTab() === 'history'"
|
|
(click)="activeTab.set('history')"
|
|
>History</button>
|
|
<button
|
|
class="tab-btn"
|
|
[class.active]="activeTab() === 'team'"
|
|
(click)="activeTab.set('team')"
|
|
>Team</button>
|
|
<button
|
|
class="tab-btn"
|
|
[class.active]="activeTab() === 'community'"
|
|
(click)="activeTab.set('community')"
|
|
>Community</button>
|
|
<button
|
|
class="tab-btn"
|
|
[class.active]="activeTab() === 'station'"
|
|
(click)="activeTab.set('station')"
|
|
>Station</button>
|
|
</div>
|
|
|
|
<!-- Programs Tab -->
|
|
@if (activeTab() === 'programs') {
|
|
@if (programs$ | async; as programs) {
|
|
<div class="tab-content">
|
|
<div class="tab-toolbar">
|
|
<h2>Programs ({{ programs.length }})</h2>
|
|
<button class="btn btn-add" (click)="openProgramForm()">+ Add Program</button>
|
|
</div>
|
|
|
|
<table class="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Day</th>
|
|
<th>Time</th>
|
|
<th>Title</th>
|
|
<th>Host</th>
|
|
<th>Genre</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@for (program of programs; track program.id) {
|
|
<tr>
|
|
<td>{{ program.day_label }}</td>
|
|
<td>{{ program.time }}</td>
|
|
<td>{{ program.title }}</td>
|
|
<td>{{ program.host }}</td>
|
|
<td>{{ program.genre }}</td>
|
|
<td class="actions">
|
|
<button class="btn-icon btn-edit" (click)="editProgram(program)">Edit</button>
|
|
<button class="btn-icon btn-delete" (click)="deleteProgram(program.id)">Delete</button>
|
|
</td>
|
|
</tr>
|
|
} @empty {
|
|
<tr><td colspan="6" class="empty-row">No programs yet. Click "Add Program" to create one.</td></tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
<!-- Events Tab -->
|
|
@if (activeTab() === 'events') {
|
|
@if (events$ | async; as events) {
|
|
<div class="tab-content">
|
|
<div class="tab-toolbar">
|
|
<h2>Events ({{ events.length }})</h2>
|
|
<button class="btn btn-add" (click)="openEventForm()">+ Add Event</button>
|
|
</div>
|
|
|
|
<table class="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Title</th>
|
|
<th>Location</th>
|
|
<th>Active</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@for (event of events; track event.id) {
|
|
<tr>
|
|
<td>{{ event.date }}</td>
|
|
<td>{{ event.title }}</td>
|
|
<td>{{ event.location }}</td>
|
|
<td>{{ event.active ? 'Yes' : 'No' }}</td>
|
|
<td class="actions">
|
|
<button class="btn-icon btn-edit" (click)="editEvent(event)">Edit</button>
|
|
<button class="btn-icon btn-delete" (click)="deleteEvent(event.id)">Delete</button>
|
|
</td>
|
|
</tr>
|
|
} @empty {
|
|
<tr><td colspan="5" class="empty-row">No events yet. Click "Add Event" to create one.</td></tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
<!-- Tiers Tab -->
|
|
@if (activeTab() === 'tiers') {
|
|
@if (tiers$ | async; as tiers) {
|
|
<div class="tab-content">
|
|
<div class="tab-toolbar">
|
|
<h2>Donation Tiers ({{ tiers.length }})</h2>
|
|
<button class="btn btn-add" (click)="openTierForm()">+ Add Tier</button>
|
|
</div>
|
|
|
|
<table class="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Order</th>
|
|
<th>Name</th>
|
|
<th>Amount</th>
|
|
<th>Benefits</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@for (tier of tiers; track tier.id) {
|
|
<tr>
|
|
<td>{{ tier.display_order }}</td>
|
|
<td>{{ tier.icon }} {{ tier.name }}</td>
|
|
<td>${{ tier.amount.toFixed(2) }}</td>
|
|
<td class="benefits-cell">{{ tier.benefits.join(', ') }}</td>
|
|
<td class="actions">
|
|
<button class="btn-icon btn-edit" (click)="editTier(tier)">Edit</button>
|
|
<button class="btn-icon btn-delete" (click)="deleteTier(tier.id)">Delete</button>
|
|
</td>
|
|
</tr>
|
|
} @empty {
|
|
<tr><td colspan="5" class="empty-row">No tiers yet. Click "Add Tier" to create one.</td></tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
<!-- History Tab -->
|
|
@if (activeTab() === 'history') {
|
|
@if (historyEntries$ | async; as entries) {
|
|
<div class="tab-content">
|
|
<div class="tab-toolbar">
|
|
<h2>History Timeline ({{ entries.length }})</h2>
|
|
<button class="btn btn-add" (click)="openHistoryForm()">+ Add Entry</button>
|
|
</div>
|
|
|
|
<table class="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Year</th>
|
|
<th>Title</th>
|
|
<th>Order</th>
|
|
<th>Active</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@for (entry of entries; track entry.id) {
|
|
<tr>
|
|
<td>{{ entry.year }}</td>
|
|
<td>{{ entry.title }}</td>
|
|
<td>{{ entry.display_order }}</td>
|
|
<td>{{ entry.active ? 'Yes' : 'No' }}</td>
|
|
<td class="actions">
|
|
<button class="btn-icon btn-edit" (click)="editHistory(entry)">Edit</button>
|
|
<button class="btn-icon btn-delete" (click)="deleteHistory(entry.id)">Delete</button>
|
|
</td>
|
|
</tr>
|
|
} @empty {
|
|
<tr><td colspan="5" class="empty-row">No history entries yet. Click "Add Entry" to create one.</td></tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
<!-- Team Tab -->
|
|
@if (activeTab() === 'team') {
|
|
@if (teamMembers$ | async; as members) {
|
|
<div class="tab-content">
|
|
<div class="tab-toolbar">
|
|
<h2>Team Members ({{ members.length }})</h2>
|
|
<button class="btn btn-add" (click)="openTeamForm()">+ Add Member</button>
|
|
</div>
|
|
|
|
<table class="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Title</th>
|
|
<th>Order</th>
|
|
<th>Active</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@for (member of members; track member.id) {
|
|
<tr>
|
|
<td>{{ member.name }}</td>
|
|
<td>{{ member.title }}</td>
|
|
<td>{{ member.display_order }}</td>
|
|
<td>{{ member.active ? 'Yes' : 'No' }}</td>
|
|
<td class="actions">
|
|
<button class="btn-icon btn-edit" (click)="editTeam(member)">Edit</button>
|
|
<button class="btn-icon btn-delete" (click)="deleteTeam(member.id)">Delete</button>
|
|
</td>
|
|
</tr>
|
|
} @empty {
|
|
<tr><td colspan="5" class="empty-row">No team members yet. Click "Add Member" to create one.</td></tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
<!-- Community Tab -->
|
|
@if (activeTab() === 'community') {
|
|
@if (communityHighlights$ | async; as highlights) {
|
|
<div class="tab-content">
|
|
<div class="tab-toolbar">
|
|
<h2>Community Highlights ({{ highlights.length }})</h2>
|
|
<button class="btn btn-add" (click)="openCommunityForm()">+ Add Highlight</button>
|
|
</div>
|
|
|
|
<table class="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Icon</th>
|
|
<th>Title</th>
|
|
<th>Order</th>
|
|
<th>Active</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@for (highlight of highlights; track highlight.id) {
|
|
<tr>
|
|
<td>{{ highlight.icon }}</td>
|
|
<td>{{ highlight.title }}</td>
|
|
<td>{{ highlight.display_order }}</td>
|
|
<td>{{ highlight.active ? 'Yes' : 'No' }}</td>
|
|
<td class="actions">
|
|
<button class="btn-icon btn-edit" (click)="editCommunity(highlight)">Edit</button>
|
|
<button class="btn-icon btn-delete" (click)="deleteCommunity(highlight.id)">Delete</button>
|
|
</td>
|
|
</tr>
|
|
} @empty {
|
|
<tr><td colspan="5" class="empty-row">No highlights yet. Click "Add Highlight" to create one.</td></tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
}
|
|
}
|
|
|
|
<!-- Station Tab -->
|
|
@if (activeTab() === 'station') {
|
|
@if (stationConfig$ | async; as config) {
|
|
<div class="tab-content">
|
|
<div class="tab-toolbar">
|
|
<h2>Station Configuration</h2>
|
|
<button class="btn btn-add" (click)="openStationForm()">Edit Config</button>
|
|
</div>
|
|
|
|
<div class="station-config-view">
|
|
<div class="config-row">
|
|
<span class="config-label">Callsign</span>
|
|
<span class="config-value">{{ config.callsign }}</span>
|
|
</div>
|
|
<div class="config-row">
|
|
<span class="config-label">Name</span>
|
|
<span class="config-value">{{ config.name_primary }} {{ config.name_secondary }}</span>
|
|
</div>
|
|
<div class="config-row">
|
|
<span class="config-label">Tagline</span>
|
|
<span class="config-value">{{ config.tagline }}</span>
|
|
</div>
|
|
<div class="config-row">
|
|
<span class="config-label">Frequency</span>
|
|
<span class="config-value">{{ config.frequency }}</span>
|
|
</div>
|
|
<div class="config-row">
|
|
<span class="config-label">Founded</span>
|
|
<span class="config-value">{{ config.founded_year }}</span>
|
|
</div>
|
|
<div class="config-row">
|
|
<span class="config-label">Nonprofit</span>
|
|
<span class="config-value">{{ config.nonprofit_type }} — EIN {{ config.ein }}</span>
|
|
</div>
|
|
<div class="config-row">
|
|
<span class="config-label">Email</span>
|
|
<span class="config-value">{{ config.email }}</span>
|
|
</div>
|
|
<div class="config-row">
|
|
<span class="config-label">Phone</span>
|
|
<span class="config-value">{{ config.phone }}</span>
|
|
</div>
|
|
<div class="config-row">
|
|
<span class="config-label">Website</span>
|
|
<span class="config-value">{{ config.website }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
</div>
|
|
|
|
<!-- Form modals -->
|
|
@if (showProgramForm) {
|
|
<app-admin-program-form [editItem]="editingProgram" (saved)="onProgramSaved()" (closed)="onProgramClosed()" />
|
|
}
|
|
@if (showEventForm) {
|
|
<app-admin-event-form [editItem]="editingEvent" (saved)="onEventSaved()" (closed)="onEventClosed()" />
|
|
}
|
|
@if (showTierForm) {
|
|
<app-admin-tier-form [editItem]="editingTier" (saved)="onTierSaved()" (closed)="onTierClosed()" />
|
|
}
|
|
@if (showStationForm) {
|
|
<app-admin-station-form [editItem]="stationConfig$ | async" (saved)="onStationSaved()" (closed)="onStationClosed()" />
|
|
}
|
|
@if (showHistoryForm) {
|
|
<app-admin-history-form [editItem]="editingHistory" (saved)="onHistorySaved()" (closed)="onHistoryClosed()" />
|
|
}
|
|
@if (showTeamForm) {
|
|
<app-admin-team-form [editItem]="editingTeam" (saved)="onTeamSaved()" (closed)="onTeamClosed()" />
|
|
}
|
|
@if (showCommunityForm) {
|
|
<app-admin-community-form [editItem]="editingCommunity" (saved)="onCommunitySaved()" (closed)="onCommunityClosed()" />
|
|
}
|
|
</section>
|