http://localhost:7433. To add a new server, Host must match the service name. In this case, cvr-postgres. However, port should be the internal port 5432
33 |
34 | To just run the whole thing from a container (in development mode)
35 | ```
36 | docker compose up -d
37 | ```
38 |
--------------------------------------------------------------------------------
/Registry/DependencyRegistry.cs:
--------------------------------------------------------------------------------
1 | using Microsoft.Extensions.DependencyInjection;
2 | using Services.Telemetry;
3 | using Shared.Configuration;
4 | using Shared.Telemetry;
5 |
6 | namespace Registry;
7 |
8 | public class DependencyRegistry : IDependencyRegistry
9 | {
10 | public void Register(IServiceCollection services)
11 | {
12 | services.AddSingleton
16 |
17 |
19 |
}
31 | >
32 |
21 | Home
22 | Telemetry
23 | {
24 | !user.token && Login
25 | }
26 |
27 |
28 |
30 |
26 |
30 | );
31 | }
32 |
33 | return overlay ?
27 | {children}
28 |
29 | onClose(id)}>
23 | {message}
24 |
25 | )
26 | }
--------------------------------------------------------------------------------
/client/src/components/toast/ToastContainer.tsx:
--------------------------------------------------------------------------------
1 | import { Toast } from './Toast';
2 | import { useAppDispatch } from '@/hooks';
3 |
4 | import './Toast.css';
5 |
6 | type ToastContainerProps = {
7 | toasts: Toast[];
8 | };
9 |
10 | export const ToastContainer = ({toasts}:ToastContainerProps) => {
11 | const dispatch = useAppDispatch();
12 |
13 | const onClose = (id: string) => {
14 | // rather import action creator from store, keep it simple
15 | // and self-contained
16 | dispatch({
17 | type: 'app/closeToast',
18 | payload: id
19 | });
20 | };
21 |
22 | return (
23 |
24 | {toasts.map((toast, n) =>
26 | );
27 | }
--------------------------------------------------------------------------------
/client/src/hooks/app.ts:
--------------------------------------------------------------------------------
1 | import { useDispatch, useSelector } from 'react-redux';
2 | import type { TypedUseSelectorHook } from 'react-redux';
3 | import type { RootState, AppDispatch } from '@/app/store';
4 |
5 | import { toast } from '@/app/appSlice';
6 |
7 | export const useAppDispatch: () => AppDispatch = useDispatch;
8 | export const useAppSelector: TypedUseSelectorHookLogin
34 |
35 |
57 |
58 | {!registered &&
59 |
36 |
42 |
43 |
44 |
51 |
52 |
56 |
60 | Register
61 |
62 | }
63 |
64 | );
65 | }
--------------------------------------------------------------------------------
/client/src/pages/auth/Register.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { NavLink, useNavigate } from 'react-router-dom';
3 | import { useAppDispatch, useToast } from '@/hooks';
4 | import { registered} from '@/app/appSlice';
5 | import { Button, Input } from '@/components';
6 | import * as API from '@/app/API';
7 |
8 | export const Register = () => {
9 | const dispatch = useAppDispatch();
10 | const navigate = useNavigate();
11 | const toast = useToast();
12 | const [email, setEmail] = useState('');
13 | const [userName, setUserName] = useState('');
14 | const [password, setPassword] = useState('');
15 | const [confirm, setConfirm] = useState('');
16 |
17 | const isValid = !!email?.length && !!password?.length && password === confirm;
18 |
19 | const onSubmit = async () => {
20 | const response = await API.register(email, userName, password);
21 |
22 | if (response.success) {
23 | // a litty dispatchy
24 | toast('Registration complete!', 'success');
25 | dispatch(registered(true));
26 | navigate('/auth/login');
27 | } else {
28 | response.errors.forEach(error => {
29 | toast(error, 'error');
30 | });
31 | }
32 | };
33 |
34 | return (
35 | <>
36 | Register
37 |
38 |
77 |
78 |
39 |
45 |
46 |
47 |
53 |
54 |
55 |
62 |
63 |
64 |
71 |
72 |
76 |
79 | Cancel
80 |
81 |
82 | );
83 | }
--------------------------------------------------------------------------------
/client/src/pages/home/Home.tsx:
--------------------------------------------------------------------------------
1 | import { useAppSelector, useAppDispatch } from '@/hooks';
2 | import { increment, selectCount } from './reducers/counterSlice';
3 | import { Button } from '@/components';
4 |
5 | export const Home = () => {
6 | // redux...just because
7 | const count = useAppSelector(selectCount);
8 | const dispatch = useAppDispatch();
9 |
10 | const onClick = () => {
11 | dispatch(increment());
12 | }
13 |
14 | return (
15 |
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/client/src/pages/home/reducers/counterSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit';
2 | import type { RootState } from '@/app/store';
3 |
4 | type CounterState = {
5 | value: number;
6 | };
7 |
8 | const initialState: CounterState = {
9 | value: 0
10 | };
11 |
12 | const counterSlice = createSlice({
13 | name: 'counter',
14 | initialState,
15 | reducers: {
16 | increment: (state) => {
17 | state.value += 1;
18 | }
19 | }
20 | });
21 |
22 | export const { increment } = counterSlice.actions;
23 |
24 | export const selectCount = (state: RootState) => state.counter.value;
25 |
26 | export default counterSlice.reducer;
--------------------------------------------------------------------------------
/client/src/pages/index.ts:
--------------------------------------------------------------------------------
1 | export { Home } from './home/Home';
2 | export { Telemetry } from './telemetry/Telemetry';
3 | export { Auth } from './auth/Auth';
4 |
--------------------------------------------------------------------------------
/client/src/pages/telemetry/Telemetry.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { formatDateTime } from '@/utilities/datetime';
3 | import { useToast } from '@/hooks';
4 | import { Loader } from '@/components';
5 | import { useTelemetryHub, useLatestValues } from '@/hooks';
6 |
7 | export const Telemetry = () => {
8 | // a real world scenario is that telemetry may be coming in at
9 | // various intervals(every 30 secs, 5 minutes, etc) so we grab
10 | // the latest values from the db so that the user can see
11 | // something
12 | //
13 | // this seems a little wonkey but this feels more composable than using
14 | // the thunk here
15 | const toast = useToast();
16 | const [data, loading, errors ] = useLatestValues();
17 | const ready = data?.length;
18 |
19 | useEffect(() => {
20 | errors.forEach(error => toast(error, 'error'));
21 | }, [errors]);
22 |
23 | useTelemetryHub(!!ready);
24 |
25 | return (
26 | loading ?
29 |
35 | :
36 | )
37 |
38 | };
39 |
40 | const TelemetryTable = (props: { data: TelemetryData[] }) => {
41 | return (
42 | Telemetry Data
30 |(updated every 5 sec)
31 |
32 |
34 | | Timestamp | 46 |Sensor | 47 |Value | 48 |Unit | 49 |
|---|---|---|---|
| {formatDateTime(data.timestamp)} | 55 |{data.sensor} | 56 |{data.value} | 57 |{data.unit} | 58 |