@olea-bps/components 1.0.0

package/TimetableWeek/index.js

@@ -0,0 +1,245 @@
+/**
+ * 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, useMemo, useCallback } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, useWindowDimensions } from 'react-native';
+import { connect } from 'react-redux';
+import { withTheme } from 'react-native-paper';
+import { withTranslation } from 'react-i18next';
+import { Calendar } from 'react-native-big-calendar';
+import { useCourses } from '@olea-bps/context-timetable';
+import CalendarStrip from 'react-native-calendar-strip';
+import { DateTime, Duration } from 'luxon';
+import { TabView } from 'react-native-tab-view';
+import { onUpdateRefreshing } from '@olea-bps/core';
+import { CourseDetailDialog } from '@olea-bps/components';
+import moment from 'moment';
+import 'moment/locale/de';
+
+import componentStyles from './styles';
+
+/**
+ * Die Zeitspanne, welche vor und nach heute angezeigt werden soll.
+ */
+const daysTabDuration = Duration.fromISO('P6M');
+
+/**
+ *
+ * @param {object} props
+ * @param {(DateTime)=> void} props.onWeekChanged
+ * @returns
+ */
+function CalendarWeek(props) {
+  const { selectedISOWeek, theme, settings, calendarScrollOffsetMinutes, onWeekChanged, onCourseSelected } = props;
+
+  const styles = useMemo(
+    () => StyleSheet.create(componentStyles(theme)),
+    [theme]
+  );
+
+  const { width } = useWindowDimensions();
+
+  const [courses] = useCourses();
+
+  const language = settings?.settingsGeneral?.language;
+
+  const selectedWeekDate = useMemo(
+    () => DateTime.fromISO(selectedISOWeek),
+    [selectedISOWeek]
+  );
+
+  const now = DateTime.now()
+  const todayWeekNumber = now.weekNumber;
+  const todayWeekYearNumber = now.weekYear;
+
+  const weeksTabViewRoutes = useMemo(
+    () => {
+      const todayWeekYear = DateTime.fromObject({ weekNumber: todayWeekNumber, weekYear: todayWeekYearNumber }).startOf('week');
+      const beginWeekYear = todayWeekYear.minus(daysTabDuration).startOf('week');
+      const endWeekYear = todayWeekYear.plus(daysTabDuration).endOf('week');
+      let currentWeekYear = DateTime.fromObject(beginWeekYear.toObject());
+
+      const weekYearRoutes = [];
+
+      while (currentWeekYear <= endWeekYear) {
+        const currentISOWeekYear = currentWeekYear.toISOWeekDate();
+
+        const currentWeekYearBeginDate = currentWeekYear.startOf('week');
+        const currentWeekYearEndDate = currentWeekYear.endOf('week');
+        let currentWeekYearDate = DateTime.fromObject(currentWeekYearBeginDate.toObject());
+
+        const currentWeekYearCourses = [];
+
+        const eventColor = theme.colors.eventContainerSidebar;
+
+        while (currentWeekYearDate <= currentWeekYearEndDate) {
+          const currentWeekYearISODate = currentWeekYearDate.toISODate();
+          const currentWeekYearDateCourses = courses?.[currentWeekYearISODate]
+            ?.map(
+              course => (
+                {
+                  title: course.title.data,
+                  start: course.startDateTime,
+                  end: course.endDateTime,
+                  color: eventColor,
+                  type: course.type?.data,
+                  professor: course.lecturer[0]?.data,
+                  room: course.room.data,
+                }
+              )
+            ) ?? [];
+
+          currentWeekYearCourses.push(currentWeekYearDateCourses);
+
+          currentWeekYearDate = currentWeekYearDate.plus({ day: 1 });
+        }
+
+        weekYearRoutes.push(
+          {
+            key: currentISOWeekYear,
+            weekbeginISODate: currentWeekYearBeginDate.toISODate(),
+            week: currentWeekYear.weekNumber,
+            weekYear: currentWeekYear.weekYear,
+            events: currentWeekYearCourses.flat(),
+          }
+        );
+
+        currentWeekYear = currentWeekYear.plus({ week: 1 });
+      }
+
+      return weekYearRoutes;
+    },
+    [todayWeekNumber, todayWeekYearNumber, courses]
+  );
+
+  const weeksTabViewIndexes = useMemo(
+    () => weeksTabViewRoutes
+      .reduce(
+        (accumulator, currentRoute, currentIndex) =>
+        (
+          {
+            ...accumulator,
+            [currentRoute.key]: currentIndex
+          }
+        ),
+        {}
+      ),
+    [weeksTabViewRoutes]
+  )
+
+  const weeksTabViewIndex = weeksTabViewIndexes[selectedISOWeek];
+
+  const renderEvent = useCallback((event, touchableOpacityProps) => {
+    const { style, ...restTouchableOpacityProps } = touchableOpacityProps;
+    return (
+      <>
+        <TouchableOpacity
+          {...restTouchableOpacityProps}
+          style={[style, styles.eventContainer, { borderTopColor: event.color || '#000' }]}
+        >
+          <View style={styles.eventHeader}>
+            <Text style={styles.eventTitle} numberOfLines={2} ellipsizeMode={'clip'} >{event.title}</Text>
+          </View>
+          <Text style={styles.eventRoom} numberOfLines={1} ellipsizeMode={'clip'}>{event.room}</Text>
+        </TouchableOpacity>
+      </>
+    );
+  }, [styles]);
+
+  const renderScene = useCallback(
+    ({ route }) => {
+      return (
+        <View style={{ flex: 1, width: width }}>
+          <Calendar
+            events={route.events}
+            renderEvent={renderEvent}
+            renderHeader={() => null}
+            mode={'week'}
+            height={800}
+            headerContentStyle={{ backgroundColor: 'transparent' }}
+            weekStartsOn={1}
+            date={route.weekbeginISODate}
+            onPressEvent={
+              (event) => {
+                const eventDateISO = DateTime.fromJSDate(event.start).toISODate();
+
+                const eventStartTime = event.start.getTime();
+                const originalCourse = courses[eventDateISO]
+                  ?.find(
+                    course =>
+                      eventStartTime === course.startDateTime.getTime()
+                      &&
+                      event?.title === course?.title?.data
+                      &&
+                      event?.professor === course?.lecturer[0]?.data
+                      &&
+                      event?.room === course?.room?.data
+                  );
+
+                onCourseSelected(originalCourse);
+              }
+            }
+            swipeEnabled={false}
+            scrollOffsetMinutes={calendarScrollOffsetMinutes}
+            hourStyle={styles.hourStyle}
+          />
+        </View>
+      );
+    },
+    [styles, width, courses, renderEvent]
+  );
+
+  return (
+    <>
+      <View style={styles.viewStrip}>
+        <View pointerEvents="none">
+          <CalendarStrip
+            style={styles.strip}
+            locale={{
+              name: language,
+              config: moment.localeData(language)
+            }}
+            highlightDateContainerStyle={styles.highlightDateContainer}
+            showMonth={false}
+            iconStyle={{ display: 'none' }}
+            startingDate={selectedWeekDate.plus({ day: 1 }).toJSDate()}
+            pointerEvents={'none'}
+          />
+        </View>
+      </View>
+
+      <TabView
+        navigationState={{ index: weeksTabViewIndex, routes: weeksTabViewRoutes }}
+        renderTabBar={() => null}
+        lazy
+        lazyPreloadDistance={2}
+        onIndexChange={
+          (index) => {
+            const deltaISOWeekYear = weeksTabViewRoutes?.[index]?.key;
+            onWeekChanged(deltaISOWeekYear);
+          }
+        }
+        renderScene={renderScene}
+      />
+    </>
+  );
+}
+
+const mapStateToProps = (state) => {
+  return {
+    settings: state.settingReducer,
+  };
+};
+
+export default connect(mapStateToProps, { onUpdateRefreshing })(withTranslation()(withTheme(CalendarWeek)));

