Add book columns and simple modals

This commit is contained in:
Robbie Antenesse 2018-12-26 23:36:47 -07:00
parent f2948edcc6
commit c0b154e1f6
5 changed files with 45 additions and 5 deletions

View File

@ -15,5 +15,10 @@ $(document).ready(function() {
fileName = fileName.substr(lastIndexOfSlash + 1); fileName = fileName.substr(lastIndexOfSlash + 1);
} }
$('#bookFileName').text(fileName ? fileName : 'None Selected'); $('#bookFileName').text(fileName ? fileName : 'None Selected');
}) });
$('.book').click(function() {
var modal = $(this).data('modal');
$('#' + modal).addClass('is-active');
});
}); });

View File

@ -19,6 +19,8 @@ function Server () {
this.fileLocation = path.resolve(settings.fileLocation); this.fileLocation = path.resolve(settings.fileLocation);
this.historyLocation = path.resolve(settings.historyLocation); this.historyLocation = path.resolve(settings.historyLocation);
this.templateCache = {};
this.takenBooks = []; this.takenBooks = [];
this.server.use(helmet()); this.server.use(helmet());
@ -42,7 +44,20 @@ function Server () {
this.server.use('/css', express.static(path.join(__dirname, './public/css/'))); this.server.use('/css', express.static(path.join(__dirname, './public/css/')));
this.server.get('/', (req, res) => { this.server.get('/', (req, res) => {
const body = this.fillTemplate('./templates/pages/uploadForm.html'); const files = fs.readdirSync(this.fileLocation).filter(fileName => fileName.includes('.json'));
const books = files.map(fileName => {
const bookData = JSON.parse(fs.readFileSync(path.resolve(this.fileLocation, fileName), 'utf8'));
const id = fileName.replace('.json', '');
const content = '<div class="box">' + bookData.summary + '</div>';
const modal = this.fillTemplate('./templates/elements/modal.html', { content, id });
return this.fillTemplate('./templates/elements/book.html', {
id,
title: bookData.title,
author: bookData.author,
modal,
})
}).join('');
const body = this.fillTemplate('./templates/pages/booksList.html', { books });
const html = this.fillTemplate('./templates/htmlContainer.html', { body }); const html = this.fillTemplate('./templates/htmlContainer.html', { body });
if (html) { if (html) {
res.send(html); res.send(html);
@ -65,6 +80,7 @@ function Server () {
message: 'Thank you for your contribution!' message: 'Thank you for your contribution!'
}); });
const modal = this.fillTemplate('./templates/elements/modal.html', { const modal = this.fillTemplate('./templates/elements/modal.html', {
isActive: 'is-active',
content: messageBox, content: messageBox,
}); });
const body = this.fillTemplate('./templates/pages/uploadForm.html'); const body = this.fillTemplate('./templates/pages/uploadForm.html');
@ -77,6 +93,7 @@ function Server () {
message: err, message: err,
}); });
const modal = this.fillTemplate('./templates/elements/modal.html', { const modal = this.fillTemplate('./templates/elements/modal.html', {
isActive: 'is-active',
content: messageBox, content: messageBox,
}); });
const body = this.fillTemplate('./templates/pages/uploadForm.html'); const body = this.fillTemplate('./templates/pages/uploadForm.html');
@ -125,9 +142,17 @@ function Server () {
} }
Server.prototype.fillTemplate = function (file, templateVars = {}) { Server.prototype.fillTemplate = function (file, templateVars = {}) {
const page = path.join(__dirname, file); let data;
const data = fs.readFileSync(page, 'utf8'); if (this.templateCache.hasOwnProperty(file)) {
data = this.templateCache[file];
} else {
data = fs.readFileSync(path.join(__dirname, file), 'utf8');
}
if (data) { if (data) {
if (!this.templateCache.hasOwnProperty(file)) {
this.templateCache[file] = data;
}
let filledTemplate = data.replace(/\{\{allowedFormats\}\}/g, settings.allowedFormats.join(',')) let filledTemplate = data.replace(/\{\{allowedFormats\}\}/g, settings.allowedFormats.join(','))
.replace(/\{\{maxFileSize\}\}/g, (settings.maxFileSize > 0 ? settings.maxFileSize + 'MB' : 'no')); .replace(/\{\{maxFileSize\}\}/g, (settings.maxFileSize > 0 ? settings.maxFileSize + 'MB' : 'no'));

View File

@ -0,0 +1,7 @@
<div class="column is-one-quarter">
<div class="box book has-text-centered" data-modal="{{id}}">
<h2 class="title">{{title}}</h2>
<h4 class="subtitle">{{author}}</h4>
</div>
{{modal}}
</div>

View File

@ -1,4 +1,4 @@
<div class="modal is-active"> <div class="modal {{isActive}}" id="{{id}}">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-content"> <div class="modal-content">
{{content}} {{content}}

View File

@ -0,0 +1,3 @@
<div class="columns is-multiline">
{{books}}
</div>