mirror of
https://github.com/crocofied/CoreControl.git
synced 2025-12-17 15:36:50 +00:00
Add Notification Provider
This commit is contained in:
parent
ddc88796d2
commit
6ba144b7bd
@ -14,8 +14,10 @@ export async function POST(request: NextRequest) {
|
||||
const body = await request.json();
|
||||
const { name, type, config } = schema.parse(body);
|
||||
|
||||
const parsedConfig = JSON.parse(config);
|
||||
|
||||
const notification = await prisma.notificationProvider.create({
|
||||
data: { name, type: type as NotificationType, config, tests: {} },
|
||||
data: { name, type: type as NotificationType, config: parsedConfig},
|
||||
});
|
||||
|
||||
return NextResponse.json({ notification }, { status: 201 });
|
||||
|
||||
@ -2,8 +2,10 @@
|
||||
|
||||
import Sidebar from '@/components/Sidebar';
|
||||
import ErrorToast from '@/components/Error';
|
||||
import SuccessToast from '@/components/Success';
|
||||
import { ProfileSettings } from '@/components/cards/settings/ProfileSettings';
|
||||
import { PasswordSettings } from '@/components/cards/settings/PasswordSettings';
|
||||
import { NotificationSettings } from '@/components/cards/settings/NotificationSettings';
|
||||
import { useState } from 'react';
|
||||
|
||||
interface SettingsPageProps {
|
||||
@ -14,7 +16,7 @@ interface SettingsPageProps {
|
||||
|
||||
export default function SettingsPage({ username, name, email }: SettingsPageProps) {
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const [success, setSuccess] = useState('');
|
||||
|
||||
return (
|
||||
<div>
|
||||
@ -57,13 +59,14 @@ export default function SettingsPage({ username, name, email }: SettingsPageProp
|
||||
<div className="tab-content relative bg-base-100 pl-4 pt-4">
|
||||
<div className="absolute -top-[3px] left-6 right-0 h-[2px] bg-stone-800"></div>
|
||||
<div className="flex flex-col gap-4">
|
||||
test
|
||||
<NotificationSettings onError={setError} onSuccess={setSuccess} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Sidebar>
|
||||
<ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
|
||||
<SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
28
components/cards/settings/NotificationSettings.tsx
Normal file
28
components/cards/settings/NotificationSettings.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import AddNotification from '@/components/dialogues/AddNotification';
|
||||
import useNotifications from '@/hooks/useNotifications';
|
||||
import { Plus } from 'lucide-react';
|
||||
|
||||
export const NotificationSettings = ({ onError, onSuccess }: { onError: (message: string) => void, onSuccess: (message: string) => void }) => {
|
||||
const { loadNotifications } = useNotifications();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="w-full bg-base-200 p-4 rounded-2xl border border-stone-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold">Notification Settings</h2>
|
||||
<p className="text-sm opacity-70">Manage your notification settings</p>
|
||||
</div>
|
||||
<button className="btn btn-primary" onClick={() => (document.getElementById('add_notification') as HTMLDialogElement)?.showModal()}>
|
||||
<Plus className="w-5 h-5" />
|
||||
Add Provider
|
||||
</button>
|
||||
</div>
|
||||
<AddNotification onNotificationAdded={loadNotifications} onSuccess={onSuccess} onError={onError} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
104
components/dialogues/AddNotification.tsx
Normal file
104
components/dialogues/AddNotification.tsx
Normal file
@ -0,0 +1,104 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import useNotification from "@/hooks/useNotifications";
|
||||
import { Bell, Text, BellRing, Braces } from "lucide-react";
|
||||
|
||||
interface AddNotificationProps {
|
||||
onNotificationAdded?: () => void;
|
||||
onError?: (message: string) => void;
|
||||
onSuccess?: (message: string) => void;
|
||||
}
|
||||
|
||||
export default function AddNotification({ onNotificationAdded, onError, onSuccess }: AddNotificationProps) {
|
||||
const [name, setName] = useState("");
|
||||
const [type, setType] = useState("Select a type");
|
||||
const [telegramBotToken, setTelegramBotToken] = useState("");
|
||||
const [telegramChatId, setTelegramChatId] = useState("");
|
||||
|
||||
const { addNotification } = useNotification();
|
||||
|
||||
const addNotificationHandler = async () => {
|
||||
const config = type === "TELEGRAM" ? `{ "token": "${telegramBotToken}", "chat_id": "${telegramChatId}" }` : "";
|
||||
const response = addNotification(name, type, config);
|
||||
if (typeof response === "string") {
|
||||
onError && onError(response)
|
||||
return
|
||||
}
|
||||
try {
|
||||
const successMessage = await response
|
||||
if (onSuccess && successMessage) {
|
||||
onSuccess('Notification Provider added successfully')
|
||||
onNotificationAdded && onNotificationAdded()
|
||||
}
|
||||
} catch (apiError: any) {
|
||||
onError && onError(apiError)
|
||||
} finally {
|
||||
setName("")
|
||||
setType("Select a type")
|
||||
setTelegramBotToken("")
|
||||
setTelegramChatId("")
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<dialog id="add_notification" className="modal">
|
||||
<div className="modal-box w-11/12 max-w-3xl border-l-4 border-success">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<div className="bg-success text-success-content rounded-full p-2 flex items-center justify-center">
|
||||
<Bell className="h-6 w-6" />
|
||||
</div>
|
||||
<h2 className="text-xl font-bold">Add Notification</h2>
|
||||
</div>
|
||||
|
||||
<div className="bg-base-200 p-4 rounded-lg mb-4">
|
||||
<div className="space-y-4">
|
||||
<div className="form-control">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="label">
|
||||
<Text className="h-4 w-4 opacity-70" />
|
||||
<span className="label-text font-medium">Name</span>
|
||||
</label>
|
||||
</div>
|
||||
<input type="text" className="input input-bordered w-full" placeholder="e.g. Telegram" value={name} onChange={(e) => setName(e.target.value)} />
|
||||
</div>
|
||||
<div className="form-control">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="label">
|
||||
<BellRing className="h-4 w-4 opacity-70" />
|
||||
<span className="label-text font-medium">Type</span>
|
||||
</label>
|
||||
</div>
|
||||
<select className="select select-bordered w-full" value={type} onChange={(e) => setType(e.target.value)}>
|
||||
<option disabled>Select a type</option>
|
||||
<option value="TELEGRAM">Telegram</option>
|
||||
</select>
|
||||
</div>
|
||||
{type === "TELEGRAM" && (
|
||||
<div className="form-control">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="label">
|
||||
<Braces className="h-4 w-4 opacity-70" />
|
||||
<span className="label-text font-medium">Config</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input type="text" className="input input-bordered w-full" placeholder="Telegram Bot Token" value={telegramBotToken} onChange={(e) => setTelegramBotToken(e.target.value)} />
|
||||
<input type="text" className="input input-bordered w-full" placeholder="Telegram Chat ID" value={telegramChatId} onChange={(e) => setTelegramChatId(e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-action">
|
||||
<form method="dialog" className="flex gap-3 w-full justify-end">
|
||||
<button className="btn btn-outline">Cancel</button>
|
||||
<button className="btn btn-success text-success-content" onClick={addNotificationHandler}>Add</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,7 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import axios from "axios";
|
||||
import ErrorToast from "@/components/Error";
|
||||
import SuccessToast from "@/components/Success";
|
||||
import { Building2, MapPin, FileText } from "lucide-react";
|
||||
|
||||
@ -25,6 +25,9 @@ const useNotifications = () => {
|
||||
return axios.post('/api/notifications/add', { name, type, config })
|
||||
.then((response) => {
|
||||
return response.data.notification;
|
||||
})
|
||||
.catch(err => {
|
||||
throw err.response?.data?.error || 'An error occurred';
|
||||
});
|
||||
};
|
||||
|
||||
@ -38,5 +41,13 @@ const useNotifications = () => {
|
||||
});
|
||||
}
|
||||
|
||||
return { notifications, loading, addNotification, deleteNotification };
|
||||
}
|
||||
return {
|
||||
notifications,
|
||||
loading,
|
||||
addNotification,
|
||||
deleteNotification,
|
||||
loadNotifications
|
||||
};
|
||||
}
|
||||
|
||||
export default useNotifications;
|
||||
Loading…
x
Reference in New Issue
Block a user