notification functionality works
This commit is contained in:
parent
2b6856a8f2
commit
af7cc5c42f
|
|
@ -0,0 +1,127 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Http\Controllers;
|
||||||
|
|
||||||
|
use Illuminate\Http\Request;
|
||||||
|
use Illuminate\Support\Facades\Http;
|
||||||
|
use Illuminate\Support\Facades\Log;
|
||||||
|
use Illuminate\Support\Facades\Session;
|
||||||
|
|
||||||
|
class NotificationController extends Controller
|
||||||
|
{
|
||||||
|
protected $apiBaseUrl = 'http://192.168.100.6:8081/api';
|
||||||
|
|
||||||
|
public function index(Request $request)
|
||||||
|
{
|
||||||
|
try {
|
||||||
|
$user = Session::get('user');
|
||||||
|
$accessToken = $user['access_token'] ?? null;
|
||||||
|
|
||||||
|
if (!$accessToken) {
|
||||||
|
Log::info('No access token found, redirecting to login from notification');
|
||||||
|
return redirect()->route('login')->with('error', 'Please log in to view notifications.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch all notifications directly from the API
|
||||||
|
$response = Http::withHeaders([
|
||||||
|
'Accept' => 'application/json',
|
||||||
|
'Authorization' => 'Bearer ' . $accessToken,
|
||||||
|
])->get("{$this->apiBaseUrl}/cms/notification");
|
||||||
|
|
||||||
|
$json = $response->json();
|
||||||
|
Log::info("Response from index endpoint: ", $json);
|
||||||
|
|
||||||
|
$notifications = [];
|
||||||
|
if ($response->status() === 401 || $response->status() === 403) {
|
||||||
|
Log::warning('Unauthorized or Forbidden API response for index endpoint: ', $json);
|
||||||
|
return redirect()->route('login')->with('error', 'Your session has expired. Please log in again.');
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($response->successful() && isset($json['data']) && is_array($json['data'])) {
|
||||||
|
$notifications = array_map(function ($notification) {
|
||||||
|
return [
|
||||||
|
'id' => $notification['id'] ?? null,
|
||||||
|
'subject' => $notification['subject'] ?? 'Untitled',
|
||||||
|
'description' => $notification['description'] ?? '',
|
||||||
|
'isScheduled' => $notification['trigger_schedule'] ? 'Scheduled' : 'Not Scheduled',
|
||||||
|
'schedule' => $notification['trigger_schedule'] ?? '',
|
||||||
|
'expiration' => $notification['expiration_date'] ?? '',
|
||||||
|
];
|
||||||
|
}, $json['data']);
|
||||||
|
} else {
|
||||||
|
Log::warning('Failed to fetch notifications: ', $json);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update session with the fetched notification IDs (optional, for future use)
|
||||||
|
$notificationIds = array_column($notifications, 'id');
|
||||||
|
Session::put('notification_ids', $notificationIds);
|
||||||
|
|
||||||
|
return view('pages.notification', [
|
||||||
|
'notifications' => $notifications,
|
||||||
|
])->with('error', empty($notifications) ? 'No notification data available. Please create a new notification.' : '');
|
||||||
|
} catch (\Exception $e) {
|
||||||
|
Log::error('Error fetching notification data: ' . $e->getMessage());
|
||||||
|
return view('pages.notification', [
|
||||||
|
'notifications' => [],
|
||||||
|
])->with('error', 'An error occurred while fetching notifications: ' . $e->getMessage());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
public function create()
|
||||||
|
{
|
||||||
|
return view('pages.add-notification');
|
||||||
|
}
|
||||||
|
|
||||||
|
public function store(Request $request)
|
||||||
|
{
|
||||||
|
try {
|
||||||
|
$user = Session::get('user');
|
||||||
|
$accessToken = $user['access_token'] ?? null;
|
||||||
|
|
||||||
|
if (!$accessToken) {
|
||||||
|
return redirect()->route('login')->with('error', 'Please log in to add a notification.');
|
||||||
|
}
|
||||||
|
|
||||||
|
$data = [
|
||||||
|
'subject' => $request->input('subject'),
|
||||||
|
'description' => $request->input('description'),
|
||||||
|
'schedule' => $request->input('schedule') ?: null,
|
||||||
|
'expiration' => $request->input('expiration') ?: null,
|
||||||
|
];
|
||||||
|
|
||||||
|
$response = Http::withHeaders([
|
||||||
|
'Accept' => 'application/json',
|
||||||
|
'Authorization' => 'Bearer ' . $accessToken,
|
||||||
|
])->post("{$this->apiBaseUrl}/cms/notification", $data);
|
||||||
|
|
||||||
|
if ($response->successful()) {
|
||||||
|
return redirect()->route('notification')->with('success', 'Notification created successfully.');
|
||||||
|
} else {
|
||||||
|
Log::warning('Failed to create notification: ', $response->json());
|
||||||
|
return redirect()->back()->with('error', $response->json()['message'] ?? 'Failed to create notification. Please try again.');
|
||||||
|
}
|
||||||
|
} catch (\Exception $e) {
|
||||||
|
Log::error('Error creating notification: ' . $e->getMessage());
|
||||||
|
return redirect()->back()->with('error', 'An error occurred while creating the notification: ' . $e->getMessage());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public function edit($id)
|
||||||
|
{
|
||||||
|
return redirect()->route('notification')->with('error', 'Edit functionality is not available due to backend limitations.');
|
||||||
|
}
|
||||||
|
|
||||||
|
public function update(Request $request, $id)
|
||||||
|
{
|
||||||
|
return redirect()->route('notification')->with('error', 'Update functionality is not available due to backend limitations.');
|
||||||
|
}
|
||||||
|
|
||||||
|
public function show($id)
|
||||||
|
{
|
||||||
|
return redirect()->route('notification')->with('error', 'View functionality is not available due to backend limitations.');
|
||||||
|
}
|
||||||
|
|
||||||
|
public function destroy($id)
|
||||||
|
{
|
||||||
|
return redirect()->route('notification')->with('error', 'Delete functionality is not available due to backend limitations.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,269 @@
|
||||||
|
@props([
|
||||||
|
'pageTitle' => 'Notification',
|
||||||
|
'data' => [],
|
||||||
|
'columns' => [
|
||||||
|
['name' => 'ID', 'key' => 'id', 'sortable' => true],
|
||||||
|
['name' => 'Subject', 'key' => 'subject', 'sortable' => true],
|
||||||
|
['name' => 'Content', 'key' => 'description', 'sortable' => true],
|
||||||
|
['name' => 'Is Scheduled', 'key' => 'isScheduled', 'sortable' => true],
|
||||||
|
['name' => 'Schedule', 'key' => 'schedule', 'sortable' => true],
|
||||||
|
['name' => 'Expiration', 'key' => 'expiration', 'sortable' => true],
|
||||||
|
],
|
||||||
|
'showAddButton' => true,
|
||||||
|
'addButtonUrl' => route('notification.create'),
|
||||||
|
])
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header border-0 bg-transparent">
|
||||||
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
|
<h5 class="mb-0 fw-bold text-dark">{{ $pageTitle }}</h5>
|
||||||
|
@if ($showAddButton)
|
||||||
|
<a href="{{ $addButtonUrl }}" class="btn btn-primary btn-sm px-3">
|
||||||
|
<i class="fa-solid fa-plus me-1"></i> Add {{ $pageTitle }}
|
||||||
|
</a>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<!-- Search and Filters -->
|
||||||
|
<div class="row mb-3 align-items-center">
|
||||||
|
<div class="col-12 col-md-6 mb-2 mb-md-0">
|
||||||
|
<div class="input-group input-group-sm">
|
||||||
|
<span class="input-group-text bg-light border-end-0">
|
||||||
|
<i class="fa-solid fa-magnifying-glass text-muted"></i>
|
||||||
|
</span>
|
||||||
|
<input type="text" class="form-control border-start-0" placeholder="Search..." id="searchInput">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-6 d-flex justify-content-end">
|
||||||
|
<button class="btn btn-outline-secondary btn-sm" id="clearFilters">
|
||||||
|
<i class="fa-solid fa-filter-circle-xmark me-1"></i> Clear Filters
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Table -->
|
||||||
|
<div class="table-container">
|
||||||
|
<table class="table table-hover align-middle">
|
||||||
|
<thead class="table-light">
|
||||||
|
<tr>
|
||||||
|
@foreach ($columns as $index => $column)
|
||||||
|
<th class="{{ $column['sortable'] ? 'sortable' : '' }}" data-column="{{ $index + 1 }}">
|
||||||
|
{{ $column['name'] }}
|
||||||
|
@if ($column['sortable'])
|
||||||
|
<i class="fa-solid fa-sort"></i>
|
||||||
|
@endif
|
||||||
|
</th>
|
||||||
|
@endforeach
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="tableBody"></tbody>
|
||||||
|
</table>
|
||||||
|
<div id="no-data-message" style="display: {{ empty($data) ? 'block' : 'none' }}; text-align: center; margin-top: 20px;">
|
||||||
|
<p>No notifications found.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.card,
|
||||||
|
.table,
|
||||||
|
.btn,
|
||||||
|
.form-control,
|
||||||
|
.input-group-text {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
.card-header h5 {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.table thead th {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.card-header {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
background-color: #E74610;
|
||||||
|
border-color: #E74610;
|
||||||
|
}
|
||||||
|
.btn-primary:hover {
|
||||||
|
background-color: #E74610;
|
||||||
|
border-color: #E74610;
|
||||||
|
}
|
||||||
|
.sortable {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.sortable:hover {
|
||||||
|
background-color: #f1f3f5;
|
||||||
|
}
|
||||||
|
.table {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
width: 100%;
|
||||||
|
table-layout: auto;
|
||||||
|
}
|
||||||
|
.table th,
|
||||||
|
.table td {
|
||||||
|
padding: 0.5rem;
|
||||||
|
vertical-align: middle;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.table td:nth-child(5),
|
||||||
|
.table th:nth-child(5) {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
.table td:nth-child(6),
|
||||||
|
.table th:nth-child(6) {
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
.table td:nth-child(7),
|
||||||
|
.table th:nth-child(7) {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.table {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
.table thead th {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
.table th,
|
||||||
|
.table td {
|
||||||
|
padding: 0.3rem;
|
||||||
|
}
|
||||||
|
.btn-sm {
|
||||||
|
padding: 0.2rem 0.4rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
.input-group-sm>.form-control {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
.form-control,
|
||||||
|
.form-select {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const tableConfig = {
|
||||||
|
data: @json($data),
|
||||||
|
columns: @json($columns),
|
||||||
|
showAddButton: {{ json_encode($showAddButton) }},
|
||||||
|
addButtonUrl: '{{ $addButtonUrl }}',
|
||||||
|
csrfToken: '{{ csrf_token() }}',
|
||||||
|
};
|
||||||
|
|
||||||
|
let filteredRows = [...tableConfig.data];
|
||||||
|
let originalRows = [...tableConfig.data].map(row => ({ ...row }));
|
||||||
|
let sortDirection = {};
|
||||||
|
|
||||||
|
function renderTable() {
|
||||||
|
const tableBody = document.getElementById('tableBody');
|
||||||
|
if (!tableBody) return;
|
||||||
|
tableBody.innerHTML = '';
|
||||||
|
|
||||||
|
filteredRows.forEach(row => {
|
||||||
|
const tr = document.createElement('tr');
|
||||||
|
tr.setAttribute('data-id', row.id);
|
||||||
|
let rowHtml = '';
|
||||||
|
|
||||||
|
tableConfig.columns.forEach(col => {
|
||||||
|
let value = row[col.key] || '';
|
||||||
|
if (col.key === 'schedule' || col.key === 'expiration') {
|
||||||
|
value = value ? new Date(value).toLocaleString() : 'N/A';
|
||||||
|
}
|
||||||
|
rowHtml += `<td>${value}</td>`;
|
||||||
|
});
|
||||||
|
|
||||||
|
tr.innerHTML = rowHtml;
|
||||||
|
tableBody.appendChild(tr);
|
||||||
|
});
|
||||||
|
|
||||||
|
attachEventListeners();
|
||||||
|
updateNoDataMessage();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateNoDataMessage() {
|
||||||
|
const noDataMessage = document.getElementById('no-data-message');
|
||||||
|
if (noDataMessage) {
|
||||||
|
noDataMessage.style.display = filteredRows.length === 0 ? 'block' : 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function attachEventListeners() {
|
||||||
|
// Search
|
||||||
|
const searchInput = document.getElementById('searchInput');
|
||||||
|
if (searchInput) {
|
||||||
|
searchInput.addEventListener('input', function() {
|
||||||
|
const searchTerm = this.value.toLowerCase();
|
||||||
|
filteredRows = tableConfig.data.filter(row => {
|
||||||
|
return Object.values(row).some(value =>
|
||||||
|
value && value.toString().toLowerCase().includes(searchTerm)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
renderTable();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sort
|
||||||
|
document.querySelectorAll('.sortable').forEach(header => {
|
||||||
|
header.addEventListener('click', function() {
|
||||||
|
const columnIndex = parseInt(this.getAttribute('data-column')) - 1;
|
||||||
|
const key = tableConfig.columns[columnIndex].key;
|
||||||
|
|
||||||
|
sortDirection[columnIndex] = !sortDirection[columnIndex] ? 'asc' : sortDirection[columnIndex] === 'asc' ? 'desc' : 'asc';
|
||||||
|
|
||||||
|
document.querySelectorAll('.sortable i').forEach(icon => {
|
||||||
|
icon.classList.remove('fa-sort-up', 'fa-sort-down');
|
||||||
|
icon.classList.add('fa-sort');
|
||||||
|
});
|
||||||
|
const icon = this.querySelector('i');
|
||||||
|
if (icon) {
|
||||||
|
icon.classList.remove('fa-sort');
|
||||||
|
icon.classList.add(sortDirection[columnIndex] === 'asc' ? 'fa-sort-up' : 'fa-sort-down');
|
||||||
|
}
|
||||||
|
|
||||||
|
filteredRows.sort((a, b) => {
|
||||||
|
let aValue = (a[key] || '').toString().toLowerCase();
|
||||||
|
let bValue = (b[key] || '').toString().toLowerCase();
|
||||||
|
if (key === 'schedule' || key === 'expiration') {
|
||||||
|
aValue = new Date(a[key] || '1970-01-01').getTime();
|
||||||
|
bValue = new Date(b[key] || '1970-01-01').getTime();
|
||||||
|
return sortDirection[columnIndex] === 'asc' ? aValue - bValue : bValue - aValue;
|
||||||
|
}
|
||||||
|
return sortDirection[columnIndex] === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
|
||||||
|
});
|
||||||
|
|
||||||
|
renderTable();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Clear Filters
|
||||||
|
const clearFilters = document.getElementById('clearFilters');
|
||||||
|
if (clearFilters) {
|
||||||
|
clearFilters.addEventListener('click', function() {
|
||||||
|
if (searchInput) searchInput.value = '';
|
||||||
|
document.querySelectorAll('.sortable i').forEach(icon => {
|
||||||
|
icon.classList.remove('fa-sort-up', 'fa-sort-down');
|
||||||
|
icon.classList.add('fa-sort');
|
||||||
|
});
|
||||||
|
sortDirection = {};
|
||||||
|
filteredRows = [...tableConfig.data];
|
||||||
|
renderTable();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
renderTable();
|
||||||
|
</script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
|
|
@ -3,133 +3,38 @@
|
||||||
@section('page_title', 'Add Notification')
|
@section('page_title', 'Add Notification')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="card-header border-0 bg-transparent py-2">
|
<div class="card">
|
||||||
<h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Add Notification</h5>
|
<div class="card-header">
|
||||||
</div>
|
<h5 class="mb-0 fw-bold text-dark">Add New Notification</h5>
|
||||||
|
|
||||||
|
|
||||||
<div class="row justify-content-center">
|
|
||||||
|
|
||||||
<div class="card-body px-3 pb-4">
|
|
||||||
<form id="addNotificationForm">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12 mb-4">
|
|
||||||
<label for="subject" class="form-label">Subject</label>
|
|
||||||
<input type="text" class="form-control w-100" id="subject" placeholder="Enter notification subject" required>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 mb-4">
|
|
||||||
<label for="content" class="form-label">Content</label>
|
|
||||||
<textarea class="form-control w-100" id="content" rows="3" placeholder="Enter notification content" required></textarea>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 mb-4">
|
|
||||||
<label for="isScheduled" class="form-label">Is Scheduled</label>
|
|
||||||
<select class="form-select w-100" id="isScheduled" required>
|
|
||||||
<option value="" disabled selected>Select option</option>
|
|
||||||
<option value="Yes">Yes</option>
|
|
||||||
<option value="No">No</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-flex justify-content-end mt-4">
|
|
||||||
<button type="button" class="btn btn-outline-secondary me-2 px-4" style="margin-right:5px">Cancel</button>
|
|
||||||
<button type="submit" class="btn btn-primary px-4">Add Notification</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
@if (session('error'))
|
||||||
<style>
|
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
||||||
.card {
|
{{ session('error') }}
|
||||||
border-radius: 10px;
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||||
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
|
</div>
|
||||||
border: 1px solid #dee2e6;
|
@endif
|
||||||
}
|
<form action="{{ route('notification.store') }}" method="POST">
|
||||||
.card-header {
|
@csrf
|
||||||
background-color: transparent;
|
<div class="mb-3">
|
||||||
}
|
<label for="subject" class="form-label">Subject</label>
|
||||||
.form-label {
|
<input type="text" class="form-control" id="subject" name="subject" required>
|
||||||
font-weight: 500;
|
</div>
|
||||||
font-size: 0.95rem;
|
<div class="mb-3">
|
||||||
color: #343a40;
|
<label for="description" class="form-label">Description</label>
|
||||||
}
|
<textarea class="form-control" id="description" name="description" rows="3" required></textarea>
|
||||||
.form-control,
|
</div>
|
||||||
.form-select {
|
<div class="mb-3">
|
||||||
font-size: 0.9rem;
|
<label for="schedule" class="form-label">Schedule (optional)</label>
|
||||||
border-radius: 5px;
|
<input type="datetime-local" class="form-control" id="schedule" name="schedule">
|
||||||
border: 1px solid #ced4da;
|
</div>
|
||||||
transition: border-color 0.2s, box-shadow 0.2s;
|
<div class="mb-3">
|
||||||
}
|
<label for="expiration" class="form-label">Expiration (optional)</label>
|
||||||
.form-control:focus,
|
<input type="datetime-local" class="form-control" id="expiration" name="expiration">
|
||||||
.form-select:focus {
|
</div>
|
||||||
border-color: #E74610;
|
<button type="submit" class="btn btn-primary">Save</button>
|
||||||
box-shadow: 0 0 0 0.2rem rgba(231, 70, 16, 0.25);
|
<a href="{{ route('notification') }}" class="btn btn-secondary">Cancel</a>
|
||||||
}
|
</form>
|
||||||
textarea.form-control {
|
</div>
|
||||||
resize: vertical;
|
</div>
|
||||||
min-height: 60px;
|
|
||||||
}
|
|
||||||
.btn-primary {
|
|
||||||
background-color: #E74610;
|
|
||||||
border-color: #E74610;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
transition: background-color 0.2s;
|
|
||||||
}
|
|
||||||
.btn-primary:hover {
|
|
||||||
background-color: #c63d0e;
|
|
||||||
border-color: #c63d0e;
|
|
||||||
}
|
|
||||||
.btn-outline-secondary {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
border-color: #6c757d;
|
|
||||||
transition: background-color 0.2s;
|
|
||||||
}
|
|
||||||
.btn-outline-secondary:hover {
|
|
||||||
background-color: #f8f9fa;
|
|
||||||
border-color: #6c757d;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
max-width: 1400px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.getElementById('addNotificationForm').addEventListener('submit', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const subject = document.getElementById('subject').value;
|
|
||||||
const content = document.getElementById('content').value;
|
|
||||||
const isScheduled = document.getElementById('isScheduled').value;
|
|
||||||
|
|
||||||
if (!subject || !content || !isScheduled) {
|
|
||||||
alert('Please fill out all fields.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Simulate adding notification (frontend-only)
|
|
||||||
const newNotification = {
|
|
||||||
id: Date.now(),
|
|
||||||
subject: subject,
|
|
||||||
content: content,
|
|
||||||
isScheduled: isScheduled === 'Yes' ? 'Scheduled' : 'Not Scheduled',
|
|
||||||
schedule: isScheduled === 'Yes' ? new Date().toISOString().slice(0, 16).replace('T', ' ') : '',
|
|
||||||
expiration: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().slice(0, 16).replace('T', ' ')
|
|
||||||
};
|
|
||||||
|
|
||||||
// Store in sessionStorage
|
|
||||||
let notifications = JSON.parse(sessionStorage.getItem('notifications') || '[]');
|
|
||||||
notifications.push(newNotification);
|
|
||||||
sessionStorage.setItem('notifications', JSON.stringify(notifications));
|
|
||||||
|
|
||||||
alert('Notification added successfully!');
|
|
||||||
window.location.href = '/notification';
|
|
||||||
});
|
|
||||||
|
|
||||||
// Cancel button click handler
|
|
||||||
document.querySelector('.btn-outline-secondary').addEventListener('click', function() {
|
|
||||||
window.location.href = '/notification';
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|
@ -3,42 +3,23 @@
|
||||||
@section('page_title', 'Notification')
|
@section('page_title', 'Notification')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
@php
|
<div id="notification-table">
|
||||||
$notifications = [
|
@if (session('success'))
|
||||||
['id' => 1, 'subject' => 'Welcome Message', 'content' => 'Welcome to our platform! Get started today.', 'isScheduled' => 'Scheduled', 'schedule' => '2025-04-16 10:00', 'expiration' => '2025-04-30 23:59'],
|
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||||||
['id' => 2, 'subject' => 'System Update', 'content' => 'Scheduled maintenance on April 20th.', 'isScheduled' => 'Scheduled', 'schedule' => '2025-04-20 02:00', 'expiration' => '2025-04-21 02:00'],
|
{{ session('success') }}
|
||||||
['id' => 3, 'subject' => 'Promotion Offer', 'content' => '50% off your next purchase this week!', 'isScheduled' => 'Not Scheduled', 'schedule' => '', 'expiration' => '2025-04-22 23:59'],
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||||
['id' => 4, 'subject' => 'Account Reminder', 'content' => 'Please update your profile details.', 'isScheduled' => 'Scheduled', 'schedule' => '2025-04-18 09:00', 'expiration' => '2025-04-25 23:59']
|
</div>
|
||||||
];
|
@endif
|
||||||
@endphp
|
@if (session('error') || $errors->has('error'))
|
||||||
|
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
||||||
@include('components.table-component', [
|
{{ session('error') ?? $errors->first('error') }}
|
||||||
'pageTitle' => 'Notification',
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||||
'data' => $notifications,
|
</div>
|
||||||
'columns' => [
|
@endif
|
||||||
['name' => 'ID', 'key' => 'id', 'sortable' => true],
|
<x-notification-component
|
||||||
['name' => 'Subject', 'key' => 'subject', 'sortable' => true],
|
:data="$notifications"
|
||||||
['name' => 'Content', 'key' => 'content', 'sortable' => true],
|
:showAddButton="true"
|
||||||
['name' => 'Is Scheduled', 'key' => 'isScheduled', 'sortable' => true],
|
:addButtonUrl="route('notification.create')"
|
||||||
['name' => 'Schedule', 'key' => 'schedule', 'sortable' => true],
|
/>
|
||||||
['name' => 'Expiration', 'key' => 'expiration', 'sortable' => true]
|
</div>
|
||||||
],
|
|
||||||
|
|
||||||
'showAddButton' => true,
|
|
||||||
'addButtonUrl' => '/add-notification',
|
|
||||||
'showCheckboxes' => false,
|
|
||||||
'showBatchDelete' => false,
|
|
||||||
'showEditModal' => false,
|
|
||||||
'showViewModal' => true
|
|
||||||
])
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const storedNotifications = JSON.parse(sessionStorage.getItem('notifications') || '[]');
|
|
||||||
if (storedNotifications.length > 0) {
|
|
||||||
const tableConfig = window.tableConfig || {};
|
|
||||||
tableConfig.data = [...tableConfig.data, ...storedNotifications];
|
|
||||||
window.renderTable();
|
|
||||||
window.renderPagination();
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|
@ -6,6 +6,7 @@ use App\Http\Controllers\AuthController;
|
||||||
use App\Http\Controllers\UserManagementController;
|
use App\Http\Controllers\UserManagementController;
|
||||||
use App\Http\Controllers\PhotoSliderController;
|
use App\Http\Controllers\PhotoSliderController;
|
||||||
use App\Http\Controllers\TopUpController;
|
use App\Http\Controllers\TopUpController;
|
||||||
|
use App\Http\Controllers\NotificationController;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -26,10 +27,6 @@ Route::get('/dashboard', function () {
|
||||||
return view('dashboard');
|
return view('dashboard');
|
||||||
});
|
});
|
||||||
|
|
||||||
Route::get('/notification', function () {
|
|
||||||
return view('pages.notification');
|
|
||||||
})->name('notification');
|
|
||||||
|
|
||||||
Route::get('/card-member', function () {
|
Route::get('/card-member', function () {
|
||||||
return view('pages.member management.card-member');
|
return view('pages.member management.card-member');
|
||||||
})->name('card-member');
|
})->name('card-member');
|
||||||
|
|
@ -181,3 +178,8 @@ Route::put('/photo-slider/{id}', [PhotoSliderController::class, 'update'])->name
|
||||||
Route::get('/photo-slider/{id}', [PhotoSliderController::class, 'show'])->name('photo-slider.show');
|
Route::get('/photo-slider/{id}', [PhotoSliderController::class, 'show'])->name('photo-slider.show');
|
||||||
Route::delete('/photo-slider/{id}', [PhotoSliderController::class, 'destroy'])->name('photo-slider.destroy');
|
Route::delete('/photo-slider/{id}', [PhotoSliderController::class, 'destroy'])->name('photo-slider.destroy');
|
||||||
Route::delete('/photo-slider/batch', [PhotoSliderController::class, 'batchDelete'])->name('photo-slider.batchDelete');
|
Route::delete('/photo-slider/batch', [PhotoSliderController::class, 'batchDelete'])->name('photo-slider.batchDelete');
|
||||||
|
|
||||||
|
//Notification
|
||||||
|
Route::get('/notification', [NotificationController::class, 'index'])->name('notification');
|
||||||
|
Route::get('/notification/create', [NotificationController::class, 'create'])->name('notification.create');
|
||||||
|
Route::post('/notification', [NotificationController::class, 'store'])->name('notification.store');
|
||||||
Loading…
Reference in New Issue