mirror of
https://github.com/pds-nest/nest.git
synced 2024-11-22 13:04: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
23437
code/frontend/package-lock.json
generated
23437
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",
|
"@testing-library/user-event": "^12.8.3",
|
||||||
"classnames": "^2.3.1",
|
"classnames": "^2.3.1",
|
||||||
"is-string": "^1.0.5",
|
"is-string": "^1.0.5",
|
||||||
|
"leaflet": "^1.7.1",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
|
"react-leaflet": "^3.1.0",
|
||||||
"react-router": "^5.2.0",
|
"react-router": "^5.2.0",
|
||||||
"react-router-dom": "^5.2.0",
|
"react-router-dom": "^5.2.0",
|
||||||
"react-scripts": "4.0.3",
|
"react-scripts": "4.0.3",
|
||||||
|
|
|
@ -24,6 +24,12 @@
|
||||||
work correctly both with client-side routing and a non-root public URL.
|
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`.
|
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>
|
<title>N.E.S.T.</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
@ -4,12 +4,9 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
||||||
import { faAt, faClock, faPlus } from "@fortawesome/free-solid-svg-icons"
|
import { faAt, faClock, faPlus } from "@fortawesome/free-solid-svg-icons"
|
||||||
import InputWithIcon from "../base/InputWithIcon"
|
import InputWithIcon from "../base/InputWithIcon"
|
||||||
import FormInline from "../base/FormInline"
|
import FormInline from "../base/FormInline"
|
||||||
import Style from "./BoxConditionHashtag.module.css"
|
import Style from "./BoxConditionDatetime.module.css"
|
||||||
import ButtonIconOnly from "../base/ButtonIconOnly"
|
import ButtonIconOnly from "../base/ButtonIconOnly"
|
||||||
import useRepositoryEditor from "../../hooks/useRepositoryEditor"
|
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"
|
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 { faAt, faPlus } from "@fortawesome/free-solid-svg-icons"
|
||||||
import InputWithIcon from "../base/InputWithIcon"
|
import InputWithIcon from "../base/InputWithIcon"
|
||||||
import FormInline from "../base/FormInline"
|
import FormInline from "../base/FormInline"
|
||||||
import Style from "./BoxConditionHashtag.module.css"
|
import Style from "./BoxConditionUser.module.css"
|
||||||
import ButtonIconOnly from "../base/ButtonIconOnly"
|
import ButtonIconOnly from "../base/ButtonIconOnly"
|
||||||
import useRepositoryEditor from "../../hooks/useRepositoryEditor"
|
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 classNames from "classnames"
|
||||||
import BoxHeader from "../components/base/BoxHeader"
|
import BoxHeader from "../components/base/BoxHeader"
|
||||||
import BoxFull from "../components/base/BoxFull"
|
import BoxFull from "../components/base/BoxFull"
|
||||||
import Checkbox from "../components/base/Checkbox"
|
|
||||||
import InputWithIcon from "../components/base/InputWithIcon"
|
import InputWithIcon from "../components/base/InputWithIcon"
|
||||||
import { faFolder, faPlus } from "@fortawesome/free-solid-svg-icons"
|
import { faFolder, faPlus } from "@fortawesome/free-solid-svg-icons"
|
||||||
import Radio from "../components/base/Radio"
|
import Radio from "../components/base/Radio"
|
||||||
|
@ -14,6 +13,7 @@ import RepositoryEditor from "../components/providers/RepositoryEditor"
|
||||||
import BoxConditionHashtag from "../components/interactive/BoxConditionHashtag"
|
import BoxConditionHashtag from "../components/interactive/BoxConditionHashtag"
|
||||||
import BoxConditions from "../components/interactive/BoxConditions"
|
import BoxConditions from "../components/interactive/BoxConditions"
|
||||||
import BoxConditionDatetime from "../components/interactive/BoxConditionDatetime"
|
import BoxConditionDatetime from "../components/interactive/BoxConditionDatetime"
|
||||||
|
import BoxConditionMap from "../components/interactive/BoxConditionMap"
|
||||||
|
|
||||||
|
|
||||||
export default function PageDashboard({ children, className, ...props }) {
|
export default function PageDashboard({ children, className, ...props }) {
|
||||||
|
@ -23,13 +23,9 @@ export default function PageDashboard({ children, className, ...props }) {
|
||||||
<BoxHeader className={Style.Header}>
|
<BoxHeader className={Style.Header}>
|
||||||
Create a new repository
|
Create a new repository
|
||||||
</BoxHeader>
|
</BoxHeader>
|
||||||
<BoxFull className={Style.SearchByZone} header={
|
<BoxConditionMap className={Style.SearchByZone}/>
|
||||||
<label><Checkbox/> Search by zone</label>
|
|
||||||
}>
|
|
||||||
🚧 Not implemented.
|
|
||||||
</BoxFull>
|
|
||||||
<BoxConditionHashtag className={Style.SearchByHashtags}/>
|
<BoxConditionHashtag className={Style.SearchByHashtags}/>
|
||||||
<BoxConditionDatetime classNmae={Style.SearchByTimePeriod}/>
|
<BoxConditionDatetime className={Style.SearchByTimePeriod}/>
|
||||||
<BoxConditions className={Style.Conditions}/>
|
<BoxConditions className={Style.Conditions}/>
|
||||||
<BoxFull className={Style.CreateDialog} header={"Create repository"}>
|
<BoxFull className={Style.CreateDialog} header={"Create repository"}>
|
||||||
<FormLabelled>
|
<FormLabelled>
|
||||||
|
|
Loading…
Reference in a new issue