@olea-bps/components 1.0.0

package/NewsList/styles.js

@@ -0,0 +1,19 @@
+export default function(theme) {
+    return {
+        container: {
+            flex: 1
+        },
+        innerContainer: {
+            flex: 1,
+        },
+        activity: {
+            margin: 40
+        },
+        listSeperator: {
+          height: 1,
+          backgroundColor: theme.colors.listSeperator,
+          marginLeft: 20,
+          marginRight: 20
+        },
+    }
+};

package/NewsListItem/index.js

@@ -0,0 +1,89 @@
+/**
+ * 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 {
+    Text,
+    StyleSheet,
+    View,
+    TouchableOpacity,
+    Image,
+} from 'react-native';
+
+import { useTheme } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+import { useNavigation } from '@react-navigation/native';
+
+import { DateTime } from 'luxon';
+
+import { useLanguage } from '@olea-bps/core';
+import IconsOpenasist from '@olea-bps/icons-openasist';
+
+import componentStyles from './styles';
+
+export default function NewsListItem({ news }) {
+    const componentName = NewsListItem.name;
+    const language = useLanguage();
+    const { t } = useTranslation();
+    const theme = useTheme()
+    const { themeStyles, colors, fontSizes } = theme;
+    const navigation = useNavigation();
+
+    const styles = useMemo(
+        () => StyleSheet.create(componentStyles(theme)),
+        [theme, componentStyles]
+    );
+
+    const description = news.shortDesc
+        .replace(/<(?:.|\n)*?>/gm, '')
+        .replace('Weiterlesen ›', '');
+
+    console.debug(componentName, ':', `news ${news?.guid} pub date`, ':', news.pubdate);
+    const publicationDate = news?.pubdate
+        ? DateTime.fromISO(news.pubdate, { locale: language }).toLocaleString(DateTime.DATETIME_SHORT)
+        : null;
+
+    return (
+        <TouchableOpacity
+            onPress={() => navigation.navigate('NewsDetail', { news: news })}
+            accessible={true}
+            accessibilityLabel={t('accessibility:feedNewsItem', { news: [news.title, description].join('. '), date: publicationDate })}
+            accessibilityHint={t('accessibility:feedNewsItemHint')}
+        >
+            <View style={themeStyles.flexRow}>
+                <View style={[themeStyles.cardContent, styles.contentContainer]}>
+                    {
+                        news?.imageUrl
+                            ? <Image
+                                source={{ uri: news.imageUrl }}
+                                resizeMode="cover"
+                                style={styles.image}>
+                            </Image>
+                            : null
+                    }
+                    <Text style={styles.title}>{news.title}</Text>
+                    <Text style={styles.description}>{description}</Text>
+                    {
+                        publicationDate
+                            ? <View style={[themeStyles.flexRow, { alignItems: 'center', alignContent: 'center' }]}>
+                                <IconsOpenasist icon={'time'} size={fontSizes.l} color={colors.iconSubtitle} />
+                                <Text style={[themeStyles.cardSubTitle, styles.publicationDate]}>{publicationDate}</Text>
+                            </View>
+                            : null
+                    }
+                </View>
+            </View>
+        </TouchableOpacity>
+    );
+}

package/NewsListItem/styles.js

@@ -0,0 +1,32 @@
+export default function(theme) {
+    return {
+        contentContainer: {
+            paddingTop: theme.paddings.default,
+            paddingLeft: theme.paddings.default,
+            paddingRight: theme.paddings.default,
+            marginBottom: theme.paddings.default
+        },
+        publicationDate: {
+            ...theme.fonts.bold,
+            marginTop: 3,
+            paddingLeft: theme.paddings.small,
+        },
+        image: {
+            aspectRatio: 16/9,
+            paddingBottom: theme.paddings.small,
+        },
+        title: {
+            ...theme.fonts.bold,
+            fontSize: theme.fontSizes.subtitle,
+            lineHeight: theme.lineHeights.titleSmall,
+            marginTop: theme.paddings.default,
+            marginBottom: theme.paddings.small,
+        },
+        description: {
+            ...theme.fonts.regular,
+            fontSize: theme.fontSizes.itemText,
+            lineHeight: theme.lineHeights.s,
+            marginBottom: theme.paddings.small,
+       }
+    }
+};

package/OtherCourses/index.js

@@ -0,0 +1,152 @@
+/**
+ * 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 PropTypes from 'prop-types';
+
+import {
+    ScrollView,
+    StyleSheet,
+    Text,
+    View,
+    SafeAreaView,
+} from 'react-native';
+import { Appbar, withTheme } from 'react-native-paper';
+
+import { connect } from 'react-redux'
+import { withTranslation } from 'react-i18next';
+
+import merge from 'lodash/merge';
+
+import { AppBar as AppbarComponent } from '@olea-bps/components';
+import IconsOpenasist from '@olea-bps/icons-openasist';
+import { TimetableList as TimetableListComponent } from '@olea-bps/components';
+
+import componentStyles from './styles'
+
+/**
+ * Course Detail Component
+ *
+ * Shows the detailed information of a course with room, time, lecturer and so on.
+ * Provides a share functionality.
+ *
+ * Parameters:
+ *  - course: Course object with all information about the course
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+class OtherCoursesComponent extends React.Component {
+    static propTypes = {
+        course: PropTypes.array
+    };
+
+    // Styles of this component
+    styles;
+
+    course = null;
+
+    constructor(props) {
+        super(props);
+
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+
+        const { pluginStyles, theme } = this.props;
+        this.styles = componentStyles(theme);
+
+        if (pluginStyles) {
+            this.styles = merge(componentStyles, pluginStyles);
+        }
+
+        this.styles = StyleSheet.create(this.styles);
+
+        // ------------------------------------------------------------------------
+    };
+
+    _renderList = () => {
+        var renderList = this.course?.map((course, courseIndex) =>
+            <TimetableListComponent
+                {...this.props}
+                key={'course_' + courseIndex}
+                course={course}
+                times={null} />
+        ) ?? [];
+
+        return (
+            <View style={this.styles.renderList}>
+                {renderList}
+            </View>
+        );
+    };
+
+    _renderContent = () => {
+        const { themeStyles } = this.props.theme;
+        return (
+            <View style={themeStyles.container}>
+                <ScrollView>
+                    {this._renderList()}
+                </ScrollView>
+            </View>
+        );
+    };
+
+    render() {
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+        const PluginComponent = this.props.pluginComponent;
+        if (PluginComponent) {
+            return <PluginComponent />;
+        }
+        // ------------------------------------------------------------------------
+
+        const { themeStyles } = this.props.theme;
+        const { course, t } = this.props;
+        const { colors } = this.props.theme;
+
+        if (!course) {
+            return (
+                <SafeAreaView style={[this.styles.container, themeStyles.safeAreaContainer]}>
+                    <AppbarComponent {...this.props}
+                        title={t('timetable:moreEvents')}
+                        leftAction={<Appbar.Action
+                            icon={props => <IconsOpenasist {...props} icon={'down'} color={colors.primaryText} />}
+                            onPress={() => {
+                                this.props.navigation.goBack(null);
+                            }} />} />
+                    <Text>{t('course:couldNotLoad')}</Text>
+                </SafeAreaView>
+            );
+        } else if (!this.course) {
+            this.course = course;
+        }
+
+        return (
+            <SafeAreaView style={[this.styles.container, themeStyles.safeAreaContainer]}>
+                <AppbarComponent {...this.props}
+                    title={t('timetable:moreEvents')}
+                    leftAction={<Appbar.Action
+                        icon={props => <IconsOpenasist {...props} icon={'down'} color={colors.primaryText} />}
+                        onPress={() => {
+                            this.props.navigation.goBack(null);
+                        }} />} />
+                {this._renderContent()}
+            </SafeAreaView>
+        );
+    }
+}
+
+export default withTranslation()(withTheme(OtherCoursesComponent))

package/OtherCourses/styles.js

@@ -0,0 +1,10 @@
+export default function(theme) {
+    return {
+        container: {
+            flex: 1
+        },
+        renderList: {
+          marginBottom: theme.paddings.small
+        },
+    };
+}

package/PtsDeparture/index.js

@@ -0,0 +1,140 @@
+/**
+ * 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 PropTypes from 'prop-types';
+
+import { StyleSheet, Text } from 'react-native';
+import {List, withTheme} from "react-native-paper";
+import {withTranslation} from "react-i18next";
+import { connect } from 'react-redux'
+import merge from 'lodash/merge';
+
+import componentStyles from "./styles"
+import IconsOpenasist from "@olea-bps/icons-openasist";
+
+
+
+class PtsDepartureComponent extends React.Component {
+    static propTypes = {
+        departure: PropTypes.object.isRequired,
+        currentTime: PropTypes.object.isRequired
+    };
+
+    // Styles of this component
+    styles;
+
+    constructor(props) {
+        super(props);
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+
+        const { pluginStyles,theme } = this.props;
+        this.styles = componentStyles(theme);
+
+        if(pluginStyles) {
+            this.styles = merge(componentStyles, pluginStyles);
+        }
+
+        this.styles = StyleSheet.create(this.styles);
+        // ------------------------------------------------------------------------
+    };
+
+    /**
+     * Convert the timestamp to a string with the time to departure
+     *
+     * @param timestamp
+     * @returns {string}
+     * @private
+     */
+    _getDepartureTime(timestamp, asObject = false) {
+        let { currentTime, t } = this.props;
+        let departureTime = new Date(timestamp);
+
+        if(departureTime - currentTime <= 0 && !asObject) {
+            return <Text style={this.styles.departureExceeded}>{t('pts:isDeparted')}</Text>;
+        }
+
+        let minutesToDeparture =  Math.floor((departureTime - currentTime) / 1000 / 60);
+
+
+        let departureHour       = departureTime.getHours() > 9      ? departureTime.getHours()      : '0' + departureTime.getHours();
+        let departureMinutes    = departureTime.getMinutes() > 9    ? departureTime.getMinutes()    : '0' + departureTime.getMinutes();
+
+        if(asObject) {
+            return {
+                time: departureHour + ':' + departureMinutes,
+                accessibilityLabelTime: departureHour + ' ' + t('accessibility:pts:speechTime') + departureMinutes,
+                minutesUntilDeparture: minutesToDeparture,
+                isDeparted: minutesToDeparture  <= 0
+            }
+        }
+
+        return departureHour + ':' + departureMinutes +
+                ((minutesToDeparture  > 0) ? ' ' + t('common:time') + ' - ' : '') +
+                ((minutesToDeparture  > 0)  ? minutesToDeparture + t('common:minutes') + ' ' : '');
+
+    }
+
+
+    render() {
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+        const PluginComponent = this.props.pluginComponent;
+        if (PluginComponent) {
+            return <PluginComponent />;
+        }
+        // ------------------------------------------------------------------------
+
+        const { departure, t } = this.props;
+        const {colors} = this.props.theme;
+        const departureTime = this._getDepartureTime(departure.departureTime, true);
+        const departureDetails = {
+            time:departureTime.accessibilityLabelTime,
+            direction: departure.direction,
+            line: departure.number,
+            type: departure.type.toUpperCase() === 'TRAM' ? t('pts:tram') : t('pts:bus'),
+            minutes:departureTime.minutesUntilDeparture
+        };
+
+        return (
+            <List.Item
+                title={this._getDepartureTime(departure.departureTime)}
+                description={t('pts:direction') + ": " + departure.direction + "\n" + t('pts:line') + ": " + departure.number}
+                left={props => <List.Icon {...props}
+                                          style={{paddingTop: 4, backgroundColor: (departure.type.toUpperCase() === 'TRAM' ? colors.primary : colors.secondary)}}
+                                          color={(departure.type.toUpperCase() === 'TRAM' ? colors.primaryText : colors.secondaryText)}
+                                          icon={ props => <IconsOpenasist icon={(departure.type.toUpperCase() === 'TRAM' ? 'tram': 'bus')} size={30}/>}
+                />}
+                accessible={true}
+                accessibilityLabel={departureTime.isDeparted ?
+                    t('accessibility:pts.isDeparted', departureDetails) :
+                    t('accessibility:pts.departureTime', departureDetails)}
+                accessibilityHint={departureTime.isDeparted ? '' : t('accessibility:pts.minutesUntilDeparture', departureDetails)}
+            />
+        );
+    }
+}
+
+
+const mapStateToProps = state => {
+    return {
+        pluginComponent: state.pluginReducer.ptsDeparture.component,
+        pluginStyles: state.pluginReducer.ptsDeparture.styles
+    };
+};
+
+export default connect(mapStateToProps, null)(withTranslation()(withTheme(PtsDepartureComponent)))

