Skip to content

Commit

Permalink
notificaciones
Browse files Browse the repository at this point in the history
  • Loading branch information
@luzmagurzua
luzmagurzua committed Nov 6, 2024
1 parent 6828091 commit bd5b0bc
Show file tree
Hide file tree
Showing 2 changed files with 254 additions and 168 deletions.
303 changes: 148 additions & 155 deletions src/pages/users/notificaciones.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,205 +4,198 @@ import Footer from '../../components/Footer';
import '../../styles/users/notification.css';

const Notification = () => {
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
const [images, setImages] = useState([]);
const [targetAudience, setTargetAudience] = useState('');
const [scheduleDate, setScheduleDate] = useState('');
const [repeatInterval, setRepeatInterval] = useState(1);
const [repeatUnit, setRepeatUnit] = useState('semana');
const [daysOfWeek, setDaysOfWeek] = useState([]);
const [endCondition, setEndCondition] = useState('never');
const [endDate, setEndDate] = useState('');
const [repeatCount, setRepeatCount] = useState('');
const [specificUser, setSpecificUser] = useState('');
const [comuna, setComuna] = useState('');
const [preference, setPreference] = useState('');
const [noRepeat, setNoRepeat] = useState(false);

const handleTargetAudienceChange = (e) => setTargetAudience(e.target.value);
const handleTitleChange = (e) => setTitle(e.target.value);
const handleContentChange = (e) => setContent(e.target.value);
const handleImageChange = (e) => setImages(Array.from(e.target.files));
const handleScheduleDateChange = (e) => setScheduleDate(e.target.value);
const handleRepeatIntervalChange = (e) => setRepeatInterval(e.target.value);
const handleRepeatUnitChange = (e) => setRepeatUnit(e.target.value);
const handleSpecificUserChange = (e) => setSpecificUser(e.target.value);
const handleComunaChange = (e) => setComuna(e.target.value);
const handlePreferenceChange = (e) => setPreference(e.target.value);
const handleEndConditionChange = (e) => setEndCondition(e.target.value);
const handleEndDateChange = (e) => setEndDate(e.target.value);
const handleRepeatCountChange = (e) => setRepeatCount(e.target.value);
const handleNoRepeatChange = (e) => setNoRepeat(e.target.checked);

const handleDayOfWeekToggle = (day) => {
setDaysOfWeek((prev) =>
const [titulo, setTitulo] = useState('');
const [mensaje, setMensaje] = useState('');
const [tipo, setTipo] = useState('');
const [datetime_start, setDatetimeStart] = useState('');
const [datetime_end, setDatetimeEnd] = useState('');
const [repeat, setRepeat] = useState(false); // Cambiado a booleano para checkbox
const [intervalo, setIntervalo] = useState(''); // Tipo de intervalo (día, semana, mes, etc.)
const [intervalo_valor, setIntervaloValor] = useState(''); // Valor numérico del intervalo
const [dias_de_semana, setDiasDeSemana] = useState([]);
const [usuario_id, setUsuarioId] = useState('');
const [preferencias_noti, setPreferenciasNoti] = useState([]);

const handleTituloChange = (e) => setTitulo(e.target.value);
const handleMensajeChange = (e) => setMensaje(e.target.value);
const handleTipoChange = (e) => setTipo(e.target.value);
const handleDatetimeStartChange = (e) => setDatetimeStart(e.target.value);
const handleDatetimeEndChange = (e) => setDatetimeEnd(e.target.value);
const handleRepeatChange = (e) => setRepeat(e.target.checked);
const handleIntervaloChange = (e) => setIntervalo(e.target.value);
const handleIntervaloValorChange = (e) => setIntervaloValor(e.target.value);
const handleUsuarioIdChange = (e) => setUsuarioId(e.target.value);

const handleDiasDeSemanaToggle = (day) => {
setDiasDeSemana((prev) =>
prev.includes(day) ? prev.filter((d) => d !== day) : [...prev, day]
);
};

const handlePreferenciaChange = (preference) => {
setPreferenciasNoti((prev) =>
prev.includes(preference)
? prev.filter((pref) => pref !== preference)
: [...prev, preference]
);
};

const handleSend = () => {
const notificationData = {
title,
content,
images,
targetAudience,
scheduleDate,
repeatInterval: noRepeat ? null : repeatInterval,
repeatUnit: noRepeat ? null : repeatUnit,
daysOfWeek: noRepeat ? [] : daysOfWeek,
endCondition: noRepeat ? null : endCondition,
endDate: noRepeat && endCondition === 'date' ? endDate : null,
repeatCount: noRepeat && endCondition === 'count' ? repeatCount : null,
specificUser: targetAudience === 'notificacion_individual' ? specificUser : null,
comuna: targetAudience === 'notificacion_georeferenciada' ? comuna : null,
preference: targetAudience === 'notificacion_selectiva' ? preference : null,
titulo,
mensaje,
tipo,
datetime_start,
datetime_end,
repeat,
intervalo,
intervalo_valor,
dias_de_semana,
usuario_id,
preferencias_noti,
};
console.log('Notificación enviada:', notificationData);
};

const preferenceOptions = [
'Salud y Belleza', 'Arte y Cultura', 'Cine, Teatro y Espectáculos',
'Comida y Restaurantes', 'Hobbies', 'Música', 'Deportes y Actividad Física',
'Mascotas', 'Hogar', 'Ciencia y Tecnología', 'Educación', 'Mundo Automotor',
'Mundo Niños', 'Viajes y Turismo'
];

return (
<div id="hello-world-container">
<br></br>
<br></br>
<div className="notification-container">
<h2>Crear Notificación</h2>


<select value={targetAudience} onChange={handleTargetAudienceChange}>
<option value="">-- Selecciona una opción --</option>
<option value="notificacion_individual">Notificación individual</option>
<option value="notificacion_georeferenciada">Notificación georeferenciada</option>
<option value="notificacion_selectiva">Notificación selectiva</option>
<option value="notificacion_movil">Notificación móvil</option>
<option value="notificacion_web">Notificación web</option>
</select>




{targetAudience === 'notificacion_individual' && (
<select value={tipo} onChange={handleTipoChange}>
<option value="">-- Selecciona una opción --</option>
<option value="notificacion_individual">Notificación individual</option>
<option value="notificacion_georeferenciada">Notificación georeferenciada</option>
<option value="notificacion_selectiva">Notificación selectiva</option>
<option value="notificacion_movil">Notificación móvil</option>
<option value="notificacion_web">Notificación web</option>
<option value="notificacion_masiva">Notificación masiva (web + móvil)</option>
</select>

{tipo === 'notificacion_individual' && (
<div className="form-group">
<label>Nombre del usuario:</label>
<input type="text" value={specificUser} onChange={handleSpecificUserChange} />
<input type="text" value={usuario_id} onChange={handleUsuarioIdChange} />
</div>
)}
{targetAudience === 'notificacion_georeferenciada' && (
<div className="form-group">
<label>Comuna:</label>
<input type="text" value={comuna} onChange={handleComunaChange} />
</div>
)}
{targetAudience === 'notificacion_selectiva' && (

{tipo === 'notificacion_selectiva' && (
<div className="form-group">
<br></br>
<br></br>

<label>Preferencias:</label>
<select value={preference} onChange={handlePreferenceChange}>
<option value="">-- Selecciona una preferencia --</option>
<option value="deportes">Deportes</option>
<option value="musica">Música</option>
<option value="arte">Arte</option>
<option value="tecnologia">Tecnología</option>

</select>

<br></br>

<form className="my-form">
{preferenceOptions.map((preference, index) => (
<div key={index}>
<input
type="checkbox"
id={`check-${index}`}
checked={preferencias_noti.includes(preference)}
onChange={() => handlePreferenciaChange(preference)}
/>
<label htmlFor={`check-${index}`}>{preference}</label>
</div>
))}
</form>
</div>
)}

{/* Campos para notificación escalonada */}
<div className="form-group">
<br></br>
<label>Título:</label>
<input type="text" value={title} onChange={handleTitleChange} />
<br></br>
<input type="text" value={titulo} onChange={handleTituloChange} />
<br></br>
<br></br>
<label>Mensaje:</label>
<textarea value={content} onChange={handleContentChange} />
<br></br>
<textarea value={mensaje} onChange={handleMensajeChange} />
</div>

<div className="form-group">
<br></br>
<label>Fecha y hora de inicio:</label>
<br></br>
<input type="datetime-local" value={datetime_start} onChange={handleDatetimeStartChange} />
<br></br>
<br></br>
<br></br>
<label>Fecha y hora de término:</label>
<br></br>
<input type="datetime-local" value={datetime_end} onChange={handleDatetimeEndChange} />
</div>

{/* Opción de "No se repite" */}
<div className="form-group">
<label>
<input type="checkbox" checked={noRepeat} onChange={handleNoRepeatChange} />
No se repite (tengo que preguntar cuando lo quiero enviar o si lo quiero enviar de inmediato (fecha de inicio + hora))
<input type="checkbox" checked={repeat} onChange={handleRepeatChange} />
Repetir
</label>
</div>
{repeat && (
<div className="form-group">
<label>Intervalo de repetición:</label>
<br></br>
<div className="inline-input">
<input
type="number"
min="1"
value={intervalo_valor}
onChange={handleIntervaloValorChange}
/>
<select value={intervalo} onChange={handleIntervaloChange}>
<option value="dia">Día</option>
<option value="semana">Semana</option>
<option value="mes">Mes</option>
<option value="año">Año</option>
</select>
</div>
</div>
)}

{/* Configuración de repetición (bloqueada si "No se repite" está seleccionado) */}
{!noRepeat && (
<>
<div className="form-group">
<label>Repetir cada:</label>
<input
type="number"
min="1"
value={repeatInterval}
onChange={handleRepeatIntervalChange}
disabled={noRepeat}
/>
<select value={repeatUnit} onChange={handleRepeatUnitChange} disabled={noRepeat}>
<option value="día">Día</option>
<option value="semana">Semana</option>
<option value="mes">Mes</option>
<option value="año">Año</option>
</select>
</div>

{repeatUnit === 'semana' && (
<div className="form-group">
<label>Se repite el:</label>
{['L', 'M', 'W', 'J', 'V', 'S', 'D'].map((day) => (
<button
type="button"
key={day}
onClick={() => handleDayOfWeekToggle(day)}
className={daysOfWeek.includes(day) ? 'day-button selected' : 'day-button'}
disabled={noRepeat}
>
{day}
</button>
))}
</div>
)}

<div className="form-group">
<div className="end-options">
<label>
<input
type="radio"
value="date"
checked={endCondition === 'date'}
onChange={handleEndConditionChange}
disabled={noRepeat}
/>
Día:
{endCondition === 'date' && (
<input
type="date"
value={endDate}
onChange={handleEndDateChange}
disabled={noRepeat}
/>
)}
</label>
Falta:
Hora de Inicio
Hora de Término
A que hora lo envío? (no obligatorio)
</div>
</div>
</>



{repeat && (
<div className="form-group">
<br></br>
<label>Se repite el:</label>
<br></br>
{['L', 'M', 'W', 'J', 'V', 'S', 'D'].map((day) => (
<button
type="button"
key={day}
onClick={() => handleDiasDeSemanaToggle(day)}
className={dias_de_semana.includes(day) ? 'day-button selected' : 'day-button'}
>
{day}
</button>

))}
</div>
)}

<br></br>

<button className="send-button" onClick={handleSend}>

Enviar Notificación
</button>
*Implementar vista de notificaciones que he enviado (para repetir promoción, poder editar, eliminar, (GET, UPDATE, DELETE) para no escribirla denuevo)
*poder seleccionar multiples preferencias y agregar poder enviar una notificacion a usuarios con un mismo dominio de correo y teléfono
*notificacion individual debe tener un autocomplete
*notificacion georeferenciada debe incluir la georeferencia en tiempo real del usuario
*notificacion georeferenciada debe tener un autocomplete
*falta la masiva (web + movil)
</div>
<br></br>
</div>
);
};

export default Notification;
export default Notification;
Loading

0 comments on commit bd5b0bc

Please sign in to comment.