Skip to content

Commit

Permalink
feat(ui): ui improvements
Browse files Browse the repository at this point in the history
- refactor and improve user interface
- additional i18n fixes
  • Loading branch information
cgawron committed Sep 27, 2024
1 parent 5fb9155 commit c08e636
Show file tree
Hide file tree
Showing 16 changed files with 428 additions and 558 deletions.
10 changes: 4 additions & 6 deletions client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
"license": "MIT",
"__proxy": "https://jupiter.fh-swf.de/",
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0",
"@mui/icons-material": "6.1.1",
"@mui/material": "^6.1.1",
"@mui/system": "^6.1.1",
Expand All @@ -46,12 +46,10 @@
"jsonwebtoken": "^9.0.2",
"moment": "^2.30.1",
"react": "^18.3.1",
"react-dom": "^18.2.0",
"react-dom": "^18.3.1",
"react-i18next": "^15.0.2",
"react-markdown": "^8.0.7",
"react-router-dom": "^6.15.0",
"react-time-picker": "^6.5.0",
"react-toastify": "^9.1.3"
"react-router-dom": "^6.26.2"
},
"scripts": {
"start": "vite",
Expand Down
52 changes: 33 additions & 19 deletions client/public/locales/de/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,34 @@
"north_least_gopher_burn": "Was ist der Zweck dieser Terminart?",
"lazy_just_duck_spin": "Titel des Events",
"Confirm meeting": "Termin bestätigen",
"Daily availability": "Tägliche Verfügbarkeit",
"tiny_factual_platypus_pave": "Wo findet das Meeting statt?",
"less_equal_octopus_dine": "Anpassbarer Teil der URL",
"quiet_male_yak_slurp": "Kurz-URL",
"dizzy_quiet_walrus_hush": "mein-termin",
"quaint_known_wasp_view": "Minimaler Vorlauf (Tage)",
"pretty_grand_cuckoo_arrive": "Minimaler Vorlauf, mit dem ein Termin gebucht werden kann.",
"slow_maroon_spider_praise": "Maximale Anzahl an Terminen dieses Typs, die pro Tag gebucht werden können.",
"grand_wacky_ox_flow": "Maximale Anzahl pro tag",
"left_aloof_stork_leap": "Vorlaufpuffer",
"elegant_early_boar_accept": "Wie lange dauert diese Terminart?",
"ideal_this_coyote_inspire": "Dauer",
"jumpy_tasty_rook_trust": "Dauer",
"real_big_crow_push": "Pufferzeit vor dieser Terminart",
"mealy_happy_ray_flop": "Vorlaufpuffer",
"close_actual_deer_boil": "Anschlusspuffer",
"keen_zippy_bulldog_gaze": "Puffer nach dieser Terminart",
"seemly_fine_octopus_slurp": "Verfügbarkeit",
"each_awake_tadpole_jest": "Terminart bearbeiten",
"extra_patient_warbler_praise": "Keine buchbaren Termine",
"petty_swift_piranha_rise": "Termin vereinbaren",
"broad_close_butterfly_drop": "Vereinbaren Sie einen Termin mit {{name}}",
"weary_known_gazelle_file": "Bitte wählen Sie die gewünschte Terminart. Sie erhalten eine Liste der verfügbaren Termine in meinem Zeitplan.",
"low_clean_haddock_bubble": "Meine Veranstaltungstypen",
"pink_trite_ocelot_enrich": "Sie müssen zuerst Ihren Kalender verbinden, bevor Sie Ereignisse hinzufügen können!",
"early_sweet_mantis_peek": "Veranstaltungstyp hinzufügen",
"deft_suave_bear_pause": "Termine werden geladen ...",
"equal_jolly_thrush_empower": " Minuten",
"Schedule an appointment": "Termin vereinbaren",
"Name": "Name",
"Please provide your name": "Bitte geben Sie Ihren Namen an",
Expand All @@ -15,7 +43,6 @@
"Change": "ändern",
"Back": "Zurück",
"Add Event Type": "Terminart hinzufügen",
"Daily availability": "Tägliche Verfügbarkeit",
"Confirm & Book": "Termin bestätigen",
"Confirmation": "Bestätigung",
"confirmationText": "Sie haben eine {{event}} mit {{name}} am {{date}} um {{time}} Uhr gebucht.",
Expand All @@ -24,22 +51,9 @@
"Choose date": "Datum wählen",
"Choose time": "Uhrzeit wählen",
"Provide details": "Details angeben",
"tiny_factual_platypus_pave": "Wo findet das Meeting statt?",
"less_equal_octopus_dine": "Anpassbarer Teil der URL",
"quiet_male_yak_slurp": "Kurz-URL",
"dizzy_quiet_walrus_hush": "mein-termin",
"quaint_known_wasp_view": "Minimaler Vorlauf (Tage)",
"pretty_grand_cuckoo_arrive": "Minimaler Vorlauf, mit dem ein Termin gebucht werden kann.",
"slow_maroon_spider_praise": "Maximale Anzahl an Terminen dieses Typs, die pro Tag gebucht werden können.",
"grand_wacky_ox_flow": "Maximale Anzahl pro tag",
"left_aloof_stork_leap": "Vorlaufpuffer",
"elegant_early_boar_accept": "Wie lange dauert diese Terminart?",
"ideal_this_coyote_inspire": "Dauer",
"jumpy_tasty_rook_trust": "Dauer",
"real_big_crow_push": "Pufferzeit vor dieser Terminart",
"mealy_happy_ray_flop": "Vorlaufpuffer",
"close_actual_deer_boil": "Anschlusspuffer",
"keen_zippy_bulldog_gaze": "Puffer nach dieser Terminart",
"seemly_fine_octopus_slurp": "Verfügbarkeit",
"each_awake_tadpole_jest": "Terminart bearbeiten"
"heroic_kind_llama_zip": "Zurück",
"awake_jolly_gazelle_lock": "Überspringen",
"whole_acidic_parrot_promise": "Termin buchen",
"clear_close_racoon_pat": "{{value, dateTime}}",
"cuddly_spare_felix_stir": "Schritt {{val}}"
}
17 changes: 16 additions & 1 deletion client/public/locales/en/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,5 +27,20 @@
"keen_zippy_bulldog_gaze": "Buffer after this event",
"seemly_fine_octopus_slurp": "Availability",
"ideal_best_parrot_aim": "Edit Event Type",
"each_awake_tadpole_jest": "Edit Event Type"
"each_awake_tadpole_jest": "Edit Event Type",
"extra_patient_warbler_praise": "No events to book",
"petty_swift_piranha_rise": "Schedule event",
"broad_close_butterfly_drop": "Schedule an appointment with {{name}}",
"weary_known_gazelle_file": "Please select the type of appointment you need and click on the schedule\n button to book it. You will get a list of available slots in my schedule.",
"low_clean_haddock_bubble": "My Event Types",
"pink_trite_ocelot_enrich": "You need to connect your Calendar first, before you can add Events!",
"early_sweet_mantis_peek": "Add event type",
"deft_suave_bear_pause": "Loading",
"equal_jolly_thrush_empower": " minutes",
"Schedule an appointment": "Schedule an appointment",
"heroic_kind_llama_zip": "Back",
"awake_jolly_gazelle_lock": "Skip",
"whole_acidic_parrot_promise": "Book appointment",
"clear_close_racoon_pat": "{{value, dateTime}}",
"cuddly_spare_felix_stir": "Step {{val}}"
}
109 changes: 56 additions & 53 deletions client/src/components/BookDetails.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useState } from "react";

