Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Admin Dashboard Components (Sidebar) #1316

Draft
wants to merge 10 commits into
base: development
Choose a base branch
from
+536 −297
Draft

Admin Dashboard Components (Sidebar) #1316

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8dc4dd8
Admin panel overhaul to admin preferences, translations updated.
hazeltonbw Jun 26, 2024
754cdd3
Fix overflowing div, flex-grow div to just below footer
hazeltonbw Jul 10, 2024
b43d644
Add translations for sidebar, group misc settings
hazeltonbw Jul 23, 2024
f2b08e3
Add license to file
hazeltonbw Jul 23, 2024
dd3fecc
Restoring deleted French messages
juanjoseguva Jun 26, 2024
3bb62f2
Fixing minor syntactic errors to pass automated tests, done by Juan
juanjoseguva Jul 17, 2024
f20a2e1
Revert translations to last known edit before unnecessary re-work.
hazeltonbw Jul 23, 2024
5e80d9e
Add and remove translations needed for admin settings dashboard
hazeltonbw Jul 23, 2024
8405be6
Add show all settings button, update translations, make sidebar sticky.
hazeltonbw Jul 23, 2024
60ab721
Settings should take up available space on page
hazeltonbw Jul 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add translations for sidebar, group misc settings
@hazeltonbw
hazeltonbw committed Jul 23, 2024
commit b43d644bd206f802f3ccc010fcf5808defd41a05
2 changes: 1 addition & 1 deletion src/client/app/components/HeaderButtonsComponent.tsx
View file
Original file line number Diff line number Diff line change
@@ -209,7 +209,7 @@ export default function HeaderButtonsComponent() {
disabled={state.shouldAdminButtonDisabled}
tag={Link}
to="/admin">
<FormattedMessage id='admin.preferences' />
<FormattedMessage id='admin.settings' />
</DropdownItem>
<DropdownItem divider />
<DropdownItem
21 changes: 4 additions & 17 deletions src/client/app/components/admin/AdminSideBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import translate from '../../utils/translate';

interface SidebarProps {
onSelectPreference: (preference: string) => void,
@@ -19,35 +20,21 @@ export default function AdminSideBar(props: SidebarProps): React.JSX.Element {
className={`${props.selectedPreference === 'graph' ? 'btn btn-primary' : 'btn btn-light'}`}
onClick={() => props.onSelectPreference('graph')}
>
Graph Settings
{translate('graph')}
</button>
<button
type="button"
className={`${props.selectedPreference === 'meter' ? 'btn btn-primary' : 'btn btn-light'}`}
onClick={() => props.onSelectPreference('meter')}
>
Meter Settings
</button>
<button
type="button"
className={`${props.selectedPreference === 'dateLanguage' ? 'btn btn-primary' : 'btn btn-light'}`}
onClick={() => props.onSelectPreference('dateLanguage')}
>
Date/Language Settings
</button>
<button
type="button"
className={`${props.selectedPreference === 'file' ? 'btn btn-primary' : 'btn btn-light'}`}
onClick={() => props.onSelectPreference('file')}
>
File Settings
{translate('meter')}
</button>
<button
type="button"
className={`${props.selectedPreference === 'misc' ? 'btn btn-primary' : 'btn btn-light'}`}
onClick={() => props.onSelectPreference('misc')}
>
Misc Settings
{translate('misc')}
</button>
</div>

453 changes: 219 additions & 234 deletions src/client/app/components/admin/PreferencesComponent.tsx
View file
Original file line number Diff line number Diff line change
@@ -52,216 +52,114 @@ export default function PreferencesComponent(props: PreferencesProps) {
/>
{/* Graph Settings */}
{props.selectedPreference === 'graph' &&
<>
<div>
<p style={labelStyle}>
<FormattedMessage id='default.graph.type' />:
</p>
{
Object.values(ChartTypes).map(chartType => (
<div className='radio' key={chartType}>
<label >
<input
type='radio'
name='chartTypes'
style={{ marginRight: '10px' }}
value={chartType}
onChange={e => makeLocalChanges('defaultChartToRender', e.target.value)}
checked={localAdminPref.defaultChartToRender === chartType}
/>
{translate(chartType)}
</label>
</div>
))
}
</div>
<p style={labelStyle}>
<FormattedMessage id='default.graph.settings' />:
</p>
<div className='checkbox'>
<label>
<input
type='checkbox'
style={{ marginRight: '10px' }}
onChange={e => makeLocalChanges('defaultBarStacking', e.target.checked)}
checked={localAdminPref.defaultBarStacking}
/>
{translate('default.bar.stacking')}
</label>
</div>
<div className='checkbox'>
<label>
<input
type='checkbox'
style={{ marginRight: '10px' }}
onChange={e => makeLocalChanges('defaultAreaNormalization', e.target.checked)}
checked={localAdminPref.defaultAreaNormalization}
/>
{translate('default.area.normalize')}

</label>
</div>
<div>
<>
<div>
<p style={labelStyle}>
<FormattedMessage id='default.graph.type' />:
</p>
{
Object.values(ChartTypes).map(chartType => (
<div className='radio' key={chartType}>
<label >
<input
type='radio'
name='chartTypes'
style={{ marginRight: '10px' }}
value={chartType}
onChange={e => makeLocalChanges('defaultChartToRender', e.target.value)}
checked={localAdminPref.defaultChartToRender === chartType}
/>
{translate(chartType)}
</label>
</div>
))
}
</div>
<p style={labelStyle}>
{translate('default.area.unit')}

<FormattedMessage id='default.graph.settings' />:
</p>
<div className='radio'>
<div className='checkbox'>
<label>
<input
type='radio'
name='areaUnitType'
type='checkbox'
style={{ marginRight: '10px' }}
value={AreaUnitType.feet}
onChange={e => makeLocalChanges('defaultAreaUnit', e.target.value)}
checked={localAdminPref.defaultAreaUnit === AreaUnitType.feet}
onChange={e => makeLocalChanges('defaultBarStacking', e.target.checked)}
checked={localAdminPref.defaultBarStacking}
/>
{translate('AreaUnitType.feet')}
{translate('default.bar.stacking')}
</label>
</div>
<div className='radio'>
<div className='checkbox'>
<label>
<input
type='radio'
name='areaUnitType'
type='checkbox'
style={{ marginRight: '10px' }}
value={AreaUnitType.meters}
onChange={e => makeLocalChanges('defaultAreaUnit', e.target.value)}
checked={localAdminPref.defaultAreaUnit === AreaUnitType.meters}
onChange={e => makeLocalChanges('defaultAreaNormalization', e.target.checked)}
checked={localAdminPref.defaultAreaNormalization}
/>
{translate('AreaUnitType.meters')}
{translate('default.area.normalize')}

</label>
</div>
</div>
</>
<div>
<p style={labelStyle}>
{translate('default.area.unit')}

</p>
<div className='radio'>
<label>
<input
type='radio'
name='areaUnitType'
style={{ marginRight: '10px' }}
value={AreaUnitType.feet}
onChange={e => makeLocalChanges('defaultAreaUnit', e.target.value)}
checked={localAdminPref.defaultAreaUnit === AreaUnitType.feet}
/>
{translate('AreaUnitType.feet')}
</label>
</div>
<div className='radio'>
<label>
<input
type='radio'
name='areaUnitType'
style={{ marginRight: '10px' }}
value={AreaUnitType.meters}
onChange={e => makeLocalChanges('defaultAreaUnit', e.target.value)}
checked={localAdminPref.defaultAreaUnit === AreaUnitType.meters}
/>
{translate('AreaUnitType.meters')}
</label>
</div>
</div>
</>
}
{/* Misc Settings */}
{props.selectedPreference === 'misc' &&
<>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('site.title')}:`}
</p>
<Input
type='text'
placeholder={translate('name')}
value={localAdminPref.displayTitle}
onChange={e => makeLocalChanges('displayTitle', e.target.value)}
maxLength={50}
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
<FormattedMessage id='default.help.url' />:
</p>
<Input
type='text'
value={localAdminPref.defaultHelpUrl}
onChange={e => makeLocalChanges('defaultHelpUrl', e.target.value)}
/>
</div>
</>
}

{/* Meter Settings */}

{props.selectedPreference === 'meter' &&
<>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.meter.reading.frequency')}:`}
</p>
<Input
type='text'
value={localAdminPref.defaultMeterReadingFrequency}
onChange={e => makeLocalChanges('defaultMeterReadingFrequency', e.target.value)}
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.meter.minimum.value')}:`}
</p>
<Input
type='number'
value={localAdminPref.defaultMeterMinimumValue}
onChange={e => makeLocalChanges('defaultMeterMinimumValue', e.target.value)}
maxLength={50}
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.meter.maximum.value')}:`}
</p>
<Input
type='number'
value={localAdminPref.defaultMeterMaximumValue}
onChange={e => makeLocalChanges('defaultMeterMaximumValue', e.target.value)}
maxLength={50}
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.meter.minimum.date')}:`}
</p>
<Input
type='text'
value={localAdminPref.defaultMeterMinimumDate}
onChange={e => makeLocalChanges('defaultMeterMinimumDate', e.target.value)}
placeholder='YYYY-MM-DD HH:MM:SS'
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.meter.maximum.date')}:`}
</p>
<Input
type='text'
value={localAdminPref.defaultMeterMaximumDate}
onChange={e => makeLocalChanges('defaultMeterMaximumDate', e.target.value)}
placeholder='YYYY-MM-DD HH:MM:SS'
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.meter.reading.gap')}:`}
</p>
<Input
type='number'
value={localAdminPref.defaultMeterReadingGap}
onChange={e => makeLocalChanges('defaultMeterReadingGap', e.target.value)}
maxLength={50}
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.meter.maximum.errors')}:`}
</p>
<Input
type='number'
value={localAdminPref.defaultMeterMaximumErrors}
onChange={e => makeLocalChanges('defaultMeterMaximumErrors', e.target.value)}
maxLength={50}
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.meter.disable.checks')}:`}
</p>
<Input
type='select'
value={localAdminPref.defaultMeterDisableChecks?.toString()}
onChange={e => makeLocalChanges('defaultMeterDisableChecks', e.target.value)}>
{Object.keys(TrueFalseType).map(key => {
return (<option value={key} key={key}>{translate(`TrueFalseType.${key}`)}</option>);
})}
</Input>
</div>
</>
}

{/* Date/Language Settings */}
{props.selectedPreference === 'dateLanguage' &&
<>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('site.title')}:`}
</p>
<Input
type='text'
placeholder={translate('name')}
value={localAdminPref.displayTitle}
onChange={e => makeLocalChanges('displayTitle', e.target.value)}
maxLength={50} />
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
<FormattedMessage id='default.help.url' />:
</p>
<Input
type='text'
value={localAdminPref.defaultHelpUrl}
onChange={e => makeLocalChanges('defaultHelpUrl', e.target.value)} />
</div>

{/* Date/Language Settings */}
<div>
<p style={labelStyle}>
{translate('default.language')}
@@ -274,8 +172,7 @@ export default function PreferencesComponent(props: PreferencesProps) {
name='languageTypes'
value={LanguageTypes.en}
onChange={e => makeLocalChanges('defaultLanguage', e.target.value)}
checked={localAdminPref.defaultLanguage === LanguageTypes.en}
/>
checked={localAdminPref.defaultLanguage === LanguageTypes.en} />
English
</label>
</div>
@@ -287,8 +184,7 @@ export default function PreferencesComponent(props: PreferencesProps) {
name='languageTypes'
value={LanguageTypes.fr}
onChange={e => makeLocalChanges('defaultLanguage', e.target.value)}
checked={localAdminPref.defaultLanguage === LanguageTypes.fr}
/>
checked={localAdminPref.defaultLanguage === LanguageTypes.fr} />
Français
</label>
</div>
@@ -300,8 +196,7 @@ export default function PreferencesComponent(props: PreferencesProps) {
name='languageTypes'
value={LanguageTypes.es}
onChange={e => makeLocalChanges('defaultLanguage', e.target.value)}
checked={localAdminPref.defaultLanguage === LanguageTypes.es}
/>
checked={localAdminPref.defaultLanguage === LanguageTypes.es} />
Español
</label>
</div>
@@ -314,47 +209,137 @@ export default function PreferencesComponent(props: PreferencesProps) {
current={localAdminPref.defaultTimezone}
handleClick={e => makeLocalChanges('defaultTimezone', e)} />
</div>

{/* File Settings */}
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.warning.file.size')}:`}
</p>
<Input
type='number'
value={localAdminPref.defaultWarningFileSize}
onChange={e => makeLocalChanges('defaultWarningFileSize', e.target.value)}
maxLength={50} />
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.file.size.limit')}:`}
</p>
<Input
type='number'
value={localAdminPref.defaultFileSizeLimit}
onChange={e => makeLocalChanges('defaultFileSizeLimit', e.target.value)}
maxLength={50} />
</div>
</>
}
{/* File Settings */}
{props.selectedPreference === 'file' &&
<>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.warning.file.size')}:`}
</p>
<Input
type='number'
value={localAdminPref.defaultWarningFileSize}
onChange={e => makeLocalChanges('defaultWarningFileSize', e.target.value)}
maxLength={50}
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.file.size.limit')}:`}
</p>
<Input
type='number'
value={localAdminPref.defaultFileSizeLimit}
onChange={e => makeLocalChanges('defaultFileSizeLimit', e.target.value)}
maxLength={50}
/>
</div>
</>

{/* Meter Settings */}

{
props.selectedPreference === 'meter' &&
<>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.meter.reading.frequency')}:`}
</p>
<Input
type='text'
value={localAdminPref.defaultMeterReadingFrequency}
onChange={e => makeLocalChanges('defaultMeterReadingFrequency', e.target.value)}
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.meter.minimum.value')}:`}
</p>
<Input
type='number'
value={localAdminPref.defaultMeterMinimumValue}
onChange={e => makeLocalChanges('defaultMeterMinimumValue', e.target.value)}
maxLength={50}
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.meter.maximum.value')}:`}
</p>
<Input
type='number'
value={localAdminPref.defaultMeterMaximumValue}
onChange={e => makeLocalChanges('defaultMeterMaximumValue', e.target.value)}
maxLength={50}
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.meter.minimum.date')}:`}
</p>
<Input
type='text'
value={localAdminPref.defaultMeterMinimumDate}
onChange={e => makeLocalChanges('defaultMeterMinimumDate', e.target.value)}
placeholder='YYYY-MM-DD HH:MM:SS'
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.meter.maximum.date')}:`}
</p>
<Input
type='text'
value={localAdminPref.defaultMeterMaximumDate}
onChange={e => makeLocalChanges('defaultMeterMaximumDate', e.target.value)}
placeholder='YYYY-MM-DD HH:MM:SS'
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.meter.reading.gap')}:`}
</p>
<Input
type='number'
value={localAdminPref.defaultMeterReadingGap}
onChange={e => makeLocalChanges('defaultMeterReadingGap', e.target.value)}
maxLength={50}
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.meter.maximum.errors')}:`}
</p>
<Input
type='number'
value={localAdminPref.defaultMeterMaximumErrors}
onChange={e => makeLocalChanges('defaultMeterMaximumErrors', e.target.value)}
maxLength={50}
/>
</div>
<div style={bottomPaddingStyle}>
<p style={titleStyle}>
{`${translate('default.meter.disable.checks')}:`}
</p>
<Input
type='select'
value={localAdminPref.defaultMeterDisableChecks?.toString()}
onChange={e => makeLocalChanges('defaultMeterDisableChecks', e.target.value)}>
{Object.keys(TrueFalseType).map(key => {
return (<option value={key} key={key}>{translate(`TrueFalseType.${key}`)}</option>);
})}
</Input>
</div>
</>
}
<Button
type='submit'
onClick={() =>
submitPreferences(localAdminPref)
.unwrap()
.then(() => {
showSuccessNotification(translate('updated.preferences'));
})
.catch(() => {
showErrorNotification(translate('failed.to.submit.changes'));
})
}
onClick={() => submitPreferences(localAdminPref)
.unwrap()
.then(() => {
showSuccessNotification(translate('updated.preferences'));
})
.catch(() => {
showErrorNotification(translate('failed.to.submit.changes'));
})}
disabled={!hasChanges}
>
{translate('submit')}