@olea-bps/components 1.0.0

package/SettingsDialogSelect/index.js

@@ -0,0 +1,73 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+
+import { Checkbox, useTheme } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+
+import { SettingsDialog } from '@olea-bps/components';
+
+import componentStyles from './styles';
+
+export default function SettingsDialogSelect({ title, visible, options, onDismiss, onOk, onChange, ...props }) {
+  const selectedOptions = Array.isArray(props?.selectedOptions) ? props.selectedOptions : [];
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  const styles = useMemo(
+    () => StyleSheet.create(componentStyles(theme)),
+    [theme, componentStyles]
+  )
+
+  return (
+    <SettingsDialog
+      title={title}
+      visible={visible}
+      onDismiss={() => onDismiss(selectedOptions)}
+      onOk={() => onOk(selectedOptions)}
+    >
+      {
+        options.map(
+          option => {
+            const optionKey = option?.key;
+            const isChecked = selectedOptions?.includes?.(optionKey) ?? false;
+            const colors = theme.colors;
+            return (
+              <Checkbox.Item
+                key={optionKey}
+                value={optionKey}
+                status={isChecked ? 'checked' : 'unchecked'}
+                label={t(option.label)}
+                labelStyle={styles.optionLabel}
+                color={colors.checkboxChecked}
+                uncheckedColor={colors.checkboxUnchecked}
+                mode={'android'}
+                onPress={
+                  () => {
+                    const nextSelectedOptions = selectedOptions.includes(optionKey)
+                      ? selectedOptions.filter(selectedOption => selectedOption !== optionKey)
+                      : [...selectedOptions, optionKey];
+                    onChange(nextSelectedOptions);
+                  }
+                }
+              />
+            )
+          }
+        )
+      }
+    </SettingsDialog>
+  );
+}

package/SettingsDialogSelect/styles.js

@@ -0,0 +1,7 @@
+export default function (theme) {
+  return {
+    optionLabel: {
+      fontSize: theme.fontSizes.m,
+    }
+  }
+};

package/TimetableCodeInput/index.js

