Update Base Calculator

* add base 8 * add settings for edit textField display * change style switch in dialog setting * edit settings button for is general * full screen for phone size
Melvynx · Jan 21, 2020 · 652ea22 · 652ea22 · Melvynx · Jan 21, 2020
1 parent 37bf5f5
commit 652ea22
Show file tree

Hide file tree

Showing 15 changed files with 457 additions and 118 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+PUBLIC_URL=/tools
diff --git a/404.md b/404.md
@@ -0,0 +1,3 @@
+---
+permalink: /404.html
+---
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "projetq",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://melvynx.github.io/tools/",
   "dependencies": {
     "@material-ui/core": "^4.8.1",
     "@material-ui/icons": "^4.5.1",
@@ -26,7 +27,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "predeploy": "yarn build",
+    "deploy": "npx gh-pages -d build"
   },
   "eslintConfig": {
     "extends": "react-app"

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 
-import { CssBaseline, ThemeProvider, createMuiTheme, Container } from "@material-ui/core";
+import { CssBaseline, ThemeProvider, createMuiTheme } from "@material-ui/core";
 import { purple } from "@material-ui/core/colors";
-import { Switch, BrowserRouter as Router, Route } from "react-router-dom";
+import { Switch, HashRouter as Router, Route } from "react-router-dom";
 import RandomSentence from "./page/RandomSentence";
 import HomePage from "./page/HomePage";
 import BaseCalculator from "./page/BaseCalculator";
@@ -44,22 +44,20 @@ export default function App() {
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <Container>
-        <Router>
-          <Switch>
-            <Route path="/randomWord">
-              <RandomSentence />
-            </Route>
-            <Route path="/transform">
-              <BaseCalculator />
-            </Route>
-            <Route path="/test"></Route>
-            <Route path="/">
-              <HomePage />
-            </Route>
-          </Switch>
-        </Router>
-      </Container>
+      <Router basename="/tools">
+        <Switch>
+          <Route path="/randomWord">
+            <RandomSentence />
+          </Route>
+          <Route path="/transform">
+            <BaseCalculator />
+          </Route>
+          <Route path="/test"></Route>
+          <Route path="/">
+            <HomePage />
+          </Route>
+        </Switch>
+      </Router>
     </ThemeProvider>
   );
 }
