@olea-bps/base 1.0.0

package/views/Canteens/index.js

@@ -0,0 +1,383 @@
+/**
+ * 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 { useState, useEffect, useMemo } from 'react';
+import {
+    View,
+    ActivityIndicator,
+    SafeAreaView,
+    StyleSheet,
+    Text
+} from 'react-native';
+
+import { useTheme } from 'react-native-paper';
+import { AccordionList } from 'accordion-collapse-react-native';
+import { TabView, TabBar, TabBarItem } from 'react-native-tab-view';
+import { useTranslation } from 'react-i18next';
+import { CommonActions, useNavigation, useRoute } from '@react-navigation/native';
+
+import { DateTime, Duration } from 'luxon';
+
+import moment from 'moment';
+import 'moment/locale/de';
+
+import AppbarComponent from '../../components/AppBar';
+import IconsOpenasist from '../../libraries/icons-openasist';
+import MensaMenu from '../../components/MensaMenu';
+import { useCanteen, useCanteens, useFilteredMenu } from '../../context/context-canteen';
+import { useLanguage } from '../../libraries/core';
+
+import componentStyles from './styles';
+
+/**
+ * Generiert die Tabs/Routen für die Mensa-Tabview
+ *
+ * @param {DateTime} begin Tag mit dem die Generierung der Tabs/Routen beginnen soll
+ * @param {Number} daysToRender Anzahl der Tage, die gerendert werden sollen
+ * @param {string} language Sprache, welche für die Datumsformatierung der Tabs verwendet werden soll
+ * @param {Number[]} disabledWeekdays Liste an Wochentagen welche nicht mit in die Tabs aufgenommen werden sollen im ISO Wochentagsnummer-Format
+ * @returns
+ */
+function generateDayRoutes(begin, daysToRender, language, disabledWeekdays = []) {
+    return Array?.from(
+        { length: daysToRender },
+        (_, index) => {
+            const currentDay = begin.setLocale(language).plus({ days: index }).startOf('day');
+            const isoDayDate = currentDay?.toISODate();
+            return {
+                key: isoDayDate,
+                date: currentDay,
+            }
+        }
+    )?.filter(dayRoute => !disabledWeekdays?.includes(dayRoute?.date?.weekday));
+}
+
+function CanteensAccordionHeader({ canteenId, menuDate, isExpanded, styles }) {
+    const { t } = useTranslation();
+    const [canteen] = useCanteen(canteenId);
+    const [, refreshMenu, mealAmount, filteredMealAmount, activeSelections] = useFilteredMenu(canteenId, menuDate);
+    const { themeStyles, colors } = useTheme();
+
+    useEffect(
+        () => {
+            refreshMenu();
+        },
+        [canteenId, menuDate]
+    )
+
+    return (
+        <View style={styles.header}>
+            <View style={[themeStyles.cardLeftIcon, { marginStart: 5 }]}>
+                {
+                    canteen?.type
+                        ? <IconsOpenasist icon={((canteen.type === 'cafeteria') ? 'coffee' : 'mensa')} size={25} color={colors.icon} />
+                        : null
+                }
+            </View>
+            <View>
+                <Text style={styles.headerText}>{canteen?.title ?? `Fehler: Mensa mit ID ${canteenId} kann nicht angezeigt werden. Bitte melden!`}</Text>
+                {
+                    Array.isArray(activeSelections) && activeSelections.length > 0
+                        ? <Text>
+                            {
+                                t(
+                                    'canteen:amountOfFilteredMeals',
+                                    { filteredMealAmount, mealAmount, filters: activeSelections.map(favoriteSelection => t(favoriteSelection.labelKey)) }
+                                )
+                            }
+                        </Text>
+                        : null
+                }
+            </View>
+            <View style={styles.arrowIcon}>
+                <IconsOpenasist icon={isExpanded ? 'up' : 'down'} size={20} color={colors.grayLight5} />
+            </View>
+        </View>
+    );
+}
+
+/**
+ * Akkordion, welches die Mensen einer Universität anzeigt.
+ * Es werden automatisch die Mensen aus dem Mensa-Kontext geladen.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} props.menuDate - Datum des Essensangebotes, welches als String im ISO 8601 Format zu übergeben ist.
+ * @param {string} [props.expandedCanteenId] - ID der Mensa, dessen Akkordion-Element geöffent sein soll.
+ * @param {JSX.Element} [props.CanteensEmptyComponent] - JSX, welches angezeigt werden soll, wenn keine Mensen angezeigt werden können.
+ * @param {(expandedCanteenId: string) => void} [props.onCanteenSelect] - Event welches ausgelöst wird, wenn der Nutzer ein Akkordion-Element öffnet oder schließt.
+ * @returns {JSX.Element}
+ *
+ * @example
+ * const [activeCanteen, setActiveCanteen] = useState(null);
+ *
+ * return (
+ *     <CanteensAccordion
+ *         menuDate={'01-12-2020'}
+ *         expandedCanteenId={activeCanteen}
+ *         onCanteenSelect={
+ *             expandedCanteenId => setActiveCanteen(expandedCanteenId)
+ *         }
+ *         CanteensEmptyComponent={
+ *             <Text>Keine Mensa gefunden</Text>
+ *         }
+ *     />
+ * )
+ */
+function CanteensAccordion({ expandedCanteenId, menuDate, onCanteenSelect, CanteensEmptyComponent }) {
+
+    const [canteens] = useCanteens();
+    const canteensIds = useMemo(
+        () => Object.keys(canteens),
+        [canteens]
+    )
+    const theme = useTheme();
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    );
+
+    return (
+        <AccordionList
+            list={canteensIds}
+            expandedKey={expandedCanteenId}
+            onToggle={
+                // Wenn eine Mensa-Akkordion-Element vim Nutzer angeklickt wird, soll dessen ID bzw. Key an die onCanteenSelect-Funktion gegeben werden.
+                // Wird das Akkordion-Element geschlossen, wird null übergeben.
+                // Somit kann eine Eltern-Komponente die Kontrolle über die geöffenten Akkordion-Elemente übernehmen (siehe expandedCanteenId).
+                (key, index, isExpanded) => onCanteenSelect?.(
+                    // Wenn isExpanded == false, wurde die Mensa gerade geschlossen, ansonsten wurde die Mensa vom Nutzer geöffnet.
+                    isExpanded
+                        // Mensa-Akkordion-Element wurde geöffnet. Es wird der Mensa-Key zurückgeben.
+                        ? key
+                        // Mensa-Akkordion-Element wurde geschlossen. Es wird kein Mensa-Key zurückgeben.
+                        : null
+                )
+            }
+            keyExtractor={(canteenId, index) => canteenId}
+            header={
+                (canteenId, index, isExpanded) =>
+                    <CanteensAccordionHeader
+                        canteenId={canteenId}
+                        menuDate={menuDate}
+                        isExpanded={isExpanded}
+                        styles={styles}
+                    />
+            }
+            body={
+                canteenId =>
+                    < View style={styles.content} >
+                        <MensaMenu
+                            canteenId={canteenId}
+                            menuDate={menuDate}
+                        />
+                    </View >
+            }
+            ListEmptyComponent={CanteensEmptyComponent}
+        />
+    )
+}
+
+/**
+ * Canteens View
+ *
+ * In this view the tabbar and the scenes for the different canteens for each day are rendered
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+
+
+//TODO:
+//  - remove unused dependencies
+//  - add comments
+//  - recheck code
+//  - rename to view-canteens?
+
+export default function CanteensView(props) {
+    const language = useLanguage();
+    const route = useRoute();
+
+    const { style } = props;
+
+    const theme = useTheme();
+    const { themeStyles, colors } = theme;
+    const { t } = useTranslation();
+    const navigation = useNavigation();
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    );
+
+    const disabledWeekdays = theme?.appSettings?.modules?.canteen?.disabledWeekdays ?? [];
+    const weeksToRender = theme?.appSettings?.modules?.canteen?.weeksToRender ?? 1;
+    const daysToRender = Duration.fromDurationLike({ week: weeksToRender }).as('days');
+    const now = DateTime.now();
+    const begin = now.startOf('week');
+    const daysTabViewRoutes = generateDayRoutes(begin, daysToRender, language, disabledWeekdays);
+
+    // Derzeitiger Tag
+    const today = now.startOf('day');
+    // Suche nach dem Index des heutigen Tages oder den Tag danach. Kann kein Index gefunden werden, wird -1 genommen.
+    let initialDayTabIndex = daysTabViewRoutes.findIndex(dayTab => dayTab.date >= today);
+    // Wenn kein Index gefunden werden konnte, wird der letzte Tab genommen
+    // Wenn nur eine Woche gerendert wird und die Wochenendtagen ausgeschalten wird, wird kein folgetag gefunden.
+    initialDayTabIndex = initialDayTabIndex === -1 ? daysTabViewRoutes.length - 1 : initialDayTabIndex;
+
+    // Dieser State wird an alle Mensa-Akkordions in jedem Tages-Tab weitergeben, damit jedes Mensa-Akkordion die selbe Mensa öffen hat.
+    // Ein null-Wert, heißt dass alle Mensa-Akkordion-Elemente geschlossen sind.
+    const [activeCanteen, setActiveCanteen] = useState(null);
+
+    const [index, setIndex] = useState(initialDayTabIndex);
+
+    useEffect(() => {
+        const unsubscribeFocusListener = navigation.addListener('focus', () => {
+            _setActiveCanteenFromRoute();
+            _setTabViewIndexFromRoute();
+        });
+
+        // Cleanup function
+        return () => {
+            unsubscribeFocusListener();
+        };
+    }, [route.params?.canteenId]);
+
+    // Generieren der Tagestabs
+    const routes = useMemo(
+        () => generateDayRoutes(begin, daysToRender, language, disabledWeekdays),
+        [begin.toISODate(), daysToRender, language, disabledWeekdays]
+    )
+
+    /*
+     When a user presses a component meal item in dashboard she is taken to the Canteen Tab View.
+     To automatically expand the canteen with the pressed meal in the accordion, the canteen id is passed as a route param.
+     This method is responsible for setting the component state from the route param values which in turn controls the tab view.
+     (active canteen = the canteen which is expanded in accordion)
+     */
+    const _setActiveCanteenFromRoute = () => {
+        const canteenId = route?.params?.canteenId;
+        if (canteenId) {
+            setActiveCanteen(canteenId);
+
+            /*
+            After setting the active canteen state, the passedCanteenId needs to get set as undefined.
+            so the lastly collapsed canteen will stay collapsed after navigating through the main tab navigation
+            and not the canteen with the lastly passed id
+            */
+            navigation.dispatch(CommonActions.setParams({ canteenId: undefined }));
+        }
+    };
+
+    const _setTabViewIndexFromRoute = () => {
+        const menuDate = route.params?.menuDate;
+
+        if (!menuDate) return;
+
+        const menuDateIndex = routes.findIndex(route => route.date.toISODate() === menuDate);
+        setIndex(menuDateIndex);
+        navigation.dispatch(CommonActions.setParams({ menuDate: undefined }));
+    };
+
+    const _renderTabBar = props => {
+        return (
+            <TabBar
+                {...props}
+                scrollEnabled
+                style={themeStyles.tabs}
+                activeColor={themeStyles.tabs.activeColor}
+                inactiveColor={themeStyles.tabs.inactiveColor}
+                indicatorStyle={themeStyles.tabIndicator}
+                tabStyle={{ width: 'auto', paddingHorizontal: 20 }}
+                renderTabBarItem={({ route, navigationState, ...rest}) =>
+                  <TabBarItem
+                    {...rest}
+                    key={route.key}
+                    route={route}
+                    navigationState={navigationState}
+                    labelStyle={themeStyles.tab}
+                    activeColor={themeStyles.tabs.activeColor}
+                    inactiveColor={themeStyles.tabs.inactiveColor}
+                    // Die einbindung von moment.js zum Anzeigen des Wochentages sollte langfristig entfernt werden.
+                    // Funktioniert die Luxon funktionalität der Wochenanzeige nicht unter iOS datetime.toFormat('ccc')
+                    labelText={`${moment.unix(route.date.toUnixInteger()).locale(language).format('dd')}, ${route.date.toFormat('dd.LL.')}`}
+                    accessibilityLabel={route.date.toFormat('DDDD')}
+                  />
+                }
+            />
+        );
+    };
+
+    return (
+        <SafeAreaView style={[styles.container, themeStyles.appSafeAreaContainer]}>
+            <AppbarComponent
+                title={t('canteen:title')} {...props}
+            />
+            <View style={themeStyles.container}>
+                <TabView
+                    style={style}
+                    navigationState={{
+                        index,
+                        routes,
+
+                        // aktive Canteene wird mit übergeben, damit alle Tabs die selbe Mensa öffnen.
+                        activeCanteen,
+                    }}
+                    renderTabBar={_renderTabBar}
+                    onIndexChange={setIndex}
+                    renderScene={
+                        ({ route }) => {
+
+                            const menuDate = route?.key;
+
+                            return (
+                                <CanteensAccordion
+                                    menuDate={menuDate}
+                                    expandedCanteenId={activeCanteen}
+                                    onCanteenSelect={
+                                        // Wenn dieses Akkordion eine Mensa öffnet oder schließt, wird der activeCanteen statte mit der ID der Mensa aktualisiert.
+                                        // Falls der Nutzer die Mensa schließt und damit keine Mensa im Akkordion öffen ist, wird null in den State geschrieben.
+                                        expandedCanteenId => setActiveCanteen(expandedCanteenId)
+                                    }
+                                    CanteensEmptyComponent={
+                                        <View>
+                                            <Text>{t('canteen:notAvailable')}</Text>
+                                            <ActivityIndicator style={styles.activity} size='large' color={colors.loadingIndicator} />
+                                        </View>
+                                    }
+                                />
+                            )
+                        }
+                    }
+                    lazy
+                    lazyPreloadDistance={2}
+                    renderLazyPlaceholder={(route) =>
+                        <View style={styles.centerContainer}>
+                            <ActivityIndicator
+                                style={styles.activity}
+                                size={'large'}
+                                color={theme.colors.loadingIndicator}
+                            />
+                        </View>
+                    }
+                />
+            </View>
+
+        </SafeAreaView>
+    );
+}

