Merge branch 'tj-uav:dev' into dev

tj-uav · Mar 2, 2024 · 67ff5fb · 67ff5fb
2 parents 7b4f4c0 + 757d870
commit 67ff5fb
Show file tree

Hide file tree

Showing 11 changed files with 46,913 additions and 8,939 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -22,6 +22,7 @@
 		"react-leaflet": "^3.2.5",
 		"react-router-dom": "^5.3.0",
 		"react-scripts": "4.0.3",
+		"react-virtualized-auto-sizer": "^1.0.20",
 		"react-window": "^1.8.7",
 		"reactstrap": "^9.0.2",
 		"regex-parser": "^2.2.11",

diff --git a/client/src/components/UIElements/Button.js b/client/src/components/UIElements/Button.js
@@ -8,7 +8,7 @@ import Link from "./Link"
 import { ReactComponent as RawWarning } from "icons/warning.svg"
 import { unselectable } from "css.js"
 
-const Button = forwardRef(({ active, disabled, onChange, onClick, controlled, to, href, careful = false, ...props }, ref) => {
+const Button = forwardRef(({ active, disabled, untouched, onChange, onClick, controlled, to, href, careful = false, ...props }, ref) => {
 	const [isActive, setActive] = useState(active ?? false)
 
 	return (
@@ -20,6 +20,7 @@ const Button = forwardRef(({ active, disabled, onChange, onClick, controlled, to
 			onMouseDown={() => {
 				if (!disabled) setActive(true)
 			}}
+			untouched={untouched}
 			onMouseUp={() => {
 				if (!disabled)
 					setTimeout(() => {
@@ -67,17 +68,17 @@ export const StyledButton = styled(Link).attrs(props => ({
 	${unselectable}
 	position: relative;
 	box-sizing: border-box;
-	background: ${props => (props.active && !props.disabled ? (props.color ?? blue) : dark)};
+	background: ${props => (props.active && !(props.disabled || props.untouched) ? (props.color ?? blue) : dark)};
 	transition: background-color 0.1s ease;
-	color: ${props => (props.active ? dark : (!props.disabled ? props.color ?? blue : "grey"))} !important;
+	color: ${props => (props.active ? dark : (!(props.disabled || props.untouched) ? props.color ?? blue : "grey"))} !important;
 	text-decoration: none !important;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	text-align: center;
   	padding-top: ${props => (props.large ? "1rem" : "0.3rem")};
   	padding-bottom: ${props => (props.large ? "1rem" : "0.3rem")};
-    cursor: ${props => props.disabled ? "not-allowed" : "pointer"};
+	cursor: ${props => props.disabled ? "not-allowed" : "pointer"};
 
 	::after {
 		content: "";
@@ -86,7 +87,7 @@ export const StyledButton = styled(Link).attrs(props => ({
 		right: 0;
 		bottom: 0;
 		height: 0.25rem;
-		background: ${props => (props.disabled ? "grey" : props.color) ?? blue};
+		background: ${props => ((props.disabled || props.untouched) ? "grey" : props.color) ?? blue};
 		transition: height 0.1s ease;
 	}
 
@@ -97,7 +98,7 @@ export const StyledButton = styled(Link).attrs(props => ({
 		right: 0;
 		bottom: 0;
 		height: ${props => !props.disabled ? "0.5rem" : "0.25rem"};
-		background: ${props => (props.disabled ? "grey" : props.color) ?? blue};
+		background: ${props => ((props.disabled || props.untouched) ? "grey" : props.color) ?? blue};
 	}
 `
 

diff --git a/client/src/pages/Params/Param/Active.js b/client/src/pages/Params/Param/Active.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useEffect, useState } from "react"
 
 import { Row, Column } from "components/Containers"
 import { Label } from "components/UIElements"
@@ -9,52 +9,75 @@ import Submit from "./Submit"
 
 import { useParameters } from "../../Params"
 
-const Active = ({ data, index, setActiveIndex, setModifiedIndexes }) => {
+const Active = ({ listRef, style, data, index, setActiveIndex, setModifiedIndexes, setActiveSize, parametersSave }) => {
 	const [value, setValue] = useState(data.value)
 	const deactivate = () => setActiveIndex(-1)
-	const params = useParameters()
+	const [params, setParameters] = useParameters()
+	const root = React.useRef()
+
+	const submit = () => {
+		if (value != params[index].value) {
+			params[index] = {
+				...data,
+				value: value,
+				present: true
+			}
+			setParameters(params.slice())
+			setModifiedIndexes(prev => {
+				if (value == parametersSave[index].value) {
+					return prev.filter(ind => ind != index)
+				} else if (!prev.includes(index)) {
+					return [...prev, index]
+				} else {
+					return prev
+				}
+			})
+		}
+		setActiveIndex(-1)
+		listRef.current.resetAfterIndex(0)
+	}
+
+	useEffect(() => {
+		setActiveSize(root.current.getBoundingClientRect().height)
+	}, [root.current?.getBoundingClientRect().width])
 
 	return (
 		<form onSubmit={e => handleSubmit(e, deactivate)}>
-			<Row style={{ maxHeight: "7rem" }} columns="min-content auto 6rem">
-				<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
-					<Row height="2rem" columns="14rem 6rem">
+			<Row ref={root} style={{ ...style, height: undefined }} columns="min-content 6rem auto">
+				<div style={{ display: "flex", flexDirection: "column", gap: "1rem", height: "95%" }}>
+					<Row height="2rem" columns="11.5rem 5rem">
 						<Content padded children={data.name} />
-						<Value editable hook={[value, setValue]} />
+						<Value editable hook={[value, setValue]} submit={submit} />
 					</Row>
-					<Row style={{ marginBottom: "-1rem" }}>
+					<Row style={{ marginBottom: "-1.15rem" }}>
 						<Label>Options</Label>
 					</Row>
 					<Row>
 						<Content padded children={data.options ?? "no options defined."} />
 					</Row>
 				</div>
-				<Column style={{ display: "flex", height: "100%", overflow: "scroll" }}>
-					<Content padded children={data.description} style={{ overflow: "scroll" }} />
-				</Column>
 				<aside
 					style={{
 						display: "flex",
 						flexDirection: "column",
 						rowGap: "1rem",
-						height: "100%",
+						paddingBottom: "2px"
 					}}
 				>
 					<Submit
 						type="accept"
-						callback={() => {
-							params[index] = {
-								...data,
-								value,
-							}
-							setModifiedIndexes(prev => {
-								if (!prev.includes(index)) return [...prev, index]
-								else return prev
-							})
-						}}
+						callback={submit}
 					/>
-					<Submit type="decline" />
+					<Submit type="decline" callback={() => {
+						setActiveIndex(-1)
+						listRef.current.resetAfterIndex(0)
+					}} />
 				</aside>
+				<Column style={{ display: "flex", paddingBottom: "2px" }}>
+					<Content>
+						<b>{data.DisplayName}</b>{data.DisplayName ? ". " : ""}{data.Description}
+					</Content>
+				</Column>
 			</Row>
 		</form>
 	)

diff --git a/client/src/pages/Params/Param/Normal.js b/client/src/pages/Params/Param/Normal.js
@@ -9,38 +9,59 @@ import Content from "./Content"
 import Value from "./Value"
 import Submit from "./Submit"
 
-const Normal = ({ data, index, setActiveIndex, setModifiedIndexes, modified = false }) => {
+import { useParameters } from "../../Params"
+
+const Normal = ({ listRef, style, height, data, index, setActiveIndex, setModifiedIndexes, parametersSave, modified = false }) => {
+	const [parameters, setParameters] = useParameters()
+
 	return (
-		<Row height="2rem" columns={`min-content auto ${modified ? "3rem" : "6rem"}`}>
+		<Row style={style} height={height ?? "2rem"} columns={`min-content ${modified ? "3rem" : "6rem"} auto`}>
 			<Column height="2rem" style={{ overflow: "hidden" }}>
-				<Row columns="14rem 6rem">
+				<Row height="2rem" columns={modified ? "11.5rem 5rem 5rem" : "11.5rem 5rem"}>
 					<Content padded children={data.name} />
 					<Value
 						style={{ color: modified ? blue : "inherit" }}
 						hook={[data.value, null]}
 					/>
+					{modified ? (
+						<Value
+							style={{ color: modified ? blue : "inherit" }}
+							hook={[data.old, null]}
+						/>
+					) : null}
 				</Row>
 			</Column>
-			<Column height="2rem">
-				<Description description={data.description.replace(/\s/g, "\u00A0")} />
-			</Column>
 			{modified ? (
 				<Submit
 					type="decline"
-					callback={() => setModifiedIndexes(prev => prev.filter(i => i !== index))}
+					callback={() => {
+						setModifiedIndexes(prev => prev.filter(i => i !== index))
+						parameters[index] = parametersSave[index]
+						setParameters(parameters.slice())
+						listRef.current.resetAfterIndex(0)
+					}}
 				/>
 			) : (
-				<Button careful onClick={() => setActiveIndex(index)}>
+				<Button careful untouched={!data.present} style={{ height: "94%" }} onClick={() => {
+					setActiveIndex(index)
+					listRef.current.resetAfterIndex(0)
+				}}>
 					Modify
 				</Button>
 			)}
+			<Column height="2rem">
+				<Description DisplayName={data.DisplayName} description={data.Description} />
+			</Column>
 		</Row>
 	)
 }
 
 const Description = styled(Content).attrs(props => ({
 	padded: true,
-	children: props.description,
+	children:
+		<>
+			<b>{props.DisplayName}</b>{props.DisplayName ? ". " : ""}{props.description}
+		</>,
 }))`
 	white-space: nowrap;
 	position: relative;

diff --git a/client/src/pages/Params/Param/Submit.js b/client/src/pages/Params/Param/Submit.js
@@ -12,9 +12,9 @@ const Submit = ({ type, callback }) => (
 			border: "none",
 			borderRadius: "unset",
 			outline: "none",
-      flexShrink: "1"
+      		flexShrink: "1"
 		}}
-	></Checkbox>
+	/>
 )
 
 export default Submit
diff --git a/client/src/pages/Params/Param/Value.js b/client/src/pages/Params/Param/Value.js
@@ -2,7 +2,7 @@ import React from "react"
 
 import { dark } from "theme/Colors"
 
-const Value = ({ hook, editable, style }) => {
+const Value = ({ hook, editable, style, ...props }) => {
 	const [value, setValue] = hook
 
 	return (
@@ -11,6 +11,11 @@ const Value = ({ hook, editable, style }) => {
 			name="value"
 			value={value}
 			onChange={e => setValue(e.target.value)}
+			onKeyPress={e => {
+				if (e.key == "Enter") {
+					props.submit()
+				}
+			}}
 			style={{
 				...style,
 				background: dark,