Skip to content

Commit

Permalink
Merge pull request #42 from DSSD-Madison/misc
Browse files Browse the repository at this point in the history
misc updates
  • Loading branch information
JackBlake-zkq authored May 3, 2024
2 parents 5a9a7f7 + 337a52d commit d092159
Showing 6 changed files with 122 additions and 146 deletions.
3 changes: 3 additions & 0 deletions src/components/AutocompleteSearch.tsx
Original file line number Diff line number Diff line change
@@ -39,6 +39,9 @@ const AutocompleteSearch: React.FC<HomeProps> = ({ layers, setStringValue, setBo
if (setStringValue !== undefined) setStringValue(val)
setLocalStrVal(val)
if (setCountryCode !== undefined) setCountryCode(feat.properties?.country_a || '')
if (!feat.bbox) {
alert('Stadia Maps no tiene información de ubicación para este municipio. No podrás acercarlo automáticamente.')
}
setBounds(feat.bbox)
}

10 changes: 3 additions & 7 deletions src/components/Map.tsx
Original file line number Diff line number Diff line change
@@ -22,7 +22,7 @@ interface MapProps {
function SetInitialBounds() {
const map = useMap()
useEffect(() => {
map.setView([-27, -60], 3.5) // Centered on South America. If changing this, make sure to adjust the reset button in ZoomControl.tsx
map.setView([-5, -70], 5) // Centered on South America. If changing this, make sure to adjust the reset button in ZoomControl.tsx
}, [])
return null
}
@@ -49,18 +49,13 @@ const Map: React.FC<MapProps> = ({ apiKey, data, isAdmin, addIncident, deleteInc
const [location, setLocation] = useState<Incident['location'] | null>(null)

async function submitIncident(
name: Incident['name'],
dateString: Incident['dateString'],
typeID: Incident['typeID'],
description: Incident['description'],
country: Incident['country'],
department: Incident['department'],
municipality: Incident['municipality']
): Promise<boolean> {
if (!name) {
alert('Please enter a name for the incident')
return false
}
if (!dateString) {
alert('Please enter a date for the incident')
return false
@@ -76,7 +71,7 @@ const Map: React.FC<MapProps> = ({ apiKey, data, isAdmin, addIncident, deleteInc
return false
}

if (!(await addIncident({ name, description, dateString, typeID, location, country, department, municipality }))) {
if (!(await addIncident({ description, dateString, typeID, location, country, department, municipality }))) {
alert('No se pudo crear el incidente')
return false
}
@@ -135,6 +130,7 @@ const Map: React.FC<MapProps> = ({ apiKey, data, isAdmin, addIncident, deleteInc
incidentID={selectedIncidentID}
onClose={onClose}
submitIncident={submitIncident}
location={location}
setLocation={setLocation}
tmpSelected={tmpSelected}
setTmpSelected={setTmpSelected}
229 changes: 108 additions & 121 deletions src/components/controls/IncidentPanel.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { DB, Incident } from 'types'
import { useMap } from 'react-leaflet'
import { useState } from 'react'
import { useEffect, useState } from 'react'
import AutocompleteSearch from 'components/AutocompleteSearch'
import { LatLngBoundsExpression, LatLngTuple } from 'leaflet'

@@ -9,14 +9,14 @@ interface InfoPanelControlProps {
incidentID: keyof DB['Incidents'] | null
onClose: () => void
submitIncident: (
name: Incident['name'],
dateString: Incident['dateString'],
typeID: Incident['typeID'],
country: Incident['country'],
description: Incident['description'],
department: Incident['department'],
municipality: Incident['municipality']
) => Promise<boolean>
location: Incident['location'] | null
setLocation: React.Dispatch<React.SetStateAction<Incident['location'] | null>>
tmpSelected: boolean
setTmpSelected: React.Dispatch<React.SetStateAction<boolean>>
@@ -29,13 +29,13 @@ const InfoPanelControl: React.FC<InfoPanelControlProps> = ({
incidentID,
onClose,
submitIncident,
location,
setLocation,
tmpSelected,
isAdmin,
deleteSelectedIncident,
}) => {
const map = useMap()
const [name, setName] = useState<Incident['name']>('')
const [description, setDescription] = useState<Incident['description']>('')
const [country, setCountry] = useState<Incident['country']>('')
const [countryBounds, setCountryBounds] = useState<number[] | undefined>(undefined)
@@ -64,8 +64,7 @@ const InfoPanelControl: React.FC<InfoPanelControlProps> = ({
}

const submit = async () => {
if (await submitIncident(name, dateString, typeID, description, country, department, municipality)) {
setName('')
if (await submitIncident(dateString, typeID, description, country, department, municipality)) {
setDescription('')
setDateString('')
setTypeID('')
@@ -80,12 +79,16 @@ const InfoPanelControl: React.FC<InfoPanelControlProps> = ({

const incident = incidentID ? data.Incidents[incidentID] : null

useEffect(() => {
console.log(municipalityBounds)
}, [municipalityBounds])

return (
<div
key={'overlay'}
className={`${
incident || tmpSelected ? 'w-[100%] md:w-[400px]' : 'w-0'
} duration-400 fixed left-0 z-[1000] box-border h-screen cursor-default overflow-y-auto rounded-e-xl bg-tint-02/60 !font-proxima-nova shadow-lg backdrop-blur-sm transition-all duration-100`}
} duration-400 fixed left-0 z-[1000] box-border h-screen cursor-default overflow-y-scroll rounded-e-xl bg-tint-02/60 font-merriweather text-sm text-shade-02 shadow-lg backdrop-blur-sm transition-all duration-100`}
onMouseEnter={disableZoom}
onMouseLeave={enableZoom}
>
@@ -99,129 +102,68 @@ const InfoPanelControl: React.FC<InfoPanelControlProps> = ({
</span>

{incident && (
<div key={incident.name} className="px-6 py-10">
<div className="px-6 py-10">
<div className="mb-4">
<span className="inline text-2xl font-bold text-shade-02">{incident.name}</span>
</div>
<div className="font-merriweather text-base">
<div className="mb-4 text-sm text-shade-02">
{incident.dateString && (
<>
Fecha: {incident.dateString} <br />
</>
)}
Actividad: {data.Categories[data.Types[incident.typeID].categoryID].name}
<br />
Tipo de evento: {data.Types[incident.typeID].name}
</div>
<div className="mb-6 text-shade-01">{incident.description}</div>
País: {incident.country}
<span className="font-bold">País:</span> {incident.country}
<br />
Departamento: {incident.department}
<span className="font-bold">Departamento:</span> {incident.department}
<br />
Municipio: {incident.municipality}
<div className="mb-6 text-shade-01"></div>
{isAdmin && (
<button className="mr-1 rounded-sm border-0 bg-red-light pb-1 pl-2 pr-2 pt-1 hover:bg-red" onClick={deleteSelectedIncident}>
Borrar
</button>
<span className="font-bold">Municipio:</span> {incident.municipality}
<br />
<br />
{incident.dateString && (
<>
<span className="font-bold">Fecha:</span> {incident.dateString} <br />
</>
)}
<span className="font-bold">Actividad:</span> {data.Categories[data.Types[incident.typeID].categoryID].name}
<br />
<span className="font-bold">Tipo de evento:</span> {data.Types[incident.typeID].name}
</div>
<div className="mb-6 text-shade-01">{incident.description}</div>
<div className="mb-6 text-shade-01"></div>
{isAdmin && (
<button className="mr-1 rounded-sm border-0 bg-red-light pb-1 pl-2 pr-2 pt-1 hover:bg-red" onClick={deleteSelectedIncident}>
Borrar
</button>
)}
</div>
)}
{tmpSelected && (
<div className="px-6 py-10">
<div className="mb-4">
<span className="inline text-2xl font-bold text-shade-02">
Nombre:
<br />
<input type="text" className="w-full" value={name} onChange={(e) => setName(e.target.value)} required />
</span>
</div>
<div className="font-merriweather text-base">
<div className="mb-4 text-sm text-shade-02">
Fecha:
<br />
<input type="date" className="w-full" value={dateString} onChange={(e) => setDateString(e.target.value)} required />
<br />
Actividad:
<br />
<select
value={catID}
onChange={(e) => {
setCatID(e.target.value)
setTypeID('')
}}
className="w-full"
>
<option value="">--Por favor elige una actividad--</option>
{Object.entries(data.Categories).map(([id, category]) => (
<option key={id} value={id}>
{category.name}
</option>
))}
</select>
<br />
Tipo de evento:
<br />
<select value={typeID} onChange={(e) => setTypeID(e.target.value)} className="w-full">
<option value="">--Por favor elige un tipo de evento--</option>
{Object.entries(data.Types).map(
([id, type]) =>
type.categoryID == catID && (
<option key={id} value={id}>
{type.name}
</option>
)
)}
</select>
<label>
País:
<br />
<AutocompleteSearch layers={['country']} setStringValue={setCountry} setCountryCode={setCountryCode} setBounds={setCountryBounds} />
</label>
{country && countryBounds && (
<label>
Descripción:
Departamento:
<br />
<textarea value={description} onChange={(e) => setDescription(e.target.value)} required rows={10} cols={40} />
<AutocompleteSearch
layers={['region']}
setStringValue={setDepartment}
setBounds={setDepartmentBounds}
countryCode={countryCode}
/>
</label>
<br />
)}
{department && departmentBounds && (
<label>
País:
Municipio:
<br />
<AutocompleteSearch
layers={['country']}
setStringValue={setCountry}
setCountryCode={setCountryCode}
setBounds={setCountryBounds}
layers={['locality']}
setStringValue={setMunicipality}
setBounds={setMunicipalityBounds}
department={{ name: department, bbox: departmentBounds }}
/>
</label>
{country && countryBounds && (
<label>
Departamento:
<br />
<AutocompleteSearch
layers={['region']}
setStringValue={setDepartment}
setBounds={setDepartmentBounds}
countryCode={countryCode}
/>
</label>
)}
{department && departmentBounds && (
<label>
Municipio:
<br />
<AutocompleteSearch
layers={['locality']}
setStringValue={setMunicipality}
setBounds={setMunicipalityBounds}
department={{ name: department, bbox: departmentBounds }}
/>
</label>
)}
</div>
</div>
{municipalityBounds && (
<>
)}
{municipalityBounds && (
<button
className="bg-blue-200 hover:bg-blue-300 mr-1 rounded-sm border-0 pb-1 pl-2 pr-2 pt-1"
className="mr-1 rounded-sm border-0 bg-blue-200 pb-1 pl-2 pr-2 pt-1 hover:bg-blue-300"
onClick={() => {
const bounds: LatLngBoundsExpression = [
municipalityBounds?.slice(0, 2).reverse() as LatLngTuple,
@@ -232,18 +174,63 @@ const InfoPanelControl: React.FC<InfoPanelControlProps> = ({
>
Zoom sobre el Municipio
</button>
</>
)}

<button
className="bg-red-100 hover:bg-red-200 mr-1 rounded-sm border-0 pb-1 pl-2 pr-2 pt-1"
onClick={() => {
setLocation(null)
}}
>
Quitar marcador
</button>
<button className="bg-green-100 hover:bg-green-200 rounded-sm border-0 pb-1 pl-2 pr-2 pt-1" onClick={submit}>
)}
{location && (
<button
className="m-2 mr-1 block rounded-sm border-0 bg-red-100 pb-1 pl-2 pr-2 pt-1 hover:bg-red-200"
onClick={() => {
setLocation(null)
}}
>
Quitar marcador
</button>
)}
<br />
<br />
Fecha:
<br />
<input type="date" className="w-full" value={dateString} onChange={(e) => setDateString(e.target.value)} required />
<br />
Actividad:
<br />
<select
value={catID}
onChange={(e) => {
setCatID(e.target.value)
setTypeID('')
}}
className="w-full"
>
<option value="">--Por favor elige una actividad--</option>
{Object.entries(data.Categories).map(([id, category]) => (
<option key={id} value={id}>
{category.name}
</option>
))}
</select>
<br />
Tipo de evento:
<br />
<select value={typeID} onChange={(e) => setTypeID(e.target.value)} className="w-full">
<option value="">--Por favor elige un tipo de evento--</option>
{Object.entries(data.Types).map(
([id, type]) =>
type.categoryID == catID && (
<option key={id} value={id}>
{type.name}
</option>
)
)}
</select>
<br />
<label>
Descripción:
<br />
<textarea value={description} onChange={(e) => setDescription(e.target.value)} required rows={10} cols={40} />
</label>
<br />
</div>
<button className="rounded-sm border-0 bg-green-100 pb-1 pl-2 pr-2 pt-1 hover:bg-green-200" onClick={submit}>
Crear
</button>
</div>
2 changes: 1 addition & 1 deletion src/components/controls/ZoomControl.tsx
Original file line number Diff line number Diff line change
@@ -45,7 +45,7 @@ function ZoomControl(props: ZoomControlProps) {
title={zoomResetTitle}
role="button"
onClick={(e) => {
map.setView([-27, -60], 3.5)
map.setView([-5, -70], 5)
setFilters({
hideCategories: [],
hideTypes: [],
Loading

0 comments on commit d092159

Please sign in to comment.