Merge branch 'dev' into 1020-bug-the-text-in-info-button-is-very-small

data-for-change · Feb 28, 2024 · 2a29e9b · 2a29e9b
2 parents 2fa00e0 + c9c5fa0
commit 2a29e9b
Show file tree

Hide file tree

Showing 20 changed files with 80 additions and 45 deletions.
diff --git a/src/assets/n12Logo.png b/src/assets/n12Logo.png
diff --git a/src/assets/vision_zero_bike.png b/src/assets/vision_zero_bike.png
diff --git a/src/components/molecules/GenericBarChart.tsx b/src/components/molecules/GenericBarChart.tsx
@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 import { ResponsiveContainer, BarChart, LabelList, XAxis, Bar, Tooltip, Legend } from 'recharts';
 import { roseColor, honeyColor, yellowColor, blackColor, whiteColor } from 'style';
-import { Typography } from 'components/atoms';
 import tinycolor from 'tinycolor2';
 
 const colors = [roseColor, honeyColor, yellowColor];
@@ -54,9 +53,8 @@ const CustomizedLabel = (props: CustomizedLabelProps) => {
 const BarChartContainer: FC<IBarChartBaseProps> = ({ data, textLabel, subtitle, children, isStacked }) => {
   return (
     <>
-      {!subtitle && <Typography.Body3>{textLabel}</Typography.Body3>}
       <ResponsiveContainer>
-        <BarChart data={data} margin={{ bottom: 20 }}>
+        <BarChart data={data}>
           <XAxis
             angle={0}
             interval={0}
@@ -66,7 +64,7 @@ const BarChartContainer: FC<IBarChartBaseProps> = ({ data, textLabel, subtitle,
             style={{ fill: blackColor }}
           />
           <Tooltip />
-          {isStacked && <Legend verticalAlign="top" align="right" iconType="circle" height={35} />}
+          {isStacked && <Legend verticalAlign="bottom" align="right" iconType="circle" height={5} />}
           {children}
         </BarChart>
       </ResponsiveContainer>

diff --git a/src/components/molecules/NewsFlashComp.tsx b/src/components/molecules/NewsFlashComp.tsx
@@ -14,6 +14,7 @@ import LocationApprove from 'components/organisms/LocationApproveWindow';
 import {locationQualificationOptions} from 'components/organisms/LocationApproveWindow';
 import { INewsFlash } from 'models/NewFlash';
 import {useParams} from 'react-router-dom'
+import { observer } from "mobx-react-lite";
 
 const ICON_HEIGHT = 18
 
@@ -38,7 +39,6 @@ const NewsFlashComp: FC<IProps> = ({ news }) => {
   const locale = useLocale();
   const { userStore, settingsStore } = store;
   const { t } = useTranslation();
-  const userAllowedChange = userStore.isUserAuthenticated && userStore.isAdmin;
 
   function getVerificationIcon(verificationText: string) {
     if (verificationText === locationQualificationOptions.REJECTED) {
@@ -58,16 +58,16 @@ const NewsFlashComp: FC<IProps> = ({ news }) => {
   const criticalIcon = news.critical && <CriticalIcon className={classes.icon} />;
   const {newsId} = useParams()
   const newsID = newsId ? parseInt(newsId) : '' 
-
   const className = news.id === newsID ? classes.activeNewsFlash : '';
-
   const date = news.date == null ? '' : dateFormat(new Date(news.date.replace(/-/g, '/')), locale);
   const handleLocationEditorOpen = () => setOpen(true);
   const handleLocationEditorClose = () => setOpen(false);
-  const locationChangeButton = userAllowedChange &&
+
+  const locationChangeButton = userStore.isUserAdmin &&
     <Button.Small onClick={handleLocationEditorOpen} buttonHeight={ICON_HEIGHT}>
       {t('changeLocationButton')}
     </Button.Small>
+
   return (
     <Link key={news.id} to={`${settingsStore.currentLanguageRouteString}/newsflash/${news.id}`}>
       <Box border={1} borderColor={silverSmokeColor} p={1} className={className}>
@@ -84,8 +84,7 @@ const NewsFlashComp: FC<IProps> = ({ news }) => {
       <LocationApprove isOpen={isOpen} onClose={handleLocationEditorClose}
                        newFlashTitle={date.concat(", ", news.display_source)} news={news} />
     </Link>
-
   );
 }
 
-export default NewsFlashComp;
+export default observer(NewsFlashComp);
diff --git a/src/components/molecules/card/AnyWayCard.tsx b/src/components/molecules/card/AnyWayCard.tsx
@@ -122,7 +122,7 @@ const AnyWayCard: FC<IProps> = ({
       <AnyWayButton className={classes.button} disableRipple={true} onClick={imgDownloadHandler}>
         <GetAppOutlinedIcon />
       </AnyWayButton>
-      <AnyWayButton className={classes.button} disableRipple={true} onClick={() => {handleCardEditorOpen('CardEditor')}}>
+      <AnyWayButton className={classes.button} disableRipple={true} onClick={() => { handleCardEditorOpen('CardEditor') }}>
         <SettingsOverscanIcon />
       </AnyWayButton>
       {information && (
@@ -134,10 +134,10 @@ const AnyWayCard: FC<IProps> = ({
           </Tooltip>
         </Box>
       )}
-      {transcription?(
-        <AnyWayButton className={classes.button} disableRipple={true} onClick={() => {handleCardEditorOpen('TextBox') }}>
+      {transcription ? (
+        <AnyWayButton className={classes.button} disableRipple={true} onClick={() => { handleCardEditorOpen('TextBox') }}>
           <TitleIcon />
-        </AnyWayButton>):null}
+        </AnyWayButton>) : null}
     </>
   );
   const refFn = (element: HTMLDivElement) => {
@@ -160,7 +160,8 @@ const AnyWayCard: FC<IProps> = ({
               <CardHeader
                 orgIconPath={organizationData?.path}
                 variant={variant.header}
-                text={subtitle ? `${title} ${subtitle}` : title}
+                title={title}
+                subtitle={subtitle}
                 road={roadNumber}
               />
             </Box>

diff --git a/src/components/molecules/card/CardHeader.tsx b/src/components/molecules/card/CardHeader.tsx
@@ -6,7 +6,6 @@ import LamasImage from 'assets/cbs.png';
 import AnywayImage from 'assets/anyway.png';
 import { Typography, Logo } from 'components/atoms';
 import { silverSmokeColor, opacity80percent } from 'style/';
-import { splitTextHeader } from 'utils/string.utils';
 
 const useStyles = makeStyles({
   wrapper: {
@@ -37,14 +36,14 @@ const useStyles = makeStyles({
 
 interface IProps {
   variant: HeaderVariant;
-  text: string | undefined;
+  title: string | undefined;
+  subtitle: string | undefined;
   road: number;
   orgIconPath?: string;
 }
-const CardHeader: FC<IProps> = ({ variant, text, road,orgIconPath }) => {
+const CardHeader: FC<IProps> = ({ variant, title, subtitle, road,orgIconPath }) => {
   const classes = useStyles();
   let headerContent = null;
-  const headerText = splitTextHeader(text);
   const roadNumberComp: JSX.Element | null = road ? <RoadNumberImage roadNumber={road} /> : null;
 
   switch (variant) {
@@ -56,10 +55,10 @@ const CardHeader: FC<IProps> = ({ variant, text, road,orgIconPath }) => {
           <Box display="flex" justifyContent="center" px={2} className={classes.textWrapper}>
             <Box display="flex" flexDirection="column">
               { variant === HeaderVariant.Centered &&
-                <>
-                <Typography.Body1>{headerText?.textLine1}</Typography.Body1>
-                <Typography.Body1>{headerText?.textLine2}</Typography.Body1>
-                </>
+                <Box textAlign="center">
+                  <Typography.Title2 bold>{title}</Typography.Title2>
+                  <Typography.Body2>{subtitle}</Typography.Body2>
+                </Box>
               }
             </Box>
           </Box>
@@ -73,7 +72,7 @@ const CardHeader: FC<IProps> = ({ variant, text, road,orgIconPath }) => {
             {roadNumberComp}
           </Box>
           <Box textAlign="center" px={2} className={classes.label}>
-            <Typography.Body1>{text}</Typography.Body1>
+            <Typography.Body1>{subtitle ? `${title} ${subtitle}` : title}</Typography.Body1>
           </Box>
         </Box>
       );

diff --git a/src/components/molecules/widgets/CountByYearBarWidget.tsx b/src/components/molecules/widgets/CountByYearBarWidget.tsx
@@ -11,7 +11,9 @@ interface IProps {
 const CountByYearBarWidget: FC<IProps> = ({ data, editorBarOptions }) => {
   const { text } = data;
   const multiBarSeries = createBarWidget(data, editorBarOptions)
-  return <MultiBarChart isStacked={true} isPercentage={false} data={multiBarSeries} textLabel={text.title}
+  return <MultiBarChart isStacked={true} isPercentage={false} data={multiBarSeries}
+                        textLabel={text.title}
+                        subtitle={text.subtitle}
                         editorBarOptions={editorBarOptions} />;
 };
 export default CountByYearBarWidget;
diff --git a/src/components/molecules/widgets/CountInjuredByYearBarWidget.tsx b/src/components/molecules/widgets/CountInjuredByYearBarWidget.tsx
@@ -12,7 +12,9 @@ interface IProps {
 const CountInjuredByYearBarWidget: FC<IProps> = ({ data, editorBarOptions }) => {
   const { text } = data;
   const multiBarSeries = createBarWidget(data, editorBarOptions);
-  return <MultiBarChart isStacked={true} isPercentage={false} data={multiBarSeries} textLabel={text.title}
+  return <MultiBarChart isStacked={true} isPercentage={false} data={multiBarSeries}
+                        textLabel={text.title}
+                        subtitle={text.subtitle}
                         editorBarOptions={editorBarOptions} />;
 };
 export default CountInjuredByYearBarWidget;
diff --git a/src/components/molecules/widgets/HeadOnCollisionsComparisonWidget.tsx b/src/components/molecules/widgets/HeadOnCollisionsComparisonWidget.tsx
@@ -69,8 +69,8 @@ const HeadOnCollisionsComparisonWidget: FC<IProps> = ({ data, segmetText, usePer
   const roadNumberSegment: string = ` ${t('onUrban.route')} ${widgetsStore.newsFlashWidgetsMetaRoadNumber}`;
   const descSegment: string = roadNumberSegment == null ? '' : segmetText.substr(roadNumberSegment.length);
   return (
-    <Box height={'100%'} display="flex" flexDirection="column" mr={'80px'}>
-      <Box className={classes.primaryContent}>
+    <Box height={'100%'} display="flex" flexDirection="column" mr={'25px'}>
+      <Box className={classes.primaryContent} mt={'28px'}>
         <Box className={classes.primaryDesc}>
           <Box className={classes.textHighlight}>
             <Typography.Body2>{roadNumberSegment == null ? null : roadNumberSegment}</Typography.Body2>

diff --git a/src/components/molecules/widgets/WidgetWrapper.tsx b/src/components/molecules/widgets/WidgetWrapper.tsx
@@ -21,6 +21,7 @@ import {
 } from 'models/WidgetData';
 import visionZeroImage from 'assets/vision_zero_2_plus_1.jpg';
 import vision_zero_10_50_90 from 'assets/vision_zero_10_50_90.png';
+import vision_zero_bike from 'assets/vision_zero_bike.png';
 import AccidentsCountByHourBarWidget from './AccidentsCountByHourBarWidget';
 import MostSevereAccidentsMapWidget from './MostSevereAccidentsMapWidget';
 import MostSevereAccidentsTableWidget from './MostSevereAccidentsTableWidget';
@@ -181,6 +182,10 @@ const WidgetWrapper: FC<IProps> = ({ widget, locationText, sizeOptions, editorBa
       widgetComponent = <StaticImageViewWidget data={{items:{image_src:vision_zero_10_50_90},text:{}} as IWidgetVisionZeroImageData} />;
       break;
     }
+    case WidgetName.vision_zero_bike: {
+      widgetComponent = <StaticImageViewWidget data={{items:{image_src:vision_zero_bike},text:{}} as IWidgetVisionZeroImageData} />;
+      break;
+    }
     case WidgetName.top_road_segments_accidents_per_km: {
       widgetComponent = (
         <TopRoadSegmentsAccidentsPerKm data={data as IWidgetTopRoadSegmentsAccidentsPerKm} segmentText={locationText} />

diff --git a/src/components/organisms/CardEditorDialog.tsx b/src/components/organisms/CardEditorDialog.tsx
@@ -107,7 +107,8 @@ const CardEditor: FC<IProps> = ({ isOpen, onClose, widgetName, text }) => {
             actionButtons={false}
             sizeOptions={sizeOptions}
             dateComment={dateComment}
-            title={text}
+            title={widget?.data?.text?.title}
+            subtitle={widget?.data?.text?.subtitle}
           >
             <MetaTag>{widgetName}</MetaTag>
             <ErrorBoundary>{widgetComponent}</ErrorBoundary>

diff --git a/src/const/cards.const.ts b/src/const/cards.const.ts
@@ -1,20 +1,28 @@
 import { WidgetName } from 'models/WidgetName';
 import  orYarokLogo  from 'assets/greenlight.png';
+import n12Logo from 'assets/n12Logo.png';
 
-// cards is this least will be avaiaable for operation environments (all non-staging environments)
+// cards in this list will be available for operation environments (all non-staging environments)
 export const operationalCards: WidgetName[] = [
   WidgetName.accident_count_by_severity,
   WidgetName.most_severe_accidents_table,
   WidgetName.most_severe_accidents,
   WidgetName.head_on_collisions_comparison_percentage,
   WidgetName.vision_zero_2_plus_1,
+  WidgetName.vision_zero_10_50_90,
+  WidgetName.vision_zero_bike,
   WidgetName.injured_count_by_severity,
-  WidgetName.accidents_heat_map
+  WidgetName.accidents_heat_map,
+  WidgetName.accident_count_by_accident_year,
+  WidgetName.injured_count_by_accident_year,
+  // WidgetName.accident_count_by_driver_type,
+  WidgetName.accident_count_by_day_night
 ];
 
 export type OrgLogoData =  {key : string, path:string} ;
 
-export const logosSourceMap  : [OrgLogoData] = [
-  {key:'or_yarok',path:orYarokLogo}
+export const logosSourceMap  : OrgLogoData[] = [
+  {key: 'or_yarok', path: orYarokLogo},
+  {key: 'n12', path: n12Logo},
 ]
 
diff --git a/src/const/generalConst.ts b/src/const/generalConst.ts
@@ -25,8 +25,7 @@ export const REMOVE_USER_FROM_ORG_URL = `${authServerUrl}/user/remove_user_from_
 AUTH_LOGIN_GOOGLE_URL.searchParams.append('redirect_url', `${window.location.origin}${REDIRECT_ROUTE!}`);
 
 //function return api key depends on the env it running on
-// export const mapApiKey = process.env.REACT_APP_GOOGLE_MAP_KEY ? process.env.REACT_APP_GOOGLE_MAP_KEY : '';
-export const mapApiKey = 'AIzaSyCfluirCgaQ769osh7560kST3Yo0eQIqg8';
+export const mapApiKey = process.env.REACT_APP_GOOGLE_MAP_KEY ? process.env.REACT_APP_GOOGLE_MAP_KEY : '';
 
 export const showDemoCards = process.env.REACT_APP_SHOW_DEMO_CARDS === 'true';
 

diff --git a/src/index.css b/src/index.css
@@ -48,3 +48,8 @@ svg {
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
+
+/* Add left padding for legend icons (for hebrew compatibility) */
+.recharts-legend-item-text {
+  padding-right: 5px;
+}
diff --git a/src/models/WidgetData.ts b/src/models/WidgetData.ts
@@ -185,6 +185,7 @@ export interface IWidgetMultiBarData extends IWidgetDataBase {
   items: MultiSeriesDataItems[];
   text: {
     title?: string;
+    subtitle?: string;
     labels_map: LabelsMap;
   };
 }

diff --git a/src/models/WidgetName.ts b/src/models/WidgetName.ts
@@ -14,6 +14,7 @@ export enum WidgetName {
   head_on_collisions_comparison_percentage = 'head_on_collisions_comparison_percentage',
   vision_zero_2_plus_1 = 'vision_zero_2_plus_1',
   vision_zero_10_50_90 = 'vision_zero_10_50_90',
+  vision_zero_bike = 'vision_zero_bike',
   top_road_segments_accidents_per_km = 'top_road_segments_accidents_per_km',
   accident_count_by_road_light = 'accident_count_by_road_light',
   accident_count_by_driver_type = 'accident_count_by_driver_type',

diff --git a/src/services/data.verification/data.verification.ts b/src/services/data.verification/data.verification.ts
@@ -173,6 +173,14 @@ export const verifiedWidgetData = (widget: any) => {
       isValid = validString(items.image_src);
       break;
     }
+    case 'vision_zero_10_50_90': {
+      isValid = validString(items.image_src);
+      break;
+    }
+    case 'vision_zero_bike': {
+      isValid = validString(items.image_src);
+      break;
+    }
     default: {
       isValid = false;
     }

diff --git a/src/services/news.data.service.ts b/src/services/news.data.service.ts
@@ -64,14 +64,14 @@ export function updateNews(newsId: number, newLocationQualification: any,
   data.push(`newsflash_location_qualification=${newLocationQualification}`)
   if (gpsLocation) {
     data.push(`road_segment_name=${gpsLocation.road_segment_name}`)
-    // data.push(`road1=${gpsLocation.road1}`) TODO: uncomment when option added
+    data.push(`road1=${gpsLocation.road1}`)
   } else if (streetLocation) {
-    data.push(`yishuv_name=${streetLocation.street}`)
-    data.push(`street1_hebrew=${streetLocation.city}`)
+    data.push(`yishuv_name=${streetLocation.city.yishuv_name}`)
+    data.push(`street1_hebrew=${streetLocation.street.street_hebrew}`)
   }
-  const url = `${NEWS_FLASH_API}?${newsId}`;
+  const url = `${NEWS_FLASH_API}/${newsId}?${data.join('&')}`;
   axios
-    .put(url)
+    .patch(url)
     .then((res) => res.data)
     .catch(onErrorFetchNewsFlash)
 }
diff --git a/src/services/widgets.style.service.ts b/src/services/widgets.style.service.ts
@@ -37,16 +37,17 @@ const widgetVariants: { [index: string]: CardVariant } = {
     footer: FooterVariant.LogoWithRange,
   },
   [WidgetName.accident_count_by_accident_type]: { header: HeaderVariant.Centered, footer: FooterVariant.Logo },
-  [WidgetName.accident_count_by_accident_year]: { header: HeaderVariant.Logo, footer: FooterVariant.None },
-  [WidgetName.injured_count_by_accident_year]: { header: HeaderVariant.Logo, footer: FooterVariant.None },
+  [WidgetName.accident_count_by_accident_year]: { header: HeaderVariant.Centered, footer: FooterVariant.LogoWithRange },
+  [WidgetName.injured_count_by_accident_year]: { header: HeaderVariant.Centered, footer: FooterVariant.LogoWithRange },
   [WidgetName.accident_count_by_day_night]: { header: HeaderVariant.Centered, footer: FooterVariant.LogoWithRange },
-  [WidgetName.head_on_collisions_comparison]: { header: HeaderVariant.Label, footer: FooterVariant.LogoWithRange },
+  [WidgetName.head_on_collisions_comparison]: { header: HeaderVariant.Centered, footer: FooterVariant.LogoWithRange },
   [WidgetName.head_on_collisions_comparison_percentage]: {
-    header: HeaderVariant.Label,
+    header: HeaderVariant.Centered,
     footer: FooterVariant.LogoWithRange,
   },
   [WidgetName.vision_zero_2_plus_1]: { header: HeaderVariant.None, footer: FooterVariant.LogoWithRange },
-  [WidgetName.vision_zero_10_50_90]:{header: HeaderVariant.None, footer: FooterVariant.LogoWithRange},
+  [WidgetName.vision_zero_10_50_90]: { header: HeaderVariant.None, footer: FooterVariant.LogoWithRange },
+  [WidgetName.vision_zero_bike]: { header: HeaderVariant.None, footer: FooterVariant.LogoWithRange },
   [WidgetName.top_road_segments_accidents_per_km]: {
     header: HeaderVariant.Centered,
     footer: FooterVariant.LogoWithRange,
@@ -58,6 +59,7 @@ const widgetVariants: { [index: string]: CardVariant } = {
     header: HeaderVariant.Centered,
     footer: FooterVariant.LogoWithRange,
   },
+  [WidgetName.accidents_heat_map]: { header: HeaderVariant.Centered, footer: FooterVariant.LogoWithRange },
 };
 
 export function getWidgetVariant(widgetName: string) {

diff --git a/src/store/user.store.ts b/src/store/user.store.ts
@@ -56,6 +56,10 @@ export default class UserStore {
     return this.userInfo?.data.organizations;
   }
 
+  get isUserAdmin(){
+    return this.isUserAuthenticated && this.isAdmin;
+  }
+
   get usersManagementTableData(): any {
     return this.usersInfoList?.map((user) => ({
       name: `${user.first_name} ${user.last_name}`,