package/views/Canteens/styles.js

@@ -0,0 +1,89 @@
+export default function(theme) {
+    return {
+        container: {
+            flex: 1
+        },
+        centerContainer: {
+            flex: 1,
+            justifyContent: 'center',
+            alignContent: 'center',
+        },
+        optionTextContainer: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center'
+        },
+        optionsTitleText: {
+            fontSize: theme.fontSizes.l,
+            marginLeft: 15,
+            marginTop: 0,
+            marginBottom: 0,
+            textAlign: 'left'
+        },
+        optionIconContainer: {
+            marginRight: 9,
+        },
+        option: {
+            backgroundColor: theme.colors.background,
+            paddingHorizontal: 0,
+            paddingVertical: 0,
+            borderBottomWidth: 0.4,
+            borderBottomColor: theme.colors.accent,
+        },
+        optionText: {
+            fontSize: theme.fontSizes.m,
+            marginTop: 1,
+        },
+        cardTitle: {
+            justifyContent: 'center',
+            alignItems: 'flex-start',
+            marginBottom: 0
+        },
+        cardContent: {
+            justifyContent: 'center',
+            alignItems: 'flex-start',
+            paddingTop: theme.paddings.small
+        },
+        favorite: {
+          backgroundColor: theme.colors.secondary
+        },
+        header: {
+            backgroundColor: theme.colors.background,
+            padding: 10,
+            flexDirection: "row",
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+        },
+        content: {
+            backgroundColor: theme.colors.background,
+            flex: 1
+        },
+        headerText: {
+            fontSize: theme.fontSizes.l,
+            ...theme.fonts.light,
+            marginTop: 10,
+            marginBottom: 10
+        },
+        accordian: {
+            borderBottomColor: theme.colors.accent,
+            borderBottomWidth: 1
+        },
+        arrowIcon: {
+            marginStart: 'auto',
+            marginEnd: 10,
+        },
+        tabItem: {
+            paddingHorizontal: 16
+        },
+        tabDay: {
+            textAlign: "center",
+            fontSize: theme.fontSizes.xxl,
+            color: theme.colors.primary
+        },
+        tabDate: {
+            ...theme.fonts.medium,
+            textAlign: "center",
+            color: theme.colors.primary,
+        }
+    }
+};

