armiejean
/
cms-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add notification page done

This commit is contained in:
armiejean 2025-04-16 01:29:02 +08:00
parent 7564be9349
commit c83f132231
3 changed files with 82 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/views/components/table-component.blade.php
View File

@ -11,7 +11,7 @@
'showViewModal' => false
])
<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>
@ -81,7 +81,7 @@
</nav>
</div>
</div>
</div>
<!-- Edit Modal -->
@if ($showEditModal)

108
resources/views/pages/add-notification.blade.php
View File

@ -3,60 +3,97 @@
@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 class="card-header border-0 bg-transparent px-3 pt-4">
<h5 class="mb-0 fw-bold text-dark">Add Notification</h5>
</div>
<div class="row justify-content-center">
<div class="col-md-10">
<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">
<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;
border: 1px solid #dee2e6;
}
.card-header {
background-color: transparent;
}
.form-label {
font-weight: 500;
font-size: 0.9rem;
font-size: 0.95rem;
color: #343a40;
}
.form-control,
.form-select {
font-size: 0.9rem;
border-radius: 5px;
border: 1px solid #ced4da;
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus,
.form-select:focus {
border-color: #E74610;
box-shadow: 0 0 0 0.2rem rgba(231, 70, 16, 0.25);
}
textarea.form-control {
resize: vertical;
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: #E74610;
border-color: #E74610;
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>
@ -75,7 +112,7 @@
// Simulate adding notification (frontend-only)
const newNotification = {
id: Date.now(), // Unique ID based on timestamp
id: Date.now(),
subject: subject,
content: content,
isScheduled: isScheduled === 'Yes' ? 'Scheduled' : 'Not Scheduled',
@ -83,7 +120,7 @@
expiration: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().slice(0, 16).replace('T', ' ')
};
// Store in sessionStorage to simulate adding
// Store in sessionStorage
let notifications = JSON.parse(sessionStorage.getItem('notifications') || '[]');
notifications.push(newNotification);
sessionStorage.setItem('notifications', JSON.stringify(notifications));
@ -91,5 +128,10 @@
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

37
resources/views/pages/notification.blade.php
View File

@ -5,38 +5,10 @@
@section('content')
@php
$notifications = [
[
'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'
],
[
'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'
]
['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'],
['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
@ -61,7 +33,6 @@
])
<script>
// Load notifications from sessionStorage
const storedNotifications = JSON.parse(sessionStorage.getItem('notifications') || '[]');
if (storedNotifications.length > 0) {
const tableConfig = window.tableConfig || {};