@@ -0,0 +1,201 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useMemo } from 'react';
+import {
+  StyleSheet,
+  View,
+  ScrollView,
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Alert,
+  Text,
+  Linking,
+} from 'react-native';
+import { connect } from 'react-redux'
+import { Paragraph, TextInput, Button, withTheme } from 'react-native-paper';
+import { withTranslation } from 'react-i18next';
+
+import { ApiProviderNotInitializedError, useCourses, useTimetableCode } from '@olea-bps/context-timetable';
+
+import componentStyles from './styles';
+
+/**
+ * Diese Callback-Funktion wird gerufen, wenn der vom Nutzer ausgelöste Import erfolgreich war.
+ * @callback onImportSuccessfullyFinished
+ * @returns {void}
+ */
+
+/**
+ * Diese Callback-Funktion wird gerufen, wenn der vom Nutzer ausgelöste Importversuch fehlschägt war.
+ * Es wird der Grund des Fehlschlags zur weiteren Behandlung übergeben.
+ * @callback onImportFailed
+ * @param {*} reason
+ */
+
+/**
+ * @param {*} props
+ * @param {onImportSuccessfullyFinished} props.onImportFailed
+ * @param {onImportFailed} props.ponImportSuccessfullyFinished
+ */
+function TimetableCodeInput(props) {
+  const {
+    theme,
+    theme: { colors, appSettings: { modules: { timetable: { code } } } },
+    t,
+    // Callback, welche nach dem erfolgreichen Importieren aufgerufen wird.
+    onImportSuccessfullyFinished,
+    // Callback, welche nach einem fehlgeschlagenen Importversuch aufgerufen wird.
+    onImportFailed,
+  } = props;
+
+  const componentName = TimetableCodeInput.name;
+
+  // Einstellungen für den Stundenplan-Code
+  const timetableCodeInputLength = code?.length ?? 0;
+  const timetableCodeInputFilters = code?.filters;
+  const timetableCodeInputPreSaveFilters = Array.isArray(code?.preSaveFilters) ? code.preSaveFilters : [];
+  const timetableCodeInputFilterToUpperCase = timetableCodeInputFilters?.toUpperCase ?? false;
+
+  const [timetableCode, saveTimetableCode] = useTimetableCode();
+  const [, refreshCourses] = useCourses();
+
+  const [timetableCodeInput, setTimetableCodeInput] = useState(timetableCode);
+  const [importing, setImporting] = useState(false);
+
+  // Generate styles. Will be generated only if not present or the theme property changes.
+  const styles = useMemo(
+    () => StyleSheet.create(componentStyles(theme)),
+    [theme]
+  )
+
+  const handleLinkPress = (url) => {
+    Linking.openURL(url);
+  };
+
+  const renderTextWithLinks = (text) => {
+    const parts = text.split(/(https?:\/\/[^\s]+)/g);
+    return parts.map((part, index) => {
+      if (part.match(/https?:\/\/[^\s]+/)) {
+        const displayText = part.replace(/https?:\/\//, '');
+        return (
+          <Text
+            key={index}
+            style={styles.link}
+            onPress={() => handleLinkPress(part)}
+          >
+            {displayText}
+          </Text>
+        );
+      }
+      return part;
+    });
+  };
+
+  const paragraphText = t(timetableCode ? 'timetable:inputTimetableCode' : 'timetable:notImportedYet', { timetableCodeInputLength });
+
+  return (
+    <ScrollView style={styles.mainContentContainer}>
+      <KeyboardAvoidingView behavior={"padding"} >
+        <View style={styles.paragraph}>
+          {/*selectable and dataDetectorType only work on andorid*/}
+          <Paragraph style={styles.paragraphText} selectable={true} dataDetectorType={'link'}>
+            {renderTextWithLinks(paragraphText)}
+          </Paragraph>
+        </View>
+        <View style={styles.importTextInputContainer}>
+          <TextInput
+            theme={{ colors: { primary: colors.textInput, placeholder: colors.textLighter } }}
+            style={styles.paragraphText}
+            selectionColor={colors.textInputSelection}
+            label={t('timetable:inputPlaceholder')}
+            value={timetableCodeInput}
+            autoCapitalize={timetableCodeInputFilterToUpperCase ? 'characters' : 'none'}
+            maxLength={timetableCodeInputLength ? timetableCodeInputLength : null}
+            onChangeText={setTimetableCodeInput}
+          />
+        </View>
+        <Button
+          onPress={async () => {
+            // Wenn eine Mindestlänge des Stundenplandcodes konfiguriert ist und diese nicht von der Eingabe erreicht wird, wird ein Fehlerdialog angezeigt
+            if (timetableCodeInputLength && (timetableCodeInput?.length ?? 0) < timetableCodeInputLength) {
+              const alertTranslationValues = { timetableCodeInputLength };
+              Alert.alert(
+                t('timetable:errorCodeShort:title', alertTranslationValues),
+                t('timetable:errorCodeShort:message', alertTranslationValues),
+                [{ text: 'OK' }],
+              );
+            } else {
+              // Import-Ladeanimation aktivieren
+              setImporting(true);
+              await saveTimetableCode(
+                // Falls Filter eingestellt sind, werden diese nacheinander auf den Stundenplancode angewendet
+                timetableCodeInputPreSaveFilters.reduce(
+                  (currentTimetableCode, preSaveFilter) => preSaveFilter?.(currentTimetableCode) ?? currentTimetableCode,
+                  timetableCodeInput
+                )
+              );
+              /**
+               * Dieser Aufruf ist eigentlich unnötig, aber die Nutzer möchten Feedback, wenn der Stundenplan nochmal importiert wird.
+               * Der Stundenplan wird über einen useEffect-Hook neu geladen, sobald der neue Stundenplancode vom Context gespeichert wurde.
+               * Es soll aber die Lade-Animation angezeigt werden und zum Stundenplan zurückgespungen werden, auch wenn schon ein Stundenplancode importiert wurde.
+               *
+               * Da ich mir nicht besser zu helfen weiß, wird die refreshCourses-Funktion gerufen und importiert NOCHMAL den Stundenplan, nachdem dieser schon vom useEffect-Hook im Kontext importiert wurde.
+               * refreshCourses gibt eine Promise zurück, die mit dem fertigen Import auf nachfolgende then-Anweisungen weiterleitet.
+               *
+               * Man könnte vielleicht auch bei saveTimetableCode ein Promise zurückgeben, die den Stundenplan auch gleich importiert.
+               * Aber dann müsste man anstatt des useEffekt-Hooks, der auf den Stundenplancode reagiert, jeden refresh des Stundenplanes über den Code selbst implementieren.
+               */
+              refreshCourses()
+                // Rufe onImportSuccessfullyFinished-Callback, wenn Import erfolgreich war
+                .then(() => onImportSuccessfullyFinished?.())
+                .catch((reason) => {
+                  if (reason instanceof ApiProviderNotInitializedError) {
+                    console.error(componentName, ': ', reason);
+                  } else {
+                    console.debug(componentName, ': ', reason);
+                  }
+                  // Rufe onImportFailed.Callback, wenn Import fehlschlug
+                  onImportFailed?.(reason);
+                })
+                // Import-Ladeanimation immer deaktivieren
+                .finally(() => setImporting(false));
+            }
+          }}
+          labelStyle={styles.importButtonLabel}
+          color={colors.buttonText}
+        >
+          {t('timetable:importButton')}
+        </Button>
+        {
+          // Es wird ein Ladesymbol angezeigt, wenn der Stundenplan importiert wird.
+          importing
+            ? <>
+              <ActivityIndicator style={styles.activity} size="large" color={colors.loadingIndicator} />
+              <View style={styles.paragraph}><Paragraph>{t('timetable:importInProgress', '')}</Paragraph></View>
+            </>
+            : null
+        }
+      </KeyboardAvoidingView>
+    </ScrollView>
+  );
+}
+
+const mapStateToProps = state => {
+  return {
+    settings: state.settingReducer
+  };
+};
+
+export default connect(mapStateToProps, null)(withTranslation()(withTheme(TimetableCodeInput)))

package/TimetableCodeInput/styles.js

@@ -0,0 +1,28 @@
+export default function (theme) {
+  return {
+    mainContentContainer: {
+      flex: 1,
+      backgroundColor: theme.colors.contentBackground,
+    },
+    paragraph: {
+      paddingTop: theme.paddings.default,
+      paddingLeft: theme.paddings.default,
+      paddingRight: theme.paddings.default
+    },
+    paragraphText: {
+      fontSize: theme.fontSizes.l,
+      lineHeight: theme.lineHeights.l
+    },
+    importButtonLabel: {
+      fontSize: theme.fontSizes.l,
+      lineHeight: theme.lineHeights.l
+    },
+    importTextInputContainer: {
+      paddingLeft: theme.paddings.default,
+      paddingRight: theme.paddings.default
+    },
+    link: {
+      textDecorationLine: 'underline',
+    },
+  }
+};

package/TimetableDay/index.js

@@ -0,0 +1,266 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, useWindowDimensions } from 'react-native';
+import { connect } from 'react-redux';
+import { withTheme } from 'react-native-paper';
+import { withTranslation } from 'react-i18next';
+import { onUpdateRefreshing } from '@olea-bps/core';
+import componentStyles from "./styles";
+import { Calendar } from 'react-native-big-calendar';
+import { useCourses } from '@olea-bps/context-timetable';
+import CalendarStrip from 'react-native-calendar-strip';
+import CourseDetailDialog from '../component-course-detail-dialog';
+import { DateTime, Duration } from 'luxon';
+import { TabView } from 'react-native-tab-view';
+import moment from 'moment';
+import 'moment/locale/de';
+
+/**
+ * Die Zeitspanne, welche vor und nach heute angezeigt werden soll.
+ */
+const daysTabDuration = Duration.fromISO('P6M');
+
+/**
+ *
+ * @param {object} props
+ * @param {(DateTime) => void} props.onDateChanged Callback, welche aufgerufen wird, wenn der Tag in der Ansicht wechselt
+ * @returns
+ */
+function CalendarDay({ selectedDate, theme, settings, calendarScrollOffsetMinutes, onDateChanged, onCourseSelected }) {
+    const { appSettings: { modules: { timetable: { showDetails } } } } = theme;
+    const today = DateTime.now().toISODate();
+
+    const { width } = useWindowDimensions();
+
+    const [courses] = useCourses();
+
+    const language = settings?.settingsGeneral?.language;
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    );
+
+    const calendarStripMinDate = useMemo(
+        () => DateTime.fromISO(today).minus(daysTabDuration).toJSDate(),
+        [today, daysTabDuration]
+    );
+
+    const calendarStripMaxDate = useMemo(
+        () => DateTime.fromISO(today).plus(daysTabDuration).toJSDate(),
+        [today, daysTabDuration]
+    );
+
+    const daysTabViewRoutes = useMemo(
+        () => {
+            const dateRoutes = [];
+            const todayDateTime = DateTime.fromISO(today);
+            const beginDateTime = todayDateTime.minus(daysTabDuration);
+            const endDateTime = todayDateTime.plus(daysTabDuration);
+            let currentDateTime = DateTime.fromObject(beginDateTime.toObject());
+
+            const eventColor = theme.colors.eventContainerSidebar;
+
+            while (currentDateTime <= endDateTime) {
+                const currentISODate = currentDateTime.toISODate();
+                const currentDateTimeCourses = courses?.[currentISODate]
+                    ?.map(
+                        course => (
+                            {
+                                title: course.title.data,
+                                start: course.startDateTime,
+                                end: course.endDateTime,
+                                color: eventColor,
+                                type: course.type?.data,
+                                professor: course.lecturer[0]?.data,
+                                room: course.room.data,
+                            }
+                        )
+                    ) ?? [];
+
+                dateRoutes.push(
+                    {
+                        key: currentISODate,
+                        date: currentDateTime,
+                        events: currentDateTimeCourses,
+                    }
+                );
+
+                currentDateTime = currentDateTime.plus({ day: 1 });
+            }
+
+            return dateRoutes;
+        },
+        [today, courses, language]
+    );
+
+    const daysTabViewIndexes = useMemo(
+        () => daysTabViewRoutes
+            .reduce(
+                (accumulator, currentRoute, currentIndex) =>
+                (
+                    {
+                        ...accumulator,
+                        [currentRoute.key]: currentIndex
+                    }
+                ),
+                {}
+            ),
+        [daysTabViewRoutes]
+    )
+
+    const daysTabViewIndex = useMemo(
+        () => {
+            const selectedISODate = selectedDate.toISODate();
+            return daysTabViewIndexes[selectedISODate];
+        },
+        [daysTabViewIndexes, selectedDate]
+    )
+
+    const renderEvent = useCallback((event, touchableOpacityProps) => {
+        const { style, ...restTouchableOpacityProps } = touchableOpacityProps;
+        return (
+            <TouchableOpacity {...restTouchableOpacityProps} style={[style, styles.eventContainer, { borderLeftColor: event.color || '#000' }]} >
+                <View style={styles.eventHeader}>
+                    <Text style={styles.eventTitle} numberOfLines={1} ellipsizeMode="tail">
+                        {event.title}
+                    </Text>
+                    <Text style={styles.eventType} numberOfLines={1} ellipsizeMode="tail">
+                        {event.type}
+                    </Text>
+                </View>
+                <Text style={styles.eventProfessor} numberOfLines={1} ellipsizeMode="head">
+                    {event.professor}
+                </Text>
+                <View style={styles.eventFooter}>
+                    <Text style={styles.eventTime} numberOfLines={1} ellipsizeMode="tail">
+                        {`${event.start.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} - ${event.end.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}`}
+                    </Text>
+                    <Text style={styles.eventRoom} numberOfLines={1} ellipsizeMode="tail">
+                        {event.room}
+                    </Text>
+                </View>
+            </TouchableOpacity>
+        );
+    }, [styles]);
+
+    const renderScene = useCallback(
+        ({ route }) => {
+            return (
+                <View style={{ flex: 1, width: width }}>
+                    <Calendar
+                        events={route.events}
+                        renderEvent={renderEvent}
+                        renderHeader={() => null}
+                        overlapOffset={95}
+                        mode={'day'}
+                        height={800}
+                        headerContentStyle={{ backgroundColor: 'transparent' }}
+                        weekStartsOn={1}
+                        date={route.key}
+                        swipeEnabled={false}
+                        onPressEvent={
+                            showDetails
+                                ? (event) => {
+                                    const eventDateISO = DateTime.fromJSDate(event.start).toISODate();
+
+                                    const eventStartTime = event.start.getTime();
+                                    const originalCourse = courses[eventDateISO]
+                                        ?.find(
+                                            course =>
+                                                eventStartTime === course.startDateTime.getTime()
+                                                &&
+                                                event?.title === course?.title?.data
+                                                &&
+                                                event?.professor === course?.lecturer[0]?.data
+                                                &&
+                                                event?.room === course?.room?.data
+                                        );
+
+                                    onCourseSelected(originalCourse);
+                                }
+                                : null
+                        }
+                        scrollOffsetMinutes={calendarScrollOffsetMinutes}
+                        hourStyle={styles.hourStyle}
+                    />
+                </View>
+            );
+        },
+        [styles, calendarScrollOffsetMinutes, courses, width, renderEvent]
+    );
+
+    return (
+        <>
+            <View style={styles.stripShadow}>
+                <CalendarStrip
+                    style={styles.strip}
+                    locale={{
+                        name: language,
+                        config: moment.localeData(language)
+                    }}
+                    selectedDate={selectedDate.toJSDate()}
+                    onDateSelected={
+                        (date) =>
+                            onDateChanged?.(
+                                DateTime.fromObject(
+                                    {
+                                        year: date.year(),
+                                        month: date.month() + 1,
+                                        day: date.date(),
+                                    }
+                                )
+                            )
+                    }
+                    highlightDateContainerStyle={styles.highlightDateContainer}
+                    showMonth={false}
+                    iconStyle={{ display: 'none' }}
+                    scrollable={true}
+                    minDate={calendarStripMinDate}
+                    maxDate={calendarStripMaxDate}
+                />
+            </View>
+
+            <TabView
+                navigationState={{ index: daysTabViewIndex, routes: daysTabViewRoutes }}
+                renderTabBar={() => null}
+                lazy
+                lazyPreloadDistance={1}
+                onIndexChange={
+                    (index) => {
+                        const currentDateTime = daysTabViewRoutes?.[daysTabViewIndex].date;
+                        const indexDelta = index - daysTabViewIndex;
+                        const deltaDateTime = currentDateTime.plus({ days: indexDelta });
+                        onDateChanged?.(deltaDateTime);
+                    }
+                }
+                renderScene={renderScene}
+            />
+        </>
+    )
+}
+
+const mapStateToProps = (state) => {
+    return {
+        pluginComponent: state.pluginReducer.timetable.component,
+        pluginStyles: state.pluginReducer.timetable.styles,
+        settings: state.settingReducer,
+        refreshing: state.stateReducer.refreshing,
+
+    };
+};
+
+export default connect(mapStateToProps, { onUpdateRefreshing })(withTranslation()(withTheme(CalendarDay)));

