From dc3753849338915a0654457e506c91cb478bd0f0 Mon Sep 17 00:00:00 2001 From: Brecht Horn Date: Thu, 29 Jun 2023 12:41:31 -0700 Subject: [PATCH] cleans up files --- src/App.tsx | 7 +- src/Pages/Cluster.jsx | 19 +- src/Pages/Dashboard.tsx | 2 +- src/Pages/Glossary.jsx | 2 +- src/Pages/Login0.jsx | 162 ---- src/Pages/Setup.tsx | 1709 ++++++++++++++++++++--------------- src/Pages/Setup2.tsx | 1140 ----------------------- src/Pages/Setup3.tsx | 1367 ---------------------------- src/Pages/Signup.jsx | 368 ++++---- src/Pages/Signup2.jsx | 195 ---- src/components/Sidebar.jsx | 234 +++-- src/components/Sidebar2.jsx | 176 ---- src/components/Topbar.tsx | 158 +++- src/components/Topbar2.tsx | 137 --- 14 files changed, 1449 insertions(+), 4227 deletions(-) delete mode 100644 src/Pages/Login0.jsx delete mode 100644 src/Pages/Setup2.tsx delete mode 100644 src/Pages/Setup3.tsx delete mode 100644 src/Pages/Signup2.jsx delete mode 100644 src/components/Sidebar2.jsx delete mode 100644 src/components/Topbar2.tsx diff --git a/src/App.tsx b/src/App.tsx index 5bba17f..c3ca840 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,10 @@ -import Signup from './Pages/Signup2.jsx'; +import Signup from './Pages/Signup.jsx'; import Login from './Pages/Login.jsx'; import Cluster from './Pages/Cluster.jsx'; import { HashRouter, Route, Routes } from 'react-router-dom'; import Dashboard from './Pages/Dashboard.jsx'; -import Topbar from './components/Topbar2.jsx'; -import Setup from './Pages/Setup3.jsx'; +import Topbar from './components/Topbar.js'; +import Setup from './Pages/Setup.js'; import Glossary from './Pages/Glossary.jsx'; import { ColorModeContext, useMode } from './theme.js'; import { CssBaseline, ThemeProvider } from '@mui/material'; @@ -28,7 +28,6 @@ function App() { } /> } /> } /> - {/* } /> */} } /> diff --git a/src/Pages/Cluster.jsx b/src/Pages/Cluster.jsx index 075d8c5..2512efa 100644 --- a/src/Pages/Cluster.jsx +++ b/src/Pages/Cluster.jsx @@ -5,7 +5,7 @@ import { Box } from '@mui/system'; import { Typography, useTheme } from '@mui/material'; const { ipcRenderer } = require('electron'); import Grid from '@mui/system/Unstable_Grid'; -import SideNav from '../components/Sidebar2.jsx'; +import SideNav from '../components/Sidebar.jsx'; import LaunchIcon from '@mui/icons-material/Launch'; import { RadioButtonUnchecked } from '@mui/icons-material'; import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined'; @@ -324,9 +324,13 @@ function SetupButtons() { style={{ color: '#cf485b' }} /> - -
- CLICK HERE TO ATTEMPT TO KILL PORT 3000 + +
+ CLICK HERE TO ATTEMPT TO KILL PORT 3000

