Event creating W.I.P
This commit is contained in:
parent
44c163703c
commit
f8e7b816bc
|
@ -29,10 +29,22 @@ const protectedRoutes: Routes = [
|
|||
},
|
||||
{
|
||||
path: 'event',
|
||||
loadComponent: () =>
|
||||
import('./pages/event-root/event-root.component').then(
|
||||
(m) => m.EventRootComponent
|
||||
),
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
loadComponent: () =>
|
||||
import('./pages/event-root/event-root.component').then(
|
||||
(m) => m.EventRootComponent
|
||||
),
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
loadComponent: () =>
|
||||
import('./pages/event-root/create-event/create-event.component').then(
|
||||
(m) => m.CreateEventComponent
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
|
|
|
@ -144,10 +144,7 @@
|
|||
</div>
|
||||
</header>
|
||||
|
||||
<div [ngStyle]="mainContent" class="px-8 py-4 flex-grow text-2xl p-4">
|
||||
<p>isCollapsed: {{ isCollapsed }}</p>
|
||||
<P>isDesktopCollapsed: {{ isDesktopCollapsed }}</P>
|
||||
<P>showMobileMenu: {{ showMobileMenu }}</P>
|
||||
<div [ngStyle]="mainContent" class="overflow-y-auto h-screen">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -0,0 +1,32 @@
|
|||
<div class="flex flex-col h-full">
|
||||
<div class="flex-grow overflow-y-auto px-8 py-8">
|
||||
<div class="w-full flex flex-col">
|
||||
<div class="">
|
||||
@if (currentStep() === 0) {
|
||||
<app-basic-step></app-basic-step>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
[ngStyle]="actionbar"
|
||||
class="w-full max-w-full bg-primary sticky bottom-0 z-50">
|
||||
<!-- <button type="button" class="btn btn-primary" (click)="prevStep()">
|
||||
Prev
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" (click)="nextStep()">
|
||||
Next
|
||||
</button> -->
|
||||
|
||||
<ul class="steps steps-horizontal w-full">
|
||||
@for (step of steps; track $index) {
|
||||
<li
|
||||
[class.step-accent]="$index <= currentStep()"
|
||||
class="step text-sm md:text-base">
|
||||
<span>{{ step }}</span>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,76 @@
|
|||
import { CommonModule } from '@angular/common';
|
||||
import {
|
||||
Component,
|
||||
ChangeDetectionStrategy,
|
||||
signal,
|
||||
WritableSignal,
|
||||
ElementRef,
|
||||
OnInit,
|
||||
} from '@angular/core';
|
||||
|
||||
import {
|
||||
BackgroundPatternService,
|
||||
ThemeService,
|
||||
} from '../../../shared/service';
|
||||
|
||||
import { BasicStepComponent } from './steps/basic-step.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-create-event',
|
||||
standalone: true,
|
||||
providers: [],
|
||||
imports: [BasicStepComponent, CommonModule],
|
||||
templateUrl: './create-event.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class CreateEventComponent implements OnInit {
|
||||
public actionbar: { 'background-image': string } | null = null;
|
||||
public currentStep: WritableSignal<number> = signal(0);
|
||||
public readonly steps: string[] = ['Basic', 'Tickets', 'Review'];
|
||||
|
||||
public constructor(
|
||||
private readonly backgroundPatternService: BackgroundPatternService,
|
||||
private readonly themeService: ThemeService,
|
||||
private readonly el: ElementRef
|
||||
) {}
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.setBackground();
|
||||
}
|
||||
|
||||
public setBackground(): void {
|
||||
const theme = this.themeService.getTheme();
|
||||
let opacity: number;
|
||||
|
||||
if (theme === 'dark') {
|
||||
opacity = 0.05;
|
||||
} else {
|
||||
opacity = 0.1;
|
||||
}
|
||||
|
||||
const colorPrimaryC = getComputedStyle(
|
||||
this.el.nativeElement
|
||||
).getPropertyValue('--pc');
|
||||
|
||||
const svgUrlActionbar = this.backgroundPatternService.getBankNotePattern(
|
||||
colorPrimaryC,
|
||||
opacity
|
||||
);
|
||||
|
||||
this.actionbar = {
|
||||
'background-image': `url("${svgUrlActionbar}")`,
|
||||
};
|
||||
}
|
||||
|
||||
public nextStep(): void {
|
||||
if (this.currentStep() < this.steps.length - 1) {
|
||||
this.currentStep.set(this.currentStep() + 1);
|
||||
}
|
||||
}
|
||||
|
||||
public prevStep(): void {
|
||||
if (this.currentStep() > 0) {
|
||||
this.currentStep.set(this.currentStep() - 1);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,85 @@
|
|||
<form class="flex flex-col">
|
||||
<h2 class="text-2xl font-bold mb-6">Event Basic Information</h2>
|
||||
|
||||
<div class="form-control mb-4">
|
||||
<label class="label" for="event-title">
|
||||
<span class="label-text">Event Title</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="event-title"
|
||||
placeholder="Enter your event title"
|
||||
class="input input-bordered w-full" />
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="event-date">
|
||||
<span class="label-text">Date</span>
|
||||
</label>
|
||||
<input type="date" id="event-date" class="input input-bordered" />
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="event-time">
|
||||
<span class="label-text">Time</span>
|
||||
</label>
|
||||
<input type="time" id="event-time" class="input input-bordered" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-4">
|
||||
<label class="label" for="location-title">
|
||||
<span class="label-text">Location</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="location-title"
|
||||
placeholder="Enter your event title"
|
||||
class="input input-bordered w-full" />
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-4">
|
||||
<label class="label" for="event-street">
|
||||
<span class="label-text">Street</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="event-street"
|
||||
placeholder="Street name"
|
||||
class="input input-bordered" />
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="event-number">
|
||||
<span class="label-text">Street Number</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="event-number"
|
||||
placeholder="Street number"
|
||||
class="input input-bordered" />
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label" for="event-zip">
|
||||
<span class="label-text">Postal Code</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="event-zip"
|
||||
placeholder="Postal code"
|
||||
class="input input-bordered" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-control mb-6">
|
||||
<label class="label" for="event-city">
|
||||
<span class="label-text">City</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="event-city"
|
||||
placeholder="City"
|
||||
class="input input-bordered" />
|
||||
</div>
|
||||
</form>
|
|
@ -0,0 +1,13 @@
|
|||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-basic-step',
|
||||
standalone: true,
|
||||
templateUrl: './basic-step.component.html',
|
||||
providers: [],
|
||||
imports: [],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class BasicStepComponent {
|
||||
public constructor() {}
|
||||
}
|
|
@ -0,0 +1,24 @@
|
|||
<div class="flex justify-center w-full h-full items-center">
|
||||
<div class="hero-content text-center">
|
||||
<div class="max-w-xl">
|
||||
<h1 class="text-5xl font-bold">No Events Yet</h1>
|
||||
|
||||
<blockquote class="py-2">
|
||||
<p class="text-sm font-semibold">
|
||||
Every great event starts with a single step. Take yours today!
|
||||
</p>
|
||||
</blockquote>
|
||||
|
||||
<p class="pt-4 pb-8">
|
||||
Create your first event and start
|
||||
<br />
|
||||
selling tickets today!
|
||||
</p>
|
||||
<button
|
||||
(click)="navigateToCreateEvent()"
|
||||
class="btn btn-primary animate-shake animate-once animate-duration-300 animate-delay-[2000ms] animate-ease-linear animate-fill-both">
|
||||
<p>Create Your First Event</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,17 @@
|
|||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-event-empty-state',
|
||||
standalone: true,
|
||||
templateUrl: './event-empty-state.component.html',
|
||||
providers: [],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class EventEmptyStateComponent {
|
||||
public constructor(private readonly router: Router) {}
|
||||
|
||||
public navigateToCreateEvent(): void {
|
||||
this.router.navigate(['/event/create']);
|
||||
}
|
||||
}
|
|
@ -1 +1 @@
|
|||
<h1>Event Root Works</h1>
|
||||
<app-event-empty-state></app-event-empty-state>
|
||||
|
|
|
@ -1,10 +1,12 @@
|
|||
import { CommonModule } from '@angular/common';
|
||||
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
||||
|
||||
import { EventEmptyStateComponent } from './event-empty-state/event-empty-state.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-event-root',
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
imports: [CommonModule, EventEmptyStateComponent],
|
||||
providers: [],
|
||||
templateUrl: './event-root.component.html',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
|
|
|
@ -1,6 +1,9 @@
|
|||
{
|
||||
"name": "mvp-ticket",
|
||||
"version": "1.0.0",
|
||||
"engines": {
|
||||
"node": "18.17.1"
|
||||
},
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
|
|
Loading…
Reference in New Issue