added connect process for Overview Page of Sodistorehome thus they only show available historical S3 data in case of offline

This commit is contained in:
Yinyin Liu 2026-03-12 10:48:42 +01:00
parent b4a296fd8a
commit cb61c2bd42
6 changed files with 45 additions and 3 deletions

View File

@ -34,6 +34,8 @@ interface OverviewProps {
s3Credentials: I_S3Credentials; s3Credentials: I_S3Credentials;
id: number; id: number;
device?: number; device?: number;
connected?: boolean;
loading?: boolean;
} }
const computeLast7Days = (): string[] => { const computeLast7Days = (): string[] => {
@ -104,6 +106,12 @@ function Overview(props: OverviewProps) {
} }
}, [isZooming, dailyDataArray]); }, [isZooming, dailyDataArray]);
useEffect(() => {
if (props.connected === false) {
setErrorDateModalOpen(false);
}
}, [props.connected]);
useEffect(() => { useEffect(() => {
const resultPromise: Promise<{ const resultPromise: Promise<{
chartData: chartDataInterface; chartData: chartDataInterface;
@ -121,8 +129,6 @@ function Overview(props: OverviewProps) {
resultPromise resultPromise
.then((result) => { .then((result) => {
if (result.chartData.soc.data.length === 0) { if (result.chartData.soc.data.length === 0) {
setDateSelectionError(intl.formatMessage({ id: 'noDataForDateRange' }));
setErrorDateModalOpen(true);
setLoading(false); setLoading(false);
return; return;
} }
@ -397,6 +403,23 @@ function Overview(props: OverviewProps) {
const renderGraphs = () => { const renderGraphs = () => {
return ( return (
<Container maxWidth="xl"> <Container maxWidth="xl">
{!props.connected && !props.loading && (
<Typography
variant="body2"
sx={{
color: 'red',
fontWeight: 'bold',
textAlign: 'center',
marginTop: '10px',
marginBottom: '10px'
}}
>
<FormattedMessage
id="installationOffline"
defaultMessage="Installation is currently offline. Showing last available data."
/>
</Typography>
)}
{isErrorDateModalOpen && ( {isErrorDateModalOpen && (
<Modal open={isErrorDateModalOpen} onClose={() => {}}> <Modal open={isErrorDateModalOpen} onClose={() => {}}>
<Box <Box
@ -527,6 +550,7 @@ function Overview(props: OverviewProps) {
</LocalizationProvider> </LocalizationProvider>
)} )}
<Grid container> <Grid container>
{!props.loading && (props.connected !== false || dailyDataArray.length > 0 || aggregatedDataArray.length > 0) && (<>
<Grid item xs={6} md={6}> <Grid item xs={6} md={6}>
<Button <Button
variant="contained" variant="contained"
@ -618,6 +642,7 @@ function Overview(props: OverviewProps) {
<FormattedMessage id="goback" defaultMessage="Zoom in" /> <FormattedMessage id="goback" defaultMessage="Zoom in" />
</Button> </Button>
</Grid> </Grid>
</>)}
{loading && ( {loading && (
<Container <Container
@ -1565,6 +1590,10 @@ function Overview(props: OverviewProps) {
); );
}; };
if (props.loading) {
return null;
}
return <>{renderGraphs()}</>; return <>{renderGraphs()}</>;
} }

View File

@ -276,6 +276,7 @@ function SodioHomeInstallation(props: singleInstallationProps) {
currentTab == 'live' || currentTab == 'live' ||
currentTab == 'pvview' || currentTab == 'pvview' ||
currentTab == 'configuration' || currentTab == 'configuration' ||
currentTab == 'overview' ||
location.includes('batteryview') location.includes('batteryview')
) { ) {
//Fetch periodically if the tab is live, pvview or batteryview //Fetch periodically if the tab is live, pvview or batteryview
@ -293,6 +294,13 @@ function SodioHomeInstallation(props: singleInstallationProps) {
} }
} }
} }
// Fetch one time in overview tab to determine connectivity
if (currentTab == 'overview') {
fetchDataForOneTime();
return () => {
continueFetching.current = false;
};
}
// Fetch periodically in configuration tab to detect S3 config updates // Fetch periodically in configuration tab to detect S3 config updates
if (currentTab == 'configuration') { if (currentTab == 'configuration') {
fetchDataForOneTime(); fetchDataForOneTime();
@ -462,7 +470,6 @@ function SodioHomeInstallation(props: singleInstallationProps) {
</div> </div>
{loading && {loading &&
currentTab != 'information' && currentTab != 'information' &&
currentTab != 'overview' &&
currentTab != 'manage' && currentTab != 'manage' &&
currentTab != 'history' && currentTab != 'history' &&
currentTab != 'log' && currentTab != 'log' &&
@ -594,6 +601,8 @@ function SodioHomeInstallation(props: singleInstallationProps) {
s3Credentials={s3Credentials} s3Credentials={s3Credentials}
id={props.current_installation.id} id={props.current_installation.id}
device={props.current_installation.device} device={props.current_installation.device}
connected={connected}
loading={loading}
/> />
} }
/> />

View File

@ -425,6 +425,7 @@
"requiredOrderNumber": "Pflichtbestellnummer", "requiredOrderNumber": "Pflichtbestellnummer",
"unableToCommunicate": "Kommunikation mit der Installation nicht möglich", "unableToCommunicate": "Kommunikation mit der Installation nicht möglich",
"pleaseWaitOrRefresh": "Bitte warten oder Seite aktualisieren", "pleaseWaitOrRefresh": "Bitte warten oder Seite aktualisieren",
"installationOffline": "Die Installation ist derzeit offline. Letzte verfügbare Daten werden angezeigt.",
"noDataForDateRange": "Keine Daten für den gewählten Zeitraum verfügbar. Bitte wählen Sie ein neueres Datum.", "noDataForDateRange": "Keine Daten für den gewählten Zeitraum verfügbar. Bitte wählen Sie ein neueres Datum.",
"loginFailed": "Anmeldung fehlgeschlagen. Bitte versuchen Sie es erneut.", "loginFailed": "Anmeldung fehlgeschlagen. Bitte versuchen Sie es erneut.",
"usernameWrong": "Benutzername ist falsch. Bitte versuchen Sie es erneut.", "usernameWrong": "Benutzername ist falsch. Bitte versuchen Sie es erneut.",

View File

@ -173,6 +173,7 @@
"demo_diagnose_button": "Diagnose", "demo_diagnose_button": "Diagnose",
"unableToCommunicate": "Unable to communicate with the installation", "unableToCommunicate": "Unable to communicate with the installation",
"pleaseWaitOrRefresh": "Please wait or refresh the page", "pleaseWaitOrRefresh": "Please wait or refresh the page",
"installationOffline": "Installation is currently offline. Showing last available data.",
"noDataForDateRange": "No data available for the selected date range. Please choose a more recent date.", "noDataForDateRange": "No data available for the selected date range. Please choose a more recent date.",
"loginFailed": "Login failed. Please try again.", "loginFailed": "Login failed. Please try again.",
"usernameWrong": "Username is wrong. Please try again.", "usernameWrong": "Username is wrong. Please try again.",

View File

@ -425,6 +425,7 @@
"navigationTabs": "Navigation", "navigationTabs": "Navigation",
"unableToCommunicate": "Impossible de communiquer avec l'installation", "unableToCommunicate": "Impossible de communiquer avec l'installation",
"pleaseWaitOrRefresh": "Veuillez patienter ou actualiser la page", "pleaseWaitOrRefresh": "Veuillez patienter ou actualiser la page",
"installationOffline": "L'installation est actuellement hors ligne. Affichage des dernières données disponibles.",
"noDataForDateRange": "Aucune donnée disponible pour la période sélectionnée. Veuillez choisir une date plus récente.", "noDataForDateRange": "Aucune donnée disponible pour la période sélectionnée. Veuillez choisir une date plus récente.",
"loginFailed": "Échec de la connexion. Veuillez réessayer.", "loginFailed": "Échec de la connexion. Veuillez réessayer.",
"usernameWrong": "Nom d'utilisateur incorrect. Veuillez réessayer.", "usernameWrong": "Nom d'utilisateur incorrect. Veuillez réessayer.",

View File

@ -425,6 +425,7 @@
"alarm_OffGridBusVoltageTooLow": "Tensione Bus Fuori Rete Troppo Bassa", "alarm_OffGridBusVoltageTooLow": "Tensione Bus Fuori Rete Troppo Bassa",
"unableToCommunicate": "Impossibile comunicare con l'installazione", "unableToCommunicate": "Impossibile comunicare con l'installazione",
"pleaseWaitOrRefresh": "Attendere o aggiornare la pagina", "pleaseWaitOrRefresh": "Attendere o aggiornare la pagina",
"installationOffline": "L'installazione è attualmente offline. Vengono mostrati gli ultimi dati disponibili.",
"noDataForDateRange": "Nessun dato disponibile per il periodo selezionato. Scegliere una data più recente.", "noDataForDateRange": "Nessun dato disponibile per il periodo selezionato. Scegliere una data più recente.",
"loginFailed": "Accesso fallito. Riprovare.", "loginFailed": "Accesso fallito. Riprovare.",
"usernameWrong": "Nome utente errato. Riprovare.", "usernameWrong": "Nome utente errato. Riprovare.",