function MainComponent() { const [alerts, setAlerts] = React.useState([]); const [adminMode, setAdminMode] = React.useState(false); const [password, setPassword] = React.useState(''); const [errorMessage, setErrorMessage] = React.useState(''); const [newAlert, setNewAlert] = React.useState({ time: '', date: '', state: '', city: '', event: '', severity: 'standard' }); const handlePasswordSubmit = (e)=>{ e.preventDefault(); if (password === 'RCFDadmin') { setAdminMode(true); setErrorMessage(''); } else { setErrorMessage('Invalid password'); } }; const handleNewAlertChange = (e)=>{ setNewAlert({ ...newAlert, [e.target.name]: e.target.value }); }; const handleNewAlertSubmit = (e)=>{ e.preventDefault(); if (newAlert.time && newAlert.date && newAlert.state && newAlert.city && newAlert.severity && newAlert.event) { fetch('/api/db/alerts', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `alerts` (`time`, `date`, `state`, `city`, `event`, `severity`) VALUES (?, ?, ?, ?, ?, ?)", values: [ newAlert.time, newAlert.date, newAlert.state, newAlert.city, newAlert.event, newAlert.severity ] }) }).then(()=>{ const updatedAlerts = [ ...alerts, newAlert ]; setAlerts(updatedAlerts); setErrorMessage(''); setNewAlert({ time: '', date: '', state: '', city: '', event: '', severity: 'standard' }); // Code to send push notification to the devices }); } else { setErrorMessage('All fields are required'); } }; const handleClearAlerts = ()=>{ fetch('/api/db/alerts', { method: 'POST', body: JSON.stringify({ query: 'DELETE FROM `alerts`' }) }).then(()=>{ setAlerts([]); }); }; const getAlertClass = (severity)=>{ if (severity === 'critical') return 'bg-red-500 text-white'; if (severity === 'urgent') return 'bg-yellow-500 text-white'; return 'bg-green-500 text-white'; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen p-4 font-roboto bg-gradient-to-r from-blue-600 to-red-600 text-white", __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, "Severe Weather Alerts"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "Active and Past Events"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, alerts.map((alert, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: `border p-2 rounded shadow ${getAlertClass(alert.severity)}`, __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 83, columnNumber: 18 }, __self: this }, "Event:"), " ", alert.event), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 84, columnNumber: 18 }, __self: this }, "Date:"), " ", alert.date), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 85, columnNumber: 18 }, __self: this }, "Time:"), " ", alert.time), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 86, columnNumber: 18 }, __self: this }, "Location:"), " ", alert.city, ", ", alert.state))))), !adminMode && /*#__PURE__*/ React.createElement("form", { onSubmit: handlePasswordSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "Admin Login"), errorMessage && /*#__PURE__*/ React.createElement("div", { className: "bg-red-500 text-white p-2 rounded mb-2", __source: { fileName: "", lineNumber: 95, columnNumber: 28 }, __self: this }, errorMessage), /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", value: password, onChange: (e)=>setPassword(e.target.value), placeholder: "Enter Admin Password", className: "border p-2 rounded w-full mb-2 text-black bg-gray-200", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-purple-500 text-white p-2 rounded w-full", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "Login")), adminMode && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, errorMessage && /*#__PURE__*/ React.createElement("div", { className: "bg-red-500 text-white p-2 rounded mb-2", __source: { fileName: "", lineNumber: 110, columnNumber: 28 }, __self: this }, errorMessage), /*#__PURE__*/ React.createElement("form", { onSubmit: handleNewAlertSubmit, className: "bg-white p-4 rounded shadow-md mb-4 text-black", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, "Send New Alert"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "event", value: newAlert.event, onChange: handleNewAlertChange, placeholder: "Event", className: "border p-2 rounded w-full mb-2 bg-gray-200", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "date", name: "date", value: newAlert.date, onChange: handleNewAlertChange, className: "border p-2 rounded w-full mb-2 bg-gray-200", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "time", name: "time", value: newAlert.time, onChange: handleNewAlertChange, className: "border p-2 rounded w-full mb-2 bg-gray-200", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "state", value: newAlert.state, onChange: handleNewAlertChange, placeholder: "State", className: "border p-2 rounded w-full mb-2 bg-gray-200", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "city", value: newAlert.city, onChange: handleNewAlertChange, placeholder: "City", className: "border p-2 rounded w-full mb-2 bg-gray-200", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "severity", value: newAlert.severity, onChange: handleNewAlertChange, className: "border p-2 rounded w-full mb-2 bg-gray-200", __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "standard", __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }, "Standard"), /*#__PURE__*/ React.createElement("option", { value: "urgent", __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }, "Urgent"), /*#__PURE__*/ React.createElement("option", { value: "critical", __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }, "Critical")), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-purple-500 text-white p-2 rounded w-full", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, "Send Alert")), /*#__PURE__*/ React.createElement("button", { onClick: handleClearAlerts, className: "bg-purple-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 163, columnNumber: 11 }, __self: this }, "Clear Alerts"))); }