added notification
This commit is contained in:
parent
ab3688c606
commit
7564be9349
|
|
@ -1,30 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<title>Unioil - @yield('title')</title>
|
|
||||||
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
|
|
||||||
<head>
|
|
||||||
<!-- ... other meta tags -->
|
|
||||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
|
|
||||||
<!-- ... other meta tags -->
|
|
||||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
@if(app()->environment('local'))
|
|
||||||
<script>
|
|
||||||
localStorage.setItem('debug', 'awesome-react-app:*');
|
|
||||||
</script>
|
|
||||||
@endif
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="root" class="app-container h-100">
|
|
||||||
@yield('content')
|
|
||||||
</div>
|
|
||||||
<script src="{{ asset('js/app.js') }}"></script>
|
|
||||||
@stack('scripts')
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,95 @@
|
||||||
|
@extends('layouts.app')
|
||||||
|
|
||||||
|
@section('page_title', 'Add Notification')
|
||||||
|
|
||||||
|
@section('content')
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header border-0 bg-transparent">
|
||||||
|
<h5 class="mb-0 fw-bold text-dark">Add Notification</h5>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<form id="addNotificationForm">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="subject" class="form-label">Subject</label>
|
||||||
|
<input type="text" class="form-control" id="subject" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="content" class="form-label">Content</label>
|
||||||
|
<textarea class="form-control" id="content" rows="4" required></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="isScheduled" class="form-label">Is Scheduled</label>
|
||||||
|
<select class="form-select" id="isScheduled" required>
|
||||||
|
<option value="">Select option</option>
|
||||||
|
<option value="Yes">Yes</option>
|
||||||
|
<option value="No">No</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-end">
|
||||||
|
<button type="button" class="btn btn-outline-secondary me-2" onclick="window.location.href='/notification'">Cancel</button>
|
||||||
|
<button type="submit" class="btn btn-primary">Add Notification</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.card {
|
||||||
|
border-radius: 10px;
|
||||||
|
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
|
||||||
|
}
|
||||||
|
.card-header {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.form-label {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
.form-control,
|
||||||
|
.form-select {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
background-color: #E74610;
|
||||||
|
border-color: #E74610;
|
||||||
|
}
|
||||||
|
.btn-primary:hover {
|
||||||
|
background-color: #E74610;
|
||||||
|
border-color: #E74610;
|
||||||
|
}
|
||||||
|
</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(), // Unique ID based on timestamp
|
||||||
|
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 to simulate adding
|
||||||
|
let notifications = JSON.parse(sessionStorage.getItem('notifications') || '[]');
|
||||||
|
notifications.push(newNotification);
|
||||||
|
sessionStorage.setItem('notifications', JSON.stringify(notifications));
|
||||||
|
|
||||||
|
alert('Notification added successfully!');
|
||||||
|
window.location.href = '/notification';
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
@endsection
|
||||||
|
|
@ -1,14 +1,73 @@
|
||||||
@extends('layouts.app')
|
@extends('layouts.app')
|
||||||
|
|
||||||
@section('page_title', 'Notifications')
|
@section('page_title', 'Notification')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="card" style="min-height: 500px;">
|
@php
|
||||||
<div class="card-header">
|
$notifications = [
|
||||||
<i class="fa-solid fa-bell" style="color:gray;"> Notifications</i>
|
[
|
||||||
</div>
|
'id' => 1,
|
||||||
<div class="card-body">
|
'subject' => 'Welcome Message',
|
||||||
<p>This is the Notification page content.</p>
|
'content' => 'Welcome to our platform! Get started today.',
|
||||||
</div>
|
'isScheduled' => 'Scheduled',
|
||||||
</div>
|
'schedule' => '2025-04-16 10:00',
|
||||||
|
'expiration' => '2025-04-30 23:59'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'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'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'id' => 3,
|
||||||
|
'subject' => 'Promotion Offer',
|
||||||
|
'content' => '50% off your next purchase this week!',
|
||||||
|
'isScheduled' => 'Not Scheduled',
|
||||||
|
'schedule' => '',
|
||||||
|
'expiration' => '2025-04-22 23:59'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'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'
|
||||||
|
]
|
||||||
|
];
|
||||||
|
@endphp
|
||||||
|
|
||||||
|
@include('components.table-component', [
|
||||||
|
'pageTitle' => 'Notification',
|
||||||
|
'data' => $notifications,
|
||||||
|
'columns' => [
|
||||||
|
['name' => 'ID', 'key' => 'id', 'sortable' => true],
|
||||||
|
['name' => 'Subject', 'key' => 'subject', 'sortable' => true],
|
||||||
|
['name' => 'Content', 'key' => 'content', 'sortable' => true],
|
||||||
|
['name' => 'Is Scheduled', 'key' => 'isScheduled', 'sortable' => true],
|
||||||
|
['name' => 'Schedule', 'key' => 'schedule', 'sortable' => true],
|
||||||
|
['name' => 'Expiration', 'key' => 'expiration', 'sortable' => true]
|
||||||
|
],
|
||||||
|
|
||||||
|
'showAddButton' => true,
|
||||||
|
'addButtonUrl' => '/add-notification',
|
||||||
|
'showCheckboxes' => false,
|
||||||
|
'showBatchDelete' => false,
|
||||||
|
'showEditModal' => false,
|
||||||
|
'showViewModal' => true
|
||||||
|
])
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Load notifications from sessionStorage
|
||||||
|
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
|
||||||
|
|
@ -87,3 +87,7 @@ Route::get('/my-profile', function () {
|
||||||
Route::get('/add-user', function () {
|
Route::get('/add-user', function () {
|
||||||
return view('pages.user-management.add-user');
|
return view('pages.user-management.add-user');
|
||||||
})->name('add-user');
|
})->name('add-user');
|
||||||
|
|
||||||
|
Route::get('/add-notification', function () {
|
||||||
|
return view('pages.add-notification');
|
||||||
|
})->name('add-notification');
|
||||||
Loading…
Reference in New Issue