import { Grid, TextField } from "@mui/material";
import { TextField } from "@mui/material";
import Grid from "@mui/material/Grid2";
import { Event } from "common";
import { useTranslation } from "react-i18next";
import React from "react";
Expand Down Expand Up @@ -51,59 +52,61 @@ const BookDetails = (props: BookDetailsProps) => {
};

return (
<Grid container alignItems="stretch" direction="column">
<Grid item>
<TextField
id="name"
name="name"
label={t("Name")}
error={"name" in props.errors}
inputRef={nameRef}
required
fullWidth
helperText={t("Please provide your name")}
margin="normal"
onChange={handleOnChange("name")}
variant="filled"
value={formData.name}
/>
<>
<Grid container alignItems="stretch" direction="column">
<Grid>
<TextField
id="name"
name="name"
label={t("Name")}
error={"name" in props.errors}
inputRef={nameRef}
required
fullWidth
helperText={t("Please provide your name")}
margin="normal"
onChange={handleOnChange("name")}
variant="filled"
value={formData.name}
/>
</Grid>
<Grid>
<TextField
id="email"
name="email"
label={t("Email")}
type="email"
error={"email" in props.errors}
inputRef={emailRef}
required
fullWidth
helperText={t("You will receive a confirmation email")}
margin="normal"
onChange={handleOnChange("email")}
variant="filled"
value={formData.email}
/>
</Grid>
<Grid>
<TextField
id="description"
name="description"
label={t("Information")}
inputRef={descriptionRef}
multiline
error={"info" in props.errors}
minRows="4"
helperText={t(
"Please share anything that will help me to prepare for our meeting"
)}
margin="normal"
onChange={handleOnChange("description")}
variant="filled"
value={formData.description}
/>
</Grid>
</Grid>
<Grid item>
<TextField
id="email"
name="email"
label={t("Email")}
type="email"
error={"email" in props.errors}
inputRef={emailRef}
required
fullWidth
helperText={t("You will receive a confirmation email")}
margin="normal"
onChange={handleOnChange("email")}
variant="filled"
value={formData.email}
/>
</Grid>
<Grid item>
<TextField
id="description"
name="description"
label={t("Information")}
inputRef={descriptionRef}
multiline
error={"info" in props.errors}
minRows="4"
helperText={t(
"Please share anything that will help me to prepare for our meeting"
)}
margin="normal"
onChange={handleOnChange("description")}
variant="filled"
value={formData.description}
/>
</Grid>
</Grid>
</>
);
};