- ); } @@ -934,7 +937,7 @@ function SetupButtons() { color: '#2fc665', }} > - LOG IN THROUGH BROWSER{' '} + LOG IN THROUGH BROWSER{' '} @@ -1188,12 +1191,12 @@ function SetupButtons() { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', - alignItems:"center" + alignItems: 'center', }} >
{ - const response = await checkLogin(username, password); - - // If the request was successful, set the login state to true and redirect to the dashboard - if (!response.err) { - setLoggedIn(true); - navigate('/dashboard'); - } else { - // If the request was unsuccessful, send an alert to the user - alert('Wrong username or password'); - } - }; - callCheckLogin(); - } - - return ( - - - - - - Take command of Kubernetes. - - - - - - - {/* */} - Copyright © Kaptn 2023. - {/* */} - {/* */} - - - ); -} -export default Login; diff --git a/src/Pages/Setup.tsx b/src/Pages/Setup.tsx index dafcee6..5b48471 100644 --- a/src/Pages/Setup.tsx +++ b/src/Pages/Setup.tsx @@ -20,32 +20,21 @@ import { import { Box, styled, lighten, darken } from '@mui/system'; import Grid from '@mui/system/Unstable_Grid'; import CommandLine from '../components/CommandLine.jsx'; -import Terminal from '../components/Terminal.jsx'; -import Sidebar from '../components/Sidebar2.jsx'; +import Terminal from '../components/Terminal.js'; +import Sidebar from '../components/Sidebar.jsx'; import EastIcon from '@mui/icons-material/East'; import commands from '../components/commands.js'; import BoltIcon from '@mui/icons-material/Bolt'; import helpDesk from './Glossary.jsx'; import Switch from '@mui/material/Switch'; import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip'; +import StarIcon from '@mui/icons-material/Star'; +import StarOutlineIcon from '@mui/icons-material/StarOutline'; +import StarHalfIcon from '@mui/icons-material/StarHalf'; +// import { makeStyles } from '@mui/material'; const { ipcRenderer } = require('electron'); -const style = { - position: 'absolute', - top: '50%', - left: '50%', - transform: 'translate(-50%, -50%)', - width: '90%', - height: '90%', - bgcolor: '#2c1b63', - color: 'white', - boxShadow: 24, - p: 4, - padding: '10px', - borderRadius: '5px', -}; - const LightTooltip = styled(({ className, ...props }: TooltipProps) => ( ))(({ theme }) => ({ @@ -56,9 +45,6 @@ const LightTooltip = styled(({ className, ...props }: TooltipProps) => ( }, })); -//for step 4 text to appear below without eslint/prettier error, assigned to variable here -const step4 = `4. INPUT COMMANDS --->`; - //section header (e.g. beginner, intermediate, etc) rules for grouped "command" option const BeginnerHeader = styled('div')(({ theme }) => ({ position: 'sticky', @@ -67,7 +53,6 @@ const BeginnerHeader = styled('div')(({ theme }) => ({ margin: '0px', color: '#ffffff', backgroundColor: '#352a68', - webkitScrollbarColor: 'red yellow', })); //style for grouped commands @@ -78,7 +63,7 @@ const GroupItems = styled('ul')({ }); function Setup() { - const [tool, setTool] = useState(''); + const [tool, setTool] = useState('kubectl'); const [verb, setVerb] = React.useState(''); const [type, setType] = React.useState(''); const [name, setName] = React.useState(''); @@ -91,7 +76,7 @@ function Setup() { >([]); const [yamlOpen, setYamlOpen] = React.useState(false); const [imgPath, setImgPath] = useState('NONE ENTERED'); - const [imgField, setImgField] = useState('Enter .IMG'); + const [imgField, setImgField] = useState(''); const [flags, setFlags] = useState>([]); const [helpList, setHelpList] = useState>(['']); @@ -109,6 +94,21 @@ function Setup() { //for light/dark mode toggle const theme = useTheme(); + const style = { + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: '90%', + height: '90%', + bgcolor: theme.palette.mode === 'dark' ? '#2c1b63' : '#e9e5fa', + color: theme.palette.mode === 'dark' ? 'white' : '#47456e', + boxShadow: 24, + p: 4, + padding: '10px', + borderRadius: '5px', + }; + //maps grouped command options alphabetically including if numbered const options = commands.map((option) => { const firstLetter = commands[0].category; @@ -155,6 +155,13 @@ function Setup() { setName(value); }; + const handleImgChange = (event) => { + const { + target: { value }, + } = event; + setImgField(value); + }; + // Set current work directory, and short directory (for its visible label) const handleUploadDirectory = (event) => { let path = event.target.files[0].path.split(''); @@ -169,15 +176,13 @@ function Setup() { shortArr.unshift(absArr[i]); } shortArr.unshift('/'); - console.log('shortArr is', shortArr); let shortPath = shortArr.join('') + '/'; - console.log('shortpath is', shortPath); setShortDir('...' + shortPath); }; //sets image submission - const handleImgUpload = (event) => { - setImgPath(event.target.value); - setImgField('Image Entered'); + const handleImgUpload = (e) => { + setImgPath(imgField); + setImgField(''); }; // updates img text field as typed const handleImgField = (e) => { @@ -195,8 +200,8 @@ function Setup() { // const handleK8ToolChange = (event) => { setChecked(event.target.checked); - if (!checked) setTool('kubectl'); - else setTool(''); + if (checked) setTool(''); + else setTool('kubectl'); }; let k8tool = ''; @@ -288,797 +293,1073 @@ function Setup() { return ( <> - + +
- {/* ----------------SIDE BAR---------------- */} - - - {/* ----------------MAIN CONTENT---------------- */} - - {/* ----------------SELECTION BOXES---------------- */} - + {/* ----------EASY SETUP TITLE ------ */} +
- + EASY SETUP +
+
+
+ {/* --------------------------- IMAGE CREATION SECTION --------------------- */} +
-
- EASY SETUP -
- - +
+
- {/* --------------------------- IMAGE CREATION SECTION --------------------- */} -
- 1. IMPORT IMAGE -
-
-
+ >
-
- {imgPath} -
- :not(style)': { m: 1, width: '160px' }, - }} - noValidate - autoComplete='off' - > +
+ {imgPath} +
+ :not(style)': { m: 1, width: '160px' }, + }} + > + {' '} +
{ - ev.preventDefault(); - if (imgField === 'Enter .IMG') { - setImgField(ev.key); - } - // else if (ev.key === 'Enter') { - // // Do code here - // handleImgUpload(ev); - // } else { - // console.log('imgFIeld is', imgField); - - // console.log('imgPath is', imgPath); - // setImgField(imgField + ev.key); - // } - else { - if (ev.key === 'Enter') { - handleImgUpload(ev); - setImgField(imgField); - } else if ( - ev.key === 'Meta' || - ev.key === 'Alt' || - ev.key === 'Dead' || - ev.key === 'ArrowLeft' || - ev.key === 'ArrowUp' || - ev.key === 'ArrowDown' || - ev.key === 'ArrowRight' || - ev.key === 'Shift' - ) { - } else if (ev.key === 'Backspace') { - setImgField(imgField.slice(0, imgField.length - 1)); - } else { - setImgField(imgField + ev.key); - } - } - }} + onChange={(e) => handleImgField(e)} /> - +
- {/* ------------------- CHOOSE DIRECTORY SECTION ---------------------------- */} - + {/* ------------------- CHOOSE DIRECTORY SECTION ---------------------------- */} + +
-
- 2. CHOOSE WORKING DIRECTORY -
-
-
- {shortDir} -
- - - - {/* ------------------------- CREATE YAML SECTION ------------------------------- */} - +
+
-
- 3. CHOOSE/CREATE YAML FILE -
-
+ + + + {/* ------------------------- CREATE YAML SECTION ------------------------------- */} + +
+ 3. CHOOSE/CREATE YAML FILE +
+
- + {/* ----------- Backdrop is greyed out background during popup ----------------- */} + + {/* ------- Paper is modal / popup --------------------------------------- */} + - Configure .YAML FILE - - {/* ----------- Backdrop is greyed out background during popup ----------------- */} - - {/* ------- Paper is modal / popup --------------------------------------- */} -
-
- PLEASE USE THE TOOL BELOW TO CREATE YOUR .YAML FILE -
-
- Once you've finished, use the copy clipboard button in the - top right corner.
- Then click in the white space on either side to close the - popup, and continue following the instructions in the help - center. -
- - + PLEASE USE THE TOOL BELOW TO CREATE YOUR .YAML FILE +
+
+ Once you've finished, use the copy clipboard button in the + top right corner.
+ Then click in the blank space on either side of the popup to + close it, and continue following the instructions in the + learning center.
- - - - {/* --------------- STEP 4 INPUT COMMANDS --- TEXT ONLY -- SECTION ---------- */} - +
+ + + + {/* --------------- STEP 4 INPUT COMMANDS --- TEXT ONLY -- SECTION ---------- */} +
+
+ {/* ------------------ START OF TERMINAL COLUMN-------- */} +
+
+ +
+
+ +
+ + {/* ----------------INPUTS SECTION---------------- */} + +
+
+
+ INPUT COMMANDS +
+ +
+ +
{ + if (tool === 'kubectl') { + setTool(''); + setChecked(!checked); + } else setTool('kubectl'); + setChecked(!checked); + }} style={{ - display: 'flex', - justifyContent: 'center', - alignItems: 'center', + padding: '0px 4px 0 6px', + fontSize: '15px', + fontFamily: 'Roboto', + color: + theme.palette.mode === 'dark' && k8tool === 'ON' + ? 'white' + : theme.palette.mode === 'dark' && k8tool === 'OFF' + ? '#ffffff99' + : theme.palette.mode === 'light' && k8tool === 'ON' + ? '#3f42c3' + : '#00000082', + letterSpacing: '-.2px', + WebkitUserSelect: 'none' /* Safari */, + MozUserSelect: 'none' /* Firefox */, + msUserSelect: 'none' /* IE10+/Edge */, + userSelect: 'none', + width: '55px', }} > -
+ +
{ + if (tool === 'kubectl') { + setTool(''); + setChecked(!checked); + } else setTool('kubectl'); + setChecked(!checked); + }} + style={{ + padding: + k8tool === 'OFF' ? '4.5px 6px 0 1px' : '4.5px 9px 0 2px', + fontSize: '10px', + color: + k8tool === 'OFF' && theme.palette.mode === 'light' + ? 'grey' + : k8tool === 'ON' && theme.palette.mode === 'light' + ? '' + : k8tool === 'OFF' && theme.palette.mode === 'dark' + ? '#ffffff99' + : '', + WebkitUserSelect: 'none' /* Safari */, + MozUserSelect: 'none' /* Firefox */, + msUserSelect: 'none' /* IE10+/Edge */, + userSelect: 'none', + }} + > + {k8tool} +
+
+ +
+ -b.firstLetter.localeCompare(a.firstLetter) + )} + groupBy={(option) => option.category} + getOptionLabel={(option) => option.title} + onInputChange={(e, newInputValue) => { + console.log('newInputValue is', newInputValue); + setVerb(newInputValue); + const newCommand = verb + ' ' + type + ' ' + name; + setCommand(newCommand); + setHelpList([newInputValue, type]); + // setCommand(newInputValue); + }} + renderInput={(params) => ( + + )} + renderGroup={(params) => ( +
  • - INPUT COMMANDS -
    • - -
    - - + + {params.group} + + + {params.children} + + + )} + /> +
    - {/* ----------------TERMINAL CLI---------------- */} + {/* ---------------- TYPES FIELD ------------------------------------- */} - - {/* ----------------TERMINAL---------------- */} - +
    + { + setHelpList([verb, newInputValue]); + setType(newInputValue); + // setHelpList([verb, newInputValue]); + console.log('helplist is', helpList); + console.log('verb is', verb); + console.log('type is', type); + }} + renderInput={(params) => } + /> +
    - {/* ----------------COMMAND LINE---------------- */} -
    +
    { + e.preventDefault(); }} > - -
    + +
    - {/* ----------------INPUT SECTION---------------- */} - - + + Flags + + +
    +
    + {/* ------ INSTANT HELP SECTION ----- */} - - - Flags - - - - - +
    + LEARNING CENTER: +
    + + CLICK ON ANY LINK BELOW FOR TUTORIALS AND LEARNING RESOURCES + +
    +
    +
    {' '}
    - {' '} - -
    -
    INSTANT HELP DESK
    -
    - - CHOOSE ANY "COMMAND" OR "TYPE" THEN CLICK BELOW TO SEE - DOCUMENTATION AND HELP INFO - + +
    + {' '} + {' '} + +
    -
    - - + FULL BEGINNERS TUTORIAL (3-hours) + +
    +
    + {' '} + {' '} + +
    +
    +
    +
    - - - + LEARN KUBERNETES BASICS (kubernetes.io) + +
    +
    + {' '} + {' '} + +
    +
    + +
    +
    +
    + +
    + {' '} +
    + {' '} + +
    +
    INSTANT HELP DESK
    +
    + +
    +
    + + CHOOSE ANY "COMMAND" OR "TYPE" THEN CLICK BELOW TO SEE + DOCUMENTATION AND HELP INFO + +
    +
    + + + + + + 
    -                    
    -                      Kubetcl{'  '}
