tomru/pfadi-bussle
1
0
Fork 0
mirror of https://github.com/tomru/pfadi-bussle.git synced 2026-03-03 06:27:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

move Layout into _app.tsx

Browse Source
This commit is contained in:
Thomas Ruoff
2022-09-09 00:17:47 +02:00
committed by Thomas Ruoff
parent 7389289b81
commit 2fd3a47e72
12 changed files with 112 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
pages/_app.tsx
View File

@@ -1,7 +1,11 @@
export { reportWebVitals } from 'next-axiom' export { reportWebVitals } from 'next-axiom'
import { useEffect } from 'react' import { useEffect } from 'react'
import type { AppProps } from 'next/app'
import { useSession, signIn, SessionProvider } from 'next-auth/react' import { useSession, signIn, SessionProvider } from 'next-auth/react'
import Layout from '../components/layout';
import '../styles/index.css' import '../styles/index.css'
function Auth({ children }) { function Auth({ children }) {
@@ -29,13 +33,15 @@ export default function MyApp({
return ( return (
<div className="flex flex-col min-h-screen"> <div className="flex flex-col min-h-screen">
<SessionProvider session={session}> <SessionProvider session={session}>
{Component.authenticationRequired ? ( <Layout>
<Auth> {Component.authenticationRequired ? (
<Auth>
<Component {...pageProps} />
</Auth>
) : (
<Component {...pageProps} /> <Component {...pageProps} />
</Auth> )}
) : ( </Layout>
<Component {...pageProps} />
)}
</SessionProvider> </SessionProvider>
</div> </div>
) )

14
pages/admin/bookings/[uuid]/bill.tsx
View File

@@ -1,5 +1,4 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import Layout from '../../../../components/layout'
import Input from '../../../../components/input' import Input from '../../../../components/input'
import Select from '../../../../components/select' import Select from '../../../../components/select'
import { Booking } from '../../../../db/booking' import { Booking } from '../../../../db/booking'
@@ -115,14 +114,14 @@ function BookingBillPage({
setStoringInProgress(false) setStoringInProgress(false)
} }
const onAddAdditionalCost = function ( const onAddAdditionalCost = function(
event: React.MouseEvent<HTMLButtonElement> event: React.MouseEvent<HTMLButtonElement>
) { ) {
event.preventDefault() event.preventDefault()
setAdditionalCosts([...additionalCosts, { name: '', value: 0 }]) setAdditionalCosts([...additionalCosts, { name: '', value: 0 }])
} }
const onRemoveAdditionalCost = function ( const onRemoveAdditionalCost = function(
event: React.MouseEvent<HTMLButtonElement>, event: React.MouseEvent<HTMLButtonElement>,
index: number index: number
) { ) {
@@ -134,7 +133,7 @@ function BookingBillPage({
} }
return ( return (
<Layout> <>
{booking && ( {booking && (
<form className="w-full" onSubmit={onSubmit}> <form className="w-full" onSubmit={onSubmit}>
<div> <div>
@@ -198,9 +197,8 @@ function BookingBillPage({
> >
- -
</button> </button>
<label className="flabel inline">{`Kostenpunkt ${ <label className="flabel inline">{`Kostenpunkt ${index + 1
index + 1 }`}</label>
}`}</label>
</div> </div>
<div className="ml-10 mb-3" key={`input{index}`}> <div className="ml-10 mb-3" key={`input{index}`}>
<Input <Input
@@ -258,7 +256,7 @@ function BookingBillPage({
</button> </button>
</form> </form>
)} )}
</Layout> </>
) )
} }

5
pages/admin/bookings/[uuid]/index.tsx
View File

@@ -1,7 +1,6 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import Link from 'next/link' import Link from 'next/link'
import Layout from '../../../../components/layout'
import Calendar from '../../../../components/calendar' import Calendar from '../../../../components/calendar'
import { getServerSideBooking } from '../../../../lib/getServerSideProps' import { getServerSideBooking } from '../../../../lib/getServerSideProps'
import { Booking } from '../../../../db/booking' import { Booking } from '../../../../db/booking'
@@ -37,7 +36,7 @@ function ShowBookingAdmin({ booking: bookingProp }: { booking: Booking }) {
} }
return ( return (
<Layout> <>
<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} />
<div> <div>
@@ -71,7 +70,7 @@ function ShowBookingAdmin({ booking: bookingProp }: { booking: Booking }) {
<a className="btn btn-gray">Rechnung</a> <a className="btn btn-gray">Rechnung</a>
</Link> </Link>
</div> </div>
</Layout> </>
) )
} }

13
pages/admin/index.tsx
View File

@@ -1,6 +1,5 @@
import React from 'react' import React from 'react'
import BookingTable from '../../components/bookingTable' import BookingTable from '../../components/bookingTable'
import Layout from '../../components/layout'
import { getServerSideRecentBookings } from '../../lib/getServerSideProps' import { getServerSideRecentBookings } from '../../lib/getServerSideProps'
@@ -9,20 +8,18 @@ export const getServerSideProps = getServerSideRecentBookings
function AdminRecentBookings({ bookings }) { function AdminRecentBookings({ bookings }) {
if (!bookings || !bookings.length) { if (!bookings || !bookings.length) {
return ( return (
<Layout> <h3 className="text-lg leading-6 font-medium text-gray-900">
<h3 className="text-lg leading-6 font-medium text-gray-900"> No recent bookings 😿
No recent bookings 😿 </h3>
</h3>
</Layout>
) )
} }
return ( return (
<Layout> <>
{bookings.map((booking: any) => ( {bookings.map((booking: any) => (
<BookingTable key={booking.uuid} booking={booking} /> <BookingTable key={booking.uuid} booking={booking} />
))} ))}
</Layout> </>
) )
} }

5
pages/book.tsx
View File

@@ -1,11 +1,10 @@
import Layout from '../components/layout'
import Book from '../components/book' import Book from '../components/book'
export default function Home() { export default function Home() {
return ( return (
<Layout> <>
<h1 className="mb-3 text-xl font-extrabold">Buchungsanfrage</h1> <h1 className="mb-3 text-xl font-extrabold">Buchungsanfrage</h1>
<Book /> <Book />
</Layout> </>
) )
} }

25
pages/bookings/[uuid]/index.tsx
View File

@@ -1,5 +1,4 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import Layout from '../../../components/layout'
import { getServerSideBooking } from '../../../lib/getServerSideProps' import { getServerSideBooking } from '../../../lib/getServerSideProps'
import { Booking } from '../../../db/booking' import { Booking } from '../../../db/booking'
import { BOOKING_STATUS } from '../../../db/enums' import { BOOKING_STATUS } from '../../../db/enums'
@@ -41,7 +40,7 @@ export default function ShowBooking({
} }
return ( return (
<Layout> <>
<div> <div>
<strong>Buchungsstatus:</strong> {getBookingStatus(booking.status)} <strong>Buchungsstatus:</strong> {getBookingStatus(booking.status)}
</div> </div>
@@ -54,16 +53,16 @@ export default function ShowBooking({
{[BOOKING_STATUS.CONFIRMED, BOOKING_STATUS.REQUESTED].includes( {[BOOKING_STATUS.CONFIRMED, BOOKING_STATUS.REQUESTED].includes(
booking.status booking.status
) && ( ) && (
<div className="my-6"> <div className="my-6">
<button <button
onClick={onCancelBooking} onClick={onCancelBooking}
className="btn btn-red" className="btn btn-red"
disabled={storingBooking} disabled={storingBooking}
> >
Buchung Stornieren Buchung Stornieren
</button> </button>
</div> </div>
)} )}
</Layout> </>
) )
} }

5
pages/bookings/[uuid]/stored.tsx
View File

@@ -1,6 +1,5 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import Link from 'next/link' import Link from 'next/link'
import Layout from '../../../components/layout'
import { Booking } from '../../../db/booking' import { Booking } from '../../../db/booking'
import { loadBookingData, storeBookingData } from '../../../helpers/storage' import { loadBookingData, storeBookingData } from '../../../helpers/storage'
import { getServerSideBooking } from '../../../lib/getServerSideProps' import { getServerSideBooking } from '../../../lib/getServerSideProps'
@@ -19,7 +18,7 @@ export default function ShowBookingStored({ booking }: { booking: Booking }) {
} }
return ( return (
<Layout> <>
<h3 className="thanks mb-3 mt-6 text-lg"> <h3 className="thanks mb-3 mt-6 text-lg">
Vielen Dank für die Buchungsanfrage Vielen Dank für die Buchungsanfrage
</h3> </h3>
@@ -52,6 +51,6 @@ export default function ShowBookingStored({ booking }: { booking: Booking }) {
</p> </p>
</div> </div>
)} )}
</Layout> </>
) )
} }

