@olea-bps/components 1.0.4 → 1.0.8

package/BookDetail/index.js

@@ -27,11 +27,11 @@ import merge from 'lodash/merge';
 import unescape from 'lodash/unescape';
 import uniqBy from 'lodash/uniqBy';
 import {libraryApi} from '@olea-bps/core';
+import {handleHtmlEntities} from "@olea-bps/core/helper/format.helper";
 
 
 import componentStyles from "./styles"
-import { AppBar as AppbarComponent } from '@olea-bps/components';
-import {handleHtmlEntities} from "@olea-bps/core/helper/format.helper";
+import AppbarComponent from '../AppBar';
 
 
 class BookDetailComponent extends React.Component {

package/ComponentJobsFilter/index.js

@@ -21,7 +21,7 @@ import { CheckBox } from 'react-native-elements'
 
 import merge from 'lodash/merge';
 import componentStyles from "./styles";
-import { AppBar as AppbarComponent } from '@olea-bps/components';
+import AppbarComponent from '../AppBar';
 import IconsOpenasist from "@olea-bps/icons-openasist";
 
 

package/ContactDetail/index.js

@@ -33,7 +33,7 @@ import {withTranslation} from "react-i18next";
 import merge from 'lodash/merge';
 
 import componentStyles from "./styles"
-import { AppBar as AppbarComponent } from '@olea-bps/components';
+import AppbarComponent from '../AppBar';
 
 
 /**

package/CourseDetail/index.js

@@ -25,7 +25,7 @@ import { connect } from 'react-redux'
 import merge from 'lodash/merge';
 
 import componentStyles from "./styles"
-import { AppBar as AppbarComponent } from '@olea-bps/components';
+import AppbarComponent from '../AppBar';
 import IconsOpenasist from "@olea-bps/icons-openasist";
 import {withTranslation} from "react-i18next";
 

package/MealItem/styles.js

@@ -1,4 +1,15 @@
-import color from "color";
+// Helper function to add alpha to a color
+const addAlpha = (hexColor, alpha) => {
+    // Remove # if present
+    const hex = hexColor.replace('#', '');
+
+    // Parse RGB values
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
 
 export default function(theme) {
     return {
@@ -7,7 +18,7 @@ export default function(theme) {
             height: '75%',
             paddingHorizontal: theme.paddings.default,
             borderRightWidth: 1,
-            borderRightColor: color(theme.colors.mensaSliderTextColor).alpha(0.5).rgb().string()
+            borderRightColor: addAlpha(theme.colors.mensaSliderTextColor, 0.5)
         },
         mensaItemText: {
             fontSize: theme.fontSizes.itemText,

package/MensaSlider/index.js

@@ -22,7 +22,7 @@ import { LinearGradient } from 'expo-linear-gradient'
 
 import { DateTime } from 'luxon';
 
-import { MealItem as MealItemComponent } from '@olea-bps/components';
+import MealItemComponent from '../MealItem';
 import { toIsoDateString } from '@olea-bps/core/helper/date';
 
 import { useCanteen, useFilteredMenu, useFavoriteCanteens } from '@olea-bps/context-canteen';
@@ -136,7 +136,7 @@ function MensaSliderComponent(props) {
 
     const todayDateTime = new Date();
     const todayDateString = toIsoDateString(todayDateTime);
-    
+
     const formattedDate = DateTime
         .fromJSDate(todayDateTime)
         .setLocale(settings.settingsGeneral.language)

package/NewsDetail/index.js

@@ -38,7 +38,7 @@ import WebViewAutoHeight from '@olea-bps/react-native-webview-autoheight';
 
 
 import componentStyles from "./styles"
-import { AppBar as AppbarComponent } from '@olea-bps/components';
+import AppbarComponent from '../AppBar';
 import {selectFeedById} from "@olea-bps/core/redux/reducers/api";
 
 

package/NewsList/index.js

@@ -25,7 +25,7 @@ import { useTheme } from 'react-native-paper';
 import { useTranslation } from 'react-i18next';
 import { useFocusEffect } from '@react-navigation/native';
 
-import { NewsListItem } from '@olea-bps/components'
+import NewsListItem from '../NewsListItem'
 import { useApiProvider } from '@olea-bps/context-news';
 
 import componentStyles from './styles';

package/OtherCourses/index.js

@@ -29,9 +29,9 @@ import { withTranslation } from 'react-i18next';
 
 import merge from 'lodash/merge';
 
-import { AppBar as AppbarComponent } from '@olea-bps/components';
+import AppbarComponent from '../AppBar';
 import IconsOpenasist from '@olea-bps/icons-openasist';
-import { TimetableList as TimetableListComponent } from '@olea-bps/components';
+import TimetableListComponent from '../TimetableList';
 
 import componentStyles from './styles'
 

package/PtsStation/index.js

@@ -23,7 +23,7 @@ import concat from "lodash/concat";
 import merge from 'lodash/merge';
 
 import {onSettingPtsStationOverride, store} from "@olea-bps/core";
-import { PtsDeparture as PtsDepartureComponent } from '@olea-bps/components';
+import PtsDepartureComponent from '../PtsDeparture';
 import IconsOpenasist from "@olea-bps/icons-openasist";
 
 import componentStyles from "./styles"

package/RoomDetail/index.js

@@ -26,7 +26,7 @@ import {withTranslation} from "react-i18next";
 import merge from 'lodash/merge';
 
 
-import { AppBar as AppbarComponent } from '@olea-bps/components';
+import AppbarComponent from '../AppBar';
 import IconsOpenasist from "@olea-bps/icons-openasist";
 
 import componentStyles from "./styles";

package/SearchResults/index.js

@@ -29,11 +29,11 @@ import {store} from '@olea-bps/core';
 
 import componentStyles from "./styles"
 import IconsOpenasist from "@olea-bps/icons-openasist";
-import { BookDetail as BookDetailComponent } from '@olea-bps/components';
-import { ContactDetail as ContactDetailComponent } from '@olea-bps/components';
-import { RoomDetail as RoomDetailComponent } from '@olea-bps/components';
-import { NewsDetail as NewsDetailComponent } from '@olea-bps/components';
 import {handleHtmlEntities} from "@olea-bps/core/helper/format.helper";
+import ContactDetailComponent from '../ContactDetail';
+import RoomDetailComponent from '../RoomDetail';
+import NewsDetailComponent from '../NewsDetail';
+import BookDetailComponent from '../BookDetail';
 
 
 
@@ -142,7 +142,7 @@ class SearchResultsComponent extends React.Component {
             key = item.bookId;
             title = unescape(item.title);
             subtitle = `${item.format || ''}${item.format && item.available ? ' | ' : ''}${item.available ? t('books:available') : t('books:notAvailable')}`;
-            
+
 
             // Contacts
         } else if(item.firstName && item.lastName)  {

package/SettingsDialogRadio/index.js

@@ -18,7 +18,7 @@ import { StyleSheet } from 'react-native';
 import { RadioButton, useTheme } from 'react-native-paper';
 import { useTranslation } from 'react-i18next';
 
-import { SettingsDialog } from '@olea-bps/components';
+import SettingsDialog from '../SettingsDialog';
 
 import componentStyles from './styles';
 
@@ -63,4 +63,4 @@ export default function SettingsDialogRadio({ title, visible, options, selectedO
       </RadioButton.Group>
     </SettingsDialog>
   );
-}
+}

package/SettingsDialogSelect/index.js

@@ -18,7 +18,7 @@ import { StyleSheet } from 'react-native';
 import { Checkbox, useTheme } from 'react-native-paper';
 import { useTranslation } from 'react-i18next';
 
-import { SettingsDialog } from '@olea-bps/components';
+import SettingsDialog from '../SettingsDialog';
 
 import componentStyles from './styles';
 
@@ -70,4 +70,4 @@ export default function SettingsDialogSelect({ title, visible, options, onDismis
       }
     </SettingsDialog>
   );
-}
+}

package/TimetableDay/index.js

@@ -81,12 +81,14 @@ function CalendarDay({ selectedDate, theme, settings, calendarScrollOffsetMinute
                         course => (
                             {
                                 title: course.title.data,
-                                start: course.startDateTime,
-                                end: course.endDateTime,
+                                start: new Date(Date.parse(course.startDateTime)),
+                                end: new Date(Date.parse(course.endDateTime)),
                                 color: eventColor,
                                 type: course.type?.data,
                                 professor: course.lecturer[0]?.data,
                                 room: course.room.data,
+                                // Anfügen des Ürsprügnlichen Vorlesungsobjektes, damit es beim Klick zur Verfügung steht
+                                origine: course,
                             }
                         )
                     ) ?? [];
@@ -174,24 +176,8 @@ function CalendarDay({ selectedDate, theme, settings, calendarScrollOffsetMinute
                         swipeEnabled={false}
                         onPressEvent={
                             showDetails
-                                ? (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);
-                                }
+                                // Wenn eine Vorlesung im Kalender angeklickt wird, wird die ursprüngliche Vorlesung ausgelesen und selektiert
+                                ? (event) => onCourseSelected(event.origine)
                                 : null
                         }
                         scrollOffsetMinutes={calendarScrollOffsetMinutes}
@@ -263,4 +249,4 @@ const mapStateToProps = (state) => {
     };
 };
 
-export default connect(mapStateToProps, { onUpdateRefreshing })(withTranslation()(withTheme(CalendarDay)));
+export default connect(mapStateToProps, { onUpdateRefreshing })(withTranslation()(withTheme(CalendarDay)));

package/TimetableList/index.js

@@ -15,21 +15,23 @@
 import { useMemo } from 'react';
 import {
     StyleSheet,
+    TouchableOpacity,
     View,
 } from 'react-native';
 
 import { connect } from 'react-redux'
-import { useTheme, Text, Button } from "react-native-paper";
+import {
+    useTheme,
+    Text,
+} from "react-native-paper";
 import { useTranslation } from "react-i18next";
 
 import { onUpdateRefreshing } from "@olea-bps/core";
 
-import IconsOpenasist from "@olea-bps/icons-openasist";
+import { DateTime } from 'luxon';
 
 import componentStyles from "./styles";
 
-
-
 /**
  * Timetable List Component
  *
@@ -47,10 +49,38 @@ import componentStyles from "./styles";
 function TimetableListComponent({ course, times, settings, onCourseSelected }) {
     const { t } = useTranslation();
     const theme = useTheme();
-    const { colors, themeStyles, appSettings } = theme;
-
-    const accessibilityStartTime = t('accessibility:timetable:startTime') + times?.start.slice(0, 2) + ' ' + t('accessibility:pts:speechTime') + ' ' + (times?.start.slice(3, 5) !== '00' ? times?.start.slice(3, 5) : '') + ',';
-    const accessibilityEndTime = t('accessibility:timetable:endTime') + times?.end.slice(0, 2) + ' ' + t('accessibility:pts:speechTime') + ' ' + (times?.end.slice(3, 5) !== '00' ? times?.end.slice(3, 5) : '') + ',';
+    const { themeStyles, appSettings } = theme;
+
+    const courseTitle = course?.title?.data;
+    const courseType = course?.type?.data;
+    const courseRoom = course?.room?.data;
+    const courseStartDatetime = DateTime.fromISO(course.startDateTime);
+    const courseStarTimeText = courseStartDatetime.isValid
+        ? courseStartDatetime?.toLocaleString(DateTime.TIME_24_SIMPLE)
+        : undefined;
+    const courseEndDatetime = DateTime.fromISO(course.endDateTime);
+    const courseEndTimeText = courseEndDatetime.isValid
+        ? courseEndDatetime?.toLocaleString(DateTime.TIME_24_SIMPLE)
+        : undefined;
+    const courseTimesTextesAvaiable = courseStartDatetime && courseEndTimeText ? true : false;
+    const courseLecturers = course?.lecturer
+        ?.map(lecturer => lecturer.data);
+    const courseLecturersAmount = Array.isArray(courseLecturers)
+        ? courseLecturers.length
+        : 0;
+    const courseInfo = course?.info?.data;
+    const courseUrl = course?.url?.data;
+
+    const courseAccessibilityText = t(
+        'accessibility:timetable:courseSummary',
+        {
+            type: courseType,
+            title: courseTitle,
+            startTime: courseStarTimeText,
+            endTime: courseEndTimeText,
+            room: courseRoom,
+        }
+    );
 
     const isBigFont = settings.settingsAccessibility.increaseFontSize;
     const showDetails = appSettings?.modules?.timetable?.showDetails;
@@ -60,48 +90,82 @@ function TimetableListComponent({ course, times, settings, onCourseSelected }) {
         [theme]
     )
 
-    const renderTimeSlot = (
-        <View style={isBigFont ? [styles.courseTimeContainer, styles.courseTimeContainerBigFont] : styles.courseTimeContainer}>
-            <Text accessibilityLabel={accessibilityStartTime} style={isBigFont ? [styles.timeText, styles.timeTextBig] : styles.timeText}>{times?.start || ''}</Text>
-            <View style={styles.verticalSeperatorSmall} />
-            <Text accessibilityLabel={accessibilityEndTime} style={isBigFont ? [styles.timeText, styles.timeTextBig] : styles.timeText}>{times?.end || ''}</Text>
-        </View>
-    );
-    var renderVerticalSeperator = (
-        <View
-            style={styles.verticalSeperator}
-        />
-    );
-
-    const { type, title, room, lecturer, info, url } = course;
-
     const courseContainerBigFont = isBigFont ? styles.courseContainerBigFont : null;
     const titleStyle = isBigFont ? styles.titleBigFont : styles.title;
-
+    const coursePressable = showDetails &&
+        (
+            courseTitle ||
+            courseType ||
+            courseRoom ||
+            courseLecturersAmount ||
+            courseInfo ||
+            courseUrl ||
+            courseStarTimeText ||
+            courseEndTimeText
+        );
 
     return (
-
-        <View style={isBigFont ? [themeStyles.card, styles.courseCard] : themeStyles.card}>
-            {times ? renderTimeSlot : null}
-            {times ? renderVerticalSeperator : null}
-            <View style={times ? [styles.courseContainer, courseContainerBigFont] : styles.otherCourseContainer}>
-                {(type && type.data) ? <Text style={times ? [styles.type, styles.addLeftRightPadding] : styles.type} >{type.data}</Text> : null}
-                {(title && title.data) ? <Text style={times ? [titleStyle, styles.addLeftRightPadding] : styles.title}>{title.data}</Text> : null}
-                {(room && room.data) ? <Text style={times ? [styles.room, styles.addLeftRightPadding] : styles.room} >{room.data}</Text> : null}
-                {(lecturer && lecturer[0] && lecturer[0].data) ?
-                    <Text style={times ? [styles.professorText, styles.addLeftRightPadding] : styles.professorText}>
-                        Tutor: <Text style={styles.professorName}>{lecturer.map(lecturer => lecturer.data).join(',') || ''}</Text>
-                    </Text> : null
+        <TouchableOpacity
+            style={isBigFont ? [themeStyles.card, styles.courseCard] : themeStyles.card}
+            accessibilityLabel={courseAccessibilityText}
+            onPress={
+                coursePressable
+                    ? () => onCourseSelected?.(course)
+                    : null
+            }
+            disabled={!coursePressable}
+        >
+            {
+                courseTimesTextesAvaiable
+                    ? <View style={isBigFont ? [styles.courseTimeContainer, styles.courseTimeContainerBigFont] : styles.courseTimeContainer}>
+                        <Text style={isBigFont ? [styles.timeText, styles.timeTextBig] : styles.timeText}>
+                            {courseStarTimeText}
+                        </Text>
+                        <View style={styles.verticalSeperatorSmall} />
+                        <Text style={isBigFont ? [styles.timeText, styles.timeTextBig] : styles.timeText}>
+                            {courseEndTimeText}
+                        </Text>
+                    </View>
+                    : null
+            }
+            {
+                courseTimesTextesAvaiable
+                    ? <View style={styles.verticalSeperator} />
+                    : null
+            }
+            <View style={courseTimesTextesAvaiable ? [styles.courseContainer, courseContainerBigFont] : styles.otherCourseContainer}>
+                {
+                    courseType
+                        ? <Text style={courseTimesTextesAvaiable ? [styles.type, styles.addLeftRightPadding] : styles.type} >
+                            {courseType}
+                        </Text>
+                        : null
+                }
+                {
+                    courseTitle
+                        ? <Text style={courseTimesTextesAvaiable ? [titleStyle, styles.addLeftRightPadding] : styles.title}>
+                            {courseTitle}
+                        </Text>
+                        : null}
+                {
+                    courseRoom
+                        ? <Text style={courseTimesTextesAvaiable ? [styles.room, styles.addLeftRightPadding] : styles.room} >
+                            {courseRoom}
+                        </Text>
+                        : null
+                }
+                {
+                    courseLecturersAmount ?
+                        <Text style={courseTimesTextesAvaiable ? [styles.professorText, styles.addLeftRightPadding] : styles.professorText}>
+                            Tutor:
+                            <Text style={styles.professorName}>
+                                {courseLecturers.join(', ')}
+                            </Text>
+                        </Text>
+                        : null
                 }
             </View>
-            {showDetails && (room?.data || info?.data || url?.data) ?
-                <View style={styles.btnPosition}>
-                    <Button style={styles.btnAddionals} onPress={() => onCourseSelected?.(course)}>
-                        <IconsOpenasist icon={"info"} color={colors.secondaryText} size={22} />
-                    </Button>
-                </View>
-                : null}
-        </View>
+        </TouchableOpacity>
     );
 }
 

package/TimetableList/styles.js

@@ -19,7 +19,6 @@ export default function (theme) {
             width: "15%",
             alignItems: "center",
             justifyContent: "center",
-            backgroundColor: theme.colors.background
         },
         courseTimeContainerBigFont: {
             width: "25%",
@@ -37,7 +36,6 @@ export default function (theme) {
             flexDirection: "column",
             paddingLeft: theme.paddings.small,
             width: "85%",
-            backgroundColor: theme.colors.background,
             paddingTop: theme.paddings.xsmall,
             paddingBottom: theme.paddings.xsmall
         },
@@ -76,7 +74,6 @@ export default function (theme) {
         otherCourseContainer: {
             padding: theme.paddings.xsmall,
             width: "100%",
-            backgroundColor: theme.colors.background
         },
         btnPosition: {
             position: 'absolute',

package/TimetableWeek/index.js

@@ -12,7 +12,7 @@
  * limitations under the License.
  */
 
-import { useState, useMemo, useCallback } from 'react';
+import { useMemo, useCallback } from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, useWindowDimensions } from 'react-native';
 import { connect } from 'react-redux';
 import { withTheme } from 'react-native-paper';
