download JSON

app/calc/calculator.tsx

@@ -4,19 +4,19 @@ import { useEffect, useState } from "react";
 import PageError from "@/app/components/pageerror";
 
 import generateAdjacencyList from "../algos/adjacency";
+import dijkstra from "../algos/dijkstra";
 import Container from "../components/container";
 import LatencyChange from "./latencychange";
 import Matrix from "./matrix";
 import Menu from "./menu";
 import ReplacingTool from "./replacingtool";
 import eraseAdjacentConnections from "./supports/connections/eraseadjacentconnections";
+import getColIndex from "./supports/getcolindex";
+import getRowIndex from "./supports/getrowindex";
+import twoDimIndexOf from "./supports/indexof";
 import initConnection from "./supports/initconnection";
 import replaceOldEntry from "./supports/replaceoldentry";
 import ToolBar from "./toolbar";
-import twoDimIndexOf from "./supports/indexof";
-import dijkstra from "../algos/dijkstra";
-import getColIndex from "./supports/getcolindex";
-import getRowIndex from "./supports/getrowindex";
 
 interface CalculatorProps {
 	width: number;
@@ -77,6 +77,26 @@ const Calculator: React.FC<CalculatorProps> = ({ width, height }) => {
 		console.log(fieldDelays);
 	};
 
+	const savePlan = () => {
+		const data = {
+			width: width,
+			height: height,
+			fieldStatus: fieldStatus,
+			fieldValues: fieldValues,
+			fieldDelays: fieldDelays,
+		};
+
+		const jsonString = `data:text/json;charset=utf-8,${encodeURIComponent(
+			JSON.stringify(data)
+		)}`;
+
+		const link = document.createElement("a");
+		link.href = jsonString;
+		link.download = "plan.json";
+
+		link.click();
+	};
+
 	const resetField = () => {
 		setSelectedBoreHole(null);
 		setTool("cursor");
@@ -272,6 +292,7 @@ const Calculator: React.FC<CalculatorProps> = ({ width, height }) => {
 					setIsLinking={setIsLinking}
 					replacingToolView={replacingToolView}
 					setReplacingToolView={setReplacingToolView}
+					savePlan={savePlan}
 				/>
 				<div className="flex flex-row gap-4">
 					<div className="border rounded-lg w-5/6 h-[80svh] overflow-scroll">

app/calc/menu.tsx

@@ -28,6 +28,7 @@ interface MenuProps {
 	setIsLinking: (value: boolean) => void;
 	replacingToolView: boolean;
 	setReplacingToolView: (value: boolean) => void;
+	savePlan: () => void;
 }
 
 const Menu: React.FC<MenuProps> = ({
@@ -43,6 +44,7 @@ const Menu: React.FC<MenuProps> = ({
 	latencySelection,
 	setReplacingToolView,
 	replacingToolView,
+	savePlan,
 }) => {
 	const zoomIn = () => {
 		if (zoom < 6) {
@@ -89,7 +91,7 @@ const Menu: React.FC<MenuProps> = ({
 						<MenubarItem onClick={() => window.open("/calc/new", "_blank")}>
 							New Plan
 						</MenubarItem>
-						<MenubarItem disabled>Load Plan From Save Code</MenubarItem>
+						<MenubarItem disabled>Load Plan From File</MenubarItem>
 						<MenubarSeparator />
 						<MenubarItem
 							onClick={() => {
@@ -101,7 +103,13 @@ const Menu: React.FC<MenuProps> = ({
 						<MenubarSeparator />
 						<MenubarItem disabled>Analyze</MenubarItem>
 						<MenubarSeparator />
-						<MenubarItem disabled>Get Save Code</MenubarItem>
+						<MenubarItem
+							onClick={() => {
+								savePlan();
+							}}
+						>
+							Save Plan
+						</MenubarItem>
 						<MenubarItem disabled>Print</MenubarItem>
 						<MenubarSeparator />
 						<MenubarSub>

app/homeclient.tsx

@@ -36,7 +36,7 @@ const HomeClient = () => {
 							NEW PLAN
 						</Button>
 						<Button variant={"outline"} disabled>
-							LOAD PLAN FROM SAVE CODE
+							LOAD PLAN FROM FILE
 						</Button>
 					</div>
 				</div>