Skip to content

Commit

Permalink
tipos de notificacion
Browse files Browse the repository at this point in the history
  • Loading branch information
@luzmagurzua
luzmagurzua committed Nov 1, 2024
1 parent 707515a commit 65b7d8d
Show file tree
Hide file tree
Showing 3 changed files with 162 additions and 3,310 deletions.
131 changes: 89 additions & 42 deletions src/pages/users/notificaciones.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import React, { useState } from 'react';
import Navbar from '../../components/Navbar';
import Footer from '../../components/Footer';
import '../../styles/users/notification.css'; // Verifica que la ruta al CSS sea correcta
import '../../styles/helloworld.css';
import '../../styles/users/notification.css';
import '../../styles/helloworld.css';

const Notification = () => {
const [notificationType, setNotificationType] = useState('');
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
const [images, setImages] = useState([]);

const handleNotificationTypeChange = (e) => setNotificationType(e.target.value);
const handleTitleChange = (e) => setTitle(e.target.value);
const handleContentChange = (e) => setContent(e.target.value);
const handleImageChange = (e) => {
Expand All @@ -18,59 +20,104 @@ const Notification = () => {

const handleSend = () => {
const notificationData = {
notificationType,
title,
content,
images,
};
// Aquí puedes manejar el envío de la notificación, por ejemplo, haciendo una petición a una API
console.log('Notificación enviada:', notificationData);
// Aquí puedes manejar el envío de la notificación, por ejemplo, haciendo una petición a una API
};

return (
<div id="hello-world-container">
<Navbar></Navbar>
<br></br>
<br></br>
<br></br>
<br></br>
<Navbar />
<br /><br /><br /><br />


<div className="notification-container">
<h2>Crear Notificación</h2>
<div className="form-group">
<label htmlFor="title">Título:</label>
<input
type="text"
id="title"
value={title}
onChange={handleTitleChange}
placeholder="Ingresa el título de la notificación"
/>
</div>
<div className="form-group">
<label htmlFor="content">Contenido:</label>
<textarea
id="content"
value={content}
onChange={handleContentChange}
placeholder="Ingresa el contenido de la notificación"
/>
</div>
<div className="form-group">
<label htmlFor="images">Imágenes:</label>
<input
type="file"
id="images"
multiple
onChange={handleImageChange}
/>
<div className="notification-container">
<h2>Crear Notificación</h2>

{/* Dropdown para seleccionar el tipo de notificación */}
<div className="form-group">
<label htmlFor="notificationType">Tipo de Notificación:</label>
<select id="notificationType" value={notificationType} onChange={handleNotificationTypeChange}>
<option value="">Selecciona el tipo de notificación</option>
<option value="programada">Notificaciones Programadas</option>
<option value="escalonada">Notificaciones Escalonadas</option>
<option value="individual">Notificaciones Individuales</option>
<option value="masiva">Notificaciones Masivas (One Time Shot)</option>
<option value="georeferenciada">Notificaciones Georeferenciadas</option>
<option value="selectiva">Notificaciones Selectivas</option>
<option value="movil">Notificaciones Móviles</option>
<option value="web">Notificaciones Web</option>
</select>
</div>

{/* Condicional para mostrar los campos específicos según el tipo de notificación */}
{notificationType && (
<>
<div className="form-group">
<label htmlFor="title">Título:</label>
<input
type="text"
id="title"
value={title}
onChange={handleTitleChange}
placeholder="Ingresa el título de la notificación"
/>
</div>
<div className="form-group">
<label htmlFor="content">Contenido:</label>
<textarea
id="content"
value={content}
onChange={handleContentChange}
placeholder="Ingresa el contenido de la notificación"
/>
</div>

{/* Campo de imágenes */}
{notificationType === 'masiva' || notificationType === 'georeferenciada' ? (
<div className="form-group">
<label htmlFor="images">Imágenes:</label>
<input
type="file"
id="images"
multiple
onChange={handleImageChange}
/>
</div>
) : null}

{/* Otros campos específicos según el tipo de notificación */}
{notificationType === 'programada' && (
<div className="form-group">
<label htmlFor="scheduleDate">Fecha Programada:</label>
<input type="datetime-local" id="scheduleDate" />
</div>
)}
{notificationType === 'escalonada' && (
<div className="form-group">
<label htmlFor="escalationSteps">Pasos de Escalonamiento:</label>
<input type="number" id="escalationSteps" placeholder="Número de pasos" />
</div>
)}
{notificationType === 'georeferenciada' && (
<div className="form-group">
<label htmlFor="location">Ubicación:</label>
<input type="text" id="location" placeholder="Ingresa la ubicación" />
</div>
)}

<button className="send-button" onClick={handleSend}>
Enviar Notificación
</button>
</>
)}
</div>
<button className="send-button" onClick={handleSend}>
Enviar Notificación
</button>
</div>
</div>
);
};

export default Notification;

132 changes: 73 additions & 59 deletions src/styles/users/notification.css
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,74 @@

.notification-container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.notification-container h2 {
text-align: center;
color: #333;
}

.form-group {
margin-bottom: 15px;
margin-right: 20px;
}

.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}

.form-group input[type="text"],
.form-group textarea,
.form-group input[type="file"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}

.form-group textarea {
resize: vertical;
height: 100px;
}

.send-button {
display: block;
width: 100%;
padding: 10px;
background-color: #8c52ff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}

.send-button:hover {
background-color: #6f42c1;
}

max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.notification-container h2 {
text-align: center;
color: #333;
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="datetime-local"],
.form-group select,
.form-group textarea,
.form-group input[type="file"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box;
}

.form-group select {
appearance: none; /* Para mejorar el estilo del dropdown */
background-color: #fff;
cursor: pointer;
}

.form-group textarea {
resize: vertical;
height: 100px;
}

.send-button {
display: block;
width: 100%;
padding: 10px;
background-color: #8c52ff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}

.send-button:hover {
background-color: #6f42c1;
}

/* Estilos adicionales para mejorar la apariencia del dropdown */
.form-group select:focus {
outline: none;
border-color: #8c52ff;
box-shadow: 0 0 5px rgba(140, 82, 255, 0.3);
}
Loading

0 comments on commit 65b7d8d

Please sign in to comment.