package/TimetableDay/styles.js

@@ -0,0 +1,103 @@
+export default function (theme) {
+    return {
+        eventContainer: {
+            borderLeftWidth: 4,
+            backgroundColor: theme.colors.eventContainerBackground,
+            padding: 10,
+            marginBottom: 10,
+            marginRight: 10,
+            borderRadius: 8,
+            elevation: 5,
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.3,
+            shadowRadius: 3,
+            overflow: 'visible',
+        },
+
+        eventHeader: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            marginBottom: 0,
+        },
+        eventTitle: {
+            color: theme.colors.text,
+            fontSize: 14,
+            fontWeight: 'bold',
+            flex: 1,
+            paddingRight: 10,
+        },
+        eventType: {
+            color: theme.colors.text,
+            fontSize: 13,
+        },
+        eventProfessor: {
+            color: theme.colors.text,
+            fontSize: 13,
+            paddingTop: 4,
+        },
+        eventFooter: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginTop: 4,
+        },
+        eventTime: {
+            fontSize: 13,
+            color: theme.colors.text,
+            flex: 1,
+        },
+        eventRoom: {
+            fontSize: 13,
+            color: theme.colors.text,
+            textAlign: 'right',
+            flex: 1,
+        },
+        highlightDateContainer: {
+            borderRadius: 100,
+            borderWidth: 3,
+            borderColor: 'red',
+            height: 48,
+            width: 48,
+        },
+        courseCard: {
+            paddingLeft: 5,
+        },
+        courseTimeContainerBigFont: {
+            width: "25%",
+        },
+        timeText: {
+            fontSize: theme.fontSizes.subtitle,
+            paddingTop: theme.paddings.small,
+            paddingBottom: theme.paddings.small
+        },
+        timeTextBig: {
+            fontSize: theme.fontSizes.m
+        },
+
+        courseContainerBigFont: {
+            width: "75%",
+        },
+        type: {
+            fontSize: theme.fontSizes.subtitle,
+            color: theme.colors.subtitle
+        },
+        strip: {
+            height: 65,
+            paddingTop: 5,
+            paddingBottom: 5,
+            elevation: 5,
+            backgroundColor: '#fff',
+        },
+        stripShadow: {
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 3 },
+            shadowOpacity: 0.2,
+            shadowRadius: 2,
+        },
+        hourStyle: {
+            fontSize: 12,
+            color: theme.colors.text,
+        },
+    };
+}