diff --git a/src/components/Custom/CustomSwitch.tsx b/src/components/Custom/CustomSwitch.tsx
@@ -0,0 +1,74 @@
+import React from "react";
+import { withStyles, createStyles, Theme } from "@material-ui/core/styles";
+import Switch, { SwitchClassKey, SwitchProps } from "@material-ui/core/Switch";
+
+interface Styles extends Partial<Record<SwitchClassKey, string>> {
+  focusVisible?: string;
+}
+interface Props extends SwitchProps {
+  classes: Styles;
+}
+export const CustomSwitch = withStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: 60,
+      height: 30,
+      padding: 0,
+      margin: theme.spacing(1)
+    },
+    switchBase: {
+      padding: 1,
+      color: theme.palette.primary.main,
+      "&$checked": {
+        transform: "translateX(35px)",
+        color: theme.palette.secondary.main,
+        backgroundColor: "none",
+        "& + $track": {
+          backgroundColor: theme.palette.primary.light,
+          opacity: 1,
+          border: `1px solid ${theme.palette.primary.main}`
+        }
+      },
+      "&$focusVisible $thumb": {
+        color: "orange",
+        border: "6px solid red",
+        boxShadow: "none"
+      }
+    },
+    thumb: {
+      width: 20,
+      height: 20,
+      marginTop: 4,
+      marginLeft: 2
+    },
+    track: {
+      borderRadius: 10 / 2,
+      border: `1px solid ${theme.palette.secondary.light}`,
+      backgroundColor: theme.palette.secondary.main,
+      opacity: 1,
+      transition: theme.transitions.create(["background-color", "border"])
+    },
+    checked: {
+      backgroundColor: "none",
+      color: "red"
+    },
+    focusVisible: {
+      color: "red"
+    }
+  })
+)(({ classes, ...props }: Props) => {
+  return (
+    <Switch
+      focusVisibleClassName={classes.focusVisible}
+      disableRipple
+      classes={{
+        root: classes.root,
+        switchBase: classes.switchBase,
+        thumb: classes.thumb,
+        track: classes.track,
+        checked: classes.checked
+      }}
+      {...props}
+    />
+  );
+});
diff --git a/src/components/Custom/CustomTextField.tsx b/src/components/Custom/CustomTextField.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import {
+  TextField,
+  makeStyles,
+  fade,
+  TextFieldProps,
+  OutlinedInputProps,
+} from "@material-ui/core";
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    border: "1px solid " + theme.palette.primary.dark,
+    color: theme.palette.primary.light,
+    padding: 2,
+    paddingLeft: 6,
+    fontSize: 18,
+    overflow: "hidden",
+    borderRadius: 3,
+    backgroundColor: theme.palette.secondary.main,
+    transition: theme.transitions.create(["border-color", "box-shadow"]),
+    "&:hover": {
+      backgroundColor: theme.palette.secondary.main
+    },
+    "&$focused": {
+      backgroundColor: theme.palette.secondary.dark,
+      boxShadow: `${fade(theme.palette.secondary.main, 0.25)} 2px 0 0 2px`,
+      borderColor: theme.palette.secondary.main
+    }
+  }
+}));
+
+export default function CustomTextField(props: TextFieldProps) {
+  const classes = useStyles();
+
+  return (
+    <TextField
+      InputProps={{ classes, disableUnderline: true } as Partial<OutlinedInputProps>}
+      {...props}
+    />
+  );
+}
diff --git a/src/components/baseCalculator/Calculator.tsx b/src/components/baseCalculator/Calculator.tsx
@@ -10,9 +10,17 @@ import {
   dec_to_hexa,
   isHexadecimal,
   hexa_to_dec,
-  hexa_to_bin
+  hexa_to_bin,
+  isOctal,
+  oct_to_bin,
+  oct_to_dec,
+  oct_to_hexa,
+  hexa_to_oct,
+  dec_to_oct,
+  bin_to_oct
 } from "../function";
 import { Alert } from "@material-ui/lab";
