center loading spin

master
alex 2024-01-21 20:46:11 +01:00
parent 55528a29ac
commit 7cff157014
3 changed files with 18 additions and 7 deletions

View File

@ -173,7 +173,8 @@
"description": "Aus Sicherheitsgründen müssen Sie Ihr Passwort eingeben, um die Verbindung zu Ihrem Google Kalender zu trennen.", "description": "Aus Sicherheitsgründen müssen Sie Ihr Passwort eingeben, um die Verbindung zu Ihrem Google Kalender zu trennen.",
"checkboxDeleteCalendars": "Kalender für Öffnungszeiten und Termine löschen (Alle Termine werden gelöscht und können nicht wiederhergestellt werden)", "checkboxDeleteCalendars": "Kalender für Öffnungszeiten und Termine löschen (Alle Termine werden gelöscht und können nicht wiederhergestellt werden)",
"button": "Google Kalender trennen" "button": "Google Kalender trennen"
} },
"calendarFrameCustomerView": "Terminkalenderansicht der Kunden"
}, },
"storeSettings": { "storeSettings": {
"pageTitle": "Einstellungen" "pageTitle": "Einstellungen"

View File

@ -176,7 +176,8 @@
"description": "For security reasons, you need to enter your password to unlink your Google Calendar.", "description": "For security reasons, you need to enter your password to unlink your Google Calendar.",
"checkboxDeleteCalendars": "Delete calendar for opening hours and appointments (all appointments are deleted and cannot be restored)", "checkboxDeleteCalendars": "Delete calendar for opening hours and appointments (all appointments are deleted and cannot be restored)",
"button": "Unlink Google Calendar" "button": "Unlink Google Calendar"
} },
"calendarFrameCustomerView": "Appointment diary view of customers"
}, },
"storeSettings": { "storeSettings": {
"pageTitle": "Settings" "pageTitle": "Settings"

View File

@ -106,7 +106,9 @@ export default function StoreCalendar() {
</Col> </Col>
<Col xs={24}> <Col xs={24}>
<Card title={t("calendar.calendarFrameCustomerView")}>
<CalendarFrame storeId={storeId} /> <CalendarFrame storeId={storeId} />
</Card>
</Col> </Col>
</Row> </Row>
</> </>
@ -121,15 +123,22 @@ function CalendarFrame({ storeId }) {
return ( return (
<> <>
{isLoading && ( {isLoading && (
<MyCenteredContainer> <div
style={{
display: "flex",
height: "50vh",
justifyContent: "center",
alignItems: "center",
}}
>
<Spin size="large" /> <Spin size="large" />
</MyCenteredContainer> </div>
)} )}
<iframe <iframe
onLoad={() => setIsLoading(false)} onLoad={() => setIsLoading(false)}
style={{ border: 0, borderRadius: 10 }} style={{ border: 0, borderRadius: 12 }}
width="100%" width="100%"
height={600} height={530}
src={`${Constants.EMBED_CALENDAR_ADDRESS}${storeId}`} src={`${Constants.EMBED_CALENDAR_ADDRESS}${storeId}`}
/> />
</> </>