From eb6e3418399a99e840febf891be96e6aebab16d6 Mon Sep 17 00:00:00 2001
From: Hugo NOUTS <hnouts@grandlyon.com>
Date: Wed, 31 May 2023 12:03:00 +0000
Subject: [PATCH] =?UTF-8?q?Resolve=20"[5]=20Conserver=20les=20donn=C3=A9es?=
=?UTF-8?q?/acc=C3=A9der=20aux=20donn=C3=A9es=20m=C3=AAme=20quand=20connec?=
=?UTF-8?q?teur=20d=C3=A9connect=C3=A9"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/icons/visu/offline-param.svg | 5 ++
src/components/CommonKit/Card/StyledCard.tsx | 2 +-
src/components/Connection/connection.scss | 4 +-
src/components/FluidChart/fluidChart.scss | 12 ++--
src/components/Home/ConsumptionView.tsx | 2 +
src/components/Home/consumptionView.scss | 5 +-
.../Konnector/KonnectorViewerCard.tsx | 56 +++++++++++++++----
.../Konnector/KonnectorViewerList.tsx | 50 +++++++----------
.../Konnector/konnectorViewerList.scss | 18 ------
.../TotalConsumption/TotalConsumption.tsx | 16 ++++--
.../TotalConsumption/totalConsumption.scss | 5 +-
src/locales/fr.json | 3 +
12 files changed, 99 insertions(+), 79 deletions(-)
create mode 100644 src/assets/icons/visu/offline-param.svg
diff --git a/src/assets/icons/visu/offline-param.svg b/src/assets/icons/visu/offline-param.svg
new file mode 100644
index 000000000..dcd75ad76
--- /dev/null
+++ b/src/assets/icons/visu/offline-param.svg
@@ -0,0 +1,5 @@
+<svg width="51" height="52" viewBox="0 0 51 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="25.5" cy="26.25" r="25" fill="#121212" stroke="#7B7B7B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.0044 49.2337C31.3552 50.2143 28.4902 50.75 25.5 50.75C15.1546 50.75 6.3069 44.3379 2.71426 35.2711H4.09929L4.4043 34.0316C5.01421 32.4823 5.62412 30.9331 6.23404 29.6937L6.84396 28.7641L3.18439 25.0458C2.57446 24.7359 2.57446 24.4261 2.57446 24.4261C2.57446 24.4261 2.57446 24.1162 2.87943 23.8063L5.62411 21.0176C5.92907 20.7077 6.23404 20.7077 6.23404 20.7077L10.1986 24.7359L11.1135 24.1162C12.6383 23.1866 14.1631 22.257 15.9929 21.9472L17.2128 21.6373V15.75H22.3972V21.3275L23.617 21.6373C25.4468 22.257 26.9716 22.8768 28.4964 23.8063L29.4113 24.4261L32.7659 21.0176C33.0709 20.3979 33.3759 20.3979 33.3759 20.3979C33.3759 20.3979 33.6808 20.3979 33.9858 20.7077L36.7305 23.4965C37.0355 23.8063 37.0355 24.1162 37.0355 24.1162L32.7659 28.4542L33.3759 29.3838C34.2908 30.9331 34.9007 32.1725 35.2057 33.7218L35.5106 34.9613H41V40.5387H35.5106L35.2057 41.7782C34.5957 43.6373 33.9858 45.1866 33.0709 46.7359L32.461 47.6655L34.0044 49.2337ZM14 37.0643C14 33.7214 16.9714 30.75 20.6857 30.75C24.4 30.75 27 33.7214 27 37.0643C27 40.7786 24.4 43.75 20.6857 43.75C16.9714 43.75 14 40.7786 14 37.0643Z" fill="#7B7B7B"/>
+<path d="M40.5886 19.75H45.4113V14.2641L46.5461 13.9754C46.5945 13.9655 46.6425 13.9553 46.6903 13.9448C42.4463 6.65218 34.5457 1.75 25.5 1.75C24.656 1.75 23.822 1.79268 23 1.87599V2.13732H28.1064L28.3901 3.29225C28.6738 5.02464 29.5248 6.4683 30.3759 7.91195L30.9433 8.77816L26.9716 12.8204C26.9716 12.8204 26.9716 13.1091 27.2553 13.3979L29.8085 15.9965C30.0922 16.2852 30.3759 16.2852 30.3759 16.2852C30.3759 16.2852 30.6596 16.2852 30.9433 15.7077L34.3475 12.243L35.1986 12.8204C35.9936 13.4273 36.9279 13.7507 37.9038 14.0885C38.3209 14.2329 38.7455 14.3799 39.1702 14.5528L40.305 14.8415V19.4613C40.5887 19.4613 40.5886 19.4613 40.5886 19.75Z" fill="#7B7B7B" fill-opacity="0.5"/>
+</svg>
diff --git a/src/components/CommonKit/Card/StyledCard.tsx b/src/components/CommonKit/Card/StyledCard.tsx
index c6a10c174..caa675934 100644
--- a/src/components/CommonKit/Card/StyledCard.tsx
+++ b/src/components/CommonKit/Card/StyledCard.tsx
@@ -12,7 +12,7 @@ const CardBase = withStyles({
boxSizing: 'border-box',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.75)',
borderRadius: '4px',
- margin: '10px 0px 20px 0px',
+ margin: '10px 0px 10px 0px',
},
})(CardActionArea) as React.FC<StyledCardProps>
diff --git a/src/components/Connection/connection.scss b/src/components/Connection/connection.scss
index 023ce95fe..dba6ead25 100644
--- a/src/components/Connection/connection.scss
+++ b/src/components/Connection/connection.scss
@@ -18,8 +18,7 @@
font-weight: bold;
}
.connection-form-title {
- margin-top: 0;
- padding: 0 1rem;
+ margin: 0;
&.enedissgegrandlyon {
color: $elec-color;
}
@@ -31,6 +30,7 @@
}
}
.connection-form-subtitle {
+ margin: 0 auto 0.5rem auto;
color: $white;
}
.connection-form-infotext {
diff --git a/src/components/FluidChart/fluidChart.scss b/src/components/FluidChart/fluidChart.scss
index ddd1e84f1..bc1536b6c 100644
--- a/src/components/FluidChart/fluidChart.scss
+++ b/src/components/FluidChart/fluidChart.scss
@@ -4,10 +4,8 @@
.fluidchart-root {
background-color: $dark-light-2;
padding: 0.5rem 2rem 1rem 2rem;
- margin-bottom: 1rem;
@media #{$large-phone} {
padding: 0rem 1rem 1rem 1rem;
- margin-bottom: 0rem;
}
}
.fluidchart-content {
@@ -80,8 +78,10 @@
cursor: pointer;
text-decoration: underline;
}
-}
-
-button {
- max-width: 22.5rem;
+ button {
+ margin-top: 0rem !important;
+ width: 70% !important;
+ height: 40px !important;
+ max-width: 22.5rem;
+ }
}
diff --git a/src/components/Home/ConsumptionView.tsx b/src/components/Home/ConsumptionView.tsx
index ab268ed1c..baa2de7e7 100644
--- a/src/components/Home/ConsumptionView.tsx
+++ b/src/components/Home/ConsumptionView.tsx
@@ -216,6 +216,7 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
fluidType={fluidType}
isParam={true}
isDisconnected={false}
+ showOfflineData={true}
setActive={setActive}
active={active}
key={fluidType}
@@ -234,6 +235,7 @@ const ConsumptionView: React.FC<ConsumptionViewProps> = ({
fluidType={fluidType}
isParam={false}
isDisconnected={true}
+ showOfflineData={false}
setActive={setActive}
active={active}
/>
diff --git a/src/components/Home/consumptionView.scss b/src/components/Home/consumptionView.scss
index ff6b76363..f06c407a5 100644
--- a/src/components/Home/consumptionView.scss
+++ b/src/components/Home/consumptionView.scss
@@ -17,14 +17,11 @@
}
.konnector-section {
background-color: $default-background;
- margin: auto;
+ margin: 0 auto;
width: 45.75rem;
box-sizing: border-box;
- margin-top: 1rem;
- margin-bottom: 2rem;
@media #{$large-phone} {
width: 100%;
padding: 0rem 1rem 3rem 1rem;
- margin-bottom: 0;
}
}
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index 4ea9c7b4f..f1f613b02 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -2,10 +2,12 @@ import {
Accordion,
AccordionDetails,
AccordionSummary,
+ Button,
} from '@material-ui/core'
import chevronDown from 'assets/icons/ico/chevron-down.svg'
import ErrorNotif from 'assets/icons/ico/notif_error.svg'
import PartnersIssueNotif from 'assets/icons/ico/notif_maintenance.svg'
+import OfflinePicto from 'assets/icons/visu/offline-param.svg'
import classNames from 'classnames'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import Connection from 'components/Connection/Connection'
@@ -47,6 +49,7 @@ import React, {
useState,
} from 'react'
import { useDispatch, useSelector } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
import AccountService from 'services/account.service'
import ChallengeService from 'services/challenge.service'
import DateChartService from 'services/dateChart.service'
@@ -55,19 +58,22 @@ import PartnersInfoService from 'services/partnersInfo.service'
import UsageEventService from 'services/usageEvent.service'
import { AppActionsTypes, AppStore } from 'store'
import { setChallengeConsumption } from 'store/challenge/challenge.actions'
-import { setSelectedDate } from 'store/chart/chart.slice'
+import { setSelectedDate, setShowOfflineData } from 'store/chart/chart.slice'
import {
setFluidStatus,
toggleChallengeDuelNotification,
updatedFluidConnection,
} from 'store/global/global.actions'
+import { openConnectionModal } from 'store/modal/modal.slice'
import { getAddPicto, getParamPicto } from 'utils/picto'
+import { getKonnectorSlug } from 'utils/utils'
import './konnectorViewerCard.scss'
interface KonnectorViewerCardProps {
fluidStatus: FluidStatus
isParam: boolean
isDisconnected: boolean
+ showOfflineData: boolean
active: boolean
fluidType: FluidType
setActive: React.Dispatch<React.SetStateAction<boolean>>
@@ -77,6 +83,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
fluidStatus,
isParam,
isDisconnected,
+ showOfflineData,
active,
fluidType,
setActive,
@@ -84,6 +91,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
const { t } = useI18n()
const client = useClient()
const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
+ const navigate = useNavigate()
const fluidSlug = fluidStatus.connection.konnectorConfig.slug
const fluidState = fluidStatus.status
@@ -291,7 +299,33 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
[client]
)
+ const toggleModalConnection = () => {
+ switch (fluidType) {
+ case FluidType.ELECTRICITY:
+ navigate('/sge-connect')
+ break
+ case FluidType.GAS:
+ case FluidType.WATER:
+ dispatch(setShowOfflineData(false))
+ dispatch(openConnectionModal(true))
+ break
+ }
+ }
+
const getConnectionCard = useCallback(() => {
+ if (showOfflineData && !account) {
+ return (
+ <Button
+ classes={{
+ root: 'btn-highlight',
+ label: 'text-16-bold',
+ }}
+ onClick={toggleModalConnection}
+ >
+ {t(`auth.${getKonnectorSlug(fluidType)}.connect`)}
+ </Button>
+ )
+ }
if (fluidState === FluidState.KONNECTOR_NOT_FOUND && !isUpdating) {
return <ConnectionNotFound konnectorSlug={fluidSlug} />
}
@@ -352,7 +386,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
return (
<div className="konnector-icon">
<Icon
- icon={fluidStatus.connection.account ? iconType : iconAddType}
+ icon={fluidStatus.connection.account ? iconType : OfflinePicto}
size={49}
/>
{fluidStatus.maintenance ? (
@@ -364,7 +398,8 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
) : (
(fluidStatus.status === FluidState.ERROR ||
isOutdatedData ||
- fluidStatus.status === FluidState.ERROR_LOGIN_FAILED) && (
+ fluidStatus.status === FluidState.ERROR_LOGIN_FAILED) &&
+ fluidStatus.connection.account && (
<StyledIcon
icon={ErrorNotif}
size={24}
@@ -402,7 +437,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
return t(`FLUID.${FluidType[fluidStatus.fluidType]}.LABEL`)
} else {
return t(
- `konnector_options.label_connect_to_${FluidType[
+ `konnector_options.label_offline_${FluidType[
fluidStatus.fluidType
].toLowerCase()}`
)
@@ -493,8 +528,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
root: `expansion-panel-root ${
!fluidStatus.maintenance &&
(fluidStatus.status === FluidState.ERROR ||
- fluidStatus.status === FluidState.ERROR_LOGIN_FAILED ||
- isOutdatedData)
+ fluidStatus.status === FluidState.ERROR_LOGIN_FAILED)
? 'red-border'
: ''
}`,
@@ -516,10 +550,8 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
>
{displayKonnectorIcon()}
<div
- className={classNames('konnector-title', {
- [`${FluidType[
- fluidStatus.fluidType
- ].toLowerCase()}-connected text-16-bold`]:
+ className={classNames('text-16-bold konnector-title', {
+ [`${FluidType[fluidStatus.fluidType].toLowerCase()}-connected`]:
fluidStatus.status !== FluidState.NOT_CONNECTED &&
!fluidStatus.maintenance,
})}
@@ -536,7 +568,9 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
</AccordionDetails>
</Accordion>
) : (
- <>{getConnectionCard()}</>
+ <>
+ <AccordionDetails>{getConnectionCard()}</AccordionDetails>
+ </>
)}
<KonnectorModal
open={openModal}
diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
index 74d0cbba4..9f6022b29 100644
--- a/src/components/Konnector/KonnectorViewerList.tsx
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -10,7 +10,7 @@ import { AppStore } from 'store'
import { getAddPicto } from 'utils/picto'
import './konnectorViewerList.scss'
-const KonnectorViewerList: React.FC = () => {
+const KonnectorViewerList = () => {
const { t } = useI18n()
const { fluidStatus } = useSelector((state: AppStore) => state.ecolyo.global)
const navigate = useNavigate()
@@ -20,36 +20,26 @@ const KonnectorViewerList: React.FC = () => {
},
[navigate]
)
- return (
- <div className="kv-root">
- <div className="kv-content">
- <div>
- {fluidStatus.map((fluidStatusItem: FluidStatus, key: number) => {
- return (
- <StyledCard
- key={key}
- className="connection-card"
- onClick={() => goToFluid(fluidStatusItem.fluidType)}
- >
- <Icon icon={getAddPicto(fluidStatusItem.fluidType)} size={36} />
- <div
- className={`konnector-title text-18-bold ${FluidType[
- fluidStatusItem.fluidType
- ].toLowerCase()}`}
- >
- {t(
- `konnector_options.label_connect_to_${FluidType[
- fluidStatusItem.fluidType
- ].toLowerCase()}`
- )}
- </div>
- </StyledCard>
- )
- })}
- </div>
+ return fluidStatus.map((fluidStatusItem: FluidStatus, key: number) => (
+ <StyledCard
+ key={key}
+ className="connection-card"
+ onClick={() => goToFluid(fluidStatusItem.fluidType)}
+ >
+ <Icon icon={getAddPicto(fluidStatusItem.fluidType)} size={36} />
+ <div
+ className={`konnector-title text-18-bold ${FluidType[
+ fluidStatusItem.fluidType
+ ].toLowerCase()}`}
+ >
+ {t(
+ `konnector_options.label_connect_to_${FluidType[
+ fluidStatusItem.fluidType
+ ].toLowerCase()}`
+ )}
</div>
- </div>
- )
+ </StyledCard>
+ ))
}
export default KonnectorViewerList
diff --git a/src/components/Konnector/konnectorViewerList.scss b/src/components/Konnector/konnectorViewerList.scss
index db4a790cb..38e239582 100644
--- a/src/components/Konnector/konnectorViewerList.scss
+++ b/src/components/Konnector/konnectorViewerList.scss
@@ -1,24 +1,6 @@
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
-.kv-root {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 0rem 0rem 1rem 0rem;
- .kv-content {
- width: 45.75rem;
- @media #{$large-phone} {
- width: 100%;
- }
- .kv-header {
- margin-top: 2.5rem;
- margin-bottom: 1.25rem;
- color: $grey-bright;
- }
- }
-}
button.connection-card div {
display: flex;
align-items: center;
diff --git a/src/components/TotalConsumption/TotalConsumption.tsx b/src/components/TotalConsumption/TotalConsumption.tsx
index 7e40893e1..281b7acd1 100644
--- a/src/components/TotalConsumption/TotalConsumption.tsx
+++ b/src/components/TotalConsumption/TotalConsumption.tsx
@@ -80,13 +80,17 @@ const TotalConsumption = ({ fluidType }: { fluidType: FluidType }) => {
}
}, [currentDatachart, fluidType, currentTimeStep, client, computeTotal])
+ const compareIcon = () => (
+ <StyledIcon
+ className="pile-icon"
+ icon={showCompare ? Coins : Coin}
+ size={showCompare ? 48 : 36}
+ />
+ )
+
return (
- <div className="icon-line">
- {showCompare ? (
- <StyledIcon className="pile-icon" icon={Coins} size={48} />
- ) : (
- <StyledIcon className="pile-icon" icon={Coin} size={48} />
- )}
+ <div className={`icon-line ${showCompare ? 'compare' : ''}`}>
+ {compareIcon()}
<div>
<span className="euro-value">{totalValue}</span>
<span className="euro-symbol"> €</span>
diff --git a/src/components/TotalConsumption/totalConsumption.scss b/src/components/TotalConsumption/totalConsumption.scss
index dd30f11ec..d36b15977 100644
--- a/src/components/TotalConsumption/totalConsumption.scss
+++ b/src/components/TotalConsumption/totalConsumption.scss
@@ -2,7 +2,10 @@
.icon-line {
display: flex;
- align-items: flex-end;
+ align-items: baseline;
+ &.compare {
+ align-items: flex-end;
+ }
svg {
transform: translate(0px, 4px);
diff --git a/src/locales/fr.json b/src/locales/fr.json
index da2a1f8ef..87addeb07 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -765,6 +765,9 @@
"label_connect_to_electricity": "Se connecter à l'électricité",
"label_connect_to_water": "Se connecter à l'eau",
"label_connect_to_gas": "Se connecter au gaz",
+ "label_offline_electricity": "Électricité déconnectée",
+ "label_offline_water": "Eau déconnectée",
+ "label_offline_gas": "Gaz déconnecté",
"partner_issue": "En maintenance",
"outdated": "Données manquantes depuis %{isOutdatedData} jours",
"accessibility": {
--
GitLab