Info popup

package.json

@@ -19,6 +19,7 @@
     "react-icons": "^4.3.1",
     "react-leaflet": "^3.2.5",
     "react-scripts": "5.0.0",
+    "sass": "^1.49.7",
     "typescript": "^4.5.5",
     "web-vitals": "^2.1.4"
   },

public/index.html

@@ -8,6 +8,7 @@
             integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
             crossorigin="anonymous"
     />
+    <link rel="stylesheet" type="scss" href="componentStyling.scss" />
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />

server/IFridge.ts

@@ -17,4 +17,5 @@ export interface IFridge {
     getTemperature(): string;
     getContact(): string[];
     getPosts(): any[];
+
 }

src/App.scss

@@ -0,0 +1,142 @@
+
+/*
+ * Definitions Used in the Fridge Information Popup
+ */
+$borderWid: 2px;
+$borderRad: 10px;
+$borderCol: lightgrey;
+$borderSty: solid;
+
+$headerTextSize: 15px;
+$subTextSize: 12px;
+
+$buttonTextSize: 12px;
+$buttonHeight: 30px;
+$buttonWidth: 48%;
+
+$mainFont: Arial-Light;
+$backUpFont: Sans-Serif;
+$thirdBackupFont: Georgia;
+
+$headerWeight: light;
+$subTextWeight: normal;
+$buttonWeight: normal;
+
+$infoBackgroundColor: white;
+
+.fridgeInfo {
+
+  height: 500px;
+  max-height: 50vh;
+  width: 300px;
+  max-width: 85vh;
+  background-color: $infoBackgroundColor;
+  margin:15px;
+  padding: 40px;
+  overflow-y: scroll;
+
+  border: {
+    color: $borderCol;
+    style: $borderSty;
+    width: $borderWid;
+    radius: $borderRad;
+  }
+
+  img {
+    float: right;
+    height: 80px;
+    width: 60px;
+  }
+
+  h1 {
+
+    padding: {
+      top: 10px;
+    }
+    text-align: center;
+
+    font: {
+      size: $headerTextSize;
+      family: $mainFont,
+              $backUpFont,
+              $thirdBackupFont;
+      weight: $headerWeight;
+    }
+  }
+
+  h2 {
+    text-align: center;
+    padding-bottom: 10px;
+    font: {
+      size: $subTextSize;
+      family: $mainFont,
+      $backUpFont,
+      $thirdBackupFont;
+      weight: $subTextWeight;
+    }
+  }
+
+  p {
+    text-align: left;
+    font: {
+      size: $subTextSize;
+      family: $mainFont,
+              $backUpFont,
+              $thirdBackupFont;
+      weight: $subTextWeight;
+    }
+  }
+
+  item {
+    background-color: $borderCol;
+    font-family: $mainFont,
+                 $backUpFont,
+                 $thirdBackupFont;
+    color: black;
+    border {
+      radius: $borderRad
+    }
+    width: inherit - 1;
+    height: fit-content;
+    margin: 2px;
+    padding: 2px;
+    float: left;
+  }
+
+  temp {
+    color: black;
+  }
+}
+
+.button {
+    color: black; //default button text color
+    background-color: white; //default button background color
+    height: $buttonHeight;
+    width: $buttonWidth;
+    text-align: center;
+    float: left;
+    margin: 2px;
+
+    font: {
+      size: $buttonTextSize;
+      family: $mainFont,
+              $backUpFont,
+              $thirdBackupFont;
+      weight: $buttonWeight;
+    }
+
+    border: {
+      radius: $borderRad;
+      color: $borderCol;
+      style: double;
+    }
+}
+
+.scroll_pane {
+  height: inherit - 200;
+  width: fit-content;
+  overflow-y: scroll;
+  border: 1px solid #666;
+  background-color: $borderCol;
+  padding: 10px;
+}

src/App.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import Map from "./components/Map"
 import "./index.css"
