136 lines
3.6 KiB
JavaScript
136 lines
3.6 KiB
JavaScript
import { useEffect, useRef, useState } from "react";
|
|
import NuevaCoord from "./NuevaCoord";
|
|
import EditarIcon from "./EditarIcon";
|
|
import ShareIcon from "./ShareIcon";
|
|
import RemoveIcon from "./RemoveIcon";
|
|
import StaticModal from "./StaticModal";
|
|
|
|
export default function Keeper({ tipo }) {
|
|
const [coords, setCoords] = useState(
|
|
JSON.parse(localStorage.getItem(tipo) || "[]"),
|
|
);
|
|
const collapseRef = useRef(null);
|
|
const [showModal, setModal] = useState(false);
|
|
|
|
console.log(coords);
|
|
useEffect(() => {
|
|
const storedCoords = JSON.parse(localStorage.getItem(tipo) || "[]");
|
|
|
|
console.log(storedCoords);
|
|
if (storedCoords) {
|
|
setCoords(storedCoords);
|
|
}
|
|
}, [tipo]);
|
|
|
|
const Editar = () => {
|
|
//wip
|
|
};
|
|
|
|
const Compartir = () => {
|
|
//wip
|
|
};
|
|
|
|
const Remover = () => {
|
|
setModal(true);
|
|
};
|
|
const collapseAccordion = () => {
|
|
if (collapseRef.current) {
|
|
const bsCollapse = new window.bootstrap.Collapse(collapseRef.current, {
|
|
toggle: false,
|
|
});
|
|
bsCollapse.hide();
|
|
}
|
|
};
|
|
return (
|
|
<>
|
|
{showModal && <StaticModal />}
|
|
<div className="accordion" id="accordionNuevaCoord">
|
|
<div className="accordion-item">
|
|
<h2 className="accordion-header" id="headingNuevaCoord">
|
|
<button
|
|
className="accordion-button collapsed"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#collapseNuevaCoord"
|
|
aria-expanded="false"
|
|
aria-controls="collapseNuevaCoord"
|
|
>
|
|
Nueva Coordenada
|
|
</button>
|
|
</h2>
|
|
|
|
<div
|
|
id="collapseNuevaCoord"
|
|
className="accordion-collapse collapse"
|
|
aria-labelledby="headingNuevaCoord"
|
|
data-bs-parent="#accordionNuevaCoord"
|
|
ref={collapseRef}
|
|
>
|
|
<div className="accordion-body">
|
|
<NuevaCoord
|
|
coord={coords}
|
|
setcoord={setCoords}
|
|
colapsar={collapseAccordion}
|
|
tipo={tipo}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
|
|
{coords.length == 0 && (
|
|
<h2 className="list-group-item text-center">
|
|
No hay Coordenadas que Mostrar.
|
|
</h2>
|
|
)}
|
|
|
|
<table class="table table-hover table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>X:</th>
|
|
<th>Y:</th>
|
|
<th>Z:</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{coords.length != 0 &&
|
|
coords.map((x) => (
|
|
<tr>
|
|
<td>
|
|
<b>#{x.num}:</b>
|
|
</td>
|
|
|
|
<td>{x.x}</td>
|
|
<td>{x.y !== null && `Y: ${x.y}`}</td>
|
|
<td>{x.z}</td>
|
|
<td>
|
|
<button
|
|
class="ms-2 btn btn-outline-warning btn-sm"
|
|
onClick={() => Editar()}
|
|
>
|
|
<EditarIcon />
|
|
</button>
|
|
<button
|
|
className="btn btn-sm btn-outline-info ms-2"
|
|
onClick={() => Compartir()}
|
|
>
|
|
<ShareIcon />
|
|
</button>
|
|
<button
|
|
className="btn btn-sm btn-outline-danger ms-2"
|
|
onClick={() => Remover()}
|
|
>
|
|
<RemoveIcon />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</>
|
|
);
|
|
}
|