From 98a8ca2c534e0ae78cfed2787f9d53f86475f313 Mon Sep 17 00:00:00 2001
From: Hugo Nouts <hnouts@grandlyon.com>
Date: Fri, 29 May 2020 14:39:25 +0200
Subject: [PATCH] activateHalfHourLoad absolute position
With background transparency
---
.../FluidChartContainer.tsx | 8 ++++--
.../ActivateHalfHourLoad.tsx | 3 ++-
.../FluidChart/FluidChartContent.tsx | 4 ---
src/services/consumptionDataManagerService.ts | 4 +--
src/styles/base/_layout.scss | 25 ++++++++++++++++---
5 files changed, 32 insertions(+), 12 deletions(-)
diff --git a/src/components/ContainerComponents/FluidChartContainer/FluidChartContainer.tsx b/src/components/ContainerComponents/FluidChartContainer/FluidChartContainer.tsx
index 4feb58fdd..8eb5174e0 100644
--- a/src/components/ContainerComponents/FluidChartContainer/FluidChartContainer.tsx
+++ b/src/components/ContainerComponents/FluidChartContainer/FluidChartContainer.tsx
@@ -7,6 +7,7 @@ import { TimeStep } from 'services/dataConsumptionContracts'
import { TypeChallenge, UserChallenge } from 'services/dataChallengeContracts'
import ConsumptionDataManager from 'services/consumptionDataManagerService'
import FluidChartContent from 'components/ContentComponents/FluidChart/FluidChartContent'
+import ActivateHalfHourLoad from 'components/ContentComponents/ConsumptionNavigator/ActivateHalfHourLoad'
interface FluidChartContainerProps {
timeStep: TimeStep
@@ -47,10 +48,10 @@ const FluidChartContainer: React.FC<FluidChartContainerProps> = ({
useEffect(() => {
let subscribed = true
async function loadData() {
- const activateHalfHourLoad = await consumptionDataManager.checkDoctypeEntries(
+ const activateHalfHourLoad = !(await consumptionDataManager.checkDoctypeEntries(
FluidType.ELECTRICITY,
TimeStep.HALF_AN_HOUR
- )
+ ))
const data = await consumptionDataManager.fetchLastDateData(fluidTypes)
const dataWithAllFluids = await consumptionDataManager.fetchLastDateData(
fluidTypes,
@@ -113,6 +114,9 @@ const FluidChartContainer: React.FC<FluidChartContainerProps> = ({
{isLoaded ? (
<div className="fc-root">
<div className="fc-content">
+ {isMinuteBlocked && timeStep === 10 && (
+ <ActivateHalfHourLoad timeStep={timeStep} />
+ )}
<FluidChartContent
referenceDate={referenceDate}
lastDataDate={lastDataDate}
diff --git a/src/components/ContentComponents/ConsumptionNavigator/ActivateHalfHourLoad.tsx b/src/components/ContentComponents/ConsumptionNavigator/ActivateHalfHourLoad.tsx
index ad0fb623e..729da9861 100644
--- a/src/components/ContentComponents/ConsumptionNavigator/ActivateHalfHourLoad.tsx
+++ b/src/components/ContentComponents/ConsumptionNavigator/ActivateHalfHourLoad.tsx
@@ -13,10 +13,11 @@ const ActivateHalfHourLoad = ({ t }: ActivateHalfHourLoadProps) => {
return (
<div className="cta-box">
- <div className="header-text text-16-normal">
+ <div className="cta-box-header header-text text-16-normal">
{t('timestep.activate.enedis.info')}
</div>
<StyledButton
+ className="cta-box-button"
type="submit"
color="primary"
onClick={() => window.open(siteLink, '_blank')}
diff --git a/src/components/ContentComponents/FluidChart/FluidChartContent.tsx b/src/components/ContentComponents/FluidChart/FluidChartContent.tsx
index 45de13f35..1d7f0fcb8 100644
--- a/src/components/ContentComponents/FluidChart/FluidChartContent.tsx
+++ b/src/components/ContentComponents/FluidChart/FluidChartContent.tsx
@@ -143,10 +143,6 @@ const FluidChartContent: React.FC<FluidChartContentProps> = ({
/>
</div>
- {activateHalfHourLoad && timeStep === 10 && (
- <ActivateHalfHourLoad timeStep={timeStep} />
- )}
-
{isDataLoaded && (
<FluidChartSwipe
fluidTypes={fluidTypes}
diff --git a/src/services/consumptionDataManagerService.ts b/src/services/consumptionDataManagerService.ts
index 4fa240e30..ff2d6ec33 100644
--- a/src/services/consumptionDataManagerService.ts
+++ b/src/services/consumptionDataManagerService.ts
@@ -293,9 +293,9 @@ export default class ConsumptionDataManager implements IConsumptionDataManager {
): Promise<boolean> {
const queryResult = await this._queryRunner.getEntries(fluideType, timeStep)
if (queryResult.length > 0) {
- return false
+ return true
}
- return true
+ return false
}
private aggregateGraphData(
diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss
index 0d45f0213..8b7e4be6b 100644
--- a/src/styles/base/_layout.scss
+++ b/src/styles/base/_layout.scss
@@ -123,9 +123,28 @@ body {
}
.cta-box {
- width: 100%;
- opacity: 1;
- color: $text-bright
+ background-color:rgba(18, 18, 18, 0.7);
+ position: absolute;
+
+ padding: 1.5rem 1rem 1rem 0rem;
+ z-index: 1;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ height: 50%;
+ .cta-box-header {
+ text-align: center;
+ font-weight: bold;
+ letter-spacing: 0.2px;
+ margin-bottom: 1.5em;
+ color: $text-bright;
+ }
+ .cta-box-button {
+ margin-left: auto;
+ margin-right: auto;
+ color: black;
+ width: 80%;
+ }
}
[role='main'] {
--
GitLab