{"version":3,"file":"component---src-pages-tidetimes-js-b571d250117a333d8568.js","mappings":"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","sources":["webpack://Jersey-Met-Redesign/./src/pages/tidetimes.js"],"sourcesContent":["import React, { useState, useEffect } from \"react\"\nimport Grid from \"@material-ui/core/Grid\"\nimport Layout from \"../components/layout\"\nimport useMediaQuery from \"@material-ui/core/useMediaQuery\"\nimport axios from \"axios\"\nimport { Waypoint } from \"react-waypoint\"\nimport Loading from \"./loading\"\nimport PremiumServices from \"../components/Sidebar/PremiumServices\"\nimport Seo from \"../components/seo\"\nimport Button from '@material-ui/core/Button';\nimport \"../components/pageStyles.scss\"\n\nconst TideTimesData = props => {\n  const changetoTwentyFourHourTime = i => {\n    if (i < 10) {\n      i = \"0\" + i\n    }\n    return i\n  }\n  let weekendClass = \"\"\n  if (props.weekEnd) weekendClass = \"Weekend\"\n\n  var today = new Date(props.date)\n  var todaycheck = new Date()\n  todaycheck.setHours(0, 0, 0, 0)\n  var timeNow = new Date()\n\n  var h = changetoTwentyFourHourTime(timeNow.getHours())\n  var m = changetoTwentyFourHourTime(timeNow.getMinutes())\n  var filteredNow = h + \":\" + m\n\n  var timeArray = []\n  timeArray.push(filteredNow)\n\n  var ifNextTimeEntry\n  if (\n    today.getDate() === todaycheck.getDate() &&\n    today.getMonth() === todaycheck.getMonth()\n  ) {\n    for (var i = 0; i < props.tideTimes.length; i++) {\n      timeArray.push(props.tideTimes[i].time)\n\n      timeArray.sort()\n      var nextTime = timeArray.indexOf(filteredNow) + 1\n\n      if (nextTime < 5) {\n        if (typeof(props.tideTimes[`${nextTime - 1}`]) !== 'undefined' && props.tideTimes[`${nextTime - 1}`] != null) {\n          ifNextTimeEntry = props.tideTimes[`${nextTime - 1}`].time\n        }\n      } else if (nextTime === 5) {\n        if (typeof(props.tideTimes[3]) !== 'undefined' && props.tideTimes[3] != null) {\n          ifNextTimeEntry = props.tideTimes[3].time\n        }\n      }\n    }\n  }\n  return (\n    <tr>\n      <td className={\"TidesDate \" + weekendClass}>{props.formattedDate}</td>\n      <td className={\"TidesLowHigh \" + weekendClass}>\n        {props.tideTimes.map((result, index) => (\n          <HighWater\n            today={ifNextTimeEntry}\n            currentTime={result.time}\n            key={index}\n            value={result.highLow}\n            short={result.highLowShort}\n          />\n        ))}\n      </td>\n      <td className={\"TidesTime \" + weekendClass}>\n        {props.tideTimes.map((result, index) => (\n          <TideTimesItem\n            today={ifNextTimeEntry}\n            currentTime={result.time}\n            key={index}\n            value={result.time}\n          />\n        ))}\n      </td>\n      {props.mode ? (\n        <td className={\"TidesHeight \" + weekendClass}>\n          {props.tideTimes.map((result, index) => (\n            <TideTimesItem\n              today={ifNextTimeEntry}\n              currentTime={result.time}\n              key={index}\n              value={result.height + \"m\"}\n            />\n          ))}\n        </td>\n      ) : (\n        <td className={\"TidesHeight \" + weekendClass}>\n          {props.tideTimes.map((result, index) => (\n            <TideTimesItem\n              today={ifNextTimeEntry}\n              currentTime={result.time}\n              key={index}\n              value={result.heightinFeet + \"ft\"}\n            />\n          ))}\n        </td>\n      )}\n    </tr>\n  )\n}\n\nconst TideTimesItem = props => {\n  return props.today === props.currentTime ? (\n    <span style={{ color: \"#b60011\" }}>\n      {props.value}\n      <br />\n    </span>\n  ) : (\n    <span>\n      {props.value}\n      <br />\n    </span>\n  )\n}\n\nconst HighWater = props => {\n  return props.today === props.currentTime ? (\n    <span>\n      <span style={{ color: \"#b60011\" }} className=\"hidemobile\">\n        {props.value}\n      </span>\n      <span className=\"hiddendesktop\">{props.short}</span>\n    </span>\n  ) : (\n    <span>\n      <span className=\"hidemobile\">{props.value}</span>\n      <span className=\"hiddendesktop\">{props.short}</span>\n    </span>\n  )\n}\n\nconst TideTimes = () => {\n  const [url, setUrl] = useState(process.env.MET_TIDETIMES)\n  const [displayButton, setDisplayButton] = useState(true)\n  const [tides, setTides] = useState([])\n  const [error, setError] = useState(false)\n  const [hasMore, setHasMore] = useState(true)\n  const [loading, setLoading] = useState(false)\n  const [isLoadOnScroll, setisLoadOnScroll] = useState(false)\n  const [counter, setCounter] = useState(0)\n  const tableMenu = useMediaQuery(\"(min-width: 778px)\")\n\n\n  const fetchData = async () => {\n    if (error || loading || !hasMore) return\n\n    try {\n      const result = await axios(url + \"&page=\" + counter.toString())\n      const nextTide = result.data.map(tide => ({\n        id: tide.id,\n        date: tide.date,\n        formattedDate: tide.formattedDate,\n        weekEnd: tide.weekEnd,\n        tideTimes: tide.tideTimes,\n      }))\n      if (url.length && url !== null) {\n        setTides([...tides, ...nextTide])\n      } else {\n        setTides([])\n      }\n      setisLoadOnScroll(true)\n      setHasMore(result.data.length === 30)\n\n      if (counter===12)\n        setHasMore(false)\n\n      if (counter < 12)\n        setCounter(counter + 1)\n    } catch (error) {\n      setError(true)\n      setLoading(false)\n      console.log(error)\n    }\n  }\n\n  useEffect(() => {\n    setError(false)\n    setLoading(true)\n    fetchData();\n    setLoading(false)\n  }, [url]) // eslint-disable-line\n\n\n  const toggleFormat = () => {\n    setDisplayButton(displayButton => !displayButton)\n  }\n\n  return (\n    <React.Fragment>\n      <Layout>\n      <Seo title=\"Tide Times - St. Helier\" description=\"Tide times for today and the week ahead for St Helier, Jersey\" />\n      <div className=\"forecastAutoMargin\">\n      <Grid item xs={12} sm={12} md={8} lg={8} className=\"menuTitle\" style={{paddingLeft:0}}>\n                  <h1>\n                  St Helier tides\n                  </h1>                  \n      </Grid>\n          <Grid container spacing={2}>\n            <Grid item xs={12} sm={12} md={8} lg={8}>\n              {error ? (\n                <div>\n                  <p className=\"test\" style={{ color: \"#bf0d0d\" }}>\n                    Sorry, the tide times information is not available at the moment.\n                    Check back later.\n                  </p>\n                  <div style={{textAlign:\"center\"}}><Button className=\"resendButton\" onClick={() => setUrl(process.env.MET_TIDETIMES) }>Try again</Button></div>\n                </div>\n              ) : (\n                <React.Fragment>\n                  <div>\n                    <p style={{marginTop:\"0\"}}>\n                      All times are local. An hour has already been added for\n                      BST where applicable\n                    </p>\n                    <p>\n                      Tidal predictions for St Helier, Jersey, have been\n                      computed by the{\" \"}\n                      <a className=\"hover-link\" href=\"http://noc.ac.uk/\" target=\"_blank\" rel=\"noreferrer\">\n                        National Oceanography Centre\n                      </a>\n                      : copyright reserved.\n                    </p>\n                    <div style={{ textAlign: \"right\" }}>\n                      {displayButton === true ? (\n                        <button onClick={toggleFormat} className=\"btn-default\" style={{ marginRight: \"0\", marginBottom: \"15px\" }}>\n                          Display height in feet\n                        </button>\n                      ) : (\"\")\n                      }\n                      {displayButton === false ? (\n                        <button onClick={toggleFormat} className=\"btn-default\" style={{ marginRight: \"0\", marginBottom: \"15px\" }}>\n                          Display height in meters\n                        </button>\n                      ) : (\"\")\n                      }\n                    </div>\n\n                    {tides.length !== 0 ? (\n                      <table className=\"generalTableStyle\" style={{ clear: \"both\" }}>\n                        <thead>\n                          <tr>\n                            <th>Date</th>\n                            <th>LW / HW</th>\n                            <th className=\"rightTableHeadStyle\" style={tableMenu ? { paddingLeft: \"100px\" } : {}}>\n                              Local time\n                            </th>\n                            <th className=\"rightTableHeadStyle\" style={tableMenu ? { paddingLeft: \"100px\" } : {}}>\n                              Height\n                            </th>\n                          </tr>\n                        </thead>\n                        <tbody>\n                          {tides.map((result, index) => (\n                            <TideTimesData mode={displayButton} key={index} {...result}/>\n                          ))}\n                        </tbody>\n                      </table>\n                    ) : (\n                      <Loading />\n                    )}\n                    <div style={{ display: \"block\", clear: \"both\" }}>\n                      &nbsp;\n                      <br />\n                      <Waypoint onEnter={fetchData} />\n                    </div>\n\n                    {isLoadOnScroll && hasMore && <Loading />}\n                    {!hasMore && (\n                      <p style={{ color: \"#bf0d0d\" }}>End of tide data</p>\n                    )}\n                  </div>\n                </React.Fragment>\n              )}\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 TideTimes\n"],"names":["TideTimesData","props","changetoTwentyFourHourTime","i","weekendClass","weekEnd","today","Date","date","todaycheck","setHours","ifNextTimeEntry","timeNow","filteredNow","getHours","getMinutes","timeArray","push","getDate","getMonth","tideTimes","length","time","sort","nextTime","indexOf","className","formattedDate","map","result","index","HighWater","currentTime","key","value","highLow","short","highLowShort","TideTimesItem","mode","height","heightinFeet","style","color","useState","process","url","setUrl","displayButton","setDisplayButton","tides","setTides","error","setError","hasMore","setHasMore","loading","setLoading","isLoadOnScroll","setisLoadOnScroll","counter","setCounter","tableMenu","useMediaQuery","fetchData","axios","toString","nextTide","data","tide","id","console","log","useEffect","toggleFormat","title","description","item","xs","sm","md","lg","paddingLeft","container","spacing","textAlign","onClick","marginTop","href","target","rel","marginRight","marginBottom","clear","display","onEnter"],"sourceRoot":""}