-                      {verb} :
-                    
    
-                    
    -                      {helpDesk[`${verb}`]}
-                    
    
-                  
-                
-              
+                    Kubetcl{'  '}
+                    {verb} :
+
    + 
    +                    {helpDesk[`${verb}`]}
+
    +     +     +     - - - - - + {type} + + + + + + 
    -                    
    -                      Kubetcl Type: {'  '}
-                      {type}
-                    
    
-                    
    -                      {helpDesk[`${type}`]}
-                    
    
-                  
-                
-              
-
    + Kubetcl Type: {' '} + {type} + + 
    +                    {helpDesk[`${type}`]}
+
    + + +
    - - +
    +
    + {/* ----- END OF EASY SETUP COLUMN ------ */} + + {/* ----------------TERMINAL CLI COLUMN---------------- */} + {/* + */} + {/* ----------------TERMINAL---------------- */} + + {/* ----------------COMMAND LINE---------------- */} ); } diff --git a/src/Pages/Setup2.tsx b/src/Pages/Setup2.tsx deleted file mode 100644 index ec3b214..0000000 --- a/src/Pages/Setup2.tsx +++ /dev/null @@ -1,1140 +0,0 @@ -import React from 'react'; -import { useState, useEffect } from 'react'; -import { - Button, - Paper, - InputLabel, - Select, - MenuItem, - FormControl, - TextField, - Autocomplete, - OutlinedInput, - ListItemText, - Checkbox, - Backdrop, - useTheme, - Modal, - Typography, -} from '@mui/material'; -import { Box, styled, lighten, darken } from '@mui/system'; -import Grid from '@mui/system/Unstable_Grid'; -import CommandLine from '../components/CommandLine.jsx'; -import Terminal from '../components/Terminal.js'; -import Sidebar from '../components/Sidebar2.jsx'; -import EastIcon from '@mui/icons-material/East'; -import commands from '../components/commands.js'; -import BoltIcon from '@mui/icons-material/Bolt'; -import helpDesk from './Glossary.jsx'; -import Switch from '@mui/material/Switch'; -import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip'; -// import { makeStyles } from '@mui/material'; - -const { ipcRenderer } = require('electron'); - -const LightTooltip = styled(({ className, ...props }: TooltipProps) => ( - -))(({ theme }) => ({ - [`& .${tooltipClasses.tooltip}`]: { - backgroundColor: theme.palette.mode === 'dark' ? '#5c4d9a' : '#8383de', - color: 'white', - fontSize: 11, - }, -})); - -// const useStyles = makeStyles((theme) => ({ -// option: { -// backgroundColor: 'red', -// }, -// })); - -//for step 4 text to appear below without eslint/prettier error, assigned to variable here -const step4 = `4. INPUT COMMANDS --->`; - -//section header (e.g. beginner, intermediate, etc) rules for grouped "command" option -const BeginnerHeader = styled('div')(({ theme }) => ({ - position: 'sticky', - top: '-8px', - padding: '4px 10px', - margin: '0px', - color: '#ffffff', - backgroundColor: '#352a68', -})); - -//style for grouped commands -const GroupItems = styled('ul')({ - padding: 0, - color: '#ffffff', - backgroundColor: '#5c4d9a', -}); - -function Setup() { - const [tool, setTool] = useState('kubectl'); - const [verb, setVerb] = React.useState(''); - const [type, setType] = React.useState(''); - const [name, setName] = React.useState(''); - const [currDir, setCurrDir] = React.useState('NONE SELECTED'); - const [shortDir, setShortDir] = React.useState('NONE SELECTED'); - const [userInput, setUserInput] = React.useState(''); - const [command, setCommand] = useState(''); - const [response, setResponse] = useState< - Array<{ command: string; response: { [key: string]: string } }> - >([]); - const [yamlOpen, setYamlOpen] = React.useState(false); - const [imgPath, setImgPath] = useState('NONE ENTERED'); - const [imgField, setImgField] = useState(''); - const [flags, setFlags] = useState>([]); - const [helpList, setHelpList] = useState>(['']); - - const [openCommand, setCommandOpen] = React.useState(false); - const handleCommandOpen = () => setCommandOpen(true); - const handleCommandClose = () => setCommandOpen(false); - - const [openType, setTypeOpen] = React.useState(false); - const handleTypeOpen = () => setTypeOpen(true); - const handleTypeClose = () => setTypeOpen(false); - - const [k8toolHover, setK8ToolHover] = useState(false); - const [checked, setChecked] = React.useState(true); - - //for light/dark mode toggle - const theme = useTheme(); - - const style = { - position: 'absolute', - top: '50%', - left: '50%', - transform: 'translate(-50%, -50%)', - width: '90%', - height: '90%', - bgcolor: theme.palette.mode === 'dark' ? '#2c1b63' : '#e9e5fa', - color: theme.palette.mode === 'dark' ? 'white' : '#47456e', - boxShadow: 24, - p: 4, - padding: '10px', - borderRadius: '5px', - }; - - //maps grouped command options alphabetically including if numbered - const options = commands.map((option) => { - const firstLetter = commands[0].category; - return { - firstLetter: /[{commands[0].category}]/.test(firstLetter) - ? '0-9' - : firstLetter, - ...option, - }; - }); - // handles updating img path updating and submission - function keyPress(e) { - e.preventDefault(); - if (e.key === 'Enter') { - setImgPath(e.target.value); - } - } - // Set YAML modal box state - const handleYamlClose = () => { - setYamlOpen(false); - }; - const handleYamlOpen = () => { - setYamlOpen(true); - }; - - // Flag list options - const flagList = ['-o wide', '--force', '-f', '-o default', '-v']; - - // Set flag list state - const handleFlags = (event) => { - const { - target: { value }, - } = event; - setFlags( - // On autofill we get a stringified value. - typeof value === 'string' ? value.split(',') : value - ); - }; - // handles name field changes - const handleNameChange = (event) => { - const { - target: { value }, - } = event; - setName(value); - }; - - const handleImgChange = (event) => { - const { - target: { value }, - } = event; - setImgField(value); - }; - - // Set current work directory, and short directory (for its visible label) - const handleUploadDirectory = (event) => { - let path = event.target.files[0].path.split(''); - while (path[path.length - 1] !== '/') { - path.pop(); - } - let absPath = path.join(''); - setCurrDir(absPath); - let absArr = absPath.split(''); - let shortArr = []; - for (let i = absArr.length - 2; absArr[i] !== '/'; i--) { - shortArr.unshift(absArr[i]); - } - shortArr.unshift('/'); - let shortPath = shortArr.join('') + '/'; - setShortDir('...' + shortPath); - }; - //sets image submission - const handleImgUpload = (e) => { - setImgPath(imgField); - setImgField(''); - }; - // updates img text field as typed - const handleImgField = (e) => { - setImgField(e.target.value); - }; - - // // Clear the input box - // const handleClear = (e) => { - // e.preventDefault(); - // setVerb(''); - // setUserInput(''); - // console.log(verb); - // }; - - // - const handleK8ToolChange = (event) => { - setChecked(event.target.checked); - if (checked) setTool(''); - else setTool('kubectl'); - }; - - let k8tool = ''; - if (checked === true) { - k8tool = 'ON'; - } else k8tool = 'OFF'; - - const toggleK8ToolHover = () => { - let toolHoverStatus = !k8toolHover; - setK8ToolHover(toolHoverStatus); - }; - - let k8toolStyle = { - display: 'flex', - justifyContent: 'flex-start', - border: - theme.palette.mode === 'dark' - ? '.1px solid #ffffff50' - : '.1px solid #00000090', - borderRadius: '3px', - padding: '13px 0px 13px 8px', - width: '135px', - }; - if (k8toolHover && theme.palette.mode === 'dark') { - k8toolStyle = { - display: 'flex', - justifyContent: 'flex-start', - border: '1px solid #ffffff', - borderRadius: '3px', - padding: '13px 0px 13px 7.5px', - width: '135px', - }; - } else if (k8toolHover && theme.palette.mode === 'light') { - k8toolStyle = { - display: 'flex', - justifyContent: 'flex-start', - border: '1px solid #000000', - borderRadius: '3px', - padding: '13px 0px 13px 7.5px', - width: '135px', - }; - } - - // Set the command state based on current inputs - useEffect(() => { - ipcRenderer.on('post_command', (event, arg) => { - const newResponseState = [ - ...response, - { command: command, response: arg }, - ]; - setResponse(newResponseState); - }); - - let newCommand = ''; - if (tool !== '') newCommand += tool; - if (verb !== '') newCommand += ' ' + verb; - if (type !== '') newCommand += ' ' + type; - if (name !== '') newCommand += ' ' + name; - if (flags.length) - flags.forEach((flag) => { - newCommand += ' ' + flag; - }); - if (userInput !== '') newCommand += ' ' + userInput; - setCommand(newCommand); - }); - - // Handle the command input submit event - const handleSubmit = (e) => { - e.preventDefault(); - if (currDir === 'NONE SELECTED') - return alert('Please choose working directory'); - - ipcRenderer.send('post_command', { command, currDir }); - }; - - // Type options - const types = [ - { label: 'node' }, - { label: 'nodes' }, - { label: 'pod' }, - { label: 'pods' }, - { label: 'configmap' }, - { label: 'deployment' }, - { label: 'events' }, - { label: 'secret' }, - { label: 'service' }, - { label: 'services' }, - ]; - - return ( - <> - - -
    - {/* --------- ---EASY SETUP COLUMN -------------- */} -
    - {/* ----------EASY SETUP TITLE ------ */} -
    -
    - EASY SETUP -
    -
    -
    - {/* --------------------------- IMAGE CREATION SECTION --------------------- */} -
    - 1. IMPORT IMAGE -
    -
    -
    - -
    - {imgPath} -
    - :not(style)': { m: 1, width: '160px' }, - }} - > - {' '} -
    - handleImgField(e)} - /> - -
    -
    - {/* ------------------- CHOOSE DIRECTORY SECTION ---------------------------- */} - -
    - 2. CHOOSE WORKING DIRECTORY -
    -
    -
    - {shortDir} -
    - - - - {/* ------------------------- CREATE YAML SECTION ------------------------------- */} - -
    - 3. CHOOSE/CREATE YAML FILE -
    -
    - - - {/* ----------- Backdrop is greyed out background during popup ----------------- */} - - {/* ------- Paper is modal / popup --------------------------------------- */} - -
    -
    - PLEASE USE THE TOOL BELOW TO CREATE YOUR .YAML FILE -
    -
    - Once you've finished, use the copy clipboard button in the - top right corner.
    - Then click in the blank space on either side of the popup to - close it, and continue following the instructions in the - help center. -
    - - -
    -     -     - - {/* --------------- STEP 4 INPUT COMMANDS --- TEXT ONLY -- SECTION ---------- */} - - -
    -
    - INPUT COMMANDS -
    - -
    -     -
    -
    - {/* ------------------ START OF TERMINAL COLUMN-------- */} -
    -
    - -
    -
    - -
    - - {/* ----------------INPUTS SECTION---------------- */} - -
    - -
    -
    { - if (tool === 'kubectl') { - setTool(''); - setChecked(!checked); - } else setTool('kubectl'); - setChecked(!checked); - }} - style={{ - padding: '0px 4px 0 6px', - fontSize: '15px', - fontFamily: 'Roboto', - color: - theme.palette.mode === 'dark' && k8tool === 'ON' - ? 'white' - : theme.palette.mode === 'dark' && k8tool === 'OFF' - ? '#ffffff99' - : theme.palette.mode === 'light' && k8tool === 'ON' - ? '#3f42c3' - : '#00000082', - letterSpacing: '-.2px', - }} - > - kubectl -
    - -
    - {k8tool} -
    -
    -     -
    - -b.firstLetter.localeCompare(a.firstLetter) - )} - groupBy={(option) => option.category} - getOptionLabel={(option) => option.title} - onInputChange={(e, newInputValue) => { - console.log('newInputValue is', newInputValue); - setVerb(newInputValue); - const newCommand = verb + ' ' + type + ' ' + name; - setCommand(newCommand); - setHelpList([newInputValue, type]); - // setCommand(newInputValue); - }} - renderInput={(params) => ( - - )} - renderGroup={(params) => ( -
  • - - {params.group} - - - {params.children} - -
    • - )} - /> -
    - - {/* ---------------- TYPES FIELD ------------------------------------- */} - -
    - { - setHelpList([verb, newInputValue]); - setType(newInputValue); - // setHelpList([verb, newInputValue]); - console.log('helplist is', helpList); - console.log('verb is', verb); - console.log('type is', type); - }} - renderInput={(params) => } - /> -
    - - {/* ---------------- NAMES FIELD ------------------------------------- */} - -
    -
    { - e.preventDefault(); - }} - > - - -
    - - {/* ---------------- FLAGS DROPDOWN ------------------------------------- */} - -
    - - Flags - - -
    -
    - {/* ------ INSTANT HELP SECTION ----- */} - -
    - {' '} -
    - {' '} - -
    -
    INSTANT HELP DESK
    -
    - -
    -
    - - CHOOSE ANY "COMMAND" OR "TYPE" THEN CLICK BELOW TO SEE - DOCUMENTATION AND HELP INFO - -
    -
    - - - - - - 
    -                    Kubetcl{'  '}
