@olea-bps/base 1.0.0

package/views/TimetableList/index.js

@@ -0,0 +1,402 @@
+/**
+ * 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 {
+  SafeAreaView,
+  StyleSheet,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  RefreshControl,
+  ActivityIndicator,
+  Linking,
+} from 'react-native';
+import { connect } from 'react-redux'
+import { TabView, TabBar, TabBarItem } from 'react-native-tab-view';
+import { Appbar, useTheme, Text } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+import { useFocusEffect } from '@react-navigation/native';
+
+import { DateTime, Duration } from 'luxon';
+
+import { onUpdateRefreshing, store } from '../../libraries/core';
+import {
+  useCourses,
+  useTimetableCode,
+  ApiProviderNotInitializedError,
+} from '../../context/context-timetable';
+import AppbarComponent from '../../components/AppBar';
+import OtherCoursesComponent from '../../components/OtherCourses';
+import TimetableListComponent from '../../components/TimetableList';
+import TimetableCodeInput from '../../components/TimetableCodeInput';
+import CourseDetailDialog from '../../components/CourseDetailDialog';
+
+import componentStyles from './styles';
+
+/**
+ * Timetable View
+ *
+ * Displays the timetable, if the has imported one. If no timetable
+ * is available, the view will provide a import. The view also
+ * provides a button to import a new timetable.
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - none
+ */
+function TimetableViewList(props) {
+  const theme = useTheme();
+  const { t } = useTranslation();
+  const [selectedCourse, setSelectedCourse] = useState(null);
+
+  // Get all required constants from props
+  const {
+    settings: { settingsGeneral: { language } },
+  } = props;
+
+  const { colors, themeStyles, appSettings: { modules: { timetable: { downloadEnabled } } } } = theme;
+
+  const componentName = TimetableViewList.name;
+  const timetableSettings = theme?.appSettings?.modules?.timetable;
+  const disabledWeekdays = timetableSettings?.disabledWeekdays ?? [];
+  const weeksToRender = timetableSettings?.weeksToRender ?? 2;
+  // Jetziger Zeitpunkt
+  const now = DateTime.now();
+  // Zeitpunkt, der auf den Wochenanfang zeigt
+  const startDate = now.startOf('week');
+  // Zeitpunkt, der auf den letzten anzuzeigenen Tag zeigt
+  const endDate = startDate.plus({ weeks: weeksToRender }).endOf('week');
+
+  // Generiert die Tabs beginnend beim Wochenanfang bis zum letzten Tag der Ansicht
+  // Es werden die nicht anzuzeigenden Wochentage herausgefiltert
+  const daysTabViewRoutes = useMemo(
+    () => {
+      // Berechenen der Anzahl der zu zeigenden Tage bzw. Anzahl der Tabs
+      const daysToRender = Duration.fromDurationLike({ weeks: weeksToRender }).as('days');
+
+      // Erstellen der Tabs
+      return Array.from(
+        // Es wird ein Array erzeugt, welches so lang ist wie die Anzahl der zu zeigenden Tage
+        { length: daysToRender },
+        // Tabs anhand des Indexes berechnen
+        (_, index) => {
+
+          // Festlegen des Tages des entsprechenden Tabs beim Index
+          const currentDay = startDate
+            // Es wird der Start genommen und um index-viele Tage in die Zukunft verschoben
+            .plus({ days: index })
+            // Abschliesend wird die Uhrzeit auf 00:00, also den Anfang des Tages, gesetzt.
+            .startOf('day');
+
+          // Tab wird als Objekt zurückgeben
+          return {
+            // Der Schlüssel des Tabs ist das Datum des Tabs im ISO-Format
+            // Somit lässt sich über das Datum der entsprechende Tab aktivieren
+            key: currentDay.toISODate(),
+            // Für die weiter Verarbeitung, wird das Datum als Datumsobjekt mitgeben
+            // Dem Datumsobject wird die eingestellt Sprache gegeben
+            date: currentDay.setLocale(language),
+          }
+        }
+      )
+        .filter(dayRoute => !disabledWeekdays.includes(dayRoute.date.weekday))
+    },
+    [weeksToRender, disabledWeekdays, startDate, language]
+  );
+  // Create state for tab view index
+  const [daysTabViewActiveRouteIndex, setDaysTabViewActiveRouteIndex] = useState(() => {
+    // Present day
+    const today = DateTime.now().startOf('day');
+    // Search for the index of today or the day after. If no index can be found, -1 is taken.
+    let initialDayTabIndex = daysTabViewRoutes.findIndex(dayTab => dayTab.date >= today);
+    // If no index could be found, the last tab is taken.
+    // If only one week is rendered and the weekend days are switched off, no following day will be found.
+    initialDayTabIndex = initialDayTabIndex === -1 ? daysTabViewRoutes.length - 1 : initialDayTabIndex;
+    return initialDayTabIndex;
+  });
+
+  const [timetableCode] = useTimetableCode();
+  const [courses, refreshCourses] = useCourses();
+
+  /**
+   * State der speichert, ob die Code-Eingabe gezeigt werden soll.
+   *
+   * Der State kann 3 Zustände annehmen:
+   *   - null : Es wurde noch kein Stundenplan importiert -> Code-Eingabe wird angezeigt
+   *   - true : Der Nutzer möchte die Code-Eingabe sehen -> Code-Eingabe wird angezeigt
+   *   - false: Die Nutzer möchte die Code-Eingabe nicht sehen -> Stundenplan wird angezeigt
+   *
+   * Der null-Wert wird benutzt um festzustellen, dass die App die Code-Eingabe anzeigt, weil bisher kein Stundenplan importiert wurde.
+   * Somit kann nach dem Import geprüft werden, ob der State den null-Wert hält und automatisch zu den Stundenplan schalten.
+   */
+  const [showImport, setShowImport] = useState(timetableCode === null && courses === null ? true : false);
+  const [coursesRefreshing, setCoursesRefreshing] = useState(false);
+
+  // Generate styles. Will be generated only if not present or the theme property changes.
+  const styles = useMemo(
+    () => StyleSheet.create(componentStyles(theme)),
+    [theme]
+  )
+
+  const otherCourses = courses?.[undefined] ?? [];
+  const activeTabDate = daysTabViewRoutes[daysTabViewActiveRouteIndex]?.date;
+  const activeTabWeek = activeTabDate.weekNumber;
+
+  // Refreshen der Vorlesungen, wenn die View angeziegt wird und den Fokus vom nutzer bekommt.
+  useFocusEffect(
+    useCallback(
+      () => {
+        refreshCourses(startDate.toISODate(), endDate.toISODate())
+          .catch((reason) => {
+            if (reason instanceof ApiProviderNotInitializedError) {
+              console.error(componentName, ': ', reason);
+            } else {
+              console.debug(componentName, ': ', reason);
+            }
+          });
+      },
+      []
+    )
+  )
+
+  /*
+  Depending on the existence of a timetable, either the timetable or the view for the input of a timetablecode will be rendered
+  To decide which components have to rendered, the flag showImport is used.
+  If its value is true, there already is an imported timetable as well as a list of courses
+  and the function for rendering the timetable-tabview(renderTabView) is called.
+  Otherwise, the function for entering a timetablecode will be called(renderTimetableCodeInput)
+  */
+  return (
+    <SafeAreaView style={[styles.container, themeStyles.appSafeAreaContainer]}>
+      <AppbarComponent {...props}
+        title={t('timetable:title')}
+        subtitle={`${t('timetable:weekNumber', { kw: activeTabWeek })} / ${t(activeTabWeek % 2 === 0 ? 'timetable:evenWeek' : 'timetable:oddWeek')}`}
+        // in addition to the selection of the icon for the right Action in the app-bar the color for the icon also has to be defined
+        rightAction={
+          <>
+            {
+              downloadEnabled
+                ? <Appbar.Action
+                  icon={'download'}
+                  onPress={
+                    async () => {
+                      const { modules: { timetable: { downloadUrl } } } = props.theme.appSettings;
+                      await Linking.openURL(downloadUrl + timetableCode);
+                    }
+                  }
+                  color={colors.appbarIconColor}
+                  accessibilityLabel={t('accessibility:timetable:downloadTimetableButton')}
+                />
+                : null
+            }
+            <Appbar.Action
+              icon={showImport ? 'table' : 'table-plus'}
+              color={colors.appbarIconColor}
+              onPress={
+                () => setShowImport(currentValue => !currentValue)
+              }
+              accessibilityLabel={t(
+                showImport
+                  ? 'accessibility:timetable:showImportButton'
+                  : 'accessibility:timetable:showTimetableButton'
+              )}
+            />
+          </>
+        }
+      />
+      {
+        !(showImport) // !FIXME: If-Cases sollten getauscht werden, damit Code einfacher wird
+          ? <View style={themeStyles.container}>
+            <TabView
+              style={props.style}
+              navigationState={{ index: daysTabViewActiveRouteIndex, routes: daysTabViewRoutes }}
+              onIndexChange={setDaysTabViewActiveRouteIndex}
+              renderTabBar={
+                (props) =>
+                  <TabBar
+                    {...props}
+                    scrollEnabled
+                    style={themeStyles.tabs}
+                    labelStyle={themeStyles.tab}
+                    activeColor={themeStyles.tabs.activeColor}
+                    inactiveColor={themeStyles.tabs.inactiveColor}
+                    indicatorStyle={themeStyles.tabIndicator}
+                    tabStyle={{ width: 'auto', paddingHorizontal: 20 }}
+                    renderTabBarItem={({ route, navigationState, ...rest }) =>
+                      <TabBarItem
+                        {...rest}
+                        key={route.key}
+                        route={route}
+                        navigationState={navigationState}
+                        labelStyle={themeStyles.tab}
+                        activeColor={themeStyles.tabs.activeColor}
+                        inactiveColor={themeStyles.tabs.inactiveColor}
+                        // Die einbindung von moment.js zum Anzeigen des Wochentages sollte langfristig entfernt werden.
+                        // Funktioniert die Luxon funktionalität der Wochenanzeige nicht unter iOS datetime.toFormat('ccc')
+                        label={
+                          // Generieren das Tab-Textes
+                          ({ route }) => {
+                            // Datumsobject aus dem Tab holen
+                            const date = route.date;
+                            // Kurzbezeichnung des Wochentages bestimmen
+                            const shortWeekDay = t(`common:isoWeekDay:${date.weekday}:short`); // Falls hermes Intl soweit ist, lieber folgende Zeile verwenden: const shortWeekDay = date.weekdayShort;
+                            // Datum, bestehend aus Tag und Monat, bestimmen
+                            const localeDate = date.toLocaleString(
+                              {
+                                day: '2-digit',
+                                month: '2-digit',
+                              }
+                            );
+
+                            // Tab-Text aus Wochentag und Datum generieren
+                            return <Text>{shortWeekDay}, {localeDate}</Text>;
+                          }
+                        }
+                        accessible={true}
+                        accessibilityLabel={route.date.toLocaleString(DateTime.DATE_FULL)}
+                      />
+                    }
+                  />
+              }
+              renderScene={
+                ({ route }) => {
+                  const dayIsoDate = route.key;
+                  const coursesOfDay = courses?.[dayIsoDate];
+
+                  return (
+                    <View style={themeStyles.container}>
+                      <View style={styles.horizontalSeperator} />
+                      <ScrollView
+                        refreshControl={
+                          <RefreshControl
+                            refreshing={coursesRefreshing}
+                            onRefresh={
+                              () => {
+                                setCoursesRefreshing(true);
+                                refreshCourses(dayIsoDate, dayIsoDate)
+                                  .finally(() => setCoursesRefreshing(false));
+                              }
+                            }
+                          />
+                        }>
+                        <View style={styles.renderList}>
+                          {
+                            coursesOfDay?.length
+                              ? coursesOfDay.map(
+                                (course, index) => {
+                                  const courseTime = course?.times?.[0];
+
+                                  return (
+                                    <TimetableListComponent
+                                      {...props}
+                                      key={`${course?.title?.data}${course?.type?.data}${courseTime.start}${courseTime.end}`}
+                                      course={course}
+                                      times={courseTime}
+                                      onCourseSelected={course => setSelectedCourse(course)}
+                                    />
+                                  )
+                                }
+                              )
+                              : <View style={styles.emptyListContainer}>
+                                <Text style={styles.emptyText}>{t('timetable:noEvents')}</Text>
+                              </View>
+                          }
+                        </View>
+                      </ScrollView>
+                    </View>
+                  );
+                }
+              }
+              lazy
+              lazyPreloadDistance={2}
+              renderLazyPlaceholder={(route) =>
+                <View style={styles.centerContainer}>
+                  <ActivityIndicator
+                    style={styles.activity}
+                    size={'large'}
+                    color={theme.colors.loadingIndicator}
+                  />
+                </View>
+              }
+            />
+            {
+              otherCourses?.length
+                ? <TouchableOpacity
+                  style={styles.otherContainer}
+                  onPress={
+                    () => {
+                      // Never provide props directly if you are using translations in this or a parent component
+                      const otherCoursesComponentProps = { navigation: { ...props.navigation } };
+
+                      store.dispatch(
+                        {
+                          type: 'UPDATE_MODAL_CONTENT',
+                          modalContent: (
+                            <View style={styles.modalContainer}>
+                              <OtherCoursesComponent
+                                {...otherCoursesComponentProps}
+                                course={otherCourses}
+                              />
+                            </View>
+                          )
+                        }
+                      );
+                      props.navigation.navigate('Modal');
+                    }
+                  }
+                >
+                  <Text
+                    style={styles.otherTitle}
+                  >
+                    {t('timetable:moreEvents')}
+                  </Text>
+                </TouchableOpacity>
+                : null
+            }
+
+
+            <CourseDetailDialog
+              course={selectedCourse}
+              visible={selectedCourse ? true : false}
+              onClose={() => setSelectedCourse(null)}
+              onDismiss={() => setSelectedCourse(null)}
+            />
+
+          </View>
+          : <TimetableCodeInput
+            onImportSuccessfullyFinished={
+              // Wenn Stundenplan erfolgreich importiert wurde, wird der Stundenplan angezeigt
+              () => setShowImport(false)
+            }
+          />
+      }
+    </SafeAreaView>
+  );
+}
+
+const mapStateToProps = state => {
+  return {
+    pluginComponent: state.pluginReducer.timetable.component,
+    pluginStyles: state.pluginReducer.timetable.styles,
+    courses: state.apiReducer.courses,
+    coursesStatus: state.apiReducer.coursesStatus,
+    refreshing: state.stateReducer.refreshing,
+    settings: state.settingReducer
+  };
+};
+
+export default connect(mapStateToProps, { onUpdateRefreshing })(TimetableViewList)

