SNOTEL Data Viewer

\n \n \n\n",[18,64],"pulls","branches",1,"forks","envVars",{"_162":26,"_164":26},"connections",{"_162":26,"_163":26},"count","unfilledCount","emptyCount",{"_33":211,"_13":210,"_62":203,"_43":-5,"_35":36,"_143":212,"_144":24,"_37":213,"_39":26,"_65":71,"_146":-5,"_66":30,"_147":-5,"_177":214,"_17":215},{"_33":201,"_13":202,"_62":83,"_43":203,"_35":36,"_143":107,"_144":24,"_37":204,"_39":205,"_65":206,"_146":207,"_66":30,"_147":-5,"_177":208,"_17":209},{"_33":142,"_13":18,"_62":70,"_43":-5,"_35":36,"_143":40,"_144":24,"_37":198,"_39":26,"_65":71,"_146":-5,"_66":30,"_147":-5,"_177":199,"_17":200},{"_33":150,"_13":64,"_62":63,"_43":70,"_35":36,"_143":40,"_144":24,"_37":195,"_39":26,"_65":21,"_146":152,"_66":30,"_147":-5,"_177":196,"_17":197},{"_33":191,"_13":190,"_62":183,"_43":-5,"_35":36,"_143":184,"_144":24,"_37":192,"_39":26,"_65":71,"_146":-5,"_66":30,"_147":-5,"_177":193,"_17":194},{"_33":180,"_13":181,"_62":182,"_43":183,"_35":36,"_143":184,"_144":24,"_37":185,"_39":26,"_65":186,"_146":187,"_66":30,"_147":-5,"_177":188,"_17":189},{"_33":172,"_13":173,"_62":174,"_43":-5,"_35":36,"_143":156,"_144":24,"_37":175,"_39":26,"_65":21,"_146":176,"_66":30,"_147":-5,"_177":178,"_17":179},"c67bef4c-47cf-11f0-a860-76b3cceeab13","README.md","c67bf000-47cf-11f0-a860-76b3cceeab13",["D",1749761816224],"# SNOTEL Data Viewer\n\nA web application that displays the latest SNOTEL (Snow Telemetry) data from USDA's AWDB REST API.\n\n## Features\n\n- Displays latest snow and weather data from SNOTEL sites\n- Interactive table with site information\n- Real-time data fetching from USDA AWDB API\n\n## Project Structure\n\n- `backend/index.ts` - Main Hono server with API endpoints\n- `frontend/index.html` - Main HTML template\n- `frontend/index.tsx` - React frontend application\n- `shared/types.ts` - Shared TypeScript types\n\n## API Endpoints\n\n- `GET /` - Serves the main application\n- `GET /api/sites` - Fetches SNOTEL site data\n- `GET /api/data/:stationId` - Fetches latest data for a specific station\n\n## Usage\n\nThe application automatically loads and displays SNOTEL data in a table format showing:\n- Station information (name, location, elevation)\n- Latest snow depth measurements\n- Temperature data\n- Precipitation data","children",[],[173],"c9879240-47cf-11f0-bb69-76b3cceeab13","types.ts","c9879308-47cf-11f0-bb69-76b3cceeab13","a9959294-c98a-4ec3-87a4-b9edb70b06b5",2,["D",1749761821332],"script","// Shared types for SNOTEL data\n\nexport interface SnotelSite {\n stationId: string;\n name: string;\n state: string;\n latitude: number;\n longitude: number;\n elevation: number;\n county?: string;\n huc?: string;\n}\n\nexport interface SnotelData {\n stationId: string;\n name: string;\n date: string;\n snowDepth?: number;\n snowWaterEquivalent?: number;\n temperature?: number;\n precipitation?: number;\n windSpeed?: number;\n windDirection?: number;\n}\n\nexport interface ApiResponse {\n success: boolean;\n data?: T;\n error?: string;\n}",[],[190,181],"shared","c9879bd2-47cf-11f0-bb69-76b3cceeab13",["D",1749761821332],[170],[190],["D",1749761876621],[],[18,64],["D",1749761876621],[168],[18],"433e1b72-47d0-11f0-9bc0-76b3cceeab13","index.ts","0e802053-2348-490e-9328-85fc195abd99",["D",1749762025521],7,"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport type { SnotelSite, SnotelData, ApiResponse } from \"../shared/types.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main page\napp.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// API endpoint to get SNOTEL sites\napp.get(\"/api/sites\", async c => {\n try {\n // Use specific Colorado SNOTEL station IDs\n const coStationIds = [\n \"335:CO:SNTL\", \"415:CO:SNTL\", \"505:CO:SNTL\", \"551:CO:SNTL\", \"713:CO:SNTL\",\n \"380:CO:SNTL\", \"465:CO:SNTL\", \"531:CO:SNTL\", \"586:CO:SNTL\", \"739:CO:SNTL\",\n \"322:CO:SNTL\", \"408:CO:SNTL\", \"485:CO:SNTL\", \"569:CO:SNTL\", \"797:CO:SNTL\"\n ];\n \n const response = await fetch(\n `https://wcc.sc.egov.usda.gov/awdbRestApi/services/v1/stations?stationIds=${coStationIds.join(',')}`\n );\n \n if (!response.ok) {\n throw new Error(`API request failed: ${response.status}`);\n }\n \n const data = await response.json();\n \n // Transform the data to our format\n const sites: SnotelSite[] = data.map((station: any) => ({\n stationId: station.stationId,\n name: station.name,\n state: station.state,\n latitude: station.latitude,\n longitude: station.longitude,\n elevation: station.elevation,\n county: station.countyName,\n huc: station.huc\n }));\n \n const apiResponse: ApiResponse = {\n success: true,\n data: sites\n };\n \n return c.json(apiResponse);\n } catch (error) {\n console.error(\"Error fetching sites:\", error);\n const apiResponse: ApiResponse = {\n success: false,\n error: error instanceof Error ? error.message : \"Unknown error\"\n };\n return c.json(apiResponse, 500);\n }\n});\n\n// API endpoint to get latest data for stations\napp.get(\"/api/data\", async c => {\n try {\n // Get current date and 30 days ago for recent data\n const endDate = new Date();\n const startDate = new Date();\n startDate.setDate(startDate.getDate() - 30);\n \n const formatDate = (date: Date) => date.toISOString().split('T')[0];\n \n // Use specific Colorado SNOTEL station IDs\n const coStationIds = [\n \"335:CO:SNTL\", \"415:CO:SNTL\", \"505:CO:SNTL\", \"551:CO:SNTL\", \"713:CO:SNTL\",\n \"380:CO:SNTL\", \"465:CO:SNTL\", \"531:CO:SNTL\", \"586:CO:SNTL\", \"739:CO:SNTL\",\n \"322:CO:SNTL\", \"408:CO:SNTL\", \"485:CO:SNTL\", \"569:CO:SNTL\", \"797:CO:SNTL\"\n ];\n \n // Fetch recent data for these stations\n const dataResponse = await fetch(\n `https://wcc.sc.egov.usda.gov/awdbRestApi/services/v1/data?stationIds=${coStationIds.join(',')}&elementCds=SNWD,WTEQ,TOBS&ordinal=1&duration=DAILY&getFlags=false&alwaysReturnDailyFeb29=false&format=json&beginDate=${formatDate(startDate)}&endDate=${formatDate(endDate)}`\n );\n \n if (!dataResponse.ok) {\n throw new Error(`Data API request failed: ${dataResponse.status}`);\n }\n \n const data = await dataResponse.json();\n \n // Process and group data by station, getting the most recent values\n const stationData: { [key: string]: SnotelData } = {};\n \n data.forEach((record: any) => {\n const stationId = record.stationId;\n \n if (!stationData[stationId]) {\n stationData[stationId] = {\n stationId: stationId,\n name: record.stationName,\n date: record.date,\n snowDepth: undefined,\n snowWaterEquivalent: undefined,\n temperature: undefined,\n precipitation: undefined\n };\n }\n \n // Update with latest date data\n if (record.date >= stationData[stationId].date) {\n stationData[stationId].date = record.date;\n \n // Map element codes to our data structure\n switch (record.elementCd) {\n case 'SNWD':\n stationData[stationId].snowDepth = record.value;\n break;\n case 'WTEQ':\n stationData[stationId].snowWaterEquivalent = record.value;\n break;\n case 'TOBS':\n stationData[stationId].temperature = record.value;\n break;\n case 'PREC':\n stationData[stationId].precipitation = record.value;\n break;\n }\n }\n });\n \n const apiResponse: ApiResponse = {\n success: true,\n data: Object.values(stationData)\n };\n \n return c.json(apiResponse);\n } catch (error) {\n console.error(\"Error fetching data:\", error);\n const apiResponse: ApiResponse = {\n success: false,\n error: error instanceof Error ? error.message : \"Unknown error\"\n };\n return c.json(apiResponse, 500);\n }\n});\n\nexport default app.fetch;",[],[210,202],"backend","d86c8220-47cf-11f0-b27b-76b3cceeab13",3,["D",1749761846319],[166],[210],["D",1749761730628],{"_11":12,"_120":69},{"_11":12,"_116":-5,"_68":69,"_31":67,"_117":118,"_119":30},{"_39":107,"_13":16,"_33":36,"_108":73,"_109":-5,"_110":-5,"_111":-5,"_112":-5,"_113":-5,"_114":14,"_115":12},"ctx",{"_52":-5,"_139":253,"_254":255,"_256":257,"_258":30,"_259":30,"_260":30,"_261":24,"_262":-5,"_263":-7,"_264":-7,"_265":26,"_266":30,"_267":30,"_268":-5,"_269":30,"_270":30,"_271":30,"_272":-5},"ENV",{"_224":225,"_226":227,"_228":16,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · frontend