@olea-bps/components 1.0.0

package/TopNewsHtwk/index.js

@@ -0,0 +1,279 @@
+/**
+ * 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 {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'}}>
+                <Animated.View
+                    style={[this.styles.universityIconWrapper, this.animateBackground]}>
+                    <Animated.Image
+                        source={appSettings.logo}
+                        resizeMode="contain"
+                        fadeDuration={1000}
+                        style={[this.styles.universityIcon]}/>
+                </Animated.View>
+                <TouchableOpacity
+                    onPress={() => this._handlePressNews(topItem)}
+                >
+                    <Animated.View stlyle={[this.styles.backgroundImageWrapper, this.animateBackground]}>
+                        <Animated.Image
+                            source={imageSrc}
+                            resizeMode="cover"
+                            fadeDuration={10}
+                            style={[this.styles.newsImage]}
+                            accessible={true}
+                            accessibilityLabel={
+                                !topItem && !this.hasConnection ?
+                                    t('home:noConnectionTitle')
+                                    : (!topItem ? t('home:noItemTitle') : handleHtmlEntities(topItem.title))}
+                            accessibilityHint={!topItem ? '' : t('accessibility:topNewsHint')}
+                        />
+                    </Animated.View>
+
+                    {
+                        (!topItem && !this.hasConnection) ? (
+                            <Animated.View style={[this.styles.newsItem]}
+                                           accessible={true}
+                                           accessibilityLabel={t('home:noConnectionTitle')}>
+                                <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}/>
+                                </View>
+                            </Animated.View>
+                        ) : ((!topItem) ? (
+                            <Animated.View style={[this.styles.newsItem]}
+                                           accessible={true}
+                                           accessibilityLabel={t('home:noItemTitle')}>
+                                <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>
+                        ) : (
+                            <View
+                                style={this.styles.newsItem}
+                                accessible={true}
+                                accessibilityLabel={handleHtmlEntities(topItem.title)}
+                                accessibilityHint={t('accessibility:topNewsHint')}
+                            >
+                                {feedTitle && <Text style={this.styles.newsItemCategory}>{feedTitle}</Text>}
+                                <Text style={this.styles.newsItemTitle}>{handleHtmlEntities(topItem.title)}</Text>
+                                {topItem.shortDesc &&
+                                    <Text style={this.styles.newsItemText}>{handleHtmlEntities(topItem.shortDesc)}</Text>
+                                }
+                                {topItem.author &&
+                                    <Text style={this.styles.newsItemAuthor}>{handleHtmlEntities(topItem.author)}</Text>
+                                }
+                                <View style={this.styles.newsItemActionbar} />
+                            </View>
+                        ))
+                    }
+                </TouchableOpacity>
+            </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/TopNewsHtwk/styles.js

@@ -0,0 +1,142 @@
+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,
+        },
+        universityIconWrapper: {
+            flex: 1,
+            zIndex: 9,
+            backgroundColor: theme.colors.topNewsIconBackground,
+        },
+        universityIcon: {
+            width: width * .6,
+            height: (width) * .1,
+            margin: (width * .15) / 4,
+            marginLeft: theme.paddings.default,
+
+        },
+        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: {
+            height: width/16*9,
+            width: width
+        },
+        backgroundImageWrapper: {
+            position:'relative',
+            overflow: 'hidden',
+            backgroundColor: 'blue'
+        },
+        imageOverlay: {
+            height: headerImageHeight,
+            width: width,
+            flex: 1
+        },
+        newsItem: {
+            backgroundColor: theme.colors.background,
+            paddingHorizontal: theme.paddings.default,
+            paddingTop: theme.paddings.xsmall,
+            paddingBottom: theme.paddings.xsmall,
+        },
+        newsItemCategory: {
+            marginBottom: 5,
+            fontSize: theme.fontSizes.s
+        },
+        newsItemTitle: {
+            ...theme.fonts.thin,
+            fontSize: theme.fontSizes.title,
+            lineHeight: theme.lineHeights.titleBig,
+            marginBottom: theme.paddings.small,
+        },
+        newsItemText: {
+            ...theme.fonts.thin,
+            fontSize: theme.fontSizes.l,
+            lineHeight: theme.lineHeights.l
+        },
+        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.none,
+            marginTop: theme.paddings.none,
+            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,
+            alignSelf: 'flex-start',
+            flexDirection: 'row',
+        },
+        newsItemActions: {
+            flex: 1,
+            alignItems: 'flex-end',
+            justifyContent: 'flex-end'
+        },
+        newsItemAction: {
+            marginRight: -4
+        },
+        modalContainer: {
+            flex: 1
+        },
+        tape: {
+            position: 'absolute',
+            top: '16.7%',       // 16.7 % = 0.5/3 of height as per CI
+            bottom: '16.7%',    // 16.7 % = 0.5/3 of height as per CI
+            zIndex: 10,
+            flex: 1,
+            width: width * 0.1143, // 11.43% width as per CI
+            resizeMode: 'cover',
+            backgroundColor: theme.colors.tapeColor
+        },
+        tapeLeft: {
+            left: theme.paddings.default - ((width * 0.1143) / 3) // 2/3 overlay
+        },
+        tapeRight: {
+            right: theme.paddings.default  - ((width * 0.1143) / 3) // 2/3 overlay
+        }
+    }
+};

package/WebView/index.js

@@ -0,0 +1,108 @@
+/**
+ * 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 { StyleSheet, ActivityIndicator } from 'react-native';
+import { connect } from 'react-redux'
+import { withTheme } from "react-native-paper";
+import { WebView } from 'react-native-webview';
+import merge from 'lodash/merge';
+
+import componentStyles from "./styles";
+
+/**
+ * Webview View
+ *
+ * Use this víew to show a webpage (via url).
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - title: Header title
+ *  - url: Webpage Url
+ */
+class WebviewComponent extends React.Component {
+    static navigationOptions = {
+        header: null
+    };
+
+    state = {
+        refreshing: false,
+    };
+
+    // Styles of this component
+    styles;
+
+
+
+    webView =  {
+        canGoBack: false,
+        ref: 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);
+
+        // ------------------------------------------------------------------------
+    }
+
+    onShouldStartLoadWithRequest = (event) =>{
+        const {url, constPage} = this.props;
+        if(constPage){
+            if(event.url === url)
+                return true;
+            else
+                return false;
+        }
+        return true;
+    }
+    render() {
+        const {colors, customScript} = this.props.theme;
+        const {url} = this.props;
+
+        const script = `function hideHead(){document.getElementById("header").style.display = 'none';}hideHead();`
+        return (
+                <WebView
+                    injectedJavaScript={url.includes("tuc.cloud") ? script + customScript : customScript}
+                    javaScriptEnabled
+                    onMessage={(event) => {}}
+                    source={{uri: url}}
+                    ref={ref => this.webView.ref = ref}
+                    startInLoadingState={true}
+                    renderLoading={() => <ActivityIndicator style={this.styles.activity} size="large" color={colors.loadingIndicator}/>}
+                />
+        );
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+    };
+};
+
+export default connect(mapStateToProps, null)(withTheme(WebviewComponent))

