unimore/pds-2021-g2-nest
unimore/pds-2021-g2-nest
1
Fork 0
mirror of https://github.com/pds-nest/nest.git synced 2024-11-25 14:34:19 +00:00
Code Activity

🔧 Refactor BoxCondition*

Browse source
This commit is contained in:
Stefano Pigozzi 2021-05-07 05:02:20 +02:00
parent eda2ab8c6e
commit 039270d79f
Signed by untrusted user who does not match committer: steffo
GPG key ID: 6965406171929D01
6 changed files with 63 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
code/frontend/src/components/interactive/BoxConditionDatetime.js
View file

@ -8,9 +8,11 @@ import Style from "./BoxConditionDatetime.module.css"
import ButtonIconOnly from "../base/ButtonIconOnly"
import useRepositoryEditor from "../../hooks/useRepositoryEditor"
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 }) {
const [datetime, setDatetime] = useState("")
const [ba, setBa] = useState(false)
const {conditions, appendCondition} = useRepositoryEditor()
const {addCondition} = useRepositoryEditor()
const onInputChange = event => {
let text = event.target.value
@ -34,39 +36,13 @@ export default function BoxConditionDatetime({ ...props }) {
}
const onButtonClick = () => {
const newCond = {
"id": null,
"type": 2,
"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.")
const naive = new Date(datetime)
if(naive.toString() === "Invalid Date") {
console.debug("Refusing to add condition: ", naive , " is an Invalid Date.")
return
}
if(datetime === "") {
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)
}
const aware = convertToLocalISODate(naive)
addCondition(new Condition("TIME", `${ba ? ">" : "<"} ${aware}`))
setDatetime("")
}
@ -81,7 +57,7 @@ export default function BoxConditionDatetime({ ...props }) {
icon={faClock}
value={datetime}
onChange={onInputChange}
placeholder={"2021-12-31T23:59"}
placeholder={"2021-12-31T23:59Z"}
/>
<ButtonIconOnly
className={Style.Button}

31
code/frontend/src/components/interactive/BoxConditionHashtag.js
View file

@ -7,6 +7,7 @@ import FormInline from "../base/FormInline"
import Style from "./BoxConditionHashtag.module.css"
import ButtonIconOnly from "../base/ButtonIconOnly"
import useRepositoryEditor from "../../hooks/useRepositoryEditor"
import Condition from "../../utils/Condition"
// Official hashtag regex from https://stackoverflow.com/a/22490853/4334568
// noinspection RegExpAnonymousGroup,LongLine
@ -23,7 +24,7 @@ const INVALID_HASHTAG_CHARACTERS = /([^a-z0-9_\u00c0-\u00d6\u00d8-\u00f6\u00f8-\
*/
export default function BoxConditionHashtag({ ...props }) {
const [hashtag, setHashtag] = useState("")
const {conditions, appendCondition} = useRepositoryEditor()
const {addCondition} = useRepositoryEditor()
const onInputChange = event => {
let text = event.target.value
@ -32,33 +33,7 @@ export default function BoxConditionHashtag({ ...props }) {
}
const onButtonClick = () => {
const newCond = {
"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)
}
addCondition(new Condition("HASHTAG", hashtag))
setHashtag("")
}

63
code/frontend/src/components/interactive/BoxConditionMap.js
View file

@ -1,4 +1,4 @@
import React, { useState } from "react"
import React, { useCallback, useState, useRef, useMemo } from "react"
import BoxFull from "../base/BoxFull"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
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 { MapContainer, Marker, TileLayer } from "react-leaflet"
import useRepositoryEditor from "../../hooks/useRepositoryEditor"
import Condition from "../../utils/Condition"
const STARTING_POSITION = [41.89309, 12.48289]
@ -21,38 +22,30 @@ const STARTING_ZOOM = 3
* @constructor
*/
export default function BoxConditionMap({ ...props }) {
const [user, setUser] = useState("")
const {conditions, appendCondition} = useRepositoryEditor()
const [position, setPosition] = useState({lat: STARTING_POSITION[0], lng: STARTING_POSITION[1]})
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 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("")
addCondition(new Condition(
"COORDINATES",
`WIP WIP ${position.lat.toFixed(6)} ${position.lng.toFixed(6)}`
))
setPosition({lat: STARTING_POSITION[0], lng: STARTING_POSITION[1]})
}
return (
@ -70,8 +63,14 @@ export default function BoxConditionMap({ ...props }) {
attribution='(c) <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
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>
<ButtonIconOnly
className={Style.Button}
icon={faPlus}
color={"Green"}
onClick={onButtonClick}
/>
</BoxFull>
)
}

31
code/frontend/src/components/interactive/BoxConditionUser.js
View file

@ -7,6 +7,7 @@ import FormInline from "../base/FormInline"
import Style from "./BoxConditionUser.module.css"
import ButtonIconOnly from "../base/ButtonIconOnly"
import useRepositoryEditor from "../../hooks/useRepositoryEditor"
import Condition from "../../utils/Condition"
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 }) {
const [user, setUser] = useState("")
const {conditions, appendCondition} = useRepositoryEditor()
const {addCondition} = useRepositoryEditor()
const onInputChange = event => {
let text = event.target.value
@ -31,33 +32,7 @@ export default function BoxConditionUser({ ...props }) {
}
const onButtonClick = () => {
const newCond = {
"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)
}
addCondition(new Condition("USER", user))
setUser("")
}

20
code/frontend/src/components/interactive/ConditionBadge.js
View file

@ -3,23 +3,25 @@ import Style from "./ConditionBadge.module.css"
import classNames from "classnames"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
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"
const CONDITION_COLORS = {
0: "Grey", // Hashtag
1: "Red", // Location
2: "Yellow", // Time
3: "Green", // User
3: "Red", // Coordinates
4: "Red", // Place
5: "Green", // User
}
const CONDITION_ICONS = {
0: faHashtag, // Hashtag
1: faMapPin, // Location
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 color = CONDITION_COLORS[type]
const icon = CONDITION_ICONS[type]
const {removeCondition} = useContext(ContextRepositoryEditor)
const {removeRawCondition} = useContext(ContextRepositoryEditor)
return (
<div
title={`Condition ID: ${id}`}
title={id ? `💠 Condition ID: ${id}` : "✨ New Condition"}
className={classNames(Style.ConditionBadge, Style[`ConditionBadge${color}`])}
>
<div className={Style.Icon}>
<FontAwesomeIcon icon={icon}/>
</div>
<div>
<div className={Style.Text}>
{content}
</div>
<div>
<ButtonSmallX onClick={() => {
console.debug(`Removing Condition: `, condition)
removeCondition(condition)
removeRawCondition(condition)
}}/>
</div>
</div>

8
code/frontend/src/components/interactive/ConditionBadge.module.css
View file

@ -5,9 +5,6 @@
padding: 0 5px;
border-radius: 25px;
margin: 0 2px;
max-width: 200px;
overflow-x: hidden;
}
.ConditionBadgeRed {
@ -30,6 +27,11 @@
color: var(--fg-green)
}
.Text {
max-width: 350px;
overflow-x: hidden;
}
.Icon {
width: 15px;
text-align: center;