inspect path by breadcrumbs

This commit is contained in:
Thomas Ruoff
2020-12-25 00:50:12 +01:00
parent 29347b9019
commit bb5f94491f
12 changed files with 30 additions and 18 deletions

View File

@@ -1,14 +1,20 @@
import { useContext } from 'react' import { useContext } from 'react'
import { useRouter } from 'next/router'
import Link from 'next/link' import Link from 'next/link'
import UserContext from './user/context' import UserContext from './user/context'
export default function Breadcrumbs({ label }: { label: string }) { export default function Breadcrumbs() {
const { username, role } = useContext(UserContext) const { username, role } = useContext(UserContext)
const router = useRouter()
if (!label) { const breadcrumbs = router.asPath.replace(/^\//, '').split('/')
if (!breadcrumbs.length) {
return null return null
} }
// TODO: translate routes
// TODO: make entries linkable
return ( return (
<div className="flex flex-row items-center px-3 py-1 text-white text-base bg-blue-400 rounded-b-sm"> <div className="flex flex-row items-center px-3 py-1 text-white text-base bg-blue-400 rounded-b-sm">
{role === 'admin' && ( {role === 'admin' && (
@@ -22,10 +28,16 @@ export default function Breadcrumbs({ label }: { label: string }) {
<a className="font-extrabold">Home</a> <a className="font-extrabold">Home</a>
</Link> </Link>
</h2> </h2>
{'>'} {breadcrumbs.map((breadcrumb) => {
<h2 className="mx-1 flex-grow"> return (
<span className="font-extrabold">{label}</span> <>
</h2> {'>'}
<h2 className="mx-1">
<span className="font-extrabold">{breadcrumb}</span>
</h2>
</>
)
})}
</> </>
</div> </div>
) )

View File

@@ -3,7 +3,7 @@ import Link from 'next/link'
import Logo from './logo' import Logo from './logo'
import Breadcrumbs from './breadcrumbs' import Breadcrumbs from './breadcrumbs'
export default function Header({ label }: { label?: string }) { export default function Header() {
return ( return (
<> <>
<Head> <Head>
@@ -20,7 +20,7 @@ export default function Header({ label }: { label?: string }) {
</h1> </h1>
<Logo className="w-40 flex-shrink-0" /> <Logo className="w-40 flex-shrink-0" />
</div> </div>
<Breadcrumbs label={label} /> <Breadcrumbs />
</div> </div>
</> </>
) )

View File

@@ -174,7 +174,7 @@ export default function BookingBillPage({
return ( return (
<> <>
<Header label="Abrechung" /> <Header />
<main className="main"> <main className="main">
{booking && ( {booking && (
<form className="form" onSubmit={onSubmit}> <form className="form" onSubmit={onSubmit}>

View File

@@ -78,7 +78,7 @@ export default function ShowBookingAdmin({
return ( return (
<> <>
<Header label="Buchung" /> <Header />
<main className="main py-3"> <main className="main py-3">
<h2 className="text-3xl">Buchung {booking.uuid}</h2> <h2 className="text-3xl">Buchung {booking.uuid}</h2>
<Calendar start={booking.startDate} end={booking.endDate} /> <Calendar start={booking.startDate} end={booking.endDate} />

View File

@@ -29,7 +29,7 @@ export const getServerSideProps = withSession(async (context) => {
export default function AdminRecentBookings({ bookings }) { export default function AdminRecentBookings({ bookings }) {
return ( return (
<> <>
<Header label="Buchungsliste" /> <Header />
<main className="main py-3"> <main className="main py-3">
{bookings.map((booking: any) => ( {bookings.map((booking: any) => (
<div <div

View File

@@ -43,7 +43,7 @@ export default function Login() {
return ( return (
<> <>
<Header label="Admin Login" /> <Header />
<main className="main w-64"> <main className="main w-64">
<form className="form" onSubmit={onSubmit}> <form className="form" onSubmit={onSubmit}>
<Input <Input

View File

@@ -6,7 +6,7 @@ import Wizard from '../components/wizard/index'
export default function Home() { export default function Home() {
return ( return (
<> <>
<Header label="Anfrage" /> <Header />
<main className="main"> <main className="main">
<Wizard /> <Wizard />
</main> </main>

View File

@@ -57,7 +57,7 @@ export default function ShowBooking({
return ( return (
<> <>
<Header label="Ihre Buchung" /> <Header />
<main className="main"> <main className="main">
<div> <div>
<strong>Buchungsstatus:</strong> {getBookingStatus(booking.status)} <strong>Buchungsstatus:</strong> {getBookingStatus(booking.status)}

View File

@@ -25,7 +25,7 @@ export default function ShowBookingStored({
return ( return (
<> <>
<Header label="Eingangsbestätigung" /> <Header />
<main className="main"> <main className="main">
<h3 className="text-lg mb-3">Vielen Dank für die Buchungsanfrage</h3> <h3 className="text-lg mb-3">Vielen Dank für die Buchungsanfrage</h3>
<p className="mb-6"> <p className="mb-6">

View File

@@ -4,7 +4,7 @@ import Header from '../components/header'
export default function Impressum() { export default function Impressum() {
return ( return (
<> <>
<Header label="Impressum" /> <Header />
<main className="main"> <main className="main">
<h1 className="mb-3 text-xl font-extrabold">Impressum</h1> <h1 className="mb-3 text-xl font-extrabold">Impressum</h1>

View File

@@ -4,7 +4,7 @@ import Header from '../components/header'
export default function Privacy() { export default function Privacy() {
return ( return (
<> <>
<Header label="Datenschutzerklärung" /> <Header />
<main className="main text-gray-900"> <main className="main text-gray-900">
<h1 className="mb-3 text-xl font-extrabold">Datenschutzerklärung</h1> <h1 className="mb-3 text-xl font-extrabold">Datenschutzerklärung</h1>
<h2 className="mb-2 text-lg font-extrabold">Geltungsbereich</h2> <h2 className="mb-2 text-lg font-extrabold">Geltungsbereich</h2>

View File

@@ -4,7 +4,7 @@ import Header from '../components/header'
export default function Terms() { export default function Terms() {
return ( return (
<> <>
<Header label="AGBs" /> <Header />
<main className="main text-gray-900"> <main className="main text-gray-900">
<h1 className="mb-3 text-xl font-extrabold"> <h1 className="mb-3 text-xl font-extrabold">
Allgemeine Geschäftsbedinungen Allgemeine Geschäftsbedinungen