@olea-bps/views 1.0.0

package/FeedNews/index.js

@@ -0,0 +1,243 @@
+/**
+ * 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 from 'react';
+import {
+    ActivityIndicator,
+    Text,
+    SafeAreaView,
+    StyleSheet,
+    View,
+    FlatList,
+    TouchableOpacity, Image, Linking
+} from 'react-native';
+import {connect} from 'react-redux'
+import {withTheme} from "react-native-paper";
+import {withTranslation} from "react-i18next";
+
+import merge from 'lodash/merge';
+import moment from "moment";
+
+import {feedApi, onUpdateRefreshing} from "@olea-bps/core";
+import { AppBar as AppbarComponent } from '@olea-bps/components';
+import IconsOpenasist from "@olea-bps/icons-openasist";
+
+import componentStyles from "./styles";
+import { handleHtmlEntities } from '@olea-bps/core/helper/format.helper';
+
+
+/**
+ * Feed News View
+ *
+ * Shows a list of news of the provided feed
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - feedId: Id of the feed to load the news from
+ *  - feedTitle: Name/Title of the feed for view header
+ */
+class FeedNewsView extends React.Component {
+    static navigationOptions = {
+        header: null
+    };
+
+    // Styles of this component
+    styles;
+
+    feedNews = null;
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            inProgress: true,
+            hasNoNewsAvailable: false,
+            hasError: false
+        };
+
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+
+        const {pluginStyles,theme} = this.props;
+        this.styles = componentStyles(theme);
+
+        if (pluginStyles) {
+            this.styles = merge(this.styles, pluginStyles);
+        }
+
+        this.styles = StyleSheet.create(this.styles);
+
+        // ------------------------------------------------------------------------
+    }
+
+    /**
+     * User pressed a card to read this news
+     *
+     * @param news
+     *
+     * @private
+     */
+    _onCardPress(news) {
+        this.props.navigation.navigate('NewsDetail', {news: news});
+    }
+
+
+    /**
+     * Render a single news item with title, description and image
+     *
+     * @param item
+     * @returns {*}
+     * @private
+     */
+    _renderNewsItem = ({item}) => {
+        const { theme: { themeStyles, colors}, t } = this.props;
+
+        var description = item.shortDesc
+            .replace(/<(?:.|\n)*?>/gm, '')
+            .replace('Weiterlesen ›', '');
+
+        let date = moment(item.pubdate);
+
+        let pubDate = item.pubdate;
+        if(date) {
+            pubDate = date.format('DD.MM.YYYY - HH:mm');
+        }
+
+        return (
+            <TouchableOpacity style={themeStyles.cardWithImage} onPress={() => this._onCardPress(item)}>
+                <View style={themeStyles.cartHeaderSplit}>
+                    {item.imageUrl && <Image source={{uri: item.imageUrl }} style={themeStyles.cartHeaderSplitImage} resizeMode="contain"/>}
+                    <View style={item.imageUrl ? themeStyles.cartHeaderSplitDetails : themeStyles.cartHeaderDetails}>
+                        <Text style={[themeStyles.cardTitle, this.styles.newsTitle]}>{item.title}</Text>
+                        <View style={[themeStyles.flexRow, {alignItems: 'center', alignContent: 'center'}]}>
+                            <IconsOpenasist icon={'time'} size={20} color={colors.accent}/>
+                            <Text style={[themeStyles.cardSubTitle, this.styles.newsDate]}>{pubDate}</Text>
+                        </View>
+                    </View>
+                </View>
+                <View style={themeStyles.flexRow}>
+                    <View style={[themeStyles.cardContent, this.styles.newsContent]}>
+                        <Text style={themeStyles.cardText}>{handleHtmlEntities(description)}</Text>
+                    </View>
+                    <View style={[themeStyles.cardRightIcon, this.styles.newsIcon]}>
+                        <IconsOpenasist icon={"forward"} size={25} color={colors.messages.icon} />
+                    </View>
+                </View>
+                {item.link ? (
+                    <TouchableOpacity style={themeStyles.cardLinkExternal} onPress={() => {Linking.openURL(item.link)}}>
+                        <Text style={themeStyles.cardLinkTextExternal}>{t('common:openInBrowser')}</Text>
+                        <IconsOpenasist icon={"open-external"} size={18} color={colors.subtitle} />
+                    </TouchableOpacity>
+                ) : null}
+            </TouchableOpacity>
+        );
+    };
+
+    /**
+     * Key Extractor for unique item key
+     *
+     * @param item
+     * @param index
+     * @returns {*}
+     * @private
+     */
+    _keyExtractor = (item, index) => {
+        return ((item.guid) ? item.guid : ((item.title) ? item.title : index));
+    };
+
+    render() {
+
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+        const PluginComponent = this.props.pluginComponent;
+        if (PluginComponent) {
+            return <PluginComponent />;
+        }
+        // ------------------------------------------------------------------------
+
+
+        const {route, t}  = this.props;
+        const {colors, paddings, themeStyles} = this.props.theme;
+        const {inProgress, hasNoNewsAvailable, hasError} = this.state;
+
+        const feedId = route.params && route.params.feedId || null;
+        const feedTitle = route.params && route.params.feedTitle || 'News';
+
+        if(!this.feedNews && feedId) {
+            feedApi.getFeedById(feedId, (feed) => {
+                if(typeof feed === 'number') {
+                    this.feedNews = [];
+                    this.setState({
+                        inProgress: false,
+                        hasNoNewsAvailable: feed === 0,
+                        hasError: feed === -1
+                    });
+                } else {
+                    this.feedNews = feed;
+                    this.setState({
+                        inProgress: false,
+                        hasNoNewsAvailable: false,
+                        hasError: false
+                    });
+                }
+            });
+        }
+
+        return (
+            <SafeAreaView style={[this.styles.container, themeStyles.appSafeAreaContainer]}>
+                <AppbarComponent {...this.props} title={feedTitle}/>
+                <View style={themeStyles.container}>
+                    { !inProgress && hasNoNewsAvailable &&
+                        <View style={themeStyles.noticeTextContainer}>
+                            <Text style={themeStyles.noticeText}>{t('news:noResult')}</Text>
+                        </View>
+                    }
+                    { !inProgress && hasError &&
+                        <View style={themeStyles.noticeTextContainer}>
+                            <Text style={themeStyles.noticeText}>{t('news:couldNotLoadNews')}</Text>
+                        </View>
+                    }
+                    { inProgress && <ActivityIndicator style={this.styles.activity} size="large" color={colors.loadingIndicator} /> }
+                    { !inProgress && <FlatList
+                        data={this.feedNews}
+                        extraData={this.state}
+                        keyExtractor={this._keyExtractor}
+                        renderItem={this._renderNewsItem}
+                        initialNumToRender={6}
+                        getItemLayout={(data, index) => (
+                            {length: 50, offset: 50 * index, index}
+                        )}
+                        contentContainerStyle={{paddingBottom: paddings.default}}
+                        style={this.styles.innerContainer}
+                    /> }
+
+                </View>
+            </SafeAreaView>
+        );
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        pluginComponent: state.pluginReducer.feedNews.component,
+        pluginStyles: state.pluginReducer.feedNews.styles,
+    };
+};
+
+
+export default connect(mapStateToProps, {onUpdateRefreshing})(withTranslation()(withTheme(FeedNewsView)))

