Merge pull request #1023 from huss/v1.0Help

fix tooltip help
OpenEnergyDashboard · Sep 29, 2023 · b092941 · b092941
2 parents 78cf187 + 566b26c
commit b092941
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 55 deletions.
diff --git a/src/client/app/components/TooltipHelpComponent.tsx b/src/client/app/components/TooltipHelpComponent.tsx
@@ -47,7 +47,7 @@ export default class TooltipHelpComponent extends React.Component<TooltipHelpPro
 			'help.admin.groupedit': { link: `${HELP_URL}/adminGroupEditing.html` },
 			'help.admin.groupview': { link: `${HELP_URL}/adminGroupViewing.html` },
 			'help.admin.header': { link: `${HELP_URL}/adminPreferences.html` },
-			'help.admin.mapview': { link: `${HELP_URL}/adminMap.html` },
+			'help.admin.mapview': { link: `${HELP_URL}/adminMapViewing.html` },
 			'help.admin.metercreate': { link: `${HELP_URL}/adminMeterCreating.html` },
 			'help.admin.meteredit': { link: `${HELP_URL}/adminMeterEditing.html` },
 			'help.admin.meterview': { link: `${HELP_URL}/adminMeterViewing.html` },
@@ -76,7 +76,6 @@ export default class TooltipHelpComponent extends React.Component<TooltipHelpPro
 			'help.home.toggle.chart.link': { link: `${HELP_URL}/chartLink.html` },
 			'help.groups.groupdetails': { link: `${HELP_URL}/groupViewing.html#groupDetails` },
 			'help.groups.groupview': { link: `${HELP_URL}/groupViewing.html` },
-			'help.maps.mapview': { link: `${HELP_URL}/mapGraphic.html` },
 			'help.meters.meterview': { link: `${HELP_URL}/meterViewing.html` }
 		};
 

diff --git a/src/client/app/components/groups/CreateGroupModalComponent.tsx b/src/client/app/components/groups/CreateGroupModalComponent.tsx
@@ -8,8 +8,10 @@ import MultiSelectComponent from '../MultiSelectComponent';
 import { SelectOption } from '../../types/items';
 import { useDispatch, useSelector } from 'react-redux';
 import { State } from 'types/redux/state';
-import { Button, Col, Container, FormFeedback, FormGroup, Input, InputGroup,
-	Label, Modal, ModalBody, ModalFooter, ModalHeader, Row } from 'reactstrap';
+import {
+	Button, Col, Container, FormFeedback, FormGroup, Input, InputGroup,
+	Label, Modal, ModalBody, ModalFooter, ModalHeader, Row
+} from 'reactstrap';
 import { FormattedMessage } from 'react-intl';
 import translate from '../../utils/translate';
 import TooltipMarkerComponent from '../TooltipMarkerComponent';
