After login into my application, it will redirect to the project list page. in their user need to select a project and will navigate to the dashboard. When users come back to the project list page I need to have the recently selected project numbers sorted according to date. I'm tried to use a cookie and get the project id. But I was not able to complete it. Please let me know if anyone has a solution.
$(document).ready(function() {
var projects = [{
name: "Project 001",
id: 102,
detaild: "test details"
}, {
name: "Project 002",
id: 103,
detaild: "test details"
}, {
name: "Project 002",
id: 104,
detaild: "test details"
}, {
name: "Project 003",
id: 105,
detaild: "test details"
}, {
name: "Project 004",
id: 106,
detaild: "test details"
}, ]
$.each(projects, function(key, project) {
var studyTileHtml = `<div class="project-tile" data-id="` + project.id + `"> <p> Project Name: ` + project.name + `</p><p> Project Id: ` + project.id + `</p> <p> Project Details: ` + project.detaild + `</p> </div>`;
$('.project-list').append(studyTileHtml);
});
$('.project-tile').click(function(event) {
var expires = "",
days = 30;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
$('.recent-list').append($(this).attr('data-id'));
document.cookie = "loggedId" + "=" + ($(this).attr('data-id') || "") + expires + "; path=/";
//window.location.href = '/dashbord';
});
});.project-tile {
display: inline-block;
background: #eee;
margin: 10px;
padding: 10px;
border: 1px solid #969696;
cursor: pointer;
}
.recent-log {
display: block;
background: #eee;
width: 500px;
padding: 15px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="project-list"> </div>
<div class="recent-log">
<h2> Recent logged list</h2>
<div class="recent-list"> </div>
</div>