Browse Source

pagination kinda works, but needs ui

canon
Hazel Levine 3 years ago
parent
commit
c62459b58c
  1. 17
      app.js
  2. 47
      mixins/paginate.css
  3. 18
      mixins/paginate.pug
  4. 3
      public/index.js
  5. 5
      src/imagefile.js
  6. 0
      views/index.pug
  7. 9
      views/pages.pug

17
app.js

@ -15,8 +15,9 @@ const app = express();
// mongodb://user:password@server:port/db
// TODO: put this in a seperate config?
const dbURL = `mongodb://${creds.mongoUser}:${creds.mongoPass}@localhost:27017/bunnies`;
mongoose.connect(dbURL);
app.set('view engine', 'pug');
app.use(paginate.middleware(15, 50)); // limit, maxLimit
app.use('/', routes);
app.use(express.static(__dirname + '/public')); // allows access to /uploads/<image>
@ -47,31 +48,29 @@ app.get('/random', (req, res) => {
});
});
app.get('/pages/:page', async (req, res, next) => {
app.get('/pages', async (req, res, next) => {
try {
const [ results, itemCount ] = await Promise.all([
schema.find({}).limit(req.query.limit).skip(req.skip).lean().exec(),
schema.count({})
]);
console.log(itemCount);
// const pageCount = Math.ceil(itemCount / req.query.limit);
const pageCount = Number(req.params.page); // TODO: additional checks on this
const pageCount = Math.ceil(itemCount / req.query.limit);
if (req.accepts('json')) {
/* if (req.accepts('json')) {
res.json({
object: 'list',
has_more: paginate.hasNextPages(req)(pageCount),
data: results
});
} else {
res.render('pages', {
} else { */
res.render('pages.pug', {
docs: results,
pageCount,
itemCount,
pages: paginate.getArrayPages(req)(3, pageCount, req.query.page)
});
}
// }
} catch (err) {
next(err);
}

47
mixins/paginate.css

@ -0,0 +1,47 @@
/* bunnydb paginate.css CLIENT/git 07/31/2018 hazel <arcetera@openmailbox.org> */
/* https://codepen.io/anon/pen/GJXzpJ */
.paginate-container {
width: 960px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 30px;
position: absolute;
font-size: 20px;
text-align: center;
}
.paginate-container span {
height: 30px;
width: 30px;
color: rgba(0,0,0,0.5);
transition: color 2s;
cursor: pointer;
display: inline-block;
line-height: 30px;
}
.paginate-container .page-active span {
background: #2196f3;
border-radius: 50%;
color: white;
}
.paginate-container .page-active span:hover {
color: white;
}
.paginate-container span:hover {
color: black;
transition: color 2s;
}
.paginate-container span:first-child {
margin-left: 10px;
}
.paginate-container span:last-child {
margin-left: 10px;
}

18
mixins/paginate.pug

@ -0,0 +1,18 @@
//- bunnydb paginate.pug CLIENT/git 07/31/2018 hazel <arcetera@openmailbox.org>
style
include ./paginate.css
//- check if we have any pages to serve, otherwise don't even bother
if paginate.hasPreviousPages || paginate.hasNextPages(pageCount)
.paginate-container
if paginate.hasPreviousPages
a(href=paginate.href(true))
| Previous
if pages
each page in pages
a(href=page.url)
span= page.number
if paginate.hasNextPages(pageCount)
a(href=paginate.href())
| Next

3
public/index.js

@ -11,7 +11,8 @@ window.onload = () => {
});
imagesLoaded(elem).on('progress', () => {
/* elem.classList.remove('are-images-unloaded'); msnry.options.itemSelector = '.masonry-grid-item';
/* elem.classList.remove('are-images-unloaded');
msnry.options.itemSelector = '.masonry-grid-item';
let items = elem.querySelectorAll('.masonry-grid-item');
msnry.appended(items); */
msnry.layout();

5
src/imagefile.js

@ -57,9 +57,8 @@ let upload = multer({
router.get('/', (req, res, next) => {
getAllFiles(schema, (filesOut) => {
res.render('../public/index.pug', {
files: filesOut,
stripBun: stripPath
res.render('index.pug', {
files: filesOut
});
});
});

0
public/index.pug → views/index.pug

9
views/pages.pug

@ -0,0 +1,9 @@
//- bunnydb pages.pug CLIENT/git 07/31/2018 hazel <arcetera@openmailbox.org>
h1 Test
ul
each bun in docs
li= bun.path
include ../mixins/paginate.pug
Loading…
Cancel
Save