package/FeedNews/styles.js

@@ -0,0 +1,32 @@
+export default function(theme) {
+    return {
+        container: {
+            flex: 1
+        },
+        innerContainer: {
+            flex: 1,
+        },
+        activity: {
+            margin: 40
+        },
+        newsTitle: {
+            ...theme.fonts.medium,
+            fontSize: theme.fontSizes.xl,
+            lineHeight: theme.lineHeights.xxl,
+            marginBottom: theme.paddings.default
+        },
+        newsDate: {
+            ...theme.fonts.bold,
+            marginTop: 3,
+            paddingLeft: theme.paddings.small
+        },
+        newsContent: {
+            paddingTop: theme.paddings.default,
+            paddingLeft: theme.paddings.default,
+            paddingRight: theme.paddings.default
+        },
+        newsIcon: {
+            paddingRight: theme.paddings.xsmall
+        }
+    }
+};

package/Flexmenu/index.js

@@ -0,0 +1,185 @@
+/**
+ * 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 } from 'react';
+import {
+    StyleSheet,
+    SafeAreaView,
+    View,
+    Text,
+    FlatList,
+    Linking
+} from 'react-native';
+
+import { connect } from 'react-redux';
+import { useTheme } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+import { useNavigation } from '@react-navigation/native';
+
+import { AppBar as AppbarComponent } from '@olea-bps/components';
+import IconsOpenasist from '@olea-bps/icons-openasist';
+import { FlexMenuEntry } from '@olea-bps/components';
+
+import componentStyles from './styles';
+
+/**
+ * Diese View zeigt eine Ebene von Menüeintragen des Flex-Menüs an.
+ *
+ * Es sollte mindestens ein Menütyp(props.menuType) über die Eigenschaften oder ein Hauptmenüeintrag(props.route.mainMenuEntry) übergeben werden.
+ * Wird ein Menütyp übergeben, wird der Hauptmenüeintrag des Menütypes gesucht und die Kindermenüeintrage angezeigt.
+ * Wird ein Hauptmenüeintrag bzw. Elternmenüeintrag übergeben, werden dessen Kindereinträge angezeigt.
+ * Der Hauptmenüeintrag wird über das Navigationsframework übergeben, weshalb dieser in der 'route'-Eigenschaft zu finden ist.
+ * Somit werden meherer Menüebenen unterstützt.
+ *
+ * Die View heißt aus historischen Gründen CoronaView und sollte zeitnah sinvoll umbennant werden
+ *
+ * @param {object} props
+ * @param {string} [props.menuType] Menütyp, dessen erste Menüebene angezeigt werden soll
+ * @param {object} props.route Eigenschaften, welche durch das Navigationsframework übergeben werden: {@link https://reactnavigation.org/docs/params}
+ * @param {string} [props.route.mainMenuEntry] ID des Hauptmenüeintrag, dessen Kinder anzuzeigen sind
+ */
+function FlexMenuView(props) {
+    const componentName = FlexMenuView.name;
+    const {
+        route,
+    } = props;
+
+    const menuType = props?.menuType ?? route?.params?.menuType;
+    const menuEntries = props.menuEntries ?? [];
+    const view = props?.view ?? route.params.view;
+
+    const theme = useTheme();
+    const { themeStyles, paddings, colors, appSettings } = theme;
+    const { t, i18n } = useTranslation();
+    const navigation = useNavigation();
+
+    const languages = appSettings?.languages;
+    // Eingestellte Sprache aus der Übersetzung holen
+    const selectedLanguage = i18n.language;
+    // Hinterlegte Sprachen durchgehen und nach dem erweiterten Sprachcode holen
+    const menuEntriesLanguage = languages
+        // Finde die derzeitige eingestellte Sprache
+        .find(language => language?.code === selectedLanguage)
+        // Erweiterten Sprachcode von der gefundenen Sprache auslesen
+        ?.extCode;
+
+    let mainMenuEntry;
+    let childMenuEntries;
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    );
+
+    // Bestimmen des Hauptmenüeintrages dieser View
+    // Zuerst wird der Hauptmenüeintrag es den Navigationsparametern entnommen
+    mainMenuEntry = route?.params?.mainMenuEntry ?? null;
+    // Ist der Hauptmenüeintrag nicht in den Navigationsparametern enthalten gewesen, aber dennoch ist ein Menütyp vergeben, wird der Hauptmenüeintrag aus allen Menueinträgen bestimmt
+    if (mainMenuEntry === null && menuType !== null) {
+        // Der Hauptmenüeintrag ist ein Eintrag ohne einen Elterneintrag, mit dem übergenen Menütyp und der eingestellten Sprache
+        mainMenuEntry = menuEntries
+            // Es werden alle Menüeintrage behalten, die dem Menütyp entsprechen
+            .filter(menuEntry => menuEntry.type === menuType)
+            // Es werden alle Menüeintrage behalten, die der eingestellten Sprache entsprechen
+            .filter(menuEntry => (menuEntry.language ?? null) === menuEntriesLanguage)
+            // Aus den nicht ausgefilterten Menüeinträgen wird eine Eintrag genommen, der kein Elterneintrag besitzt
+            .find(menuEntry => (menuEntry.parentMenuEntry ?? null) === null);
+    }
+
+    // Ids der Untermenüpunkte aus den Ressource-links herausholen
+    const childMenuEntryIds = mainMenuEntry
+        ?.subMenuEntries
+        ?.map(
+            subMenuLinkId =>
+                // Der Link des Untermenüpunktes wird in seine Segmente aufgesplitted und das letzte Segment mit Inhalt als ID verwendet
+                subMenuLinkId
+                    // Aufsplitten der URL in seine Segmente
+                    .split('/')
+                    // Entfernen aller 'leeren' Segmenente
+                    .filter(urlSegment => urlSegment !== '')
+                    // Nehmen des letzten Elements
+                    .pop()
+        )
+        ?? [];
+
+    childMenuEntries = childMenuEntryIds
+        .map(childMenuEntryId => menuEntries.find(menuEntry => menuEntry.id === childMenuEntryId))
+        .filter(menuEntry => (menuEntry ?? null) !== null);
+
+    return (
+        <SafeAreaView style={[styles.container, themeStyles.appSafeAreaContainer]}>
+            <AppbarComponent {...props} title={mainMenuEntry?.title} />
+            <View style={themeStyles.container}>
+                <FlatList
+                    data={
+                        Array.isArray(childMenuEntries)
+                            ? childMenuEntries
+                            : []
+                    }
+                    renderItem={
+                        ({ item: menuEntry }) => {
+                            let menuEntryOnPress;
+                            switch (menuEntry.openIn) {
+                                case 'webview':
+                                    menuEntryOnPress = () => { navigation.push('FlexMenuWebView', { url: menuEntry.url, item: menuEntry }) };
+                                    break;
+                                case 'webbrowser':
+                                case 'browser':
+                                    menuEntryOnPress = () => {
+                                        Linking.canOpenURL(menuEntry.url)
+                                            .then(supported => {
+                                                if (supported) {
+                                                    Linking.openURL(menuEntry.url);
+                                                } else {
+                                                    console.debug(componentName, ':', 'Can not open', menuEntry?.url);
+                                                }
+                                            });
+                                    }
+                                    break;
+                                case null:
+                                    menuEntryOnPress = () => { navigation.push(view, { mainMenuEntry: menuEntry, view: view }) };
+                                    break;
+                            }
+
+                            return (
+                                <FlexMenuEntry
+                                    title={menuEntry?.title}
+                                    description={menuEntry?.description}
+                                    iconImage={menuEntry?.image}
+                                    onPress={menuEntryOnPress}
+                                />
+                            );
+                        }
+                    }
+                    keyExtractor={item => item.id}
+                    contentContainerStyle={{ paddingBottom: paddings.default }}
+                    ListEmptyComponent={
+                        <View style={[styles.containerInner, styles.containerErrorMsg]}>
+                            <IconsOpenasist icon={'info'} size={48} color={colors.primary} />
+                            <Text style={styles.title}>{t('corona:menuEntriesNotAvailable')}</Text>
+                        </View>
+                    }
+                />
+            </View>
+        </SafeAreaView>
+    );
+}
+
+const mapStateToProps = state => {
+    return {
+        menuEntries: state.apiReducer.menuEntries,
+    };
+};
+
+export default connect(mapStateToProps)(FlexMenuView)

