From 509bea946877dd38cd2c9cd993fc9adeac4b8d20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Mon, 4 Nov 2019 18:26:21 +0100
Subject: [PATCH] add optional extra content to each message

---
 .gitignore      |  1 +
 api.php         |  6 +++++-
 main.css        | 15 ++++++++++++++-
 main.js         | 13 ++++++++++---
 outchat-ddl.sql | 12 +++++++-----
 5 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/.gitignore b/.gitignore
index ac81552..246d6c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 outchat.db
+api_extra.php
\ No newline at end of file
diff --git a/api.php b/api.php
index cb9194a..c46c077 100644
--- a/api.php
+++ b/api.php
@@ -47,9 +47,13 @@ if ($action === 'createMessage') {
     $name = $database->escapeString(htmlspecialchars($_POST['name']));
     $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(':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->execute();
 }
diff --git a/main.css b/main.css
index 8b07d13..05d886d 100644
--- a/main.css
+++ b/main.css
@@ -35,11 +35,24 @@ body {
 
 .message__info-name {
     font-weight: 700;
-    margin-right: 15px;
+    margin-right: 10px;
     font-size: 18px;
     line-height: .8;
 }
 
+.message__info-extra {
+    color: #969696;
+    margin-right: 10px;
+}
+
+.message__info-extra:before {
+    content: "(";
+}
+
+.message__info-extra:after {
+    content: ")";
+}
+
 .message__text {
     position: relative;
     white-space: pre-line;
diff --git a/main.js b/main.js
index 8a8b655..d160dba 100644
--- a/main.js
+++ b/main.js
@@ -58,8 +58,8 @@ function getMessages() {
                         scrollWindowDown();
                     }, 100);
                 }
-                for (message of data) {
-                    createMessageNode(message.name, message.text_processed, message.timestamp, message.datetime);
+                for (let message of data) {
+                    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 elementText = document.createElement('div', {class: 'message__text'});
     const elementInfo = document.createElement('div', {class: 'message__info'});
     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 contentName = document.createTextNode(name);
+    const contentExtra = document.createTextNode(extra);
     const contentDatetime = document.createTextNode('[' + datetime + ']');
     //const contentText = document.createTextNode(text)
 
@@ -84,16 +86,21 @@ function createMessageNode(name, text, timestamp, datetime) {
     elementInfo.classList.add('message__info');
     elementDatetime.classList.add('message__info-datetime');
     elementName.classList.add('message__info-name');
+    elementExtra.classList.add('message__info-extra');
 
     // "hash" name color
     elementName.style.color = "#" + intToRGB(hashCode(name));
 
     // append everything to chat
     elementName.appendChild(contentName);
+    elementExtra.appendChild(contentExtra);
     elementDatetime.appendChild(contentDatetime);
     elementText.innerHTML = text;
 
     elementInfo.appendChild(elementName);
+    if (extra) {
+        elementInfo.appendChild(elementExtra);
+    }
     elementInfo.appendChild(elementDatetime);
 
     elementMain.appendChild(elementInfo);
diff --git a/outchat-ddl.sql b/outchat-ddl.sql
index 45b1d49..a0778d2 100644
--- a/outchat-ddl.sql
+++ b/outchat-ddl.sql
@@ -1,7 +1,9 @@
-CREATE TABLE `messages` (
-	`id`	INTEGER PRIMARY KEY AUTOINCREMENT,
-	`name`	TEXT,
-	`text`	TEXT,
-	`timestamp`	INTEGER
+CREATE TABLE `messages`
+(
+    `id`        INTEGER PRIMARY KEY AUTOINCREMENT,
+    `name`      TEXT,
+    `text`      TEXT,
+    `extra`     TEXT,
+    `timestamp` INTEGER
 );