package/TimetableWeek/styles.js

@@ -0,0 +1,58 @@
+export default function (theme) {
+	return {
+		eventContainer: {
+			borderTopWidth: 8,
+			paddingTop: 5,
+			paddingLeft: 5,
+			paddingBottom: 10,
+			marginBottom: 10,
+			backgroundColor: theme.colors.eventContainerBackground,
+			borderRadius: 8,
+			shadowColor: '#000',
+			shadowOffset: { width: 0, height: 2 },
+			shadowOpacity: 0.3,
+			shadowRadius: 3,
+			elevation: 5,
+			overflow: 'visible'
+		},
+		eventTitle: {
+			fontSize: 12,
+			fontWeight: 'bold',
+		},
+		eventRoom: {
+			fontSize: 11,
+			color: '#757575',
+		},
+		highlightDateContainer: {
+			borderRadius: 100,
+			borderWidth: 3,
+			borderColor: 'red',
+			height: 48,
+			width: 48,
+		},
+		line: {
+			backgroundColor: '#000',
+		},
+		strip: {
+			height: 65,
+			width: '89%',
+			paddingTop: 5,
+			paddingBottom: 5,
+			backgroundColor: '#fff',
+			alignSelf: 'flex-end'
+		},
+		viewStrip: {
+			height: 65,
+			backgroundColor: '#fff',
+			elevation: 4,
+			shadowColor: '#000',
+			shadowOffset: { width: 0, height: 3 },
+			shadowOpacity: 0.2,
+			shadowRadius: 2,
+		},
+		hourStyle: {
+			fontSize: 12,
+			color: theme.colors.text,
+		},
+	};
+}

