time varying conversion/ frontend

src/client/app/components/HeaderButtonsComponent.tsx

@@ -11,15 +11,15 @@ import TooltipHelpComponent from '../components/TooltipHelpComponent';
 import { clearGraphHistory } from '../redux/actions/extraActions';
 import { authApi } from '../redux/api/authApi';
 import { selectOEDVersion } from '../redux/api/versionApi';
+import { useTranslate } from '../redux/componentHooks';
 import { useAppDispatch, useAppSelector } from '../redux/reduxHooks';
 import { selectHelpUrl } from '../redux/slices/adminSlice';
 import { selectOptionsVisibility, toggleOptionsVisibility } from '../redux/slices/appStateSlice';
 import { selectHasRolePermissions, selectIsAdmin, selectIsLoggedIn } from '../redux/slices/currentUserSlice';
 import { UserRole } from '../types/items';
-import { useTranslate } from '../redux/componentHooks';
 import LanguageSelectorComponent from './LanguageSelectorComponent';
-import TooltipMarkerComponent from './TooltipMarkerComponent';
 import LoginComponent from './LoginComponent';
+import TooltipMarkerComponent from './TooltipMarkerComponent';
 
 /**
  * React Component that defines the header buttons at the top of a page
@@ -64,6 +64,8 @@ export default function HeaderButtonsComponent() {
 		shouldCSVReadingsButtonDisabled: true,
 		shouldUnitsButtonDisabled: true,
 		shouldConversionsButtonDisabled: true,
+		shouldDaysButtonDisabled: true,
+		shouldWeeksButtonDisabled: true,
 		shouldLogMsgButtonDisabled: true,
 		shouldVisualUnitMapButtonDisabled: true,
 		// Translated menu title that depend on whether logged in.
@@ -102,6 +104,8 @@ export default function HeaderButtonsComponent() {
 			shouldCSVReadingsButtonDisabled: pathname === '/csvReadings',
 			shouldUnitsButtonDisabled: pathname === '/units',
 			shouldConversionsButtonDisabled: pathname === '/conversions',
+			shouldDaysButtonDisabled: pathname === '/days',
+			shouldWeeksButtonDisabled: pathname === '/weeks',
 			shouldLogMsgButtonDisabled: pathname === '/logmsg',
 			shouldVisualUnitMapButtonDisabled: pathname === '/visual-unit'
 		}));
@@ -224,6 +228,20 @@ export default function HeaderButtonsComponent() {
 								to="/meters">
 								<FormattedMessage id='meters' />
 							</DropdownItem>
+							<DropdownItem
+								style={state.adminViewableLinkStyle}
+								disabled={state.shouldDaysButtonDisabled}
+								tag={Link}
+								to="/days">
+								<FormattedMessage id='patterns.daily' />
+							</DropdownItem>
+							<DropdownItem
+								style={state.adminViewableLinkStyle}
+								disabled={state.shouldWeeksButtonDisabled}
+								tag={Link}
+								to="/weeks">
+								<FormattedMessage id='patterns.weekly' />
+							</DropdownItem>
 							<DropdownItem
 								style={state.adminViewableLinkStyle}
 								disabled={state.shouldUnitsButtonDisabled}
@@ -322,4 +340,4 @@ export default function HeaderButtonsComponent() {
 
 		</div>
 	);
-}
+}

src/client/app/components/RouteComponent.tsx

@@ -4,29 +4,31 @@
 import * as React from 'react';
 import { IntlProvider } from 'react-intl';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
-import ReadingsCSVUploadComponent from '../components/csv/ReadingsCSVUploadComponent';
 import MetersCSVUploadComponent from '../components/csv/MetersCSVUploadComponent';
+import ReadingsCSVUploadComponent from '../components/csv/ReadingsCSVUploadComponent';
 import MapCalibrationContainer from '../containers/maps/MapCalibrationContainer';
 import MapsDetailContainer from '../containers/maps/MapsDetailContainer';
 import { useAppSelector } from '../redux/reduxHooks';
+import { selectSelectedLanguage } from '../redux/slices/appStateSlice';
 import LocaleTranslationData from '../translations/data';
 import { UserRole } from '../types/items';
 import AppLayout from './AppLayout';
 import HomeComponent from './HomeComponent';
 import AdminComponent from './admin/AdminComponent';
+import LogMsgComponent from './admin/LogMsgComponent';
 import UsersDetailComponent from './admin/users/UsersDetailComponent';
 import ConversionsDetailComponent from './conversion/ConversionsDetailComponent';
+import DaysDetailComponent from './days/DaysDetailComponent';
 import GroupsDetailComponent from './groups/GroupsDetailComponent';
 import MetersDetailComponent from './meters/MetersDetailComponent';
 import AdminOutlet from './router/AdminOutlet';
+import ErrorComponent from './router/ErrorComponent';
 import { GraphLink } from './router/GraphLinkComponent';
 import NotFound from './router/NotFoundOutlet';
 import RoleOutlet from './router/RoleOutlet';
 import UnitsDetailComponent from './unit/UnitsDetailComponent';
-import ErrorComponent from './router/ErrorComponent';
-import { selectSelectedLanguage } from '../redux/slices/appStateSlice';
-import LogMsgComponent from './admin/LogMsgComponent';
 import VisualUnitDetailComponent from './visual-unit/VisualUnitDetailComponent';
+import WeeksDetailComponent from './weeks/WeeksDetailComponent';
 
 /**
  * @returns the router component Responsible for client side routing.
@@ -57,13 +59,15 @@ const router = createBrowserRouter([
 					{ path: 'admin', element: <AdminComponent /> },
 					{ path: 'calibration', element: <MapCalibrationContainer /> },
 					{ path: 'conversions', element: <ConversionsDetailComponent /> },
+					{ path: 'days', element: <DaysDetailComponent /> },
+					{ path: 'weeks', element: <WeeksDetailComponent /> },
 					{ path: 'csvMeters', element: <MetersCSVUploadComponent /> },
 					{ path: 'maps', element: <MapsDetailContainer /> },
 					{ path: 'units', element: <UnitsDetailComponent /> },
 					{ path: 'users', element: <UsersDetailComponent /> },
 					{ path: 'logmsg', element: <LogMsgComponent /> },
 					{ path: 'users', element: <UsersDetailComponent /> },
-					{ path: 'visual-unit', element: <VisualUnitDetailComponent/> }
+					{ path: 'visual-unit', element: <VisualUnitDetailComponent /> }
 				]
 			},
 			{

src/client/app/components/TooltipHelpComponent.tsx

@@ -6,10 +6,10 @@ import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 import { selectOEDVersion } from '../redux/api/versionApi';
+import { useTranslate } from '../redux/componentHooks';
 import { useAppSelector } from '../redux/reduxHooks';
 import { selectHelpUrl } from '../redux/slices/adminSlice';
 import '../styles/tooltip.css';
-import { useTranslate } from '../redux/componentHooks';
 
 interface TooltipHelpProps {
 	page: string; // Specifies which page the tip is in.
@@ -32,6 +32,9 @@ export default function TooltipHelpComponent(props: TooltipHelpProps) {
 		'help.admin.conversioncreate': { link: `${helpUrl}/adminConversionCreating/` },
 		'help.admin.conversionedit': { link: `${helpUrl}/adminConversionEditing/` },
 		'help.admin.conversionview': { link: `${helpUrl}/adminConversionViewing/` },
+		'help.admin.daycreate': { link: `${helpUrl}` }, // TODO: Add specific link for day creation
+		'help.admin.dayedit': { link: `${helpUrl}` }, // TODO: Add specific link for day editing
+		'help.admin.dayview': { link: `${helpUrl}` }, // TODO: Add specific link for day viewing
 		'help.admin.groupcreate': { link: `${helpUrl}/adminGroupCreating/` },
 		'help.admin.groupedit': { link: `${helpUrl}/adminGroupEditing/` },
 		'help.admin.groupview': { link: `${helpUrl}/adminGroupViewing/` },
@@ -44,6 +47,9 @@ export default function TooltipHelpComponent(props: TooltipHelpProps) {
 		'help.admin.unitedit': { link: `${helpUrl}/adminUnitEditing/` },
 		'help.admin.unitview': { link: `${helpUrl}/adminUnitViewing/` },
 		'help.admin.users': { link: `${helpUrl}/adminUser/` },
+		'help.admin.weekcreate': { link: `${helpUrl}` }, // TODO: Add specific link for week creation
+		'help.admin.weekedit': { link: `${helpUrl}` }, // TODO: Add specific link for week editing
+		'help.admin.weekview': { link: `${helpUrl}` }, // TODO: Add specific link for week viewing
 		'help.csv.meters': { link: `${helpUrl}/adminMetersImport/` },
 		'help.csv.readings': { link: `${helpUrl}/adminReadingsImport/` },
 		'help.home.area.normalize': { link: `${helpUrl}/areaNormalization/` },

src/client/app/components/admin/LogMsgComponent.tsx

@@ -20,9 +20,10 @@ import { TimeInterval } from '../../../../common/TimeInterval';
 import { dateRangeToTimeInterval, timeIntervalToDateRange } from '../../utils/dateRangeCompatibility';
 import { titleStyle } from '../../styles/modalStyle';
 import { useTranslate } from '../../redux/componentHooks';
+import { ROWS_PER_TABLE } from '../../utils/pagination';
 
 // number of log messages to display per page
-const PER_PAGE = 20;
+const PER_PAGE = ROWS_PER_TABLE;
 
 enum LogTypes {
 	ERROR = 'ERROR',

src/client/app/components/conversion/ConversionViewComponent.tsx

@@ -60,12 +60,6 @@ export default function ConversionViewComponent(props: ConversionViewComponentPr
 			<div className={props.conversion.bidirectional.toString()}>
 				<b><FormattedMessage id="conversion.bidirectional" /></b> {translate(`TrueFalseType.${props.conversion.bidirectional.toString()}`)}
 			</div>
-			<div className="item-container">
-				<b><FormattedMessage id="conversion.slope" /></b> {props.conversion.slope}
-			</div>
-			<div className="item-container">
-				<b><FormattedMessage id="conversion.intercept" /></b> {props.conversion.intercept}
-			</div>
 			<div className="item-container">
 				{/* Only show first 30 characters so card does not get too big. Should limit to one line */}
 				<b><FormattedMessage id="note" /></b> {props.conversion.note.slice(0, 29)}