package/Flexmenu/styles.js

@@ -0,0 +1,62 @@
+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",
+        },
+        cardContent: {
+            justifyContent: 'center',
+            alignItems: 'flex-start'
+        },
+        cardTitle: {
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            fontSize: theme.fontSizes.l,
+            ...theme.fonts.light,
+        },
+        cardImage: {
+            justifyContent: 'center',
+            alignContent: 'center',
+            paddingRight: theme.paddings.default,
+        },
+        cardSubTitle: {
+            width: 250,
+            fontSize: theme.fontSizes.s,
+            ...theme.fonts.regular,
+            lineHeight: theme.lineHeights.xxs,
+            color: theme.colors.subtitle,
+            marginTop: theme.paddings.xsmall
+        },
+        title : {
+            fontSize: theme.fontSizes.title,
+            color: theme.colors.text,
+            textAlign: 'center',
+            marginTop: theme.paddings.default,
+            marginLeft: theme.paddings.default,
+            marginRight: theme.paddings.default,
+        },
+        subtitle : {
+            fontSize: theme.fontSizes.subtitle,
+            color: theme.colors.subtitle,
+            textAlign: 'center',
+            marginTop: theme.paddings.default,
+            marginLeft: theme.paddings.default,
+            marginRight: theme.paddings.default,
+        },
+        containerErrorMsg: {
+            flex: 1,
+            justifyContent: 'center',
+            alignContent: 'center',
+            alignItems: 'center',
+            margin: theme.paddings.default,
+        },
+    }
+};