6
pages/impressum.tsx
View File

@@ -5,13 +5,9 @@ import { MDXRemote } from 'next-mdx-remote'
import mdComponents from '../components/mdComponents' import mdComponents from '../components/mdComponents'
import Layout from '../components/layout'
export default function TermsPage({ source }) { export default function TermsPage({ source }) {
return ( return (
<Layout> <MDXRemote {...source} components={{ ...mdComponents }} />
<MDXRemote {...source} components={{ ...mdComponents }} />
</Layout>
) )
} }

127
pages/index.tsx
View File

@@ -1,74 +1,71 @@
import Link from 'next/link' import Link from 'next/link'
import Layout from '../components/layout'
export default function Home() { export default function Home() {
return ( return (
<Layout> <div className="mt-6 sm:text-center">
<div className="mt-6 sm:text-center"> <h1 className="text-xl tracking-tight font-extrabold text-gray-900 sm:text-2xl md:text-3xl">
<h1 className="text-xl tracking-tight font-extrabold text-gray-900 sm:text-2xl md:text-3xl"> <span className="block text-blue-800 xl:inline">Pfadi-Bussle</span>{' '}
<span className="block text-blue-800 xl:inline">Pfadi-Bussle</span>{' '} <span className="block xl:inline">
<span className="block xl:inline"> des Freundeskreis des VCP Rosenfeld e.V.
des Freundeskreis des VCP Rosenfeld e.V. </span>
</span> </h1>
</h1> <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
<p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl"> Für Lager, Vereinsausflüge, Urlaubsreisen, Umzüge, etc. kann man unser
Für Lager, Vereinsausflüge, Urlaubsreisen, Umzüge, etc. kann man unser Pfadi-Bussle mieten.
Pfadi-Bussle mieten. </p>
</p> <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
<p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl"> Das Bussle ist ein VW T4 Kleinbus mit 9 Sitzplätzen (inkl. Fahrer),
Das Bussle ist ein VW T4 Kleinbus mit 9 Sitzplätzen (inkl. Fahrer), mit Klimaanlage, Radio/CD/Aux und Anhängerkupplung. Die zweite und
mit Klimaanlage, Radio/CD/Aux und Anhängerkupplung. Die zweite und dritte Sitzreihe können ausgebaut werden.
dritte Sitzreihe können ausgebaut werden. </p>
</p> <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
<p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl"> <Link href="/prices">
<Link href="/prices"> <a className="underline hover:text-blue-700">Preise</a>
<a className="underline hover:text-blue-700">Preise</a> </Link>{' '}
</Link>{' '} und{' '}
und{' '} <Link href="/terms">
<Link href="/terms"> <a className="underline hover:text-blue-700">Mietbedingungen</a>
<a className="underline hover:text-blue-700">Mietbedingungen</a> </Link>
</Link> </p>
</p> <div className="mt-5 sm:mt-8 sm:flex sm:justify-center">
<div className="mt-5 sm:mt-8 sm:flex sm:justify-center"> <div className="rounded-md shadow">
<div className="rounded-md shadow"> <Link href="/book">
<Link href="/book"> <a className="w-full flex items-center justify-center px-6 py-2 border border-transparent text-base font-medium rounded-md text-white bg-blue-800 hover:bg-blue-900 md:py-2 md:text-lg md:px-5">
<a className="w-full flex items-center justify-center px-6 py-2 border border-transparent text-base font-medium rounded-md text-white bg-blue-800 hover:bg-blue-900 md:py-2 md:text-lg md:px-5"> Zur Buchungsanfrage
Zur Buchungsanfrage
</a>
</Link>
</div>
</div>
<p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
Du hast weiter Fragen melde Dich gerne per
<br />
<a
className="underline hover:text-blue-700"
href="mailto:pfadibussle@tomru.space"
>
E-Mail
</a>
, Telefon{' '}
<a
className="underline hover:text-blue-700"
href="tel:+4915121225362"
>
0151 / 21225302
</a>{' '}
oder{' '}
<Link href="https://wa.me/4915121225362">
<a className="underline inline-flex flex-row items-baseline hover:text-blue-700">
<svg
xmlns="http://www.w3.org/2000/svg"
className="fill-current h-4 inline"
viewBox="0 0 738 741"
>
<title>Whatsapp</title>
<path d="M630 108A368 368 0 0052 551L0 741l195-51a368 368 0 00435-582M370 672c-55 0-108-14-155-42l-11-7-116 31 31-113-7-12A304 304 0 01370 62a303 303 0 01306 305c-1 169-137 305-306 305m168-228l-63-30c-8-3-15-4-21 5l-29 36c-5 6-10 7-20 2-9-5-38-14-73-46-28-24-46-54-51-63-6-9-1-14 4-19l13-16c5-5 7-9 10-15s1-12-1-16l-28-68c-8-18-15-16-21-16h-18c-6 0-16 2-24 11-9 9-32 31-32 77s33 88 37 94c5 7 65 99 157 139l52 19c22 7 42 6 58 4 18-3 54-22 62-44 8-21 8-40 5-43-2-4-8-6-17-11" />
</svg>
</a> </a>
</Link> </Link>
</p> </div>
</div> </div>
</Layout> <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
Du hast weiter Fragen melde Dich gerne per
<br />
<a
className="underline hover:text-blue-700"
href="mailto:pfadibussle@tomru.space"
>
E-Mail
</a>
, Telefon{' '}
<a
className="underline hover:text-blue-700"
href="tel:+4915121225362"
>
0151 / 21225302
</a>{' '}
oder{' '}
<Link href="https://wa.me/4915121225362">
<a className="underline inline-flex flex-row items-baseline hover:text-blue-700">
<svg
xmlns="http://www.w3.org/2000/svg"
className="fill-current h-4 inline"
viewBox="0 0 738 741"
>
<title>Whatsapp</title>
<path d="M630 108A368 368 0 0052 551L0 741l195-51a368 368 0 00435-582M370 672c-55 0-108-14-155-42l-11-7-116 31 31-113-7-12A304 304 0 01370 62a303 303 0 01306 305c-1 169-137 305-306 305m168-228l-63-30c-8-3-15-4-21 5l-29 36c-5 6-10 7-20 2-9-5-38-14-73-46-28-24-46-54-51-63-6-9-1-14 4-19l13-16c5-5 7-9 10-15s1-12-1-16l-28-68c-8-18-15-16-21-16h-18c-6 0-16 2-24 11-9 9-32 31-32 77s33 88 37 94c5 7 65 99 157 139l52 19c22 7 42 6 58 4 18-3 54-22 62-44 8-21 8-40 5-43-2-4-8-6-17-11" />
</svg>
</a>
</Link>
</p>
</div>
) )
} }