Expand Down
2 changes: 1 addition & 1 deletion client/src/components/EventCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const useStyles = makeStyles({
*/

type EventCardProps = {
event: EventDocument;
event: EventDocument | Event;
token: string;
url: string;
setActive: (active: boolean) => void;
Expand Down
12 changes: 6 additions & 6 deletions client/src/components/EventForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -117,12 +117,12 @@ const EditSlot = (props: EditSlotProps) => {
/>
</FormControl>
</Grid>
<Grid item xs={9}>
<Grid xs={9}>
<Grid container>
{slots.map((slot, index) => (

<FormGroup row key={index} style={{ "alignItems": "baseline" }}>
<Grid item xs={4} textAlign="end">
<Grid xs={4} textAlign="end">
<Input
type="time"
placeholder="Starttime"
Expand Down Expand Up @@ -281,7 +281,7 @@ export const EventForm = (props: EventFormProps): JSX.Element => {
</Typography>

<Grid container spacing={3}>
<Grid item xs={12} sm={4}>
<Grid xs={12} sm={4}>
<FormControl margin="normal" variant="filled">
<InputLabel id="duration-label">{t("ideal_this_coyote_inspire")}</InputLabel>
<Select
Expand All @@ -299,7 +299,7 @@ export const EventForm = (props: EventFormProps): JSX.Element => {
</FormControl>
</Grid>

<Grid item xs={12} sm={4}>
<Grid xs={12} sm={4}>
<FormControl component="span" margin="normal" variant="filled">
<InputLabel id="buffer-before-label">{t("mealy_happy_ray_flop")}</InputLabel>
<Select
Expand All @@ -318,7 +318,7 @@ export const EventForm = (props: EventFormProps): JSX.Element => {
</FormControl>
</Grid>

<Grid item xs={12} sm={4}>
<Grid xs={12} sm={4}>
<FormControl component="span" margin="normal" variant="filled">
<InputLabel id="buffer-after-label">{t("close_actual_deer_boil")}</InputLabel>
<Select
Expand All @@ -345,7 +345,7 @@ export const EventForm = (props: EventFormProps): JSX.Element => {
</Typography>

<Grid container spacing={3}>
<Grid item xs={12} sm={4}>
<Grid xs={12} sm={4}>
<TextField
id="maxFuture"
label={t("Maximum days in advance")}
Expand Down
89 changes: 89 additions & 0 deletions client/src/components/EventType.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@

import React from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Card, CardActions, CardContent, CardHeader, Avatar } from '@mui/material';
import Grid from '@mui/material/Grid2';
import { Event, User } from 'common';
import { HourglassBottomTwoTone, RoomTwoTone } from '@mui/icons-material';
import ScheduleTwoToneIcon from '@mui/icons-material/ScheduleTwoTone';

export type EventTypeProps = {
event: Event;
user: User;
time: Date | undefined;
handleOnClick?: (event: Event) => void | undefined;
};

export const EventType = (props: EventTypeProps) => {
const { event, user, time, handleOnClick } = props;
const { t } = useTranslation();

console.log("EventType: event=%o, user=%o, time=%o", event, user, time);
return (<Card>
<CardHeader
avatar={<Avatar alt={user?.name} src={user?.picture_url} />}
title={event.name}
titleTypographyProps={{ variant: 'h5' }}
subheader={event.description}
/>
<CardContent>
<Grid
sx={{
display: "grid",
paddingLeft: "0",
paddingRight: "0",
gridTemplateColumns: "32px 1fr",
alignItems: "stretch"
}}>
<Grid sx={{
//justifySelf: "center"
}}>
<HourglassBottomTwoTone />
</Grid>
<div>
{event.duration + t("equal_jolly_thrush_empower")}
</div>
<Grid sx={{
//justifySelf: "center"
}}>
<RoomTwoTone />
</Grid>
<div>
{event.location}
</div>
{
time ?
<>
<Grid sx={{
//justifySelf: "center"
}}>
<ScheduleTwoToneIcon />
</Grid>
<div>
{time.toLocaleDateString()} {time.toLocaleTimeString()}
</div>
</> : null
}
</Grid>

</CardContent>

{
handleOnClick ?
<CardActions>
<Button
color="primary"
aria-label="schedule"
onClick={(evt) => {
evt.preventDefault();
handleOnClick(event);
}}
startIcon={<ScheduleTwoToneIcon />}
>
{t("petty_swift_piranha_rise")}
</Button>
</CardActions> : null
}
</Card>);

}
Loading

0 comments on commit c08e636

Please sign in to comment.