This is the obvious structure to have and will help with doing things
like reordering images (and having the comments move with them).
socket.emit('set-name', name_input.value);
});
socket.emit('set-name', name_input.value);
});
- socket.on('comment', function(comment) {
- const comments = document.querySelector("#" + comment.comments_id);
+ function add_comment(comments, comment) {
const dt = document.createElement('dt');
const dd = document.createElement('dd');
dt.textContent = comment.name + ':';
dd.textContent = comment.text;
comments.appendChild(dt);
comments.appendChild(dd);
const dt = document.createElement('dt');
const dd = document.createElement('dd');
dt.textContent = comment.name + ':';
dd.textContent = comment.text;
comments.appendChild(dt);
comments.appendChild(dd);
+ }
+
+ socket.on('comment', function(comment) {
+ const comments = document.querySelector("#comments_" + comment.image_id);
+ add_comment(comments, comment);
});
socket.on('inform-name', (name) => {
});
socket.on('inform-name', (name) => {
socket.on('image', (image) => {
const figure = document.createElement('figure');
socket.on('image', (image) => {
const figure = document.createElement('figure');
+ figure.id = "image_" + image.id;
const img = document.createElement('img');
img.src = image.filename;
const img = document.createElement('img');
img.src = image.filename;
figure.appendChild(figcaption);
const dl_comments = document.createElement('dl');
figure.appendChild(figcaption);
const dl_comments = document.createElement('dl');
- const comments_id = "comments_" + image.index;
dl_comments.className = "comments";
dl_comments.className = "comments";
- dl_comments.id = comments_id;
+ dl_comments.id = "comments_" + image.id;
+
+ image.comments.forEach((comment) => {
+ add_comment(dl_comments, comment);
+ });
+
figure.appendChild(dl_comments);
const comment_form = document.createElement('form');
figure.appendChild(dl_comments);
const comment_form = document.createElement('form');
comment_form.addEventListener('submit', function(e) {
e.preventDefault();
if (comment_input.value) {
comment_form.addEventListener('submit', function(e) {
e.preventDefault();
if (comment_input.value) {
- socket.emit('comment', {comments_id: comments_id,
+ socket.emit('comment', {image_id: image.id,
text: comment_input.value});
comment_input.value = '';
}
text: comment_input.value});
comment_input.value = '';
}
// Load comments at server startup
fs.readFile(state_file, (err, data) => {
if (err)
// Load comments at server startup
fs.readFile(state_file, (err, data) => {
if (err)
- state = { images: [], comments: [] };
+ state = { images: [] };
else
state = JSON.parse(data);
});
else
state = JSON.parse(data);
});
state.images.forEach((image) => {
socket.emit('image', image)
});
state.images.forEach((image) => {
socket.emit('image', image)
});
- state.comments.forEach((comment) => {
- socket.emit('comment', comment)
- });
socket.on('set-name', (name) => {
console.log("Received set-name event: " + name);
socket.on('set-name', (name) => {
console.log("Received set-name event: " + name);
socket.on('comment', (comment) => {
comment.name = socket.request.session.name;
io.emit('comment', comment);
socket.on('comment', (comment) => {
comment.name = socket.request.session.name;
io.emit('comment', comment);
- state.comments.push(comment);
+ image = state.images.find(image => image.id == comment.image_id);
+ delete comment.image_id;
+ image.comments.push(comment);
});
// Generate an image when requested
});
// Generate an image when requested
child.stdout.on('data', (data) => {
const images = JSON.parse(data);
images.forEach((image) => {
child.stdout.on('data', (data) => {
const images = JSON.parse(data);
images.forEach((image) => {
- image.index = state.images.length;
+ image.id = state.images.length;
io.emit('image', image);
state.images.push(image);
});
io.emit('image', image);
state.images.push(image);
});