@@ -369,7 +371,6 @@ export default function CreateGroupModalComponent(props: CreateGroupModalCompone
 						{/* Area input */}
 						<Col><FormGroup>
 							<Label for='area'>{translate('group.area')}</Label>
-							<TooltipMarkerComponent page='groups-create' helpTextId='help.groups.area.calculate' />
 							<InputGroup>
 								<Input
 									id='area'
@@ -385,6 +386,7 @@ export default function CreateGroupModalComponent(props: CreateGroupModalCompone
 								<Button color='secondary' onClick={handleAutoCalculateArea}>
 									<FormattedMessage id="group.area.calculate" />
 								</Button>
+								<TooltipMarkerComponent page='groups-create' helpTextId='help.groups.area.calculate' />
 								<FormFeedback>
 									<FormattedMessage id="error.negative" />
 								</FormFeedback>

diff --git a/src/client/app/components/groups/EditGroupModalComponent.tsx b/src/client/app/components/groups/EditGroupModalComponent.tsx
@@ -10,8 +10,10 @@ import MultiSelectComponent from '../MultiSelectComponent';
 import { SelectOption } from '../../types/items';
 import { useDispatch, useSelector } from 'react-redux';
 import { State } from 'types/redux/state';
-import { Button, Col, Container, FormFeedback, FormGroup, Input, InputGroup,
-	Label, Modal, ModalBody, ModalFooter, ModalHeader, Row } from 'reactstrap';
+import {
+	Button, Col, Container, FormFeedback, FormGroup, Input, InputGroup,
+	Label, Modal, ModalBody, ModalFooter, ModalHeader, Row
+} from 'reactstrap';
 import { FormattedMessage } from 'react-intl';
 import translate from '../../utils/translate';
 import TooltipMarkerComponent from '../TooltipMarkerComponent';
@@ -430,7 +432,7 @@ export default function EditGroupModalComponent(props: EditGroupModalComponentPr
 									autoComplete='on'
 									onChange={e => handleStringChange(e)}
 									required value={groupState.name}
-									invalid={groupState.name === ''}/>
+									invalid={groupState.name === ''} />
 								<FormFeedback>
 									<FormattedMessage id="error.required" />
 								</FormFeedback>
@@ -464,7 +466,7 @@ export default function EditGroupModalComponent(props: EditGroupModalComponentPr
 									type='text'
 									autoComplete='on'
 									value={groupState.name}
-									disabled/>
+									disabled />
 							</FormGroup>
 							{/* default graphic unit display for non-admin */}
 							<FormGroup>
@@ -519,7 +521,6 @@ export default function EditGroupModalComponent(props: EditGroupModalComponentPr
 								{/* Area input, only for admin. */}
 								<FormGroup>
 									<Label for='area'>{translate('group.area')}</Label>
-									<TooltipMarkerComponent page='groups-edit' helpTextId='help.groups.area.calculate' />
 									<InputGroup>
 										<Input
 											id='area'
@@ -535,6 +536,7 @@ export default function EditGroupModalComponent(props: EditGroupModalComponentPr
 										<Button color='secondary' onClick={handleAutoCalculateArea}>
 											<FormattedMessage id="group.area.calculate" />
 										</Button>
+										<TooltipMarkerComponent page='groups-edit' helpTextId='help.groups.area.calculate' />
 										<FormFeedback>
 											<FormattedMessage id="error.negative" />
 										</FormFeedback>

diff --git a/src/client/app/components/maps/MapsDetailComponent.tsx b/src/client/app/components/maps/MapsDetailComponent.tsx
@@ -8,7 +8,7 @@ import { FormattedMessage } from 'react-intl';
 import { hasToken } from '../../utils/token';
 import FooterContainer from '../../containers/FooterContainer';
 import MapViewContainer from '../../containers/maps/MapViewContainer';
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import TooltipHelpContainer from '../../containers/TooltipHelpContainer';
 import TooltipMarkerComponent from '../TooltipMarkerComponent';
 import { removeUnsavedChanges } from '../../actions/unsavedWarning';
@@ -76,17 +76,17 @@ export default class MapsDetailComponent extends React.Component<MapsDetailProps
 									<th> <FormattedMessage id='map.id' /> </th>
 									<th> <FormattedMessage id='map.name' /> </th>
 									{hasToken() && <th> <FormattedMessage id='map.displayable' /> </th>}
-									{hasToken() && <th> <FormattedMessage id='map.circle.size'/> </th>}
+									{hasToken() && <th> <FormattedMessage id='map.circle.size' /> </th>}
 									{hasToken() && <th> <FormattedMessage id='map.modified.date' /> </th>}
-									{hasToken() && <th> <FormattedMessage id='map.filename'/> </th>}
-									{hasToken() && <th> <FormattedMessage id='note'/> </th>}
-									{hasToken() && <th> <FormattedMessage id='map.calibration'/> </th>}
-									{hasToken() && <th> <FormattedMessage id='remove'/> </th>}
+									{hasToken() && <th> <FormattedMessage id='map.filename' /> </th>}
+									{hasToken() && <th> <FormattedMessage id='note' /> </th>}
+									{hasToken() && <th> <FormattedMessage id='map.calibration' /> </th>}
+									{hasToken() && <th> <FormattedMessage id='remove' /> </th>}
 								</tr>
 							</thead>
 							<tbody>
-								{ this.props.maps.map(mapID =>
-									( <MapViewContainer key={mapID} id={mapID} /> ))}
+								{this.props.maps.map(mapID =>
+									(<MapViewContainer key={mapID} id={mapID} />))}
 								<tr>
 									<td colSpan={8}>
 										<Link to='/calibration' onClick={() => this.props.createNewMap()}>
@@ -99,14 +99,14 @@ export default class MapsDetailComponent extends React.Component<MapsDetailProps
 							</tbody>
 						</Table>
 					</div>
-					{ hasToken() && <Button
+					{hasToken() && <Button
 						color='success'
 						style={buttonContainerStyle}
 						disabled={!this.props.unsavedChanges}
 						onClick={this.handleSubmitClicked}
 					>
 						<FormattedMessage id='save.map.edits' />
-					</Button> }
+					</Button>}
 				</div>
 				<FooterContainer />
 			</div>