+import { TypeSettings } from "../../page/BaseCalculator";
 
 type TypeValue = {
   value: string;
@@ -26,9 +34,14 @@ export enum Base {
   base2 = "base 2"
 }
 
-export default function Calculator() {
+type TypeCalculator = {
+  settings: TypeSettings;
+};
+
+export default function Calculator({ settings }: TypeCalculator) {
   const [base2, setBase2] = useState<string>("");
   const [base10, setBase10] = useState<string>("");
+  const [base8, setBase8] = useState<string>("");
   const [base16, setBase16] = useState<string>("");
 
   const [errorMessage, setErrorMessage] = useState<string>("");
@@ -56,10 +69,17 @@ export default function Calculator() {
     hexadecimalConvertor(event.target.value);
   };
 
+  const changeBase8 = (event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+    setBase8(event.target.value);
+
+    octalConvertor(event.target.value);
+  };
+
   const binaryConvertor = (value: string) => {
     if (isBinary(value)) {
       setBase10(String(bin_to_dec(value)));
       setBase16(bin_to_hexa(value));
+      setBase8(bin_to_oct(value));
     } else {
       displayErrorMessage("Binary number is null or invalid (only 0 and 1).");
     }
@@ -69,6 +89,7 @@ export default function Calculator() {
     if (isDecimal(value)) {
       setBase2(dec_to_bin(value));
       setBase16(dec_to_hexa(value));
+      setBase8(dec_to_oct(value));
     } else {
       displayErrorMessage("Decimal number is null or invalid (only 0 to 9).");
     }
@@ -78,18 +99,52 @@ export default function Calculator() {
     if (isHexadecimal(value)) {
       setBase2(String(hexa_to_bin(value)));
       setBase10(String(hexa_to_dec(value)));
+      setBase8(String(hexa_to_oct(value)));
     } else {
       displayErrorMessage("Hexadecimal number is null or invalid (only 0 to 9 and A to F)");
     }
   };
 
+  const octalConvertor = (value: string) => {
+    console.log(isOctal(value));
+    if (isOctal(value)) {
+      setBase2(oct_to_bin(value));
+      setBase10(String(oct_to_dec(value)));
+      setBase16(oct_to_hexa(value));
+    } else {
+      displayErrorMessage("Octal number is null or invalid (only 0 to 7)");
+    }
+  };
+
   return (
     <Box mt={2}>
-      <InputBaseCalcul onChange={changeBase2} base="Binary" value={base2}></InputBaseCalcul>
-
-      <InputBaseCalcul onChange={changeBase10} base="Decimal" value={base10}></InputBaseCalcul>
-
-      <InputBaseCalcul onChange={changeBase16} base="Hexadecimal" value={base16}></InputBaseCalcul>
+      <InputBaseCalcul
+        display={settings.displayBase2}
+        onChange={changeBase2}
+        base="Binary"
+        value={base2}
+      ></InputBaseCalcul>
+
+      <InputBaseCalcul
+        display={settings.displayBase8}
+        onChange={changeBase8}
+        base="Octale"
+        value={base8}
+      ></InputBaseCalcul>
+
+      <InputBaseCalcul
+        display={settings.displayBase10}
+        onChange={changeBase10}
+        base="Decimal"
+        value={base10}
+      ></InputBaseCalcul>
+
+      <InputBaseCalcul
+        display={settings.displayBase16}
+        onChange={changeBase16}
+        base="Hexadecimal"
+        value={base16}
+      ></InputBaseCalcul>
 
       <Box height={50} width="100%">
         <Fade in={errorMessage.length > 0}>

diff --git a/src/components/baseCalculator/InputBaseCalcul.tsx b/src/components/baseCalculator/InputBaseCalcul.tsx
@@ -1,68 +1,35 @@
 import React from "react";
-import {
-  Box,
-  TextField,
-  makeStyles,
-  fade,
-  TextFieldProps,
-  OutlinedInputProps,
-  InputLabel
-} from "@material-ui/core";
+import { Box, makeStyles, InputLabel } from "@material-ui/core";
+import CustomTextField from "../Custom/CustomTextField";
 
 type TypeInputBaseCalcul = {
   value: string;
   base: string;
   onChange: Function;
   error?: boolean;
+  display?: boolean;
 };
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    border: "1px solid " + theme.palette.primary.dark,
-    color: theme.palette.primary.light,
-    padding: 2,
-    paddingLeft: 6,
-    fontSize: 18,
-    overflow: "hidden",
-    borderRadius: 3,
-    backgroundColor: theme.palette.secondary.main,
-    transition: theme.transitions.create(["border-color", "box-shadow"]),
-    "&:hover": {
-      backgroundColor: theme.palette.secondary.main
-    },
-    "&$focused": {
-      backgroundColor: theme.palette.secondary.dark,
-      boxShadow: `${fade(theme.palette.secondary.main, 0.25)} 2px 0 0 2px`,
-      borderColor: theme.palette.secondary.main
-    }
-  }
-}));
-
-function CustomTextField(props: TextFieldProps) {
-  const classes = useStyles();
-
-  return (
-    <TextField
-      InputProps={{ classes, disableUnderline: true } as Partial<OutlinedInputProps>}
-      {...props}
-    />
-  );
-}
-
 const useStylesInput = makeStyles(theme => ({
   input: {
     fontSize: 12,
     color: theme.palette.primary.main
   }
 }));
 
-export default function InputBaseCalcul({ value, base, onChange, error }: TypeInputBaseCalcul) {
+export default function InputBaseCalcul({
+  display,
+  value,
+  base,
+  onChange,
+  error
+}: TypeInputBaseCalcul) {
   const classes = useStylesInput();
   return (
-    <Box width="100%" m={1} pr={3}>
+    <Box width="100%" m={1} pr={3} display={display ? "block" : "none"}>
       <InputLabel className={classes.input}>{base}</InputLabel>
       <CustomTextField
-        id="bootstrap-input"
+        id="Input for number"
         error={error}
         onChange={event => onChange(event)}
         fullWidth