package/PtsDeparture/styles.js

@@ -0,0 +1,7 @@
+export default function(theme) {
+    return {
+        departureExceeded: {
+            color: 'red'
+        }
+    };
+}

package/PtsStation/index.js

@@ -0,0 +1,183 @@
+/**
+ * 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 PropTypes from 'prop-types';
+
+import {StyleSheet, TouchableOpacity} from 'react-native';
+import {Card, IconButton, withTheme} from "react-native-paper";
+import {withTranslation} from "react-i18next";
+import {connect} from 'react-redux'
+import concat from "lodash/concat";
+import merge from 'lodash/merge';
+
+import {onSettingPtsStationOverride, store} from "@olea-bps/core";
+import { PtsDeparture as PtsDepartureComponent } from '@olea-bps/components';
+import IconsOpenasist from "@olea-bps/icons-openasist";
+
+import componentStyles from "./styles"
+
+/**
+ * PTS Station Component
+ *
+ * Shows a single station with a list of its departure times and directions
+ *
+ * Parameters:
+ *  - station: Station object with all information about it
+ *  - currentTime: Date object of the current time (to prevent different times across all components)
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+class PtsStationComponent extends React.Component {
+    static propTypes = {
+        station: PropTypes.object.isRequired,
+        currentTime: PropTypes.object.isRequired
+    };
+
+    // Styles of this component
+    styles;
+
+
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            inProgress: true
+        };
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+
+        const { pluginStyles,theme } = this.props;
+        this.styles = componentStyles(theme);
+
+        if(pluginStyles) {
+            this.styles = merge(componentStyles, pluginStyles);
+        }
+
+        this.styles = StyleSheet.create(this.styles);
+
+        // ------------------------------------------------------------------------
+    };
+
+    /**
+     * update the favorite station for given station id
+     *
+     * @param selectedItemId
+     * @private
+     */
+    _updateFavoriteState = (selectedItemId) => {
+        const favorites = this.props.settings.favoritesPtsStation;
+
+        if (favorites && favorites.includes && favorites.includes(selectedItemId)) {
+            const newFavoriteArray = favorites.filter(function (itemId) {
+                return selectedItemId !== itemId;
+            });
+            store.dispatch(onSettingPtsStationOverride('favorites', newFavoriteArray));
+        } else {
+            store.dispatch(onSettingPtsStationOverride('favorites', concat(favorites, [selectedItemId])));
+        }
+    };
+
+    /**
+     * Render each departure
+     *
+     * @param departures
+     * @returns {*}
+     * @private
+     */
+    _renderDepartures(departures) {
+        if(departures.length === 0)
+            return;
+
+        let output = [];
+        departures.forEach((departure, index) => {
+            if(departure) {
+                output.push(<PtsDepartureComponent key={index + '_' + departure.number + ' ' + departure.departureTime + ' ' + departure.direction}
+                                                   departure={departure} currentTime={this.props.currentTime} />);
+            }
+        });
+        return output;
+    }
+
+
+    render() {
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+        const PluginComponent = this.props.pluginComponent;
+        if (PluginComponent) {
+            return <PluginComponent />;
+        }
+        // ------------------------------------------------------------------------
+
+        const { station, t, editMode } = this.props;
+        const {colors} = this.props.theme;
+        const {favoritesPtsStation} = this.props.settings;
+
+        const isFavorite = favoritesPtsStation && favoritesPtsStation.includes && favoritesPtsStation.includes(station.id);
+        const accessibilityHint = isFavorite ?
+            t('accessibility:pts.isFavorite') :
+            t('accessibility:pts.isNotFavorite');
+
+        return (
+            <Card>
+                <Card.Title title={station.name}
+                            subtitle={t('pts:distance') + ": " + (Math.round(station.distance * 100) / 100) + ' ' + t('pts:meter')}
+                            right={(props) =>
+                                editMode ?
+                                <TouchableOpacity
+                                    style={this.styles.starIcon}
+                                    onPress={() => {this._updateFavoriteState(station.id); setTimeout(() => {this.props.refresh()}, 200);}}
+                                    accessibilityLabel={station.name}
+                                    accessibilityHint={editMode ? accessibilityHint : ''}
+                                    accessibilityRole={'button'}
+                                    accessibilityState={editMode ? {selected: isFavorite} : null}
+                                >
+                                    <IconsOpenasist
+                                        icon={isFavorite ? "star-selected" : "star"}
+                                        size={25}
+                                        color={colors.icon}
+                                    />
+                                </TouchableOpacity> :
+                                <IconButton
+                                    {...props}
+                                    icon="crosshairs-gps"
+                                    onPress={() => {
+                                        if(this.props.routeButtonPressed) {
+                                            this.props.routeButtonPressed(station.latitude, station.longitude);
+                                        }
+                                    }}
+                                    accessibilityLabel={',' + t('accessibility:pts.centerLocation')}
+                                />
+                            }/>
+                <Card.Content>
+                    {this._renderDepartures(station.departures)}
+                </Card.Content>
+            </Card>
+        );
+    }
+}
+
+
+const mapStateToProps = state => {
+    return {
+        pluginComponent: state.pluginReducer.ptsStation.component,
+        pluginStyles: state.pluginReducer.ptsStation.styles,
+        settings: state.settingReducer
+    };
+};
+
+export default connect(mapStateToProps, null)(withTranslation()(withTheme(PtsStationComponent)))

package/PtsStation/styles.js

@@ -0,0 +1,47 @@
+export default function(theme) {
+    return {
+        container: {
+            flex: 1,
+        },
+        containerInner: {
+            flex: 1,
+            paddingHorizontal: 20,
+            paddingVertical: 20
+        },
+        activity: {
+            marginTop: 20
+        },
+        badges: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            paddingHorizontal: 10
+        },
+        badge: {
+            marginRight: 5,
+            marginBottom: 5
+        },
+        bookHeader: {
+            flex: 0,
+            flexDirection: 'row',
+            marginBottom: 20
+        },
+        bookImage: {
+            flex: 0.4,
+            maxHeight: 300
+        },
+        bookTitle: {
+            flex: 0.6,
+            paddingLeft: 15
+        },
+        bookDetails: {
+            flex: 1,
+            flexDirection: 'column'
+        },
+        holdingBranch: {
+            flexWrap: 'wrap'
+        },
+        starIcon: {
+            marginRight: theme.paddings.default
+        }
+    };
+}