add optional extra content to each message
This commit is contained in:
parent
3940844fc9
commit
509bea9468
5 changed files with 37 additions and 10 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -1 +1,2 @@
|
||||||
outchat.db
|
outchat.db
|
||||||
|
api_extra.php
|
6
api.php
6
api.php
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
15
main.css
15
main.css
|
@ -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
13
main.js
|
@ -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);
|
||||||
|
|
|
@ -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
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue