// WELCOME TO THE API DEMO // Since val.town doesn't behave well, we cannot access the value of inputs after the page has been loaded once. // Therefore, the only way to let the user modify their values is to do it manually. // Simly edit the number to what you want it to be. // DO NOT EDIT THE BELOW /** @jsxImportSource https://esm.sh/react */ import { useEffect, useState } from "https://esm.sh/react"; import { renderToString } from "npm:react-dom/server"; // BELOW ARE THE HOURLY RATES FOR AN ON CALL SHIFT, AND A REGULAR SHIFT. THE DEFAULT IS £24 AND £12. // TO CHANGE THIS, EDIT THE NUMBERS NEXT TO THE '=' SIGN. const callCostH = 24; const regCostH = 12; // DO NOT EDIT async function getSchedule() { try { let start = new Date(); let end = new Date(start); end.setDate(end.getDate() + 7); // BELOW ARE THE BOUNDARIES OF THE TIME FRAME YOU ARE GETTING THE DATA FROM. // THE DEFAULT IS FROM TODAY TILL NEXT WEEK. // IF YOU DON'T WANT THIS DEFAULT, REMOVE THE TWO FORWARD SLASHES FROM THE TWO LINES OF CODE AND // WRITE THE DATE IN THE FORMAT: "YYYY-MM-DD", INSIDE THE PROVIDED QUOTES. DO NOT CHANGE ANYTHING ELSE. // PLEASE DO NOT SET THE START DATE TO BE LATER THAN THE END DATE, ALSO KEEP THE POSITIONING OF THE LINES THE SAME. // start = new Date('YYYY-MM-DD'); // end = new Date('YYYY-MM-DD'); // YOU MAY NOW RUN THE FILE. const data = await fetch( `https://api.stage.teamsurfboard.com/api/v1/schedule?start=${start.toISOString()}&end=${end.toISOString()}`, { headers: { // ADD YOUR API TOKEN INTO THE ENV VARIABLES "Authorization": `Bearer ${Deno.env.get("TEAMSURFBOARD_API_TOKEN")}`, }, }, ) .then((res) => res.json()) .then((data) => data); return data; } catch (error) { console.error("An error occurred:", error.message); return null; } } function Demo({ data }) { if (!data) return

Failed to fetch

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

Employee hours and pay

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

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

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

); } const Surfer = ({ surfer }) => { console.log(surfer); return (

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}

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

szymonator