6
pages/prices.tsx
View File

@@ -1,8 +1,6 @@
import Layout from '../components/layout'
export default function Prices() { export default function Prices() {
return ( return (
<Layout> <>
<h1 className="mb-3 text-xl font-extrabold">Preise</h1> <h1 className="mb-3 text-xl font-extrabold">Preise</h1>
<table className="divide-y divide-gray-200"> <table className="divide-y divide-gray-200">
<thead className="bg-gray-50"> <thead className="bg-gray-50">
@@ -43,6 +41,6 @@ export default function Prices() {
</tr> </tr>
</tbody> </tbody>
</table> </table>
</Layout> </>
) )
} }

10
pages/privacy.tsx
View File

@@ -3,15 +3,11 @@ import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote' import { MDXRemote } from 'next-mdx-remote'
import mdComponents from '../components/mdComponents' import mdComponents from '../components/mdComponents'
import Layout from '../components/layout'
export default function TermsPage({ source }) { export default function TermsPage({ source }) {
return ( return (
<Layout> <div className="text-gray-700">
<div className="text-gray-700"> <MDXRemote {...source} components={{ ...mdComponents }} />
<MDXRemote {...source} components={{ ...mdComponents }} /> </div>
</div>
</Layout>
) )
} }

10
pages/terms.tsx
View File

@@ -5,15 +5,11 @@ import { MDXRemote } from 'next-mdx-remote'
import mdComponents from '../components/mdComponents' import mdComponents from '../components/mdComponents'
import Layout from '../components/layout'
export default function TermsPage({ source }) { export default function TermsPage({ source }) {
return ( return (
<Layout> <div className="text-gray-700">
<div className="text-gray-700"> <MDXRemote {...source} components={{ ...mdComponents }} />
<MDXRemote {...source} components={{ ...mdComponents }} /> </div>
</div>
</Layout>
) )
} }