big changes

mikaalnaik · Mar 24, 2023 · 5b3f308 · 5b3f308
1 parent c3abd32
commit 5b3f308
Show file tree

Hide file tree

Showing 23 changed files with 1,837 additions and 5,858 deletions.
diff --git a/apps/backend/Procfile b/apps/backend/Procfile
diff --git a/apps/frontend/README.md b/apps/frontend/README.md
@@ -62,6 +62,13 @@ Niagara and Toronto Predictions(https://www.mdpi.com/1660-4601/18/23/12841)
 
 
 
+### Data Sources
+
+https://wateroffice.ec.gc.ca/services/historical_graph/json/inline?station=02HC024&data_type=daily&year=2020&start_year=1850&end_year=2023&start_month=01&end_month=12&results_type=historical&parameter_type=level
+
+https://www.ncei.noaa.gov/access/services/data/v1?dataset=daily-summaries&stations=CA006158355&startDate=2023-02-01&endDate=2023-02-07&includeAttributes=true&format=json&units=metric
+
+
 &nbsp;
 
 

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -12,16 +12,17 @@
   "dependencies": {
     "@prisma/client": "4.9.0",
     "dayjs": "^1.10.4",
+    "eslint-config-next": "^13.1.6",
     "google-map-react": "^1.1.7",
     "isomorphic-unfetch": "^3.1.0",
     "lodash": "^4.17.19",
     "lodash.get": "^4.4.2",
-    "next": "^12.0.0",
+    "next": "^13.1.6",
     "node-fetch": "^2.6.1",
     "performance-now": "^2.1.0",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-charts": "^2.0.0-beta.7",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-particles-webgl": "^1.0.10",
     "react-visibility-sensor": "5.1.1",
     "sass": "^1.26.8",

diff --git a/apps/frontend/src/components/beach-card/index.tsx b/apps/frontend/src/components/beach-card/index.tsx
@@ -1,43 +1,69 @@
-import { useRouter } from 'next/router';
+// import { useRouter } from 'next/router';
 import { Beach } from 'src/types/beaches';
 import styles from './style.module.scss';
-import { ParticlesAnimation } from './particle';
-import BeachInfoSection from './beach-info-section';
-import VisibilitySensor from 'react-visibility-sensor';
-import { getBeachConstants } from 'src/utils/beachPositions';
-import { useState } from 'react';
+import { beachIDToName } from 'src/utils/beachRouteMatch';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(relativeTime);
 
 interface Props {
   beach: Beach;
 }
 
 const BeachCard = ({ beach }: Props) => {
   const { eColi } = beach;
-  const router = useRouter();
-  const [isVisible, setIsVisible] = useState(false);
+  // const router = useRouter();
 
   const handleClick = () => {
     // Create specific page for Ontario Place beach
-    if (beach.beachId === 12) {
-      return;
-    } else {
-      router.push(`/beach/${getBeachConstants(beach.beachId).routeName}`);
-    }
+    // if (beach.beachId === 12) {
+    //   return;
+    // } else {
+    //   router.push(`/beach/${getBeachConstants(beach.beachId).routeName}`);
+    // }
   };
 
+  const label = eColi ? eColi : 'N/A'
+  const colourFlag = eColi < 100 ? 'safe' : 'unsafe'
+
   return (
     <div className={styles['beachcard']} onClick={handleClick}>
-      <VisibilitySensor
-        partialVisibility={true}
-        onChange={setIsVisible}
-      >
-        <div className={styles['image-wrapper']}>
-          {isVisible && (
-            <ParticlesAnimation ecoli={eColi} />
-          )}
-        </div>
-      </VisibilitySensor>
-      <BeachInfoSection beach={beach} />
+      <span className={styles.beachName}>
+        {beachIDToName(beach?.beachId)}
+      </span>
+      <section className={styles.readingGroup}>
+        {beach.prediction && (
+          <span className={styles.result}>
+            <div className={`${styles.reading} ${styles[colourFlag]}`}>
+              {label}
+            </div>
+            <span className={styles.superScript}>
+              <div className={styles.unit}>
+                ppm E. coli
+              </div>
+              <div className={`${styles.time}`}>
+                Predicted today
+              </div>
+            </span>
+          </span>
+        )}
+
+
+        <span className={styles.result}>
+          <div className={`${styles.reading} ${styles[colourFlag]}`}>
+            {label}
+          </div>
+          <span className={styles.superScript}>
+            <div className={styles.unit}>
+              ppm E. coli
+            </div>
+            <div className={`${styles.time}`}>
+              {dayjs(beach.collectionDate).fromNow()}
+            </div>
+          </span>
+        </span>
+      </section>
     </div>
   );
 };

diff --git a/apps/frontend/src/components/beach-card/style.module.scss b/apps/frontend/src/components/beach-card/style.module.scss
@@ -3,27 +3,61 @@
 .beachcard {
   border-radius: 4px;
   width: 100%;
-  position: relative;
-  height: 500px;
-  box-shadow: 0 1px 1px rgba(0,0,0,0.11),
-            0 2px 2px rgba(0,0,0,0.11),
-            0 4px 4px rgba(0,0,0,0.11),
-            0 8px 8px rgba(0,0,0,0.11),
-            0 16px 16px rgba(0,0,0,0.11),
-            0 32px 32px rgba(0,0,0,0.11);
+  font-weight: 600;
+  font-size: 4rem;
+  // width: 100vw;
+  word-wrap: break-word;
+
+  @include desktop {
+    font-size: 10rem;
+
+  }
 }
 
-.image-wrapper {
-  background-color: rgb(28, 31, 58);
-  position: absolute;
-  border-radius: 4px;
-  height: 100%;
-  width: 100%;
+.readingGroup {
+  display: flex;
+  flex-direction: column;
 }
 
-.image {
-  width: 100%;
-  object-fit: contain;
-  border-top-left-radius: $border-radius;
-  border-top-right-radius: $border-radius;
+.result {
+  display: flex;
+  align-items: start;
+  // height: 50px;
+  // line-height: 100px;
+  vertical-align: text-top;
+}
+
+.subText {
+}
+
+.unit {
+  font-size: 10px;
+  margin-top: 10px;
+
+  @include desktop {
+    font-size: 16px;
+    margin-top: 16px;
+  }
 }
+
+.superScript {
+  margin-left: 5px;
+}
+
+.reading {
+  vertical-align: top;
+
+  &.safe {
+    color: #5d9c59;
+  }
+
+  &.unsafe {
+    color: #df2e38;
+  }
+}
+
+
+.time {
+  color: grey;
+  font-size: 9px;
+}
diff --git a/apps/frontend/src/components/home-page-header/index.tsx b/apps/frontend/src/components/home-page-header/index.tsx
@@ -6,24 +6,16 @@ import styles from './style.module.scss';
 const HomePageHeader = () => {
   return (
     <nav className={styles['title-section']}>
-      <h1>
-        <Link href="/">
-          <a className={styles.title}>
-            Toronto Beach Report
-          </a>
-        </Link>
-      </h1>
-      <div>
-        <Link href="/ecoli">
-          <a>
-          What do these readings mean?
-          </a>
-        </Link>
-        <Link href="/about-us">
-          <a>
-           About the project
-          </a>
-        </Link>
+      <Link href="/" className={styles.title}>
+        Toronto Beach Report
+      </Link>
+      <div className={styles.links}>
+        {/* <Link href="/ecoli" className={styles.link}>
+          About readings
+        </Link> */}
+        {/* <Link href="/about-us" className={styles.link}>
+          About the project
+        </Link> */}
       </div>
     </nav>
   );

diff --git a/apps/frontend/src/components/home-page-header/style.module.scss b/apps/frontend/src/components/home-page-header/style.module.scss
@@ -3,34 +3,37 @@
 .title-section {
   display: flex;
   flex-direction: column;
-
-  div {
-    display: flex;
-    flex-direction: column;
-
-    @include tablet {
-      flex-direction: row;
-    }
-
-    @include desktop {
-      flex-direction: row;
-    }
-
-    a {
-      color: black;
-      font-size: 12px;
-      font-weight: 300;
-      margin-right: 1rem;
-      margin-bottom: .5rem;
-      white-space: nowrap;
-    }
-  }
+  padding: 1rem;
 }
 
 .title {
-  font-size: 2rem;
   margin-bottom: 0;
   color: black;
   text-decoration: none;
+  padding: 0;
   font-weight: 500;
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+
+  @include desktop {
+    font-size: 4rem;
+  }
+}
+
+.links {
+  display: flex;
+  flex-direction: row;
+}
+
+.link {
+  color: black;
+  font-size: 12px;
+  text-decoration: none;
+
+  font-weight: 300;
+  margin-right: 4rem;
+
+  @include desktop {
+    font-size: 2rem;
+  }
 }
diff --git a/apps/frontend/src/components/layout/style.module.scss b/apps/frontend/src/components/layout/style.module.scss
@@ -1,23 +1,13 @@
 @import 'src/styles/imports';
 
 .main {
-  padding: 2rem;
   position: relative;
-  padding-top: 2rem;
   display: inline-block;
   width: 100%;
-
-  @include tablet {
-    padding: 4rem
-  }
-  @include desktop {
-    padding: 4rem
-  }
 }
 
 .home {
   position: relative;
-  padding-top: 1rem;
   display: inline-block;
   width: 100%;
 }
diff --git a/apps/frontend/src/models/beach/index.ts b/apps/frontend/src/models/beach/index.ts
@@ -0,0 +1,11 @@
+
+
+export class Beach {
+  id: Number
+
+  constructor() {
+    this.id = 12
+  }
+
+
+}
-Original file line number
+Diff line change
@@ Expand Up @@
+    ### Data Sources
+    https://wateroffice.ec.gc.ca/services/historical_graph/json/inline?station=02HC024&data_type=daily&year=2020&start_year=1850&end_year=2023&start_month=01&end_month=12&results_type=historical&parameter_type=level
+    https://www.ncei.noaa.gov/access/services/data/v1?dataset=daily-summaries&stations=CA006158355&startDate=2023-02-01&endDate=2023-02-07&includeAttributes=true&format=json&units=metric
     &nbsp;
@@ Expand Down @@