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

added content in photo-slider and promotions

This commit is contained in:
armiejean 2025-04-16 13:14:56 +08:00
parent c83f132231
commit 399c8de8dd
5 changed files with 263 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,15 +3,13 @@
@section('page_title', 'Add Notification')
@section('content')
<div class="card-header border-0 bg-transparent px-3 pt-4">
<h5 class="mb-0 fw-bold text-dark">Add Notification</h5>
<div class="card-header border-0 bg-transparent py-2">
<h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">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">
@ -39,7 +37,7 @@
</form>
</div>
</div>
</div>

99
resources/views/pages/add-photo-slider.blade.php Normal file
View File

@ -0,0 +1,99 @@
@extends('layouts.app')
@section('page_title', 'Add Photo Slider')
@section('content')
<div class="card-header border-0 bg-transparent py-2">
<h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Add Photo Slider</h5>
</div>
<div class="row justify-content-center">
<div class="card-body p-3">
<form id="addPhotoSliderForm">
<div class="mb-3">
<label for="title" class="form-label">Title</label>
<input type="text" class="form-control" id="title" placeholder="Enter title" required>
</div>
<div class="mb-3">
<label for="type" class="form-label">Type</label>
<select class="form-select" id="type" required>
<option value="" disabled selected>Select type</option>
<option value="Banner">Banner</option>
<option value="Carousel">Carousel</option>
<option value="Slider">Slider</option>
</select>
</div>
<div class="mb-3">
<label for="startDate" class="form-label">Start Date</label>
<input type="date" class="form-control" id="startDate" required>
</div>
<div class="mb-3">
<label for="endDate" class="form-label">End Date</label>
<input type="date" class="form-control" id="endDate" required>
</div>
<div class="d-flex justify-content-end mt-3">
<button type="button" class="btn btn-outline-secondary me-2" style="margin-right:5px">Cancel</button>
<button type="submit" class="btn btn-primary">Add Photo Slider</button>
</div>
</form>
</div>
</div>
<style>
.card {
border-radius: 5px;
border: 1px solid #dee2e6;
}
.form-label {
font-size: 0.95rem;
}
.form-control,
.form-select {
font-size: 0.9rem;
width: 100%;
}
</style>
<script>
document.getElementById('addPhotoSliderForm').addEventListener('submit', function(e) {
e.preventDefault();
const title = document.getElementById('title').value;
const type = document.getElementById('type').value;
const startDate = document.getElementById('startDate').value;
const endDate = document.getElementById('endDate').value;
if (!title || !type || !startDate || !endDate) {
alert('Please fill out all fields.');
return;
}
// Simulate adding photo slider (frontend-only)
const newSlider = {
id: Date.now(),
title: title,
type: type,
startDate: startDate,
endDate: endDate
};
// Store in sessionStorage
let sliders = JSON.parse(sessionStorage.getItem('sliders') || '[]');
sliders.push(newSlider);
sessionStorage.setItem('sliders', JSON.stringify(sliders));
alert('Photo Slider added successfully!');
window.location.href = '/photo-slider';
});
// Cancel button click handler
document.querySelector('.btn-outline-secondary').addEventListener('click', function() {
window.location.href = '/photo-slider';
});
</script>
@endsection

86
resources/views/pages/home page/photo-slider.blade.php
View File

