mirror of
https://github.com/pds-nest/nest.git
synced 2024-11-25 14:34:19 +00:00
🚧 Start working on BoxConditionMap
This commit is contained in:
parent
e0f54e53d9
commit
1b7a484343
10 changed files with 21764 additions and 1805 deletions
23451
code/frontend/package-lock.json
generated
23451
code/frontend/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -13,8 +13,10 @@
|
|||
"@testing-library/user-event": "^12.8.3",
|
||||
"classnames": "^2.3.1",
|
||||
"is-string": "^1.0.5",
|
||||
"leaflet": "^1.7.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-leaflet": "^3.1.0",
|
||||
"react-router": "^5.2.0",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "4.0.3",
|
||||
|
|
|
@ -24,6 +24,12 @@
|
|||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
|
||||
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
|
||||
crossorigin=""/>
|
||||
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
|
||||
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
|
||||
crossorigin=""></script>
|
||||
<title>N.E.S.T.</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
@ -4,12 +4,9 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
|||
import { faAt, faClock, faPlus } from "@fortawesome/free-solid-svg-icons"
|
||||
import InputWithIcon from "../base/InputWithIcon"
|
||||
import FormInline from "../base/FormInline"
|
||||
import Style from "./BoxConditionHashtag.module.css"
|
||||
import Style from "./BoxConditionDatetime.module.css"
|
||||
import ButtonIconOnly from "../base/ButtonIconOnly"
|
||||
import useRepositoryEditor from "../../hooks/useRepositoryEditor"
|
||||
import FormLabelled from "../base/FormLabelled"
|
||||
import FormLabel from "../base/formparts/FormLabel"
|
||||
import Radio from "../base/Radio"
|
||||
import ButtonToggleBeforeAfter from "./ButtonToggleBeforeAfter"
|
||||
|
||||
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
.Input {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.Button {
|
||||
|
||||
}
|
72
code/frontend/src/components/interactive/BoxConditionMap.js
Normal file
72
code/frontend/src/components/interactive/BoxConditionMap.js
Normal file
|
@ -0,0 +1,72 @@
|
|||
import React, { useState } from "react"
|
||||
import BoxFull from "../base/BoxFull"
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
||||
import { faMapPin, faPlus } from "@fortawesome/free-solid-svg-icons"
|
||||
import FormInline from "../base/FormInline"
|
||||
import Style from "./BoxConditionMap.module.css"
|
||||
import ButtonIconOnly from "../base/ButtonIconOnly"
|
||||
import {MapContainer, TileLayer} from "react-leaflet"
|
||||
import useRepositoryEditor from "../../hooks/useRepositoryEditor"
|
||||
|
||||
|
||||
/**
|
||||
* A {@link BoxFull} that allows the user to select a geographical location to use to filter tweets.
|
||||
*
|
||||
* @param props - Additional props to pass to the box.
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
export default function BoxConditionMap({ ...props }) {
|
||||
const [user, setUser] = useState("")
|
||||
const {conditions, appendCondition} = useRepositoryEditor()
|
||||
|
||||
const onButtonClick = () => {
|
||||
const newCond = {
|
||||
"id": null,
|
||||
"type": 1,
|
||||
"content": null
|
||||
}
|
||||
|
||||
if(user === "") {
|
||||
console.debug("Refusing to append ", newCond, " to the Conditions list, as it is empty.")
|
||||
return
|
||||
}
|
||||
|
||||
let duplicate = null;
|
||||
for(const oldCond of conditions) {
|
||||
if(newCond.type === oldCond.type && newCond.content === oldCond.content) {
|
||||
duplicate = oldCond;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if(duplicate) {
|
||||
console.debug("Refusing to append ", newCond, " to the Conditions list, as ", duplicate, " already exists.")
|
||||
}
|
||||
else {
|
||||
console.debug("Appending ", newCond, " to the Conditions list")
|
||||
appendCondition(newCond)
|
||||
}
|
||||
|
||||
setUser("")
|
||||
}
|
||||
|
||||
return (
|
||||
<BoxFull header={<span>Search by <FontAwesomeIcon icon={faMapPin}/> zone</span>} {...props}>
|
||||
<MapContainer center={[41.89309, 12.48289]} zoom={3} style={{"height": "400px"}}>
|
||||
<TileLayer
|
||||
attribution='(c) <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
</MapContainer>
|
||||
<FormInline>
|
||||
<ButtonIconOnly
|
||||
className={Style.Button}
|
||||
icon={faPlus}
|
||||
color={"Green"}
|
||||
onClick={onButtonClick}
|
||||
/>
|
||||
</FormInline>
|
||||
</BoxFull>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,7 @@
|
|||
.Input {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.Button {
|
||||
|
||||
}
|
|
@ -4,7 +4,7 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
|||
import { faAt, faPlus } from "@fortawesome/free-solid-svg-icons"
|
||||
import InputWithIcon from "../base/InputWithIcon"
|
||||
import FormInline from "../base/FormInline"
|
||||
import Style from "./BoxConditionHashtag.module.css"
|
||||
import Style from "./BoxConditionUser.module.css"
|
||||
import ButtonIconOnly from "../base/ButtonIconOnly"
|
||||
import useRepositoryEditor from "../../hooks/useRepositoryEditor"
|
||||
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
.Input {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.Button {
|
||||
|
||||
}
|
|
@ -3,7 +3,6 @@ import Style from "./PageDashboard.module.css"
|
|||
import classNames from "classnames"
|
||||
import BoxHeader from "../components/base/BoxHeader"
|
||||
import BoxFull from "../components/base/BoxFull"
|
||||
import Checkbox from "../components/base/Checkbox"
|
||||
import InputWithIcon from "../components/base/InputWithIcon"
|
||||
import { faFolder, faPlus } from "@fortawesome/free-solid-svg-icons"
|
||||
import Radio from "../components/base/Radio"
|
||||
|
@ -14,6 +13,7 @@ import RepositoryEditor from "../components/providers/RepositoryEditor"
|
|||
import BoxConditionHashtag from "../components/interactive/BoxConditionHashtag"
|
||||
import BoxConditions from "../components/interactive/BoxConditions"
|
||||
import BoxConditionDatetime from "../components/interactive/BoxConditionDatetime"
|
||||
import BoxConditionMap from "../components/interactive/BoxConditionMap"
|
||||
|
||||
|
||||
export default function PageDashboard({ children, className, ...props }) {
|
||||
|
@ -23,13 +23,9 @@ export default function PageDashboard({ children, className, ...props }) {
|
|||
<BoxHeader className={Style.Header}>
|
||||
Create a new repository
|
||||
</BoxHeader>
|
||||
<BoxFull className={Style.SearchByZone} header={
|
||||
<label><Checkbox/> Search by zone</label>
|
||||
}>
|
||||
🚧 Not implemented.
|
||||
</BoxFull>
|
||||
<BoxConditionMap className={Style.SearchByZone}/>
|
||||
<BoxConditionHashtag className={Style.SearchByHashtags}/>
|
||||
<BoxConditionDatetime classNmae={Style.SearchByTimePeriod}/>
|
||||
<BoxConditionDatetime className={Style.SearchByTimePeriod}/>
|
||||
<BoxConditions className={Style.Conditions}/>
|
||||
<BoxFull className={Style.CreateDialog} header={"Create repository"}>
|
||||
<FormLabelled>
|
||||
|
|
Loading…
Reference in a new issue