add new css styles to control events enlargement b00tc4mp#403

benjo12 · Mar 16, 2024 · e407cae · e407cae
1 parent d78116c
commit e407cae
Show file tree

Hide file tree

Showing 140 changed files with 22,273 additions and 46 deletions.
diff --git a/staff/benjamin-mayiba/project/app/package-lock.json b/staff/benjamin-mayiba/project/app/package-lock.json
diff --git a/staff/benjamin-mayiba/project/app/package.json b/staff/benjamin-mayiba/project/app/package.json
@@ -25,10 +25,13 @@
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.18",
     "eslint": "^8.56.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
     "vite": "^5.1.0"
   }
 }
diff --git a/staff/benjamin-mayiba/project/app/postcss.config.js b/staff/benjamin-mayiba/project/app/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/staff/benjamin-mayiba/project/app/src/components/EventForm.jsx b/staff/benjamin-mayiba/project/app/src/components/EventForm.jsx
@@ -5,13 +5,14 @@ function EventForm({ services, onCreateEvent }) {
   const [date, setDate] = useState("");
   const [time, setTime] = useState("");
   const [selectedServiceId, setSelectedServiceId] = useState("");
-
+ const [error, setError] = useState(null);
+
   const handleCreateEvent = (e) => {
     e.preventDefault();
 
     // Validation and event creation logic...
     if (!selectedServiceId) {
-      alert("Please select a service");
+      setError("Please select a service");
       return;
     }
 
@@ -21,7 +22,8 @@ function EventForm({ services, onCreateEvent }) {
 
   return (
     <div>
-
+        {error && <p>{error}</p>}
+      {!error && <div>
       <h2>Create Event</h2>
       <form onSubmit={handleCreateEvent}>
         <>
@@ -58,6 +60,7 @@ function EventForm({ services, onCreateEvent }) {
           <button className="event-add" type="submit">Add</button>
         </>
       </form>
+      </div>}
     </div>
   );
 }

diff --git a/staff/benjamin-mayiba/project/app/src/components/Profile.jsx b/staff/benjamin-mayiba/project/app/src/components/Profile.jsx
@@ -53,30 +53,30 @@ export default function Profile({onChangeEmail, onChangePassword}){
     }, [successMessage])
 
     return (
-        <div className="container">
+        <div>
 
             {error && <p>{error}</p>}
             {!error && successMessage && <p>{successMessage}</p>} 
             {!error && !successMessage && (
                 <div>
                     <br/>
                     <form className="form" onSubmit={handleChangeEmailSubmit}>
-                        <label htmlFor="new-email-input">New E-mail</label>
+                        <label className="label" htmlFor="new-email-input">New E-mail</label>
                         <input className="input" id="new-email-input" type="email" value={newEmail} onChange={e => setNewEmail(e.target.value)} />
-                        <label htmlFor="new-email-confirm-input">Confirm  E-mail</label>
+                        <label className="label" htmlFor="new-email-confirm-input">Confirm  E-mail</label>
                         <input className="input" id="new-email-confirm-input" type="email" value={confirmEmail} onChange={e => setConfirmEmail(e.target.value)} />
-                        <label htmlFor="password-input">Password</label>
+                        <label className="label" htmlFor="password-input">Password</label>
                         <input className="input" type="password" id="password-input" value={passwordEmail} onChange={e => setPasswordEmail(e.target.value)} />
                         <button type="submit">Update e-mail</button>
                     </form>
                     <br/>
                     <form className="form" onSubmit={handleChangePasswordSubmit}>
                      <br/>
-                        <label htmlFor="password-input">Current password</label>
+                        <label className="label" htmlFor="password-input">Current password</label>
                         <input className="input" type="password" id="password-input" value={currentPassword} onChange={e => setCurrentPassword(e.target.value)} />
-                        <label htmlFor="new-password-input">New password</label>
+                        <label className="label" htmlFor="new-password-input">New password</label>
                         <input className="input" id="new-password-input" type="password" value={newPassword} onChange={e => setNewPassword(e.target.value)} />
-                        <label htmlFor="new-password-confirm-input">Confirm password</label>
+                        <label className="label" htmlFor="new-password-confirm-input">Confirm password</label>
                         <input className="input" id="new-password-confirm-input" type="password" value={passwordConfirm} onChange={e => setPasswordConfirm(e.target.value)} />
                         <button type="submit">Update password</button>
                     </form>

diff --git a/staff/benjamin-mayiba/project/app/src/index.css b/staff/benjamin-mayiba/project/app/src/index.css
@@ -32,6 +32,10 @@ html, body {
     gap: 5px;
     margin-top: -20px;
 }
+.form-login, .form-register{
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
 .header {
   display: flex;
   justify-content: space-between;
@@ -76,6 +80,14 @@ h2 {
   padding: 20px;
   margin: 20px 0; 
   background-color: darkslategrey;
+  margin-top: -30px;
+}
+.event-items{
+  /* Ajustar altura */
+  height: 380px;
+  max-height: 600px;
+  overflow: auto;
+
 }
 
 a { 
@@ -111,9 +123,14 @@ a {
 }
 
 .footer {
+  background-color: white;
   display: flex;
-  justify-content:center;
-  align-items: flex-end;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  min-height: 3rem;
 }
 
 .footer button {
@@ -140,4 +157,29 @@ a {
 
 .event-add, .event-service, .event-time{
   margin-left: 5px;
+}
+
+.link::before {
+  content: "[ ";
+}
+.link::after {
+  content: " ]";
+}
+
+
+.btn-events:hover {
+  content: "Events";
+}
+
+@media (min-width: 768px) {
+  .event-container {
+    display: grid;
+    grid-template-columns: repeat(2, fr);
+  }
+}
+@media (min-width: 1024px) {
+  .event-container {
+    display: grid;
+    grid-template-columns: repeat(3, fr);
+  }
 }
diff --git a/staff/benjamin-mayiba/project/app/src/pages/Home.jsx b/staff/benjamin-mayiba/project/app/src/pages/Home.jsx
@@ -16,6 +16,7 @@ export default function Home(props) {
   const [showEventForm, setShowEventForm] = useState(false);
   const [services, setServices] = useState([]); // Estado para almacenar la lista de servicios
   const [submitted, setSubmitted] = useState(false);
+  const [error, setError] = useState(false)
 
 
   const navigate = useNavigate();
@@ -46,6 +47,7 @@ export default function Home(props) {
   const handleAddEventClick = () => {
     setShowMessage(false)
     setSubmitted(false);
+    setError(false)
     setShowEventForm(true); // Muestra el formulario de creación de evento
     navigate("/addEvent"); // Navega a la ruta "/addEvent"
   };
@@ -60,7 +62,9 @@ export default function Home(props) {
       // Ocultar el formulario de creación de evento
       setShowEventForm(false);
     } catch (error) {
-      alert(error.message);
+       setShowEventForm(false);
+       setError(error.message);
+
     }
   };
 
@@ -74,17 +78,20 @@ export default function Home(props) {
     navigate("/services");
     setShowMessage(false); // Oculta el mensaje al cambiar de página
     setSubmitted(false);
+    setError(false)
   };
 
   const handleProfileClick = () =>{
     navigate("/profile");
     setShowMessage(false); 
     setSubmitted(false);
+    setError(false)
   }
 
   const handleShowEvents = async () => {
     navigate("/events");
     setSubmitted(false);
+    setError(false)
     try {
       const fullEvents = await logic.retrieveEvent();
       if (Array.isArray(fullEvents) && fullEvents.length === 0) {
@@ -96,7 +103,7 @@ export default function Home(props) {
         setShowMessage(false); // Oculta el mensaje si hay eventos disponibles
       }
     } catch (error) {
-      alert(error.message);
+      setError(error.message);
     }
   };
 
@@ -119,7 +126,7 @@ export default function Home(props) {
         const fetchedServices = await logic.retrieveServices(); // No necesitas pasar el userId aquí
         setServices(fetchedServices); // Actualiza la lista de servicios
       } catch (error) {
-        console.error(error.message);
+        setError(error.message);
       }
     })();
 
@@ -139,7 +146,7 @@ export default function Home(props) {
         setEvents(updatedEvents);
       }
     } catch (error) {
-      console.error('Error deleting event:', error.message);
+      setError('Error deleting event:', error.message);
     }
   };
 
@@ -169,40 +176,42 @@ export default function Home(props) {
 
       {/* Renderizar EventList con los eventos solo si hay eventos presentes */}
       <div className="event">
+
         <div className="event-container">
           {/* Mensaje de eventos */}
           {showMessage && <p>{message}</p>}
            {/* Mensaje de evento creado con exito */}
           {submitted && <div>Event created successfully!</div>}
+          {error && <div>{error}</div>}
 
           <Routes>
             <Route
               path="/events"
-              element={events.length > 0 ? <div><EventList events={events} onDeleteEvent={handleDeleteEvent} /></div> : null}
+              element={events.length > 0 ? <div className="event-items"><EventList events={events} onDeleteEvent={handleDeleteEvent} /></div> : null}
             />
 
             {/* Mostrar el componente Services si showServices es true */}
-            <Route path="/services" element={<div><Services onServiceLogout={handleLogout} /></div>} />
+            <Route path="/services" element={error ? null : <div><Services onServiceLogout={handleLogout} /></div>} />
 
-            <Route path="/profile" element={<Profile onChangeEmail={handleChangeEmail} onChangePassword={handleChangePassword}/>}/>
+            <Route path="/profile" element={error ? null : <div><Profile className="profile-container" onChangeEmail={handleChangeEmail} onChangePassword={handleChangePassword}/></div>}/>
 
             {/* Mostrar ServiceForm si showAddServices es true */}
-            <Route path="/addService" element={<div><ServiceForm /></div>} />
+            <Route path="/addService" element={error ? null : <div><ServiceForm /></div>} />
 
             {/* Mostrar EventForm si showEventForm es true */}
-            {showEventForm && <Route path="/addEvent" element={<EventForm services={services} onCreateEvent={handleCreateEvent} />} />}
+            {showEventForm && <Route path="/addEvent" element={error ? null : <div><EventForm services={services} onCreateEvent={handleCreateEvent} /></div>} />}
           </Routes>
         </div>
       </div>
 
       {/* Botones Add Event y Add Service al final de la página */}
       <div className="footer">
-        <div><button onClick={handleProfileClick}>👤</button> </div>
-        <button className="btn" onClick={handleShowEvents}>📅</button>
-        <div className="add-event"> <button  onClick={handleAddEventClick}>➕</button></div>
-        <div> <button  onClick={handleShowServices}>💼</button> </div>
+        <div><button title="profile" onClick={handleProfileClick}>👤</button> </div>
+        <button className="btn" title="events" onClick={handleShowEvents}>📅</button>
+        <div className="add-event" title=" add events"> <button  onClick={handleAddEventClick}>➕</button></div>
+        <div> <button title="services"  onClick={handleShowServices}>💼</button> </div>
       </div>
 
-    </div>
+    </div>  
   );
 }
diff --git a/staff/benjamin-mayiba/project/app/src/pages/Login.jsx b/staff/benjamin-mayiba/project/app/src/pages/Login.jsx
@@ -40,17 +40,17 @@ export default function Login(props) {
         <div>
           <h1>Login</h1>
 
-          <form className="form" onSubmit={handleSubmit}>
-            <label htmlFor="email-input">E-mail</label>
-            <input id="email-input" type="email" />
+          <form className="form form-login" onSubmit={handleSubmit}>
+            <label className="label" htmlFor="email-input">E-mail</label>
+            <input className="input" id="email-input" type="email" />
 
-            <label htmlFor="password-input">Password</label>
-            <input type="password" id="password-input" />
+            <label className="label" htmlFor="password-input">Password</label>
+            <input className="input" type="password" id="password-input" />
 
             <button type="submit">Login</button>
           </form>
-
-          <a href="" onClick={handleRegisterClick}>
+         
+          <a className="link" href="" onClick={handleRegisterClick}>
             Register
           </a>
         </div>

diff --git a/staff/benjamin-mayiba/project/app/src/pages/Register.jsx b/staff/benjamin-mayiba/project/app/src/pages/Register.jsx
@@ -41,20 +41,20 @@ export default function Register(props) {
         <div>
           <h1>Register</h1>
 
-          <form className="form" onSubmit={handleSubmit}>
-            <label htmlFor="name-input">Name</label>
-            <input id="name-input" type="text" />
+          <form className="form form-register" onSubmit={handleSubmit}>
+            <label className="label" htmlFor="name-input">Name</label>
+            <input className="input" id="name-input" type="text" />
 
-            <label htmlFor="email-input">E-mail</label>
-            <input id="email-input" type="email" />
+            <label className="label" htmlFor="email-input">E-mail</label>
+            <input className="input" id="email-input" type="email" />
 
-            <label htmlFor="password-input">Password</label>
-            <input type="password" id="password-input" />
+            <label className="label"  htmlFor="password-input">Password</label>
+            <input className="input"  type="password" id="password-input" />
 
-            <button type="submit">Register</button>
+            <button className="button" type="submit">Register</button>
           </form>
 
-          <a href="" onClick={handleLoginClick}>
+          <a className="link" href="" onClick={handleLoginClick}>
             Login
           </a>
         </div>

diff --git a/staff/benjamin-mayiba/project/app/tailwind.config.js b/staff/benjamin-mayiba/project/app/tailwind.config.js
@@ -0,0 +1,26 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html',
+    './src/**/*.{js,jsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        inter: ['Inter', 'sans-serif'],
+      },
+      colors: {
+        darkslategrey: '#2f4f4f',
+        black: '#000',
+      },
+      backgroundColor: {
+        b0aec8: '#b0aec8',
+      },
+      spacing: {
+        '1.25': '1.25rem',
+        '37.5': '37.5rem',
+        '43.75': '43.75rem',
+      },
+    },
+  },
+  plugins: [],
+}
+
diff --git a/staff/benjamin-mayiba/project/old version/app.8/.eslintrc.cjs b/staff/benjamin-mayiba/project/old version/app.8/.eslintrc.cjs
@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}