-                    {verb} :
-
    - 
    -                    {helpDesk[`${verb}`]}
-
    -     -     -     - - - - - - - 
    -                    Kubetcl Type: {'  '}
-                    {type}
-
    - 
    -                    {helpDesk[`${type}`]}
-
    -     -     -     -
    -
    -
    - {/* ----- END OF EASY SETUP COLUMN ------ */} - - {/* ----------------TERMINAL CLI COLUMN---------------- */} - {/* - */} - {/* ----------------TERMINAL---------------- */} - - {/* ----------------COMMAND LINE---------------- */} - - ); -} - -export default Setup; diff --git a/src/Pages/Setup3.tsx b/src/Pages/Setup3.tsx deleted file mode 100644 index 54f2602..0000000 --- a/src/Pages/Setup3.tsx +++ /dev/null @@ -1,1367 +0,0 @@ -import React from 'react'; -import { useState, useEffect } from 'react'; -import { - Button, - Paper, - InputLabel, - Select, - MenuItem, - FormControl, - TextField, - Autocomplete, - OutlinedInput, - ListItemText, - Checkbox, - Backdrop, - useTheme, - Modal, - Typography, -} from '@mui/material'; -import { Box, styled, lighten, darken } from '@mui/system'; -import Grid from '@mui/system/Unstable_Grid'; -import CommandLine from '../components/CommandLine.jsx'; -import Terminal from '../components/Terminal.js'; -import Sidebar from '../components/Sidebar2.jsx'; -import EastIcon from '@mui/icons-material/East'; -import commands from '../components/commands.js'; -import BoltIcon from '@mui/icons-material/Bolt'; -import helpDesk from './Glossary.jsx'; -import Switch from '@mui/material/Switch'; -import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip'; -import StarIcon from '@mui/icons-material/Star'; -import StarOutlineIcon from '@mui/icons-material/StarOutline'; -import StarHalfIcon from '@mui/icons-material/StarHalf'; -// import { makeStyles } from '@mui/material'; - -const { ipcRenderer } = require('electron'); - -const LightTooltip = styled(({ className, ...props }: TooltipProps) => ( - -))(({ theme }) => ({ - [`& .${tooltipClasses.tooltip}`]: { - backgroundColor: theme.palette.mode === 'dark' ? '#5c4d9a' : '#8383de', - color: 'white', - fontSize: 11, - }, -})); - -//section header (e.g. beginner, intermediate, etc) rules for grouped "command" option -const BeginnerHeader = styled('div')(({ theme }) => ({ - position: 'sticky', - top: '-8px', - padding: '4px 10px', - margin: '0px', - color: '#ffffff', - backgroundColor: '#352a68', -})); - -//style for grouped commands -const GroupItems = styled('ul')({ - padding: 0, - color: '#ffffff', - backgroundColor: '#5c4d9a', -}); - -function Setup() { - const [tool, setTool] = useState('kubectl'); - const [verb, setVerb] = React.useState(''); - const [type, setType] = React.useState(''); - const [name, setName] = React.useState(''); - const [currDir, setCurrDir] = React.useState('NONE SELECTED'); - const [shortDir, setShortDir] = React.useState('NONE SELECTED'); - const [userInput, setUserInput] = React.useState(''); - const [command, setCommand] = useState(''); - const [response, setResponse] = useState< - Array<{ command: string; response: { [key: string]: string } }> - >([]); - const [yamlOpen, setYamlOpen] = React.useState(false); - const [imgPath, setImgPath] = useState('NONE ENTERED'); - const [imgField, setImgField] = useState(''); - const [flags, setFlags] = useState>([]); - const [helpList, setHelpList] = useState>(['']); - - const [openCommand, setCommandOpen] = React.useState(false); - const handleCommandOpen = () => setCommandOpen(true); - const handleCommandClose = () => setCommandOpen(false); - - const [openType, setTypeOpen] = React.useState(false); - const handleTypeOpen = () => setTypeOpen(true); - const handleTypeClose = () => setTypeOpen(false); - - const [k8toolHover, setK8ToolHover] = useState(false); - const [checked, setChecked] = React.useState(true); - - //for light/dark mode toggle - const theme = useTheme(); - - const style = { - position: 'absolute', - top: '50%', - left: '50%', - transform: 'translate(-50%, -50%)', - width: '90%', - height: '90%', - bgcolor: theme.palette.mode === 'dark' ? '#2c1b63' : '#e9e5fa', - color: theme.palette.mode === 'dark' ? 'white' : '#47456e', - boxShadow: 24, - p: 4, - padding: '10px', - borderRadius: '5px', - }; - - //maps grouped command options alphabetically including if numbered - const options = commands.map((option) => { - const firstLetter = commands[0].category; - return { - firstLetter: /[{commands[0].category}]/.test(firstLetter) - ? '0-9' - : firstLetter, - ...option, - }; - }); - // handles updating img path updating and submission - function keyPress(e) { - e.preventDefault(); - if (e.key === 'Enter') { - setImgPath(e.target.value); - } - } - // Set YAML modal box state - const handleYamlClose = () => { - setYamlOpen(false); - }; - const handleYamlOpen = () => { - setYamlOpen(true); - }; - - // Flag list options - const flagList = ['-o wide', '--force', '-f', '-o default', '-v']; - - // Set flag list state - const handleFlags = (event) => { - const { - target: { value }, - } = event; - setFlags( - // On autofill we get a stringified value. - typeof value === 'string' ? value.split(',') : value - ); - }; - // handles name field changes - const handleNameChange = (event) => { - const { - target: { value }, - } = event; - setName(value); - }; - - const handleImgChange = (event) => { - const { - target: { value }, - } = event; - setImgField(value); - }; - - // Set current work directory, and short directory (for its visible label) - const handleUploadDirectory = (event) => { - let path = event.target.files[0].path.split(''); - while (path[path.length - 1] !== '/') { - path.pop(); - } - let absPath = path.join(''); - setCurrDir(absPath); - let absArr = absPath.split(''); - let shortArr = []; - for (let i = absArr.length - 2; absArr[i] !== '/'; i--) { - shortArr.unshift(absArr[i]); - } - shortArr.unshift('/'); - let shortPath = shortArr.join('') + '/'; - setShortDir('...' + shortPath); - }; - //sets image submission - const handleImgUpload = (e) => { - setImgPath(imgField); - setImgField(''); - }; - // updates img text field as typed - const handleImgField = (e) => { - setImgField(e.target.value); - }; - - // // Clear the input box - // const handleClear = (e) => { - // e.preventDefault(); - // setVerb(''); - // setUserInput(''); - // console.log(verb); - // }; - - // - const handleK8ToolChange = (event) => { - setChecked(event.target.checked); - if (checked) setTool(''); - else setTool('kubectl'); - }; - - let k8tool = ''; - if (checked === true) { - k8tool = 'ON'; - } else k8tool = 'OFF'; - - const toggleK8ToolHover = () => { - let toolHoverStatus = !k8toolHover; - setK8ToolHover(toolHoverStatus); - }; - - let k8toolStyle = { - display: 'flex', - justifyContent: 'flex-start', - border: - theme.palette.mode === 'dark' - ? '.1px solid #ffffff50' - : '.1px solid #00000090', - borderRadius: '3px', - padding: '13px 0px 13px 8px', - width: '135px', - }; - if (k8toolHover && theme.palette.mode === 'dark') { - k8toolStyle = { - display: 'flex', - justifyContent: 'flex-start', - border: '1px solid #ffffff', - borderRadius: '3px', - padding: '13px 0px 13px 7.5px', - width: '135px', - }; - } else if (k8toolHover && theme.palette.mode === 'light') { - k8toolStyle = { - display: 'flex', - justifyContent: 'flex-start', - border: '1px solid #000000', - borderRadius: '3px', - padding: '13px 0px 13px 7.5px', - width: '135px', - }; - } - - // Set the command state based on current inputs - useEffect(() => { - ipcRenderer.on('post_command', (event, arg) => { - const newResponseState = [ - ...response, - { command: command, response: arg }, - ]; - setResponse(newResponseState); - }); - - let newCommand = ''; - if (tool !== '') newCommand += tool; - if (verb !== '') newCommand += ' ' + verb; - if (type !== '') newCommand += ' ' + type; - if (name !== '') newCommand += ' ' + name; - if (flags.length) - flags.forEach((flag) => { - newCommand += ' ' + flag; - }); - if (userInput !== '') newCommand += ' ' + userInput; - setCommand(newCommand); - }); - - // Handle the command input submit event - const handleSubmit = (e) => { - e.preventDefault(); - if (currDir === 'NONE SELECTED') - return alert('Please choose working directory'); - - ipcRenderer.send('post_command', { command, currDir }); - }; - - // Type options - const types = [ - { label: 'node' }, - { label: 'nodes' }, - { label: 'pod' }, - { label: 'pods' }, - { label: 'configmap' }, - { label: 'deployment' }, - { label: 'events' }, - { label: 'secret' }, - { label: 'service' }, - { label: 'services' }, - ]; - - return ( - <> - - -
    - {/* --------- ---EASY SETUP COLUMN -------------- */} -
    - {/* ----------EASY SETUP TITLE ------ */} -
    -
    - EASY SETUP -
    -
    -
    - {/* --------------------------- IMAGE CREATION SECTION --------------------- */} -
    - 1. IMPORT IMAGE -
    -
    -
    - -
    - {imgPath} -
    - :not(style)': { m: 1, width: '160px' }, - }} - > - {' '} -
    - handleImgField(e)} - /> - -
    -
    - {/* ------------------- CHOOSE DIRECTORY SECTION ---------------------------- */} - -
    - 2. CHOOSE WORKING DIRECTORY -
    -
    -
    - {shortDir} -
    - - - - {/* ------------------------- CREATE YAML SECTION ------------------------------- */} - -
    - 3. CHOOSE/CREATE YAML FILE -
    -
    - - - {/* ----------- Backdrop is greyed out background during popup ----------------- */} - - {/* ------- Paper is modal / popup --------------------------------------- */} - -
    -
    - PLEASE USE THE TOOL BELOW TO CREATE YOUR .YAML FILE -
    -
    - Once you've finished, use the copy clipboard button in the - top right corner.
    - Then click in the blank space on either side of the popup to - close it, and continue following the instructions in the - learning center. -
    - - -
    -     -     - - {/* --------------- STEP 4 INPUT COMMANDS --- TEXT ONLY -- SECTION ---------- */} -
    -
    - {/* ------------------ START OF TERMINAL COLUMN-------- */} -
    -
    - -
    -
    - -
    - - {/* ----------------INPUTS SECTION---------------- */} - -
    -
    -
    - INPUT COMMANDS -
    - -
    - -
    -
    { - if (tool === 'kubectl') { - setTool(''); - setChecked(!checked); - } else setTool('kubectl'); - setChecked(!checked); - }} - style={{ - padding: '0px 4px 0 6px', - fontSize: '15px', - fontFamily: 'Roboto', - color: - theme.palette.mode === 'dark' && k8tool === 'ON' - ? 'white' - : theme.palette.mode === 'dark' && k8tool === 'OFF' - ? '#ffffff99' - : theme.palette.mode === 'light' && k8tool === 'ON' - ? '#3f42c3' - : '#00000082', - letterSpacing: '-.2px', - WebkitUserSelect: 'none' /* Safari */, - MozUserSelect: 'none' /* Firefox */, - msUserSelect: 'none' /* IE10+/Edge */, - userSelect: 'none', - width: '55px', - }} - > - kubectl -
    - -
    { - if (tool === 'kubectl') { - setTool(''); - setChecked(!checked); - } else setTool('kubectl'); - setChecked(!checked); - }} - style={{ - padding: - k8tool === 'OFF' ? '4.5px 6px 0 1px' : '4.5px 9px 0 2px', - fontSize: '10px', - color: - k8tool === 'OFF' && theme.palette.mode === 'light' - ? 'grey' - : k8tool === 'ON' && theme.palette.mode === 'light' - ? '' - : k8tool === 'OFF' && theme.palette.mode === 'dark' - ? '#ffffff99' - : '', - WebkitUserSelect: 'none' /* Safari */, - MozUserSelect: 'none' /* Firefox */, - msUserSelect: 'none' /* IE10+/Edge */, - userSelect: 'none', - }} - > - {k8tool} -
    -
    -     -
    - -b.firstLetter.localeCompare(a.firstLetter) - )} - groupBy={(option) => option.category} - getOptionLabel={(option) => option.title} - onInputChange={(e, newInputValue) => { - console.log('newInputValue is', newInputValue); - setVerb(newInputValue); - const newCommand = verb + ' ' + type + ' ' + name; - setCommand(newCommand); - setHelpList([newInputValue, type]); - // setCommand(newInputValue); - }} - renderInput={(params) => ( - - )} - renderGroup={(params) => ( -
  • - - {params.group} - - - {params.children} - -
    • - )} - /> -
    - - {/* ---------------- TYPES FIELD ------------------------------------- */} - -
    - { - setHelpList([verb, newInputValue]); - setType(newInputValue); - // setHelpList([verb, newInputValue]); - console.log('helplist is', helpList); - console.log('verb is', verb); - console.log('type is', type); - }} - renderInput={(params) => } - /> -
    - - {/* ---------------- NAMES FIELD ------------------------------------- */} - -
    -
    { - e.preventDefault(); - }} - > - - -
    - - {/* ---------------- FLAGS DROPDOWN ------------------------------------- */} - -
    - - Flags - - -
    -
    - {/* ------ INSTANT HELP SECTION ----- */} - -
    -
    - LEARNING CENTER: -
    - - CLICK ON ANY LINK BELOW FOR TUTORIALS AND LEARNING RESOURCES - -
    -
    -
    - {' '} - -
    - -
    - {' '} - {' '} - -
    -
    -
    - -
    - {' '} - {' '} - -
    -
    -
    - -
    - {' '} - {' '} - -
    -
    - -
    -
    -
    - -
    - {' '} -
    - {' '} - -
    -
    INSTANT HELP DESK
    -
    - -
    -
    - - CHOOSE ANY "COMMAND" OR "TYPE" THEN CLICK BELOW TO SEE - DOCUMENTATION AND HELP INFO - -
    -
    - - - - - - 
    -                    Kubetcl{'  '}
