[!!!Task] #77 first draft of functionality

Type-Style · Jul 15, 2024 · 19780eb · 19780eb
1 parent d3a5bc7
commit 19780eb
Show file tree

Hide file tree

Showing 7 changed files with 227 additions and 88 deletions.
diff --git a/httpdocs/css/base.css b/httpdocs/css/base.css
@@ -135,6 +135,8 @@ Neutral: #131211
 
   font-weight: calc(400 + var(--baseFontWeightModifier));
 
+  accent-color: var(--main);
+
   /* dark theme, initial state (prefers mq) by react */
   &[data-mui-color-scheme="dark"] {
     --main: oklch(75% 0.1738 64.55); 
@@ -166,7 +168,7 @@ Neutral: #131211
   width:1px;
 }
 
-.cut {
+.cut, .cut-after::after {
   --cut: 2em;
   clip-path: polygon(0% var(--cut), var(--cut) 0%, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
 }

diff --git a/src/client/components/LinearBuffer.tsx b/src/client/components/LinearBuffer.tsx
@@ -1,25 +1,32 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import LinearProgress from '@mui/material/LinearProgress';
 
-export default function LinearBuffer({ msStart, msFinish }: { msStart: number, msFinish: number }) {
+export default function LinearBuffer({ msStart, msFinish, variant = "buffer" }: { msStart: number, msFinish: number, variant?: "buffer" | "determinate" }) {
   const [progress, setProgress] = React.useState(0);
   const [buffer, setBuffer] = React.useState(10);
 
   const progressRef = React.useRef(() => { });
   React.useEffect(() => {
-    progressRef.current = () => { 
+    if (!msStart || !msFinish) {
+      console.log("LinearProgress did not recieve correct data")
+    }
+    progressRef.current = () => {
+      let progressValue;
       const duration = msFinish - msStart; // duration based on input props
-      const secondPhase = duration == 1000;
       const date = new Date();
       const now = date.getTime();
-
-      const bufferValue = secondPhase ? 100 : 90;
       const progressCalcValue = ((now - msStart) / duration) * 100;
-      const progressValue = secondPhase ? 100 : Math.min(progressCalcValue, bufferValue);
+      progressValue = progressCalcValue;
+      if (variant == "buffer") {
+        const secondPhase = duration == 1000;
+        const bufferValue = secondPhase ? 100 : 90;
+        progressValue = secondPhase ? 100 : Math.min(progressCalcValue, bufferValue);
+
+        setBuffer(bufferValue);
+      }
 
       setProgress(progressValue);
-      setBuffer(bufferValue);
+
     };
   });
 
@@ -34,8 +41,6 @@ export default function LinearBuffer({ msStart, msFinish }: { msStart: number, m
   }, []);
 
   return (
-    <Box sx={{ width: '100%' }}>
-      <LinearProgress variant="buffer" value={progress} valueBuffer={buffer} />
-    </Box>
+    <LinearProgress variant={variant} value={progress} valueBuffer={variant == "buffer" ? buffer : null} />
   );
 }
diff --git a/src/client/components/Map.tsx b/src/client/components/Map.tsx
@@ -7,8 +7,8 @@ import 'leaflet-defaulticon-compatibility';
 import * as css from "../css/map.module.css";
 
 function Map({ entries }: { entries: Models.IEntry[] }) {
-	if(!entries?.length) {
-		return ( "No Data to be displayed" );		
+	if (!entries?.length) {
+		return <span className="noData cut">No Data to be displayed</span>
 	}
 	const lastEntry = entries.at(-1);
 
@@ -20,7 +20,7 @@ function Map({ entries }: { entries: Models.IEntry[] }) {
 			/>
 			<Marker position={[lastEntry.lat, lastEntry.lon]}>
 				<Popup>
-					{JSON.stringify(lastEntry)}
+					{JSON.stringify(lastEntry, null, 2)}
 				</Popup>
 			</Marker>
 		</MapContainer>

diff --git a/src/client/css/start.css b/src/client/css/start.css
@@ -32,7 +32,6 @@
 			@media (min-width: 30em) {
 				padding: 0.7em 2em;
 			}
-
 		}
 
 		&.theme {
@@ -41,39 +40,87 @@
 			display: grid;
 			align-items: center;
 			justify-items: center;
-			background-color: var(--bg);
 		}
 
 		&.map {
 			grid-column: 1;
 			grid-row: 2 / span 3;
-			background-color: darkkhaki;
+			margin-right: 1em;
+
+			background-color: color-mix(in oklab, transparent 50%, var(--main));
 		}
 
 		&.status {
 			grid-column: 2;
 			grid-row: 2;
-			background-color: gold;
+			margin: 1em 1em 1em 0;
+			position: relative;
+			z-index: 0;
+
+			&::after {
+				content: "";
+				position: absolute;
+				inset: 0;
+				z-index: -1;
+
+				background-color: var(--semiBg);
+
+				--shadowColor: var(--text);
+				filter: url(#rough-light);
+        box-shadow: 0 0 0.2em var(--shadowColor);
+			}
+			[data-mui-color-scheme="dark"] &::after {
+				--shadowColor: var(--main);
+				filter: url(#rough-light) drop-shadow(0 3px 5px var(--shadowColor));
+			}
+
 		}
 
 		&.images {
 			grid-column: 2;
 			grid-row: 3 / span 2;
 
 			display: grid;
+			overflow: auto;
 		}
 
-		image {
+		.image {
+			display: inline-block;
+      aspect-ratio: 16/9;			
 			background-color: moccasin;
 		}
 
 		.image+.image {
 			background-color: lightgoldenrodyellow;
 		}
+		.image+.image+.image {
+			background-color: antiquewhite;
+		}
 
 		&.subinfo {
-			grid-column: 1 / -1;
-			background-color: peachpuff;
+			grid-column: 1;
+			padding: 0.5em 0.8em;
+			@media (min-width: 30em) {
+				padding: 0.7em 2em;
+			}
+
+			.MuiLinearProgress-root {
+				margin: -0.5em 0 1em -0.8em;
+				@media (min-width: 30em) {
+					margin: -0.7em -1em 1em -2em;
+				}				
+			}
+
+			.info {
+				display: inline-block;
+				padding-inline: 1em;
+				border-right: 0.1rem solid;
+
+				&:last-child, &.noDivider  {
+					border: none;
+					padding-right: 0;
+				}
+			}
 		}
 	}
 
@@ -92,6 +139,10 @@
 			margin-left: auto;
 		}
 
+		&.error {
+			color: var(--alert);
+		}
+
 		.title {
 			font-size: 1.1em;
 			@media (min-width: 30em) { font-size: inherit;	}
@@ -101,7 +152,8 @@
 	}
 
 	.loginButton {
-		color: var(--bg);
+		color: white;
+		[data-mui-color-scheme="dark"] & { color: black;}
 		margin-left: auto;
 		cursor: pointer;
 		white-space: nowrap;
@@ -143,4 +195,15 @@
 			}
 		}
 	}
+}
+
+.noData {
+	display: block;
+	font-size: 1.4em;
+	text-align: center;
+	width: min-content;
+	margin: 2.5em auto;
+	padding: 2.5em;
+	color: var(--alert);
+	background-color: var(--semiBg);
 }
diff --git a/src/client/pages/Login.tsx b/src/client/pages/Login.tsx
@@ -129,11 +129,11 @@ function Login() {
             error={formInfo.user.isError}
             helperText={formInfo.user.isError ? formInfo.user.message : false}
             required
+            autoFocus={!userInfo?.user}
             InputProps={{
               classes: {
                 root: "cut",
               },
-              autoFocus: true,
               name: "user",
               startAdornment: (
                 <InputAdornment position="start">
@@ -158,6 +158,7 @@ function Login() {
             required
             error={formInfo.password.isError}
             helperText={formInfo.password.isError ? formInfo.password.message : false}
+            autoFocus={!!userInfo?.user}
             InputProps={{
               classes: {
                 root: "cut",