@olea-bps/components 1.0.0

package/MensaMenu/index.js

@@ -0,0 +1,307 @@
+/**
+ * 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, useEffect } from 'react';
+import {
+    Text,
+    StyleSheet,
+    View,
+    Image
+} from 'react-native';
+import { connect } from 'react-redux'
+import { Button, Dialog, Portal, useTheme } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+
+import { useFilteredMenu } from '@olea-bps/context-canteen';
+
+import { onUpdateRefreshing } from "@olea-bps/core";
+import IconsOpenasist from "@olea-bps/icons-openasist";
+
+import componentStyles from './styles';
+
+/**
+ * Mensa Menu Component
+ *
+ * Shows a list of all menu items of selected canteen
+ * The class component uses hooks in order to render each meal component and each dialog as its own component
+ * instead of the whole menu
+ *
+ * In this component two hooks are used:
+ *  - Meal that renders each meal
+ *  - AdditionalDialog that renders the dialog containing all additives and allergens if there are any
+ *
+ * Parameters:
+ *  - none
+ *
+ */
+
+
+function SelectionIcons({ selections, iconSize }) {
+    const theme = useTheme();
+    const { colors } = theme;
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme, componentStyles]
+    );
+
+    return (
+        <View style={styles.mealItemTitleIcons}>
+            {
+                selections.map(
+                    selection =>
+                        <View key={selection} style={{ marginLeft: 2, lineHeight: 20 }}>
+                            <IconsOpenasist icon={"mensa-" + selection} color={colors.secondaryText} size={iconSize} />
+                        </View>
+                )
+            }
+        </View>
+    );
+}
+
+function AdditionalDialog({ allergens, additives, visible, onDismiss }) {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const { colors } = theme;
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme, componentStyles]
+    );
+
+    return (
+        <Portal>
+            <Dialog
+                visible={visible}
+                onDismiss={onDismiss}>
+                <Dialog.Title style={styles.dialogTitle}>{t('canteen:allergeneTitle')}</Dialog.Title>
+                <Dialog.Content>
+                    {
+                        Array.isArray(allergens)
+                            ? <View style={styles.addionals}>
+                                <Text style={styles.dialogContent}>{t('canteen:allergens:title')}</Text>
+                                {
+                                    allergens.map(
+                                        allergen =>
+                                            <Text key={allergen} style={styles.dialogContent}>{t('canteen:allergens:' + allergen)}</Text>
+                                    )
+                                }
+                            </View>
+                            : null
+                    }
+                    {
+                        Array.isArray(additives)
+                            ? <View style={styles.addionals}>
+                                <Text style={styles.dialogContent}>{t('canteen:additives:title')}</Text>
+                                {
+                                    additives.map(
+                                        additive =>
+                                            <Text key={additive} style={styles.dialogContent}>{t('canteen:additives:' + additive)}</Text>
+                                    )
+                                }
+                            </View>
+                            : null
+                    }
+                </Dialog.Content>
+                <Dialog.Actions>
+                    <Button labelStyle={styles.dialogContent} onPress={onDismiss} color={colors.buttonText}>
+                        {t('common:okLabel')}
+                    </Button>
+                </Dialog.Actions>
+            </Dialog>
+        </Portal>
+    );
+}
+
+
+function Meal({ settings, meal, priceGroupCode, priceGroupName }) {
+    /**
+     * @param props contains the current meal, styles, themestyles and local styles
+     * @returns {*} a component for each meal(including dialog) with its own state
+     *
+     * The main-motivation for using hooks is that the state can be set for each meal instead of setting it for every menu.
+     * Otherwise the dialog rendered by the AdditionalDialog-function would be set to visible for very meal in the menu at once
+     * resulting in the background becoming completely dark when the dialog is opened and other style-related issues
+     * By using hooks, the visibility can be set for each individual meal.
+     * The function is called in the render function of the class-component inside the flatlist-component for every single meal
+     * AdditionalDialog is also another hook on its own and is defined above this function
+    */
+
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const { themeStyles, colors } = theme;
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme, componentStyles]
+    );
+    const language = settings.settingsGeneral.language;
+
+    const mealPrice = useMemo(
+        () => {
+            const mealPrice = meal?.prices?.[priceGroupCode];
+
+            return typeof mealPrice === 'number'
+                ? `${mealPrice.toFixed(2).toLocaleString(language ?? 'de')} €`
+                : mealPrice;
+
+        },
+        [meal, meal?.prices, priceGroupCode, language]
+    );
+
+    /*
+    The const visible is a state defined for each single Meal-Component and can be set by teh setVisible-Fucntion
+    item contains all information for the current meal. It is still unfortunate that the filtering Process is done while rendering
+    and not before
+    */
+    const [additionalDialogVisible, setAdditionalDialogVisible] = useState(false);
+
+    return (
+        <View style={themeStyles.flexRow}>
+            <View style={[themeStyles.cardContent, styles.mealContent]}>
+                {
+                    meal?.imageUrl
+                        ? <Image
+                            style={styles.mealImage}
+                            source={{ uri: meal.imageUrl }}
+                            resizeMode="contain"
+                        />
+                        : null
+                }
+                <View style={styles.mealItemTitle}>
+                    <Text style={styles.mealItemTitleText}>
+                        {meal.category}
+                    </Text>
+                    <Text>
+                        <SelectionIcons
+                            selections={meal?.selections ?? []}
+                            iconSize={styles.mealItemTitleText.lineHeight}
+                        />
+                    </Text>
+                </View>
+                <Text style={styles.mealItemText}>
+                    {meal.title}
+                </Text>
+                <View style={styles.addionalInformation}>
+                    <Text style={styles.mealItemPrice}>
+                        {
+                            priceGroupName && mealPrice
+                                ? `${priceGroupName}: ${mealPrice}`
+                                : null
+                        }
+                    </Text>
+                    {
+                        meal?.additives || meal?.allergens
+                            ? <>
+                                <Button
+                                    style={styles.btnAddionals}
+                                    color={colors.buttonText}
+                                    labelStyle={styles.buttonLabel}
+                                    accessibilityLabel={t('canteen:allergeneTitle')}
+                                    onPress={() => setAdditionalDialogVisible(true)}
+                                >
+                                    <IconsOpenasist
+                                        icon={"info"}
+                                        color={colors.secondaryText}
+                                        size={15}
+                                    />
+                                </Button>
+                                <AdditionalDialog
+                                    allergens={meal?.allergens}
+                                    additives={meal?.additives}
+                                    visible={additionalDialogVisible}
+                                    onDismiss={() => setAdditionalDialogVisible(false)}
+                                />
+                            </>
+                            : null
+                    }
+                </View>
+            </View>
+        </View>
+    );
+}
+
+function MensaMenu(props) {
+    const componentName = MensaMenu.name;
+
+    const { t } = useTranslation();
+    const { canteenId, menuDate, settings } = props;
+    const [menu, refreshMenu] = useFilteredMenu(canteenId, menuDate);
+    const theme = useTheme();
+    const { themeStyles, appSettings } = theme;
+    const availablePriceGroups = appSettings.groupsOfPersons;
+    const favoritePriceGroupCode = settings.settingsCanteens.favoritePrice;
+    const favoritePriceGroup = favoritePriceGroupCode
+        ? availablePriceGroups.find(priceGroup => priceGroup.code === favoritePriceGroupCode)
+        : availablePriceGroups.find(priceGroup => priceGroup.default);
+    const favoritePriceGroupName = t(favoritePriceGroup.labelKey);
+
+    console.log(componentName, ':', 'favoritePriceGroupCode', ':', favoritePriceGroupCode);
+    console.log(componentName, ':', 'favoritePriceGroup', ':', favoritePriceGroup)
+    console.log(componentName, ':', 'favoritePriceGroupName', ':', favoritePriceGroupName)
+
+
+    useEffect(
+        () => {
+            refreshMenu();
+        },
+        []
+    )
+
+    // Generieren der styles. Wird nur genieret wenn nicht vorhanden oder die Property theme sich ändert.
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    )
+
+    /*
+    Every single menu-Component is rendered by the Meal-function above with props(themeStyles, settings, etc.), the current item and the local defined styles
+    as attributes
+    */
+
+    return (
+        <View style={themeStyles.container}>
+            {
+                Array.isArray(menu) && menu.length > 0
+                    ? menu.flatMap(
+                        (meal) => [
+                            <Meal
+                                key={meal.title}
+                                meal={meal}
+                                priceGroupCode={favoritePriceGroup.code}
+                                priceGroupName={favoritePriceGroupName}
+                                settings={settings}
+                            />,
+                            <View
+                                key={`seperator-${meal.title}`}
+                                style={styles.listSeperator}
+                            />
+                        ]
+                    )
+                    : <View style={themeStyles.noticeTextContainer}>
+                        <Text style={themeStyles.noticeText}>
+                            {t('canteen:noMealAvailable')}
+                        </Text>
+                    </View>
+            }
+        </View>
+    );
+}
+
+const mapStateToProps = state => {
+    return {
+        pluginComponent: state.pluginReducer.mealItem.component,
+        pluginStyles: state.pluginReducer.mealItem.styles,
+        settings: state.settingReducer
+    };
+};
+
+export default connect(mapStateToProps, { onUpdateRefreshing })(MensaMenu)

