Skip to content

Commit c9b1669

Browse files
NoxtrahNoxtrah
committed
Started to working on paging
1 parent 60ca9fd commit c9b1669

File tree

6 files changed

+266
-21
lines changed

6 files changed

+266
-21
lines changed

‎scripts/addNewRecipeToBook.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,4 +114,15 @@ const saveButton = document.getElementById("save-button");
114114
console.log("Save button clicked");
115115
console.log(recipeData);
116116
saveRecipe(recipeData);
117-
});
117+
});
118+
119+
function setupBackButton() {
120+
const backButton = document.getElementById('back-arrow-button');
121+
122+
backButton.addEventListener('click', () => {
123+
window.history.back();
124+
// window.history.go(-1);
125+
});
126+
}
127+
128+
setupBackButton();

‎scripts/dashboard.js

Lines changed: 142 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -352,8 +352,9 @@ const createRecipeElement = async (recipe) => {
352352
const starContainer = document.createElement('div');
353353
starContainer.classList.add('rating');
354354

355-
const getCustomData = await getSelectedCustomDataOfDashboard(recipeIndex);
356-
const rate = getCustomData.rate;
355+
//const getCustomData = await getSelectedCustomDataOfDashboard(recipeIndex);
356+
const rate = recipe.rate;
357+
console.log("Rate değeri: " , rate)
357358

358359
console.log("Star Info: " , rate);
359360

@@ -371,7 +372,7 @@ const createRecipeElement = async (recipe) => {
371372
starContainer.appendChild(star);
372373
}
373374
// Create average star
374-
const generalRateOfRecipe = getCustomData.avgRate;
375+
const generalRateOfRecipe = recipe.avgRate;
375376
recipeIndex++;
376377

377378
const averageRatingSpan = document.createElement('span');
@@ -399,7 +400,7 @@ const createRecipeElement = async (recipe) => {
399400
document.body.appendChild(heartContainer);
400401

401402
heartContainer.classList.add('favorite-heart');
402-
if(getCustomData.isLiked){
403+
if(recipe.isLiked){
403404
heartContainer.style.color = 'red';
404405
}
405406
// heart.onclick = () => toggleFavorite(heart);
@@ -439,7 +440,7 @@ const displayDashboard = async (recipes) => {
439440
// This fetch method closed in order to reduce usage of database. Open before starting development
440441
const fetchData = async () => {
441442
try {
442-
const response = await fetch('https://recipiebeckend.azurewebsites.net/recipes/get-custom-data-dashboard');
443+
const response = await fetch('https://recipiebeckend.azurewebsites.net/recipes/home');
443444
const data = await response.json();
444445

445446
console.log('Fetched Data:', data);
@@ -689,7 +690,7 @@ function basicSearch() {
689690
// return starAndHeartInfoArray;
690691
// }
691692
async function getSelectedCustomDataOfDashboard(index) {
692-
var apiUrl = 'https://recipiebeckend.azurewebsites.net/recipes/get-custom-data-dashboard';
693+
var apiUrl = 'https://recipiebeckend.azurewebsites.net/recipes/home';
693694
const JWTAccessToken = sessionStorage.getItem('accessToken');
694695
const response = await fetch(
695696
apiUrl,
@@ -711,13 +712,7 @@ async function getSelectedCustomDataOfDashboard(index) {
711712
if (contentType && contentType.includes('application/json')) {
712713
const data = await response.json();
713714
console.log("Data: " , data);
714-
// Check if the array has elements and if the specified index is valid
715-
if (data.length > index) {
716-
return data[index];
717-
} else {
718-
console.error('Index out of bounds or empty array');
719-
return null; // or handle it according to your application's logic
720-
}
715+
return data[index];
721716
} else {
722717
// Handle non-JSON response or empty response
723718
console.error('Invalid or empty JSON response');
@@ -731,4 +726,138 @@ function openNewTab() {
731726

732727
// Open a new tab with the constructed URL
733728
window.open(baseURL, '_blank');
729+
}
730+
731+
// $(document).ready(function() {
732+
// $('#pagination li a').on('click', function(e) {
733+
// e.preventDefault();
734+
// $('#next').on('click', function(e) {
735+
// e.preventDefault();
736+
// var currentPage = $('#pagination li.active').index() + 1;
737+
// console.log("Current page: " , currentPage);
738+
// var key = currentPage - 1;
739+
// paging(key);
740+
// });
741+
// $('#prev').on('click', function(e) {
742+
// e.preventDefault();
743+
// var currentPage = $('#pagination li.active').index() + 1;
744+
// var key = currentPage - 2;
745+
// paging(key);
746+
// });
747+
// if (!$(this).is('#next, #prev')) {
748+
// $('#pagination li').removeClass('active');
749+
// $(this).parent().addClass('active');
750+
// var key = parseInt($(this).text().trim()) - 1;
751+
// paging(key);
752+
// }
753+
// });
754+
// });
755+
756+
$(document).ready(function() {
757+
var key; // Declare the key variable outside of the event handlers
758+
759+
// Add click event to pagination links
760+
$('#pagination li a').on('click', function(e) {
761+
e.preventDefault();
762+
763+
if (!$(this).is('#next, #prev')) {
764+
// Remove active class from all pagination links
765+
$('#pagination li').removeClass('active');
766+
767+
// Add active class to the clicked link
768+
$(this).parent().addClass('active');
769+
770+
// Extract the key from the clicked pagination link and subtract 1
771+
key = parseInt($(this).text().trim()) - 1;
772+
773+
// Call the paging function with the adjusted key
774+
paging(key);
775+
}
776+
});
777+
778+
$(document).ready(function() {
779+
var key = 0; // Declare the key variable outside of the event handlers
780+
781+
// Add click event to pagination links
782+
$('#pagination li a').on('click', function(e) {
783+
e.preventDefault();
784+
785+
if (!$(this).is('#next, #prev')) {
786+
// Remove active class from all pagination links
787+
$('#pagination li').removeClass('active');
788+
789+
// Add active class to the clicked link
790+
$(this).parent().addClass('active');
791+
792+
// Extract the key from the clicked pagination link and subtract 1
793+
key = parseInt($(this).text().trim()) - 1;
794+
console.log("Key: " , key);
795+
// Call the paging function with the adjusted key
796+
paging(key);
797+
}
798+
});
799+
800+
$('#next').on('click', function(e) {
801+
e.preventDefault();
802+
803+
// Get the current active page number
804+
var currentPage = $('#pagination li.active').index() + 1;
805+
806+
// If no page is active, default to the first page
807+
if (currentPage === 0) {
808+
currentPage = 1;
809+
}
810+
811+
// Calculate the key for the next page
812+
var nextPageKey = currentPage % ($('#pagination li').length - 1);
813+
if (nextPageKey === 0) {
814+
nextPageKey = ($('#pagination li').length - 1);
815+
} else {
816+
nextPageKey -= 1;
817+
}
818+
819+
// Remove active class from all pagination links
820+
$('#pagination li').removeClass('active');
821+
822+
// Add active class to the next page
823+
$('#pagination li:eq(' + nextPageKey + ')').addClass('active');
824+
825+
// Call the paging function with the adjusted key
826+
paging(nextPageKey);
827+
});
828+
// Prev button click event handler
829+
$('#prev').on('click', function(e) {
830+
e.preventDefault();
831+
832+
// Get the current active page number
833+
var currentPage = $('#pagination li.active').index() + 1;
834+
835+
836+
// Calculate the key for the previous page
837+
var key = (currentPage - 2 + ($('#pagination li').length - 1)) % ($('#pagination li').length - 1); // Corrected the calculation
838+
console.log("Key: " , key);
839+
// Call the paging function with the adjusted key
840+
paging(key);
841+
});
842+
});
843+
});
844+
845+
846+
847+
848+
849+
function paging(key) {
850+
//var targetWord = document.getElementById('.main-submit').value;
851+
var apiUrl = 'https://recipiebeckend.azurewebsites.net/recipes/paging?key=' + key;
852+
fetch(apiUrl)
853+
.then(response => {
854+
if (!response.ok) {
855+
throw new Error('Network response was not ok');
856+
}
857+
return response.json();
858+
})
859+
.then(data => {
860+
displayDashboard(data);
861+
})
862+
.catch(error => console.error('Error fetching data:', error));
734863
}

‎styles/addNewRecipeToBook.css

Lines changed: 46 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,51 @@ body, label{
1414

1515
body {
1616
font-family: 'Arial', sans-serif;
17-
background-color: #f2f2f2;
18-
color: #333;
17+
background-color: var(--background_color);
18+
/* color: #333; */
1919
}
2020

21+
header {
22+
background-color: var(--dark_grey);
23+
color: var(--light_purple);
24+
text-align: center;
25+
padding: 1em;
26+
}
27+
28+
#header-container {
29+
display: flex;
30+
align-items: center;
31+
}
32+
33+
#back-arrow-button {
34+
background: transparent;
35+
border: none;
36+
padding: 0;
37+
position: relative;
38+
}
39+
40+
.back-arrow {
41+
font-size: 5em;
42+
color: var(--light_purple);
43+
position: absolute;
44+
top: 50%;
45+
left: 50%;
46+
transform: translate(0%, -50%);
47+
transition: color 0.3s ease-in-out;
48+
}
49+
50+
#back-arrow-button:hover .back-arrow {
51+
color: var(--purple);
52+
/* Change the color on hover */
53+
cursor: pointer;
54+
/* Change the cursor on hover */
55+
}
56+
57+
#my-recipe-book-title {
58+
flex-grow: 1;
59+
/* This will make the title take up the remaining space */
60+
}
61+
2162
.recipe-form-container,
2263
.recipe-book-container {
2364
max-width: 800px;
@@ -34,7 +75,7 @@ body {
3475
margin-top: 20px; /* Adjust the margin as needed */
3576
}
3677

37-
h1, h2 {
78+
.form-header{
3879
color: #6a0572; /* Purple */
3980
}
4081

@@ -143,7 +184,7 @@ textarea {
143184
position: absolute;
144185
opacity: 0;
145186
cursor: pointer;
146-
top: 0;
147-
left: 0;
187+
width: 0;
188+
height: 0;
148189

149190
}

‎styles/dashboard.css

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1991,4 +1991,47 @@ input[type="radio"],
19911991

19921992
.profile-dropdown:hover .dropdown-content {
19931993
display: block;
1994+
}
1995+
1996+
/*Paging*/
1997+
1998+
.paging-container {
1999+
position: relative;
2000+
/* height: 100vh; */
2001+
width: 100%;
2002+
background-size: cover;
2003+
background-position: center;
2004+
display: flex;
2005+
align-items: center;
2006+
justify-content: center;
2007+
}
2008+
2009+
.paging-container .pagination {
2010+
position: relative;
2011+
height: 60px;
2012+
background: #8a6d8d81;
2013+
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.3);
2014+
display: flex;
2015+
align-items: center;
2016+
justify-content: center;
2017+
backdrop-filter: blur(3px);
2018+
border-radius: 2px;
2019+
}
2020+
2021+
.paging-container .pagination li {
2022+
list-style-type: none;
2023+
display: inline-block;
2024+
}
2025+
2026+
.paging-container .pagination li a {
2027+
position: relative;
2028+
padding: 20px 25px;
2029+
text-decoration: none;
2030+
color: #fff;
2031+
font-weight: 500;
2032+
}
2033+
2034+
.paging-container .pagination li a:hover,
2035+
.paging-container .pagination li.active a {
2036+
background: rgba(255, 255, 255, 0.2);
19942037
}

‎templates/addNewRecipeToBook.html

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,17 @@
99
</head>
1010

1111
<body>
12+
<header>
13+
<div id="header-container">
14+
<button id="back-arrow-button">
15+
<ion-icon class="back-arrow" name="chevron-back-circle-outline"></ion-icon>
16+
</button>
17+
<h1 id="my-recipe-book-title">New Recipe Form</h1>
18+
</div>
19+
</header>
20+
1221
<div class="recipe-form-container">
13-
<h1>Add New Recipe</h1>
22+
<h1 class="form-header">Add New Recipe</h1>
1423

1524
<!-- Recipe form -->
1625
<form id="recipe-form" enctype="multipart/form-data">
@@ -52,6 +61,8 @@ <h1>Add New Recipe</h1>
5261
</div>
5362
</div>
5463
<script src="../scripts/addNewRecipeToBook.js"></script>
64+
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
65+
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
5566

5667
</body>
5768

‎templates/dashboard.html

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,17 @@ <h4 style="color: black; font-family: 'Courier New', Courier, monospace;">recipe
265265
</div>
266266
<!-- end of recipes list -->
267267
</section>
268-
268+
<div class="paging-container">
269+
<ul class="pagination" id="pagination">
270+
<li><a href="#" id="prev">Prev</a></li>
271+
<li class="active"><a href="#">1</a></li>
272+
<li><a href="#">2</a></li>
273+
<li><a href="#">3</a></li>
274+
<li><a href="#">4</a></li>
275+
<li><a href="#">5</a></li>
276+
<li><a href="#" id="next">Next</a></li>
277+
</ul>
278+
</div>
269279
</main>
270280
<!-- end of main -->
271281
<!-- footer -->

0 commit comments

Comments
 (0)