More changes than expected. Mobile version improvements & PWA
Build & Push Docker Images / test-backend (push) Successful in 44s
Build & Push Docker Images / test-frontend (push) Successful in 52s
Build & Push Docker Images / build-backend (push) Failing after 34s
Build & Push Docker Images / build-frontend (push) Failing after 30s
Build & Push Docker Images / test-backend (push) Successful in 44s
Build & Push Docker Images / test-frontend (push) Successful in 52s
Build & Push Docker Images / build-backend (push) Failing after 34s
Build & Push Docker Images / build-frontend (push) Failing after 30s
This commit is contained in:
Ichitux
@@ -0,0 +1,173 @@
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(28, 25, 23, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
backdrop-filter: blur(2px);
|
||||
animation: fadeIn 0.15s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.modal-box {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 2rem 2.25rem 1.75rem;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
box-shadow: 0 20px 60px rgba(28, 25, 23, 0.18);
|
||||
animation: slideUp 0.18s ease;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { transform: translateY(12px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
.modal-tabs {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
background: var(--surface-muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
padding: 4px;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.modal-tab {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0.5rem 0.85rem;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.modal-tab.is-active {
|
||||
background: var(--surface);
|
||||
color: var(--primary);
|
||||
box-shadow: 0 1px 3px rgba(28, 25, 23, 0.08);
|
||||
}
|
||||
|
||||
.modal-tab:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.modal-box h2 {
|
||||
margin: 0 0 0.25rem;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.modal-hint {
|
||||
margin: 0.35rem 0 0;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.modal-sub {
|
||||
margin: 0 0 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.modal-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.modal-field label {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.modal-field input {
|
||||
padding: 0.6rem 0.85rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: calc(var(--radius) - 4px);
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-main);
|
||||
font-size: 0.95rem;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.modal-field input:focus {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.modal-field input:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.modal-error {
|
||||
font-size: 0.82rem;
|
||||
color: #b91c1c;
|
||||
margin: 0.25rem 0 0.75rem;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.65rem;
|
||||
margin-top: 1.35rem;
|
||||
}
|
||||
|
||||
.modal-cancel {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
padding: 0.55rem 1.1rem;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.modal-cancel:hover:not(:disabled) {
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.modal-submit {
|
||||
background: var(--primary);
|
||||
border: none;
|
||||
color: #fff;
|
||||
padding: 0.55rem 1.35rem;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.modal-submit:hover:not(:disabled) {
|
||||
opacity: 0.88;
|
||||
}
|
||||
|
||||
.modal-submit:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.modal-cancel:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import './LoginModal.css';
|
||||
|
||||
function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
|
||||
const [mode, setMode] = useState(initialMode === 'register' ? 'register' : 'login');
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const usernameRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
usernameRef.current?.focus();
|
||||
function handleKey(e) { if (e.key === 'Escape') onClose(); }
|
||||
document.addEventListener('keydown', handleKey);
|
||||
return () => document.removeEventListener('keydown', handleKey);
|
||||
}, [onClose]);
|
||||
|
||||
useEffect(() => {
|
||||
setError('');
|
||||
}, [mode]);
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
const u = username.trim();
|
||||
if (!u || !password) return;
|
||||
if (mode === 'register' && password.length < 8) {
|
||||
setError('Password must be at least 8 characters');
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError('');
|
||||
try {
|
||||
const endpoint = mode === 'register' ? '/api/auth/register' : '/api/auth/login';
|
||||
const res = await fetch(endpoint, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ username: u, password }),
|
||||
});
|
||||
const data = await res.json().catch(() => ({}));
|
||||
if (!res.ok) {
|
||||
setError(data.error || (mode === 'register' ? 'Could not create account' : 'Login failed'));
|
||||
} else {
|
||||
onLogin(data.user);
|
||||
}
|
||||
} catch {
|
||||
setError('Network error — try again');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
const isRegister = mode === 'register';
|
||||
|
||||
return (
|
||||
<div className="modal-overlay" onClick={onClose}>
|
||||
<div
|
||||
className="modal-box"
|
||||
onClick={e => e.stopPropagation()}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-title"
|
||||
>
|
||||
<div className="modal-tabs" role="tablist">
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={!isRegister}
|
||||
className={`modal-tab${!isRegister ? ' is-active' : ''}`}
|
||||
onClick={() => setMode('login')}
|
||||
disabled={loading}
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={isRegister}
|
||||
className={`modal-tab${isRegister ? ' is-active' : ''}`}
|
||||
onClick={() => setMode('register')}
|
||||
disabled={loading}
|
||||
>
|
||||
Create account
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h2 id="modal-title">{isRegister ? 'Create your account' : 'Welcome back'}</h2>
|
||||
<p className="modal-sub">
|
||||
{isRegister
|
||||
? 'Save your address and get notified when medicines arrive.'
|
||||
: 'Sign in to manage your profile and notifications.'}
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit} noValidate>
|
||||
<div className="modal-field">
|
||||
<label htmlFor="modal-username">Username</label>
|
||||
<input
|
||||
id="modal-username"
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
autoComplete="username"
|
||||
ref={usernameRef}
|
||||
disabled={loading}
|
||||
minLength={isRegister ? 3 : undefined}
|
||||
maxLength={isRegister ? 32 : undefined}
|
||||
/>
|
||||
{isRegister && (
|
||||
<p className="modal-hint">3–32 characters: letters, digits, or underscore.</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="modal-field">
|
||||
<label htmlFor="modal-password">Password</label>
|
||||
<input
|
||||
id="modal-password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
autoComplete={isRegister ? 'new-password' : 'current-password'}
|
||||
disabled={loading}
|
||||
minLength={isRegister ? 8 : undefined}
|
||||
/>
|
||||
{isRegister && (
|
||||
<p className="modal-hint">At least 8 characters.</p>
|
||||
)}
|
||||
</div>
|
||||
{error && <p className="modal-error">{error}</p>}
|
||||
<div className="modal-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="modal-cancel"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="modal-submit"
|
||||
disabled={loading || !username.trim() || !password}
|
||||
>
|
||||
{loading
|
||||
? (isRegister ? 'Creating…' : 'Signing in…')
|
||||
: (isRegister ? 'Create account' : 'Sign in')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LoginModal;
|
||||
@@ -19,23 +19,98 @@
|
||||
box-shadow: 0 1px 3px rgba(28, 25, 23, 0.04);
|
||||
}
|
||||
|
||||
.medicine-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 28px rgba(28, 25, 23, 0.08);
|
||||
border-color: var(--primary);
|
||||
@media (hover: hover) {
|
||||
.medicine-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 28px rgba(28, 25, 23, 0.08);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.medicine-card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.medicine-card h3 {
|
||||
color: var(--text-main);
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
transition: color 0.2s;
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.medicine-card:hover h3 {
|
||||
color: var(--primary);
|
||||
.notify-bell {
|
||||
background: var(--surface-muted, #f5f5f4);
|
||||
border: 1px solid var(--border, #e7e5e4);
|
||||
border-radius: 999px;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
cursor: pointer;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
touch-action: manipulation;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: background 0.15s, border-color 0.15s, transform 0.15s;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.notify-bell:hover:not(:disabled) {
|
||||
border-color: var(--primary, #2563eb);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.notify-bell:active:not(:disabled) {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.notify-bell:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.notify-bell--on {
|
||||
background: var(--primary, #2563eb);
|
||||
border-color: var(--primary, #2563eb);
|
||||
}
|
||||
|
||||
.notify-bell--locked {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.notify-bell--locked:hover:not(:disabled) {
|
||||
border-color: var(--text-muted, #78716c);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.notify-error {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.78rem;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.medicine-card:hover h3 {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.medicine-card:hover .view-pharmacies::after {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.medicine-card-body {
|
||||
@@ -73,10 +148,6 @@
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.medicine-card:hover .view-pharmacies::after {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.no-results {
|
||||
text-align: center;
|
||||
padding: 2.75rem 1.5rem;
|
||||
|
||||
@@ -1,7 +1,13 @@
|
||||
import React from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import './MedicineResults.css';
|
||||
import {
|
||||
pushSupported,
|
||||
isSubscribedLocally,
|
||||
subscribeToPush,
|
||||
unsubscribeFromPush,
|
||||
} from '../utils/notifications.js';
|
||||
|
||||
function MedicineResults({ medicines, onSelect, query }) {
|
||||
function MedicineResults({ medicines, onSelect, query, currentUser, onLoginRequest }) {
|
||||
if (medicines.length === 0 && query.length >= 2) {
|
||||
return (
|
||||
<div className="no-results">
|
||||
@@ -13,26 +19,96 @@ function MedicineResults({ medicines, onSelect, query }) {
|
||||
return (
|
||||
<div className="medicine-results">
|
||||
{medicines.map((medicine) => (
|
||||
<div
|
||||
key={medicine.id}
|
||||
className="medicine-card"
|
||||
onClick={() => onSelect(medicine)}
|
||||
>
|
||||
<div className="medicine-card-header">
|
||||
<h3>{medicine.name}</h3>
|
||||
</div>
|
||||
<div className="medicine-card-body">
|
||||
<p><strong>Active Ingredient:</strong> {medicine.active_ingredient}</p>
|
||||
<p><strong>Dosage:</strong> {medicine.dosage} • <strong>Form:</strong> {medicine.form}</p>
|
||||
</div>
|
||||
<div className="medicine-card-footer">
|
||||
<span className="view-pharmacies">View pharmacies →</span>
|
||||
</div>
|
||||
</div>
|
||||
<MedicineCard
|
||||
key={medicine.nregistro || medicine.id}
|
||||
medicine={medicine}
|
||||
onSelect={onSelect}
|
||||
currentUser={currentUser}
|
||||
onLoginRequest={onLoginRequest}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MedicineResults;
|
||||
function MedicineCard({ medicine, onSelect, currentUser, onLoginRequest }) {
|
||||
const nregistro = medicine.nregistro || medicine.id;
|
||||
const [subscribed, setSubscribed] = useState(() => isSubscribedLocally(nregistro));
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const supported = pushSupported();
|
||||
|
||||
useEffect(() => {
|
||||
setSubscribed(isSubscribedLocally(nregistro));
|
||||
}, [nregistro]);
|
||||
|
||||
async function handleBell(e) {
|
||||
e.stopPropagation();
|
||||
if (!currentUser) {
|
||||
onLoginRequest?.();
|
||||
return;
|
||||
}
|
||||
if (!supported) {
|
||||
setError('Notifications need iOS 16.4+ and this site installed as an app (Share → Add to Home Screen).');
|
||||
return;
|
||||
}
|
||||
if (busy) return;
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
if (subscribed) {
|
||||
await unsubscribeFromPush(nregistro);
|
||||
setSubscribed(false);
|
||||
} else {
|
||||
await subscribeToPush(nregistro, medicine.name);
|
||||
setSubscribed(true);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[notify] toggle failed:', err);
|
||||
setError(err.message || 'Could not update subscription');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="medicine-card" onClick={() => onSelect(medicine)}>
|
||||
<div className="medicine-card-header">
|
||||
<h3>{medicine.name}</h3>
|
||||
<button
|
||||
type="button"
|
||||
className={`notify-bell${subscribed && currentUser ? ' notify-bell--on' : ''}${!currentUser ? ' notify-bell--locked' : ''}`}
|
||||
onClick={handleBell}
|
||||
disabled={busy}
|
||||
aria-pressed={subscribed && !!currentUser}
|
||||
aria-label={
|
||||
!currentUser
|
||||
? 'Login to enable notifications'
|
||||
: subscribed
|
||||
? 'Stop notifications for this medicine'
|
||||
: 'Notify me when this medicine becomes available'
|
||||
}
|
||||
title={
|
||||
!currentUser
|
||||
? 'Login to enable notifications'
|
||||
: subscribed
|
||||
? 'Notifications on — click to turn off'
|
||||
: 'Notify me when this medicine is added to a pharmacy'
|
||||
}
|
||||
>
|
||||
{subscribed && currentUser ? '🔔' : '🔕'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="medicine-card-body">
|
||||
<p><strong>Active Ingredient:</strong> {medicine.active_ingredient}</p>
|
||||
<p><strong>Dosage:</strong> {medicine.dosage} • <strong>Form:</strong> {medicine.form}</p>
|
||||
{error && <p className="notify-error" onClick={e => e.stopPropagation()}>{error}</p>}
|
||||
</div>
|
||||
<div className="medicine-card-footer">
|
||||
<span className="view-pharmacies">View pharmacies →</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MedicineResults;
|
||||
|
||||
@@ -28,22 +28,112 @@
|
||||
box-shadow: 0 1px 3px rgba(28, 25, 23, 0.04);
|
||||
}
|
||||
|
||||
.pharmacy-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 28px rgba(28, 25, 23, 0.08);
|
||||
border-color: var(--primary);
|
||||
@media (hover: hover) {
|
||||
.pharmacy-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 28px rgba(28, 25, 23, 0.08);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.pharmacy-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pharmacy-header h4 {
|
||||
color: var(--text-main);
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
transition: color 0.2s;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.pharmacy-card:hover .pharmacy-header h4 {
|
||||
.pharmacy-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.notify-bell {
|
||||
background: var(--surface-muted, #f5f5f4);
|
||||
border: 1px solid var(--border, #e7e5e4);
|
||||
border-radius: 999px;
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
cursor: pointer;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
touch-action: manipulation;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: background 0.15s, border-color 0.15s, transform 0.15s;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.notify-bell:hover:not(:disabled) {
|
||||
border-color: var(--primary, #2563eb);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.notify-bell:active:not(:disabled) {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.notify-bell:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
.notify-bell--on {
|
||||
background: var(--primary, #2563eb);
|
||||
border-color: var(--primary, #2563eb);
|
||||
}
|
||||
|
||||
.notify-bell--locked {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.notify-bell--locked:hover:not(:disabled) {
|
||||
border-color: var(--text-muted, #78716c);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.notify-error {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.78rem;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.pharmacy-distance {
|
||||
flex-shrink: 0;
|
||||
background: rgba(37, 99, 235, 0.1);
|
||||
color: var(--primary);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
padding: 0.3rem 0.7rem;
|
||||
border-radius: 999px;
|
||||
letter-spacing: 0.02em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.pharmacy-card:hover .pharmacy-header h4 {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.pharmacy-details {
|
||||
@@ -60,6 +150,32 @@
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.pharmacy-hours {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.pharmacy-hours-dot {
|
||||
display: inline-block;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 999px;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
.pharmacy-hours--open {
|
||||
color: var(--accent, #047857);
|
||||
}
|
||||
|
||||
.pharmacy-hours--closed {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.pharmacy-pricing {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -1,7 +1,15 @@
|
||||
import React from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import './PharmacyList.css';
|
||||
import { haversineKm, formatDistance } from '../utils/geo';
|
||||
import { getOpenStatus } from '../utils/hours';
|
||||
import {
|
||||
pushSupported,
|
||||
isSubscribedLocally,
|
||||
subscribeToPush,
|
||||
unsubscribeFromPush,
|
||||
} from '../utils/notifications.js';
|
||||
|
||||
function PharmacyList({ pharmacies, loading }) {
|
||||
function PharmacyList({ pharmacies, loading, userPosition, medicine, currentUser, onLoginRequest }) {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="loading-pharmacies">
|
||||
@@ -24,33 +32,133 @@ function PharmacyList({ pharmacies, loading }) {
|
||||
Available at {pharmacies.length} {pharmacies.length === 1 ? 'pharmacy' : 'pharmacies'}
|
||||
</h3>
|
||||
<div className="pharmacy-grid">
|
||||
{pharmacies.map((pharmacy) => (
|
||||
<div key={pharmacy.id} className="pharmacy-card">
|
||||
<div className="pharmacy-header">
|
||||
<h4>🏥 {pharmacy.name}</h4>
|
||||
</div>
|
||||
<div className="pharmacy-details">
|
||||
<p className="pharmacy-address">📍 {pharmacy.address}</p>
|
||||
{pharmacy.phone && (
|
||||
<p className="pharmacy-phone">📞 {pharmacy.phone}</p>
|
||||
)}
|
||||
<div className="pharmacy-pricing">
|
||||
{pharmacy.price && (
|
||||
<span className="price">€{parseFloat(pharmacy.price).toFixed(2)}</span>
|
||||
)}
|
||||
{pharmacy.stock !== undefined && (
|
||||
<span className={`stock ${pharmacy.stock > 20 ? 'in-stock' : pharmacy.stock > 0 ? 'low-stock' : 'out-of-stock'}`}>
|
||||
{pharmacy.stock > 20 ? '✓ In Stock' : pharmacy.stock > 0 ? `⚠ Low Stock (${pharmacy.stock})` : '✗ Out of Stock'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{pharmacies.map((pharmacy) => {
|
||||
const distanceKm =
|
||||
userPosition && pharmacy.latitude != null && pharmacy.longitude != null
|
||||
? haversineKm(userPosition.lat, userPosition.lon, pharmacy.latitude, pharmacy.longitude)
|
||||
: null;
|
||||
return (
|
||||
<PharmacyCard
|
||||
key={pharmacy.id}
|
||||
pharmacy={pharmacy}
|
||||
distanceKm={distanceKm}
|
||||
medicine={medicine}
|
||||
currentUser={currentUser}
|
||||
onLoginRequest={onLoginRequest}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PharmacyCard({ pharmacy, distanceKm, medicine, currentUser, onLoginRequest }) {
|
||||
const nregistro = medicine?.nregistro || medicine?.id;
|
||||
const supported = pushSupported();
|
||||
const outOfStock = pharmacy.stock !== undefined && pharmacy.stock <= 0;
|
||||
const showBell = Boolean(medicine && nregistro && outOfStock);
|
||||
|
||||
const [subscribed, setSubscribed] = useState(() =>
|
||||
showBell ? isSubscribedLocally(nregistro, pharmacy.id) : false
|
||||
);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (showBell) setSubscribed(isSubscribedLocally(nregistro, pharmacy.id));
|
||||
}, [nregistro, pharmacy.id, showBell]);
|
||||
|
||||
async function handleBell(e) {
|
||||
e.stopPropagation();
|
||||
if (!currentUser) {
|
||||
onLoginRequest?.();
|
||||
return;
|
||||
}
|
||||
if (!supported) {
|
||||
setError('Notifications need iOS 16.4+ and this site installed as an app (Share → Add to Home Screen).');
|
||||
return;
|
||||
}
|
||||
if (busy) return;
|
||||
setBusy(true);
|
||||
setError(null);
|
||||
try {
|
||||
if (subscribed) {
|
||||
await unsubscribeFromPush(nregistro, pharmacy.id);
|
||||
setSubscribed(false);
|
||||
} else {
|
||||
await subscribeToPush(nregistro, medicine.name, pharmacy.id);
|
||||
setSubscribed(true);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[notify] pharmacy toggle failed:', err);
|
||||
setError(err.message || 'Could not update subscription');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
const openStatus = getOpenStatus(pharmacy.opening_hours);
|
||||
|
||||
return (
|
||||
<div className="pharmacy-card">
|
||||
<div className="pharmacy-header">
|
||||
<h4>🏥 {pharmacy.name}</h4>
|
||||
<div className="pharmacy-header-actions">
|
||||
{distanceKm != null && (
|
||||
<span className="pharmacy-distance">{formatDistance(distanceKm)}</span>
|
||||
)}
|
||||
{showBell && (
|
||||
<button
|
||||
type="button"
|
||||
className={`notify-bell${subscribed && currentUser ? ' notify-bell--on' : ''}${!currentUser ? ' notify-bell--locked' : ''}`}
|
||||
onClick={handleBell}
|
||||
disabled={busy}
|
||||
aria-pressed={subscribed && !!currentUser}
|
||||
aria-label={
|
||||
!currentUser
|
||||
? 'Login to enable notifications'
|
||||
: subscribed
|
||||
? 'Stop notifications for this pharmacy'
|
||||
: 'Notify me when this medicine arrives at this pharmacy'
|
||||
}
|
||||
title={
|
||||
!currentUser
|
||||
? 'Login to enable notifications'
|
||||
: subscribed
|
||||
? 'Notifications on for this pharmacy — click to turn off'
|
||||
: 'Notify me when this medicine arrives at this pharmacy'
|
||||
}
|
||||
>
|
||||
{subscribed && currentUser ? '🔔' : '🔕'}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pharmacy-details">
|
||||
{openStatus && (
|
||||
<p className={`pharmacy-hours pharmacy-hours--${openStatus.status}`}>
|
||||
<span className="pharmacy-hours-dot" /> {openStatus.label}
|
||||
</p>
|
||||
)}
|
||||
<p className="pharmacy-address">📍 {pharmacy.address}</p>
|
||||
{pharmacy.phone && (
|
||||
<p className="pharmacy-phone">📞 {pharmacy.phone}</p>
|
||||
)}
|
||||
{error && <p className="notify-error">{error}</p>}
|
||||
<div className="pharmacy-pricing">
|
||||
{pharmacy.price && (
|
||||
<span className="price">€{parseFloat(pharmacy.price).toFixed(2)}</span>
|
||||
)}
|
||||
{pharmacy.stock !== undefined && (
|
||||
<span className={`stock ${pharmacy.stock > 20 ? 'in-stock' : pharmacy.stock > 0 ? 'low-stock' : 'out-of-stock'}`}>
|
||||
{pharmacy.stock > 20 ? '✓ In Stock' : pharmacy.stock > 0 ? `⚠ Low Stock (${pharmacy.stock})` : '✗ Out of Stock'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PharmacyList;
|
||||
|
||||
|
||||
@@ -0,0 +1,194 @@
|
||||
.saved-notifications-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(28, 25, 23, 0.55);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 5vh 1rem;
|
||||
z-index: 1000;
|
||||
animation: fadeInBackdrop 0.18s ease-out;
|
||||
}
|
||||
|
||||
.saved-notifications-modal {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 24px 60px rgba(28, 25, 23, 0.25);
|
||||
width: 100%;
|
||||
max-width: 560px;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
animation: popIn 0.22s ease-out;
|
||||
}
|
||||
|
||||
.saved-notifications-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.saved-notifications-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.saved-notifications-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.saved-notifications-close:hover {
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.saved-notifications-body {
|
||||
overflow-y: auto;
|
||||
padding: 1rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.saved-notifications-status,
|
||||
.saved-notifications-empty,
|
||||
.saved-notifications-error {
|
||||
margin: 1.5rem 0;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.saved-notifications-error {
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.saved-notifications-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.saved-notifications-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.85rem 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm, 12px);
|
||||
background: var(--surface-muted, #fafaf9);
|
||||
}
|
||||
|
||||
.saved-notifications-item-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.saved-notifications-item-name {
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 0.35rem;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.saved-notifications-item-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.saved-notifications-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.2rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(37, 99, 235, 0.08);
|
||||
color: var(--primary, #2563eb);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.saved-notifications-chip--pharmacy {
|
||||
background: rgba(4, 120, 87, 0.1);
|
||||
color: var(--accent, #047857);
|
||||
}
|
||||
|
||||
.saved-notifications-address {
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.saved-notifications-remove {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
padding: 0.45rem 0.85rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.saved-notifications-remove:hover:not(:disabled) {
|
||||
border-color: #b91c1c;
|
||||
color: #b91c1c;
|
||||
background: rgba(185, 28, 28, 0.06);
|
||||
}
|
||||
|
||||
.saved-notifications-remove:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
@keyframes fadeInBackdrop {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes popIn {
|
||||
from { opacity: 0; transform: translateY(-8px) scale(0.98); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
|
||||
@media (max-width: 540px) {
|
||||
.saved-notifications-backdrop {
|
||||
padding: 2vh 0.5rem;
|
||||
}
|
||||
|
||||
.saved-notifications-modal {
|
||||
max-height: 95vh;
|
||||
}
|
||||
|
||||
.saved-notifications-header {
|
||||
padding: 1rem 1.1rem;
|
||||
}
|
||||
|
||||
.saved-notifications-body {
|
||||
padding: 0.85rem 1.1rem 1.25rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import './SavedNotifications.css';
|
||||
|
||||
function SavedNotifications({ onClose }) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [items, setItems] = useState([]);
|
||||
const [busyId, setBusyId] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
try {
|
||||
const res = await fetch('/api/notifications/mine', { credentials: 'include' });
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const data = await res.json();
|
||||
if (cancelled) return;
|
||||
const merged = [
|
||||
...(data.pharmacy || []),
|
||||
...(data.global || []),
|
||||
].sort((a, b) => (b.created_at || '').localeCompare(a.created_at || ''));
|
||||
setItems(merged);
|
||||
} catch (err) {
|
||||
if (!cancelled) setError(err.message || 'Could not load saved notifications');
|
||||
} finally {
|
||||
if (!cancelled) setLoading(false);
|
||||
}
|
||||
})();
|
||||
return () => { cancelled = true; };
|
||||
}, []);
|
||||
|
||||
async function handleDelete(item) {
|
||||
const key = `${item.scope}:${item.id}`;
|
||||
setBusyId(key);
|
||||
try {
|
||||
const res = await fetch('/api/notifications/mine', {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ scope: item.scope, id: item.id }),
|
||||
});
|
||||
if (!res.ok && res.status !== 204) throw new Error(`HTTP ${res.status}`);
|
||||
setItems(prev => prev.filter(i => !(i.scope === item.scope && i.id === item.id)));
|
||||
} catch (err) {
|
||||
setError(err.message || 'Could not remove notification');
|
||||
} finally {
|
||||
setBusyId(null);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="saved-notifications-backdrop" onClick={onClose}>
|
||||
<div className="saved-notifications-modal" onClick={e => e.stopPropagation()}>
|
||||
<div className="saved-notifications-header">
|
||||
<h2>🔔 Saved Notifications</h2>
|
||||
<button className="saved-notifications-close" onClick={onClose} aria-label="Close">×</button>
|
||||
</div>
|
||||
<div className="saved-notifications-body">
|
||||
{loading && <p className="saved-notifications-status">Loading…</p>}
|
||||
{!loading && error && <p className="saved-notifications-error">{error}</p>}
|
||||
{!loading && !error && items.length === 0 && (
|
||||
<p className="saved-notifications-empty">
|
||||
No saved notifications yet. Tap the 🔕 bell on an out-of-stock pharmacy to get notified when it's restocked.
|
||||
</p>
|
||||
)}
|
||||
{!loading && !error && items.length > 0 && (
|
||||
<ul className="saved-notifications-list">
|
||||
{items.map(item => {
|
||||
const key = `${item.scope}:${item.id}`;
|
||||
return (
|
||||
<li key={key} className="saved-notifications-item">
|
||||
<div className="saved-notifications-item-main">
|
||||
<div className="saved-notifications-item-name">
|
||||
{item.medicine_name || item.medicine_nregistro}
|
||||
</div>
|
||||
<div className="saved-notifications-item-meta">
|
||||
{item.scope === 'pharmacy' ? (
|
||||
<>
|
||||
<span className="saved-notifications-chip saved-notifications-chip--pharmacy">
|
||||
🏥 {item.pharmacy_name || `Pharmacy #${item.pharmacy_id}`}
|
||||
</span>
|
||||
{item.pharmacy_address && (
|
||||
<span className="saved-notifications-address">{item.pharmacy_address}</span>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<span className="saved-notifications-chip">
|
||||
Any pharmacy
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="saved-notifications-remove"
|
||||
onClick={() => handleDelete(item)}
|
||||
disabled={busyId === key}
|
||||
aria-label="Remove notification"
|
||||
>
|
||||
{busyId === key ? '…' : 'Remove'}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SavedNotifications;
|
||||
@@ -78,6 +78,83 @@
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.hours-editor {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 1rem 1.25rem 1.25rem;
|
||||
margin: 0.5rem 0 1rem;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.hours-editor legend {
|
||||
padding: 0 0.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.hours-editor-hint {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
margin: 0 0 0.85rem;
|
||||
}
|
||||
|
||||
.hours-row {
|
||||
display: grid;
|
||||
grid-template-columns: 7rem 6.5rem 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
padding: 0.35rem 0;
|
||||
}
|
||||
|
||||
.hours-row.is-closed input[type="time"] {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.hours-day {
|
||||
font-weight: 600;
|
||||
color: var(--text-main);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.hours-closed-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hours-sep {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.hours-row input[type="time"] {
|
||||
width: 100%;
|
||||
padding: 0.45rem 0.6rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
background: var(--surface);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.hours-row {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"day closed"
|
||||
"open close";
|
||||
}
|
||||
.hours-day { grid-area: day; }
|
||||
.hours-closed-toggle { grid-area: closed; justify-self: end; }
|
||||
.hours-row input[type="time"]:first-of-type { grid-area: open; }
|
||||
.hours-row input[type="time"]:last-of-type { grid-area: close; }
|
||||
.hours-sep { display: none; }
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-edit,
|
||||
|
||||
@@ -1,5 +1,47 @@
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import './AdminComponents.css';
|
||||
import { DAY_KEYS, DAY_LABEL } from '../../utils/hours';
|
||||
|
||||
function emptyHoursDraft() {
|
||||
const draft = {};
|
||||
for (const day of DAY_KEYS) {
|
||||
draft[day] = { open: '09:00', close: '21:00', closed: true };
|
||||
}
|
||||
return draft;
|
||||
}
|
||||
|
||||
function hoursToDraft(raw) {
|
||||
let parsed = null;
|
||||
if (raw) {
|
||||
try { parsed = typeof raw === 'string' ? JSON.parse(raw) : raw; }
|
||||
catch { parsed = null; }
|
||||
}
|
||||
const draft = {};
|
||||
for (const day of DAY_KEYS) {
|
||||
const v = parsed && parsed[day];
|
||||
if (Array.isArray(v) && v.length === 2) {
|
||||
draft[day] = { open: v[0], close: v[1], closed: false };
|
||||
} else {
|
||||
draft[day] = { open: '09:00', close: '21:00', closed: true };
|
||||
}
|
||||
}
|
||||
return draft;
|
||||
}
|
||||
|
||||
function draftToHours(draft) {
|
||||
const out = {};
|
||||
let hasAny = false;
|
||||
for (const day of DAY_KEYS) {
|
||||
const d = draft[day];
|
||||
if (d && !d.closed && d.open && d.close) {
|
||||
out[day] = [d.open, d.close];
|
||||
hasAny = true;
|
||||
} else {
|
||||
out[day] = null;
|
||||
}
|
||||
}
|
||||
return hasAny ? out : null;
|
||||
}
|
||||
|
||||
/** Distance in metres between two WGS84 points */
|
||||
function haversineMeters(lat1, lon1, lat2, lon2) {
|
||||
@@ -59,6 +101,7 @@ function PharmacyManagement() {
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
});
|
||||
const [hoursDraft, setHoursDraft] = useState(() => emptyHoursDraft());
|
||||
|
||||
const [cityQuery, setCityQuery] = useState('');
|
||||
const [cityLookupLoading, setCityLookupLoading] = useState(false);
|
||||
@@ -251,6 +294,7 @@ function PharmacyManagement() {
|
||||
...formData,
|
||||
latitude: formData.latitude ? parseFloat(formData.latitude) : null,
|
||||
longitude: formData.longitude ? parseFloat(formData.longitude) : null,
|
||||
opening_hours: draftToHours(hoursDraft),
|
||||
};
|
||||
|
||||
if (editingPharmacy) {
|
||||
@@ -299,6 +343,7 @@ function PharmacyManagement() {
|
||||
latitude: pharmacy.latitude ?? '',
|
||||
longitude: pharmacy.longitude ?? '',
|
||||
});
|
||||
setHoursDraft(hoursToDraft(pharmacy.opening_hours));
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
@@ -329,10 +374,15 @@ function PharmacyManagement() {
|
||||
latitude: '',
|
||||
longitude: '',
|
||||
});
|
||||
setHoursDraft(emptyHoursDraft());
|
||||
setEditingPharmacy(null);
|
||||
setShowForm(false);
|
||||
};
|
||||
|
||||
const updateDay = (day, patch) => {
|
||||
setHoursDraft((prev) => ({ ...prev, [day]: { ...prev[day], ...patch } }));
|
||||
};
|
||||
|
||||
const onRegionFieldChange = (setter) => (e) => {
|
||||
setRegionPreset('custom');
|
||||
setter(e.target.value);
|
||||
@@ -571,6 +621,42 @@ function PharmacyManagement() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<fieldset className="hours-editor">
|
||||
<legend>Opening hours</legend>
|
||||
<p className="hours-editor-hint">Leave a day checked as <em>Closed</em> if the pharmacy doesn't open that day.</p>
|
||||
{DAY_KEYS.map((day) => {
|
||||
const d = hoursDraft[day];
|
||||
return (
|
||||
<div key={day} className={`hours-row ${d.closed ? 'is-closed' : ''}`}>
|
||||
<span className="hours-day">{DAY_LABEL[day]}</span>
|
||||
<label className="hours-closed-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={d.closed}
|
||||
onChange={(e) => updateDay(day, { closed: e.target.checked })}
|
||||
/>
|
||||
Closed
|
||||
</label>
|
||||
<input
|
||||
type="time"
|
||||
value={d.open}
|
||||
disabled={d.closed}
|
||||
onChange={(e) => updateDay(day, { open: e.target.value })}
|
||||
aria-label={`${DAY_LABEL[day]} opens at`}
|
||||
/>
|
||||
<span className="hours-sep">–</span>
|
||||
<input
|
||||
type="time"
|
||||
value={d.close}
|
||||
disabled={d.closed}
|
||||
onChange={(e) => updateDay(day, { close: e.target.value })}
|
||||
aria-label={`${DAY_LABEL[day]} closes at`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</fieldset>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="submit" className="btn-primary" disabled={saving}>
|
||||
{saving ? 'Saving...' : editingPharmacy ? 'Update' : 'Add'} Pharmacy
|
||||
|
||||
@@ -1,6 +1,12 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useMemo, useRef } from 'react';
|
||||
import './AdminComponents.css';
|
||||
|
||||
const MAX_PHARMACY_RESULTS = 25;
|
||||
|
||||
function normalize(s) {
|
||||
return (s || '').toString().toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '');
|
||||
}
|
||||
|
||||
function PharmacyMedicineLink() {
|
||||
const [pharmacies, setPharmacies] = useState([]);
|
||||
const [medicineSearch, setMedicineSearch] = useState('');
|
||||
@@ -10,12 +16,27 @@ function PharmacyMedicineLink() {
|
||||
const [pharmacyMedicines, setPharmacyMedicines] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [searching, setSearching] = useState(false);
|
||||
const [pharmacyQuery, setPharmacyQuery] = useState('');
|
||||
const [pharmacyDropdownOpen, setPharmacyDropdownOpen] = useState(false);
|
||||
const pharmacyInputRef = useRef(null);
|
||||
const [formData, setFormData] = useState({
|
||||
pharmacy_id: '',
|
||||
price: '',
|
||||
stock: ''
|
||||
});
|
||||
|
||||
const filteredPharmacies = useMemo(() => {
|
||||
const q = normalize(pharmacyQuery).trim();
|
||||
if (!q) return pharmacies.slice(0, MAX_PHARMACY_RESULTS);
|
||||
const tokens = q.split(/\s+/).filter(Boolean);
|
||||
return pharmacies
|
||||
.filter(p => {
|
||||
const hay = `${normalize(p.name)} ${normalize(p.address)}`;
|
||||
return tokens.every(tok => hay.includes(tok));
|
||||
})
|
||||
.slice(0, MAX_PHARMACY_RESULTS);
|
||||
}, [pharmacies, pharmacyQuery]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchPharmacies();
|
||||
}, []);
|
||||
@@ -172,14 +193,27 @@ function PharmacyMedicineLink() {
|
||||
setMedicineResults([]);
|
||||
};
|
||||
|
||||
const selectedPharmacyObj = pharmacies.find(p => p.id === parseInt(formData.pharmacy_id));
|
||||
|
||||
const selectMedicine = (medicine) => {
|
||||
setSelectedMedicine(medicine);
|
||||
setMedicineSearch(medicine.name);
|
||||
setMedicineResults([]);
|
||||
};
|
||||
|
||||
const pickPharmacy = (pharmacy) => {
|
||||
setSelectedPharmacy(pharmacy);
|
||||
setFormData(prev => ({ ...prev, pharmacy_id: pharmacy.id.toString() }));
|
||||
setPharmacyQuery(`${pharmacy.name} — ${pharmacy.address}`);
|
||||
setPharmacyDropdownOpen(false);
|
||||
};
|
||||
|
||||
const clearPharmacy = () => {
|
||||
setSelectedPharmacy(null);
|
||||
setFormData(prev => ({ ...prev, pharmacy_id: '' }));
|
||||
setPharmacyQuery('');
|
||||
setPharmacyDropdownOpen(true);
|
||||
setTimeout(() => pharmacyInputRef.current?.focus(), 0);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="admin-section">
|
||||
<h2>Link Medicine to Pharmacy</h2>
|
||||
@@ -187,22 +221,53 @@ function PharmacyMedicineLink() {
|
||||
<form className="admin-form" onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label>Pharmacy *</label>
|
||||
<select
|
||||
value={formData.pharmacy_id}
|
||||
<input
|
||||
ref={pharmacyInputRef}
|
||||
type="text"
|
||||
value={pharmacyQuery}
|
||||
onChange={(e) => {
|
||||
const pharmacy = pharmacies.find(p => p.id === parseInt(e.target.value));
|
||||
setSelectedPharmacy(pharmacy);
|
||||
setFormData({ ...formData, pharmacy_id: e.target.value });
|
||||
setPharmacyQuery(e.target.value);
|
||||
if (selectedPharmacy) {
|
||||
setSelectedPharmacy(null);
|
||||
setFormData(prev => ({ ...prev, pharmacy_id: '' }));
|
||||
}
|
||||
setPharmacyDropdownOpen(true);
|
||||
}}
|
||||
required
|
||||
>
|
||||
<option value="">Select a pharmacy</option>
|
||||
{pharmacies.map((pharmacy) => (
|
||||
<option key={pharmacy.id} value={pharmacy.id}>
|
||||
{pharmacy.name} - {pharmacy.address}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
onFocus={() => setPharmacyDropdownOpen(true)}
|
||||
onBlur={() => setTimeout(() => setPharmacyDropdownOpen(false), 150)}
|
||||
placeholder={pharmacies.length ? `Search ${pharmacies.length} pharmacies by name or address…` : 'Loading pharmacies…'}
|
||||
autoComplete="off"
|
||||
required={!selectedPharmacy}
|
||||
/>
|
||||
{!selectedPharmacy && pharmacyDropdownOpen && (
|
||||
<div className="medicine-search-results">
|
||||
{filteredPharmacies.length === 0 ? (
|
||||
<div className="search-result-item search-result-item--empty">
|
||||
<span>No pharmacies match "{pharmacyQuery}"</span>
|
||||
</div>
|
||||
) : (
|
||||
filteredPharmacies.map((pharmacy) => (
|
||||
<div
|
||||
key={pharmacy.id}
|
||||
className="search-result-item"
|
||||
onMouseDown={(e) => { e.preventDefault(); pickPharmacy(pharmacy); }}
|
||||
>
|
||||
<strong>{pharmacy.name}</strong>
|
||||
<span>{pharmacy.address}</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{selectedPharmacy && (
|
||||
<div className="selected-medicine-info">
|
||||
<p>✅ Selected: <strong>{selectedPharmacy.name}</strong></p>
|
||||
<p className="medicine-details">{selectedPharmacy.address}</p>
|
||||
<button type="button" className="btn-small" onClick={clearPharmacy}>
|
||||
Change pharmacy
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
|
||||
Reference in New Issue
Block a user