\n onChange(index, \"start\", value)}\n placeholder=\"hhmm\"\n />\n onChange(index, \"end\", value)}\n placeholder=\"hhmm\"\n />\n {duration}\n onChange(index, \"subtractFullDay\", e.target.checked)}\n />\n

\n );\n}\n\nfunction calculateTimeDifference(start, end, subtractFullDay, fullDayHours) {\n if (start.length !== 4 || end.length !== 4) return \"\";\n \n const startHours = parseInt(start.slice(0, 2));\n const startMinutes = parseInt(start.slice(2, 4));\n const endHours = parseInt(end.slice(0, 2));\n const endMinutes = parseInt(end.slice(2, 4));\n \n const startTotalMinutes = startHours * 60 + startMinutes;\n const endTotalMinutes = endHours * 60 + endMinutes;\n \n let diff = endTotalMinutes - startTotalMinutes;\n if (diff < 0) diff += 24 * 60;\n \n if (subtractFullDay) {\n diff -= fullDayHours * 60;\n }\n \n const sign = diff < 0 ? '-' : '';\n const absDiff = Math.abs(diff);\n const hours = Math.floor(absDiff / 60);\n const minutes = absDiff % 60;\n \n return `${sign}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;\n}\n\nfunction calculateTotalDuration(rows, fullDayHours) {\n let totalMinutes = 0;\n rows.forEach(row => {\n const duration = calculateTimeDifference(row.start, row.end, row.subtractFullDay, fullDayHours);\n if (duration) {\n const sign = duration.startsWith('-') ? -1 : 1;\n const [hours, minutes] = duration.replace('-', '').split(':').map(Number);\n totalMinutes += sign * (hours * 60 + minutes);\n }\n });\n const sign = totalMinutes < 0 ? '-' : '';\n const absTotalMinutes = Math.abs(totalMinutes);\n const hours = Math.floor(absTotalMinutes / 60);\n const minutes = absTotalMinutes % 60;\n return `${sign}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;\n}\n\nfunction saveToQueryParams(rows, fullDayHours) {\n const params = new URLSearchParams();\n params.append('fullDayHours', fullDayHours);\n rows.forEach((row, index) => {\n if (row.start) params.append(`start${index}`, row.start);\n if (row.end) params.append(`end${index}`, row.end);\n params.append(`subtractFullDay${index}`, row.subtractFullDay);\n });\n window.history.replaceState({}, '', `${window.location.pathname}?${params}`);\n}\n\nfunction loadFromQueryParams() {\n const params = new URLSearchParams(window.location.search);\n const rows = [];\n let index = 0;\n while (params.has(`start${index}`) || params.has(`end${index}`)) {\n rows.push({\n start: params.get(`start${index}`) || \"\",\n end: params.get(`end${index}`) || \"\",\n subtractFullDay: params.get(`subtractFullDay${index}`) === 'true'\n });\n index++;\n }\n return {\n rows: rows.length > 0 ? rows : [{ start: \"\", end: \"\", subtractFullDay: false }],\n fullDayHours: parseInt(params.get('fullDayHours')) || 8\n };\n}\n\nfunction App() {\n const [rows, setRows] = useState([{ start: \"\", end: \"\", subtractFullDay: false }]);\n const [fullDayHours, setFullDayHours] = useState(8);\n\n useEffect(() => {\n const { rows: loadedRows, fullDayHours: loadedFullDayHours } = loadFromQueryParams();\n setRows(loadedRows);\n setFullDayHours(loadedFullDayHours);\n }, []);\n\n const handleChange = (index, field, value) => {\n const newRows = [...rows];\n newRows[index][field] = value;\n setRows(newRows);\n saveToQueryParams(newRows, fullDayHours);\n };\n\n const addRow = () => {\n const newRows = [...rows, { start: \"\", end: \"\", subtractFullDay: false }];\n setRows(newRows);\n saveToQueryParams(newRows, fullDayHours);\n };\n\n const handleFullDayHoursChange = (e) => {\n const value = parseInt(e.target.value) || 0;\n setFullDayHours(value);\n saveToQueryParams(rows, value);\n };\n\n return (\n

Time Calculator

\n Full day hours: \n \n

\n Start Time\n End Time\n Duration\n Subtract Full Day\n

\n {rows.map((row, index) => (\n \n ))}\n \n

Total Rows: {rows.length}

Total Duration: {calculateTotalDuration(rows, fullDayHours)}

\n Shareable Link:\n {window.location.href}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n \n \n \n Time Calculator\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n background-color: #f0f0f0;\n}\n\n.app {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\n width: 100%;\n max-width: 600px;\n}\n\nh1 {\n text-align: center;\n color: #333;\n}\n\n.full-day-hours {\n margin-bottom: 20px;\n}\n\n.time-row {\n display: flex;\n margin-bottom: 10px;\n justify-content: space-between;\n align-items: center;\n}\n\n.time-row.header {\n font-weight: bold;\n margin-bottom: 15px;\n}\n\n.time-row.header span {\n flex: 1;\n text-align: center;\n}\n\ninput[type=\"text\"], input[type=\"number\"] {\n width: 60px;\n padding: 5px;\n border: 1px solid #ccc;\n border-radius: 4px;\n text-align: center;\n}\n\n.duration {\n width: 60px;\n text-align: center;\n}\n\n.duration.negative {\n color: red;\n}\n\nbutton {\n display: block;\n margin: 20px auto 0;\n padding: 10px 20px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #45a049;\n}\n\n.summary {\n margin-top: 20px;\n text-align: right;\n font-weight: bold;\n}\n\n.share-link {\n margin-top: 20px;\n font-size: 0.9em;\n}\n\n.share-link a {\n display: block;\n word-break: break-all;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/mikaello/timeCalculator/code/main.tsx","extension","actionData","errors"]