Skip to content

Commit

Permalink
Merge branch 'main' into 20-threads
Browse files Browse the repository at this point in the history
  • Loading branch information
GrandeJames committed Nov 9, 2023
2 parents 08e6168 + 5f7555f commit 7b30ebd
Show file tree
Hide file tree
Showing 26 changed files with 335 additions and 177 deletions.
Binary file added my-app/public/logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 5 additions & 5 deletions my-app/src/components/DashboardTable.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,12 +45,12 @@ const DashboardTable = ({ events }) => {
});

return (
<div className="overflow-x-auto bg-white">
<div className="overflow-x-auto">
<div className="flex justify-end space-x-8 mb-6 mt-6">
<div className="flex items-center">
<label className="text-gray-600 pr-2">Status:</label>
<select
className="select bg-white text-gray-500"
className="select text-gray-500"
name="status"
value={filter.status}
onChange={(e) => setFilter({ ...filter, status: e.target.value })}
Expand All @@ -67,7 +67,7 @@ const DashboardTable = ({ events }) => {
<div className="flex items-center">
<label className="text-gray-600 pr-2">Sort by Date:</label>
<select
className="select bg-white text-gray-500"
className="select text-gray-500"
name="dateSort"
value={filter.dateSort}
onChange={(e) => setFilter({ ...filter, dateSort: e.target.value })}
Expand All @@ -80,7 +80,7 @@ const DashboardTable = ({ events }) => {
<div className="flex items-center">
<label className="text-gray-600 pr-2">Island:</label>
<select
className="select bg-white text-gray-500"
className="select text-gray-500"
name="island"
value={filter.island}
onChange={(e) => setFilter({ ...filter, island: e.target.value })}
Expand All @@ -98,7 +98,7 @@ const DashboardTable = ({ events }) => {
</div>
</div>

<table className="table bg-white text-gray-600">
<table className="table text-gray-600">
<thead>
<tr className="text-gray-600">
<td className="w-56">Status</td>
Expand Down
4 changes: 2 additions & 2 deletions my-app/src/components/events/Disposal.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,14 @@ const Disposal = ({ event, userOrgId }) => {
<DisposalRow
key={sortedMaterial._id}
sortedMaterial={sortedMaterial}
eventDibsBy={event.dibsByOrgId}
removalOrgId={event.removalOrgId}
userOrgId={userOrgId}
/>
))}
</tbody>
</table>
</div>
{userOrgId === event.dibsByOrgId && (
{userOrgId === event.removalOrgId && (
<section className="flex justify-end gap-3 py-3">
{STATUS.indexOf(event.status) <= 3 ? (
<MarkAsCompleteBtn eventId={event._id} nextStatus={STATUS[4]} />
Expand Down
2 changes: 1 addition & 1 deletion my-app/src/components/events/EventReported.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const EventRemoval = ({ event }) => {
</section>
{/* show this section if the event is not claimed */}
</div>
{!event.dibsByOrgId ? (
{!event.removalOrgId ? (
<section className="flex justify-end gap-3 py-3">
<DismissBtn event={event} />
{session?.user && (
Expand Down
12 changes: 6 additions & 6 deletions my-app/src/components/events/RemovalAndStorage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@ import MarkAsCompleteBtn from "./common/MarkAsCompleteBtn";
import UndoStepBtn from "./common/UndoStepBtn";

const RemovalAndStorage = ({ event, userOrgId }) => {
// console.log("event", event.dibsByOrgId);
// console.log("event", event.removalOrgId);
// console.log("userOrgId", userOrgId);
// console.log("event === userOrgId", event.dibsByOrgId === userOrgId);
// console.log("event === userOrgId", event.removalOrgId === userOrgId);

// userOrgId === event.dibsByOrgId checks for permissions
// userOrgId === event.removalOrgId checks for permissions
return (
<EventCollapse title="Removal and Storage">
{STATUS.indexOf(event.status) > 0 ? (
<div>
{userOrgId === event.dibsByOrgId && (
{userOrgId === event.removalOrgId && (
<section className="flex md:mb-6">
<button
className="btn btn-secondary justify-self-end"
Expand Down Expand Up @@ -55,7 +55,7 @@ const RemovalAndStorage = ({ event, userOrgId }) => {
<div className="flex flex-col gap-2">
<div>
<h1 className="md:text-xl font-bold">Removed By</h1>
<p>{event.removedByOrgId ?? "-"}</p>
<p>{event.removalOrgId ?? "-"}</p>
</div>
<div>
<h1 className="md:text-xl font-bold">Removal Date/s</h1>
Expand Down Expand Up @@ -132,7 +132,7 @@ const RemovalAndStorage = ({ event, userOrgId }) => {
</div>
</>
)}
{userOrgId === event.dibsByOrgId && (
{userOrgId === event.removalOrgId && (
<section className="flex justify-end gap-3 py-3">
{/* If the event is completed only show the undo button */}
{STATUS.indexOf(event.status) <= 1 ? (
Expand Down
4 changes: 2 additions & 2 deletions my-app/src/components/events/Sorting.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const Sorting = ({ event, userOrgId }) => {
<EventCollapse title="Sorting">
{STATUS.indexOf(event.status) > 1 ? (
<>
{userOrgId === event.dibsByOrgId && (
{userOrgId === event.removalOrgId && (
<section className="flex justify-between md:mt-10">
<button
className="btn btn-secondary"
Expand Down Expand Up @@ -67,7 +67,7 @@ const Sorting = ({ event, userOrgId }) => {
</tbody>
</table>
</div>
{userOrgId === event.dibsByOrgId && (
{userOrgId === event.removalOrgId && (
<section className="flex justify-end gap-3 py-3">
{STATUS.indexOf(event.status) <= 2 ? (
<MarkAsCompleteBtn
Expand Down
4 changes: 2 additions & 2 deletions my-app/src/components/events/disposal/DisposalRow.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import PropTypes from "prop-types";
import EditDisposalModal from "./EditDisposalModal";
import DeleteSortedMaterialModal from "../common/DeleteSortedMaterialModal";

const DisposalRow = ({ sortedMaterial, userOrgId, eventDibsBy }) => {
const DisposalRow = ({ sortedMaterial, userOrgId, removalOrgId }) => {
const editModalId = `edit_disposal_modal_${sortedMaterial._id}`;
const deleteModalId = `delete_disposal_modal_${sortedMaterial._id}`;

Expand All @@ -18,7 +18,7 @@ const DisposalRow = ({ sortedMaterial, userOrgId, eventDibsBy }) => {
: "-"}
</td>
<td className="flex gap-2">
{userOrgId === eventDibsBy && (
{userOrgId === removalOrgId && (
<>
<button
className="btn btn-sm btn-outline"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const DispatchTeamBtn = ({ userOrgId, eventId }) => {
"Content-Type": "application/json",
},
body: JSON.stringify({
dibsByOrgId: userOrgId,
removalOrgId: userOrgId,
status: STATUS[1],
}),
});
Expand Down
2 changes: 1 addition & 1 deletion my-app/src/components/events/sorting/SortingRow.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const SortingRow = ({ sortedMaterial, event, userOrgId }) => {
<td>{sortedMaterial.mass}</td>
<td>{sortedMaterial.polymer}</td>
<td className="flex gap-2">
{userOrgId === event.dibsByOrgId && (
{userOrgId === event.removalOrgId && (
<>
<button
className="btn btn-outline btn-sm"
Expand Down
109 changes: 91 additions & 18 deletions my-app/src/components/map/LocationAggregatorMap.jsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,32 @@
// components/Map.jsx
import React from "react";
import React, { useCallback, useState } from "react";
import Map from "react-map-gl";
import { HexagonLayer } from "@deck.gl/aggregation-layers";
import DeckGL from "@deck.gl/react";
import "mapbox-gl/dist/mapbox-gl.css";
import PropTypes from "prop-types";
import { FlyToInterpolator } from "deck.gl";

// import map config
import {
lightingEffect,
material,
INITIAL_VIEW_STATE,
colorRange,
} from "@/lib/mapconfig";
import { ISLANDS_CENTER_COORDINATES } from "@/constants/constants";

const LocationAggregatorMap = ({ upperPercentile = 100, coverage = 1, data }) => {
const LocationAggregatorMap = ({
upperPercentile = 100,
coverage = 1,
data,
}) => {
const layers = [
new HexagonLayer({
id: "heatmap",
colorRange,
coverage,
data,
elevationRange: [0, 400],
elevationRange: [0, 10],
elevationScale: data && data.length ? 50 : 0,
extruded: true,
getPosition: (d) => d.COORDINATES,
Expand All @@ -31,27 +36,95 @@ const LocationAggregatorMap = ({ upperPercentile = 100, coverage = 1, data }) =>
material,

transitions: {
elevationScale: 400,
elevationScale: 10,
},
}),
// new HeatmapLayer({
// data,
// id: 'heatmp-layer',
// pickable: false,
// getPosition: d => [d[0], d[1]],
// getWeight: d => d[2],
// radiusPixels: 30,
// intensity: 1,
// threshold: 0.03
// })

];
const [initialViewState, setInitialViewState] = useState({
longitude: -157,
latitude: 21,
zoom: 5.6,
bearing: 0,
pitch: 40.5,
});

const onSelectIsland = useCallback(({ longitude, latitude, zoom }) => {
setInitialViewState({
longitude: longitude,
latitude: latitude,
zoom: zoom,
pitch: 40.5,
bearing: 0,
transitionDuration: 1000,
transitionInterpolator: new FlyToInterpolator(),
});
}, []);

function getTooltip({object}) {
if (!object) {
return null;
}
const lat = object.position[1];
const lng = object.position[0];
const count = object.points.length;

return `\
latitude: ${Number.isFinite(lat) ? lat.toFixed(6) : ''}
longitude: ${Number.isFinite(lng) ? lng.toFixed(6) : ''}
${count} Reports`;
}

return (
<div>
<DeckGL
style={{ width: "600px", height: "400px" }}
layers={layers}
effects={[lightingEffect]}
initialViewState={INITIAL_VIEW_STATE}
controller={true}
>
<Map
reuseMaps
<div className="h-[400px] w-full relative">
<DeckGL
style={{ width: "100%", height: "100%" }}
layers={layers}
effects={[lightingEffect]}
initialViewState={initialViewState}
controller={true}
mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_TOKEN}
mapStyle="mapbox://styles/mapbox/dark-v10"
></Map>
</DeckGL>
getTooltip={getTooltip}
>
<Map
reuseMaps
style={{ width: "100%", height: "100%" }}
controller={true}
mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_TOKEN}
mapStyle="mapbox://styles/mapbox/dark-v10"
/>
</DeckGL>
</div>
<select
className="select select-bordered"
onChange={(e) => {
const mapInfo = JSON.parse(e.target.value);
onSelectIsland({
longitude: mapInfo.long,
latitude: mapInfo.lat,
zoom: mapInfo.zoom
})
}}
>
<option disabled>
Select an Island
</option>
{Object.values(ISLANDS_CENTER_COORDINATES).map((island) => (
<option key={island.name} value={JSON.stringify(island.mapInfo)}>
{island.name}
</option>
))}
</select>
</div>
);
};
Expand Down
7 changes: 4 additions & 3 deletions my-app/src/components/my-organization/OrgMemberTable.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { TrashIcon, PencilIcon } from "@heroicons/react/24/solid";
import DeleteMembersModal from "./DeleteMembersModal";
import { useSession } from "next-auth/react";
import { useState } from "react";
import { ROLES } from "@/roles/roles";

const OrgMemberTable = ({ members }) => {
const { data: session, status } = useSession();
Expand Down Expand Up @@ -50,16 +51,16 @@ const OrgMemberTable = ({ members }) => {
};

return (
<div className="overflow-x-auto bg-white">
<table className="table bg-white text-gray-600">
<div className="overflow-x-auto">
<table className="table mt-6 text-gray-600">
<thead>
<tr className="text-gray-600">
<td></td>
<th>First Name</th>
<th>Last Name</th>
<td>Email</td>
<td>Role</td>
{session?.user.role !== "org_member" && <td></td>}
{session?.user.role !== ROLES.ORG_MEMBER && <td></td>}
</tr>
</thead>
<tbody>
Expand Down
Loading

0 comments on commit 7b30ebd

Please sign in to comment.