diff --git a/client/app.css b/client/app.css index 8a90c80..63eab6b 100644 --- a/client/app.css +++ b/client/app.css @@ -2,4 +2,37 @@ @tailwind components; -@tailwind utilities; \ No newline at end of file +@tailwind utilities; + +.leaflet-container { + height: 100%; + width: 100%; +} + +.info { + padding: 6px 8px; + font: 14px/16px Arial, Helvetica, sans-serif; + background: white; + background: rgba(255, 255, 255, 0.8); + box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); + border-radius: 5px; +} + +.info h4 { + margin: 0 0 5px; + color: #777; +} + +.legend { + text-align: left; + line-height: 18px; + color: #555; +} + +.legend i { + width: 18px; + height: 18px; + float: left; + margin-right: 8px; + opacity: 0.7; +} diff --git a/client/app.jsx b/client/app.jsx index c92df86..e69b297 100644 --- a/client/app.jsx +++ b/client/app.jsx @@ -7,7 +7,9 @@ import { useApi } from './utils/use_api'; import { useJwtRefresh } from './utils/use_jwt_refresh'; import { RolesContext } from './utils/roles_context'; import { parseJwt } from './utils/parse_jwt'; +import { Toaster } from 'react-hot-toast'; import './app.css'; +import 'leaflet/dist/leaflet.css'; export const App = () => { const [authToken, setAuthToken] = useState(null); @@ -38,6 +40,7 @@ export const App = () => { + diff --git a/client/components/home/_home.jsx b/client/components/home/_home.jsx index 405a968..7ef051c 100644 --- a/client/components/home/_home.jsx +++ b/client/components/home/_home.jsx @@ -4,6 +4,7 @@ import { ApiContext } from '../../utils/api_context'; import { AuthContext } from '../../utils/auth_context'; import { RolesContext } from '../../utils/roles_context'; import { Button } from '../common/button'; +import { Map } from '../map/_map'; import { Ping } from './ping'; export const Home = () => { @@ -33,19 +34,19 @@ export const Home = () => { } return ( -
-

Welcome {user.firstName}

- - {roles.includes('admin') && ( - - )} -
- -
-
+ {roles.includes('admin') && ( + + )} + + + ); }; diff --git a/client/components/map/_map.jsx b/client/components/map/_map.jsx new file mode 100644 index 0000000..9f6684c --- /dev/null +++ b/client/components/map/_map.jsx @@ -0,0 +1,47 @@ +import { MapContainer, TileLayer } from 'react-leaflet'; +import '@geoman-io/leaflet-geoman-free'; +import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'; +import Geoman from './chat_room_geoman'; +import { useEffect, useState } from 'react'; +import toast from 'react-hot-toast'; +import { Legend } from './legend'; + +export const Map = ({ user, zoom }) => { + const [loading, setLoading] = useState(true); + const [position, setPosition] = useState({}); + const [positionWatcher, setPositionWatcher] = useState(); + + zoom = zoom || 18; + + useEffect(() => { + if (user) { + setPositionWatcher( + navigator.geolocation.getCurrentPosition( + (pos) => { + const { latitude: lat, longitude: lng } = pos.coords; + setPosition({ lat, lng }); + setLoading(false); + }, + (err) => { + toast.error(err.message); + }, + ), + ); + } + }, [user]); + + if (!loading) { + return ( + + + + + + ); + } + return
Getting current location...
; +}; diff --git a/client/components/map/chat_room_geoman.jsx b/client/components/map/chat_room_geoman.jsx new file mode 100644 index 0000000..7806908 --- /dev/null +++ b/client/components/map/chat_room_geoman.jsx @@ -0,0 +1,175 @@ +import { useLeafletContext } from '@react-leaflet/core'; +import L from 'leaflet'; +import markerIconPng from 'leaflet/dist/images/marker-icon.png'; +import { useEffect, useContext } from 'react'; +import { ApiContext } from '../../utils/api_context'; +import { AuthContext } from '../../utils/auth_context'; + +const userPositionBubble = { + color: 'black', + fillColor: 'black', + fillOpacity: 0.6, + weight: 5, + pmIgnore: true, + radius: 5, +}; + +const joinable = { + color: 'green', + weight: 1, + pmIgnore: true, +}; + +const unjoinable = { + color: 'red', + weight: 1, + pmIgnore: true, +}; + +const editable = { + color: 'blue', + weight: 1, + pmIgnore: false, +}; + +const icon = new L.Icon({ iconUrl: markerIconPng, iconSize: [25, 41], iconAnchor: [12, 41] }); + +const haversine = (p1, p2) => { + const degreesToRadians = (degrees) => degrees * (Math.PI / 180); + const delta = { lat: degreesToRadians(p2.lat - p1.lat), lng: degreesToRadians(p2.lng - p1.lng) }; + const a = + Math.sin(delta.lat / 2) * Math.sin(delta.lat / 2) + + Math.cos(degreesToRadians(p1.lat)) * + Math.cos(degreesToRadians(p2.lat)) * + Math.sin(delta.lng / 2) * + Math.sin(delta.lng / 2); + const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); + const r = 6371 * 1000; + return r * c; +}; + +// GeoMan code is heavily adapted from this codesandbox: https://codesandbox.io/s/394eq +export const Geoman = ({ user, userPos, joinRoom }) => { + const context = useLeafletContext(); + const api = useContext(ApiContext); + const circleAndMarkerFromChatroom = (chatRoom) => { + const circle = new L.Circle(chatRoom.center, chatRoom.radius); + const marker = new L.Marker(chatRoom.center, { pmIgnore: !chatRoom.isEditable, icon }); + circle.setStyle( + chatRoom.isEditable + ? editable + : haversine(userPos, { lat: chatRoom.latitude, lng: chatRoom.longitude }) < chatRoom.radius + ? joinable + : unjoinable, + ); + marker.addEventListener('click', () => { + console.log(chatRoom.id); + console.log(haversine(userPos, { lat: chatRoom.latitude, lng: chatRoom.longitude }), chatRoom.radius, userPos); + }); + if (!!chatRoom.isEditable) { + [circle, marker].map((x) => { + x.on('pm:edit', (e) => { + const coords = e.target.getLatLng(); + marker.setLatLng(coords); + circle.setLatLng(coords); + api.put(`/chat_rooms/${chatRoom.id}`, { + ...chatRoom, + latitude: coords.lat, + longitude: coords.lng, + }); + }); + x.on('pm:remove', (e) => { + context.map.removeLayer(marker); + context.map.removeLayer(circle); + + api.del(`/chat_rooms/${chatRoom.id}`); + }); + }); + circle.on('pm:drag', (e) => { + marker.setLatLng(e.target.getLatLng()); + }); + marker.on('pm:drag', (e) => { + circle.setLatLng(e.target.getLatLng()); + }); + } + [circle, marker].map((x) => x.addTo(context.map)); + return [circle, marker]; + }; + + const reRender = async () => { + const layersToRemove = []; + context.map.eachLayer((layer) => { + if (layer instanceof L.Circle || layer instanceof L.Marker) { + layersToRemove.push(layer); + } + }); + + const res = await api.get(`/chat_rooms?lat=${userPos.lat}&lng=${userPos.lng}`); + res.map((x) => { + circleAndMarkerFromChatroom({ + center: [x.latitude, x.longitude], + ...x, + isEditable: user && x.userId == user.id, + }); + }); + layersToRemove.map((x) => context.map.removeLayer(x)); + + const userLocationCircle = new L.Circle(userPos, 5); + userLocationCircle.setStyle(userPositionBubble); + userLocationCircle.addTo(context.map); + }; + + useEffect(() => { + if (context) { + reRender(); + } + }, [userPos]); + + useEffect(() => { + const leafletContainer = context.layerContainer || context.map; + leafletContainer.pm.addControls({ + drawMarker: false, + editControls: true, + dragMode: true, + cutPolygon: false, + removalMode: true, + rotateMode: false, + splitMode: false, + drawPolyline: false, + drawRectangle: false, + drawPolygon: false, + drawCircleMarker: false, + }); + + leafletContainer.pm.setGlobalOptions({ pmIgnore: false }); + + leafletContainer.on('pm:create', async (e) => { + if (e.layer && e.layer.pm) { + const shape = e; + context.map.removeLayer(shape.layer); + + const { lat: latitude, lng: longitude } = shape.layer.getLatLng(); + const chatRoom = await api.post('/chat_rooms', { + latitude, + longitude, + radius: shape.layer.getRadius(), + }); + reRender(); + } + }); + + leafletContainer.on('pm:remove', (e) => { + console.log('object removed'); + // console.log(leafletContainer.pm.getGeomanLayers(true).toGeoJSON()); + }); + + return () => { + leafletContainer.pm.removeControls(); + leafletContainer.pm.setGlobalOptions({ pmIgnore: true }); + }; + }, [context]); + + return null; +}; + +export default Geoman; diff --git a/client/components/map/legend.jsx b/client/components/map/legend.jsx new file mode 100644 index 0000000..ebd199d --- /dev/null +++ b/client/components/map/legend.jsx @@ -0,0 +1,28 @@ +import L from 'leaflet'; +import { useEffect } from 'react'; +import { useLeafletContext } from '@react-leaflet/core'; + +export const Legend = () => { + const context = useLeafletContext(); + useEffect(() => { + const legend = L.control({ position: 'topright' }); + + legend.onAdd = () => { + const div = L.DomUtil.create('div', 'info legend'); + let labels = []; + + labels.push('Current position'); + labels.push('Unjoinable'); + labels.push('Joinable'); + labels.push('Editable'); + + div.innerHTML = labels.join('
'); + return div; + }; + + const { map } = context; + legend.addTo(map); + }, [context]); + + return null; +}; diff --git a/client/components/router.jsx b/client/components/router.jsx index 08bb41f..544a15f 100644 --- a/client/components/router.jsx +++ b/client/components/router.jsx @@ -5,6 +5,7 @@ import { AuthContext } from '../utils/auth_context'; import { SignIn } from './sign_in/_sign_in'; import { SignUp } from './sign_up/_sign_up'; import { Admin } from './admin/_admin'; +import { Map } from './map/_map'; export const Router = () => { const [authToken] = useContext(AuthContext); @@ -18,6 +19,7 @@ export const Router = () => { } /> } /> } /> + } /> ); }; diff --git a/client/files/marker.png b/client/files/marker.png new file mode 100644 index 0000000..ec898df Binary files /dev/null and b/client/files/marker.png differ diff --git a/client/package.json b/client/package.json index 6dd0978..75e8bf0 100644 --- a/client/package.json +++ b/client/package.json @@ -15,8 +15,12 @@ "tailwindcss": "^2.2.19" }, "dependencies": { + "@geoman-io/leaflet-geoman-free": "^2.11.4", + "leaflet": "^1.7.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-hot-toast": "^2.2.0", + "react-leaflet": "^3.2.5", "react-router-dom": "6", "socket.io-client": "^4.4.1" } diff --git a/client/yarn.lock b/client/yarn.lock index ce2984f..801b087 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -30,6 +30,18 @@ dependencies: regenerator-runtime "^0.13.4" +"@geoman-io/leaflet-geoman-free@^2.11.4": + version "2.11.4" + resolved "https://registry.yarnpkg.com/@geoman-io/leaflet-geoman-free/-/leaflet-geoman-free-2.11.4.tgz#4a43fa8d3d5d2bca751135b775c19c6cc0063699" + integrity sha512-uWfgaGDhrtoCMHdHi2oNVKb8WXFMQvyNnan1sS/+Yn5jMPuhijWFyAjy0G5kTCamXhGXg4vUvlEpiRSrBwewKg== + dependencies: + "@turf/boolean-contains" "^6.5.0" + "@turf/kinks" "^6.5.0" + "@turf/line-intersect" "^6.5.0" + "@turf/line-split" "^6.5.0" + lodash "4.17.21" + polygon-clipping "0.15.3" + "@nodelib/fs.scandir@2.1.5": version "2.1.5" resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5" @@ -603,6 +615,11 @@ chrome-trace-event "^1.0.2" nullthrows "^1.1.1" +"@react-leaflet/core@^1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-1.1.1.tgz#827fd05bb542cf874116176d8ef48d5b12163f81" + integrity sha512-7PGLWa9MZ5x/cWy8EH2VzI4T8q5WpuHbixzCDXqixP/WyqwIrg5NDUPgYuFnB4IEIZF+6nA265mYzswFo/h1Pw== + "@socket.io/base64-arraybuffer@~1.0.2": version "1.0.2" resolved "https://registry.yarnpkg.com/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#568d9beae00b0d835f4f8c53fd55714986492e61" @@ -623,6 +640,161 @@ resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad" integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA== +"@turf/bbox@*", "@turf/bbox@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@turf/bbox/-/bbox-6.5.0.tgz#bec30a744019eae420dac9ea46fb75caa44d8dc5" + integrity sha512-RBbLaao5hXTYyyg577iuMtDB8ehxMlUqHEJiMs8jT1GHkFhr6sYre3lmLsPeYEi/ZKj5TP5tt7fkzNdJ4GIVyw== + dependencies: + "@turf/helpers" "^6.5.0" + "@turf/meta" "^6.5.0" + +"@turf/bearing@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@turf/bearing/-/bearing-6.5.0.tgz#462a053c6c644434bdb636b39f8f43fb0cd857b0" + integrity sha512-dxINYhIEMzgDOztyMZc20I7ssYVNEpSv04VbMo5YPQsqa80KO3TFvbuCahMsCAW5z8Tncc8dwBlEFrmRjJG33A== + dependencies: + "@turf/helpers" "^6.5.0" + "@turf/invariant" "^6.5.0" + +"@turf/boolean-contains@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@turf/boolean-contains/-/boolean-contains-6.5.0.tgz#f802e7432fb53109242d5bf57393ef2f53849bbf" + integrity sha512-4m8cJpbw+YQcKVGi8y0cHhBUnYT+QRfx6wzM4GI1IdtYH3p4oh/DOBJKrepQyiDzFDaNIjxuWXBh0ai1zVwOQQ== + dependencies: + "@turf/bbox" "^6.5.0" + "@turf/boolean-point-in-polygon" "^6.5.0" + "@turf/boolean-point-on-line" "^6.5.0" + "@turf/helpers" "^6.5.0" + "@turf/invariant" "^6.5.0" + +"@turf/boolean-point-in-polygon@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-6.5.0.tgz#6d2e9c89de4cd2e4365004c1e51490b7795a63cf" + integrity sha512-DtSuVFB26SI+hj0SjrvXowGTUCHlgevPAIsukssW6BG5MlNSBQAo70wpICBNJL6RjukXg8d2eXaAWuD/CqL00A== + dependencies: + "@turf/helpers" "^6.5.0" + "@turf/invariant" "^6.5.0" + +"@turf/boolean-point-on-line@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@turf/boolean-point-on-line/-/boolean-point-on-line-6.5.0.tgz#a8efa7bad88760676f395afb9980746bc5b376e9" + integrity sha512-A1BbuQ0LceLHvq7F/P7w3QvfpmZqbmViIUPHdNLvZimFNLo4e6IQunmzbe+8aSStH9QRZm3VOflyvNeXvvpZEQ== + dependencies: + "@turf/helpers" "^6.5.0" + "@turf/invariant" "^6.5.0" + +"@turf/destination@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@turf/destination/-/destination-6.5.0.tgz#30a84702f9677d076130e0440d3223ae503fdae1" + integrity sha512-4cnWQlNC8d1tItOz9B4pmJdWpXqS0vEvv65bI/Pj/genJnsL7evI0/Xw42RvEGROS481MPiU80xzvwxEvhQiMQ== + dependencies: + "@turf/helpers" "^6.5.0" + "@turf/invariant" "^6.5.0" + +"@turf/distance@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@turf/distance/-/distance-6.5.0.tgz#21f04d5f86e864d54e2abde16f35c15b4f36149a" + integrity sha512-xzykSLfoURec5qvQJcfifw/1mJa+5UwByZZ5TZ8iaqjGYN0vomhV9aiSLeYdUGtYRESZ+DYC/OzY+4RclZYgMg== + dependencies: + "@turf/helpers" "^6.5.0" + "@turf/invariant" "^6.5.0" + +"@turf/helpers@6.x", "@turf/helpers@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@turf/helpers/-/helpers-6.5.0.tgz#f79af094bd6b8ce7ed2bd3e089a8493ee6cae82e" + integrity sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw== + +"@turf/invariant@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@turf/invariant/-/invariant-6.5.0.tgz#970afc988023e39c7ccab2341bd06979ddc7463f" + integrity sha512-Wv8PRNCtPD31UVbdJE/KVAWKe7l6US+lJItRR/HOEW3eh+U/JwRCSUl/KZ7bmjM/C+zLNoreM2TU6OoLACs4eg== + dependencies: + "@turf/helpers" "^6.5.0" + +"@turf/kinks@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@turf/kinks/-/kinks-6.5.0.tgz#80e7456367535365012f658cf1a988b39a2c920b" + integrity sha512-ViCngdPt1eEL7hYUHR2eHR662GvCgTc35ZJFaNR6kRtr6D8plLaDju0FILeFFWSc+o8e3fwxZEJKmFj9IzPiIQ== + dependencies: + "@turf/helpers" "^6.5.0" + +"@turf/line-intersect@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@turf/line-intersect/-/line-intersect-6.5.0.tgz#dea48348b30c093715d2195d2dd7524aee4cf020" + integrity sha512-CS6R1tZvVQD390G9Ea4pmpM6mJGPWoL82jD46y0q1KSor9s6HupMIo1kY4Ny+AEYQl9jd21V3Scz20eldpbTVA== + dependencies: + "@turf/helpers" "^6.5.0" + "@turf/invariant" "^6.5.0" + "@turf/line-segment" "^6.5.0" + "@turf/meta" "^6.5.0" + geojson-rbush "3.x" + +"@turf/line-segment@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@turf/line-segment/-/line-segment-6.5.0.tgz#ee73f3ffcb7c956203b64ed966d96af380a4dd65" + integrity sha512-jI625Ho4jSuJESNq66Mmi290ZJ5pPZiQZruPVpmHkUw257Pew0alMmb6YrqYNnLUuiVVONxAAKXUVeeUGtycfw== + dependencies: + "@turf/helpers" "^6.5.0" + "@turf/invariant" "^6.5.0" + "@turf/meta" "^6.5.0" + +"@turf/line-split@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@turf/line-split/-/line-split-6.5.0.tgz#116d7fbf714457878225187f5820ef98db7b02c2" + integrity sha512-/rwUMVr9OI2ccJjw7/6eTN53URtGThNSD5I0GgxyFXMtxWiloRJ9MTff8jBbtPWrRka/Sh2GkwucVRAEakx9Sw== + dependencies: + "@turf/bbox" "^6.5.0" + "@turf/helpers" "^6.5.0" + "@turf/invariant" "^6.5.0" + "@turf/line-intersect" "^6.5.0" + "@turf/line-segment" "^6.5.0" + "@turf/meta" "^6.5.0" + "@turf/nearest-point-on-line" "^6.5.0" + "@turf/square" "^6.5.0" + "@turf/truncate" "^6.5.0" + geojson-rbush "3.x" + +"@turf/meta@6.x", "@turf/meta@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@turf/meta/-/meta-6.5.0.tgz#b725c3653c9f432133eaa04d3421f7e51e0418ca" + integrity sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA== + dependencies: + "@turf/helpers" "^6.5.0" + +"@turf/nearest-point-on-line@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@turf/nearest-point-on-line/-/nearest-point-on-line-6.5.0.tgz#8e1cd2cdc0b5acaf4c8d8b3b33bb008d3cb99e7b" + integrity sha512-WthrvddddvmymnC+Vf7BrkHGbDOUu6Z3/6bFYUGv1kxw8tiZ6n83/VG6kHz4poHOfS0RaNflzXSkmCi64fLBlg== + dependencies: + "@turf/bearing" "^6.5.0" + "@turf/destination" "^6.5.0" + "@turf/distance" "^6.5.0" + "@turf/helpers" "^6.5.0" + "@turf/invariant" "^6.5.0" + "@turf/line-intersect" "^6.5.0" + "@turf/meta" "^6.5.0" + +"@turf/square@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@turf/square/-/square-6.5.0.tgz#ab43eef99d39c36157ab5b80416bbeba1f6b2122" + integrity sha512-BM2UyWDmiuHCadVhHXKIx5CQQbNCpOxB6S/aCNOCLbhCeypKX5Q0Aosc5YcmCJgkwO5BERCC6Ee7NMbNB2vHmQ== + dependencies: + "@turf/distance" "^6.5.0" + "@turf/helpers" "^6.5.0" + +"@turf/truncate@^6.5.0": + version "6.5.0" + resolved "https://registry.yarnpkg.com/@turf/truncate/-/truncate-6.5.0.tgz#c3a16cad959f1be1c5156157d5555c64b19185d8" + integrity sha512-pFxg71pLk+eJj134Z9yUoRhIi8vqnnKvCYwdT4x/DQl/19RVdq1tV3yqOT3gcTQNfniteylL5qV1uTBDV5sgrg== + dependencies: + "@turf/helpers" "^6.5.0" + "@turf/meta" "^6.5.0" + +"@types/geojson@7946.0.8": + version "7946.0.8" + resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.8.tgz#30744afdb385e2945e22f3b033f897f76b1f12ca" + integrity sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA== + "@types/parse-json@^4.0.0": version "4.0.0" resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0" @@ -1188,6 +1360,17 @@ function-bind@^1.1.1: resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== +geojson-rbush@3.x: + version "3.2.0" + resolved "https://registry.yarnpkg.com/geojson-rbush/-/geojson-rbush-3.2.0.tgz#8b543cf0d56f99b78faf1da52bb66acad6dfc290" + integrity sha512-oVltQTXolxvsz1sZnutlSuLDEcQAKYC/uXt9zDzJJ6bu0W+baTI8LZBaTup5afzibEH4N3jlq2p+a152wlBJ7w== + dependencies: + "@turf/bbox" "*" + "@turf/helpers" "6.x" + "@turf/meta" "6.x" + "@types/geojson" "7946.0.8" + rbush "^3.0.1" + get-port@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/get-port/-/get-port-4.2.0.tgz#e37368b1e863b7629c43c5a323625f95cf24b119" @@ -1226,6 +1409,11 @@ globals@^13.2.0: dependencies: type-fest "^0.20.2" +goober@^2.1.1: + version "2.1.8" + resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.8.tgz#e592c04d093cb38f77b38cfcb012b7811c85765e" + integrity sha512-S0C85gCzcfFCMSdjD/CxyQMt1rbf2qEg6hmDzxk2FfD7+7Ogk55m8ZFUMtqNaZM4VVX/qaU9AzSORG+Gf4ZpAQ== + graceful-fs@^4.1.6, graceful-fs@^4.2.0: version "4.2.8" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a" @@ -1423,6 +1611,11 @@ jsonfile@^6.0.1: optionalDependencies: graceful-fs "^4.1.6" +leaflet@^1.7.1: + version "1.7.1" + resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.7.1.tgz#10d684916edfe1bf41d688a3b97127c0322a2a19" + integrity sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw== + lilconfig@^2.0.3: version "2.0.4" resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.4.tgz#f4507d043d7058b380b6a8f5cb7bcd4b34cee082" @@ -1459,7 +1652,7 @@ lodash.uniq@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= -lodash@^4.17.21: +lodash@4.17.21, lodash@^4.17.21: version "4.17.21" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== @@ -1684,6 +1877,13 @@ picomatch@^2.2.3: resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== +polygon-clipping@0.15.3: + version "0.15.3" + resolved "https://registry.yarnpkg.com/polygon-clipping/-/polygon-clipping-0.15.3.tgz#0215840438470ba2e9e6593625e4ea5c1087b4b7" + integrity sha512-ho0Xx5DLkgxRx/+n4O74XyJ67DcyN3Tu9bGYKsnTukGAW6ssnuak6Mwcyb1wHy9MZc9xsUWqIoiazkZB5weECg== + dependencies: + splaytree "^3.1.0" + postcss-calc@^8.2.0: version "8.2.4" resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-8.2.4.tgz#77b9c29bfcbe8a07ff6693dc87050828889739a5" @@ -2002,6 +2202,18 @@ quick-lru@^5.1.1: resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932" integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA== +quickselect@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/quickselect/-/quickselect-2.0.0.tgz#f19680a486a5eefb581303e023e98faaf25dd018" + integrity sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw== + +rbush@^3.0.1: + version "3.0.1" + resolved "https://registry.yarnpkg.com/rbush/-/rbush-3.0.1.tgz#5fafa8a79b3b9afdfe5008403a720cc1de882ecf" + integrity sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w== + dependencies: + quickselect "^2.0.0" + react-dom@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" @@ -2011,6 +2223,20 @@ react-dom@^17.0.2: object-assign "^4.1.1" scheduler "^0.20.2" +react-hot-toast@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.2.0.tgz#ab6f4caed4214b9534f94bb8cfaaf21b051e62b9" + integrity sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g== + dependencies: + goober "^2.1.1" + +react-leaflet@^3.2.5: + version "3.2.5" + resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-3.2.5.tgz#bec0bfab9dd8c2b030ea630f7a0687a60322ca7d" + integrity sha512-Z3KZ+4SijsRbbrt2I1a3ZDY6+V6Pm91eYTdxTN18G6IOkFRsJo1BuSPLFnyFrlF3WDjQFPEcTPkEgD1VEeAoBg== + dependencies: + "@react-leaflet/core" "^1.1.1" + react-refresh@^0.9.0: version "0.9.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.9.0.tgz#71863337adc3e5c2f8a6bfddd12ae3bfe32aafbf" @@ -2179,6 +2405,11 @@ source-map@~0.7.2: resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383" integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ== +splaytree@^3.1.0: + version "3.1.1" + resolved "https://registry.yarnpkg.com/splaytree/-/splaytree-3.1.1.tgz#e1bc8e68e64ef5a9d5f09d36e6d9f3621795a438" + integrity sha512-9FaQ18FF0+sZc/ieEeXHt+Jw2eSpUgUtTLDYB/HXKWvhYVyOc7h1hzkn5MMO3GPib9MmXG1go8+OsBBzs/NMww== + stable@^0.1.8: version "0.1.8" resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf" diff --git a/server/app.module.ts b/server/app.module.ts index bbc3c1c..5fc4654 100644 --- a/server/app.module.ts +++ b/server/app.module.ts @@ -3,17 +3,19 @@ import { APP_GUARD } from '@nestjs/core'; import { TypeOrmModule } from '@nestjs/typeorm'; import { AppController } from './app.controller'; import { config } from './database/config'; +import { ChatRoomModule } from './modules/chat_room.module'; import { UsersModule } from './modules/users.module'; import { PingGateway } from './providers/gateways/ping.gateway'; import { AuthGuard } from './providers/guards/auth.guard'; import { RolesGuard } from './providers/guards/roles.guard'; +import { ChatRoomService } from './providers/services/chat_room.service'; import { JwtService } from './providers/services/jwt.service'; import { RolesService } from './providers/services/roles.service'; import { UsersService } from './providers/services/users.service'; import { GuardUtil } from './providers/util/guard.util'; @Module({ - imports: [TypeOrmModule.forRoot(config), UsersModule], + imports: [TypeOrmModule.forRoot(config), UsersModule, ChatRoomModule], controllers: [AppController], providers: [ PingGateway, @@ -21,6 +23,7 @@ import { GuardUtil } from './providers/util/guard.util'; RolesService, JwtService, GuardUtil, + ChatRoomService, { provide: APP_GUARD, useClass: AuthGuard }, // auth guard should come before roles guard { provide: APP_GUARD, useClass: RolesGuard }, // otherwise users won't be authenticated before roles check ], diff --git a/server/controllers/chat_room.controller.ts b/server/controllers/chat_room.controller.ts index 5a8da66..bd9ba4a 100644 --- a/server/controllers/chat_room.controller.ts +++ b/server/controllers/chat_room.controller.ts @@ -1,12 +1,55 @@ -import { Controller, Get } from '@nestjs/common'; +import { Body, Controller, Delete, Get, Param, Post, Put, Query } from '@nestjs/common'; +import { JwtBody } from 'server/decorators/jwt_body.decorator'; +import { JwtBodyDto } from 'server/dto/jwt_body.dto'; import { ChatRoomService } from 'server/providers/services/chat_room.service'; +import { UsersService } from 'server/providers/services/users.service'; @Controller() export class ChatRoomController { - constructor(private chatRoomService: ChatRoomService) {} + constructor(private chatRoomService: ChatRoomService, private usersService: UsersService) {} @Get('/chat_rooms') - async get() { - return await this.chatRoomService.all(); + async get(@Query() query: any) { + console.log(query); + return await this.chatRoomService.near(query); + } + + @Post('/chat_rooms') + async create(@JwtBody() jwtBody: JwtBodyDto, @Body() chatRoom: any) { + chatRoom.user = await this.usersService.find(jwtBody.userId); + console.log(jwtBody); + return await this.chatRoomService.create(chatRoom); + } + + private async authorized(jwtBody: JwtBodyDto, chatRoom: any) { + const user = await this.usersService.find(jwtBody.userId); + if (user.id !== chatRoom.user.id) { + return { + error: 'You are not the owner of this chat room', + }; + } + return true; + } + + @Put('/chat_rooms/:id') + async update(@JwtBody() jwtBody: JwtBodyDto, @Param('id') id: number, @Body() chatRoom: any) { + console.log(id); + const chat_room = await this.chatRoomService.findById(id, ['user']); + if (!(await this.authorized(jwtBody, chat_room))) { + return chat_room; + } + chat_room.latitude = chatRoom.latitude; + chat_room.longitude = chatRoom.longitude; + chat_room.radius = chatRoom.radius; + return await this.chatRoomService.save(chat_room); + } + + @Delete('/chat_rooms/:id') + async delete(@JwtBody() jwtBody: JwtBodyDto, @Param('id') id: number) { + const chat_room = await this.chatRoomService.findById(id, ['user']); + if (!(await this.authorized(jwtBody, chat_room))) { + return false; + } + return await this.chatRoomService.remove(chat_room); } } diff --git a/server/controllers/users.controller.ts b/server/controllers/users.controller.ts index 652b5b6..82d6215 100644 --- a/server/controllers/users.controller.ts +++ b/server/controllers/users.controller.ts @@ -35,6 +35,7 @@ export class UsersController { @Get('/users/me') async getCurrentUser(@JwtBody() jwtBody: JwtBodyDto) { const user = await this.usersService.find(jwtBody.userId); + delete user.passwordHash; return { user }; } diff --git a/server/database/migrations/1648605030863-AddChatRoom.ts b/server/database/migrations/1648605030863-AddChatRoom.ts index d8eed52..e4b5ca9 100644 --- a/server/database/migrations/1648605030863-AddChatRoom.ts +++ b/server/database/migrations/1648605030863-AddChatRoom.ts @@ -1,10 +1,10 @@ -import { MigrationInterface, QueryRunner, Table } from 'typeorm'; +import { MigrationInterface, QueryRunner, Table, TableForeignKey } from 'typeorm'; export class AddChatRoom1648605030863 implements MigrationInterface { public async up(queryRunner: QueryRunner): Promise { await queryRunner.createTable( new Table({ - name: 'chatroom', + name: 'chat_room', columns: [ { name: 'id', @@ -13,8 +13,8 @@ export class AddChatRoom1648605030863 implements MigrationInterface { isGenerated: true, }, { - name: 'name', - type: 'text', + name: 'userId', + type: 'int', isNullable: false, }, { @@ -35,9 +35,19 @@ export class AddChatRoom1648605030863 implements MigrationInterface { ], }), ); + + await queryRunner.createForeignKey( + 'chat_room', + new TableForeignKey({ + columnNames: ['userId'], + referencedColumnNames: ['id'], + referencedTableName: 'user', + onDelete: 'CASCADE', + }), + ); } public async down(queryRunner: QueryRunner): Promise { - await queryRunner.dropTable('chatroom'); + await queryRunner.dropTable('chat_room'); } } diff --git a/server/database/migrations/1648669551959-AddDistanceFunction.ts b/server/database/migrations/1648669551959-AddDistanceFunction.ts new file mode 100644 index 0000000..0890936 --- /dev/null +++ b/server/database/migrations/1648669551959-AddDistanceFunction.ts @@ -0,0 +1,45 @@ +import { MigrationInterface, QueryRunner } from 'typeorm'; + +export class AddDistanceFunction1648669551959 implements MigrationInterface { + public async up(queryRunner: QueryRunner): Promise { + // From https://stackoverflow.com/questions/61135374/postgresql-calculate-distance-between-two-points-without-using-postgis + await queryRunner.query(` +CREATE OR REPLACE FUNCTION calculate_distance(lat1 float, lon1 float, lat2 float, lon2 float, units varchar) + RETURNS float AS $dist$ + DECLARE + dist float = 0; + radlat1 float; + radlat2 float; + theta float; + radtheta float; + BEGIN + IF lat1 = lat2 OR lon1 = lon2 + THEN RETURN dist; + ELSE + radlat1 = pi() * lat1 / 180; + radlat2 = pi() * lat2 / 180; + theta = lon1 - lon2; + radtheta = pi() * theta / 180; + dist = sin(radlat1) * sin(radlat2) + cos(radlat1) * cos(radlat2) * cos(radtheta); + + IF dist > 1 THEN dist = 1; END IF; + + dist = acos(dist); + dist = dist * 180 / pi(); + dist = dist * 60 * 1.1515; + + IF units = 'K' THEN dist = dist * 1.609344; END IF; + IF units = 'N' THEN dist = dist * 0.8684; END IF; + + RETURN dist; + END IF; + END; + $dist$ LANGUAGE plpgsql;`); + } + + public async down(queryRunner: QueryRunner): Promise { + await queryRunner.query( + `DROP FUNCTION IF EXISTS calculate_distance(lat1 float, lon1 float, lat2 float, lon2 float, units varchar);`, + ); + } +} diff --git a/server/entities/chat_room.entity.ts b/server/entities/chat_room.entity.ts index 9550d26..6f46c97 100644 --- a/server/entities/chat_room.entity.ts +++ b/server/entities/chat_room.entity.ts @@ -1,13 +1,11 @@ -import { Entity, PrimaryGeneratedColumn, Column } from 'typeorm'; +import { Entity, PrimaryGeneratedColumn, Column, ManyToOne } from 'typeorm'; +import { User } from './user.entity'; @Entity() export class ChatRoom { @PrimaryGeneratedColumn() id: number; - @Column() - name: string; - @Column() latitude: number; @@ -16,4 +14,7 @@ export class ChatRoom { @Column() radius: number; + + @ManyToOne(() => User, (user) => user.chatRooms) + user: User; } diff --git a/server/entities/user.entity.ts b/server/entities/user.entity.ts index aeef107..c3ece96 100644 --- a/server/entities/user.entity.ts +++ b/server/entities/user.entity.ts @@ -1,4 +1,5 @@ import { Entity, Column, PrimaryGeneratedColumn, OneToMany } from 'typeorm'; +import { ChatRoom } from './chat_room.entity'; import { RefreshToken } from './refresh_token.entity'; import { UserRole } from './user_role.entity'; @@ -24,4 +25,7 @@ export class User { @OneToMany(() => UserRole, (userRole) => userRole.user, { cascade: true }) userRoles: UserRole[]; + + @OneToMany(() => ChatRoom, (chatRoom) => chatRoom.user) + chatRooms: ChatRoom[]; } diff --git a/server/modules/chat_room.module.ts b/server/modules/chat_room.module.ts index 07b2553..7acc672 100644 --- a/server/modules/chat_room.module.ts +++ b/server/modules/chat_room.module.ts @@ -3,11 +3,13 @@ import { TypeOrmModule } from '@nestjs/typeorm'; import { ChatRoomController } from 'server/controllers/chat_room.controller'; import { ChatRoom } from 'server/entities/chat_room.entity'; import { ChatRoomService } from 'server/providers/services/chat_room.service'; +import { UsersService } from 'server/providers/services/users.service'; +import { UsersModule } from './users.module'; @Module({ - imports: [TypeOrmModule.forFeature([ChatRoom])], + imports: [TypeOrmModule.forFeature([ChatRoom]), UsersModule], controllers: [ChatRoomController], - providers: [ChatRoomService], + providers: [ChatRoomService, UsersService], exports: [TypeOrmModule], }) -export class UsersModule {} +export class ChatRoomModule {} diff --git a/server/modules/users.module.ts b/server/modules/users.module.ts index 69c533b..5b5b2ff 100644 --- a/server/modules/users.module.ts +++ b/server/modules/users.module.ts @@ -11,9 +11,10 @@ import { RefreshTokensController } from 'server/controllers/refresh_tokens.contr import { Role } from 'server/entities/role.entity'; import { RolesService } from 'server/providers/services/roles.service'; import { UserRole } from 'server/entities/user_role.entity'; +import { ChatRoom } from 'server/entities/chat_room.entity'; @Module({ - imports: [TypeOrmModule.forFeature([User, RefreshToken, Role, UserRole])], + imports: [TypeOrmModule.forFeature([User, RefreshToken, Role, UserRole, ChatRoom])], controllers: [SessionsController, UsersController, RefreshTokensController], providers: [UsersService, RolesService, RefreshTokensService, JwtService], exports: [TypeOrmModule], diff --git a/server/providers/services/chat_room.service.ts b/server/providers/services/chat_room.service.ts index 6c87539..a6af023 100644 --- a/server/providers/services/chat_room.service.ts +++ b/server/providers/services/chat_room.service.ts @@ -18,7 +18,21 @@ export class ChatRoomService { return this.chatRoomRepository.find(); } - findById(id: number) { - return this.chatRoomRepository.findOne(id); + near({ lat, lng }: { lat: number; lng: number }) { + return this.chatRoomRepository.query( + `SELECT * FROM chat_room WHERE calculate_distance(latitude, longitude, ${lat}, ${lng}, 'M') < 5`, + ); + } + + findById(id: number, relations: string[] = []) { + return this.chatRoomRepository.findOne(id, { relations }); + } + + save(chatRoom: ChatRoom) { + return this.chatRoomRepository.save(chatRoom); + } + + remove(chatRoom: ChatRoom) { + return this.chatRoomRepository.remove(chatRoom); } }