feat: add page descriptions

package.json

@@ -24,6 +24,7 @@
     "git-username": "^1.0.0",
     "http-proxy-middleware": "^2.0.6",
     "i18next": "^23.10.0",
+    "i18next-fs-backend": "^2.3.1",
     "leaflet": "^1.8.0",
     "lodash.debounce": "^4.0.8",
     "madge": "^6.1.0",

src/layout/sidebar/SideBar.tsx

@@ -32,6 +32,7 @@ export default function SideBar() {
         theme="light"
         breakpoint="lg"
         collapsedWidth={60}
+        width={250}
         collapsible
         collapsed={collapsed}
         onCollapse={(value: boolean) => setCollapsed(value)}

src/locale/en.json

@@ -1,10 +1,16 @@
 {
-  "realtime_map_explanation": "Location data of buses collected in real time",
-  "timeline_page_title": "Historical timeline",
+  "dashboard_page_title": "Public transport operators according to planned trips",
+  "dashboard_page_description": "A graphic display of public transportation rides - ratio of successful actual rides / total rides scheduled. Grouped by bus operators (Egged, Dan, Metropolin etc)",
+  "timeline_page_title": "Trips History",
+  "timeline_page_description": "Displays actual vs scheduled stop times by user-given bus operator, route number & stop name",
   "realtime_map_page_title": "Real time map",
+  "realtime_map_page_description": "Displays all buses locations on map based on user-given date, time & minutes range",
   "gaps_page_title": "Trips that didn't take place",
+  "gaps_page_description": "Displays routes that did not take place according to schedule by user-given bus operator, route number. route & date",
   "gaps_patterns_page_title": "patterns",
+  "gaps_patterns_page_description": "A graphic display of routes performed according to schedule, grouped by time of day\\severity, by user-given bus operator, route number, route & date",
   "singleline_map_page_title": "Map by line",
+  "singleline_map_page_description": "Display of bus route on map by user-given bus operator, route number, route, date & time",
   "choose_datetime": "Date and time",
   "choose_date": "Date",
   "choose_time": "Time",
@@ -35,14 +41,12 @@
   "ride_extra": "🧐 An unplanned trip",
   "ride_duped": "❇️ Double ride",
   "checkbox_only_gaps": "Only gaps",
-  "dashboard_page_title": "Public transport operators according to planned trips",
   "dashboard_tooltip_content": "A GPS is attached to every line in Israel that reports the location of the bus every few moments.\nSo what is a missed trip? This is a trip that was planned, but was not reported to have taken place in the GPS data. You can see it in the app for example, but when you wait at the station, it will never arrive",
   "worst_lines_page_title": "Least Efficient Lines",
   "rides_planned": "planned trips",
   "rides_history": "Trips History",
   "rides_actual": "Trips out",
   "dashboard_page_graph_title": "Exit percentages of total trips by time",
-  "gapspatterns_page_title": "Exit percentages of total trips",
   "from_date": "dated",
   "to_date": "Until",
   "watch_locations_in_range": "View bus locations within a range of",

src/locale/he.json

@@ -1,9 +1,16 @@
 {
-  "realtime_map_explanation": "נתוני מיקום של אוטובוסים שנאספו בזמן אמת",
-  "timeline_page_title": "לוח זמנים היסטורי",
+  "dashboard_page_title": "קיום נסיעות",
+  "dashboard_page_description": "תצוגה גרפית של אחוז הנסיעות שיצאו בפועל מתוך סך הנסיעות המתוכננות, מפולח לפי חברות תחבורה ציבורית (אגד, דן, מטרופולין וכו')",
+  "timeline_page_title": "היסטוריית נסיעות",
+  "timeline_page_description": "תצוגה של זמני עצירה בתחנות לפי חברה מפעילה, מספר קו ותחנה. השוואה בין שעת העצירה בפועל לעומת שעת העצירה המתוכננת",
   "realtime_map_page_title": "מפה בזמן אמת",
-  "gaps_page_title": "נסיעות שלא יצאו",
+  "realtime_map_page_description": "תצוגה של מיקום כל האוטובוסים בתאריך, שעה וטווח הדקות שהוכנסו ע\"י המשתמש",
+  "gaps_page_title": "נסיעות שלא בוצעו",
+  "gaps_page_description": "תצוגה של כל הנסיעות שלא יצאו כמתוכנן לפי חברה מפעילה, קו, מסלול ותאריך",
+  "gaps_patterns_page_title": "דפוסי נסיעות שלא בוצעו",
+  "gaps_patterns_page_description": "תצוגה גרפית של אחוז הנסיעות שבוצעו בהתאם ללוח הזמנים בחלוקה לשעות\\רמת חומרה, לפי חברת אוטובוסים, מספר קו, מסלול ותאריך",
   "singleline_map_page_title": "מפה לפי קו",
+  "singleline_map_page_description": "תצוגה של מסלול קו על מפה ע\"פ נתוני חברת אוטובוסים, קו, מסלול, תאריך ושעה",
   "choose_datetime": "תאריך ושעה",
   "choose_date": "תאריך",
   "choose_time": "שעה",
@@ -34,14 +41,13 @@
   "ride_extra": "נסיעה שלא תוכננה 🧐",
   "ride_duped": "נסיעה כפולה ❇️",
   "checkbox_only_gaps": "רק פערים",
-  "dashboard_page_title": "קיום נסיעות",
   "dashboard_tooltip_content": "על כל קו בישראל מוצמד GPS שמדווח את מיקום האוטובוס כל כמה רגעים.\nאז מה היא נסיעה שלא בוצעה? זאת נסיעה שתוכננה, אבל לא דווח שיצאה בנתוני הGPS. תוכלו לראות אותה באפליקציה למשל, אבל כשתחכו בתחנה, היא לעולם לא תגיע",
   "worst_lines_page_title": "הקווים הגרועים ביותר",
   "rides_planned": "נסיעות שתוכננו",
   "rides_actual": "נסיעות שיצאו",
   "rides_history": "היסטוריית נסיעות",
   "dashboard_page_graph_title": "אחוזי יציאה מסך הנסיעות לפי זמן",
-  "gapspatterns_page_title": "אחוזי יציאה מסך הנסיעות",
+
   "from_date": "מתאריך",
   "to_date": "עד תאריך",
   "watch_locations_in_range": "צפה במיקומי אוטובוסים בטווח של",
@@ -72,7 +78,7 @@
   "innovation_authority": "רשות החדשנות",
   "migdal_company": "“מגדל בקהילה“",
   "and_smaller_donors": "ותרומות קטנות נוספות של ידידי ואוהדי הסדנא.",
-  "gaps_patterns_page_title": "דפוסי נסיעות שלא יצאו",
+
   "github_link": "למעבר אל GitHub",
   "dark_mode_tooltip": "עבור למצב חשוך",
   "light_mode_tooltip": "עבור למצב בהיר",

src/pages/dashboard/DashboardPage.tsx

@@ -32,9 +32,9 @@ const DashboardPage = () => {
   return (
     <PageContainer>
       <Title className="page-title" level={3}>
-        ביצועי תחבורה ציבורית
+        {t('dashboard_page_title')}
       </Title>
-      <Alert message="תפקוד תחבורה ציבורית לפי פרמטרים שונים" type="info" />
+      <Alert message={t('dashboard_page_description')} type="info" />
       {startDate > endDate ? (
         <Alert closable showIcon message={t('bug_date_alert')} type="error" />
       ) : null}

src/pages/gaps/index.tsx

@@ -118,9 +118,9 @@ const GapsPage = () => {
   return (
     <PageContainer>
       <Title className="page-title" level={3}>
-        נסיעות שלא יצאו
+        {t('gaps_page_title')}
       </Title>
-      <Alert message="רשימת נסיעות שלא בוצעו" type="info" />
+      <Alert message={t('gaps_page_description')} type="info" />
       <Grid container spacing={2} sx={{ maxWidth: INPUT_SIZE }}>
         {/* choose date */}
         <Grid xs={4}>

src/pages/gapsPatterns/GapsPatternsPage.tsx

@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from 'react'
 import './GapsPatternsPage.scss'
 import { Moment } from 'moment'
-import { Skeleton, Spin, Radio, Typography, RadioChangeEvent, Alert } from 'antd'
+import { Skeleton, Spin, Radio, Typography, RadioChangeEvent, Alert, Space } from 'antd'
 import moment from 'moment/moment'
 import { useDate } from '../components/DateTimePicker'
 import { PageContainer } from '../components/PageContainer'
@@ -174,7 +174,10 @@ const GapsPatternsPage = () => {
 
   return (
     <PageContainer>
-      <Title level={3}>{t('gapspatterns_page_title')}</Title>
+      <Title level={3}>{t('gaps_patterns_page_title')}</Title>
+      <Space direction="vertical" size="middle" style={{ marginBottom: '22px' }}>
+        <Alert message={t('gaps_patterns_page_description')} type="info" />
+      </Space>
       {startDate > endDate ? (
         <Alert closable showIcon message={t('bug_date_alert')} type="error" />
       ) : null}

src/pages/historicTimeline/index.tsx

@@ -140,9 +140,9 @@ const TimelinePage = () => {
 
   return (
     <PageContainer>
-      <Title level={3}>{t('rides_history')}</Title>
+      <Title level={3}>{t('timeline_page_title')}</Title>
       <Space direction="vertical" size="middle" style={{ marginBottom: '22px' }}>
-        <Alert message={t('timestamp_list')} type="info" />
+        <Alert message={t('timeline_page_description')} type="info" />
       </Space>
 
       <Grid container spacing={2} sx={{ maxWidth: INPUT_SIZE }}>

src/pages/realtimeMap/index.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'
 import { MapContainer, Marker, Polyline, Popup, TileLayer, useMap } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-cluster'
 import { useTranslation } from 'react-i18next'
-import { Button, Spin, Typography } from 'antd'
+import { Button, Spin, Typography, Alert, Space } from 'antd'
 import { ExpandAltOutlined } from '@ant-design/icons'
 import moment from 'moment'
 import getAgencyList, { Agency } from 'src/api/agencyList'
@@ -97,11 +97,13 @@ export default function RealtimeMapPage() {
   return (
     <PageContainer className="map-container">
       <Title className="page-title" level={3}>
-        {t('realtime_map_explanation').slice(0, 25)}
+        {t('realtime_map_page_title')}
       </Title>
       <Grid container spacing={2} sx={{ maxWidth: INPUT_SIZE }}>
         <Grid xs={12} className="hideOnMobile">
-          <Label text={t('realtime_map_explanation')} />
+          <Space direction="vertical" size="middle" style={{ marginBottom: '22px' }}>
+            <Alert message={t('realtime_map_page_description')} type="info" />
+          </Space>
         </Grid>
         {/* from date */}
         <Grid xs={2} className="hideOnMobile">

src/pages/singleLineMap/index.tsx

@@ -20,6 +20,7 @@ import { FilterPositionsByStartTimeSelector } from '../components/FilterPosition
 import { PageContainer } from '../components/PageContainer'
 import { MapWithLocationsAndPath } from '../components/map-related/MapWithLocationsAndPath'
 import Title from 'antd/es/typography/Title'
+import { Space, Alert } from 'antd'
 
 const SingleLineMapPage = () => {
   const { search, setSearch } = useContext(SearchContext)
@@ -118,8 +119,11 @@ const SingleLineMapPage = () => {
   return (
     <PageContainer className="map-container">
       <Title className="page-title" level={3}>
-        {t('single_line_map_title')}
+        {t('singleline_map_page_title')}
       </Title>
+      <Space direction="vertical" size="middle" style={{ marginBottom: '22px' }}>
+        <Alert message={t('realtime_map_page_description')} type="info" />
+      </Space>
       <Grid container spacing={2} sx={{ maxWidth: INPUT_SIZE }}>
         {/* choose date*/}
         <Grid xs={4} className="hideOnMobile">

tests/clearButton.spec.ts

@@ -1,5 +1,7 @@
 import { test, expect, urlMatcher, setBrowserTime, getPastDate } from './utils'
 import type { Locator, Page } from '@playwright/test'
+import i18next from 'i18next'
+import Backend from 'i18next-fs-backend'
 
 import Selectors from './SelectorsModel'
 
@@ -21,7 +23,14 @@ async function selectLineNumberAndRoute(page: Page, lineNumber: Locator, route:
 }
 
 test.describe('clearButton functionality', () => {
-  test.beforeEach(({ page, advancedRouteFromHAR }) => {
+  test.beforeEach(async ({ page, advancedRouteFromHAR }) => {
+    await i18next.use(Backend).init({
+      lng: 'he',
+      backend: {
+        loadPath: 'src/locale/{{lng}}.json',
+      },
+    })
+
     advancedRouteFromHAR('tests/HAR/clearbutton.har', {
       updateContent: 'embed',
       update: false,
@@ -36,7 +45,7 @@ test.describe('clearButton functionality', () => {
     test('after clear `line-number` value - should hide `stop` & `route` inputs', async ({
       page,
     }) => {
-      await visitPage(page, 'לוח זמנים היסטורי', /timeline/)
+      await visitPage(page, i18next.t('timeline_page_title'), /timeline/)
       await page.getByLabel('תאריך').fill(getPastDate().toLocaleDateString('en-GB'))
       const { operator, lineNumber, route, stop } = new Selectors(page)
 
@@ -50,7 +59,7 @@ test.describe('clearButton functionality', () => {
       await expect(stop).not.toBeVisible()
     })
     test('after clear `route` input value - should hide `stop` input', async ({ page }) => {
-      await visitPage(page, 'לוח זמנים היסטורי', /timeline/)
+      await visitPage(page, i18next.t('timeline_page_title'), /timeline/)
       const { operator, lineNumber, route, stop } = new Selectors(page)
       await page.getByLabel('תאריך').fill(getPastDate().toLocaleDateString('en-GB'))
 
@@ -66,7 +75,7 @@ test.describe('clearButton functionality', () => {
     test('after clear LineNumber input value - stop and route inputs should be hidden', async ({
       page,
     }) => {
-      await visitPage(page, 'נסיעות שלא יצאו', /gaps/)
+      await visitPage(page, i18next.t('gaps_page_title'), /gaps/)
       await page.getByLabel('תאריך').fill(getPastDate().toLocaleDateString('en-GB'))
       const { operator, lineNumber, route, stop } = new Selectors(page)
 
@@ -81,7 +90,7 @@ test.describe('clearButton functionality', () => {
       await expect(stop).not.toBeVisible()
     })
     test('after clear route input value - stop input should be hidden', async ({ page }) => {
-      await visitPage(page, 'נסיעות שלא יצאו', /gaps/)
+      await visitPage(page, i18next.t('gaps_page_title'), /gaps/)
       const { operator, lineNumber, route, stop } = new Selectors(page)
       await page.getByLabel('תאריך').fill(getPastDate().toLocaleDateString('en-GB'))
 
@@ -97,7 +106,7 @@ test.describe('clearButton functionality', () => {
     test('after clear LineNumber input value - stop and route inputs should be hidden', async ({
       page,
     }) => {
-      await visitPage(page, 'דפוסי נסיעות שלא יצאו', /gaps_patterns/)
+      await visitPage(page, i18next.t('gaps_patterns_page_title'), /gaps_patterns/)
       await page.getByLabel('התחלה').fill(getPastDate().toLocaleDateString('en-GB'))
       await page.getByLabel('סיום').fill(getPastDate().toLocaleDateString('en-GB'))
       const { operator, lineNumber, route, stop } = new Selectors(page)
@@ -111,7 +120,7 @@ test.describe('clearButton functionality', () => {
       await expect(stop).not.toBeVisible()
     })
     test('after clear route input value - stop input should be hidden', async ({ page }) => {
-      await visitPage(page, 'דפוסי נסיעות שלא יצאו', /gaps_patterns/)
+      await visitPage(page, i18next.t('gaps_patterns_page_title'), /gaps_patterns/)
       await page.getByLabel('התחלה').fill(getPastDate().toLocaleDateString('en-GB'))
       await page.getByLabel('סיום').fill(getPastDate().toLocaleDateString('en-GB'))
       const { operator, lineNumber, route, stop } = new Selectors(page)

tests/menu.spec.ts

@@ -15,9 +15,9 @@ test('menu', async ({ page }) => {
   await expect(page.locator('h1.sidebar-logo')).toContainText('דאטאבוס')
   const menuItemsInOrder = [
     'קיום נסיעות',
-    'לוח זמנים היסטורי',
-    'נסיעות שלא יצאו',
-    'דפוסי נסיעות שלא יצאו',
+    'היסטוריית נסיעות',
+    'נסיעות שלא בוצעו',
+    'דפוסי נסיעות שלא בוצעו',
     'מפה בזמן אמת',
     'מפה לפי קו',
     'אודות',

tests/timeline.spec.ts

@@ -1,10 +1,19 @@
 import TimelinePage from '../src/test_pages/TimelinePage'
 import { getPastDate, test, urlMatcher } from './utils'
+import i18next from 'i18next'
+import Backend from 'i18next-fs-backend'
 
 test.describe('Timeline Page Tests', () => {
   let timelinePage: TimelinePage
 
   test.beforeEach(async ({ page, advancedRouteFromHAR }) => {
+    await i18next.use(Backend).init({
+      lng: 'he',
+      backend: {
+        loadPath: 'src/locale/{{lng}}.json',
+      },
+    })
+
     await advancedRouteFromHAR('tests/HAR/timeline.har', {
       updateContent: 'embed',
       update: false,
@@ -15,7 +24,7 @@ test.describe('Timeline Page Tests', () => {
     timelinePage = new TimelinePage(page) // Initialize timelinePage before each test
     await timelinePage.setFakeTime(getPastDate())
     await page.goto('/')
-    await page.getByText('לוח זמנים היסטורי', { exact: true }).click()
+    await page.getByText(i18next.t('timeline_page_title'), { exact: true }).click()
     await page.getByRole('progressbar').waitFor({ state: 'hidden' })
     await timelinePage.validatePageUrl(/timeline/)
   })