package/FlexmenuWebview/index.js

@@ -0,0 +1,167 @@
+/**
+ * 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, useState, useCallback, useRef } from 'react';
+import {
+    StyleSheet,
+    SafeAreaView,
+    ActivityIndicator,
+    BackHandler,
+    Platform,
+} from 'react-native';
+
+import { Appbar, useTheme } from "react-native-paper";
+import { useTranslation } from "react-i18next";
+import { useFocusEffect } from '@react-navigation/native';
+import { WebView } from 'react-native-webview';
+
+import { AppBar as AppbarComponent } from '@olea-bps/components';
+import IconsOpenasist from '@olea-bps/icons-openasist';
+
+import componentStyles from "./styles";
+
+/**
+ * Corona Info 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
+ */
+export default function FlexMenuWebView({ route, ...props }) {
+    const theme = useTheme();
+    const { colors, themeStyles } = theme;
+    const { t } = useTranslation();
+    const flexMenuEntry = route?.params?.item ?? props?.item;
+
+    const webviewURL = route?.params?.url ?? props?.url;
+    const webviewTitle = flexMenuEntry.title;
+
+    const webview = useRef(null);
+    const [webviewCanGoBack, setWebviewCanGoBack] = useState();
+
+    /**
+     * Erstellen einer Liste von erlauben Hosts, die in der Webview verwendet werden dürfen.
+     * In der Liste ist nur ein Host, welcher aus der anzuzeigenden URL extrahiert wird.
+     *
+     * Unter iOS wird der `undefined`-Wert verwendet.
+     * Wird in der Webseite eine Ressource von einem anderem Host eingebunden, öffnet es die Ressource im Browser, weil der Dritthost nicht erlaubt ist.
+     * Somit führen zum Beispiel eingebundene Youtube-Videos zu einem öffnen des Videos im Browser.
+     *
+     * @type {string[]|undefined}
+     */
+    const webviewOriginWhitelist = useMemo(
+        () => {
+            // URL-String in URL-Instanze konvertieren
+            const url = new URL(webviewURL);
+            // Host/Origin aus URL extrahieren
+            const webviewURLOrigin = url.origin;
+
+            // Auswahl das Rückgabewerted abhängig vond der Plattform
+            // Standartmäßig wird eine Liste mit dem Host der URL zurückgegeben
+            // Unter iOS wird undefined zurückgegeben
+            return Platform.select({
+                default: [webviewURLOrigin],
+                ios: undefined,
+            });
+        },
+        [webviewURL]
+    );
+
+    // Styles of this component
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme]
+    )
+
+    useFocusEffect(
+        useCallback(
+            () => {
+                const onBackPress = webviewCanGoBack && webview?.current
+                    ? () => {
+                        webview?.current?.goBack();
+                        return true;
+                    }
+                    : () => {
+                        props?.navigation?.goBack();
+                        return true;
+                    }
+
+                const subscription = BackHandler.addEventListener(
+                    'hardwareBackPress',
+                    onBackPress
+                );
+
+                return () => subscription.remove();
+            },
+            [webviewCanGoBack]
+        )
+    );
+
+    return (
+        <SafeAreaView style={[styles.container, themeStyles.appSafeAreaContainer]}>
+            <AppbarComponent {...props}
+                title={t(webviewTitle)}
+                leftAction={
+                    <Appbar.Action
+                        icon={props => <IconsOpenasist {...props} icon={'back'} color={colors.primaryText} />}
+                        onPress={
+                            webviewCanGoBack
+                                ? webview?.current?.goBack
+                                : props?.navigation?.goBack
+                        }
+                        accessible={true}
+                        accessibilityLabel={
+                            webviewCanGoBack
+                                ? t('accessibility:appbar.navigateBack')
+                                : t('accessibility:appbar.back')
+                        }
+                    />
+                }
+                rightAction={
+                    <Appbar.Action
+                        icon="refresh"
+                        onPress={webview?.current?.reload}
+                        accessible={true}
+                        accessibilityLabel={t('accessibility:appbar.reload')}
+                    />
+                }
+            />
+            <WebView
+                ref={webview}
+                source={{ uri: webviewURL }}
+                startInLoadingState={true}
+                allowsFullscreenVideo={true}
+                allowsInlineMediaPlayback={true}
+                originWhitelist={webviewOriginWhitelist}
+                renderLoading={
+                    () =>
+                        <ActivityIndicator
+                            style={styles.activity}
+                            size='large'
+                            color={colors.loadingIndicator}
+                        />
+                }
+                onLoad={
+                    syntheticEvent =>
+                        setWebviewCanGoBack(syntheticEvent?.nativeEvent?.canGoBack ?? false)
+                }
+            />
+        </SafeAreaView>
+    );
+}