{"version":3,"file":"component---src-pages-earthquakes-js-2b9ce7938f5b2895e251.js","mappings":"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","sources":["webpack://Jersey-Met-Redesign/./src/components/Sidebar/PremiumServices/index.js","webpack://Jersey-Met-Redesign/./src/pages/earthquakes.js","webpack://Jersey-Met-Redesign/./src/pages/loading.js"],"sourcesContent":["import React from 'react'\nimport { Link } from \"gatsby\";\nimport logo from \"../../../images/Jersey-Met-Premium-Services-Logo.svg\"\nimport \"../Sidebar.scss\";\nimport { makeStyles, } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    \"&:hover\": {\n      color: \"#b60011\",   \n    },\n    \"&:focus\": {\n    backgroundColor: \"hsl(208, 89%, 34%)\",\n    color: \"#fff\"\n    }\n  },\n}));\n\nconst PremiumServices = () => {\n    const hoverStyle = useStyles()\n    return (\n    <aside id=\"sideBar\" >\n    <div id=\"navigator\">\n\n    <div className=\"sidePanel\">\n        <div style={{ backgroundImage:`url(${logo})`, height:'100px', backgroundRepeat: 'no-repeat',backgroundPosition: '-5px' }}></div>\n        {/* <img alt=\"Premium services\" src={logo} ></img> */}\n        <h1>Premium Services</h1>    \n        <p>Talk to a forecaster on<br />T&nbsp;&nbsp;&nbsp;<a className={hoverStyle.root} href=\"tel:+4490580777774\">0905 807 7777</a><br />Calls charged at £1.50 per minute</p>\n        <p><Link className={hoverStyle.root} activeClassName=\"\" to='/services' >View all premium weather services</Link></p>\n     </div>\n\n     </div>\n     </aside>\n    )\n}\n\nexport default PremiumServices","import React, { useEffect, useState } from \"react\"\nimport Grid from \"@material-ui/core/Grid\"\nimport Layout from \"../components/layout\"\nimport PremiumServices from \"../components/Sidebar/PremiumServices\"\nimport axios from \"axios\"\nimport Loading from \"./loading\"\nimport Button from '@material-ui/core/Button';\nimport \"./resendButton.scss\"\nimport Seo from \"../components/seo\"\nimport { makeStyles, } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    \"&:focus\": {\n      backgroundColor: \"hsl(208, 89%, 34%) !important\",\n      color: \"#fff !important\"\n    },\n    \"&:hover\": {\n      color:\"#b60011 !important\"\n    }\n  },\n}));\n\nconst EarthQuakes = () => {\n  \n  const [data, setData] = useState([])\n  const [url, setUrl] = useState(process.env.MET_EARTHQUAKES)\n  const [loading, setloading] = useState(true)\n  const [error, setError] = useState(false)\n  const [latestDate, setLatestDate] = useState([])\n  const [latestMagnitude, setLatestMagnitude] = useState([])\n  const linkFocus = useStyles()\n\n  useEffect(() => {\n    const fetchData = async () => {\n      setError(false)\n      setloading(true)\n      try {\n        const result = await axios(url)\n        setData(result.data.earthquakes)\n        setLatestDate(result.data.earthquakes[0].Date)\n        setLatestMagnitude(result.data.earthquakes[0].Magnitude)\n      } catch (error) {\n        setError(true)\n        console.log(error)\n      }\n      setloading(false)\n    }\n    fetchData()\n  }, [url])\n\n  return (\n    <React.Fragment>\n      <Layout>\n        <Seo title=\"Earthquakes\" description=\"Seismological reports from Jersey Meteorological Department\" />\n        <div className=\"forecastAutoMargin\">\n        <Grid item xs={12} sm={12} md={8} lg={8} className=\"menuTitle\" style={{paddingLeft:0}}>\n                  <h1>\n                  Earthquakes\n                  </h1>                  \n      </Grid>\n          <Grid container spacing={2}>\n            <Grid item xs={12} sm={12} md={8} lg={8}>\n              <React.Fragment>\n              <div className=\"Content\">\n\n                <h2 style={{marginTop:\"0\"}}>Most recent earthquake​​​​</h2>\n                <p>\n                  The last earthquake in the Channel Islands was on {latestDate}{\" \"}\n                  and measured a magnitude of {latestMagnitude}.\n                </p>\n                <h2>Previous earth​quakes in the Channel Islands</h2>\n                <p>\n                  The Jersey Meteorological Dep​artment support the British\n                  Geological Survey (BGS) in recording earthquakes in the\n                  Channel Islands area and further afield.\n                </p>\n\n                {error ? (\n                  <React.Fragment>\n                  <div>\n                    <p style={{ color: \"#bf0d0d\" }}>\n                      Sorry, the earthquake information is not available at the\n                      moment. Please check back later.\n                    </p>\n                  </div>\n                  <div style={{textAlign:\"center\"}}><Button className=\"resendButton\" onClick={() => setUrl(process.env.MET_EARTHQUAKES) }>Try again</Button></div>\n                  </React.Fragment>\n                ) : (\n                  loading ? (\n                    <Loading />\n                  ) : (\n                    <div style={{overflowX: 'auto'}}>\n                    <table className=\"generalTableStyle\">\n                      <thead>\n                        <tr>\n                          <th>Date</th>\n                          <th>Time</th>\n                          <th>Latitude and longitude</th>\n                          <th>Depth (km)</th>\n                          <th>Magnitude</th>\n                          <th>Intensity</th>\n                        </tr>\n                      </thead>\n                        <tbody>                        \n                          {data.map((result, index) => (                      \n                            <tr key={index}>\n                              <td className=\"earthquakeTableLeftColumn\">\n                                {result.Date}\n                              </td>\n                              <td>{result.Time}</td>\n                              <td>{result[\"Latitude and longitude\"]}</td>\n                              <td>{result[\"Depth(km)\"]}</td>\n                              <td>{result.Magnitude}</td>\n                              <td>{result.Intensity}</td>\n                            </tr>\n                          ))}\n                        </tbody>\n                    </table>\n                    </div>\n                  )\n                )}\n                <p>\n                  For the most recent and up to date information, visit the\n                  <a\n                    href=\"http://www.earthquakes.bgs.ac.uk/earthquakes/recent_uk_events.html\" target=\"_blank\" rel=\"noreferrer\"\n                    style={{\n                      color: \"#b60011\",\n                      cursor: \"pointer\",\n                      marginLeft: \"3px\",\n                      marginRight: \"3px\",\n                    }}\n                    className={linkFocus.root}\n                  >\n                    British Geological Survey website\n                  </a>\n                  which also includes earthquakes from around the UK in the last\n                  50 days.\n                </p>\n                <h2>Real time seismograms</h2>\n                <p>\n                  You can see real time seismograms from St Aubin seismic\n                  station.\n                </p>\n                <p>\n                  Select 'JSA (Jersey)' from the drop down list, then 'short\n                  period' for local earthquake information (within 300 miles /\n                  483 kilometres).\n                </p>\n                <p>\n                  <a\n                    href=\"http://www.earthquakes.bgs.ac.uk/helicorder/heli.html\" target=\"_blank\" rel=\"noreferrer\"\n                    style={{\n                      color: \"#b60011\",\n                      cursor: \"pointer\",\n                    }}\n                    className={linkFocus.root}\n                  >\n                    Real time seismograms on the British Geological Survey\n                    website\n                  </a>\n                </p>\n                <h2>Earthquakes around the British Isles interactive map</h2>\n                <p>\n                  See the\n                  <a\n                    href=\"http://www.earthquakes.bgs.ac.uk/earthquakes/home.html\" target=\"_blank\" rel=\"noreferrer\"\n                    style={{\n                      color: \"#b60011\",\n                      cursor: \"pointer\",\n                      marginLeft: \"3px\",\n                      marginRight: \"3px\",\n                    }}\n                    className={linkFocus.root}\n                  >\n                    interactive map\n                  </a>\n                  provided by the British Geological Survey which allows you to\n                  see earthquakes around the British Isles for the last 50 days.\n                </p>\n                <h2>Have you felt an earthquake?</h2>\n                <p>\n                  If you have felt an earthquake, let the British Geological\n                  Survey know by filling in their\n                  <a\n                    href=\"http://www.earthquakes.bgs.ac.uk/questionnaire/EqQuestIntro.html\" target=\"_blank\" rel=\"noreferrer\"\n                    style={{\n                      color: \"#b60011\",\n                      cursor: \"pointer\",\n                      marginLeft: \"3px\",\n                    }}\n                    className={linkFocus.root}\n                  >\n                    online questionnaire\n                  </a>\n                  .\n                </p>\n                </div>\n              </React.Fragment>\n            </Grid>\n            <Grid item xs={12} sm={12} md={4} lg={4}>\n              <PremiumServices/>\n            </Grid>\n          </Grid>\n        </div>\n      </Layout>\n    </React.Fragment>\n  )\n}\nexport default EarthQuakes\n","import React from \"react\"\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faSpinner } from \"@fortawesome/free-solid-svg-icons\";\n\nconst Loading = () => {\n    return (\n      <div style={{ width: \"100%\", textAlign: \"center\", display: \"block\" }}>\n        <div style={{ color: \"rgb(191, 13, 13)\", marginTop: \"15px\", display: \"block\" }}>\n          <FontAwesomeIcon icon={faSpinner} />\n          <span style={{marginLeft:\"10px\"}}>Loading...</span>\n        </div>\n      </div>\n    )\n  }\n\n  export default Loading;"],"names":["useStyles","makeStyles","theme","root","color","backgroundColor","hoverStyle","id","className","style","backgroundImage","height","backgroundRepeat","backgroundPosition","href","Link","activeClassName","to","useState","data","setData","process","url","setUrl","loading","setloading","error","setError","latestDate","setLatestDate","latestMagnitude","setLatestMagnitude","linkFocus","useEffect","fetchData","axios","result","earthquakes","Date","Magnitude","console","log","title","description","item","xs","sm","md","lg","paddingLeft","container","spacing","marginTop","textAlign","onClick","overflowX","map","index","key","Time","Intensity","target","rel","cursor","marginLeft","marginRight","width","display","icon","faSpinner"],"sourceRoot":""}