vatger/aman-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use the timestamp in the navigation bar

Browse Source
This commit is contained in:
Sven Czarnian
2022-11-04 14:08:16 +01:00
parent eef17b38eb
commit bf18e935c1
1 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/navbar.tsx
View File

@@ -1,15 +1,17 @@
import { Menubar } from 'primereact/menubar'; import { Menubar } from 'primereact/menubar';
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { AuthContext } from '../contexts'; import { AuthContext, TimeContext } from '../contexts';
import { Configuration } from '../services'; import { Configuration } from '../services';
import { Airport } from '../services'; import { Airport } from '../services';
import { AirportOverview } from '../types'; import { AirportOverview } from '../types';
export const NavBar: React.FC = () => { export const NavBar: React.FC = () => {
const [timestamp, setTimestamp] = useState<string>('');
const [fullName, setFullName] = useState<string>(''); const [fullName, setFullName] = useState<string>('');
const [menuTree, setMenuTree] = useState<any>(); const [menuTree, setMenuTree] = useState<any>();
const context = useContext(AuthContext); const authContext = useContext(AuthContext);
const timeContext = useContext(TimeContext);
const navigate = useNavigate(); const navigate = useNavigate();
const firBasedSubMenu = (airports: AirportOverview[], endpoint: string): any[] => { const firBasedSubMenu = (airports: AirportOverview[], endpoint: string): any[] => {
@@ -71,7 +73,7 @@ export const NavBar: React.FC = () => {
// collect all configuration airports // collect all configuration airports
const configurationAirports: AirportOverview[] = []; const configurationAirports: AirportOverview[] = [];
airports.forEach((airport) => { airports.forEach((airport) => {
const idx = context.auth.user.airportConfigurationAccess.findIndex((value) => airport.icao === value); const idx = authContext.auth.user.airportConfigurationAccess.findIndex((value) => airport.icao === value);
if (idx !== -1) configurationAirports.push(airport); if (idx !== -1) configurationAirports.push(airport);
}); });
@@ -81,7 +83,7 @@ export const NavBar: React.FC = () => {
newMenuTree[1].items = configurationSubtree; newMenuTree[1].items = configurationSubtree;
} }
if (context.auth.user.administrator) { if (authContext.auth.user.administrator) {
newMenuTree.push({ newMenuTree.push({
label: 'Administration', label: 'Administration',
items: [ items: [
@@ -112,18 +114,27 @@ export const NavBar: React.FC = () => {
updateMenuItems(); updateMenuItems();
} }
const timeInterval = setInterval(() => {
const serverUtcTime = new Date(new Date().getTime() + timeContext.offset);
const hours = String(serverUtcTime.getUTCHours()).padStart(2, '0');
const minutes = String(serverUtcTime.getUTCMinutes()).padStart(2, '0');
const seconds = String(serverUtcTime.getUTCSeconds()).padStart(2, '0');
setTimestamp(`${hours}:${minutes}:${seconds}`);
}, 1000);
return () => { return () => {
clearInterval(timeInterval);
event.close(); event.close();
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
useEffect(() => { useEffect(() => {
if (context.auth.valid) { if (authContext.auth.valid) {
if (context.auth.user.fullName !== '') { if (authContext.auth.user.fullName !== '') {
setFullName(context.auth.user.fullName); setFullName(authContext.auth.user.fullName);
} else { } else {
setFullName(context.auth.user.vatsimId); setFullName(authContext.auth.user.vatsimId);
} }
updateMenuItems(); updateMenuItems();
} else { } else {
@@ -131,11 +142,11 @@ export const NavBar: React.FC = () => {
setMenuTree([]); setMenuTree([]);
} }
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [context]); }, [authContext]);
const username = ( const rightSideInfo = (
fullName !== '' ? <div>{fullName}</div> : <></> <div>{fullName} | {timestamp}</div>
); );
return (fullName !== '' && menuTree.length !== 0 ? <Menubar model={menuTree} end={username} /> : <></>); return (fullName !== '' && menuTree.length !== 0 ? <Menubar model={menuTree} end={rightSideInfo} /> : <></>);
}; };