feat: 💄 Affichage des séparateurs sur l'écran des cours

PapillonApp · Apr 1, 2024 · 48d428c · 48d428c
1 parent 00a689f
commit 48d428c
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 27 deletions.
diff --git a/interface/CoursScreen/TimeSeparator.tsx b/interface/CoursScreen/TimeSeparator.tsx
@@ -9,16 +9,30 @@ import {
 } from 'lucide-react-native';
 import { PressableScale } from 'react-native-pressable-scale';
 
-const TimeSeparator = ({ reason, time, lunch }) => {
+const TimeSeparator = ({ style, showLine, reason, time, lunch }) => {
   const UIColors = GetUIColors();
 
   return (
     <PressableScale style={[
       styles.timeSeparator,
       {
         backgroundColor: UIColors.text + '08',
-      }
+      },
+      style
     ]}>
+      {showLine &&
+        <View
+          style={{
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: 0,
+            height: '100%',
+            width:4,
+            backgroundColor: UIColors.border
+          }}
+        />
+      }
       <Image source={require('../../assets/stripes.png')} style={[styles.stripes, {tintColor: UIColors.text}]} />
       <View style={[styles.separatorData]}>
         <View style={[styles.reasonContainer]}>

diff --git a/views/CoursScreen.tsx b/views/CoursScreen.tsx
@@ -22,6 +22,7 @@ import { PressableScale } from 'react-native-pressable-scale';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useTheme, Text } from 'react-native-paper';
 import { SFSymbol } from 'react-native-sfsymbols';
+import TimeSeparator from '../interface/CoursScreen/TimeSeparator';
 
 import * as Notifications from 'expo-notifications';
 import * as Calendar from 'expo-calendar';
@@ -895,34 +896,38 @@ function CoursPage({ cours, navigation, forceRefresh }: {
       {cours.map((lesson, index) => (
         <View key={lesson.id}>
           {index !== 0 && new Date(lesson.start).getTime() - new Date(cours[index - 1].end).getTime() > 1800000 && (
-            <View style={styles.coursSeparator}>
-              <View
-                style={[
-                  styles.coursSeparatorLine,
-                  { backgroundColor: `${UIColors.text}15` },
-                ]}
-              />
-
-              <Text style={{ color: `${UIColors.text}30` }}>
-                {`${Math.floor(
-                  (new Date(lesson.start).getTime() - new Date(cours[index - 1].end).getTime()) /
+            <TimeSeparator
+              reason={
+                (new Date(cours[index - 1].end).getHours() < 13 &&
+                new Date(lesson.start).getHours() >= 12) ?
+                  'Pause méridienne'
+                : 'Pas de cours'
+              }
+              time={`${Math.floor(
+                (new Date(lesson.start).getTime() -
+                    new Date(cours[index - 1].end).getTime()) /
                     3600000
-                )} h ${lz(
-                  Math.floor(
-                    ((new Date(lesson.start).getTime() - new Date(cours[index - 1].end).getTime()) %
+              )} h ${lz(
+                Math.floor(
+                  ((new Date(lesson.start).getTime() -
+                      new Date(cours[index - 1].end).getTime()) %
                       3600000) /
                       60000
-                  )
-                )} min`}
-              </Text>
-
-              <View
-                style={[
-                  styles.coursSeparatorLine,
-                  { backgroundColor: `${UIColors.text}15` },
-                ]}
-              />
-            </View>
+                )
+              )} min`}
+              lunch={
+                new Date(cours[index - 1].end).getHours() < 13 &&
+                new Date(lesson.start).getHours() >= 12
+              }
+              showLine
+              style={{
+                marginHorizontal: 0,
+                marginTop: 0,
+                marginBottom: 8,
+                height: 38,
+                marginLeft: 69,
+              }}
+            />
           )}
 
           <CoursItem