-                    {verb} :
-
    - 
    -                    {helpDesk[`${verb}`]}
-
    -     -     -     - - - - - - - 
    -                    Kubetcl Type: {'  '}
-                    {type}
-
    - 
    -                    {helpDesk[`${type}`]}
-
    -     -     -     -
    -
    -
    - {/* ----- END OF EASY SETUP COLUMN ------ */} - - {/* ----------------TERMINAL CLI COLUMN---------------- */} - {/* - */} - {/* ----------------TERMINAL---------------- */} - - {/* ----------------COMMAND LINE---------------- */} - - ); -} - -export default Setup; diff --git a/src/Pages/Signup.jsx b/src/Pages/Signup.jsx index acfcf10..93b86af 100644 --- a/src/Pages/Signup.jsx +++ b/src/Pages/Signup.jsx @@ -1,198 +1,194 @@ -import { useState } from 'react'; -import Button from '@mui/material/Button'; -import { Box } from '@mui/system'; -import { TextField } from '@mui/material'; -import { Typography } from '@mui/material'; -import Grid from '@mui/system/Unstable_Grid'; import { Link } from 'react-router-dom'; +import Dashboard from './Dashboard'; +import { Backdrop, Button } from '@mui/material'; +import { ColorModeContext, useMode } from '../theme'; +import { CssBaseline, ThemeProvider } from '@mui/material'; function Signup() { - const [password, setInputPassword] = useState(''); - const [username, setInputUsername] = useState(''); - const [email, setInputEmail] = useState(''); - - // Send request to the server to create a new user - async function createUser(username, email, password) { - try { - const response = await fetch('/user/createuser', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - username, - email, - password, - }), - }); - // If the response comes back successful, parse it from JSON and return - const parsedResponse = await response.json(); - return parsedResponse; - } catch (err) { - console.log(err); - } - } - - // When sign up button is clicked, invoke createUser function - function handleClick(event) { - event.preventDefault(); - - // Handle invalid submissions - if (username === '' || password === '' || email === '') - alert('Missing username, email, or password. Please try again'); - - const callCreateUser = async () => { - const response = await createUser(username, email, password); - // If there are no errors, redirect to the login page - if (response) navigate('/'); - }; - callCreateUser(); - } - + const [theme, colorMode] = useMode(); return ( - - - +
    - + Welcome to Kaptn! +
    +
    + If this is your first time using Kuberentes, please + use the links below to install kubectl commands locally BEFORE trying + to use Kaptn*: +
    + +
    + Before using kubectl commands, please make sure your{' '} + Docker and/or clusters are up and running! +
    + + + +
    + {' '} + * It is strongly recommended that those new to Kubernetes visit the Easy + Setup page on the left to use the Kaptn Learning Center! +
    +
    + +
    + + + ); } diff --git a/src/Pages/Signup2.jsx b/src/Pages/Signup2.jsx deleted file mode 100644 index 93b86af..0000000 --- a/src/Pages/Signup2.jsx +++ /dev/null @@ -1,195 +0,0 @@ -import { Link } from 'react-router-dom'; -import Dashboard from './Dashboard'; -import { Backdrop, Button } from '@mui/material'; -import { ColorModeContext, useMode } from '../theme'; -import { CssBaseline, ThemeProvider } from '@mui/material'; - -function Signup() { - const [theme, colorMode] = useMode(); - return ( - <> -
    - {' '} -
    - Welcome to Kaptn! -
    -
    - If this is your first time using Kuberentes, please - use the links below to install kubectl commands locally BEFORE trying - to use Kaptn*: -
    - -
    - Before using kubectl commands, please make sure your{' '} - Docker and/or clusters are up and running! -
    - - - -
    - {' '} - * It is strongly recommended that those new to Kubernetes visit the Easy - Setup page on the left to use the Kaptn Learning Center! -
    -
    - -
    - - - - ); -} - -export default Signup; diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx index 112c76d..3a728dc 100644 --- a/src/components/Sidebar.jsx +++ b/src/components/Sidebar.jsx @@ -6,110 +6,170 @@ import { AutoFixHigh, MenuBook, ExitToAppOutlined, - HomeOutlined, LightMode, BarChart, DarkMode, + BorderColor, } from '@mui/icons-material'; import Grid from '@mui/system/Unstable_Grid'; import { ColorModeContext } from '../theme.ts'; +import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'; +import { styled } from '@mui/material/styles'; +import HomeRoundedIcon from '@mui/icons-material/HomeRounded'; function SideNav(props) { // Color theme is toggled here with the light/dark mode menu item const theme = useTheme(); const colorMode = useContext(ColorModeContext); - // const [isCollapsed, setIsCollapsed] = useState(false); + const LightTooltip = styled(({ className, ...props }) => ( + + ))(({ theme }) => ({ + [`& .${tooltipClasses.tooltip}`]: { + backgroundColor: theme.palette.mode === 'dark' ? '#5c4d9a' : '#8383de', + color: 'white', + fontSize: 11, + }, + })); return ( - - - - - - - } - > - +
    + +
    + + + +
    +     + +
    + + + +
    +     - - - } - > - + +
    + + + +
    +     - - - } - > - + {/* +
    + + + +
    +     */} - - - } - color='white' - > - - - - - } - > - - - - - {theme.palette.mode === 'dark' ? ( - - ) : ( - - )} - - - -
    -     -     + +
    + + + +
    +     + +
    + + {theme.palette.mode === 'dark' ? ( + + ) : ( + + )} + +
    +     +
    ); } diff --git a/src/components/Sidebar2.jsx b/src/components/Sidebar2.jsx deleted file mode 100644 index 3a728dc..0000000 --- a/src/components/Sidebar2.jsx +++ /dev/null @@ -1,176 +0,0 @@ -import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar'; -import { useState, useContext } from 'react'; -import { Box, IconButton, useTheme } from '@mui/material'; -import { Link } from 'react-router-dom'; -import { - AutoFixHigh, - MenuBook, - ExitToAppOutlined, - LightMode, - BarChart, - DarkMode, - BorderColor, -} from '@mui/icons-material'; -import Grid from '@mui/system/Unstable_Grid'; -import { ColorModeContext } from '../theme.ts'; -import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'; -import { styled } from '@mui/material/styles'; -import HomeRoundedIcon from '@mui/icons-material/HomeRounded'; - -function SideNav(props) { - // Color theme is toggled here with the light/dark mode menu item - const theme = useTheme(); - const colorMode = useContext(ColorModeContext); - - const LightTooltip = styled(({ className, ...props }) => ( - - ))(({ theme }) => ({ - [`& .${tooltipClasses.tooltip}`]: { - backgroundColor: theme.palette.mode === 'dark' ? '#5c4d9a' : '#8383de', - color: 'white', - fontSize: 11, - }, - })); - - return ( -
    - -
    - - - -
    -     - -
    - - - -
    -     - - -
    - - - -
    -     - - {/* -
    - - - -
    -     */} - - -
    - - - -
    -     - -
    - - {theme.palette.mode === 'dark' ? ( - - ) : ( - - )} - -
    -     -
    - ); -} - -export default SideNav; diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx index a757b35..3da9b28 100644 --- a/src/components/Topbar.tsx +++ b/src/components/Topbar.tsx @@ -6,71 +6,131 @@ import { useTheme } from '@mui/material'; function Topbar(): JSX.Element { const theme = useTheme(); return ( - - - -
    +
    - kaptn - - - + kaptn +
    +
    +
    - + >
    +
    + + // + // + + // + // kaptn + // + + // + // ); } diff --git a/src/components/Topbar2.tsx b/src/components/Topbar2.tsx deleted file mode 100644 index 3da9b28..0000000 --- a/src/components/Topbar2.tsx +++ /dev/null @@ -1,137 +0,0 @@ -import React from 'react'; -import Grid from '@mui/system/Unstable_Grid'; - -import { useTheme } from '@mui/material'; - -function Topbar(): JSX.Element { - const theme = useTheme(); - return ( -
    -
    -
    -
    - kaptn -
    -
    -
    -
    - - // - // - - // - // kaptn - // - - // - // - ); -} - -export default Topbar;