created single page version of app and corresponding route. (#134)

I added just enough basic shadcn/tailwind to make it look acceptable.
codeforboston · Jan 13, 2024 · 4617476 · 4617476
1 parent 6dcbb53
commit 4617476
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 36 deletions.
diff --git a/heat-stack/app/components/ui/heat/CaseSummaryComponents/HomeInformation.tsx b/heat-stack/app/components/ui/heat/CaseSummaryComponents/HomeInformation.tsx
@@ -1,80 +1,119 @@
 import { Form } from '@remix-run/react'
+import { Button } from '#/app/components/ui/button.tsx'
 import { Input } from '#/app/components/ui/input.tsx'
 import { Label } from '#/app/components/ui/label.tsx'
-import { Button } from '#/app/components/ui/button.tsx'
-
-
 
 export function HomeInformation() {
 	return (
 		<div>
-			<h2 className='text-5xl font-extrabold tracking-wide'>Home Information</h2>
-
-			<Form method="post" action='/homes'>
+			<h2 className="text-5xl font-extrabold tracking-wide">
+				Home Information
+			</h2>
 
-				<div className='mt-10'>
-					<h6 className='text-zinc-950 text-2xl font-semibold'>Resident/Client</h6>
+			<Form method="post" action="/homes">
+				<div className="mt-10">
+					<h6 className="text-2xl font-semibold text-zinc-950">
+						Resident/Client
+					</h6>
 
-					<div className='mt-4 flex space-x-4'>
+					<div className="mt-4 flex space-x-4">
 						<div>
 							<Label htmlFor="firstName">First Name</Label>
-							<Input name="firstName" id="firstName" type="text" placeholder="Bob" />
+							<Input
+								name="firstName"
+								id="firstName"
+								type="text"
+								placeholder="Bob"
+							/>
 						</div>
 						<div>
 							<Label htmlFor="lastName">Last Name</Label>
-							<Input name="lastName" id="lastName" type="text" placeholder="Barker" />
+							<Input
+								name="lastName"
+								id="lastName"
+								type="text"
+								placeholder="Barker"
+							/>
 						</div>
 					</div>
-
 				</div>
 
+				<div className="mt-9">
+					<h6 className="text-2xl font-semibold text-zinc-950">Address</h6>
 
-				<div className='mt-9'>
-					<h6 className='text-zinc-950 text-2xl font-semibold'>Address</h6>
-
-					<div className='mt-4 flex space-x-4'>
+					<div className="mt-4 flex space-x-4">
 						<div>
 							<Label htmlFor="address">Street address</Label>
-							<Input name="address" id="address" type="text" placeholder="76 Framingham Ave." />
-							<Input name="addressTwo" id="adressTwo" type="text" placeholder="Apt 256" />
+							<Input
+								name="address"
+								id="address"
+								type="text"
+								placeholder="76 Framingham Ave."
+							/>
+							<Input
+								name="addressTwo"
+								id="adressTwo"
+								type="text"
+								placeholder="Apt 256"
+							/>
 
-							<div className='mt-4 flex'>
+							<div className="mt-4 flex">
 								<div>
 									<Label htmlFor="city">City/Town</Label>
-									<Input name="city" id="city" type="text" placeholder="Boston" />
+									<Input
+										name="city"
+										id="city"
+										type="text"
+										placeholder="Boston"
+									/>
 								</div>
 								<div>
 									<Label htmlFor="state">State</Label>
 									<Input name="state" id="state" type="text" placeholder="MA" />
 								</div>
 								<div>
 									<Label htmlFor="zipcode">Zipcode</Label>
-									<Input name="zipcode" id="zipcode" type="text" placeholder="02856" />
+									<Input
+										name="zipcode"
+										id="zipcode"
+										type="text"
+										placeholder="02856"
+									/>
 								</div>
 							</div>
 						</div>
 					</div>
 				</div>
 
-
-				<div className='mt-9'>
+				<div className="mt-9">
 					<h6>
-						<Label className='text-zinc-950 text-2xl font-semibold' htmlFor="livingArea">
+						<Label
+							className="text-2xl font-semibold text-zinc-950"
+							htmlFor="livingArea"
+						>
 							Living Area (sf)
 						</Label>
 					</h6>
 
-					<div className='mt-4'>
+					<div className="mt-4">
 						<div>
-							<Input name="livingArea" id="livingArea" type="number" placeholder="3000" />
-							<p className='mt-2 text-sm text-slate-500'>The home's above-grade, conditioned space</p>
+							<Input
+								name="livingArea"
+								id="livingArea"
+								type="number"
+								placeholder="3000"
+							/>
+							<p className="mt-2 text-sm text-slate-500">
+								The home's above-grade, conditioned space
+							</p>
 						</div>
 					</div>
 				</div>
 
-				<div>
-					<Button type='submit'>Next ={'>'}</Button>
-				</div>
+				{/* removed temporarily for single page app format */}
+				{/* <div>
+					<Button type="submit">Next ={'>'}</Button>
+				</div> */}
 			</Form>
 		</div>
 	)

diff --git a/heat-stack/app/root.tsx b/heat-stack/app/root.tsx
@@ -145,11 +145,15 @@ export default function HeatStack({
 				<Links />
 			</head>
 			<body className="bg-background text-foreground">
-				<div>Site header</div>
-				<br />
-				<Outlet />
-				<br />
-				<div>Site footer</div>
+				<div className="container items-center justify-between gap-4 md:h-24 md:flex-row">
+					<div>Site header</div>
+					<hr />
+					<br />
+					<Outlet />
+					<br />
+					<hr />
+					<div>Site footer</div>
+				</div>
 				<script
 					nonce={nonce}
 					dangerouslySetInnerHTML={{

diff --git a/heat-stack/app/routes/_heat+/index.tsx b/heat-stack/app/routes/_heat+/index.tsx
@@ -10,7 +10,8 @@ export default function Home() {
 				Some paths with placeholder pages are:
 				<li>/heatloadanalysis - see an example heat load analysis</li>
 				<li>/cases - see a list of cases</li>
-				<li>input screens: /inputs1, /inputs2, /inputs3</li>
+				<li>/single - view as a single page app</li>
+				<li>/inputs1, /inputs2, /inputs3 - individual input screens </li>
 				<li>/epicstack - information about the Epic Stack</li>
 			</ul>
 		</div>

diff --git a/heat-stack/app/routes/_heat+/single.tsx b/heat-stack/app/routes/_heat+/single.tsx
@@ -0,0 +1,17 @@
+import { CurrentHeatingSystem } from '../../components/ui/heat/CaseSummaryComponents/CurrentHeatingSystem.tsx'
+import { EnergyUseHistory } from '../../components/ui/heat/CaseSummaryComponents/EnergyUseHistory.tsx'
+import { Graphs } from '../../components/ui/heat/CaseSummaryComponents/Graphs.tsx'
+import { HomeInformation } from '../../components/ui/heat/CaseSummaryComponents/HomeInformation.tsx'
+
+export default function Inputs() {
+	return (
+		<div>
+			{/* <div className="container items-center justify-between gap-4 md:h-24 md:flex-row"> */}
+			<HomeInformation />
+			<CurrentHeatingSystem />
+			<EnergyUseHistory />
+			<h1 className="page-title">Heat Load Analysis</h1>
+			<Graphs />
+		</div>
+	)
+}