package/WebView/styles.js

@@ -0,0 +1,11 @@
+export default function(theme) {
+    return {
+        container: {
+            flex: 1,
+            backgroundColor: theme.colors.background,
+        },
+        activity: {
+            padding: 20
+        }
+    }
+};

package/index.js

@@ -0,0 +1,39 @@
+export { default as AppBar } from './AppBar';
+export { default as BookDetail } from './BookDetail';
+export { default as ConnectivityWarning } from './ConnectivityWarning';
+export { default as ContactDetail } from './ContactDetail';
+export { default as CourseDetail } from './CourseDetail';
+export { default as CourseDetailDialog } from './CourseDetailDialog';
+export { default as CourseInfo } from './CourseInfo';
+export { default as DevelopmentDialog } from './DevelopmentDialog';
+export { default as EventCodeInput } from './EventCodeInput';
+export { default as FlexMenuEntry } from './FlexMenuEntry';
+export { default as MainMenuEntry } from './MainMenuEntry';
+export { default as MealItem } from './MealItem';
+export { default as MensaMenu } from './MensaMenu';
+export { default as MensaSlider } from './MensaSlider';
+export { default as Modal } from './Modal';
+export { default as NewsDetail } from './NewsDetail';
+export { default as NewsList } from './NewsList';
+export { default as NewsListItem } from './NewsListItem';
+export { default as OtherCourses } from './OtherCourses';
+export { default as PtsDeparture } from './PtsDeparture';
+export { default as PtsStation } from './PtsStation';
+export { default as QuickLinks } from './QuickLinks';
+export { default as RoomDetail } from './RoomDetail';
+export { default as ScaledImage } from './ScaledImage';
+export { default as SearchResults } from './SearchResults';
+export { default as SettingSection } from './SettingSection';
+export { default as SettingsDialog } from './SettingsDialog';
+export { default as SettingsDialogRadio } from './SettingsDialogRadio';
+export { default as SettingsDialogSelect } from './SettingsDialogSelect';
+export { default as TimetableCodeInput } from './TimetableCodeInput';
+export { default as TimetableDay } from './TimetableDay';
+export { default as TimetableEvent } from './TimetableEvent';
+export { default as TimetableList } from './TimetableList';
+export { default as TimetableMonth } from './TimetableMonth';
+export { default as TimetableWeek } from './TimetableWeek';
+export { default as TopNews } from './TopNews';
+export { default as TopNewsHtwk } from './TopNewsHtwk';
+export { default as WebView } from './WebView';
+export { default as Component‎JobsFilter } from './Component‎JobsFilter';

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@olea-bps/components",
+  "version": "1.0.0",
+  "description": "Consolidated components for OLEA",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tuc-urz/olea.git",
+    "directory": "packages/components"
+  },
+  "author": "codeculture<info@codeculture.de>",
+  "license": "Apache-2.0",
+  "files": [
+    "index.js",
+    "*/index.js",
+    "*/styles.js",
+    "*/**/*"
+  ],
+  "dependencies": {
+    "@olea-bps/icons-openasist": "^1.0.0",
+    "react-native-paper": "^5.14.5",
+    "@olea-bps/core": "^1.0.0",
+    "@olea-bps/context-connectivity": "^1.0.0",
+    "moment": "^2.29.4",
+    "react-native-tab-view": "^4.1.3",
+    "expo-linear-gradient": "^14.1.5",
+    "@olea-bps/react-native-webview-autoheight": "^1.0.0",
+    "react-native-webview": "13.15.0",
+    "@react-native-community/netinfo": "^11.4.1",
+    "@olea-bps/components": "^1.0.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-native": "^0.81.0",
+    "react-native-paper": "^5.0.0"
+  }
+}