@olea-bps/base 1.0.0

package/views/DashboardHtwk/index.js

@@ -0,0 +1,197 @@
+/**
+ * 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,
+    StyleSheet,
+    View,
+    RefreshControl,
+    SafeAreaView
+} 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 { onUpdateRefreshing, DataService } from '../../libraries/core';
+import TopNewsComponent from '../../components/TopNewsHtwk';
+import MensaSliderComponent from '../../components/MensaSlider';
+import CourseInfoComponent from '../../components/CourseInfo';
+import QuickLinksComponent from '../../components/QuickLinks';
+
+import componentStyles from "./styles"
+export const scrollRangeForAnimation = 160;
+
+
+/**
+ * Dashboard 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
+ */
+class DashboardView extends React.Component {
+    static navigationOptions = {
+        header: null
+    };
+
+    // Styles of this component
+    styles;
+
+    dataService = null;
+    _scrollView = 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);
+
+        // ------------------------------------------------------------------------
+
+        this.dataService = new DataService();
+        this.props.onUpdateRefreshing(false);
+
+        this.state = {
+            scrollY: new Animated.Value(0)
+        };
+    }
+
+    /**
+     * User has dragged down the view to update the informations
+     *
+     * @private
+     */
+    _onRefresh = () => {
+        this.props.onUpdateRefreshing(true);
+        this.dataService.refresh();
+    };
+
+    /**
+     * User has scrolled down. If the header animation isn't fully finished,
+     * scroll up or down (depends on how far the user has scrolled) to finish the animation.
+     * This prevents that the top view looks like its stuck.
+     *
+     * @param event
+     *
+     * @private
+     */
+    _onScrollEndSnapToEdge = event => {
+      /* TODO Disabled at the moment. On smaller devices the user isn't able to
+          use the course component because of the scroll back
+
+      const y = event.nativeEvent.contentOffset.y;
+        if (0 < y && y < this._scrollRangeForAnimation / 2) {
+            if (this._scrollView) {
+                this._scrollView.scrollTo({y: 0});
+            }
+        } else if (this._scrollRangeForAnimation / 2 <= y && y < this._scrollRangeForAnimation) {
+            if (this._scrollView) {
+                this._scrollView.scrollTo({y: this._scrollRangeForAnimation});
+            }
+        }*/
+    };
+
+    render() {
+        // ------------------------------------------------------------------------
+        // PLUGIN FUNCTIONALITY
+        // ------------------------------------------------------------------------
+        const PluginComponent = this.props.pluginComponent;
+        if (PluginComponent) {
+            return <PluginComponent />;
+        }
+        // ------------------------------------------------------------------------
+
+        const { t } =  this.props;
+        const { themeStyles } = this.props.theme;
+
+        const scrollY = Animated.add(
+            this.state.scrollY,
+            0,
+        );
+        const headerTranslate = scrollY.interpolate({
+            inputRange: [0, scrollRangeForAnimation],
+            outputRange: [0, 1],
+            extrapolate: 'clamp',
+        });
+
+        return (
+            <SafeAreaView style={[this.styles.container, themeStyles.appSafeAreaContainer]}>
+                <Animated.ScrollView
+                    ref={scrollView => {
+                        this._scrollView = scrollView ? scrollView._component : null;
+                    }}
+                    style={this.styles.container}
+                    contentContainerStyle={this.styles.contentContainer}
+                    scrollEventThrottle={2}
+                    onScrollEndDrag={this._onScrollEndSnapToEdge}
+                    onMomentumScrollEnd={this._onScrollEndSnapToEdge}
+                    onScroll={Animated.event(
+                        [
+                            {
+                                nativeEvent: {contentOffset: {y: this.state.scrollY}},
+                            },
+                        ],
+                        {
+                            useNativeDriver: true,
+                        }
+                    )}
+                    refreshControl={
+                        <RefreshControl
+                            refreshing={this.props.refreshing}
+                            onRefresh={this._onRefresh}
+                        />
+                    }>
+                    <View>
+                        <TopNewsComponent    {...this.props}  animationRange={headerTranslate}/>
+                        <QuickLinksComponent {...this.props} />
+                        <MensaSliderComponent {...this.props} />
+                        <CourseInfoComponent  {...this.props} />
+                    </View>
+                </Animated.ScrollView>
+            </SafeAreaView>
+        );
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        pluginComponent: state.pluginReducer.dashboard.component,
+        pluginStyles: state.pluginReducer.dashboard.styles,
+        view : state.stateReducer.view,
+        feedItems: state.stateReducer.feedItems,
+        feeds: state.stateReducer.feeds,
+        refreshing: state.stateReducer.refreshing
+    };
+};
+
+export default connect(mapStateToProps, {onUpdateRefreshing})(withTranslation()(withTheme(DashboardView)))

