mirror of
https://github.com/pds-nest/nest.git
synced 2024-11-25 14:34:19 +00:00
🔧 Refactor BoxCondition*
This commit is contained in:
parent
eda2ab8c6e
commit
039270d79f
6 changed files with 63 additions and 134 deletions
|
@ -8,9 +8,11 @@ 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 ButtonToggleBeforeAfter from "./ButtonToggleBeforeAfter"
|
import ButtonToggleBeforeAfter from "./ButtonToggleBeforeAfter"
|
||||||
|
import Condition from "../../utils/Condition"
|
||||||
|
import convertToLocalISODate from "../../utils/convertToLocalISODate"
|
||||||
|
|
||||||
|
|
||||||
const INVALID_USER_CHARACTERS = /[^0-9TZ:-]/g
|
const INVALID_USER_CHARACTERS = /[^0-9TZ:+-]/g
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -24,7 +26,7 @@ const INVALID_USER_CHARACTERS = /[^0-9TZ:-]/g
|
||||||
export default function BoxConditionDatetime({ ...props }) {
|
export default function BoxConditionDatetime({ ...props }) {
|
||||||
const [datetime, setDatetime] = useState("")
|
const [datetime, setDatetime] = useState("")
|
||||||
const [ba, setBa] = useState(false)
|
const [ba, setBa] = useState(false)
|
||||||
const {conditions, appendCondition} = useRepositoryEditor()
|
const {addCondition} = useRepositoryEditor()
|
||||||
|
|
||||||
const onInputChange = event => {
|
const onInputChange = event => {
|
||||||
let text = event.target.value
|
let text = event.target.value
|
||||||
|
@ -34,39 +36,13 @@ export default function BoxConditionDatetime({ ...props }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const onButtonClick = () => {
|
const onButtonClick = () => {
|
||||||
const newCond = {
|
const naive = new Date(datetime)
|
||||||
"id": null,
|
if(naive.toString() === "Invalid Date") {
|
||||||
"type": 2,
|
console.debug("Refusing to add condition: ", naive , " is an Invalid Date.")
|
||||||
"content": `${ba ? ">" : "<"} ${datetime}`
|
|
||||||
}
|
|
||||||
|
|
||||||
const date = new Date(datetime)
|
|
||||||
if(date.toString() === "Invalid Date") {
|
|
||||||
console.debug("Refusing to append ", newCond, " to the Conditions list, as it is invalid.")
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
const aware = convertToLocalISODate(naive)
|
||||||
if(datetime === "") {
|
addCondition(new Condition("TIME", `${ba ? ">" : "<"} ${aware}`))
|
||||||
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)
|
|
||||||
}
|
|
||||||
|
|
||||||
setDatetime("")
|
setDatetime("")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -81,7 +57,7 @@ export default function BoxConditionDatetime({ ...props }) {
|
||||||
icon={faClock}
|
icon={faClock}
|
||||||
value={datetime}
|
value={datetime}
|
||||||
onChange={onInputChange}
|
onChange={onInputChange}
|
||||||
placeholder={"2021-12-31T23:59"}
|
placeholder={"2021-12-31T23:59Z"}
|
||||||
/>
|
/>
|
||||||
<ButtonIconOnly
|
<ButtonIconOnly
|
||||||
className={Style.Button}
|
className={Style.Button}
|
||||||
|
|
|
@ -7,6 +7,7 @@ import FormInline from "../base/FormInline"
|
||||||
import Style from "./BoxConditionHashtag.module.css"
|
import Style from "./BoxConditionHashtag.module.css"
|
||||||
import ButtonIconOnly from "../base/ButtonIconOnly"
|
import ButtonIconOnly from "../base/ButtonIconOnly"
|
||||||
import useRepositoryEditor from "../../hooks/useRepositoryEditor"
|
import useRepositoryEditor from "../../hooks/useRepositoryEditor"
|
||||||
|
import Condition from "../../utils/Condition"
|
||||||
|
|
||||||
// Official hashtag regex from https://stackoverflow.com/a/22490853/4334568
|
// Official hashtag regex from https://stackoverflow.com/a/22490853/4334568
|
||||||
// noinspection RegExpAnonymousGroup,LongLine
|
// noinspection RegExpAnonymousGroup,LongLine
|
||||||
|
@ -23,7 +24,7 @@ const INVALID_HASHTAG_CHARACTERS = /([^a-z0-9_\u00c0-\u00d6\u00d8-\u00f6\u00f8-\
|
||||||
*/
|
*/
|
||||||
export default function BoxConditionHashtag({ ...props }) {
|
export default function BoxConditionHashtag({ ...props }) {
|
||||||
const [hashtag, setHashtag] = useState("")
|
const [hashtag, setHashtag] = useState("")
|
||||||
const {conditions, appendCondition} = useRepositoryEditor()
|
const {addCondition} = useRepositoryEditor()
|
||||||
|
|
||||||
const onInputChange = event => {
|
const onInputChange = event => {
|
||||||
let text = event.target.value
|
let text = event.target.value
|
||||||
|
@ -32,33 +33,7 @@ export default function BoxConditionHashtag({ ...props }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const onButtonClick = () => {
|
const onButtonClick = () => {
|
||||||
const newCond = {
|
addCondition(new Condition("HASHTAG", hashtag))
|
||||||
"id": null,
|
|
||||||
"type": 0,
|
|
||||||
"content": hashtag
|
|
||||||
}
|
|
||||||
|
|
||||||
if(hashtag === "") {
|
|
||||||
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)
|
|
||||||
}
|
|
||||||
|
|
||||||
setHashtag("")
|
setHashtag("")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState } from "react"
|
import React, { useCallback, useState, useRef, useMemo } from "react"
|
||||||
import BoxFull from "../base/BoxFull"
|
import BoxFull from "../base/BoxFull"
|
||||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
||||||
import { faMapPin, faPlus } from "@fortawesome/free-solid-svg-icons"
|
import { faMapPin, faPlus } from "@fortawesome/free-solid-svg-icons"
|
||||||
|
@ -7,6 +7,7 @@ import Style from "./BoxConditionMap.module.css"
|
||||||
import ButtonIconOnly from "../base/ButtonIconOnly"
|
import ButtonIconOnly from "../base/ButtonIconOnly"
|
||||||
import { MapContainer, Marker, TileLayer } from "react-leaflet"
|
import { MapContainer, Marker, TileLayer } from "react-leaflet"
|
||||||
import useRepositoryEditor from "../../hooks/useRepositoryEditor"
|
import useRepositoryEditor from "../../hooks/useRepositoryEditor"
|
||||||
|
import Condition from "../../utils/Condition"
|
||||||
|
|
||||||
|
|
||||||
const STARTING_POSITION = [41.89309, 12.48289]
|
const STARTING_POSITION = [41.89309, 12.48289]
|
||||||
|
@ -21,38 +22,30 @@ const STARTING_ZOOM = 3
|
||||||
* @constructor
|
* @constructor
|
||||||
*/
|
*/
|
||||||
export default function BoxConditionMap({ ...props }) {
|
export default function BoxConditionMap({ ...props }) {
|
||||||
const [user, setUser] = useState("")
|
const [position, setPosition] = useState({lat: STARTING_POSITION[0], lng: STARTING_POSITION[1]})
|
||||||
const {conditions, appendCondition} = useRepositoryEditor()
|
const {addCondition} = useRepositoryEditor()
|
||||||
|
|
||||||
|
const markerRef = useRef(null)
|
||||||
|
const eventHandlers = useMemo(
|
||||||
|
() => ({
|
||||||
|
dragend() {
|
||||||
|
const marker = markerRef.current
|
||||||
|
if (marker != null) {
|
||||||
|
const pos = marker.getLatLng()
|
||||||
|
console.debug("Changing marker position to: ", pos)
|
||||||
|
setPosition(pos)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
[],
|
||||||
|
)
|
||||||
|
|
||||||
const onButtonClick = () => {
|
const onButtonClick = () => {
|
||||||
const newCond = {
|
addCondition(new Condition(
|
||||||
"id": null,
|
"COORDINATES",
|
||||||
"type": 1,
|
`WIP WIP ${position.lat.toFixed(6)} ${position.lng.toFixed(6)}`
|
||||||
"content": null
|
))
|
||||||
}
|
setPosition({lat: STARTING_POSITION[0], lng: STARTING_POSITION[1]})
|
||||||
|
|
||||||
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 (
|
return (
|
||||||
|
@ -70,8 +63,14 @@ export default function BoxConditionMap({ ...props }) {
|
||||||
attribution='(c) <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
|
attribution='(c) <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||||
/>
|
/>
|
||||||
<Marker draggable={true} position={STARTING_POSITION}/>
|
<Marker ref={markerRef} draggable={true} position={position} eventHandlers={eventHandlers}/>
|
||||||
</MapContainer>
|
</MapContainer>
|
||||||
|
<ButtonIconOnly
|
||||||
|
className={Style.Button}
|
||||||
|
icon={faPlus}
|
||||||
|
color={"Green"}
|
||||||
|
onClick={onButtonClick}
|
||||||
|
/>
|
||||||
</BoxFull>
|
</BoxFull>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,6 +7,7 @@ import FormInline from "../base/FormInline"
|
||||||
import Style from "./BoxConditionUser.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"
|
||||||
|
import Condition from "../../utils/Condition"
|
||||||
|
|
||||||
|
|
||||||
const INVALID_USER_CHARACTERS = /[^a-zA-Z0-9]/g
|
const INVALID_USER_CHARACTERS = /[^a-zA-Z0-9]/g
|
||||||
|
@ -22,7 +23,7 @@ const INVALID_USER_CHARACTERS = /[^a-zA-Z0-9]/g
|
||||||
*/
|
*/
|
||||||
export default function BoxConditionUser({ ...props }) {
|
export default function BoxConditionUser({ ...props }) {
|
||||||
const [user, setUser] = useState("")
|
const [user, setUser] = useState("")
|
||||||
const {conditions, appendCondition} = useRepositoryEditor()
|
const {addCondition} = useRepositoryEditor()
|
||||||
|
|
||||||
const onInputChange = event => {
|
const onInputChange = event => {
|
||||||
let text = event.target.value
|
let text = event.target.value
|
||||||
|
@ -31,33 +32,7 @@ export default function BoxConditionUser({ ...props }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const onButtonClick = () => {
|
const onButtonClick = () => {
|
||||||
const newCond = {
|
addCondition(new Condition("USER", user))
|
||||||
"id": null,
|
|
||||||
"type": 3,
|
|
||||||
"content": user
|
|
||||||
}
|
|
||||||
|
|
||||||
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("")
|
setUser("")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,23 +3,25 @@ import Style from "./ConditionBadge.module.css"
|
||||||
import classNames from "classnames"
|
import classNames from "classnames"
|
||||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
||||||
import ButtonSmallX from "../base/ButtonSmallX"
|
import ButtonSmallX from "../base/ButtonSmallX"
|
||||||
import { faAt, faClock, faHashtag, faMapPin } from "@fortawesome/free-solid-svg-icons"
|
import { faAt, faClock, faGlobe, faHashtag, faMapPin } from "@fortawesome/free-solid-svg-icons"
|
||||||
import ContextRepositoryEditor from "../../contexts/ContextRepositoryEditor"
|
import ContextRepositoryEditor from "../../contexts/ContextRepositoryEditor"
|
||||||
|
|
||||||
|
|
||||||
const CONDITION_COLORS = {
|
const CONDITION_COLORS = {
|
||||||
0: "Grey", // Hashtag
|
0: "Grey", // Hashtag
|
||||||
1: "Red", // Location
|
|
||||||
2: "Yellow", // Time
|
2: "Yellow", // Time
|
||||||
3: "Green", // User
|
3: "Red", // Coordinates
|
||||||
|
4: "Red", // Place
|
||||||
|
5: "Green", // User
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const CONDITION_ICONS = {
|
const CONDITION_ICONS = {
|
||||||
0: faHashtag, // Hashtag
|
0: faHashtag, // Hashtag
|
||||||
1: faMapPin, // Location
|
|
||||||
2: faClock, // Time
|
2: faClock, // Time
|
||||||
3: faAt, // User
|
3: faGlobe, // Coordinates
|
||||||
|
4: faMapPin, // Place
|
||||||
|
5: faAt, // User
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -34,23 +36,23 @@ export default function ConditionBadge({ ...condition }) {
|
||||||
const { id, type, content } = condition
|
const { id, type, content } = condition
|
||||||
const color = CONDITION_COLORS[type]
|
const color = CONDITION_COLORS[type]
|
||||||
const icon = CONDITION_ICONS[type]
|
const icon = CONDITION_ICONS[type]
|
||||||
const {removeCondition} = useContext(ContextRepositoryEditor)
|
const {removeRawCondition} = useContext(ContextRepositoryEditor)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
title={`Condition ID: ${id}`}
|
title={id ? `💠 Condition ID: ${id}` : "✨ New Condition"}
|
||||||
className={classNames(Style.ConditionBadge, Style[`ConditionBadge${color}`])}
|
className={classNames(Style.ConditionBadge, Style[`ConditionBadge${color}`])}
|
||||||
>
|
>
|
||||||
<div className={Style.Icon}>
|
<div className={Style.Icon}>
|
||||||
<FontAwesomeIcon icon={icon}/>
|
<FontAwesomeIcon icon={icon}/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className={Style.Text}>
|
||||||
{content}
|
{content}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<ButtonSmallX onClick={() => {
|
<ButtonSmallX onClick={() => {
|
||||||
console.debug(`Removing Condition: `, condition)
|
console.debug(`Removing Condition: `, condition)
|
||||||
removeCondition(condition)
|
removeRawCondition(condition)
|
||||||
}}/>
|
}}/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,9 +5,6 @@
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
margin: 0 2px;
|
margin: 0 2px;
|
||||||
|
|
||||||
max-width: 200px;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ConditionBadgeRed {
|
.ConditionBadgeRed {
|
||||||
|
@ -30,6 +27,11 @@
|
||||||
color: var(--fg-green)
|
color: var(--fg-green)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Text {
|
||||||
|
max-width: 350px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.Icon {
|
.Icon {
|
||||||
width: 15px;
|
width: 15px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
Loading…
Reference in a new issue