feat: 🎸 Add week number and calendar dates to timetable

imzeeshan · Dec 6, 2021 · 6fbbcc8 · 6fbbcc8
1 parent 3359ba8
commit 6fbbcc8
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/apps/skolplattformen-app/components/week.component.tsx b/apps/skolplattformen-app/components/week.component.tsx
@@ -108,7 +108,7 @@ export const Day = ({ weekDay, lunch, lessons }: DayProps) => {
 export const Week = ({ child }: WeekProps) => {
   moment.locale(LanguageService.getLocale())
   const days = moment.weekdaysShort().slice(1, 6)
-  const displayDate = getMeaningfulStartingDate()
+  const displayDate = getMeaningfulStartingDate(moment())
 
   const currentDayIndex = Math.min(moment(displayDate).isoWeekday() - 1, 5)
   const [selectedIndex, setSelectedIndex] = useState(currentDayIndex)
@@ -129,15 +129,30 @@ export const Week = ({ child }: WeekProps) => {
     setShowSchema(shouldShowSchema)
   }, [lessons])
 
+  const getWeekText = (date = moment()) => {
+    return `Vecka ${date.isoWeek()}`
+  }
+
   return showSchema ? (
     <TransitionView style={styles.view} animation={'fadeInDown'}>
       <TransitionView style={styles.innerView} animation={'fadeIn'}>
+        <Text style={styles.weekNumber}>{getWeekText(displayDate)}</Text>
         <TabBar
           selectedIndex={selectedIndex}
           onSelect={(index) => setSelectedIndex(index)}
         >
-          {days.map((weekDay) => (
-            <Tab key={weekDay} title={weekDay} />
+          {days.map((weekDay, index) => (
+            <Tab
+              key={weekDay}
+              title={(_) => (
+                <>
+                  <Text style={styles.tabTitle}>{weekDay}</Text>
+                  <Text style={styles.tabTitleDate}>
+                    {displayDate.startOf('week').add(index, 'day').format('D')}
+                  </Text>
+                </>
+              )}
+            />
           ))}
         </TabBar>
 
@@ -232,4 +247,15 @@ const themedStyles = StyleService.create({
   lesson: {
     flexDirection: 'column',
   },
+  weekNumber: {
+    marginLeft: 10,
+    marginTop: 10,
+    ...Typography.fontWeight.bold,
+  },
+  tabTitle: {
+    textAlign: 'center',
+  },
+  tabTitleDate: {
+    textAlign: 'center',
+  },
 })
diff --git a/apps/skolplattformen-app/translations/sv.json b/apps/skolplattformen-app/translations/sv.json
@@ -131,7 +131,8 @@
         "start": "Börjar",
         "end": "Slutar",
         "lunch": "Lunch",
-        "gymBag": "Gympapåse"
+        "gymBag": "Gympapåse",
+        "week": "Vecka"
     },
     "classmates": {
         "class": "Klass",