@ -1,14 +1,80 @@
@extends('layouts.app')
@section('page_title', 'Home Page')
@section('page_title', 'Photo Slider')
@section('content')
<div class="card" style="min-height: 500px;">
<div class="card-header">
<i class="fa-solid fa-mobile-screen" style="color:gray;"> Home Page</i>
</div>
<div class="card-body">
<p>This is the Photo Slider page content.</p>
</div>
</div>
@endsection
@php
$sliders = [
[
'id' => 1,
'title' => 'Homepage Banner',
'type' => 'Banner',
'startDate' => '2025-04-10',
'endDate' => '2025-04-20'
],
[
'id' => 2,
'title' => 'Product Carousel',
'type' => 'Carousel',
'startDate' => '2025-04-15',
'endDate' => '2025-04-25'
],
[
'id' => 3,
'title' => 'Seasonal Promo',
'type' => 'Banner',
'startDate' => '2025-04-20',
'endDate' => '2025-05-01'
],
[
'id' => 4,
'title' => 'Flash Sale Slider',
'type' => 'Slider',
'startDate' => '2025-04-22',
'endDate' => '2025-04-24'
],
[
'id' => 5,
'title' => 'New Arrivals',
'type' => 'Carousel',
'startDate' => '2025-04-25',
'endDate' => '2025-05-05'
],
[
'id' => 6,
'title' => 'Event Highlight',
'type' => 'Banner',
'startDate' => '2025-04-30',
'endDate' => '2025-05-10'
]
];
@endphp
@include('components.table-component', [
'pageTitle' => 'Photo Slider',
'data' => $sliders,
'columns' => [
['name' => 'Title', 'key' => 'title', 'sortable' => true],
['name' => 'Type', 'key' => 'type', 'sortable' => true],
['name' => 'Start Date', 'key' => 'startDate', 'sortable' => true],
['name' => 'End Date', 'key' => 'endDate', 'sortable' => true]
],
'actions' => ['edit', 'view', 'delete'],
'showAddButton' => true,
'addButtonUrl' => '/add-photo-slider',
'showCheckboxes' => true,
'showBatchDelete' => true,
'showEditModal' => true,
'showViewModal' => true
])
<script>
const storedSliders = JSON.parse(sessionStorage.getItem('sliders') || '[]');
if (storedSliders.length > 0) {
const tableConfig = window.tableConfig || {};
tableConfig.data = [...tableConfig.data, ...storedSliders];
window.renderTable();
window.renderPagination();
}
</script>
@endsection

80
resources/views/pages/promotions.blade.php
View File

@ -3,12 +3,74 @@
@section('page_title', 'Promotions')
@section('content')
<div class="card" style="min-height: 500px;">
<div class="card-header">
<i class="fa-solid fa-tag" style="color:gray;"> Promotions</i>
</div>
<div class="card-body">
<p>This is the Promotions page content.</p>
</div>
</div>
@endsection
@php
$promotions = [
[
'id' => 1,
'title' => 'Spring Sale',
'type' => 'Discount',
'startDate' => '2025-04-10',
'endDate' => '2025-04-20',
'status' => 'Done'
],
[
'id' => 2,
'title' => 'Flash Deal',
'type' => 'Flash Sale',
'startDate' => '2025-04-15',
'endDate' => '2025-04-17',
'status' => 'On Going'
],
[
'id' => 3,
'title' => 'Loyalty Promo',
'type' => 'Reward',
'startDate' => '2025-04-20',
'endDate' => '2025-05-01',
'status' => 'Done'
],
[
'id' => 4,
'title' => 'Holiday Bundle',
'type' => 'Bundle',
'startDate' => '2025-04-25',
'endDate' => '2025-05-05',
'status' => 'On Going'
],
[
'id' => 5,
'title' => 'Back-to-School',
'type' => 'Discount',
'startDate' => '2025-04-30',
'endDate' => '2025-05-10',
'status' => 'Done'
],
[
'id' => 6,
'title' => 'Clearance Sale',
'type' => 'Flash Sale',
'startDate' => '2025-05-01',
'endDate' => '2025-05-03',
'status' => 'On Going'
]
];
@endphp
@include('components.table-component', [
'pageTitle' => 'Promotions',
'data' => $promotions,
'columns' => [
['name' => 'Title', 'key' => 'title', 'sortable' => true],
['name' => 'Type', 'key' => 'type', 'sortable' => true],
['name' => 'Start Date', 'key' => 'startDate', 'sortable' => true],
['name' => 'End Date', 'key' => 'endDate', 'sortable' => true],
['name' => 'Status', 'key' => 'status', 'sortable' => true]
],
'actions' => ['edit', 'view', 'delete'],
'showAddButton' => true,
'showCheckboxes' => true,
'showBatchDelete' => true,
'showEditModal' => true,
'showViewModal' => true
])
@endsection

14
routes/web.php
View File

@ -90,4 +90,16 @@ Route::get('/add-user', function () {
Route::get('/add-notification', function () {
return view('pages.add-notification');
})->name('add-notification');
})->name('add-notification');
Route::get('/photo-slider', function () {
return view('pages.home page.photo-slider');
})->name('photo-slider');
Route::get('/promotions', function () {
return view('pages.promotions');
})->name('promotions');
Route::get('/add-photo-slider', function () {
return view('pages.add-photo-slider');
})->name('add-photo-slider');