package/TopNews/index.js

@@ -0,0 +1,282 @@
+/**
+ * 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 {
+    Animated,
+    Dimensions,
+    StyleSheet,
+    Text,
+    TouchableOpacity,
+    View
+} from 'react-native';
+
+import {connect}            from 'react-redux';
+import {withTheme}          from "react-native-paper";
+
+import merge                from 'lodash/merge';
+import NetInfo              from '@react-native-community/netinfo';
+
+import componentStyles      from "./styles";
+import PropTypes            from "prop-types";
+import {withTranslation}     from "react-i18next";
+import {handleHtmlEntities} from "@olea-bps/core/helper/format.helper";
+
+
+
+/**
+ * Top News Component
+ *
+ * Shows a single news item with the name and the logo of the university.
+ *
+ * Parameters:
+ *  - animationRange: Animation Range for animation of the dashboard view
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+class TopNewsComponent extends React.Component {
+
+    static propTypes = {
+        animationRange: PropTypes.any
+    };
+
+    // Styles of this component
+    styles;
+
+    animateHeader = null;
+    animateBackground = null;
+    topNews = null;
+    hasConnection = true;
+    netInfoUnsubscribe = null;
+
+    constructor(props) {
+        super(props);
+
+        // ------------------------------------------------------------------------
+        // 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);
+        // ------------------------------------------------------------------------
+
+        const height = Dimensions.get('window').height;
+
+        this.animateHeader = {
+            transform: [{
+                translateY: this.props.animationRange.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, height / 8],
+                })
+            }]
+        };
+
+        this.animateLogo = {
+            transform: [{
+                translateY: this.props.animationRange.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [30, (height / 50)],
+                })
+            },
+            {
+                scale: this.props.animationRange.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [1, .4],
+                })
+            }]
+        };
+
+        this.animateBackground = {
+            transform: [{
+                translateY: this.props.animationRange.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, height / 7],
+                    extrapolate: 'clamp'
+                })
+            }]
+        };
+
+        this.netInfoUnsubscribe = NetInfo.addEventListener(state => {
+             this.hasConnection = state.isInternetReachable && state.isConnected;
+        });
+    }
+
+    componentWillUnmount() {
+        if(this.netInfoUnsubscribe) {
+            this.netInfoUnsubscribe();
+        }
+    }
+
+    render() {
+
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+        const PluginComponent = this.props.pluginComponent;
+        if (PluginComponent) {
+            return <PluginComponent />;
+        }
+        // ------------------------------------------------------------------------
+
+
+        const {feeds, t} = this.props;
+        const {colors, appSettings} = this.props.theme;
+        let topNews = this.props.topNews;
+
+        if(!Array.isArray(topNews)) {
+            topNews = [];
+        }
+
+        let topItem = null;
+        let imageSrc = null;
+        let feedTitle = null;
+        if(topNews[0]) {
+            topItem = topNews[0];
+            if(topItem.imageUrl) {
+                imageSrc = {uri: topItem.imageUrl};
+            }
+        }
+
+        if(feeds && topItem && topItem.originFeedId) {
+            const feed = feeds.filter(feed => feed.feedid === topItem.originFeedId)[0];
+
+            if(feed && feed.title) {
+                feedTitle = feed.title.toUpperCase();
+            }
+        }
+
+        if(!imageSrc)
+            imageSrc = appSettings.header;
+
+
+        // Top News available
+        this.topNews = topItem;
+
+        // Notice about "." in accessibilityLabels: This will set a short break in the sound output, like in a normal sentence.
+
+        return (
+            <View style={{overflow:'hidden'}}>
+                <View stlyle={this.styles.backgroundImageWrapper}>
+                    <TouchableOpacity
+                        onPress={
+                            topItem?.link ?? null
+                                ? () => { this._handlePressNews(topItem) }
+                                : null
+                        }
+                    >
+                        <Animated.Image
+                            source={imageSrc}
+                            resizeMode="cover"
+                            fadeDuration={0}
+                            style={[this.styles.newsImage, this.animateBackground]}
+                            accessible={true}
+                            accessibilityLabel={
+                                !topItem && !this.hasConnection
+                                    ? t('home:noConnectionTitle')
+                                    : (!topItem ? t('home:noItemTitle') : handleHtmlEntities(topItem.title))
+                            }
+                            accessibilityHint={!topItem ? '' : t('accessibility:topNewsHint')}
+                        />
+                    </TouchableOpacity>
+                </View>
+
+                {
+                    (!topItem && !this.hasConnection) ? (
+                        <Animated.View style={[this.styles.newsItem]}
+                                       accessible={true}
+                                       accessibilityLabel={t('home:noConnectionTitle')}>
+                            <Text
+                                style={this.styles.newsItemCategory}>{t('home:noConnectionSubtitle').toUpperCase()}</Text>
+                            <Text style={this.styles.newsItemTitle}>{t('home:noConnectionTitle')}</Text>
+                            <Text style={this.styles.newsItemText}>{t('home:noConnectionText')}</Text>
+                            <View style={this.styles.newsItemActionbar}>
+                                <Text style={this.styles.newsItemDate}></Text>
+                            </View>
+                        </Animated.View>
+                    ) : ((!topItem) ? (
+                        <Animated.View style={[this.styles.newsItem]}
+                                       accessible={true}
+                                       accessibilityLabel={t('home:noItemTitle')}>
+                            <Text style={this.styles.newsItemCategory}>{t('home:noItemSubtitle').toUpperCase()}</Text>
+                            <Text style={this.styles.newsItemTitle}>{t('home:noItemTitle')}</Text>
+                            <Text style={this.styles.newsItemText}>{t('home:noItemText')}</Text>
+                            <View style={this.styles.newsItemActionbar}>
+                                <Text style={this.styles.newsItemDate}/>
+                            </View>
+                        </Animated.View>
+                    ) : (topItem?.shortDesc
+                            ? <TouchableOpacity
+                                style={this.styles.newsItem}
+                                onPress={() => {this._handlePressNews(topItem)}}
+                                accessible={true}
+                                accessibilityLabel={handleHtmlEntities(topItem.title)}
+                                accessibilityHint={t('accessibility:topNewsHint')}>
+                                <View>
+                                    {feedTitle && <Text style={this.styles.newsItemCategory}>{feedTitle}</Text>}
+                                    <Text style={this.styles.newsItemTitle}>{handleHtmlEntities(topItem.title)}</Text>
+                                    <Text style={this.styles.newsItemText}>{handleHtmlEntities(topItem.shortDesc)} ... <Text style={this.styles.newsItemReadMore}>{t('home:readMore')}</Text></Text>
+                                    <View style={this.styles.newsItemActionbar}>
+                                        {topItem?.author != null
+                                            ? <Text style={this.styles.newsItemAuthor}>{handleHtmlEntities(topItem.author)}</Text>
+                                            : null
+                                        }
+                                    </View>
+                                </View>
+                              </TouchableOpacity>
+                            : null
+                    ))
+                }
+            </View>
+        );
+    }
+
+
+    /**
+     * User has pressed the news item card.
+     * Shows the news details in a modal window.
+     *
+     * @param news
+     *
+     * @private
+     */
+    _handlePressNews = (news) => {
+        if (news) {
+            this.props.navigation.navigate(
+                'TopNewsDetail',
+                {
+                    news: {...news, 'feedId': 0},
+                    newsType: "Default"
+                });
+        }
+    }
+}
+
+
+const mapStateToProps = state => {
+    return {
+        pluginComponent: state.pluginReducer.topNews.component,
+        pluginStyles: state.pluginReducer.topNews.styles,
+        topNews: state.apiReducer.topNews,
+        feeds: state.apiReducer.feeds
+    };
+};
+
+export default connect(mapStateToProps, null)(withTranslation()(withTheme(TopNewsComponent)))

