From 4fbbc615e43c468278b701b392d183317d0bb270 Mon Sep 17 00:00:00 2001 From: magsyg Date: Tue, 19 Dec 2023 14:19:23 +0100 Subject: [PATCH 1/9] add skeleton of lyche reservation page --- frontend/src/AppRoutes.tsx | 2 + .../LycheReservationPage.module.scss | 64 +++++++++++++++++++ .../LycheReservationPage.tsx | 15 +++++ .../src/Pages/LycheReservationPage/index.ts | 1 + frontend/src/Pages/index.ts | 1 + 5 files changed, 83 insertions(+) create mode 100644 frontend/src/Pages/LycheReservationPage/LycheReservationPage.module.scss create mode 100644 frontend/src/Pages/LycheReservationPage/LycheReservationPage.tsx create mode 100644 frontend/src/Pages/LycheReservationPage/index.ts diff --git a/frontend/src/AppRoutes.tsx b/frontend/src/AppRoutes.tsx index a958babad..12df86c7c 100644 --- a/frontend/src/AppRoutes.tsx +++ b/frontend/src/AppRoutes.tsx @@ -14,6 +14,7 @@ import { LoginPage, LycheAboutPage, LycheContactPage, + LycheReservationPage, LycheHomePage, LycheMenuPage, NotFoundPage, @@ -235,6 +236,7 @@ export function AppRoutes() { } /> } /> } /> + } /> {/* diff --git a/frontend/src/Pages/LycheReservationPage/LycheReservationPage.module.scss b/frontend/src/Pages/LycheReservationPage/LycheReservationPage.module.scss new file mode 100644 index 000000000..43c30d5d6 --- /dev/null +++ b/frontend/src/Pages/LycheReservationPage/LycheReservationPage.module.scss @@ -0,0 +1,64 @@ +@import 'src/mixins'; + +@import 'src/constants'; + +.contactContainer { + width: 75vw; + height: 75vh; + @include flex-row-center; + gap: 4rem; + overflow: hidden; + color: $white; + + @include for-mobile-down { + @include flex-column-center; + margin: calc($sulten-navbar-height / 2) 0 calc($sulten-navbar-height / 2) 0; + height: 50%; + width: 100%; + gap: 1em; + } +} + +.lycheContactText { + width: 100%; + text-align: center; +} + +.textContainer { + width: 50%; + height: 100%; + @include flex-column-center; + gap: 1rem; + @include for-mobile-down { + width: 100%; + } +} + +.lycheMapContainer { + width: 50%; + height: 75%; + overflow: hidden; + border-radius: 1.5em; + @include for-mobile-down { + width: 100%; + height: 60vh; + } +} + +.lycheStreet { + height: 100%; + width: 100%; + border: none; +} + +.contactAddress { + color: $sulten-orange; +} + +.lycheSocialsContainer { + @include flex-row-center; +} + +.icon { + margin: 0.5rem; +} diff --git a/frontend/src/Pages/LycheReservationPage/LycheReservationPage.tsx b/frontend/src/Pages/LycheReservationPage/LycheReservationPage.tsx new file mode 100644 index 000000000..dddd86749 --- /dev/null +++ b/frontend/src/Pages/LycheReservationPage/LycheReservationPage.tsx @@ -0,0 +1,15 @@ +import { Icon } from '@iconify/react'; +import { Link } from '~/Components/Link/Link'; +import { SultenPage } from '~/Components/SultenPage'; +import { TextItem } from '~/constants/TextItems'; +import { useTextItem } from '~/hooks'; +import { ROUTES } from '~/routes'; +import styles from './LycheReservationPage.module.scss'; + +export function LycheReservationPage() { + return ( + <> + + + ); +} diff --git a/frontend/src/Pages/LycheReservationPage/index.ts b/frontend/src/Pages/LycheReservationPage/index.ts new file mode 100644 index 000000000..add145d60 --- /dev/null +++ b/frontend/src/Pages/LycheReservationPage/index.ts @@ -0,0 +1 @@ +export { LycheReservationPage} from './LycheReservationPage'; diff --git a/frontend/src/Pages/index.ts b/frontend/src/Pages/index.ts index e2ec012a4..31555ca6f 100644 --- a/frontend/src/Pages/index.ts +++ b/frontend/src/Pages/index.ts @@ -11,6 +11,7 @@ export { InformationListPage } from './InformationListPage'; export { InformationPage } from './InformationPage'; export { LoginPage } from './LoginPage'; export { LycheContactPage } from './LycheContactPage'; +export { LycheReservationPage } from './LycheReservationPage'; export { LycheAboutPage } from './LycheAboutPage'; export { LycheHomePage } from './LycheHomePage'; export { LycheMenuPage } from './LycheMenuPage'; From 99c792f98128d3b3c38d26528175f596faf8e0a7 Mon Sep 17 00:00:00 2001 From: magsyg Date: Tue, 19 Dec 2023 14:29:08 +0100 Subject: [PATCH 2/9] add reservation dto --- frontend/src/dto.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/frontend/src/dto.ts b/frontend/src/dto.ts index 9ef7f5327..6f6d2283e 100644 --- a/frontend/src/dto.ts +++ b/frontend/src/dto.ts @@ -209,6 +209,18 @@ export type MenuDto = { menu_items?: MenuItemDto[]; }; +export type ReservationFormDto = { + name?: string; + email?: string; + phonenumber?: string; + end_dt?: Date; + additional_info?: string; + // Needed for first part + venue: number; + start_dt: Date; + occasion: string; +}; + export type SaksdokumentDto = { id: number; title_nb: string; From 5f1be679b9f55f218cdd58fa3e9af31ec62cb21a Mon Sep 17 00:00:00 2001 From: magsyg Date: Tue, 19 Dec 2023 15:49:09 +0100 Subject: [PATCH 3/9] first page of form --- .../src/Components/InputField/InputField.tsx | 2 +- frontend/src/Forms/SamfFormFieldTypes.tsx | 2 + .../LycheReservationPage.tsx | 39 ++++++++++++++++++- frontend/src/dto.ts | 4 +- 4 files changed, 44 insertions(+), 3 deletions(-) diff --git a/frontend/src/Components/InputField/InputField.tsx b/frontend/src/Components/InputField/InputField.tsx index 6836693fa..5d4969e77 100644 --- a/frontend/src/Components/InputField/InputField.tsx +++ b/frontend/src/Components/InputField/InputField.tsx @@ -4,7 +4,7 @@ import { ChangeEvent } from 'react'; import { Children } from '~/types'; import styles from './InputField.module.scss'; -export type InputFieldType = 'text' | 'number' | 'email' | 'password' | 'datetime-local' | 'time'; +export type InputFieldType = 'text' | 'number' | 'email' | 'password' | 'datetime-local' | 'date' | 'time'; type InputFieldProps = { children?: Children; diff --git a/frontend/src/Forms/SamfFormFieldTypes.tsx b/frontend/src/Forms/SamfFormFieldTypes.tsx index 12ceaac5b..4208a58d7 100644 --- a/frontend/src/Forms/SamfFormFieldTypes.tsx +++ b/frontend/src/Forms/SamfFormFieldTypes.tsx @@ -24,6 +24,7 @@ export type SamfFormFieldType = | 'options' | 'image' | 'datetime' + | 'date' | 'time' | 'upload-image' | 'upload-pdf'; @@ -64,6 +65,7 @@ export const SamfFormFieldTypeMap: Record('number'), integer: makeStandardInputFunction('number'), datetime: makeStandardInputFunction('datetime-local'), + date: makeStandardInputFunction('date'), time: makeStandardInputFunction('time'), password: makeStandardInputFunction('password'), // Custom input types diff --git a/frontend/src/Pages/LycheReservationPage/LycheReservationPage.tsx b/frontend/src/Pages/LycheReservationPage/LycheReservationPage.tsx index dddd86749..50b65b790 100644 --- a/frontend/src/Pages/LycheReservationPage/LycheReservationPage.tsx +++ b/frontend/src/Pages/LycheReservationPage/LycheReservationPage.tsx @@ -5,11 +5,48 @@ import { TextItem } from '~/constants/TextItems'; import { useTextItem } from '~/hooks'; import { ROUTES } from '~/routes'; import styles from './LycheReservationPage.module.scss'; +import { ReservationDto } from '~/dto'; +import { KEY } from '~/i18n/constants'; +import { useTranslation } from 'react-i18next'; +import { useState } from 'react'; +import { SamfForm } from '~/Forms/SamfForm'; +import { SamfFormField } from '~/Forms/SamfFormField'; +import { DropDownOption } from '~/Components/Dropdown/Dropdown'; export function LycheReservationPage() { + const { t } = useTranslation(); + const [reservation, setReservation] = useState(); + const [step, setStep] = useState(0); + + const occasionOptions: DropDownOption[] = [ + { value: 'DRINK', label: 'drikke' }, + { value: 'EAT', label: 'spise' }, + ]; + + const hourseOptions: DropDownOption[] = [ + { value: '12:00', label: '12:00' }, + { value: '13:00', label: '13:00' }, + { value: '14:00', label: '14:00' }, + { value: '15:00', label: '15:00' }, + + ]; + + const occupancyOptions: DropDownOption[] = [ + { value: 1, label: '1' }, + { value: 2, label: '2' }, + { value: 3, label: '3' }, + { value: 4, label: '4' }, + + ]; return ( <> - + + + + + + + ); } diff --git a/frontend/src/dto.ts b/frontend/src/dto.ts index 6f6d2283e..a11189335 100644 --- a/frontend/src/dto.ts +++ b/frontend/src/dto.ts @@ -209,7 +209,7 @@ export type MenuDto = { menu_items?: MenuItemDto[]; }; -export type ReservationFormDto = { +export type ReservationDto = { name?: string; email?: string; phonenumber?: string; @@ -219,6 +219,8 @@ export type ReservationFormDto = { venue: number; start_dt: Date; occasion: string; + // Maybe ignore and use different dto? + // internal_message?: string; }; export type SaksdokumentDto = { From 8bf9842faa1553c478740570c5427619302c09d2 Mon Sep 17 00:00:00 2001 From: magsyg Date: Wed, 20 Dec 2023 17:51:13 +0100 Subject: [PATCH 4/9] first version of frontend for reservations --- .../commands/seed_scripts/textitems.py | 18 ++++ .../src/Components/Button/Button.module.scss | 5 ++ frontend/src/Components/Button/utils.ts | 1 + .../Components/SultenNavbar/SultenNavbar.tsx | 2 +- frontend/src/Forms/SamfForm.tsx | 8 +- .../src/Pages/LycheHomePage/LycheHomePage.tsx | 2 +- .../LycheReservationPage.module.scss | 65 ++++++-------- .../LycheReservationPage.tsx | 90 ++++++++++++++++--- .../src/Pages/LycheReservationPage/index.ts | 2 +- frontend/src/_constants.scss | 1 + frontend/src/constants/TextItems.ts | 2 + frontend/src/dto.ts | 6 +- frontend/src/i18n/constants.ts | 11 ++- frontend/src/i18n/translations.ts | 38 ++++++-- 14 files changed, 184 insertions(+), 67 deletions(-) diff --git a/backend/root/management/commands/seed_scripts/textitems.py b/backend/root/management/commands/seed_scripts/textitems.py index 9fa2bd21b..f21b2f6f9 100644 --- a/backend/root/management/commands/seed_scripts/textitems.py +++ b/backend/root/management/commands/seed_scripts/textitems.py @@ -33,6 +33,24 @@ def seed(): 'text_nb': 'Har du spørsmål eller ønsker å komme i kontakt med oss? Ikke nøl med å ta kontakt!', 'text_en': 'Do you have any questions or want to get in touch with us? Don"t hesitate to contact us!', }, + { + 'key': + 'sulten_reservation_help', + 'text_nb': + '''Bord må reserveres minst en dag i forveien. Mat kan forhåndsbestilles slik at dere ikke trenger å vente når dere kommer. + Merk at flertallet av personer må være medlem for å reservere og at alle må være over 20 år etter kl 20:00 i helger.''', + 'text_en': + '''Tables must be reserved at least one day in advance. Food can be pre-ordered so you do not have to wait when you arrive. + Note that the majority of people must be a member of the Student Society to reserve and that all must be over 20 years after 20:00 on weekends.''', + }, + { + 'key': + 'sulten_reservation_contact', + 'text_nb': + 'Reservasjonssystemet vårt er fortsatt under utvikling, og vi ber om forbehold om at feil kan forekomme. Klikk her for å bestille via epost: ', + 'text_en': + 'Our reservation system is still under development, and reservation errors may therefore occur. Click here to order via email: ', + }, ] TextItem.objects.all().delete() diff --git a/frontend/src/Components/Button/Button.module.scss b/frontend/src/Components/Button/Button.module.scss index ff38e3298..c18b3b0f0 100644 --- a/frontend/src/Components/Button/Button.module.scss +++ b/frontend/src/Components/Button/Button.module.scss @@ -42,6 +42,11 @@ color: white; } +.button_lyche { + background-color: $sulten-orange; + color: white; +} + .button_success { background-color: $green; color: white; diff --git a/frontend/src/Components/Button/utils.ts b/frontend/src/Components/Button/utils.ts index 6733fe9ba..8d8191a85 100644 --- a/frontend/src/Components/Button/utils.ts +++ b/frontend/src/Components/Button/utils.ts @@ -5,6 +5,7 @@ export const themeToStyleMap = { basic: styles.button_basic, pure: styles.pure, samf: styles.button_samf, + lyche: styles.button_lyche, secondary: styles.button_secondary, success: styles.button_success, outlined: classNames(styles.button_outlined, 'button_outlined'), // Must be globally available for theme-dark. diff --git a/frontend/src/Components/SultenNavbar/SultenNavbar.tsx b/frontend/src/Components/SultenNavbar/SultenNavbar.tsx index 7f212626f..52687d6ed 100644 --- a/frontend/src/Components/SultenNavbar/SultenNavbar.tsx +++ b/frontend/src/Components/SultenNavbar/SultenNavbar.tsx @@ -33,7 +33,7 @@ export function SultenNavbar() { setMobileNavigation(false)} className={itemStyling}> - {t(KEY.common_reservations)} + {t(KEY.common_reservation)} setMobileNavigation(false)} className={itemStyling}> {t(KEY.common_menu)} diff --git a/frontend/src/Forms/SamfForm.tsx b/frontend/src/Forms/SamfForm.tsx index dbc8a93c2..4d52a4add 100644 --- a/frontend/src/Forms/SamfForm.tsx +++ b/frontend/src/Forms/SamfForm.tsx @@ -4,6 +4,7 @@ import { Button } from '~/Components'; import { usePermission } from '~/hooks'; import { PERM } from '~/permissions'; import styles from './SamfForm.module.scss'; +import { ButtonDisplay, ButtonTheme } from '~/Components/Button'; // ================================== // // Context & State Management // @@ -92,6 +93,8 @@ type SamfFormProps = { validateOnInit?: boolean; validateOn?: ValidationMode; submitText?: string; + submitTheme?: ButtonTheme; + submitDisplay?: ButtonDisplay; noStyle?: boolean; className?: string; onChange?(data: Partial): void; @@ -107,6 +110,8 @@ export function SamfForm({ validateOnInit = false, validateOn = 'submit', submitText, + submitTheme, + submitDisplay, noStyle, className, onChange, @@ -215,7 +220,8 @@ export function SamfForm({