merge with Axel
This commit is contained in:
@@ -0,0 +1,71 @@
|
||||
.tableContainer {
|
||||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #cfcfcf;
|
||||
max-height: 430px;
|
||||
scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0);
|
||||
background-color: #f9f9f9;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.machineTable {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
.machineTable th,
|
||||
.machineTable td {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #cfcfcf;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.machineTable th {
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
background-color: rgb(1, 92, 184);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.machineTable tr {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.disponible {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: green;
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ocupado {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.actions {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.resetButton {
|
||||
padding: 8px 16px;
|
||||
background-color: #ff4d4d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.resetButton:hover {
|
||||
background-color: #cc0000;
|
||||
}
|
||||
@@ -1,12 +1,203 @@
|
||||
import SearchUser from "../Components/SearchUser/searchUser";
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import Toggle from "../Components/Toggle/Toggle";
|
||||
import styles from "./Page.module.css"; // importamos el css
|
||||
|
||||
export default function Page() {
|
||||
const [machines] = useState([
|
||||
{
|
||||
ubicacion: "1",
|
||||
nombre: "PCD108",
|
||||
plataforma: "Windows",
|
||||
area: "PCNET1",
|
||||
activo: true,
|
||||
},
|
||||
]);
|
||||
|
||||
const [tables] = useState([
|
||||
{
|
||||
mesa: "1",
|
||||
activo: false,
|
||||
},
|
||||
]);
|
||||
|
||||
const [area, setArea] = useState("");
|
||||
|
||||
return (
|
||||
<section className='containerSection'>
|
||||
<h2 className='title'> ACTIVOS Y EN MANTENIMIENTO</h2>
|
||||
<section className="containerSection">
|
||||
<h2 className="title"> ACTIVOS Y EN MANTENIMIENTO</h2>
|
||||
|
||||
<Toggle
|
||||
defaultView="1"
|
||||
options={[
|
||||
{
|
||||
key: "1",
|
||||
label: "Equipos",
|
||||
content: (
|
||||
<>
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={area}
|
||||
onChange={(e) => setArea(e.target.value)}
|
||||
>
|
||||
<option value="">-- Selecciona un Area --</option>
|
||||
<option value="ANEX03">ANEX03</option>
|
||||
</select>
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Buscar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<table className={styles.machineTable}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Ubicacion</th>
|
||||
<th>Nombre</th>
|
||||
<th>Plataforma</th>
|
||||
<th>Area</th>
|
||||
<th>Activo</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{machines.map((machine, index) => (
|
||||
<tr key={index}>
|
||||
<td>{machine.ubicacion}</td>
|
||||
<td>{machine.nombre}</td>
|
||||
<td>{machine.plataforma}</td>
|
||||
<td>{machine.area}</td>
|
||||
<td>
|
||||
{" "}
|
||||
<input type="checkbox" />
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
label: "Areas",
|
||||
content: <></>,
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
label: "Mesas",
|
||||
content: (
|
||||
<>
|
||||
<table className={styles.machineTable}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Mesa</th>
|
||||
<th>Activo</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tables.map((table, index) => (
|
||||
<tr key={index}>
|
||||
<td>{table.mesa}</td>
|
||||
<td>
|
||||
{" "}
|
||||
<input type="checkbox" />
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
|
||||
);
|
||||
}
|
||||
//IO
|
||||
//IO
|
||||
|
||||
//
|
||||
//
|
||||
// .:--===--::.
|
||||
// .-+*%%%%%%#%%%%%%%#+=:
|
||||
// :=#%############%%%%%%@@@+
|
||||
// .-*#######********##%%%%%%@%%
|
||||
// .=######********+++**##%%%%%%@@:
|
||||
// .=#####**********++++**##%%%%%%%@=
|
||||
// -####**************+++**##%%%%%%%@+
|
||||
// :*################***+***##%%%%%%%%%#
|
||||
// =%#######%%%%%%%%##******###%%%%%%%%@%
|
||||
// .+%###%%%%%%%%%%%%%##******##%%%%%%%%%%%
|
||||
// .:::----:::.. .#%%%%%%@@@%%%%%%%%##******###%%%%%%%%%%#
|
||||
// .-=+++++++++********+=-:. .#%%%%@@@@@@%%%%%%%##*******##%%%%%%%%%%%*
|
||||
// .-+#*++++++***###%%#%########*+- .#%%%%@@@@@@@%%%%%%%#***+++**##%%%%%%%%%@%=
|
||||
// :+##++===+++*#%%%%%%%%%%%%%%%%%%%%%+: .#%%%@@@@@@@@%%%%%%%%%#**+++**#%%%%%%%%%%%@:
|
||||
// :*%#++=====+++*#%%%%%%%%%%%%%%@@%%%%@@@#=. +@@@@@@@@@@@@@%%%%%%%%#**++***##%%%%%%%%%%#
|
||||
// #%#**++=====+++*##%%%%%%%%%%%%@@@@@%@@@@@%= ..:@@@@@@@@@@@@@@%%%%%%%%##**+***##%%%%%%%%%%-
|
||||
// *%##**+++===++++**##%%%%%%%%%%@@@@@@@@@@@@@#+*#%%@@@@@@@@@@@@@@%%%%%%%%##**+***##%%%%%%%%%#
|
||||
// +%%###**++===+++++*##%%%%%%%%%@@@@@@@@@@@@@%*+*%@@@@@@@@@@@@@@%%%%%%%%##**+++**##%%%%%%%%%-
|
||||
// :%%%###**++===+++++*#%%%%%%%%%@@@@@@@@@@@@@%**%%@@@@@@@@@@@@@@%%%#####***++++**##%%%%%%%%*
|
||||
// *%%%%##**+++++++++*#%%%%%%%%%@@@@@@@@@@@@@@%%@@@@@@@@@@@@@@@@@@@%%%%%##***++**##%%%%%%%%.
|
||||
// .%%%%%##*+++==+++*#%%%%%%%%%%%%%%%@@@@@@@@@@@@@@%=-=++++*#%@@@@@@@%%%%%%%%####%%%%%%%%%=
|
||||
// +%%%%%#**++=+++*##%%%%%%%%%##%%%%@@@@@%%%%%%%%%#-=--=====++#%@@@@@@%%%%%%%%%%%%%%%%@@*
|
||||
// .#%%%%%**++==++*##%%%%%#####%%%@@@%%%%%%%%%%%%%*------=======*%@@@@@%%%%%%%%%%%%%%@@#.
|
||||
// :%%%%%**++==+++**########%%%@@@%%%%%%%%%%%%%%%*------:----====+%@@%%%%%%#%%@@@@@@@#.
|
||||
// -%%%%#*++===++++****##%%%@@@@%%%%%%%%%%%%%%%%*-::--:-::--------*@%%%%%#####**%@@%.
|
||||
// +%%%#*++===+++***##%%@@@@@@%%%%%%%%%%%%%%%%%*::::::::::::::-:::=%%%%%%###+. .=#:
|
||||
// +%%%**+++++***#%%%@%@@@@@%%%%%%%%%%%%%%%%%%*:::::::::..:.::::.::%%%%###=
|
||||
// +%%#*******#%%%%%%%@@@@@%###########%%%%%%+....................-%%%##=
|
||||
// +%%######%%%@%#%%%@@@@@##################+ .. .. . *%##-
|
||||
// -#%%%%%%%%@#*#%%%@@@@%##################= :%*:
|
||||
// .*%%%%%@#:+*#%%%%@@%###################+ -.
|
||||
// :+#%@+ .=##%%%%**###################+
|
||||
// .: -#%%#-:####################+ .....
|
||||
// .==.:#####################* ..........
|
||||
// .###%##################* . ..............
|
||||
// .#%##%%%%##########%#%%%# .........................
|
||||
// *%%%%%%%%%%%%%%%%%%%%%%%# .........................
|
||||
// =%%%%%%%%%%%%%%%%%%%%%%%%%...........................
|
||||
// .%%%%%%%%%%%%%%%%%%%%%%%%%%............................
|
||||
// +%%%%%%%%%%%%%%%%%%%%%%%%%%.........................:.:.
|
||||
// %%%%%%%%%%%%%%%%%%%#*+++===::::::::.................:.::
|
||||
// -%%%%%%%%%%%%%%*==::::::-=+=+=-:::::::::............:::::.
|
||||
// *%%%%%%%%%%%%%%=:::.:-**+*******+:....:-::.......::::::::-
|
||||
// #%%%%%%%%%%%%%%+::....-++=====+=.....::=.......:.:::::-:--
|
||||
// .%%%%%%%%%%%%%%%*-::.....::--:::.....:-++....::.::::::----=
|
||||
// .%%%%%%%%%%%%%%%%%*=:..............:-=++=...::::::::------=
|
||||
// :%%%%%%%%%%%%%%%%%%%%*-.........::-+++++=:::::::::-----=-=:
|
||||
// .+%%%%%%%%%%%%%%%%%%#=-=-:::::-----:-=++-:::::::-:-::-==-.
|
||||
// :#%%%%%%%%%%%%%#=. :------------ :-----------::::.
|
||||
// :*%%%%%%%%%%%= .--------------. .--------=-.
|
||||
// .+%%#%%%%%%# :+#::::--------:*%*=-----==--:
|
||||
// --#%%%%%%#%@=:::::::::::::=@%#*==+*+-:. .=+=:
|
||||
// .:-=+++++=- .-*%%%%%%#::....:::::::.-@@%%%%%%%%%%#*+-.=%%%%%%+.
|
||||
// .-*%#*+=--==*%%++*#%%%%%%%%@@-:...........:+@@@%%%%%%###**##%%%*--=*#%=.
|
||||
// .#%#==:. :=*#%%##****###%%%%@@*::::.....::::*@@@%%%%%###########%%*=.:=##:
|
||||
// -%%+-.:=#%%%#####******##%%@@@@-:::::.::::::#@@@%%%%###########%%%%%%=.=%%.
|
||||
// :. .#%#*+#%%%###############%%@@@@*::::::::::::@@@@%%%%%%%%%%%%%%####%%%%*.##.
|
||||
// :+*#%%+*%%%%%%%%%%%%%%%%%%%%%%@@@@%::::..:::::=@@@@@%%%%%%%%%%*++***+=-=+#-*+:.
|
||||
// -#=#%%%#*+======+++==#%%%%%@%@@@=:....:::::+@@@%@%%%%%%%%#+#%%%%%%%%#+=+%#:
|
||||
// ---+++++*##%%%%%%+:=#%%%%%%%%@@@*:....:...:-@@@@%%%%%%%%%#+%%%%%%%%%%%%%%%
|
||||
// .#%%%%%%%%%%%%%+:+%%%%%%%%%%%@@@#:........::+@@@%%%%%%%%%%#*%%%%%%%%%%%%%#
|
||||
// -%%%%%%%%%%%#:=#%%%%%%%%%%%%@@@=:.........::#@@%%%%%%%%%%%%+#%%%%%%%%%%%=
|
||||
// *%%%%%%%%%*:*%%%%%%%%%%%%%%@@%:...........:=@@@%%%%%%%%%%%%#+#%%%%%%%%#.
|
||||
// .%%%%%@%%+:#%###%%%%%%%%%%%@@#:...........::#@@%%%%%%#######%*+#@%%%@@=
|
||||
// .#%%@@%%*-#%##########%%%%%@@%:.............+@@%%#############%+=%@%%@%
|
||||
// .+%@%%%-#%##############%%@@@:.............-@@%###############%#-+@%#:
|
||||
// :#%%*=%%###############%@@@+....::.:.....:@@%################%%+=+.
|
||||
// -#=*%%%##%%%%%%%##%%%%@@@%....::::.....:@@%%###%%%%%%%%##%%%%%#-.
|
||||
// -+%%%%%%%%%%%%%%%%%%%@@@*...::::.....:@@%%%%%%%%%%%%%%%%%%%%%%=
|
||||
// ::#%%%%%%%%%%%%%%%%%%%@@@+..:::::....=@@%%%%%%%%%%%%%%%%%%%%%#+.
|
||||
// .::+%%%%%%%%%%%%%%%%%%@@@@+:::--:....#@@%%%%%%%%%%%%%%%#*+-:....
|
||||
// .:-=*%%%%%%%%%%%%%%%%%@@@@+::--::..+@@@%%%%%%%%%%%%#+:.
|
||||
// ::+#%%%%%%%%%%%%%%%@@@@+----::=@@@%%%%%%%%%%%*:
|
||||
// .:+*%%%%%%%%%%%%%@@@@+----+@@@%%%%%%%%%%+.
|
||||
// .-+#%%%%%%%%%%%@@@@===*@@@%%%%%%%%%#:
|
||||
// .-=*%%%%%%%%%@@@@#=#@@@@%%%%%%%%*.
|
||||
// .-+*%%%%%%%%@@@@#@@@@%%%%%%%@+.
|
||||
// .=+#%%@%%%@@@@@@@@%%%%@@@%-
|
||||
// :+#%@@@@@@@@@@@@@@@@@@#:
|
||||
// .=#@@@@@@@@@@@@@@@@%=
|
||||
// :+%@@@@@@@@@@@@%+.
|
||||
// .:-=++**###+.
|
||||
//
|
||||
// By Tyrannuss
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
.tableContainer {
|
||||
margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #cfcfcf;
|
||||
max-height: 430px;
|
||||
scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0);
|
||||
background-color: #f9f9f9;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.machineTable {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
.machineTable th,
|
||||
.machineTable td {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #cfcfcf;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.machineTable th {
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
background-color: rgb(1, 92, 184);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.machineTable tr {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.disponible {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: green;
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ocupado {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.actions {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.resetButton {
|
||||
padding: 8px 16px;
|
||||
background-color: #ff4d4d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.resetButton:hover {
|
||||
background-color: #cc0000;
|
||||
}
|
||||
@@ -1,13 +1,161 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import SearchDate from "../Components/SearchDate/SearchDate";
|
||||
import SearchUser from "../Components/SearchUser/searchUser";
|
||||
import Toggle from "../Components/Toggle/Toggle";
|
||||
import styles from "./Page.module.css"; // importamos el css
|
||||
|
||||
export default function Page() {
|
||||
const [machines] = useState([
|
||||
{
|
||||
hora_entrada: "10 ",
|
||||
min_utilizados: "20",
|
||||
hora_salida: "10:15",
|
||||
cuenta_asociada: "15",
|
||||
},
|
||||
]);
|
||||
const [tables] = useState([
|
||||
{
|
||||
no_mesa: "10 ",
|
||||
no_cuenta: "425530275",
|
||||
hora_entrada: "10:15",
|
||||
tiempo_asignado: "15",
|
||||
hora_salida: "10:30",
|
||||
},
|
||||
]);
|
||||
|
||||
const [alumnos] = useState([
|
||||
{
|
||||
tiempo_entrada: "10:10 ",
|
||||
tiempo_asignado: "15",
|
||||
Ubicacion_equipo: "2",
|
||||
},
|
||||
]);
|
||||
const [ubicacion_equipo, setUbicacionEquipo] = useState("");
|
||||
return (
|
||||
<section className='containerSection'>
|
||||
<h2 className='title'> BITACORA Y SANCIONES </h2>
|
||||
<section className="containerSection">
|
||||
<h2 className="title"> BITACORA Y SANCIONES </h2>
|
||||
|
||||
<SearchUser/>
|
||||
<Toggle
|
||||
defaultView="1"
|
||||
options={[
|
||||
{
|
||||
key: "1",
|
||||
label: "Bitacora de equipo",
|
||||
content: (
|
||||
<>
|
||||
<SearchDate />
|
||||
|
||||
<form className="containerForm">
|
||||
<label className="label">Ubicacion de equipo</label>
|
||||
|
||||
<div className="groupInput">
|
||||
<select
|
||||
value={ubicacion_equipo}
|
||||
onChange={(e) => setUbicacionEquipo(e.target.value)}
|
||||
>
|
||||
<option value="">-- Selecciona un equipo --</option>
|
||||
<option value="255">Equipo 255</option>
|
||||
</select>
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Asignar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className={styles.tableContainer}>
|
||||
<table className={styles.machineTable}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Hora Entrada</th>
|
||||
<th>Minutos utilizados</th>
|
||||
<th>Hora salida</th>
|
||||
<th>Cuenta asociada</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{machines.map((machine, index) => (
|
||||
<tr key={index}>
|
||||
<td>{machine.hora_entrada}</td>
|
||||
<td>{machine.min_utilizados}</td>
|
||||
<td>{machine.hora_salida}</td>
|
||||
<td>{machine.cuenta_asociada}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
label: "Bitacora de alumno",
|
||||
content: (
|
||||
<div className={styles.tableContainer}>
|
||||
<SearchDate />
|
||||
<table className={styles.machineTable}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tiempo Entrada</th>
|
||||
<th>Tiempo Asignado</th>
|
||||
<th>Ubicacion del equipo</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{alumnos.map((alumno, index) => (
|
||||
<tr key={index}>
|
||||
<td>{alumno.tiempo_entrada}</td>
|
||||
<td>{alumno.tiempo_asignado}</td>
|
||||
<td>{alumno.Ubicacion_equipo}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
label: "Bitacora mesas",
|
||||
content: (
|
||||
<div className={styles.tableContainer}>
|
||||
<SearchDate />
|
||||
<table className={styles.machineTable}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Mesa</th>
|
||||
<th>Cuenta</th>
|
||||
<th>Hora Entrada</th>
|
||||
<th>Tiempo Asignado</th>
|
||||
<th>Hora Salida</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{tables.map((table, index) => (
|
||||
<tr key={index}>
|
||||
<td>{table.no_mesa}</td>
|
||||
<td>{table.no_cuenta}</td>
|
||||
<td>{table.hora_entrada}</td>
|
||||
<td>{table.tiempo_asignado}</td>
|
||||
<td>{table.hora_salida}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
label: "Sanciones",
|
||||
content: <SearchUser />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
|
||||
);
|
||||
}
|
||||
//IO
|
||||
//IO
|
||||
|
||||
// by Tyrannuss
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
|
||||
function SearchDate() {
|
||||
const [date, setDate] = useState("");
|
||||
|
||||
return (
|
||||
<>
|
||||
<form className="containerForm">
|
||||
<label className="label">Fecha</label>
|
||||
<div className="groupInput">
|
||||
<input
|
||||
type="date"
|
||||
value={date}
|
||||
onChange={(e) => setDate(e.target.value)}
|
||||
placeholder="Selecciona una fecha..."
|
||||
/>
|
||||
<button className="button buttonSearch" type="submit">
|
||||
Buscar
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchDate;
|
||||
|
||||
//By Tyrannuss
|
||||
Reference in New Issue
Block a user