merge dev into master

src/components/molecules/ImageView.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { IWidgetVisionZeroImageData } from 'models/WidgetData';
-import visionZeroImage from 'assets/vision_zero_2_plus_1.jpg';
+
+
 import { makeStyles } from '@material-ui/core';
 
 interface IProps {
@@ -16,16 +17,16 @@ const useStyles = makeStyles(() => ({
   image: {
     borderRadius: '10px',
     border: '1px solid gray',
-    maxWidth: '100%',
-    maxHeight: '100%',
+    width: '100%',
+    height: '100%',
   },
 }));
 const ImageView: FC<IProps> = ({ data }) => {
-  // todo: set image based on data
+
   const classes = useStyles();
   return (
     <div className={classes.root}>
-      <img src={visionZeroImage} className={classes.image} alt="vision zero 2 plus 1" />
+      <img src={data.items.image_src} className={classes.image} alt="vision zero 2 plus 1" />
     </div>
   );
 };

src/components/molecules/card/AnyWayCard.tsx

@@ -37,7 +37,7 @@ interface IProps {
   information?: string;
   organizationData?: OrgLogoData;
   subtitle?: string;
-  BoxText?:string;
+  transcription?:string;
 }
 
 const getSizeFactor = (options: CardSizeOptions | undefined): number => (options?.size ? options.size : DEFAULTE_SIZE);
@@ -79,7 +79,7 @@ const AnyWayCard: FC<IProps> = ({
   information,
   organizationData,
   subtitle,
-  BoxText
+  transcription
 }) => {
   const [element, setElement] = useState({});
   const [isOpen, setOpen] = useState(false);
@@ -107,7 +107,7 @@ const AnyWayCard: FC<IProps> = ({
   switch(widgateOpen){
 
     case 'TextBox':
-      Widget = <TextBox isOpen={isOpen} onClose={handleCardEditorClose} widgetName={widgetName} text={BoxText} />
+      Widget = <TextBox isOpen={isOpen} onClose={handleCardEditorClose} widgetName={widgetName} text={transcription} />
       break 
     case 'CardEditor':
       Widget = <CardEditor isOpen={isOpen} onClose={handleCardEditorClose} widgetName={widgetName} text={title} />
@@ -130,12 +130,12 @@ const AnyWayCard: FC<IProps> = ({
           </Tooltip>
         </Box>
       )}
-       <AnyWayButton className={classes.button} disableRipple={true} onClick={() =>{handleCardEditorOpen('TextBox')}}>
-        <TitleIcon />
-      </AnyWayButton>
+     {transcription?(
+      <AnyWayButton className={classes.button} disableRipple={true} onClick={() =>{handleCardEditorOpen('TextBox')}}>
+      <TitleIcon />
+    </AnyWayButton>):null}
     </>
   );
-
   const refFn = (element: HTMLDivElement) => {
     setElement(element);
     if (getCardRef) {

src/components/molecules/widgets/WidgetWrapper.tsx

@@ -19,6 +19,8 @@ import {
   IWidgetInjuredAccidentsWithPedestrians,
   IWidgetKilledAndInjuredCountPerAgeGroup,
 } from 'models/WidgetData';
+import visionZeroImage from 'assets/vision_zero_2_plus_1.jpg';
+import vision_10_30_90 from 'assets/vision_10_30_90.png';
 import AccidentsCountByHourBarWidget from './AccidentsCountByHourBarWidget';
 import MostSevereAccidentsMapWidget from './MostSevereAccidentsMapWidget';
 import MostSevereAccidentsTableWidget from './MostSevereAccidentsTableWidget';
@@ -170,9 +172,14 @@ const WidgetWrapper: FC<IProps> = ({ widget, locationText, sizeOptions, editorBa
       break;
     }
     case WidgetName.vision_zero_2_plus_1: {
-      widgetComponent = <StaticImageViewWidget data={data as IWidgetVisionZeroImageData} />;
+      widgetComponent = <StaticImageViewWidget data={{items:{image_src:visionZeroImage},text:{}} as IWidgetVisionZeroImageData} />;
       break;
     }
+    case WidgetName.vision_zero_10_30_90: {
+      widgetComponent = <StaticImageViewWidget data={{items:{image_src:vision_10_30_90},text:{}} as IWidgetVisionZeroImageData} />;
+      break;
+    }
+
     case WidgetName.top_road_segments_accidents_per_km: {
       widgetComponent = (
         <TopRoadSegmentsAccidentsPerKm data={data as IWidgetTopRoadSegmentsAccidentsPerKm} segmentText={locationText} />

src/components/organisms/CardEditorDialog.tsx

@@ -8,6 +8,7 @@ import { MetaTag, ErrorBoundary, Typography, Button, Slider } from 'components/a
 import widgetToImage from 'services/to-image.service';
 import { useTranslation } from 'react-i18next';
 import { blueVioletColor } from 'style';
+
 import {initEditorBarOptions, barsWidgetsLabels, barsWidgetsTitle, NUM_OF_BARS} from 'utils/barChart.utils';
 
 interface IProps {

src/components/organisms/TextBox.tsx

@@ -1,23 +1,20 @@
-import React from 'react'
+import React, { useState } from 'react'
 import DialogWithHeader from '../molecules/DialogWithHeader';
 import { AnyWayButton } from 'components/atoms/AnyWayButton';
 import { Box, makeStyles} from '@material-ui/core'
+import CopyImageWhite from 'assets/copyImageWhite.jpeg';
+import CopyImageGrey from 'assets/copyImageGrey.jpeg';
 import { useTranslation } from 'react-i18next';
 import { Typography } from 'components/atoms';
 import { transparent } from 'style';
 
-
 interface IProps {
     isOpen: boolean;
     onClose: () => void;
     widgetName: string;
     text: string | undefined;
 }
 const TextBox: React.FC<IProps> = ({ isOpen,text,onClose}) => {
-
-    console.log('transaction ',text);
-
-
     const useStyles = makeStyles((theme) => ({
         text: {
             position: 'relative', // for meta tags
@@ -40,19 +37,33 @@ const TextBox: React.FC<IProps> = ({ isOpen,text,onClose}) => {
               backgroundColor: transparent,
             },
           },
-        img:{
-            height:'100px',
-            width:'100px'
-        }
-
 
+        copyImg:{
+            height:'70px',
+            width:'70px', 
+        },
+        copyMessage:{
+            color:'blue'
+        }
     }));
 
     const { t } = useTranslation();
+
+    const [copyToClickBoard,SetCopyToClickBoard] = useState(false)    
+    const [copyMessage,SetCopyMessage] = useState('')
+
     const onCloseInitValues = () => {
         onClose();
+        SetCopyMessage('')
+        SetCopyToClickBoard(false)
     }
 
+    const copyHandler = () =>{
+        navigator.clipboard.writeText(text?text:'')
+        SetCopyToClickBoard(true)
+        SetCopyMessage('הטקסט העותק ללוח')
+    }
+
     const classes = useStyles();
 
     return (
@@ -64,8 +75,13 @@ const TextBox: React.FC<IProps> = ({ isOpen,text,onClose}) => {
                     </Typography.Body1>
                 </Box>
                 <Box>
-                    <AnyWayButton onClick={() =>{navigator.clipboard.writeText(text?text:'asdsadasd')}} className={classes.button} >
-                        <img className={classes.img} src="https://play-lh.googleusercontent.com/pcns8ys8bh1GJaCc0K2vSMSqJ_1cjWWRECAoXYgFN5fDJxAM5ZBHWuJqFRnMR5NVRlJp" alt="" />
+                    <AnyWayButton onClick={copyHandler} className={classes.button}>
+                        <Box>
+                            <img className={classes.copyImg} src={copyToClickBoard?CopyImageGrey:CopyImageWhite} alt="" />
+                            <Box className={classes.copyMessage}>
+                            <Typography.Body2>{copyMessage}</Typography.Body2>
+                            </Box>
+                        </Box>
                     </AnyWayButton>
                 </Box>
             </Box>

src/components/organisms/WidgetsTemplate.tsx

@@ -40,7 +40,7 @@ const WidgetsTemplate: FC = () => {
         <AnyWayCard
           organizationData={organizationData}
           information={widget.meta.information}
-          BoxText = {widget.data?.text?.transcription}
+          transcription = {widget.data?.text?.transcription}
           widgetName={widget.name}
           title={widget.data?.text?.title}
           subtitle={widget.data?.text?.subtitle}

src/models/WidgetName.ts

@@ -13,6 +13,7 @@ export enum WidgetName {
   head_on_collisions_comparison = 'head_on_collisions_comparison',
   head_on_collisions_comparison_percentage = 'head_on_collisions_comparison_percentage',
   vision_zero_2_plus_1 = 'vision_zero_2_plus_1',
+  vision_zero_10_30_90 = 'vision_zero_10_30_90',
   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',