// routes/front/home.js
import express from 'express'
const indexRouter = express.Router()
import home from '../../controllers/front/home.js'
indexRouter.get('/',async (req,res)=>{
home.getItem(req,res)
})
indexRouter.post('/',async (req,res)=>{
home.navigateItem(req,res)
})
export default indexRouter
// controllers/front/home.js
import config from "../../config.js"
import categorydb from '../../models/category.js'
import postdb from '../../models/post.js'
class Home{
async getItem(req,res){
this.config = await config()
this.config.pageTitle = 'ទំព័រដើម'
this.config.route = '/'
this.config.categories = await categorydb.getAllItem(req)
this.config.items = await postdb.getItem(req,this.config.frontPosts)
res.render('base',{data:this.config})
}
async navigateItem(req,res){
this.config.items = await postdb.paginateItem(req,this.config.frontPosts)
res.json(this.config)
}
}
export default new Home()
<!--views/front/home.ejs-->
<link rel="stylesheet" href="/styles/front/home.css" />
<script src="/scripts/navigate.js"></script>
<section class="Content">
<% if(data.items){ %>
<ul class="newest">
<% for(let item of data.items){ %>
<li class="item">
<a class="thumb" href="/post/<%= item.id %>">
<img src="<%= item.thumb %>" />
<% if((item.video)&&(item.video !== '[]')){ %>
<img class="play-icon" src="/images/play.png"/>
<% } %>
</a>
<div>
<a class="title" href="/post/<%= item.id %>">
<%= item.title %>
</a>
<p class="price">$<%= item.price %></p>
<p class="location"><%= item.location %></p>
</div>
</li>
<% } %>
</ul>
<div class="pagination">
<img onclick="navigate.getItem(-1)" src="/images/left.png" />
<img class="home" onclick="navigate.getItem(0)" src="/images/home.png" />
<img onclick="navigate.getItem(1)" src="/images/right.png" />
</div>
<% } %>
<div class="outer">
<a href="/category/land">
<img src="/images/land.png" />
<p>ដីឡូតិ៍</p>
</a>
<a href="/category/house">
<img src="/images/housing.png" />
<p>លំនៅដ្ឋាន</p>
</a>
<a href="/category/car">
<img src="/images/car.png" />
<p>រថយន្ត</p>
</a>
<a href="/category/motorbike">
<img src="/images/motorbike.jpg" />
<p>ទោចក្រយានយន្ត</p>
</a>
<a href="/category/electronic">
<img src="/images/electronic.jpeg" />
<p>គ្រឿង Electronic</p>
</a>
<a href="/category/furniture">
<img src="/images/furniture.jpg" />
<p>គ្រឿងសង្ហារឹម</p>
</a>
<a href="/category/sport">
<img src="/images/sport.jpg" />
<p>សំភារៈកីឡា</p>
</a>
<a href="/category/clothes">
<img src="/images/clothes.png" />
<p>សំលៀកបំពាក់</p>
</a>
<a href="/category/shoes">
<img src="/images/shoe.png" />
<p>ស្បែកជើង</p>
</a>
<a href="/category/cosmetic">
<img src="/images/cosmetic.png" />
<p>គ្រឿងសំអាង</p>
</a>
<a href="/category/book">
<img src="/images/bookstore.png" />
<p>សៀវភៅ</p>
</a>
<a href="/category/food">
<img src="/images/food-drink.png" />
<p>ភេសជ្ជៈ-ម្ហូបអាហារ</p>
</a>
</div>
</section>
/* static/styles/front/home.css */
.Content .newest{
display: grid;
grid-template-columns: calc(50% - 7.5px) calc(50% - 7.5px);
grid-gap: 15px;
}
.Content .newest .item{
display: grid;
grid-template-columns: 30% auto;
grid-gap: 15px;
align-items: center;
background: var(--background);
}
.Content .newest .item .thumb{
display: block;
position: relative;
padding-top: 56.25%;
}
.Content .newest .item .thumb img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.Content .newest .item .thumb .play-icon{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 25%;
height: auto;
}
.Content .newest .item div{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 15px;
}
.Content .newest .item div .title{
color: black;
}
.Content .newest .item div .price{
color: darkred;
}
.Content .pagination{
text-align: center;
background: var(--background);
margin-top: 15px;
padding: 7px 0 2px;
}
.Content .pagination img{
height: 30px;
}
.Content .outer{
display: grid;
grid-template-columns: calc(25% - 11.25px) calc(25% - 11.25px)
calc(25% - 11.25px) calc(25% - 11.25px);
grid-gap: 15px;
margin: 45px auto;
}
.Content .outer a{
position: relative;
padding-top: 56.25%;
color: white;
}
.Content .outer a img{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.Content .outer a p{
position: absolute;
width: 100%;
bottom: 0;
padding: 5px 5px 7px;
text-align: center;
font: 20px/1.5 Oswald, Bayon;
text-shadow: 2px 2px 4px #000000;
background: -webkit-linear-gradient(bottom, black,transparent);
}
@media only screen and (max-width:600px){
.Content .outer,
.Content .newest,
.Content .newest .item{
grid-template-columns: 100%;
padding: 15px;
}
.Content .newest .item .thumb .play-icon{
width: 20%;
}
}
// static/scripts/navigate.js
class Navigate{
constructor(){
this.page = 0
}
async getItem(page){
$('.pagination .home').attr('src','/images/loading.gif')
if(page !== 0){
this.page += page
if(this.page < 0){
this.page = 0
}
}else{
this.page = page
}
const body = {
page: this.page,
}
$.post('/',body,function(data, status){
if(data.items.length === 0){
navigate.page -= 1
$('.pagination .home').attr('src','/images/home.png')
}else{
navigate.generateHmtl(data.items)
}
})
}
async generateHmtl(items){
let html = ''
for(let item of items){
html += `<li class="item">`
html += `<a class="thumb" href="/post/${item.id}">`
html += `<img src="${item.thumb}" />`
if((item.video)&&(item.video !== '[]')){
html += `<img class="play-icon" src="/images/play.png"/>`
}
html += `</a>`
html += `<div>`
html += `<a class="title" href="/post/<%= item.id %>">`
html += item.title
html += `</a>`
html += `<p class="price">$${item.price}</p>`
html += `<p class="location">${item.location}</p>`
html += `</div>`
html += `</li>`
}
$('.Content .newest').html(html)
$('.pagination .home').attr('src','/images/home.png')
}
}
const navigate = new Navigate()