feat: add page descriptions

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": "לוח זמנים היסטורי",
-  "realtime_map_page_title": "מפה בזמן אמת",
-  "gaps_page_title": "נסיעות שלא יצאו",
+  "dashboard_page_title": "ביצועי תחבורה ציבורית",
+  "dashboard_page_description": "תצוגה גרפית של אחוז הנסיעות שיצאו בפועל מתוך סך הנסיעות המתוכננות, מפולח לפי חברות תחבורה ציבורית (אגד, דן, מטרופולין וכו')",
+  "timeline_page_title": "היסטוריית נסיעות",
+  "timeline_page_description": "תצוגה של זמני עצירה בתחנות לפי חברה מפעילה, מספר קו ותחנה. השוואה בין שעת העצירה בפועל לעומת שעת העצירה המתוכננת",
+  "realtime_map_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, Path } from '../components/map-related/MapWithLocationsAndPath'
 import Title from 'antd/es/typography/Title'
+import { Space, Alert } from 'antd'
 
 const SingleLineMapPage = () => {
   const { search, setSearch } = useContext(SearchContext)
@@ -97,8 +98,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

@@ -143,7 +143,7 @@ test.describe('clear button functionality at SingleLineMapPage', () => {
 })
 test.describe('clear button functionality at RealtimeMapPage', () => {
   test('after clear the `minutes` input - it should has value equals to `1`', async ({ page }) => {
-    await visitPage(page, 'מפה בזמן אמת', /map/)
+    await visitPage(page, 'מפת אוטובוסים בזמן אמת', /map/)
     const minutes = page.getByLabel('דקות')
     let getValueAttribute = await minutes.getAttribute('value')
     if (!getValueAttribute) return test.fail()

tests/menu.spec.ts

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

tests/realtimemap.spec.ts

@@ -2,7 +2,7 @@ import { test } from './utils'
 
 test('realtime-map page', async ({ page }) => {
   await page.goto('/')
-  await page.getByText('מפה בזמן אמת', { exact: true }).click()
+  await page.getByText('מפת אוטובוסים בזמן אמת', { exact: true }).click()
   await page.waitForURL(/map/)
   await page.getByRole('progressbar').waitFor({ state: 'hidden' })
   await page.getByLabel('תאריך').fill(new Date().toLocaleDateString('en-GB'))