package/views/DashboardHtwk/styles.js

@@ -0,0 +1,24 @@
+import {Dimensions} from 'react-native';
+
+export default function(theme) {
+    const width = Dimensions.get('window').width;
+    return {
+        container: {
+            flex: 1,
+            backgroundColor: theme.colors.background,
+        },
+        contentContainer: {
+            paddingTop: 0
+        },
+        titleStyle: {
+          ...theme.fonts.medium,
+          fontSize: theme.fontSizes.xxl,
+          alignSelf: 'center'
+        },
+        universityIcon: {
+            width: width * .40,
+            height: (width * .40) * .5625, // 56.25% = 16:9 Ratio
+            margin: theme.paddings.default
+        }
+    }
+};

package/views/Event/index.js

@@ -0,0 +1,373 @@
+/**
+ * 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, useEffect, useCallback } from 'react';
+import {
+  ActivityIndicator,
+  Dimensions,
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+
+import { useTranslation } from 'react-i18next';
+import { Appbar, useTheme } from 'react-native-paper';
+import { AccordionList } from 'accordion-collapse-react-native';
+import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
+import { useNavigation } from '@react-navigation/native';
+
+import moment from 'moment';
+import { DateTime } from 'luxon';
+
+import EventContextProvider, { usePersonalEvents, usePersonalEventsCode, useEvents } from '../../context/context-event';
+import AppbarComponent from '../../components/AppBar';
+import IconsOpenasist from '../../libraries/icons-openasist';
+import EventCodeInputComponent from '../../components/EventCodeInput';
+import TimetableEventComponent from '../../components/TimetableEvent';
+
+import componentStyles from './styles';
+
+/**
+ * @param {*} allEvents List of events
+ * @param {*} start Startingpoint of the timeslot-list/start of the event-day
+ * @param {*} end Endpoint of the timeslot-list/end of the event-day
+ * @param {*} length length of the single timeslots
+ * @returns a list of objects for each timeslot including start(startTs), end(endTs) and a list(events) of events for that timeslot
+ * startTs and endTs are moment().js-elements/modified date-time-elements while events will contain the event-objects for this timeslot
+ */
+function generateTimeslots(allEvents, start, end, length) {
+
+  const timeslotList = [];
+  /*
+    For-Loop that loops from the start to the end in increments provided by length
+    So that there are timeslots from the start to the end of the event day
+  */
+  for (let timeSlot = moment(start); timeSlot.isSameOrBefore(end); timeSlot.add(length, 'hours')) {
+    // Define start and end(start + length) for each timeslot
+    var timeslotStart = moment(timeSlot);
+    var timeslotEnd = moment(timeSlot).add(length, 'hours');
+
+    /*
+      Use the build in filter()-Method to find all events in the given timeslot, so between timeslotStart and timeslotEnd
+      The timeslotStart and timeslotEnd are defined in the yyyy-MM-ddTHH:mm:ssZ-format in order to be able to compare them directly to the
+      start and end-prop in the event-Objects
+      A event will be sorted in the current timeslot, if the value of the start prop is between the start and end of the current timeslot
+      This is due to also include events that start in one timeslot and end in another timeslot
+    */
+    var eventsInTimeslot = allEvents.filter(
+      currentEvent =>
+        moment(currentEvent.begin).isSameOrAfter(timeslotStart)
+        &&
+        moment(currentEvent.begin).isBefore(timeslotEnd)
+    );
+
+    // If there are any Event-objects in the given timeslot, the event have to be sorted in the correct order
+    if (eventsInTimeslot.length > 0) {
+      // After that, push the current timeslot-object into the timeslotList
+      timeslotList.push({ startTs: timeslotStart.format('HH:mm'), endTs: timeslotEnd.format('HH:mm'), eventsTs: eventsInTimeslot })
+    }
+  }
+
+  return timeslotList;
+}
+
+/**
+ * Event View
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+
+/**
+ * Die Funktion erzeugt einen Header für die jeweilige Liste, der eine Kurzbezeichnung und ein Icon zur Identifikation beinhaltet
+ *
+ * @param {object} props beinhaltet styles, themes und weitere props
+ * @param {boolean} props.isExpanded Flag das signalisiert, ob die aktuelle Liste geöffnet ist oder nicht
+ * @param {string} props.startTime Startzeit der Liste
+ * @param {string} props.endTime Endzeit der Liste
+ */
+function TimeslotAccordionHeader({ startTime, endTime, styles, isExpanded }) {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const { colors, themeStyles } = theme;
+
+  return (
+    <View style={styles.header}>
+      <View style={[themeStyles.cardLeftIcon, { marginStart: 5 }]}>
+        <IconsOpenasist icon={('info')} size={25} color={colors.icon} />
+      </View>
+      <Text style={styles.headerText}>{`${startTime} ${t('event:type.to')} ${endTime} ${t('event:type.oclock')}`}</Text>
+      <View style={styles.arrowIcon}>
+        <IconsOpenasist icon={isExpanded ? 'up' : 'down'} size={20} color={colors.grayLight5} />
+      </View>
+    </View>
+  );
+}
+
+/**
+ * @param {object} props beinhaltet styles, themes und weitere props
+ * @param {Array} props.items Die Liste von Events vom aktuellen Tab
+ * @return eine Scrollview, welche eine Liste von TimeTableEventComponent enthält
+ */
+function EventList({ items: events = [], styles }) {
+  const { t } = useTranslation();
+
+  return (
+    <ScrollView>
+      {
+        events
+          ?.map(
+            (event) => {
+              const startTime = DateTime.fromISO(event.begin).toLocaleString(DateTime.TIME_24_SIMPLE);
+              const endTime = DateTime.fromISO(event.end).toLocaleString(DateTime.TIME_24_SIMPLE);
+
+              return (
+                <TimetableEventComponent
+                  key={event.id}
+                  type={event?.type ? t(`event:type:${event.type}`) : null}
+                  title={event?.title}
+                  location={event?.location}
+                  locationUrl={event?.locationUrl}
+                  description={event?.description}
+                  times={{ start: startTime, end: endTime }} />
+              );
+            }
+          )
+        ?? null
+      }
+    </ScrollView>
+  );
+}
+
+/***
+ * Hook-Component welche eine Accordionliste mit dem entsprechenden Inhalt generiert. Inklusive Header.
+ *
+ * @param props beinhaltet styles, themes und weitere props
+ */
+function EventTimeslotList() {
+  const componentName = EventTimeslotList.name;
+  const theme = useTheme();
+  const [events, refreshEvents] = useEvents();
+
+  const styles = useMemo(
+    () => StyleSheet.create(componentStyles(theme)),
+    [theme, componentStyles]
+  );
+
+  const timeslots = useMemo(
+    () => {
+      if (Array.isArray(events) && events.length > 0) {
+        // get the value of the start-prop of the earliest-event
+        const earliestEvent = events.reduce((previousEvent, currentEvent) => { return currentEvent.begin < previousEvent.begin ? currentEvent : previousEvent });
+        // get the value of the end-prop of the latest-event
+        const latestEvent = events.reduce((previousEvent, currentEvent) => { return currentEvent.end > previousEvent.end ? currentEvent : previousEvent });
+        return generateTimeslots(events, earliestEvent.begin, latestEvent.end, 1.5);
+
+      } else if (Array.isArray(events) && events.length === 0) {
+        return [];
+
+      } else {
+        console.debug(componentName, ':', 'No events to Generate timeslots');
+        return null;
+      }
+    },
+    [events, generateTimeslots]
+  );
+
+  useEffect(
+    () => {
+      refreshEvents();
+    },
+    [refreshEvents]
+  );
+
+  return Array.isArray(timeslots)
+    ? timeslots.length > 0
+      ? <AccordionList
+        list={timeslots}
+        header={
+          (timeslot, index, isExpanded) => <TimeslotAccordionHeader startTime={timeslot.startTs} endTime={timeslot.endTs} styles={styles} isExpanded={isExpanded} />
+        }
+        body={
+          (timeslot) => <EventList items={timeslot.eventsTs} styles={styles} />
+        }
+      />
+      : <View style={styles.content}>
+        <Text>
+          Es werden gerade keine Veranstalltungen angeboten
+        </Text>
+      </View>
+    : <View style={styles.content}>
+      <Text>{t('canteen:notAvailable')}</Text>
+      <ActivityIndicator style={styles.activity} size='large' color={theme.colors.loadingIndicator} />
+    </View>
+
+}
+
+function SelectedEventList() {
+  const componentName = SelectedEventList.name;
+  const theme = useTheme();
+
+  const [personalEvents, refreshPersonalEvents] = usePersonalEvents();
+
+  const styles = useMemo(
+    () => StyleSheet.create(componentStyles(theme)),
+    [theme, componentStyles]
+  );
+
+  useEffect(
+    () => {
+      refreshPersonalEvents();
+    },
+    [refreshPersonalEvents]
+  )
+
+  return (
+    <EventList
+      styles={styles}
+      items={personalEvents}
+    />
+  )
+}
+
+const TabViewScenes = SceneMap({
+  all_events: EventTimeslotList,
+  personal_events: SelectedEventList,
+});
+
+
+export default function EventsView(props) {
+
+  const [personalEventsCode] = usePersonalEventsCode();
+  const theme = useTheme();
+  const { colors, themeStyles } = theme;
+  const { t } = useTranslation();
+  const navigation = useNavigation();
+
+  const [showCodeInput, setShowCodeInput] = useState(personalEventsCode ? false : true);
+  const [tabIndex, setTabIndex] = useState(0);
+
+  const tabRoutes = useMemo(
+    () =>
+      [
+        {
+          key: 'personal_events',
+          title: t('event:tabs.selected'),
+          accessibilityLabel: t('accessibility:event.selected'),
+        },
+        {
+          key: 'all_events',
+          title: t('event:tabs.all'),
+          accessibilityLabel: t('accessibility:event.all'),
+        }
+      ],
+    [t]
+  );
+
+
+  const styles = useMemo(
+    () => StyleSheet.create(componentStyles(theme)),
+    [theme]
+  )
+
+  const leftAction = useMemo(
+    () => (
+      <Appbar.Action
+        icon={props => <IconsOpenasist {...props} icon={'back'} color={colors.primaryText} />}
+        onPress={() => {
+          navigation.goBack();
+        }} />
+    ),
+    [colors, navigation]
+  )
+
+  const rightAction = useMemo(
+    () => (
+      <Appbar.Action
+        icon={showCodeInput ? 'table' : 'table-plus'}
+        color={colors.appbarIconColor}
+        onPress={() => setShowCodeInput(showCodeInput => !showCodeInput)}
+      />
+    ),
+    [showCodeInput, setShowCodeInput, colors]
+  )
+
+  const closeCodeInput = useCallback(
+    () => setShowCodeInput(false),
+    [setShowCodeInput]
+  );
+
+  const closeCodeInputAndShowPersonalEvents = useCallback(
+    () => {
+      setTabIndex(tabRoutes.findIndex(route => route.key === 'personal_events'));
+      setShowCodeInput(false);
+    },
+    [tabRoutes, setShowCodeInput, setTabIndex]
+  );
+
+
+  return (
+    <SafeAreaView style={[styles.container, themeStyles.appSafeAreaContainer]}>
+      <View>
+        <AppbarComponent {...props}
+          title={t('menu:titles.event')}
+          leftAction={leftAction}
+          rightAction={rightAction}
+        />
+      </View>
+      {
+        showCodeInput
+          ? <EventCodeInputComponent {...props}
+            onClose={closeCodeInput}
+            onPersonalEventsImported={closeCodeInputAndShowPersonalEvents}
+          />
+          : <View style={themeStyles.container}>
+            <TabView
+              index={tabIndex}
+              navigationState={{ index: tabIndex, routes: tabRoutes }}
+              initialLayout={{ height: 0, width: Dimensions.get('window').width }}
+              onIndexChange={setTabIndex}
+              renderTabBar={props =>
+                <TabBar
+                  {...props}
+                  style={themeStyles.tabs}
+                  labelStyle={themeStyles.tab}
+                  activeColor={themeStyles.tabs.activeColor}
+                  inactiveColor={themeStyles.tabs.inactiveColor}
+                  indicatorStyle={themeStyles.tabIndicator}
+                  tabStyle={{ paddingHorizontal: 20 }}
+                />
+              }
+              renderScene={TabViewScenes}
+            />
+          </View>
+      }
+    </SafeAreaView>
+  );
+}
+
+export function APIProvidetEventsView(props) {
+  return (
+    <EventContextProvider>
+      <EventsView
+        {...props}
+      />
+    </EventContextProvider>
+  )
+}

