pali112
/
workout-editor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Separate section for Zwift XP

This commit is contained in:
Rene Saarsoo 2020-11-22 21:03:45 +02:00
parent b3c931c77c
commit db55c41780
1 changed files with 34 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/WorkoutStats.tsx
View File

@ -5,22 +5,41 @@ import styled from "styled-components";
const formatIntensity = (intensity: Intensity): string => `${Math.round(intensity.value * 100)}%`; const formatIntensity = (intensity: Intensity): string => `${Math.round(intensity.value * 100)}%`;
const StatsLine: React.FC<{ label: string; value: string | number }> = ({ label, value }) => ( type StatsProps = { label: string; value: string | number };
<li>
const StatsLine: React.FC<StatsProps> = ({ label, value }) => (
<>
<strong>{label}</strong> {value} <strong>{label}</strong> {value}
</>
);
const StatsListItem: React.FC<StatsProps> = (props) => (
<li>
<StatsLine {...props} />
</li> </li>
); );
const Container = styled.div` const Container = styled.div`
display: grid; display: grid;
grid-template-columns: 1fr 3fr; grid-template-columns: 1fr 3fr;
grid-template-areas:
"summary zones"
"xp xp ";
border: 1px solid #bbb; border: 1px solid #bbb;
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
font-size: 12px; font-size: 12px;
background: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.6);
`; `;
const Section = styled.section``; const SummarySection = styled.section`
grid-area: summary;
`;
const ZonesSection = styled.section`
grid-area: zones;
`;
const XpSection = styled.section`
grid-area: xp;
`;
const Header = styled.h2` const Header = styled.h2`
margin: 0; margin: 0;
@ -42,24 +61,26 @@ export const WorkoutStats: React.FC<{ workout: Workout }> = ({ workout }) => {
return ( return (
<Container> <Container>
<Section> <SummarySection>
<Header>Summary</Header> <Header>Summary</Header>
<List> <List>
<StatsLine label="Duration:" value={formatDuration(totalDuration)} /> <StatsListItem label="Duration:" value={formatDuration(totalDuration)} />
<StatsLine label="Average intensity:" value={formatIntensity(averageIntensity)} /> <StatsListItem label="Average intensity:" value={formatIntensity(averageIntensity)} />
<StatsLine label="Normalized intensity:" value={formatIntensity(normalizedIntensity)} /> <StatsListItem label="Normalized intensity:" value={formatIntensity(normalizedIntensity)} />
<StatsLine label="TSS:" value={Math.round(tss)} /> <StatsListItem label="TSS:" value={Math.round(tss)} />
<StatsLine label="Zwift XP:" value={`${xp} (like riding ${Math.ceil(xp / 20)} km)`} />
</List> </List>
</Section> </SummarySection>
<Section> <ZonesSection>
<Header>Zone distribution</Header> <Header>Zone distribution</Header>
<ZoneList> <ZoneList>
{zones.map((zone) => ( {zones.map((zone) => (
<StatsLine key={zone.name} label={zone.name} value={formatDuration(zone.duration)} /> <StatsListItem key={zone.name} label={zone.name} value={formatDuration(zone.duration)} />
))} ))}
</ZoneList> </ZoneList>
</Section> </ZonesSection>
<XpSection>
<StatsLine label="Zwift XP:" value={`${xp} (like riding ${Math.ceil(xp / 20)} km)`} />
</XpSection>
</Container> </Container>
); );
}; };