package/MensaMenu/styles.js

@@ -0,0 +1,94 @@
+export default function(theme) {
+    return {
+        container: {
+            backgroundColor: theme.colors.white,
+            flex: 1
+        },
+        innerContainer: {
+            flex: 1,
+        },
+        activity: {
+            margin: 40
+        },
+        mealDate: {
+            ...theme.fonts.bold,
+            marginTop: theme.paddings.xsmall,
+            paddingLeft: theme.paddings.small,
+        },
+        mealContent: {
+            paddingTop: theme.paddings.default,
+            paddingLeft: theme.paddings.default,
+            paddingRight: theme.paddings.default,
+            marginBottom: theme.paddings.default
+        },
+        listSeperator: {
+            height: 1,
+            backgroundColor: theme.colors.listSeperator,
+        },
+        mealImage: {
+            aspectRatio: 16/9,
+            paddingBottom: theme.paddings.small,
+        },
+        mealItemTitle: {
+            flex: 1,
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-end',
+            marginTop: theme.paddings.default,
+            marginBottom: theme.paddings.default,
+        },
+        mealItemTitleText: {
+            ...theme.fonts.bold,
+            fontSize: theme.fontSizes.l,
+            lineHeight: theme.lineHeights.l,
+        },
+        mealItemTitleIcons: {
+            marginLeft: 5,
+            flex: 1,
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
+        },
+        mealItemPrice: {
+            ...theme.fonts.bold,
+            marginTop: theme.paddings.xsmall,
+            color: theme.colors.textAccent
+        },
+        mealItemText: {
+            ...theme.fonts.regular,
+            fontSize: theme.fontSizes.l,
+            lineHeight: theme.lineHeights.l,
+            marginBottom: theme.paddings.default,
+        },
+        mealItemNoVisible: {
+            ...theme.fonts.regular,
+            fontSize: theme.fontSizes.l,
+            lineHeight: theme.lineHeights.l,
+            marginBottom: theme.paddings.small,
+            color: theme.colors.noticeText,
+        },
+        buttonLabel: {
+            fontSize: theme.fontSizes.m
+        },
+        addionalInformation: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+        },
+        addionals: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            paddingBottom:theme.paddings.small,
+            paddingTop:theme.paddings.small,
+        },
+        dialogTitle: {
+            fontSize: theme.fontSizes.l,
+            lineHeight: theme.lineHeights.xxl
+        },
+        dialogContent: {
+            fontSize: theme.fontSizes.m,
+            color: theme.colors.text,
+        },
+
+    }
+};