package/views/Dashboard/index.js

@@ -0,0 +1,176 @@
+/**
+ * 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 { useMemo, useCallback } from 'react';
+import {
+    Animated,
+    StyleSheet,
+    View,
+    RefreshControl,
+    SafeAreaView,
+    useAnimatedValue,
+} from 'react-native';
+
+import { connect } from 'react-redux';
+import { Appbar, Button, Dialog, Portal, useTheme } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+import { useFocusEffect } from '@react-navigation/native';
+import Markdown from 'react-native-markdown-display';
+
+import { onUpdateRefreshing, DataService } from '../../libraries/core';
+import TopNewsComponent from '../../components/TopNews';
+import QuickLinksComponent from '../../components/QuickLinks';
+import MensaSliderComponent from '../../components/MensaSlider';
+import CourseInfoComponent from '../../components/CourseInfo';
+import { usePendingInfos } from '../../context/context-info-dialog';
+
+import componentStyles from './styles';
+
+export const scrollRangeForAnimation = 160;
+
+/**
+ * Dashboard View
+ *
+ * The home screen of the app. Shows different informations like the top news, weather,
+ * current mensa menus and informations of the next course (if the student has imported his timtetable)
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+function DashboardView(props) {
+    const componentName = DashboardView.name;
+    const theme = useTheme();
+    const { t } = useTranslation();
+    const { themeStyles } = theme;
+    const [pendingInfos, setInfoDisplayed, refreshInfos] = usePendingInfos();
+    const pendingInfo = pendingInfos?.[0];
+    const hasNextPendingInfo = (pendingInfos?.length ?? 0) > 1
+
+    // Generate styles. Will be generated only if not present or the theme property changes.
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    )
+
+    const dataService = useMemo(
+        () => new DataService,
+        []
+    );
+
+    useFocusEffect(
+        useCallback(
+            () => {
+                refreshInfos();
+            },
+            [refreshInfos]
+        )
+    );
+
+    const scrollY = useAnimatedValue(0);
+
+    const headerTranslate = scrollY.interpolate({
+        inputRange: [0, scrollRangeForAnimation],
+        outputRange: [0, 1],
+        extrapolate: 'clamp',
+    });
+
+    console.debug(componentName, ':', 'pending info', ':', pendingInfo);
+
+    return (
+        <SafeAreaView style={[styles.container, themeStyles.appSafeAreaContainer]}>
+            <Appbar.Header style={{ elevation: 0 }} statusBarHeight={0}>
+                <Appbar.Content title={t('home:title')} titleStyle={styles.titleStyle} />
+            </Appbar.Header>
+            <Animated.ScrollView
+                style={styles.container}
+                contentContainerStyle={styles.contentContainer}
+                scrollEventThrottle={2}
+                onScroll={
+                    Animated.event(
+                        [
+                            {
+                                nativeEvent: { contentOffset: { y: scrollY } },
+                            },
+                        ],
+                        {
+                            useNativeDriver: true,
+                        },
+                    )
+                }
+                refreshControl={
+                    <RefreshControl
+                        refreshing={props.refreshing}
+                        onRefresh={() => {
+                            props.onUpdateRefreshing(true);
+                            dataService.refresh();
+                        }}
+                    />
+                }>
+                <View>
+                    <TopNewsComponent    {...props} animationRange={headerTranslate} />
+                    <QuickLinksComponent {...props} />
+                    <MensaSliderComponent {...props} />
+                    <CourseInfoComponent  {...props} />
+                </View>
+            </Animated.ScrollView>
+            <Portal>
+                <Dialog
+                    visible={
+                        pendingInfo === undefined
+                            ? false
+                            : true
+                    }
+                    dismissable={false}
+                >
+                    <Dialog.Title>{pendingInfo?.title ?? 'Info'}</Dialog.Title>
+                    <Dialog.Content>
+                        {
+                            pendingInfo
+                                ? <Markdown>
+                                    {pendingInfo?.message}
+                                </Markdown>
+                                : null
+                        }
+                    </Dialog.Content>
+                    <Dialog.Actions>
+                        <Button onPress={() => setInfoDisplayed(pendingInfo?.id)}>
+                            {
+                                hasNextPendingInfo
+                                    ? 'Next'
+                                    : 'Ok'
+                            }
+                        </Button>
+                    </Dialog.Actions>
+                </Dialog>
+            </Portal>
+        </SafeAreaView>
+    );
+}
+
+const mapStateToProps = state => {
+    return {
+        pluginComponent: state.pluginReducer.dashboard.component,
+        pluginStyles: state.pluginReducer.dashboard.styles,
+        view: state.stateReducer.view,
+        feedItems: state.stateReducer.feedItems,
+        feeds: state.stateReducer.feeds,
+        refreshing: state.stateReducer.refreshing,
+        settings: state.settingReducer
+    };
+};
+
+export default connect(mapStateToProps, { onUpdateRefreshing })(DashboardView)

package/views/Dashboard/styles.js

@@ -0,0 +1,16 @@
+export default function(theme) {
+    return {
+        container: {
+            flex: 1,
+            backgroundColor: theme.colors.background,
+        },
+        contentContainer: {
+            paddingTop: 0
+        },
+        titleStyle: {
+          ...theme.fonts.medium,
+          fontSize: theme.fontSizes.xxl,
+          alignSelf: "center"
+        }
+    }
+};