Skip to content

Commit

Permalink
create Time component, move css styles to tailwind b00tc4mp#403
Browse files Browse the repository at this point in the history
  • Loading branch information
@benjo12
benjo12 committed Mar 20, 2024
1 parent 1f304a8 commit 8537969
Show file tree
Hide file tree
Showing 49 changed files with 7,698 additions and 178 deletions.
4 changes: 2 additions & 2 deletions staff/benjamin-mayiba/project/app/src/components/EventList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@ function EventList({ events, onDeleteEvent }) {
<article className="event-article" key={event.id}>
<h3>{event.name}</h3>
<p>Date: {event.date} - Time: {event.time}</p>
<button onClick={() => setSelectedEventId(event.id)}>Select</button>
<button title="Select event" onClick={() => setSelectedEventId(event.id)}>Select</button>
</article>
))}
{selectedEventId !== null && (
<div>
<button className="btn-delete" onClick={handleDeleteClick}><span><FaTrash/></span></button>
<button className="btn-delete" onClick={handleDeleteClick}><span><FaTrash title="Delete"/></span></button>
<button className='btn-cancel' onClick={handleCancelClick}>Cancel</button>
</div>
)}
Expand Down
9 changes: 5 additions & 4 deletions staff/benjamin-mayiba/project/app/src/components/Services.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function Services(props) {
const fetchedServices = await logic.retrieveServices(userId);
if(fetchedServices.length === 0){

setMessage('No service added')
setMessage('No services added yet')
}else{
//console.log(fetchedServices);
setServices(fetchedServices);
Expand Down Expand Up @@ -69,7 +69,7 @@ function Services(props) {
<div>

{/* Botón "Add Service" */}
{!showServiceForm && <div className="btn-services"><button onClick={handleAddServiceClick}>➕</button><button className="btn-logout" onClick={handleLogoutClick}> <FaSignOutAlt /> </button></div>}
{!showServiceForm && <div className="btn-services"><button title="Add service" onClick={handleAddServiceClick}>➕</button><button className="btn-logout" title="Logout" onClick={handleLogoutClick}> <FaSignOutAlt /> </button></div>}

{/* Mostrar el mensaje de error si existe */}
{error && <p>{error}</p>}
Expand All @@ -80,17 +80,18 @@ function Services(props) {

{!message && !error && showServiceForm && <ServiceForm />}

{!error && !message && !showServiceForm && (
{!error && !message && !showServiceForm && services.length > 0 && (
<div>

<h2>Service list</h2>
<h2>Service list</h2>
<ul>
{services.map((service) => (
<li key={service.id}>
<div>
<span>
<FaTrash
className="trash-icon"
title="Delete service"
onClick={() => handleDeleteService(service.id)}
/>
</span>
Expand Down
37 changes: 37 additions & 0 deletions staff/benjamin-mayiba/project/app/src/components/Time.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React, { useState, useEffect } from "react";

export default function Time() {
const [currentDateTime, setCurrentDateTime] = useState(new Date());
// Efecto para actualizar la hora cada segundo
useEffect(() => {
const intervalID = setInterval(() => {
setCurrentDateTime(new Date());
}, 1000); // Actualizar cada segundo

// Limpieza del intervalo para evitar fugas de memoria
return () => clearInterval(intervalID);
}, []); // El efecto se ejecuta solo una vez al montar el componente

// Función para formatear la hora, minutos y segundos con ceros a la izquierda si es necesario
const formatTimeUnit = (unit) => {
return unit < 10 ? `0${unit}` : unit;
};

// Función para formatear la fecha en formato DD/MM/YYYY
const formatDate = (date) => {
const day = formatTimeUnit(date.getDate());
const month = formatTimeUnit(date.getMonth() + 1); // Los meses comienzan en 0
const year = date.getFullYear();
return `${day}/${month}/${year}`;
};

return (
<div>
<p className="time">{`${formatDate(currentDateTime)} ${formatTimeUnit(
currentDateTime.getHours()
)}:${formatTimeUnit(currentDateTime.getMinutes())}:${formatTimeUnit(
currentDateTime.getSeconds()
)}`}</p>
</div>
);
}
153 changes: 50 additions & 103 deletions staff/benjamin-mayiba/project/app/src/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,165 +1,116 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

* {
font-family: Inter;
font-family: Inter;
}

html, body {
height: 100%;
margin: 0;
padding: 0;
@apply h-full m-0 p-0;
}

.home-container {
@apply bg-center bg-cover h-screen;
background-color: #b0aec8;
background-position: center;
background-size: cover;
height: 100vh;

}

.view {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}

.form {
display: flex;
flex-direction: column;
max-width: 240px;
gap: 5px;
margin-top: -20px;
}
.form-login, .form-register{
margin-bottom: 10px;
margin-top: 10px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
@apply flex justify-between items-center;
}

.header h1 {
border: 3px solid black;
margin-left: 10px;
padding: 20px;
margin: 20px 0;
color:rgb(236, 12, 49);
@apply my-5 mr-0 py-5 px-5 text-red-600 border-solid border-4 border-black;

}
.time-header{
@apply size-2.5;
}

.header button {
margin-right: 10px;
margin-left: 10px;
@apply mx-2.5;
background-color: #b0aec8;
}

.header button:nth-of-type(1) {
margin-left: 150px; /* Ajusta el valor según sea necesario */
@apply ml-[150px] ;
}

h2 {
text-align: center;
@apply text-center;
}

a {
@apply text-black no-underline;
}

.view {
@apply flex flex-col items-center gap-2.5;
}

.form {
@apply flex flex-col max-w-60 mt-[-20px];
gap: 5px;
}

.form-login, .form-register{
@apply mb-2.5 mt-2.5;
}

.event-select {
@apply font-bold;
font-size: 40px;
font-weight: bold;
}

.event {
display: flex;
justify-content: center;
font-weight: bold;
@apply flex justify-center font-bold;
font-size: medium;
}

.event-container {
border: 2px solid #ccc;
padding: 20px;
margin: 20px 0;
@apply border-2 border-solid border-gray-300 p-5 ml-0 mt-5;
background-color: rgb(68, 107, 107);
margin-top: -30px;
}
.event-items{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
height: 370px;
max-height: 500px;
overflow: auto;
@apply flex flex-wrap items-center justify-between h-[370px] max-h-[500px] overflow-auto;
}

.event-article {
@apply bg-white bg-opacity-80 rounded-lg p-2.5 my-2.5;
}

a {
color:black;
text-decoration: none;
.event-form-container {
@apply fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-5 border border-gray-300 rounded shadow-md;
}

.serviceButton{
margin-left: 20px;
@apply ml-5;
}

.trash-icon{
color: white;
}
/* Ajustes en el CSS */
.event-article {
background-color: rgba(255, 255, 255, 0.8); /* Fondo semi-transparente */
border-radius: 10px;
padding: 10px;
margin: 10px 0;
}

.event-form-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
@apply text-white mr-2;
}

.footer {
background-color: white;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0;
width: 100%;
min-height: 3rem;
@apply bg-white flex justify-center items-center fixed bottom-0 w-full h-12;
}

.footer button {
margin-right: 10px; /* Ajusta el margen entre los botones */
.footer div, .footer button {
@apply mr-2.5;
}


.add-event button {
margin-left: 10px; /* Ajusta el margen entre los botones */
}
.footer div {
margin-right: 10px; /* Ajusta el margen entre los contenedores de los botones */
@apply ml-2.5;
}

.btn-services,.btn-logout{
display: flex;
justify-content: space-between;
@apply flex justify-between;
}
.btn-cancel{
margin-left: 175px;
}

.trash-icon {
margin-right: 8px; /* Ajusta el valor según sea necesario */
@apply ml-[175px];
}

.event-add, .event-service, .event-time{
margin-left: 5px;
@apply ml-[5px];
}

.link::before {
Expand All @@ -170,10 +121,6 @@ a {
}


.btn-events:hover {
content: "Events";
}

@media (min-width: 768px) {
.event-container {
display: grid;
Expand Down
Loading

0 comments on commit 8537969

Please sign in to comment.