add optional extra content to each message

This commit is contained in:
Tomáš Mládek 2019-11-04 18:26:21 +01:00
parent 3940844fc9
commit 509bea9468
5 changed files with 37 additions and 10 deletions

1
.gitignore vendored
View file

@ -1 +1,2 @@
outchat.db outchat.db
api_extra.php

View file

@ -47,9 +47,13 @@ if ($action === 'createMessage') {
$name = $database->escapeString(htmlspecialchars($_POST['name'])); $name = $database->escapeString(htmlspecialchars($_POST['name']));
$text = $database->escapeString(htmlspecialchars($_POST['text'])); $text = $database->escapeString(htmlspecialchars($_POST['text']));
$statement = $database->prepare('INSERT INTO messages (name, text, timestamp) VALUES (:name, :text, :timestamp)'); $statement = $database->prepare('INSERT INTO messages (name, text, extra, timestamp) VALUES (:name, :text, :extra, :timestamp)');
$statement->bindValue(':name', $name, SQLITE3_TEXT); $statement->bindValue(':name', $name, SQLITE3_TEXT);
$statement->bindValue(':text', $text, SQLITE3_TEXT); $statement->bindValue(':text', $text, SQLITE3_TEXT);
if (file_exists('api_extra.php')) {
$extra_content = require 'api_extra.php';
$statement->bindValue(':extra', $extra_content(), SQLITE3_TEXT);
}
$statement->bindValue(':timestamp', $timestamp, SQLITE3_INTEGER); $statement->bindValue(':timestamp', $timestamp, SQLITE3_INTEGER);
$statement->execute(); $statement->execute();
} }

View file

@ -35,11 +35,24 @@ body {
.message__info-name { .message__info-name {
font-weight: 700; font-weight: 700;
margin-right: 15px; margin-right: 10px;
font-size: 18px; font-size: 18px;
line-height: .8; line-height: .8;
} }
.message__info-extra {
color: #969696;
margin-right: 10px;
}
.message__info-extra:before {
content: "(";
}
.message__info-extra:after {
content: ")";
}
.message__text { .message__text {
position: relative; position: relative;
white-space: pre-line; white-space: pre-line;

13
main.js
View file

@ -58,8 +58,8 @@ function getMessages() {
scrollWindowDown(); scrollWindowDown();
}, 100); }, 100);
} }
for (message of data) { for (let message of data) {
createMessageNode(message.name, message.text_processed, message.timestamp, message.datetime); createMessageNode(message.name, message.text_processed, message.extra, message.timestamp, message.datetime);
} }
} }
}) })
@ -68,13 +68,15 @@ function getMessages() {
}); });
} }
function createMessageNode(name, text, timestamp, datetime) { function createMessageNode(name, text, extra, timestamp, datetime) {
const elementMain = document.createElement('div', {class: 'message'}); const elementMain = document.createElement('div', {class: 'message'});
const elementText = document.createElement('div', {class: 'message__text'}); const elementText = document.createElement('div', {class: 'message__text'});
const elementInfo = document.createElement('div', {class: 'message__info'}); const elementInfo = document.createElement('div', {class: 'message__info'});
const elementName = document.createElement('div', {id: 'message__info-name'}); const elementName = document.createElement('div', {id: 'message__info-name'});
const elementExtra = document.createElement('div', {class: 'message__info-extra'});
const elementDatetime = document.createElement('div', {id: 'message__info-datetime'}); const elementDatetime = document.createElement('div', {id: 'message__info-datetime'});
const contentName = document.createTextNode(name); const contentName = document.createTextNode(name);
const contentExtra = document.createTextNode(extra);
const contentDatetime = document.createTextNode('[' + datetime + ']'); const contentDatetime = document.createTextNode('[' + datetime + ']');
//const contentText = document.createTextNode(text) //const contentText = document.createTextNode(text)
@ -84,16 +86,21 @@ function createMessageNode(name, text, timestamp, datetime) {
elementInfo.classList.add('message__info'); elementInfo.classList.add('message__info');
elementDatetime.classList.add('message__info-datetime'); elementDatetime.classList.add('message__info-datetime');
elementName.classList.add('message__info-name'); elementName.classList.add('message__info-name');
elementExtra.classList.add('message__info-extra');
// "hash" name color // "hash" name color
elementName.style.color = "#" + intToRGB(hashCode(name)); elementName.style.color = "#" + intToRGB(hashCode(name));
// append everything to chat // append everything to chat
elementName.appendChild(contentName); elementName.appendChild(contentName);
elementExtra.appendChild(contentExtra);
elementDatetime.appendChild(contentDatetime); elementDatetime.appendChild(contentDatetime);
elementText.innerHTML = text; elementText.innerHTML = text;
elementInfo.appendChild(elementName); elementInfo.appendChild(elementName);
if (extra) {
elementInfo.appendChild(elementExtra);
}
elementInfo.appendChild(elementDatetime); elementInfo.appendChild(elementDatetime);
elementMain.appendChild(elementInfo); elementMain.appendChild(elementInfo);

View file

@ -1,7 +1,9 @@
CREATE TABLE `messages` ( CREATE TABLE `messages`
`id` INTEGER PRIMARY KEY AUTOINCREMENT, (
`name` TEXT, `id` INTEGER PRIMARY KEY AUTOINCREMENT,
`text` TEXT, `name` TEXT,
`timestamp` INTEGER `text` TEXT,
`extra` TEXT,
`timestamp` INTEGER
); );