package/TopNews/styles.js

@@ -0,0 +1,125 @@
+import {Platform, Dimensions} from "react-native";
+
+export default function(theme) {
+    const width = Dimensions.get('window').width;
+    const height = Dimensions.get('window').height;
+    const headerImageHeight = height / 2;
+    return {
+        appHeader: {
+            flex: 1,
+            flexDirection: 'row',
+            alignItems: 'baseline',
+        },
+        appHeaderSearchButton: {
+            position: 'absolute',
+            top: Platform.OS === 'ios' ? theme.paddings.default : theme.paddings.xlarge,
+            right: theme.paddings.default
+
+        },
+        appHeaderSearch: {},
+        appHeaderContainer: {
+            flex: 1,
+            justifyContent: 'center',
+            alignContent: 'center',
+            alignItems: 'center',
+            height: headerImageHeight,
+        },
+        universityTitle: {
+            marginTop: theme.paddings.large,
+            marginLeft: theme.paddings.default,
+            color: theme.colors.primaryText,
+            fontSize: theme.fontSizes.universityTitle,
+            ...theme.fonts.bold,
+            lineHeight: theme.lineHeights.xxl,
+            textAlign: 'left',
+            alignSelf: 'flex-start',
+            marginBottom: theme.paddings.small
+        },
+        newsImage: {
+            aspectRatio: 16/9,
+            width: width
+        },
+        backgroundImageWrapper: {
+            height: headerImageHeight,
+            width: width,
+            marginTop: 0,
+            backgroundColor: theme.colors.primary,
+            position:'relative',
+            overflow: 'hidden'
+        },
+        backgroundImage: {
+            position:'absolute',
+            top: -10,
+            left: 0,
+            right: 0,
+            bottom: 0
+        },
+        imageOverlay: {
+            height: headerImageHeight,
+            width: width,
+            flex: 1
+        },
+        newsItem: {
+            backgroundColor: theme.colors.background,
+            paddingHorizontal: theme.paddings.default,
+            paddingTop: theme.paddings.default
+        },
+        newsItemCategory: {
+            marginBottom: 5,
+            fontSize: theme.fontSizes.s
+        },
+        newsItemTitle: {
+            ...theme.fonts.bold,
+            fontSize: theme.fontSizes.xxl,
+            lineHeight: theme.lineHeights.titleBigger,
+            marginBottom: theme.paddings.small,
+        },
+        newsItemText: {
+            ...theme.fonts.regular,
+            fontSize: theme.fontSizes.m,
+            lineHeight: theme.lineHeights.s
+        },
+        newsItemReadMore: {
+            textDecorationLine: 'underline'
+        },
+        newsItemActionbar: {
+            borderBottomColor: theme.colors.accent,
+            borderBottomWidth: 1,
+            //borderStyle: 'dotted', // TODO Not available on iOS at the moment (also dashed)
+            borderStyle: 'solid',
+            paddingBottom: theme.paddings.small,
+            marginTop: theme.paddings.small,
+            flex: 1,
+            flexDirection: 'row'
+        },
+        newsItemDate: {
+            fontSize: theme.fontSizes.s,
+            ...theme.fonts.bold,
+            color: theme.colors.subtitle,
+            flex: 1,
+            alignItems: 'center',
+            alignSelf: 'center',
+            flexDirection: 'row',
+        },
+        newsItemAuthor: {
+            fontSize: theme.fontSizes.s,
+            ...theme.fonts.bold,
+            color: theme.colors.subtitle,
+            flex: 1,
+            alignItems: 'center',
+            alignSelf: 'center',
+            flexDirection: 'row',
+        },
+        newsItemActions: {
+            flex: 1,
+            alignItems: 'flex-end',
+            justifyContent: 'flex-end'
+        },
+        newsItemAction: {
+            marginRight: -4
+        },
+        modalContainer: {
+            flex: 1
+        },
+    }
+};