@@ -23,7 +23,6 @@ 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';
 
@@ -90,12 +89,14 @@ function CalendarWeek(props) {
               course => (
                 {
                   title: course.title.data,
-                  start: course.startDateTime,
-                  end: course.endDateTime,
+                  start: new Date(Date.parse(course.startDateTime)),
+                  end: new Date(Date.parse(course.endDateTime)),
                   color: eventColor,
                   type: course.type?.data,
                   professor: course.lecturer[0]?.data,
                   room: course.room.data,
+                  // Anfügen des Ürsprügnlichen Vorlesungsobjektes, damit es beim Klick zur Verfügung steht
+                  origine: course,
                 }
               )
             ) ?? [];
@@ -171,24 +172,8 @@ function CalendarWeek(props) {
             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);
-              }
+                            // Wenn eine Vorlesung im Kalender angeklickt wird, wird die ursprüngliche Vorlesung ausgelesen und selektiert
+                      (event) => onCourseSelected(event.origine)
             }
             swipeEnabled={false}
             scrollOffsetMinutes={calendarScrollOffsetMinutes}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olea-bps/components",
-  "version": "1.0.4",
+  "version": "1.0.8",
   "description": "Consolidated components for OLEA",
   "main": "index.js",
   "repository": "https://github.com/tuc-urz/olea.git",
@@ -23,11 +23,10 @@
     "@olea-bps/context-timetable": "^1.0.0",
     "moment": "^2.29.4",
     "react-native-tab-view": "^4.1.3",
-    "expo-linear-gradient": "^14.1.5",
+    "expo-linear-gradient": "~15.0.7",
     "@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"
+    "react-native-webview": "13.16.0",
+    "@react-native-community/netinfo": "^11.4.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",