diff --git a/heat-stack/app/App.css b/heat-stack/app/App.css new file mode 100644 index 00000000..2fb7983c --- /dev/null +++ b/heat-stack/app/App.css @@ -0,0 +1,78 @@ +body { + font-family: 'Inter', sans-serif; +} + +.main-container { + grid-area: main; + overflow-y: auto; + padding: 20px 20px; + margin: 30px 30px; +} + +.page-title { + color: #000; + font-size: 30px; + font-style: normal; + font-weight: 600; + line-height: 36px; + letter-spacing: -0.225px; + text-align: center; + padding-block: 20px; + /*vertical padding */ +} +.section-title { +color: var(--slate-700, #334155); + font-size: 24px; + font-style: normal; + line-height: 32px; + letter-spacing: -0.144px; + padding-block: 20px; + /*vertical padding */ +} + +.item-group-title { + color: var(--slate-900, #0F172A); + /* h2 */ + font-size: 30px; + font-style: normal; + line-height: 36px; + /* 120% */ + letter-spacing: -0.225px; + padding-block: 20px; + /*vertical padding */ +} +.item-title { +color: var(--slate-900, #0F172A); + font-size: 20px; + font-style: normal; + font-weight: 600; + line-height: 28px; + padding-block: 20px; + /*vertical padding */ +} +.item-title-small { +color: var(--slate-900, #0F172A); + font-size: 20px; + font-style: normal; + font-weight: 600; + line-height: 28px; + padding-block: 20px; + /*vertical padding */ +} + +.item-big { + color: var(--slate-900, #0F172A); + font-size: 30px; + font-weight: 300; + font-style: normal; + line-height: 36px; + letter-spacing: -0.225px; +} +.item { + color: var(--slate-900, #0F172A); + font-size: 20px; + font-weight: 300; + font-style: normal; + line-height: 28px; +} + diff --git a/heat-stack/app/components/CaseSummary.tsx b/heat-stack/app/components/CaseSummary.tsx new file mode 100644 index 00000000..b77bc392 --- /dev/null +++ b/heat-stack/app/components/CaseSummary.tsx @@ -0,0 +1,18 @@ +import { CurrentHeatingSystem } from './ui/CaseSummaryComponents/CurrentHeatingSystem.tsx' +import { EnergyUseHistory } from './ui/CaseSummaryComponents/EnergyUseHistory.tsx' +import { Graphs } from './ui/CaseSummaryComponents/Graphs.tsx' +import { HomeInformation } from './ui/CaseSummaryComponents/HomeInformation.tsx' + +export function CaseSummary() { + return ( +
+
+

Case Summary

+ + + + +
+
+ ) +} diff --git a/heat-stack/app/components/ui/CaseSummaryComponents/CurrentHeatingSystem.tsx b/heat-stack/app/components/ui/CaseSummaryComponents/CurrentHeatingSystem.tsx new file mode 100644 index 00000000..11833b8b --- /dev/null +++ b/heat-stack/app/components/ui/CaseSummaryComponents/CurrentHeatingSystem.tsx @@ -0,0 +1,39 @@ +export function CurrentHeatingSystem() { + const fuelType = 'Natural Gas' + const heatingSystemEfficiency = '75' + const setPoint = '70' + const setbackTemperature = '65' + const setbackTime = '7' + + return ( +
+ Current Heating System +
+
+
+
+ Fuel Type +
+
{fuelType}

+ Heating System Efficiency (%) +
+
{heatingSystemEfficiency}

+
+
+ +
+
Thermostat Settings
+
+ Set Point (°F)
+
{setPoint}

+ Setback Temperature (°F) +
+
{setbackTemperature}

+ Setback Time (h) +
{setbackTime}
+
+
+
+
+ ) +} diff --git a/heat-stack/app/components/ui/CaseSummaryComponents/EnergyUseHistory.tsx b/heat-stack/app/components/ui/CaseSummaryComponents/EnergyUseHistory.tsx new file mode 100644 index 00000000..d0809501 --- /dev/null +++ b/heat-stack/app/components/ui/CaseSummaryComponents/EnergyUseHistory.tsx @@ -0,0 +1,52 @@ +import { EnergyUseHistoryChart } from './EnergyUseHistoryChart.tsx' + +export function EnergyUseHistory() { + const averageIndoorTemperature = '63.5' + const dailyOtherUsage = '1.07' + const balancePoint = '60.5' + const numPeriodsIncluded = '30 / 36' + const standardDevationUA = '5.52' + const wholeHomeUA = '1,112' + const fileName = '20200930_Eversource.csv' + + return ( +
+ Energy Use History +
+
+ Data Source +
+
{fileName}

+
+
Analysis
+
+
+
+ Average Indoor Temperature (°F)
+
{averageIndoorTemperature}

+ Daily Other Usage
+
{dailyOtherUsage}

+
+
+
+
+ Balance Point (°F)
+
{balancePoint}

+ No. of Periods Included
+
{numPeriodsIncluded}

+
+
+
+
+ Standard Deviation of UA (%)
+
{standardDevationUA}

+ Whole-home UA (BTU/h-°F)
+
{wholeHomeUA}

+
+
+
+
Usage Details
+ +
+ ) +} diff --git a/heat-stack/app/components/ui/CaseSummaryComponents/EnergyUseHistoryChart.tsx b/heat-stack/app/components/ui/CaseSummaryComponents/EnergyUseHistoryChart.tsx new file mode 100644 index 00000000..595b0f5e --- /dev/null +++ b/heat-stack/app/components/ui/CaseSummaryComponents/EnergyUseHistoryChart.tsx @@ -0,0 +1,62 @@ +import { Checkbox } from '../../../components/ui/checkbox.tsx' + +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '../../../components/ui/table.tsx' + +const months = [ + { + includeData: true, + startDate: '02/02/2018', + endDate: '02/28/2018', + daysInBill: '27', + usage: 'Yes', + fUA: '10', + }, + { + includeData: true, + startDate: '03/01/2018', + endDate: '03/31/2018', + daysInBill: '31', + usage: 'Modest', + fUA: '30', + }, +] + +export function EnergyUseHistoryChart() { + return ( + + + + # + Include Data + Start Date + End Date + Days in Bill + Usage (therms) + 60.5 °F UA (BTU/h-F) + + + + {months.map((month, index) => ( + + {index + 1} + + + + {month.startDate} + {month.endDate} + {month.daysInBill} + {month.usage} + {month.fUA} + + ))} + +
+ ) +} diff --git a/heat-stack/app/components/ui/CaseSummaryComponents/Graphs.tsx b/heat-stack/app/components/ui/CaseSummaryComponents/Graphs.tsx new file mode 100644 index 00000000..48cbcc9a --- /dev/null +++ b/heat-stack/app/components/ui/CaseSummaryComponents/Graphs.tsx @@ -0,0 +1,15 @@ +import { HeatLoad } from './Graphs/HeatLoad.tsx' +import { StandardDeviationOfUA } from './Graphs/StandardDeviationOfUA.tsx' +import { WholeHomeUAComparison } from './Graphs/WholeHomeUAComparison.tsx' + +export function Graphs() { + return ( +
+ Graphs +
+ + + +
+ ) +} diff --git a/heat-stack/app/components/ui/CaseSummaryComponents/Graphs/HeatLoad.tsx b/heat-stack/app/components/ui/CaseSummaryComponents/Graphs/HeatLoad.tsx new file mode 100644 index 00000000..accb2a0c --- /dev/null +++ b/heat-stack/app/components/ui/CaseSummaryComponents/Graphs/HeatLoad.tsx @@ -0,0 +1,48 @@ +import { + ScatterChart, + Scatter, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + ResponsiveContainer, +} from 'recharts' + +// data from Karle Heat Load Analysis Beta 7 2023-07-11 +const data = [ + { x: 0, y: 74015 }, + { x: 60.5, y: 10045 }, + { x: 67, y: 3172 }, + { x: 70, y: 0 }, + { x: 8.4, y: 65133 }, +] + +export function HeatLoad() { + return ( +
+
Heat Load
+ + + + + + + + + + +
+ ) +} diff --git a/heat-stack/app/components/ui/CaseSummaryComponents/Graphs/StandardDeviationOfUA.tsx b/heat-stack/app/components/ui/CaseSummaryComponents/Graphs/StandardDeviationOfUA.tsx new file mode 100644 index 00000000..3a37c1e5 --- /dev/null +++ b/heat-stack/app/components/ui/CaseSummaryComponents/Graphs/StandardDeviationOfUA.tsx @@ -0,0 +1,53 @@ +import { + ScatterChart, + Scatter, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + ResponsiveContainer, +} from 'recharts' + +// data from Karle Heat Load Analysis Beta 7 2023-07-11 +const data = [ + { x: 58.5, y: 0.0534 }, + { x: 60.5, y: 0.0508 }, + { x: 62.5, y: 0.0528 }, +] + +export function StandardDeviationOfUA() { + return ( +
+
Standard Deviation of UA
+ + + + + + + + + + +
+ ) +} diff --git a/heat-stack/app/components/ui/CaseSummaryComponents/Graphs/WholeHomeUAComparison.tsx b/heat-stack/app/components/ui/CaseSummaryComponents/Graphs/WholeHomeUAComparison.tsx new file mode 100644 index 00000000..54788c6b --- /dev/null +++ b/heat-stack/app/components/ui/CaseSummaryComponents/Graphs/WholeHomeUAComparison.tsx @@ -0,0 +1,149 @@ +import { + ComposedChart, + Line, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Scatter, + ResponsiveContainer, +} from 'recharts' + +const data = [ + { x: 2702, y: 1092 }, + { x: 4000, y: 1155 }, + { x: 1851, y: 464 }, + { x: 1112, y: 218 }, + { x: 3000, y: 733 }, + { x: 2100, y: 798 }, + { x: 2454, y: 475 }, + { x: 1229, y: 341 }, + { x: 2000, y: 720 }, + { x: 3946, y: 648 }, + { x: 1960, y: 477 }, + { x: 1800, y: 551 }, + { x: 2992, y: 751 }, + { x: 2342, y: 698 }, + { x: 1728, y: 290 }, + { x: 2440, y: 977 }, + { x: 3891, y: 1300 }, + { x: 1906, y: 958 }, + { x: 2835, y: 967 }, + { x: 3459, y: 975 }, + { x: 3459, y: 809 }, + { x: 4230, y: 1684 }, + { x: 4250, y: 1265 }, + { x: 3604, y: 1422 }, + { x: 2033, y: 715 }, + { x: 4000, y: 1124 }, + { x: 3028, y: 1519 }, + { x: 3254.6, y: 872 }, + { x: 3514, y: 743 }, + { x: 1896, y: 728 }, + { x: 3878, y: 1011 }, + { x: 2760, y: 792 }, + { x: 3262, y: 1066 }, + { x: 3850, y: 1128 }, + { x: 1559, y: 528 }, + { x: 2133, y: 709 }, + { x: 2400, y: 994 }, + { x: 3370, y: 1072 }, + { x: 1662, y: 775 }, + { x: 1533, y: 645 }, + { x: 2600, y: 587 }, + { x: 2155, y: 654 }, + { x: 2200, y: 567 }, + { x: 1999, y: 716 }, + { x: 2400, y: 758 }, + { x: 2492, y: 858 }, + { x: 3120, y: 857 }, + { x: 3398, y: 1147 }, + { x: 4857, y: 1085 }, + { x: 3254, y: 723 }, + { x: 2584, y: 872 }, + { x: 2688, y: 670 }, + { x: 864, y: 479 }, + { x: 2110, y: 609 }, + { x: 1500, y: 767 }, + { x: 2803, y: 648 }, + { x: 1157, y: 340 }, + { x: 5000, y: 1485 }, + { x: 2228, y: 627 }, + { x: 1258, y: 417 }, + { x: 2500, y: 951 }, + { x: 1700, y: 721 }, + { x: 3066, y: 1622 }, + { x: 2485, y: 735 }, + { x: 1300, y: 435 }, + { x: 1600, y: 356 }, + { x: 2716, y: 820 }, + { x: 3000, y: 1207 }, + { x: 2000, y: 599 }, + { x: 1980, y: 513 }, + { x: 2500, y: 901 }, + { x: 2940, y: 1020 }, + { x: 2078, y: 699 }, + { x: 2824, y: 849 }, + { x: 2140, y: 913 }, + { x: 2765, y: 900 }, + { x: 3378, y: 944 }, + { x: 3111, y: 823 }, + { x: 2200, y: 680 }, + { x: 3800, y: 1057 }, + { x: 1638, y: 849 }, + { x: 2076, y: 992 }, + { x: 3740, y: 1207 }, + { x: 1566, y: 398 }, + { x: 2508, y: 867 }, + { x: 1518, y: 480 }, + { x: 1361, y: 565 }, + { x: 3886, y: 985 }, + { x: 2263, y: 1042 }, + { x: 1970, y: 479 }, + { x: 2133, y: 564 }, + { x: 1624, y: 571 }, + { x: 2093, y: 418 }, + { x: 2028, y: 651 }, + { x: 2849, y: 799 }, + { x: 0, yLine: 0 }, + { x: 5000, yLine: 1650 }, +] + +export function WholeHomeUAComparison() { + return ( +
+
Whole Home UA Comparison
+ + + + + + + + + + + +
+ ) +} diff --git a/heat-stack/app/components/ui/CaseSummaryComponents/HomeInformation.tsx b/heat-stack/app/components/ui/CaseSummaryComponents/HomeInformation.tsx new file mode 100644 index 00000000..ad560b2e --- /dev/null +++ b/heat-stack/app/components/ui/CaseSummaryComponents/HomeInformation.tsx @@ -0,0 +1,64 @@ +import { Form } from '@remix-run/react' +import { Input } from '../input.tsx' +import { Label } from '../label.tsx' + +export function HomeInformation() { + const name = 'Pietro Schirano' + const street = '567 Pine Avenue Apt 21' + const city = 'Rivertown' + const state = 'MA' + const zip = '02856' + const country = 'United States of America' + const livingArea = '3,000' + const designTemperature = '63' + const designTemperatureOverride = '65' + return ( +
+ Home Information +
+
+
+
+ Resident / Client +
+
{name}

+ Address +
{street}
+
+ {city}, {state}, {zip} +
+
{country}

+ Living Area (sf) +
{livingArea}
+
+
+ +
+
+ Design Temperature (°F)
+
{designTemperature}

+
true} + > +
+ + +
+
+
+
+
+
+ ) +} diff --git a/heat-stack/app/components/ui/README.md b/heat-stack/app/components/ui/README.md index 433847df..1ad189cb 100644 --- a/heat-stack/app/components/ui/README.md +++ b/heat-stack/app/components/ui/README.md @@ -4,4 +4,4 @@ Some components in this directory are downloaded via the [shadcn/ui](https://ui.shadcn.com) [CLI](https://ui.shadcn.com/docs/cli). Feel free to customize them to your needs. It's important to know that shadcn/ui is not a library of components you install, but instead it's a registry of prebuilt -components which you can download and customize. +components which you can download and customize. \ No newline at end of file diff --git a/heat-stack/app/components/ui/checkbox.tsx b/heat-stack/app/components/ui/checkbox.tsx index 637a7fdd..298447c9 100644 --- a/heat-stack/app/components/ui/checkbox.tsx +++ b/heat-stack/app/components/ui/checkbox.tsx @@ -1,5 +1,6 @@ -import * as CheckboxPrimitive from '@radix-ui/react-checkbox' import * as React from 'react' +import * as CheckboxPrimitive from '@radix-ui/react-checkbox' +import { Check } from 'lucide-react' import { cn } from '#app/utils/misc.tsx' @@ -25,14 +26,15 @@ const Checkbox = React.forwardRef< - + + {/* - + */} )) diff --git a/heat-stack/app/components/ui/table.tsx b/heat-stack/app/components/ui/table.tsx new file mode 100644 index 00000000..ba987225 --- /dev/null +++ b/heat-stack/app/components/ui/table.tsx @@ -0,0 +1,117 @@ +import * as React from "react" + +import { cn } from "#app/utils/misc.tsx" + +const Table = React.forwardRef< + HTMLTableElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+ + +)) +Table.displayName = "Table" + +const TableHeader = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableHeader.displayName = "TableHeader" + +const TableBody = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableBody.displayName = "TableBody" + +const TableFooter = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + tr]:last:border-b-0", + className + )} + {...props} + /> +)) +TableFooter.displayName = "TableFooter" + +const TableRow = React.forwardRef< + HTMLTableRowElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableRow.displayName = "TableRow" + +const TableHead = React.forwardRef< + HTMLTableCellElement, + React.ThHTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +TableHead.displayName = "TableHead" + +const TableCell = React.forwardRef< + HTMLTableCellElement, + React.TdHTMLAttributes +>(({ className, ...props }, ref) => ( + +)) +TableCell.displayName = "TableCell" + +const TableCaption = React.forwardRef< + HTMLTableCaptionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +TableCaption.displayName = "TableCaption" + +export { + Table, + TableHeader, + TableBody, + TableFooter, + TableHead, + TableRow, + TableCell, + TableCaption, +} diff --git a/heat-stack/app/root.tsx b/heat-stack/app/root.tsx index 9225a479..ec56625d 100644 --- a/heat-stack/app/root.tsx +++ b/heat-stack/app/root.tsx @@ -1,86 +1,22 @@ -import { useForm } from '@conform-to/react' -import { parse } from '@conform-to/zod' import { cssBundleHref } from '@remix-run/css-bundle' -import { - json, - type DataFunctionArgs, - type HeadersFunction, - type LinksFunction, - type MetaFunction, -} from '@remix-run/node' -import { - Form, - Link, - Links, - LiveReload, - Meta, - Outlet, - Scripts, - ScrollRestoration, - useFetcher, - useFetchers, - useLoaderData, - useMatches, - useSubmit, -} from '@remix-run/react' -import { withSentry } from '@sentry/remix' -import { Suspense, lazy, useEffect, useRef, useState } from 'react' -import { object, z } from 'zod' -import { Confetti } from './components/confetti.tsx' -import { GeneralErrorBoundary } from './components/error-boundary.tsx' -import { ErrorList } from './components/forms.tsx' -import { SearchBar } from './components/search-bar.tsx' -import { EpicToaster } from './components/toaster.tsx' -import { Button } from './components/ui/button.tsx' -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuPortal, - DropdownMenuTrigger, -} from './components/ui/dropdown-menu.tsx' -import { Icon, href as iconsHref } from './components/ui/icon.tsx' import fontStyleSheetUrl from './styles/font.css' import tailwindStyleSheetUrl from './styles/tailwind.css' -import { authenticator, getUserId } from './utils/auth.server.ts' -import { ClientHintCheck, getHints, useHints } from './utils/client-hints.tsx' -import { getConfetti } from './utils/confetti.server.ts' -import { prisma } from './utils/db.server.ts' -import { getEnv } from './utils/env.server.ts' -import { - combineHeaders, - getDomainUrl, - getUserImgSrc, - invariantResponse, -} from './utils/misc.tsx' +import { Links, Scripts } from '@remix-run/react' +import { href as iconsHref } from './components/ui/icon.tsx' +import { DataFunctionArgs, json, type LinksFunction } from '@remix-run/node' + +import { CaseSummary } from './components/CaseSummary.tsx' +import './App.css' import { useNonce } from './utils/nonce-provider.ts' -import { useRequestInfo } from './utils/request-info.ts' -import { type Theme, setTheme, getTheme } from './utils/theme.server.ts' import { makeTimings, time } from './utils/timing.server.ts' -import { getToast } from './utils/toast.server.ts' -import { useOptionalUser, useUser } from './utils/user.ts' - +import { combineHeaders, getDomainUrl } from './utils/misc.tsx' +// import { csrf } from './utils/csrf.server.ts' +import { getEnv } from './utils/env.server.ts' +import { getHints } from './utils/client-hints.tsx' import { WeatherExample } from './components/WeatherExample.tsx' -import type { Weather } from './WeatherExample.d.ts'; - -import * as pyodideModule from 'pyodide' -import engine from '../../rules-engine/src/rules_engine/engine.py'; - -const getPyodide = async () => { - // public folder: - return await pyodideModule.loadPyodide({ - indexURL: 'pyodide-env/', - }) -} - -const runPythonScript = async () => { - const pyodide: any = await getPyodide(); - // console.log(engine); - await pyodide.loadPackage("numpy") - await pyodide.runPythonAsync(engine); - return pyodide; -}; - +import { Weather } from './WeatherExample.js' +import { getUserId } from './utils/auth.server.ts' +import { prisma } from './utils/db.server.ts' export const links: LinksFunction = () => { return [ @@ -110,14 +46,6 @@ export const links: LinksFunction = () => { ].filter(Boolean) } -export const meta: MetaFunction = ({ data }) => { - return [ - { title: data ? 'Epic Notes' : 'Error | Epic Notes' }, - { name: 'description', content: `Your own captain's log` }, - ] -} - -// We can only have one `loader()`. More requires special gymnastics. export async function loader({ request }: DataFunctionArgs) { const timings = makeTimings('root loader') const userId = await time(() => getUserId(request), { @@ -125,7 +53,6 @@ export async function loader({ request }: DataFunctionArgs) { type: 'getUserId', desc: 'getUserId in root', }) - const user = userId ? await time( () => @@ -149,346 +76,57 @@ export async function loader({ request }: DataFunctionArgs) { { timings, type: 'find user', desc: 'find user in root' }, ) : null - if (userId && !user) { - console.info('something weird happened') - // something weird happened... The user is authenticated but we can't find - // them in the database. Maybe they were deleted? Let's log them out. - await authenticator.logout(request, { redirectTo: '/' }) - } - const { toast, headers: toastHeaders } = await getToast(request) - const { confettiId, headers: confettiHeaders } = getConfetti(request) - + // const honeyProps = honeypot.getInputProps() + // const [csrfToken, csrfCookieHeader] = await csrf.commitToken() // Weather station data - const w_href: string = 'https://archive-api.open-meteo.com/v1/archive?latitude=52.52&longitude=13.41&daily=temperature_2m_max&timezone=America%2FNew_York&start_date=2022-01-01&end_date=2023-08-30&temperature_unit=fahrenheit'; - const w_res: Response = await fetch(w_href); + const w_href: string = + 'https://archive-api.open-meteo.com/v1/archive?latitude=52.52&longitude=13.41&daily=temperature_2m_max&timezone=America%2FNew_York&start_date=2022-01-01&end_date=2023-08-30&temperature_unit=fahrenheit' + const w_res: Response = await fetch(w_href) const weather: Weather = (await w_res.json()) as Weather return json( { weather: weather, - user, + user: user, requestInfo: { hints: getHints(request), origin: getDomainUrl(request), path: new URL(request.url).pathname, - userPrefs: { - theme: getTheme(request), - }, + userPrefs: {}, }, ENV: getEnv(), - toast, - confettiId, + // honeyProps, + // csrfToken, }, { headers: combineHeaders( { 'Server-Timing': timings.toString() }, - toastHeaders, - confettiHeaders, + // csrfCookieHeader ? { 'set-cookie': csrfCookieHeader } : null, ), }, ) } -export const headers: HeadersFunction = ({ loaderHeaders }) => { - const headers = { - 'Server-Timing': loaderHeaders.get('Server-Timing') ?? '', - } - return headers -} - -const ThemeFormSchema = z.object({ - theme: z.enum(['system', 'light', 'dark']), -}) - -export async function action({ request }: DataFunctionArgs) { - const formData = await request.formData() - invariantResponse( - formData.get('intent') === 'update-theme', - 'Invalid intent', - { status: 400 }, - ) - const submission = parse(formData, { - schema: ThemeFormSchema, - }) - if (submission.intent !== 'submit') { - return json({ status: 'success', submission } as const) - } - if (!submission.value) { - return json({ status: 'error', submission } as const, { status: 400 }) - } - const { theme } = submission.value - - const responseInit = { - headers: { 'set-cookie': setTheme(theme) }, - } - return json({ success: true, submission }, responseInit) -} - -function Document({ - children, - nonce, - theme = 'light', - env = {}, -}: { - children: React.ReactNode - nonce: string - theme?: Theme - env?: Record -}) { - const [output, setOutput] = useState('(loading python...)'); - - useEffect(() => { - const run = async () => { - const pyodide: any = await runPythonScript(); - // console.log(pyodide); - const result = await pyodide.runPythonAsync("hdd(57, 60)"); - setOutput(result); - }; - run(); - }, []); +export default function HeatStack({ env = {} }) { + const nonce = useNonce() return ( - + - - -
-
Output:
- {output} -
- - {children} -