Network latency

japj · May 10, 2020 · 6fbf629 · 6fbf629
1 parent 36f5b24
commit 6fbf629
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 2 deletions.
diff --git a/src/client/PingChecker.tsx b/src/client/PingChecker.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+
+import { Button } from '@material-ui/core';
+
+import ping from './ping';
+
+const PING_HOST = 'rehearse20.sijben.dev'
+
+const PingChecker = () => {
+    const [isPinging, setIsPingBusy] = useState(false);
+  const [averagePing, setAveragePing] = useState(0);
+
+  const startPing = () => {
+    setIsPingBusy(true);
+    setAveragePing(undefined);
+    ping(PING_HOST).then(results => {
+      setIsPingBusy(false);
+      setAveragePing(results.avg);
+    });
+  };
+
+  return (
+    <div>
+      Check network latency:
+      <Button onClick={startPing}>Start</Button>
+      {isPinging  ? 'Measuring ...' : ''}
+      {averagePing ? `${averagePing} msec.` : ''}
+    </div>
+  );
+};
+
+export default PingChecker;
diff --git a/src/client/index.tsx b/src/client/index.tsx
@@ -5,6 +5,7 @@ import {
   Button,
   Container,
   CssBaseline,
+  Link,
   TextField,
   Typography,
 } from '@material-ui/core';
@@ -13,8 +14,11 @@ import {
   makeStyles,
   ThemeProvider,
 } from '@material-ui/core/styles';
+import * as color from '@material-ui/core/colors';
 
-const theme = createMuiTheme({ palette: { type: 'dark' } });
+const theme = createMuiTheme({
+  palette: { type: 'dark', primary: { main: color.lightBlue['300'] } },
+});
 
 const useStyles = makeStyles((theme) => ({
   paper: {
@@ -98,6 +102,7 @@ const Index = () => {
               Enter
             </Button>
           </form>
+          <Link href="settings.html">Settings</Link>
         </div>
       </Container>
     </ThemeProvider>

diff --git a/src/client/ping.ts b/src/client/ping.ts
@@ -1,6 +1,12 @@
 import child_process from 'child_process';
 
-export default function ping(target) {
+interface PingResults {
+  min: number;
+  avg: number;
+  max: number;
+}
+
+export default function ping(target): Promise<PingResults> {
   return new Promise((resolve) => {
     let min, avg, max;
     const args =

diff --git a/src/client/settings.html b/src/client/settings.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+  <link rel="stylesheet" href="node_modules/typeface-roboto/index.css" />
+  <title>Rehearse 2.0 - Settings</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+<script>
+  require('./settings.js');
+</script>
+
+</html>
diff --git a/src/client/settings.tsx b/src/client/settings.tsx
@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+
+import {
+  Button,
+  Container,
+  CssBaseline,
+  Link,
+  TextField,
+  Typography,
+} from '@material-ui/core';
+import {
+  createMuiTheme,
+  makeStyles,
+  ThemeProvider,
+} from '@material-ui/core/styles';
+import * as color from '@material-ui/core/colors';
+
+import PingChecker from './PingChecker';
+
+const theme = createMuiTheme({
+  palette: { type: 'dark', primary: { main: color.lightBlue['300'] } },
+});
+
+const useStyles = makeStyles((theme) => ({
+  paper: {
+    marginTop: theme.spacing(8),
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  form: {
+    width: '100%', // Fix IE 11 issue.
+    marginTop: theme.spacing(1),
+  },
+  submit: {},
+}));
+
+const Settings = () => {
+  const classes = useStyles();
+
+  return (
+    <ThemeProvider theme={theme}>
+      <PingChecker />
+      <Link href="index.html">&lt; Back</Link>
+    </ThemeProvider>
+  );
+};
+
+ReactDOM.render(<Settings />, document.getElementById('root'));