package/views/Event/styles.js

@@ -0,0 +1,63 @@
+export default function(theme) {
+    return {
+      activity: {
+        padding: 20
+      },
+      arrowIcon: {
+        marginStart: 'auto',
+        marginEnd: 10,
+      },
+      companyCity:{
+        fontSize: theme.fontSizes.s,
+        paddingTop: theme.paddings.xsmall,
+        color: theme.colors.secondaryText
+      },
+      container: {
+          flex: 1,
+          backgroundColor: theme.colors.background,
+      },
+      containerErrorMsg: {
+        flex: 1,
+        justifyContent: 'center',
+        alignContent: 'center',
+        alignItems: 'center',
+        margin: theme.paddings.default,
+      },
+      content: {
+        backgroundColor: theme.colors.background,
+        flex: 1,
+        padding: "2%",
+      },
+      date:{
+        fontSize: theme.fontSizes.s,
+        paddingTop: theme.paddings.xsmall
+      },
+      header: {
+        backgroundColor: theme.colors.background,
+        padding: 10,
+        flexDirection: "row",
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+      },
+      headerText: {
+        fontSize: theme.fontSizes.l,
+        ...theme.fonts.light,
+        marginTop: 10,
+        marginBottom: 10
+      },
+      innerContainer: {
+        padding: 40,
+        marginTop: 200
+      },
+      title:{
+        fontSize: theme.fontSizes.xxl,
+        color: theme.colors.jobsTitleColor
+      },
+      titleNoJobs:{
+        fontSize: theme.fontSizes.xxl,
+        color: theme.colors.jobsTitleColor,
+        textAlign: 'center',
+        marginBottom: theme.paddings.default
+      },
+    }
+};