package/MensaSlider/index.js

@@ -0,0 +1,184 @@
+/**
+ * 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, useEffect } from 'react';
+
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { connect } from 'react-redux'
+import { useTheme } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+import { LinearGradient } from 'expo-linear-gradient'
+
+import { DateTime } from 'luxon';
+
+import { MealItem as MealItemComponent } from '@olea-bps/components';
+import { toIsoDateString } from '@olea-bps/core/helper/date';
+
+import { useCanteen, useFilteredMenu, useFavoriteCanteens } from '@olea-bps/context-canteen';
+
+import componentStyles from './styles'
+
+function HorizontalMenu({ canteenId, menuDate }) {
+    const theme = useTheme();
+    const { t } = useTranslation();
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    );
+
+    const [canteen] = useCanteen(canteenId, menuDate);
+    const [menu, refreshMenu, mealAmount, filteredMealAmount] = useFilteredMenu(canteenId, menuDate);
+
+    useEffect(
+        () => {
+            refreshMenu();
+        },
+        [canteenId, menuDate]
+    )
+
+    if (Array.isArray(menu) && menu.length > 0) {
+        return menu.map(
+            (meal, index) => {
+                return (
+                    <View
+                        key={`${canteenId}-${menuDate}-${meal.title}`}
+                    >
+                        <Text
+                            style={styles.mensaNameText}
+                        >
+                            {
+                                index === 0
+                                    ? `${canteen.title} ${filteredMealAmount !== mealAmount ? `(${filteredMealAmount}/${mealAmount})` : ''}`
+                                    : null
+                            }
+                        </Text>
+                        <MealItemComponent
+                            meal={meal}
+                            canteenId={canteenId}
+                            menuDate={menuDate}
+                        />
+                    </View>
+                );
+            }
+        );
+    } else {
+        return (
+            <View
+                key={canteenId}
+            >
+                <Text
+                    style={styles.mensaNameText}
+                >
+                    {canteen.title}
+                </Text>
+                <Text
+                    style={styles.mensaNameText}
+                >
+                    {t(mealAmount ? 'canteen:noMeals' : 'canteen:closed')}
+                </Text>
+            </View>
+        );
+    }
+}
+
+// Renders a list of meals for a specific canteen in a horizontal slider
+function HorizontalCanteens({ menusDate, settings }) {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    );
+
+    // Favorisierte Mensen aus dem Mensa-Kontext holen
+    const [favoriteCanteens] = useFavoriteCanteens();
+
+    if (Array.isArray(favoriteCanteens) && favoriteCanteens.length > 0) {
+        return favoriteCanteens.map(
+            canteenId => <HorizontalMenu
+                key={`${canteenId}-${menusDate}`}
+                canteenId={canteenId}
+                menuDate={menusDate}
+            />
+        )
+    } else {
+        return null;
+    }
+}
+
+function MensaSliderComponent(props) {
+    const { settings } = props;
+
+    const theme = useTheme();
+    const colors = theme?.colors;
+    const { t } = useTranslation();
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    );
+
+    const mensaShadow = colors.mensaShadow.filter((element, pos) => {
+        return colors.mensaShadow.indexOf(element) === pos;
+    });
+
+    const todayDateTime = new Date();
+    const todayDateString = toIsoDateString(todayDateTime);
+    
+    const formattedDate = DateTime
+        .fromJSDate(todayDateTime)
+        .setLocale(settings.settingsGeneral.language)
+        .toLocaleString(DateTime.DATE_SHORT);
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.headline}>
+                {t('canteen:news')} - {formattedDate}
+            </Text>
+            <View style={styles.innerContainer}>
+                <LinearGradient
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 1, y: 0 }}
+                    colors={mensaShadow}
+                    style={styles.shadowLeft}
+                />
+                <ScrollView
+                    horizontal={true}
+                    contentContainerStyle={styles.slider}
+                >
+                    <HorizontalCanteens
+                        {...props}
+                        menusDate={todayDateString}
+                    />
+                </ScrollView>
+                <LinearGradient
+                    start={{ x: 1, y: 0 }}
+                    end={{ x: 0, y: 0 }}
+                    colors={mensaShadow}
+                    style={styles.shadowRight}
+                />
+            </View>
+        </View>
+    );
+}
+
+const mapStateToProps = state => {
+    return {
+        canteens: state.apiReducer.canteens,
+        settings: state.settingReducer
+    };
+};
+
+export default connect(mapStateToProps, null)(MensaSliderComponent);

package/MensaSlider/styles.js

@@ -0,0 +1,53 @@
+export default function(theme) {
+    return {
+        container: {
+            paddingHorizontal: 0,
+            paddingTop: theme.paddings.small,
+            backgroundColor: theme.colors.mensaSliderBackground
+        },
+        innerContainer: {
+            flex: 1,
+            flexDirection: 'row',
+            position: 'relative'
+        },
+        mensaNameText: {
+              ...theme.fonts.regular,
+              fontSize: theme.fontSizes.s,
+              lineHeight: theme.lineHeights.xs,
+              paddingBottom: theme.paddings.small,
+              marginLeft: theme.paddings.default,
+              color: theme.colors.mensaSliderTextColor,
+              textTransform: 'uppercase',
+
+        },
+        headline: {
+            paddingHorizontal: theme.paddings.default,
+            paddingBottom: theme.paddings.default,
+            ...theme.fonts.regular,
+            fontSize: theme.fontSizes.m,
+            color: theme.colors.mensaSliderTextColor,
+            textTransform: 'uppercase',
+
+        },
+        slider: {
+            paddingBottom: theme.paddings.small,
+            zIndex: 1
+        },
+        shadowLeft: {
+            width: theme.paddings.default,
+            position: 'absolute',
+            top:0,
+            left: 0,
+            bottom: 0,
+            zIndex: 2
+        },
+        shadowRight: {
+            width: theme.paddings.default,
+            position: 'absolute',
+            top:0,
+            right: 0,
+            bottom: 0,
+            zIndex: 2
+        }
+    }
+};