+import "./App.scss"
 
 /**
  * This App creates an interactive map for users to find local community fridges in Boston and

src/components/AllFridges.js

@@ -0,0 +1,23 @@
+import fridges from "../data/fridges.json";
+import PopupConstrols from "./PopupControls";
+import React from "react";
+
+function AllFridges({updateSelected}) {
+    return (
+        <div className>
+            {fridges.map(fridge => (
+                <PopupConstrols
+                    text={fridge.name + ": " + fridge.address}
+                    style={{
+                        width: 'fit-content',
+                        height: 'fit-content'
+                    }}
+                    click_on={updateSelected(fridge)}
+                    click_off={updateSelected(null)}
+                />
+            ))}
+        </div>
+    )
+}
+
+export default AllFridges;

src/components/FridgeInformation.js

@@ -0,0 +1,21 @@
+import PopupControls from "./PopupControls";
+import React from "react";
+
+function FridgeInformation() {
+    return (
+        <div>
+            <h2>100 Address Street Line, City ST 31413</h2>
+            <PopupControls text='Contact Fridge'/>
+            <PopupControls text='Make a Post' style={{
+                float: 'right',
+                color: 'black',
+                backgroundColor: '#89c0b6',
+                borderColor: 'transparent'
+            }}/>
+            <p style={{marginTop: '20px'}}>Updates</p>
+            <p style={{fontSize: '12px'}}>Last Visit: 11/29/21 10:15</p>
+        </div>
+    )
+}
+
+export default FridgeInformation;

src/components/InformationPopup.js

@@ -1,21 +1,41 @@
-import React from "react";
-import Bootstrap, {Card, Container, Row} from "react-bootstrap";
-import Button from "react-bootstrap/Button";
+import React, {useEffect, useRef} from "react";
+import "../App.scss"
+import blackLoc from '../images/mapLocationIconBlack.png'
+import fridges from "../data/fridges.json"
+import PopupControls from "./PopupControls";
+import MapControls from "./MapControls";
+import FridgeInformation from "./FridgeInformation";
+import AllFridges from "./AllFridges";
+import * as L from "leaflet";
 
-function InformationPopup() {
-    return (
-        <Card style={{width: '18rem'}}>
-            <Card.Body>
-                <Card.Title>
-                    This is the Title
-                </Card.Title>
-                <Card.Text>
-                    This is the Body.
-                </Card.Text>
-                <Button>Button</Button>
-            </Card.Body>
-        </Card>
+function InformationPopup({position, selectedFridge, updateSelected}){
+    const name = selectedFridge ? selectedFridge.name : "No Fridge Selected";
+
+    /*
+    const divRef = useRef(null);
+
+    useEffect(() => {
+        L.DomEvent.disableClickPropagation(divRef.current);
+    });
+    */
+
+    return ( <div className={position}>
+                <div style="leaflet-control leaflet-bar" style={{border: 'transparent', overflowY: 'scroll'}}>
+                    <img src={blackLoc} style={{height: 60, width: 40, marginLeft: 145, marginBottom: -50}} alt={"location symbol"}/>
+                    <div className="fridgeInfo">
+                        <h1>{name}</h1>
+                        {selectedFridge ? <FridgeInformation/> : <AllFridges updateSelected={updateSelected}/>}
+                    </div>
+                </div>
+            </div>
     )
 }
 
+/*
+light to dark mint map colors
+#e4f1e1,#b4d9cc,#89c0b6,#63a6a0,#448c8a,#287274,#0d585f
+light to dark teal map colors
+#d1eeea,#a8dbd9,#85c4c9,#68abb8,#4f90a6,#3b738f,#2a5674
+ */
+
 export default InformationPopup

src/components/LocationMarker.js

@@ -1,5 +1,5 @@
 import {useEffect, useMemo, useState} from "react";
-import {Marker, Popup, useMapEvents} from "react-leaflet";
+import {Marker, useMap} from "react-leaflet";
 import infoArrrow from "../images/bubbleArrow.png";
 import * as leaflet from "leaflet";
 import clickedLocation from "../images/mapLocationIconBlack.png";
@@ -9,11 +9,11 @@ import LocationPopup from "./LocationPopup";
 /**
  * A marking on the Map representing the location of a community fridge.
  * @param {JSON} fridge - A single community fridge from the fridges JSON file.
+ * @param selectedFridge - The current fridge on the map that is selected, if there is one.
+ * @param updateSelected - the function that updates the current selected fridge on the map to a new one.
  * @returns {JSX.Element} A Marker with a popup that describes the given fridge
  */
 
-function LocationMarker(fridge) {
-
 export default function LocationMarker({fridge, selectedFridge, updateSelected}) {
 
   //useState to change the <Marker />'s icon when clicked
@@ -49,11 +49,11 @@ export default function LocationMarker({fridge, selectedFridge, updateSelected})
     })
 
     return (
-        <Marker position={fridge.coordinates}
+            <Marker position={fridge.coordinates}
                 icon={isSelected ? clickedMarker : marker}
                 eventHandlers={markerClicked}
                 key={fridge.coordinates}>
                 <LocationPopup data={fridge}/>
-        </Marker>
+            </Marker>
     )
 }