From d9bdb17217a018aa1ed5c25c5459ac663f5393b0 Mon Sep 17 00:00:00 2001 From: vkuchenik Date: Mon, 10 Aug 2026 16:22:34 -0700 Subject: [PATCH] add filtering on dates to all widgets, defualt is past 7 days --- .../components/Widgets/ExplosionEvents.jsx | 19 +- client/src/components/Widgets/IvansAlerts.jsx | 162 +++++++-------- client/src/components/Widgets/PlumeEvents.jsx | 18 +- .../src/components/Widgets/RemoteSensing.jsx | 184 ++++++++++-------- .../settings/ExplosionEventsSettings.jsx | 88 +++++++-- .../Widgets/settings/IvansAlertsSettings.jsx | 68 ++++++- .../Widgets/settings/PlumeEventsSettings.jsx | 66 +++++++ .../settings/RemoteSensingSettings.jsx | 68 ++++++- .../settings/SeismicEventsSettings.jsx | 10 +- client/src/constants/widgetRegistry.jsx | 1 + 10 files changed, 495 insertions(+), 189 deletions(-) create mode 100644 client/src/components/Widgets/settings/PlumeEventsSettings.jsx diff --git a/client/src/components/Widgets/ExplosionEvents.jsx b/client/src/components/Widgets/ExplosionEvents.jsx index 8aad3b7..17e6b68 100644 --- a/client/src/components/Widgets/ExplosionEvents.jsx +++ b/client/src/components/Widgets/ExplosionEvents.jsx @@ -12,8 +12,25 @@ export default function ExplosionEvents({ settings, widgetID }) { const { colorMode } = useColorMode(); const isDark = colorMode === 'dark'; + // Generate url with input dates are default to 7 day range + const url = useMemo(() =>{ + if (settings?.startDate && settings?.endDate) + return '/api/v2/explosion_events?start_date=' + settings?.startDate + '&end_date=' + settings?.endDate; + else { + const base_url = '/api/v2/explosion_events'; + let today = new Date(); + let sevenDaysAgo = new Date(today); + sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7); + + sevenDaysAgo = sevenDaysAgo.toLocaleDateString('en-CA'); + today = today.toLocaleDateString('en-CA'); + + return base_url + '?start_date=' + sevenDaysAgo + '&end_date=' + today; + } + }, [settings?.startDate, settings?.endDate]); + // Clean, single-line data fetching - const { data: apiData, isLoading, error } = VdapApi('/api/v2/explosion_events?start_date=2025-05-01&end_date=2025-05-30'); + const { data: apiData, isLoading, error } = VdapApi(url); // 1. Build the Traces (Data parsing) const plotTraces = useMemo(() => { diff --git a/client/src/components/Widgets/IvansAlerts.jsx b/client/src/components/Widgets/IvansAlerts.jsx index cf7e67c..526152e 100644 --- a/client/src/components/Widgets/IvansAlerts.jsx +++ b/client/src/components/Widgets/IvansAlerts.jsx @@ -10,84 +10,89 @@ export default function IvansAlerts({ settings, widgetID }) { const sorts = settings?.activeSorts; // build url once on mount - const seven_day_url = useMemo(() => { - const base_url = '/api/v2/comm_coor_ivans'; - let today = new Date(); - let sevenDaysAgo = new Date(today); - sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7); + const url = useMemo(() =>{ + if (settings?.startDate && settings?.endDate) + return '/api/v2/comm_coor_ivans?start_date=' + settings?.startDate + '&end_date=' + settings?.endDate; + else { + const base_url = '/api/v2/comm_coor_ivans'; + let today = new Date(); + let sevenDaysAgo = new Date(today); + sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7); - sevenDaysAgo = sevenDaysAgo.toLocaleDateString('en-CA'); - today = today.toLocaleDateString('en-CA'); + sevenDaysAgo = sevenDaysAgo.toLocaleDateString('en-CA'); + today = today.toLocaleDateString('en-CA'); - return base_url + '?start_date=' + sevenDaysAgo + '&end_date=' + today; - }, []); + return base_url + '?start_date=' + sevenDaysAgo + '&end_date=' + today; + } + }, [settings?.startDate, settings?.endDate]); // VdapApi hook only calls api if the url changes and apiData remains stable since vdapApi uses state to track the data - const {data: apiD, isLoading, error} = VdapApi(seven_day_url); + const {data: apiData, isLoading, error} = VdapApi(url); - const apiData = useMemo(() => { - return ([ - { - id: 277, - volcano_number: 268010, - report_num: "2026-01", - report_date: "2026-05-08T22:05:44Z", - preparer: "hwright", - reviewer: "dramsey", - send_time: "2026-05-08T22:05:52Z", - volcano_name: "Dukono", - summary: "At 07:41 local time on 8 May 2026, an explosion of persistently active Dukono volcano occurred, producing an ash plume that rose over 15 km (52,000 feet) above sea level and ejecting ballistic blocks of lava beyond the crater rim. The eruption killed three tourists who were hiking within the official exclusion zone; other hikers were rescued and returned to safety.", - files: [ - { - name: "277-268010-Dukono-2026-01.pdf", - url: "https://vdap.org/ivans/sitrep/277-268010-Dukono-2026-01.pdf", - type: "pdf" - } - ] - }, - { - id: 279, - volcano_number: 250030, - report_num: "2026-01", - report_date: "2026-05-15T05:11:53Z", - preparer: "charpel", - reviewer: "jlwnstrn", - send_time: "2026-05-15T05:12:01Z", - volcano_name: "Central Bismarck Sea", - summary: "A M5.4 earthquake occurred on 14 May 2026 at 17:13 (UTC) during the ongoing eruption of the submarine Central Bismarck Sea volcano that began 8 May 2026. The volcano's current activity does not threaten any populated areas, but today’s earthquake indicates that eruptive activity will continue or increase.", - files: [ - { - name: "279-250030-Central Bismarck Sea-2026-01.pdf", - url: "https://vdap.org/ivans/sitrep/279-250030-Central Bismarck Sea-2026-01.pdf", - type: "pdf" - } - ] - }, - { - id: 275, - volcano_number: 273030, - report_num: "2026-02", - report_date: "2026-05-03T05:28:12Z", - preparer: "dramsey", - reviewer: "hwright", - send_time: "2026-05-03T05:28:20Z", - volcano_name: "Mayon", - summary: "At around 5:30 PM local time on May 2, 2026, a pyroclastic flow (cloud of searing ash and rock particles) from erupting Mayon Volcano traveled around 4 km (~2.5 miles) down the southwestern slope of the volcano and produced an ash plume that drifted to the west-southwest. At least 52 villages in various towns in Albay province were heavily affected by thick ash fall, reducing visibility to near zero and making travel extremely difficult. There were no reports of casualties and the volcano alert level remained at Level 3 (on a 0-5 level scale).", - files: [ - { - name: "275-273030-Mayon-2026-02.pdf", - url: "https://vdap.org/ivans/sitrep/275-273030-Mayon-2026-02.pdf", - type: "pdf" - }, - { - name: "275-273030-Mayon-2026-02.pdf", - url: "https://vdap.org/ivans/sitrep/275-273030-Mayon-2026-02.pdf", - type: "pdf" - } - ] - } - ]) - }, []); + // TEST DATA + // const apiData = useMemo(() => { + // return ([ + // { + // id: 277, + // volcano_number: 268010, + // report_num: "2026-01", + // report_date: "2026-05-08T22:05:44Z", + // preparer: "hwright", + // reviewer: "dramsey", + // send_time: "2026-05-08T22:05:52Z", + // volcano_name: "Dukono", + // summary: "At 07:41 local time on 8 May 2026, an explosion of persistently active Dukono volcano occurred, producing an ash plume that rose over 15 km (52,000 feet) above sea level and ejecting ballistic blocks of lava beyond the crater rim. The eruption killed three tourists who were hiking within the official exclusion zone; other hikers were rescued and returned to safety.", + // files: [ + // { + // name: "277-268010-Dukono-2026-01.pdf", + // url: "https://vdap.org/ivans/sitrep/277-268010-Dukono-2026-01.pdf", + // type: "pdf" + // } + // ] + // }, + // { + // id: 279, + // volcano_number: 250030, + // report_num: "2026-01", + // report_date: "2026-05-15T05:11:53Z", + // preparer: "charpel", + // reviewer: "jlwnstrn", + // send_time: "2026-05-15T05:12:01Z", + // volcano_name: "Central Bismarck Sea", + // summary: "A M5.4 earthquake occurred on 14 May 2026 at 17:13 (UTC) during the ongoing eruption of the submarine Central Bismarck Sea volcano that began 8 May 2026. The volcano's current activity does not threaten any populated areas, but today’s earthquake indicates that eruptive activity will continue or increase.", + // files: [ + // { + // name: "279-250030-Central Bismarck Sea-2026-01.pdf", + // url: "https://vdap.org/ivans/sitrep/279-250030-Central Bismarck Sea-2026-01.pdf", + // type: "pdf" + // } + // ] + // }, + // { + // id: 275, + // volcano_number: 273030, + // report_num: "2026-02", + // report_date: "2026-05-03T05:28:12Z", + // preparer: "dramsey", + // reviewer: "hwright", + // send_time: "2026-05-03T05:28:20Z", + // volcano_name: "Mayon", + // summary: "At around 5:30 PM local time on May 2, 2026, a pyroclastic flow (cloud of searing ash and rock particles) from erupting Mayon Volcano traveled around 4 km (~2.5 miles) down the southwestern slope of the volcano and produced an ash plume that drifted to the west-southwest. At least 52 villages in various towns in Albay province were heavily affected by thick ash fall, reducing visibility to near zero and making travel extremely difficult. There were no reports of casualties and the volcano alert level remained at Level 3 (on a 0-5 level scale).", + // files: [ + // { + // name: "275-273030-Mayon-2026-02.pdf", + // url: "https://vdap.org/ivans/sitrep/275-273030-Mayon-2026-02.pdf", + // type: "pdf" + // }, + // { + // name: "275-273030-Mayon-2026-02.pdf", + // url: "https://vdap.org/ivans/sitrep/275-273030-Mayon-2026-02.pdf", + // type: "pdf" + // } + // ] + // } + // ]) + // }, []); const data = useMemo(() => { if (apiData?.length === 0) return []; @@ -176,11 +181,17 @@ export default function IvansAlerts({ settings, widgetID }) { {/* This box needs to be at h="100%" for the pdf toolbar to appear */} - {item?.summary} -
+ + {item?.summary} + Preparer: {item?.preparer} + {item?.files?.map((file, index) => { return ( +
+ + {file?.name} + -
)})} diff --git a/client/src/components/Widgets/PlumeEvents.jsx b/client/src/components/Widgets/PlumeEvents.jsx index 8470814..e61def1 100644 --- a/client/src/components/Widgets/PlumeEvents.jsx +++ b/client/src/components/Widgets/PlumeEvents.jsx @@ -4,7 +4,23 @@ import Plot from 'react-plotly.js'; import {Box, Flex, Spinner, Text} from "@chakra-ui/react"; export default function PlumeEvents({ settings, widgetID}) { - const { data: apiData, isLoading, error } = VdapApi('/api/v2/plume_events?start_date=2026-01-01&end_date=2026-03-01'); + const url = useMemo(() =>{ + if (settings?.startDate && settings?.endDate) + return '/api/v2/plume_events?start_date=' + settings?.startDate + '&end_date=' + settings?.endDate; + else { + const base_url = '/api/v2/plume_events'; + let today = new Date(); + let sevenDaysAgo = new Date(today); + sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7); + + sevenDaysAgo = sevenDaysAgo.toLocaleDateString('en-CA'); + today = today.toLocaleDateString('en-CA'); + + return base_url + '?start_date=' + sevenDaysAgo + '&end_date=' + today; + } + }, [settings?.startDate, settings?.endDate]); + + const { data: apiData, isLoading, error } = VdapApi(url); const plotTraces = useMemo(() => { if (!apiData || apiData.length === 0) return []; diff --git a/client/src/components/Widgets/RemoteSensing.jsx b/client/src/components/Widgets/RemoteSensing.jsx index 60cf297..020138f 100644 --- a/client/src/components/Widgets/RemoteSensing.jsx +++ b/client/src/components/Widgets/RemoteSensing.jsx @@ -10,94 +10,99 @@ export default function RemoteSensing({ settings, widgetID }) { const sorts = settings?.activeSorts; // build url once on mount - const seven_day_url = useMemo(() => { - const base_url = '/api/v2/remote_sensing'; - let today = new Date(); - let sevenDaysAgo = new Date(today); - sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7); + const url = useMemo(() =>{ + if (settings?.startDate && settings?.endDate) + return '/api/v2/remote_sensing?start_date=' + settings?.startDate + '&end_date=' + settings?.endDate; + else { + const base_url = '/api/v2/remote_sensing'; + let today = new Date(); + let sevenDaysAgo = new Date(today); + sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7); - sevenDaysAgo = sevenDaysAgo.toLocaleDateString('en-CA'); - today = today.toLocaleDateString('en-CA'); + sevenDaysAgo = sevenDaysAgo.toLocaleDateString('en-CA'); + today = today.toLocaleDateString('en-CA'); - return base_url + '?start_date=' + sevenDaysAgo + '&end_date=' + today; - }, []); + return base_url + '?start_date=' + sevenDaysAgo + '&end_date=' + today; + } + }, [settings?.startDate, settings?.endDate]); // VdapApi hook only calls api if the url changes and apiData remains stable since vdapApi uses state to track the data - const {data: apiD, isLoading, error} = VdapApi(seven_day_url); + const {data: apiData, isLoading, error} = VdapApi(url); - const apiData = useMemo(() => { - return ([ - { - id: 1848, - volcano_name: "Lewotolok", - country: "Indonesia", - report_time: "2026-01-13T20:39:39Z", - summary: "Dear friends,\n\nOur latest satellite view from 13 January (~0900 local time) shows that the lava has began to flow over the crater rim onto the northwest flank (see attached). The lava flow spreads into three lobes from the single source vent on the northwest flank of the active cone. The longest portion of the flow was about 530 meters from the vent with the toe draping about 30-40 meters over the rim of the main crater just north of the May 2024 lava flow. A narrow deposit of volcanoclastic debris extends about 300 meters below the toe of the lava flow (white dashed outline on sketch).\n\nPlease let us know if you have any questions.\nBest wishes,\nRick", - sender: "rwessels@usgs.gov", - files: [ - { - name: "Lewotolok-ID-sketch-20260113_Jan_lavas.jpg", - url: "https://vdap.org/commcoordashboard/rs/attachments/1848-Lewotolok-ID-sketch-20260113_Jan_lavas.jpg", - type: "image" - }, - { - name: "Lewotolok-ID-sketch-20260113_Jan_lavas.jpg", - url: "https://vdap.org/commcoordashboard/rs/attachments/1848-Lewotolok-ID-sketch-20260113_Jan_lavas.jpg", - type: "image" - } - ] - }, - { - id: 1847, - volcano_name: "Mayon", - country: "Philippines", - report_time: "2026-01-13T17:56:46Z", - summary: "Dear PHIVOLCS friends,\nOur most recent satellite data from 13 January (1500 local) show the new lava flow extending southeast from the summit and splitting into two lobes (see attached pdf). The total length of the longest lobe was about 1 kilometer. Compared to data from 12 January, the longest part of the flow advanced almost 200 meters over 11 hours while the shorter section advanced about 80 meters over the same time. Debris falling from the front of both lava flow lobes extend another several hundred meters below each lobe. We continue to watch the activity at Mayon volcano and will share anything that might help. \n\nPlease let us know if you have any questions, requests, or comments.\n\nBest wishes,\nRick", - sender: "rwessels@usgs.gov", - files: [ - { - name: "Mayon-RP-images-20260113_ICEYE_lava.pdf", - url: "https://vdap.org/commcoordashboard/rs/attachments/1847-Mayon-RP-images-20260113_ICEYE_lava.pdf", - type: "pdf" - } - ] - }, - { - id: 1889, - volcano_name: "Bagana", - country: "Papua New Guinea", - report_time: "2026-06-24T21:28:58Z", - summary: "Hi Steve and RVO,\nI'm now back in the office after some time away and have looked closely at the recent data for Bagana Volcano. \nSatellite data from 15 June show that an increase in lava effusion caused the upper part of the active lava flow at the summit to inflate and likely contributed to the 19-20 June collapse. By 16 June, the inflated area was about 260-meters-long by 140-meters-wide. The northeast edge of the inflated section of the lava flow was the source of rockfalls down the northeast flank where some of the larger blocks tumbled over 1.3 kilometer from the flow. The 22 June data that Julie mentioned shows that all of the inflated area was removed by the collapse (~36,000 square meter area of the upper flow removed). The collapse PDC deposits scoured a deep gorge and removed a broad area of vegetation near the lake. The distal portion of the collapse deposits formed a small delta extending into the lake and possibly raising the lake level slightly based on overall shore outline changes.\n\nI've attached a sketch map showing the features described above. Please let us know if you have any questions.\n\nBest wishes,\nRick", - sender: "rwessels@usgs.gov", - files: [ - { - name: "Bagana-PG-sketch-20260622_collapse+lava.jpg", - url: "https://vdap.org/commcoordashboard/rs/attachments/1889-Bagana-PG-sketch-20260622_collapse+lava.jpg", - type: "image" - }, - { - name: "Bagana-PG-sketch-20260622_3Dcollapse+lava.jpg", - url: "https://vdap.org/commcoordashboard/rs/attachments/1889-Bagana-PG-sketch-20260622_3Dcollapse+lava.jpg", - type: "image" - }, - { - name: "Bagana_22_Jun_2026_collapse2.kml", - url: "https://vdap.org/commcoordashboard/rs/attachments/1889-Bagana_22_Jun_2026_collapse2.kml", - type: "download" - } - ] - }, - { - id: 1845, - volcano_name: "Lewotolok", - country: "Indonesia", - report_time: "2026-01-07T21:42:17Z", - summary: "Dear friends,\nThe increased activity at Lewotolok Volcano over the past week reminded me that we have not sent you a Remote Sensing Summary since June 2025. Over the two days from 3 to 5 January 2026, explosions from the central cone intensified, doubling the area impacted by proximal ballistics and tephra to over 20 hectares, while increased effusion has produced a new ~20,000 m² lava flow on the west–northwest flank that extends ~270 meters from the vent. So far, all recent lava flows have been confined to the summit crater.\n\nPlease let us know if you have any questions or additions.\n\nBest Wishes,\nRick", - sender: "rwessels@usgs.gov", - files: [] - }, - ]) - }, []); + // TEST DATA + // const apiData = useMemo(() => { + // return ([ + // { + // id: 1848, + // volcano_name: "Lewotolok", + // country: "Indonesia", + // report_time: "2026-01-13T20:39:39Z", + // summary: "Dear friends,\n\nOur latest satellite view from 13 January (~0900 local time) shows that the lava has began to flow over the crater rim onto the northwest flank (see attached). The lava flow spreads into three lobes from the single source vent on the northwest flank of the active cone. The longest portion of the flow was about 530 meters from the vent with the toe draping about 30-40 meters over the rim of the main crater just north of the May 2024 lava flow. A narrow deposit of volcanoclastic debris extends about 300 meters below the toe of the lava flow (white dashed outline on sketch).\n\nPlease let us know if you have any questions.\nBest wishes,\nRick", + // sender: "rwessels@usgs.gov", + // files: [ + // { + // name: "Lewotolok-ID-sketch-20260113_Jan_lavas.jpg", + // url: "https://vdap.org/commcoordashboard/rs/attachments/1848-Lewotolok-ID-sketch-20260113_Jan_lavas.jpg", + // type: "image" + // }, + // { + // name: "Lewotolok-ID-sketch-20260113_Jan_lavas.jpg", + // url: "https://vdap.org/commcoordashboard/rs/attachments/1848-Lewotolok-ID-sketch-20260113_Jan_lavas.jpg", + // type: "image" + // } + // ] + // }, + // { + // id: 1847, + // volcano_name: "Mayon", + // country: "Philippines", + // report_time: "2026-01-13T17:56:46Z", + // summary: "Dear PHIVOLCS friends,\nOur most recent satellite data from 13 January (1500 local) show the new lava flow extending southeast from the summit and splitting into two lobes (see attached pdf). The total length of the longest lobe was about 1 kilometer. Compared to data from 12 January, the longest part of the flow advanced almost 200 meters over 11 hours while the shorter section advanced about 80 meters over the same time. Debris falling from the front of both lava flow lobes extend another several hundred meters below each lobe. We continue to watch the activity at Mayon volcano and will share anything that might help. \n\nPlease let us know if you have any questions, requests, or comments.\n\nBest wishes,\nRick", + // sender: "rwessels@usgs.gov", + // files: [ + // { + // name: "Mayon-RP-images-20260113_ICEYE_lava.pdf", + // url: "https://vdap.org/commcoordashboard/rs/attachments/1847-Mayon-RP-images-20260113_ICEYE_lava.pdf", + // type: "pdf" + // } + // ] + // }, + // { + // id: 1889, + // volcano_name: "Bagana", + // country: "Papua New Guinea", + // report_time: "2026-06-24T21:28:58Z", + // summary: "Hi Steve and RVO,\nI'm now back in the office after some time away and have looked closely at the recent data for Bagana Volcano. \nSatellite data from 15 June show that an increase in lava effusion caused the upper part of the active lava flow at the summit to inflate and likely contributed to the 19-20 June collapse. By 16 June, the inflated area was about 260-meters-long by 140-meters-wide. The northeast edge of the inflated section of the lava flow was the source of rockfalls down the northeast flank where some of the larger blocks tumbled over 1.3 kilometer from the flow. The 22 June data that Julie mentioned shows that all of the inflated area was removed by the collapse (~36,000 square meter area of the upper flow removed). The collapse PDC deposits scoured a deep gorge and removed a broad area of vegetation near the lake. The distal portion of the collapse deposits formed a small delta extending into the lake and possibly raising the lake level slightly based on overall shore outline changes.\n\nI've attached a sketch map showing the features described above. Please let us know if you have any questions.\n\nBest wishes,\nRick", + // sender: "rwessels@usgs.gov", + // files: [ + // { + // name: "Bagana-PG-sketch-20260622_collapse+lava.jpg", + // url: "https://vdap.org/commcoordashboard/rs/attachments/1889-Bagana-PG-sketch-20260622_collapse+lava.jpg", + // type: "image" + // }, + // { + // name: "Bagana-PG-sketch-20260622_3Dcollapse+lava.jpg", + // url: "https://vdap.org/commcoordashboard/rs/attachments/1889-Bagana-PG-sketch-20260622_3Dcollapse+lava.jpg", + // type: "image" + // }, + // { + // name: "Bagana_22_Jun_2026_collapse2.kml", + // url: "https://vdap.org/commcoordashboard/rs/attachments/1889-Bagana_22_Jun_2026_collapse2.kml", + // type: "download" + // } + // ] + // }, + // { + // id: 1845, + // volcano_name: "Lewotolok", + // country: "Indonesia", + // report_time: "2026-01-07T21:42:17Z", + // summary: "Dear friends,\nThe increased activity at Lewotolok Volcano over the past week reminded me that we have not sent you a Remote Sensing Summary since June 2025. Over the two days from 3 to 5 January 2026, explosions from the central cone intensified, doubling the area impacted by proximal ballistics and tephra to over 20 hectares, while increased effusion has produced a new ~20,000 m² lava flow on the west–northwest flank that extends ~270 meters from the vent. So far, all recent lava flows have been confined to the summit crater.\n\nPlease let us know if you have any questions or additions.\n\nBest Wishes,\nRick", + // sender: "rwessels@usgs.gov", + // files: [] + // }, + // ]) + // }, []); const data = useMemo(() => { if (apiData?.length === 0) return []; @@ -185,12 +190,17 @@ export default function RemoteSensing({ settings, widgetID }) { {/* This box needs to be at h="100%" for the pdf toolbar to appear */} - - {item?.summary} -
+ + + {item?.summary} + Source: {item?.sender} + {item?.files?.map((file, index) => { + + // PDF FILE TYPE if (file?.type === "pdf") return ( +
{file?.name} PDF @@ -213,6 +223,7 @@ export default function RemoteSensing({ settings, widgetID }) { ); + // IMAGE FILE TYPE else if (file?.type === "image") return ( @@ -226,6 +237,7 @@ export default function RemoteSensing({ settings, widgetID }) { ); + // DOWNLOADABLE LINK else if (file?.type === "download") return ( {file?.name} diff --git a/client/src/components/Widgets/settings/ExplosionEventsSettings.jsx b/client/src/components/Widgets/settings/ExplosionEventsSettings.jsx index 401cb68..20a509a 100644 --- a/client/src/components/Widgets/settings/ExplosionEventsSettings.jsx +++ b/client/src/components/Widgets/settings/ExplosionEventsSettings.jsx @@ -1,8 +1,11 @@ -import { Box, Text, Switch } from "@chakra-ui/react"; +import {Box, Text, Switch, Flex, Field, Input} from "@chakra-ui/react"; import { useDashboardStore } from "@/store/useDashboardStore.jsx"; +import {useState} from "react"; export default function ExplosionEventsSettings({ widgetId, currentSettings }) { const updateSettings = useDashboardStore(state => state.updateWidgetSettings); + const [startError, setStartError] = useState(null); + const [endError, setEndError] = useState(null); // 1. Convert the saved string into a boolean for the toggle UI const isSymlog = currentSettings?.yAxisScale === 'log'; @@ -18,20 +21,75 @@ export default function ExplosionEventsSettings({ widgetId, currentSettings }) { }; return ( - - Y-Axis Settings + + {/* Y-AXIS SETTING*/} + Y-Axis Settings - - - - - - Use Log Scale - - + + + + + + Use Log Scale + + + {/* DATE RANGE SELECTION */} + + + + Start Date + + + { + const value = e.target.value; + updateSettings(widgetId, {...currentSettings, startDate: value}); + + const dateSelected = new Date(value); + const today = new Date(); + today.setHours(0, 0, 0, 0); + + if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date"); + else setStartError(""); + }} + /> + {startError && {startError}} + + + + + + + End Date + + + { + const value = e.target.value; + updateSettings(widgetId, {...currentSettings, endDate: value}); + + const dateSelected = new Date(value); + const today = new Date(); + today.setHours(0, 0, 0, 0); + + if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date"); + else setEndError(""); + }} + /> + {endError && {endError}} + + + + ); } \ No newline at end of file diff --git a/client/src/components/Widgets/settings/IvansAlertsSettings.jsx b/client/src/components/Widgets/settings/IvansAlertsSettings.jsx index 59a8d6e..a4915f7 100644 --- a/client/src/components/Widgets/settings/IvansAlertsSettings.jsx +++ b/client/src/components/Widgets/settings/IvansAlertsSettings.jsx @@ -1,8 +1,11 @@ -import {Button, Flex, Switch, Text} from "@chakra-ui/react"; +import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react"; import {useDashboardStore} from "../../../store/useDashboardStore.jsx"; +import {useState} from "react"; export default function IvansAlertsSettings({ widgetId, currentSettings }) { const updateSettings = useDashboardStore(state => state.updateWidgetSettings); + const [startError, setStartError] = useState(null); + const [endError, setEndError] = useState(null); const handleCopyToClipboard = () => { updateSettings(widgetId, {copyToClipboard: true}); @@ -17,8 +20,11 @@ export default function IvansAlertsSettings({ widgetId, currentSettings }) { } return ( - - + + {/* COPY TO CLIPBOARD */} + + + {/* SORTS */} Sort by Volcano + + {/* SELECTING DATE RANGE */} + + + + + Start Date + + + { + const value = e.target.value; + updateSettings(widgetId, {...currentSettings, startDate: value}); + + const dateSelected = new Date(value); + const today = new Date(); + today.setHours(0, 0, 0, 0); + + if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date"); + else setStartError(""); + }} + /> + {startError && {startError}} + + + + + + + End Date + + + { + const value = e.target.value; + updateSettings(widgetId, {...currentSettings, endDate: value}); + + const dateSelected = new Date(value); + const today = new Date(); + today.setHours(0, 0, 0, 0); + + if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date"); + else setEndError(""); + }} + /> + {endError && {endError}} + + + + ) } \ No newline at end of file diff --git a/client/src/components/Widgets/settings/PlumeEventsSettings.jsx b/client/src/components/Widgets/settings/PlumeEventsSettings.jsx new file mode 100644 index 0000000..0c2bca2 --- /dev/null +++ b/client/src/components/Widgets/settings/PlumeEventsSettings.jsx @@ -0,0 +1,66 @@ +import {Input, Field, Text, Flex} from "@chakra-ui/react"; +import {useDashboardStore} from "@/store/useDashboardStore.jsx"; +import { useState } from "react"; + +export default function PlumeEventsSettings({ widgetId, currentSettings }) { + const updateSettings = useDashboardStore(state => state.updateWidgetSettings); + const [startError, setStartError] = useState(null); + const [endError, setEndError] = useState(null); + + return ( + + + + + Start Date + + + { + const value = e.target.value; + updateSettings(widgetId, {...currentSettings, startDate: value}); + + const dateSelected = new Date(value); + const today = new Date(); + today.setHours(0, 0, 0, 0); + + if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date"); + else setStartError(""); + }} + /> + {startError && {startError}} + + + + + + + End Date + + + { + const value = e.target.value; + updateSettings(widgetId, {...currentSettings, endDate: value}); + + const dateSelected = new Date(value); + const today = new Date(); + today.setHours(0, 0, 0, 0); + + if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date"); + else setEndError(""); + }} + /> + {endError && {endError}} + + + + + ) +} \ No newline at end of file diff --git a/client/src/components/Widgets/settings/RemoteSensingSettings.jsx b/client/src/components/Widgets/settings/RemoteSensingSettings.jsx index d7541bd..15ebb7e 100644 --- a/client/src/components/Widgets/settings/RemoteSensingSettings.jsx +++ b/client/src/components/Widgets/settings/RemoteSensingSettings.jsx @@ -1,8 +1,11 @@ -import {Button, Flex, Switch} from "@chakra-ui/react"; +import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react"; import {useDashboardStore} from "@/store/useDashboardStore.jsx"; +import {useState} from "react"; export default function RemoteSensingSettings({ widgetId, currentSettings }) { const updateSettings = useDashboardStore(state => state.updateWidgetSettings); + const [startError, setStartError] = useState(null); + const [endError, setEndError] = useState(null); const handleCopyToClipboard = () => { updateSettings(widgetId, {copyToClipboard: true}); @@ -17,8 +20,11 @@ export default function RemoteSensingSettings({ widgetId, currentSettings }) { } return ( - - + + {/* COPYING TO CLIPBOARD */} + + + {/* SORTING */} Sort by Volcano + + {/* SELECTING DATE RANGE */} + + + + + Start Date + + + { + const value = e.target.value; + updateSettings(widgetId, {...currentSettings, startDate: value}); + + const dateSelected = new Date(value); + const today = new Date(); + today.setHours(0, 0, 0, 0); + + if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date"); + else setStartError(""); + }} + /> + {startError && {startError}} + + + + + + + End Date + + + { + const value = e.target.value; + updateSettings(widgetId, {...currentSettings, endDate: value}); + + const dateSelected = new Date(value); + const today = new Date(); + today.setHours(0, 0, 0, 0); + + if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date"); + else setEndError(""); + }} + /> + {endError && {endError}} + + + + ) } \ No newline at end of file diff --git a/client/src/components/Widgets/settings/SeismicEventsSettings.jsx b/client/src/components/Widgets/settings/SeismicEventsSettings.jsx index 03bc0ba..aa53d9e 100644 --- a/client/src/components/Widgets/settings/SeismicEventsSettings.jsx +++ b/client/src/components/Widgets/settings/SeismicEventsSettings.jsx @@ -8,8 +8,8 @@ export default function SeismicEventsSettings({ widgetId, currentSettings }) { const updateSettings = useDashboardStore(state => state.updateWidgetSettings); return ( - - + + Start Date @@ -34,6 +34,8 @@ export default function SeismicEventsSettings({ widgetId, currentSettings }) { {startError && {startError}} + + End Date @@ -58,7 +60,7 @@ export default function SeismicEventsSettings({ widgetId, currentSettings }) { {endError && {endError}} - - + + ) } \ No newline at end of file diff --git a/client/src/constants/widgetRegistry.jsx b/client/src/constants/widgetRegistry.jsx index f487268..039763d 100644 --- a/client/src/constants/widgetRegistry.jsx +++ b/client/src/constants/widgetRegistry.jsx @@ -111,6 +111,7 @@ export const WIDGET_REGISTRY = { category: "Daily Volcanic Activity", description: "Plot of explosion heights over a weeks time.", component: lazy(() => import('../components/Widgets/PlumeEvents.jsx')), + settingsComponent: lazy(() => import('../components/Widgets/settings/PlumeEventsSettings.jsx')), defaultSettings: {}, allowedSizes: { medium: { w: 6, h: 12 }