Failed to fetch

;\n\n function processData(data) {\n /*console.log(JSON.stringify(data,null,2))*/\n let processedData = [];\n const onCall = \"On Call\";\n const regular = \"Regular\";\n data.data.forEach(shift => {\n const email = shift.surfer.email;\n let startDate = new Date(shift.interval.start);\n let endDate = new Date(shift.interval.end);\n let minutes = (-startDate.getTime() + endDate.getTime()) / 60000;\n let callHrs;\n let callMinutes;\n let regHrs;\n let regMinutes;\n\n if (shift.shiftTemplate.name === onCall) {\n callHrs = minutes / 60;\n callMinutes = minutes;\n regHrs = 0;\n regMinutes = 0;\n } else if (shift.shiftTemplate.name === regular) {\n regHrs = minutes / 60;\n regMinutes = minutes;\n callHrs = 0;\n callMinutes = 0;\n } else {\n console.log(\"Unkown shift type!\");\n callHrs = 0;\n callMinutes = 0;\n regHrs = 0;\n regMinutes = 0;\n }\n\n for (let i = 0; i <= processedData.length - 1; i++) {\n if (email === processedData[i].email) {\n let surferData = processedData[i];\n\n surferData[\"regHrs\"] += regHrs;\n surferData[\"regMinutes\"] += regMinutes;\n surferData[\"callHrs\"] += callHrs;\n surferData[\"callMinutes\"] += callMinutes;\n\n processedData[i] = surferData;\n return;\n }\n }\n\n let surferData = {\n email,\n regHrs,\n regMinutes,\n regCost: 0,\n callHrs,\n callMinutes,\n callCost: 0,\n totalHrs: 0,\n totalCost: 0,\n };\n processedData.push(surferData);\n });\n\n // Finding cost and total hours\n for (let i = 0; i <= processedData.length - 1; i++) {\n let surferData = processedData[i];\n let callCostM = callCostH / 60;\n let regCostM = regCostH / 60;\n\n surferData.regCost = regCostM * surferData.regMinutes;\n surferData.callCost = callCostM * surferData.callMinutes;\n surferData.totalCost = surferData.regCost + surferData.callCost;\n surferData.totalHrs = surferData.callHrs + surferData.regHrs;\n\n processedData[i] = surferData;\n }\n return processedData;\n }\n\n const processedData = processData(data);\n\n return (\n

Employee hours and pay

(This is an API demo to showcase how the Teamsurfboard API can be used.)

\n The current rates are £{callCostH} per hour for an on call shift and £{regCostH}{\" \"}\n per hour for a regular shift. You may change this by going into the val.town source code. You can also change\n the timeframe, the default is from now till next week.\n

\n {processedData.map((surfer) => )}\n

\n );\n}\n\nconst Surfer = ({ surfer }) => {\n console.log(surfer);\n return (\n

Surfer email: {surfer.email}

On Call Hours: {surfer.callHrs} hours

On Call Pay: £{surfer.callCost}

Regular Hours: {surfer.regHrs} hours

Regular Pay: £{surfer.regCost}

Total Hours: {surfer.totalHrs} hours

Total Pay: £{surfer.totalCost}

\n );\n};\n\nconst App = ({ data }) => (\n \n \n \n \n \n \n);\n\n// if (typeof document !== \"undefined\") {\n// const { hydrateRoot } = await import(\"https://esm.sh/react-dom/client\");\n// const scheduleData = await getSchedule();\n// hydrateRoot(document, );\n// }\n\nexport default async function(req: Request): Promise {\n const scheduleData = await getSchedule();\n const { renderToReadableStream } = await import(\"https://esm.sh/react-dom/server\");\n const stream = await renderToReadableStream(, { bootstrapModules: [import.meta.url] });\n return new Response(stream, { headers: { \"content-type\": \"text/html\" } });\n}\n\n// Styles\nconst styles = {\n box: {\n backgroundColor: \"#fad35f\",\n borderRadius: \"8px\",\n padding: \"20px\",\n marginTop: \"20px\",\n marginBottom: \"20px\",\n boxShadow: \"0 4px 6px rgba(0, 0, 0, 0.1)\",\n transition: \"transform 0.2s ease-in-out\",\n \":hover\": {\n transform: \"translateY(-5px)\",\n },\n },\n hr: {\n height: \"8px\",\n backgroundColor: \"#562ad4\",\n borderColor: \"#562ad4\",\n borderRadius: \"10px\",\n },\n header: {\n height: \"4px\",\n backgroundColor: \"black\",\n borderColor: \"#black\",\n borderRadius: \"10px\",\n },\n container: {\n fontFamily: \"Arial, sans-serif\",\n maxWidth: \"1200px\",\n padding: \"20px\",\n backgroundColor: \"#e1e1fc\",\n marginRight: \"auto\",\n marginLeft: \"auto\",\n },\n \"left\": {\n textAlign: \"left\",\n width: \"50%\",\n display: \"inline-block\",\n marginTop: \"5px\",\n marginBottom: \"5px\",\n fontSize: \"20px\",\n },\n \"right\": {\n textAlign: \"right\",\n width: \"50%\",\n display: \"inline-block\",\n marginTop: \"10px\",\n marginBottom: \"10px\",\n fontSize: \"20px\",\n },\n img: {\n marginLeft: \"auto\",\n marginRight: \"auto\",\n display: \"block\",\n width: \"75px\",\n },\n textbox: {\n width: \"240\",\n display: \"inline-block\",\n marginLeft: \"40px\",\n marginRight: \"40px\",\n marginTop: \"25px\",\n marginBottom: \"25px\",\n },\n // button: {\n // background: \"#5E5DF0\",\n // borderRadius: \"999px\",\n // boxShadow: \"#5E5DF0 0 10px 20px -10px\",\n // boxSizing: \"border-box\",\n // color: \"#FFFFFF\",\n // cursor: \"pointer\",\n // fontFamily: \"Inter\",\n // fontSize: \"16px\",\n // fontWeight: \"700\",\n // lineHeight: \"24px\",\n // opacity: \"1\",\n // outline: \"0 solid transparent\",\n // padding: \"8px 18px\",\n // userSelect: \"none\",\n // touchAction: \"manipulation\",\n // width: \"fit-content\",\n // wordBreak: \"break-word\",\n // border: \"0\",\n // },\n info: {\n backgroundColor: \"#FFFFFF\",\n borderRadius: \"8px\",\n padding: \"20px\",\n marginTop: \"20px\",\n marginBottom: \"20px\",\n boxShadow: \"0 4px 6px rgba(0, 0, 0, 0.1)\",\n transition: \"transform 0.2s ease-in-out\",\n \":hover\": {\n transform: \"translateY(-5px)\",\n },\n },\n info_text: {\n marginTop: \"10px\",\n marginBottom: \"10px\",\n fontFamily: \"Arial, sans-serif\",\n fontStyle: \"italic\",\n },\n};","deleted","label",[98],"permalink","https://www.val.town/x/szymonator/surfboardDemoSchedule2/code/main.tsx","extension","actionData","errors"]