Merge remote-tracking branch 'origin/fix-menu-mobile' into fix-menu-m…

…obile

.prettierignore

@@ -1 +1,2 @@
-**/generated/*
+**/generated/*
+README.md

README.md

@@ -24,8 +24,8 @@ This app is created by the volunteers of [Public Knowledge Workshop](https://www
 - `yarn start`
 
 ### testing the project:
-- running the tests - `yarn playwright test`
-- running the tests with UI - `yarn playwright test --ui`
+- running the tests - `yarn test`
+- running the tests with UI - `yarn test:ui`
 - additional helpful flags - https://playwright.dev/docs/test-cli
 
 ### useful resources:

package.json

@@ -30,7 +30,7 @@
     "sass": "^1.58.3",
     "styled-components": "^5.3.5",
     "stylis-plugin-rtl": "^2.1.1",
-    "typescript": "^4.7.4",
+    "typescript": "^5.2.2",
     "underscore.string": "^3.3.6",
     "usehooks-ts": "^2.9.1",
     "vite": "^4.4.9",
@@ -45,8 +45,8 @@
     "start": "vite",
     "build": "tsc && vite build",
     "serve": "vite preview",
-    "test": "echo \"no default test defined. to run playwright test, use `npm run test:playwright`\"",
-    "test:playwright": "playwright test",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
     "lint": "eslint . --max-warnings 0",
     "lint:fix": "eslint . --fix",
     "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"

src/pages/GapsPage.tsx

@@ -19,6 +19,7 @@ import { DateSelector } from './components/DateSelector'
 import { FormControlLabel, Switch } from '@mui/material'
 import Grid from '@mui/material/Unstable_Grid2' // Grid version 2
 import { INPUT_SIZE } from 'src/resources/sizes'
+import DisplayGapsPercentage from './components/DisplayGapsPercentage'
 
 function formatTime(time: Moment) {
   return time.format(TEXTS.time_format)
@@ -38,6 +39,14 @@ function formatStatus(all: GapsList, gap: Gap) {
   return TEXTS.ride_extra
 }
 
+function getGapsPercentage(gaps: GapsList | undefined): number | undefined {
+  const ridesInTime = gaps?.filter((gap) => formatStatus([], gap) === TEXTS.ride_as_planned)
+  if (!gaps || !ridesInTime) return undefined
+  const ridesInTimePercentage = (ridesInTime?.length / gaps?.length) * 100
+  const allRidesPercentage = 100
+  return allRidesPercentage - ridesInTimePercentage
+}
+
 const Cell = styled.div`
   width: 120px;
 `
@@ -81,6 +90,8 @@ const GapsPage = () => {
       .finally(() => setRoutesIsLoading(false))
   }, [operatorId, lineNumber, timestamp, setSearch])
 
+  const gapsPercentage = getGapsPercentage(gaps)
+
   return (
     <PageContainer>
       <Grid container spacing={2} sx={{ maxWidth: INPUT_SIZE }}>
@@ -153,6 +164,11 @@ const GapsPage = () => {
             }
             label={TEXTS.checkbox_only_gaps}
           />
+          <DisplayGapsPercentage
+            gapsPercentage={gapsPercentage}
+            decentPercentage={5}
+            terriblePercentage={20}
+          />
           <Row>
             <TitleCell>{TEXTS.planned_time}</TitleCell>
             <TitleCell>{TEXTS.planned_status}</TitleCell>

src/pages/components/DisplayGapsPercentage.scss

@@ -0,0 +1,15 @@
+@import '../../resources/variables';
+
+.gaps-percentage-displayed {
+  font-weight: bold;
+  width: 200px;
+  &-great-result {
+    color: $great-result;
+  }
+  &-decent-result {
+    color: $decent-result;
+  }
+  &-terrible-result {
+    color: $terrible-result;
+  }
+}

src/pages/components/DisplayGapsPercentage.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import { TEXTS } from '../../resources/texts'
+import './DisplayGapsPercentage.scss'
+import { Row } from './Row'
+
+function getStatus(percentage: number, decentPercentage: number, terriblePercentage: number) {
+  const moreThanOneHundredPercent = 101
+  const statuses = [
+    {
+      min: -Infinity,
+      status: 'invalid',
+    },
+    {
+      min: 0,
+      status: 'great',
+    },
+    {
+      min: decentPercentage,
+      status: 'decent',
+    },
+    {
+      min: terriblePercentage,
+      status: 'terrible',
+    },
+    {
+      min: moreThanOneHundredPercent,
+      status: 'invalid',
+    },
+  ]
+  return statuses.findLast((status: { min: number; status: string }) => status.min <= percentage)
+    ?.status
+}
+
+function DisplayGapsPercentage({
+  gapsPercentage,
+  decentPercentage,
+  terriblePercentage,
+}: {
+  gapsPercentage: number | undefined
+  decentPercentage: number
+  terriblePercentage: number
+}) {
+  if (!gapsPercentage && gapsPercentage != 0) return <></>
+  const status = getStatus(gapsPercentage, decentPercentage, terriblePercentage)
+  const stylesClass = `gaps-percentage-displayed-${status}-result`
+  const text =
+    status === 'great'
+      ? TEXTS.all_rides_completed
+      : `${Math.floor(gapsPercentage)}% ${TEXTS.missing_rides}`
+
+  return (
+    <Row>
+      <div className={stylesClass}>{text}</div>
+    </Row>
+  )
+}
+export default DisplayGapsPercentage

src/pages/dashboard/DashboardPage.scss

@@ -39,5 +39,25 @@
             height: 400px;
             overflow-y: scroll;
         }
+
+        .tooltip-icon {
+            position: relative;
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: #888;
+            color: #fff;
+            font-size: 14px;
+            cursor: pointer;
+            vertical-align: middle;
+            margin-right: 10px;
+        }
+
+        .tooltip-icon:hover {
+          background-color: #333;
+        }
     }
 }

src/pages/dashboard/DashboardPage.tsx

@@ -1,15 +1,14 @@
 import React, { Fragment, useCallback, useState } from 'react'
 import { useGroupBy } from 'src/api/groupByService'
 import { PageContainer } from '../components/PageContainer'
-import Tooltip from '../components/utils/tooltip/Tooltip'
 import OperatorHbarChart from './OperatorHbarChart/OperatorHbarChart'
 import './DashboardPage.scss'
 import { TEXTS } from 'src/resources/texts'
 import ArrivalByTimeChart from './ArrivalByTimeChart/ArrivalByTimeChart'
 import { DatePicker } from '@mui/x-date-pickers/DatePicker'
 import moment, { Moment } from 'moment'
 import LinesHbarChart from './LineHbarChart/LinesHbarChart'
-import { FormControlLabel, Switch } from '@mui/material'
+import { FormControlLabel, Switch, Tooltip } from '@mui/material'
 import { Label } from 'src/pages/components/Label'
 import OperatorSelector from 'src/pages/components/OperatorSelector'
 
@@ -99,7 +98,10 @@ const DashboardPage = () => {
         <div className="widget">
           <h2 className="title">
             {TEXTS.dashboard_page_title}
-            <Tooltip text={convertLineFeedToHtmlTags(TEXTS.dashboard_tooltip_content)}>
+            <Tooltip
+              title={convertLineFeedToHtmlTags(TEXTS.dashboard_tooltip_content)}
+              placement="left"
+              arrow>
               <span className="tooltip-icon">i</span>
             </Tooltip>
           </h2>

src/resources/texts.tsx

@@ -85,6 +85,8 @@ export const TEXTS = {
   innovation_authority: 'רשות החדשנות',
   migdal_company: '“מגדל בקהילה“',
   and_smaller_donors: 'ותרומות קטנות נוספות של ידידי ואוהדי הסדנא.',
+  all_rides_completed: 'כמעט / כל הנסיעות בוצעו',
+  missing_rides: 'מהנסיעות חסרות',
 }
 
 export const formatted = (text: string, value: string) => text.replace(PLACEHOLDER, value)

src/resources/variables.scss

@@ -4,3 +4,6 @@ $color-active: rgba(95, 91, 255);
 
 $mobile-max-width: 768px;
 
+$great-result: green;
+$decent-result: orange;
+$terrible-result: red;