diff --git a/.env b/.env new file mode 100644 index 0000000..3e7f2a2 --- /dev/null +++ b/.env @@ -0,0 +1,3 @@ +# create local copy of this file and rename to .env.local +# make sure to add .env.local to .gitignore!! +MONGO_URI={mongo-uri-here} \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/new-issue.md b/.github/ISSUE_TEMPLATE/new-issue.md index 6dc29db..7bd092e 100644 --- a/.github/ISSUE_TEMPLATE/new-issue.md +++ b/.github/ISSUE_TEMPLATE/new-issue.md @@ -1,10 +1,9 @@ --- name: New Issue about: Create a new issue -title: '' -labels: '' -assignees: '' - +title: "" +labels: "" +assignees: "" --- **Description** @@ -14,6 +13,7 @@ A clear and concise description of what the problem is. Ex. I'm always frustrate A clear and concise description of what you want to happen. Steps: + - step 1 - step 2 diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index c932ac1..0afb38c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -43,6 +43,6 @@ jobs: # - Settings -> Secrets and variables -> New repository secret MONGO_URI: ${{ secrets.MONGO_URI }} # Add additional environment variables here - + - name: Run tests run: npm test diff --git a/.gitignore b/.gitignore index 8f322f0..a621357 100644 --- a/.gitignore +++ b/.gitignore @@ -33,3 +33,5 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +prettier.config.js \ No newline at end of file diff --git a/README.md b/README.md index e1c398a..6f59d4f 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,7 @@ A data collection platform for tree information and location - [Getting Started And Contributing](#getting-started-and-contributing) ## Overview + The Central Coast Heritage Tree Foundation focuses on the protection, preservation, and preventive healthcare for legacy and heritage oaks in the greater Templeton area. They help heritage oaks by utilizing preventive tree care, restoring soil, planting Templeton acorns, and educating the community through conversation and connection. ### Purpose @@ -37,7 +38,6 @@ The Central Coast Heritage Tree Foundation team consists of 14 Cal Poly students - [Brandon Eng](https://www.linkedin.com/) - Software Developer - [Thomas Le](https://www.linkedin.com/) - Software Developer - ## Getting Started And Contributing Visit [getting-started.md](docs/getting-started.md) on info for how to set up this repo. diff --git a/next.config.js b/next.config.js index 767719f..658404a 100644 --- a/next.config.js +++ b/next.config.js @@ -1,4 +1,4 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {} +const nextConfig = {}; -module.exports = nextConfig +module.exports = nextConfig; diff --git a/package-lock.json b/package-lock.json index 895dc1c..a5938b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,12 +12,14 @@ "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", "framer-motion": "^11.18.0", + "leaflet": "^1.9.4", "mongoose": "^8", "next": "^15.1.6", "react": "^18", "react-dom": "^18" }, "devDependencies": { + "@types/leaflet": "^1.9.16", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", @@ -1223,6 +1225,13 @@ "tslib": "^2.8.0" } }, + "node_modules/@types/geojson": { + "version": "7946.0.16", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz", + "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -1230,6 +1239,16 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/leaflet": { + "version": "1.9.16", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.16.tgz", + "integrity": "sha512-wzZoyySUxkgMZ0ihJ7IaUIblG8Rdc8AbbZKLneyn+QjYsj5q1QU7TEKYqwTr10BGSzY5LI7tJk9Ifo+mEjdFRw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/geojson": "*" + } + }, "node_modules/@types/lodash": { "version": "4.17.14", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.14.tgz", @@ -4468,6 +4487,12 @@ "node": ">=0.10" } }, + "node_modules/leaflet": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==", + "license": "BSD-2-Clause" + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", diff --git a/package.json b/package.json index 8ad6457..bfd86a7 100644 --- a/package.json +++ b/package.json @@ -17,12 +17,14 @@ "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", "framer-motion": "^11.18.0", + "leaflet": "^1.9.4", "mongoose": "^8", "next": "^15.1.6", "react": "^18", "react-dom": "^18" }, "devDependencies": { + "@types/leaflet": "^1.9.16", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", diff --git a/src/app/map/page.tsx b/src/app/map/page.tsx index e64110a..b7735be 100644 --- a/src/app/map/page.tsx +++ b/src/app/map/page.tsx @@ -1,3 +1,45 @@ +"use client"; +import { useRef, useEffect } from "react"; +import { Tree, treeData } from "./tree_data"; +import styles from "@/styles/map.module.css"; +import dynamic from "next/dynamic"; +//import leaflet in client +const L = dynamic(() => import("leaflet") as any, { + ssr: false, +}); export default function Map() { - return
Will probably be made into a component later and not a page, but go to /map to develop!
; + const mapRef = useRef(null); + useEffect(() => { + require("leaflet/dist/leaflet.css"); + const L = require("leaflet"); + const DefaultIcon = L.icon({ + iconUrl: "https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png", + shadowUrl: "https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png", + }); + L.Marker.prototype.options.icon = DefaultIcon; + //initilize the map + if (!mapRef.current) { + mapRef.current = L.map("map").setView([35.270378, -120.680656], 14.5); + L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(mapRef.current); + //add marker to map + treeData.map((tree: Tree) => { + const marker = L.marker([tree.gpsCoords[0], tree.gpsCoords[1]]).addTo(mapRef.current); + marker.bindPopup(` + ${tree.species}
+ Collected by: ${tree.collectorName}
+ Date Collected: ${tree.dateCollected.toISOString().split("T")[0]}
+ Notes: ${tree.notes || "No additional notes"} + `); + }); + } + }, []); + + return ( +
+
+ Map with 5 points +
+
+
+ ); } diff --git a/src/app/map/tree_data.ts b/src/app/map/tree_data.ts new file mode 100644 index 0000000..f28f7ce --- /dev/null +++ b/src/app/map/tree_data.ts @@ -0,0 +1,60 @@ +//temp class tree +export interface Tree { + collectorName: string; + gpsCoords: number[]; + dateCollected: Date; + photo?: string; + dbh: number; + canopyBreadth: number; + species: string; + treeCond: string[]; + notes?: string; +} +//Dummy data +export const treeData: Tree[] = [ + { + collectorName: "John Doe", + gpsCoords: [35.267763, -120.675414], + dateCollected: new Date("2025-01-25"), + dbh: 15.2, + canopyBreadth: 8.5, + species: "Quercus agrifolia", + treeCond: ["Healthy", "Mature"], + }, + { + collectorName: "Jane Smith", + gpsCoords: [35.273266, -120.680012], + dateCollected: new Date("2025-01-26"), + dbh: 10.4, + canopyBreadth: 6.3, + species: "Pinus ponderosa", + treeCond: ["Healthy", "Young"], + }, + { + collectorName: "Michael Brown", + gpsCoords: [35.276883, -120.673991], + dateCollected: new Date("2025-01-27"), + dbh: 20.8, + canopyBreadth: 12.4, + species: "Sequoia sempervirens", + treeCond: ["Healthy", "Mature", "Thriving"], + }, + { + collectorName: "Sarah Johnson", + gpsCoords: [35.276889, -120.686529], + dateCollected: new Date("2025-01-27"), + dbh: 5.9, + canopyBreadth: 3.2, + species: "Acer macrophyllum", + treeCond: ["Healthy", "Young"], + }, + { + collectorName: "Emily Davis", + gpsCoords: [35.270783, -120.674544], + dateCollected: new Date("2025-01-28"), + dbh: 25.6, + canopyBreadth: 15.7, + species: "Platanus racemosa", + treeCond: ["Healthy", "Old Growth"], + }, +]; diff --git a/src/app/treeTable/page.tsx b/src/app/treeTable/page.tsx index e5989ca..9573b00 100644 --- a/src/app/treeTable/page.tsx +++ b/src/app/treeTable/page.tsx @@ -1,3 +1,93 @@ +import { Table, Thead, Tbody, Tr, Th, Td, TableContainer, Box } from "@chakra-ui/react"; + export default function TreeTable() { - return
Will probably be made into a component later, but for now develop on /treeTable
; + // dummy tree data + const treeData = [ + { + collectorName: "Sydney Jones", + dateCollected: "2025-01-22", + contactInfo: "sjones@email.com", + gpsCoordinates: "34.0522, -118.2437", + photo: "tree1.jpg", + dbh: "15.3", + height: "25 ft", + canopyBreath: "20 ft", + species: "Valley Oak", + mistletoe: false, + epicormicGrowth: true, + deadWood: true, + oakPitScale: "no", + hangingItems: false, + additionalNotes: "Tree appears healthy overall.", + }, + { + collectorName: "Ryan Smith", + dateCollected: "2025-01-20", + contactInfo: "rsmith@example.com", + gpsCoordinates: "37.7749, -122.4194", + photo: "tree2.jpg", + dbh: "20.1", + height: "30 ft", + canopyBreath: "25 ft", + species: "Blue Oak", + mistletoe: true, + epicormicGrowth: false, + deadWood: false, + oakPitScale: true, + hangingItems: false, + additionalNotes: "Signs of stress due to drought.", + }, + ]; + + // tree table structure + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + {treeData.map((tree, index) => ( + + + + + + + + + + + + + + + + + ))} + +
Collector NameDate CollectedGPS CoordinatesPhotoDBH (inches)HeightTree Canopy BreadthSpeciesMistletoeEpicormic GrowthDead WoodOak Pit ScaleHanging ItemsAdditional Notes
{tree.collectorName}{tree.dateCollected}{tree.gpsCoordinates} + Tree + {tree.dbh}{tree.height}{tree.canopyBreath}{tree.species}{tree.mistletoe === true ? "Yes" : "No"}{tree.epicormicGrowth === true ? "Yes" : "No"}{tree.deadWood === true ? "Yes" : "No"}{tree.oakPitScale === true ? "Yes" : "No"}{tree.hangingItems === true ? "Yes" : "No"}{tree.additionalNotes}
+ + +
+ ); } diff --git a/src/styles/map.module.css b/src/styles/map.module.css new file mode 100644 index 0000000..51f8ebe --- /dev/null +++ b/src/styles/map.module.css @@ -0,0 +1,7 @@ +.MapContainer { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 100vh; +}