Skip to content

Commit 2880464

Browse files
LePeanutButterLePeanutButter
authored
Merge pull request #6 from AnderssonProgramming/feature/gestionarSalones
Feature/gestionar salones
2 parents df2f373 + 36b2f01 commit 2880464

File tree

10 files changed

+639
-8
lines changed

10 files changed

+639
-8
lines changed

‎src/App.js‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,16 @@ import { ReactComponent as House } from './assets/icons/house-user_11269953 1.sv
1111
import { ReactComponent as Room } from './assets/icons/workshop_14672030 1.svg';
1212
import { ReactComponent as User } from './assets/icons/User.svg';
1313
import Home from './pages/Home/Home.js';
14-
import GestionarUsuarios from './pages/Admin/GestionarUsuarios'; // Asegúrate de que la ruta es correcta
15-
14+
import GestionarSalones from './pages/Salones/GestionarSalones';
15+
import GestionarUsuarios from './pages/Admin/GestionarUsuarios';
1616

1717
import './App.css';
1818

19-
/**
20-
* Configuración de rutas según el rol del usuario.
21-
*/
2219
const routesConfig = {
2320
admin: [
2421
{ path: "/administrador", name: "Panel de Control", icon: <House className="svg" /> },
2522
{ path: "/administrador/salones", name: "Gestión de Salones", icon: <Room className="svg" /> },
26-
{ path: "administrador/usuarios", name: "Gestión de Usuarios", icon: <User className="svg" /> },
23+
{ path: "/administrador/usuarios", name: "Gestión de Usuarios", icon: <User className="svg" /> },
2724
],
2825
profe: [
2926
{ path: "/home", name: "Gestión de Reservas", icon: <House className="svg" /> },
@@ -102,8 +99,8 @@ function App() {
10299
{role === "admin" ? (
103100
<>
104101
<Route path="/administrador" element={<Home />} />
105-
<Route path="/administrador/salones" element={<div>Gestión de Salones</div>} />
106-
<Route path="administrador/usuarios" element={<GestionarUsuarios />} />
102+
<Route path="/administrador/salones" element={<GestionarSalones />} />
103+
<Route path="/administrador/usuarios" element={<GestionarUsuarios />} />
107104

108105

109106
<Route path="*" element={<Navigate to="/admin" />} />

‎src/assets/icons/Search Glyph.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/icons/edit-3-svgrepo-com.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/assets/icons/open-exit-door-svgrepo-com 1.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎src/components/popup/CRUDSalonModal/AddSalonModal.jsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, {useEffect, useState} from "react";
2+
import "./CRUDSalonModal.css";
3+
import CRUDSalonForm from "./CRUDSalonForm";
4+
5+
function AddSalonModal({ onClose, newSalon, setNewSalon, recursosDisponibles, handleAddSalon }) {
6+
return (
7+
<div className="popup-overlay">
8+
<div className="salon-modal">
9+
<div className="modal">
10+
<h2>Agregar Salón</h2>
11+
<CRUDSalonForm
12+
newSalon={newSalon}
13+
setNewSalon={setNewSalon}
14+
recursosDisponibles={recursosDisponibles}
15+
/>
16+
<div className="modal-buttons">
17+
<button className="cancel-button" onClick={onClose}>Cancelar</button>
18+
<button className="save-button" onClick={handleAddSalon}>Agregar</button>
19+
</div>
20+
</div>
21+
</div>
22+
</div>
23+
);
24+
}
25+
26+
export default AddSalonModal;

‎src/components/popup/CRUDSalonModal/CRUDSalonForm.jsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from "react";
2+
3+
function CRUDSalonForm({ newSalon, setNewSalon, recursosDisponibles }) {
4+
return (
5+
<div className="modal-content">
6+
<input
7+
type="text"
8+
placeholder="Nombre"
9+
value={newSalon.nombre}
10+
onChange={(e) => setNewSalon({ ...newSalon, nombre: e.target.value })}
11+
/>
12+
<input
13+
type="text"
14+
placeholder="Mnemónico"
15+
value={newSalon.mnemonico}
16+
onChange={(e) => setNewSalon({ ...newSalon, mnemonico: e.target.value })}
17+
/>
18+
<textarea
19+
placeholder="Descripción"
20+
value={newSalon.descripcion}
21+
onChange={(e) => setNewSalon({ ...newSalon, descripcion: e.target.value })}
22+
></textarea>
23+
<select
24+
value={newSalon.ubicacion}
25+
onChange={(e) => setNewSalon({ ...newSalon, ubicacion: e.target.value })}
26+
>
27+
<option value="">Ubicación...</option>
28+
<option value="Edificio B">Edificio B LAB-ISIS</option>
29+
<option value="Edificio H">Edificio H H-LABISIS</option>
30+
</select>
31+
<div className="capacity-container">
32+
<label htmlFor="capacidad">Capacidad: {newSalon.capacidad}</label>
33+
<input
34+
id="capacidad"
35+
type="range"
36+
min="0"
37+
max="32"
38+
value={newSalon.capacidad}
39+
onChange={(e) => setNewSalon({ ...newSalon, capacidad: e.target.value })}
40+
/>
41+
</div>
42+
<select
43+
multiple
44+
value={newSalon.recursos}
45+
onChange={(e) => setNewSalon({
46+
...newSalon,
47+
recursos: Array.from(e.target.selectedOptions, (option) => option.value),
48+
})}
49+
>
50+
{recursosDisponibles.map((recurso) => (
51+
<option key={recurso.id} value={recurso.id}>
52+
{recurso.nombre}
53+
</option>
54+
))}
55+
</select>
56+
</div>
57+
);
58+
}
59+
60+
export default CRUDSalonForm;

‎src/components/popup/CRUDSalonModal/CRUDSalonModal.css‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
.popup-overlay .salon-modal {
2+
background: white;
3+
width: 510%;
4+
max-width: 1100px;
5+
border-radius: 15px;
6+
padding: 30px;
7+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
8+
position: relative;
9+
}
10+
11+
.popup-overlay .salon-modal h2 {
12+
background-color: var(--variable-collection-user-admin);
13+
color: white;
14+
padding: 20px;
15+
margin: -30px -30px 20px -30px;
16+
border-top-left-radius: 15px;
17+
border-top-right-radius: 15px;
18+
font-size: 20px;
19+
font-weight: bold;
20+
}
21+
22+
.popup-overlay .salon-modal h3 {
23+
color: var(--variable-collection-user-admin);
24+
margin-bottom: 15px;
25+
}
26+
27+
.popup-overlay .modal-content {
28+
display: grid;
29+
grid-template-columns: repeat(2, 1fr);
30+
gap: 20px;
31+
}
32+
33+
.popup-overlay .modal-content textarea {
34+
grid-column: span 2;
35+
}
36+
37+
.popup-overlay .modal-content select {
38+
appearance: none;
39+
background: white;
40+
border: 1px solid #ccc;
41+
border-radius: 8px;
42+
padding: 10px;
43+
cursor: pointer;
44+
}
45+
46+
.popup-overlay .modal-content input,
47+
.popup-overlay .modal-content textarea,
48+
.popup-overlay .modal-content select {
49+
width: 97%;
50+
padding: 13px;
51+
border: 1px solid #ccc;
52+
border-radius: 8px;
53+
font-size: 16px;
54+
}
55+
56+
.popup-overlay .salon-modal .modal-buttons {
57+
display: flex;
58+
justify-content: space-between;
59+
margin-top: 20px;
60+
}
61+
62+
.popup-overlay .salon-modal .cancel-button {
63+
background: white;
64+
border: 1px solid var(--variable-collection-user-admin);
65+
color: black;
66+
padding: 12px 20px;
67+
border-radius: 15px;
68+
cursor: pointer;
69+
}
70+
71+
.popup-overlay .salon-modal .save-button {
72+
background: var(--variable-collection-user-admin);
73+
color: white;
74+
border: none;
75+
padding: 10px 40px;
76+
border-radius: 15px;
77+
cursor: pointer;
78+
}
79+
80+
.popup-overlay .modal-content .capacity-container {
81+
display: flex;
82+
flex-direction: column;
83+
align-items: center;
84+
gap: 10px;
85+
font-size: 16px;
86+
font-weight: bold;
87+
color: #333;
88+
}
89+
90+
.popup-overlay .modal-content .capacity-container input[type="range"] {
91+
-webkit-appearance: none;
92+
appearance: none;
93+
width: 100%;
94+
max-width: 300px;
95+
height: 1px;
96+
border-radius: 20px;
97+
background: #ddd;
98+
outline: none;
99+
transition: background 0.3s;
100+
cursor: pointer;
101+
}
102+
103+
/* Estilo del riel cuando el usuario interactúa */
104+
.popup-overlay .modal-content .capacity-container input[type="range"]:hover {
105+
background: #bbb;
106+
}
107+
108+
/* Personalizar el deslizador (bolita) en WebKit (Chrome, Safari) */
109+
.popup-overlay .modal-content .capacity-container input[type="range"]::-webkit-slider-thumb {
110+
-webkit-appearance: none;
111+
appearance: none;
112+
width: 16px;
113+
height: 16px;
114+
background: var(--variable-collection-user-admin);
115+
border-radius: 50%;
116+
cursor: pointer;
117+
transition: transform 0.2s ease-in-out;
118+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
119+
}
120+
121+
/* Efecto al interactuar */
122+
.popup-overlay .modal-content .capacity-container input[type="range"]::-webkit-slider-thumb:hover {
123+
transform: scale(1.3);
124+
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
125+
}
126+
127+
/* Personalizar el deslizador en Firefox */
128+
.popup-overlay .modal-content .capacity-container input[type="range"]::-moz-range-thumb {
129+
width: 16px;
130+
height: 16px;
131+
background: var(--variable-collection-user-admin);
132+
border-radius: 50%;
133+
cursor: pointer;
134+
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
135+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
136+
}
137+
138+
.popup-overlay .modal-content .capacity-container input[type="range"]::-moz-range-thumb:hover {
139+
transform: scale(1.3);
140+
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
141+
}
142+

‎src/components/popup/CRUDSalonModal/EditarSalonModal.jsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, {useEffect, useState} from "react";
2+
import "./CRUDSalonModal.css";
3+
import CRUDSalonForm from "./CRUDSalonForm";
4+
5+
function EditarSalonModal({ onClose, newSalon, setNewSalon, recursosDisponibles, handleEdit }) {
6+
return (
7+
<div className="popup-overlay">
8+
<div className="salon-modal">
9+
<div className="modal">
10+
<h2>Editar Salón</h2>
11+
<CRUDSalonForm
12+
newSalon={newSalon}
13+
setNewSalon={setNewSalon}
14+
recursosDisponibles={recursosDisponibles}
15+
/>
16+
<div className="modal-buttons">
17+
<button className="cancel-button" onClick={onClose}>Cancelar</button>
18+
<button className="save-button" onClick={handleEdit}>Guardar</button>
19+
</div>
20+
</div>
21+
</div>
22+
</div>
23+
);
24+
}
25+
26+
export default EditarSalonModal;

0 commit comments

Comments
 (0)