package/views/TimetableList/styles.js

@@ -0,0 +1,55 @@
+import {Dimensions} from "react-native";
+
+export default function(theme) {
+    const width = Dimensions.get('window').width;
+    return {
+        horizontalSeperator: {
+          height: 1,
+          width: "100%",
+          backgroundColor: theme.colors.listSeperator
+        },
+        otherContainer: {
+          width: width,
+          height: "10%",
+          backgroundColor: theme.colors.primary,
+          shadowColor: theme.colors.shadow,
+          shadowOffset: {
+              width: 0,
+              height: 1,
+          },
+          shadowOpacity: 0.5,
+          shadowRadius: 10,
+          elevation: 3,
+          justifyContent: 'center'
+        },
+        otherTitle: {
+          fontSize: theme.fontSizes.xxl,
+          ...theme.fonts.medium,
+          textAlign: "center",
+          padding: theme.paddings.small,
+          color: theme.colors.primaryText,
+        },
+        container: {
+          flex: 1,
+          backgroundColor: theme.colors.contentBackground,
+        },
+        modalContainer: {
+            flex: 1,
+        },
+        renderList: {
+          marginBottom: theme.paddings.small
+        },
+        emptyListContainer: {
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+            height: 400,
+            padding: theme.paddings.default,
+            marginTop: theme.paddings.default
+        },
+        emptyText: {
+          textAlign: "center",
+          fontSize: theme.fontSizes.title
+        }
+    }
+};

package/views/Webviews/index.js

@@ -0,0 +1,158 @@
+/**
+ * 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 {SafeAreaView, StyleSheet, ActivityIndicator, View, Linking} from 'react-native';
+import {connect} from 'react-redux'
+import {Appbar, withTheme} from "react-native-paper";
+import { WebView } from 'react-native-webview';
+import merge from 'lodash/merge';
+
+import componentStyles from "./styles";
+import AppbarComponent from '../../components/AppBar';
+import IconsOpenasist from '../../libraries/icons-openasist';
+
+
+/**
+ * Webview View
+ *
+ * Use this víew to show a webpage (via url).
+ *
+ * Parameters:
+ *  - none
+ *
+ * Navigation-Parameters:
+ *  - title: Header title
+ *  - url: Webpage Url
+ */
+class WebviewsView extends React.Component {
+    static navigationOptions = {
+        header: null
+    };
+
+    state = {
+        refreshing: false,
+    };
+
+    // Styles of this component
+    styles;
+
+
+
+    webView =  {
+        canGoBack: false,
+        ref: null,
+    };
+
+    jsScript = `
+        const meta = document.createElement('meta');
+        meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0');
+        meta.setAttribute('name', 'viewport');
+        document.head.appendChild(meta);
+        `;
+
+    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);
+
+        // ------------------------------------------------------------------------
+    }
+
+    /**
+     * Intercept URL loading in the WebView.
+     * If the base URL of the event is different from the initial base URL, open it in the external browser.
+     * Still allows url navigation with # values in the URL by comparing the base URL of the event with the base URL of the initial URL.
+     */
+    onShouldStartLoadWithRequest = (event) => {
+        const {url} = this.props.route.params;
+        const baseUrl = url.split('#')[0];
+        const eventBaseUrl = event.url.split('#')[0];
+
+        if (eventBaseUrl !== baseUrl) {
+            Linking.openURL(event.url);
+            return false;
+        }
+        return true;
+    }
+
+    render() {
+        const {route} = this.props;
+        const {colors, themeStyles, customScript} = this.props.theme;
+        // The language is necessary because it is needed in the header in the source-prop of the webview elemnent
+        // to display the website in the selected system-language
+        const {language} = this.props.settings.settingsGeneral
+
+        // Get the current title of the element, that should be displayed e.g. Imprint, data policy, etc.
+        const title = route.params && route.params.title || null;
+        // Get the url for the current element defined in the settings
+        const url = route.params && route.params.url || null;
+
+        // The returned View contains a Appbar followed by the webview that calls the websites provided in the URL
+        return (
+            <SafeAreaView style={[this.styles.container, themeStyles.appSafeAreaContainer]}>
+                <View style={{zIndex: 100, position: 'relative'}}>
+                    <AppbarComponent {...this.props}
+                                     title={title}
+                                     leftAction={
+                                         <Appbar.Action
+                                             icon={props => <IconsOpenasist {...props} icon={'back'} color={colors.primaryText} /> }
+                                             onPress={() => {
+                                                 if (this.webView.canGoBack) {
+                                                     this.webView.ref.goBack();
+                                                 } else {
+                                                     this.props.navigation.goBack(null);
+                                                 }
+                                             }} />
+                                     }
+                                     rightAction={<Appbar.Action  icon="refresh"  onPress={() => this.webView.ref.reload()}/>}/>
+                </View>
+                <WebView
+                    ref={ref => this.webView.ref = ref}
+                    // In addition to only providing the url as a source, headers can be defined that will contain additional information
+                    // In this case the header provides information about the current system-language in order to display a given translation of the website
+                    source={{ uri: url, headers: {
+                        "Accept-Language": `${language}`,
+                      } }}
+                    startInLoadingState={true}
+                    renderLoading={() => <ActivityIndicator style={this.styles.activity} size="large" color={colors.loadingIndicator} />}
+                    onNavigationStateChange={(navState) => { this.webView.canGoBack = navState.canGoBack; }}
+                    injectedJavaScript={this.jsScript + customScript}
+                    onMessage={() => {}}
+                    onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest}
+                />
+            </SafeAreaView>
+        );
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        // The settings are necessary to determine the current system-language so that the websites in the webview can be
+        // translated in the selected language
+        settings: state.settingReducer
+    };
+};
+
+export default connect(mapStateToProps, null)(withTheme(WebviewsView))

package/views/Webviews/styles.js

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