Add option to display chat message data

front/src/components/Content/Chapter.vue

@@ -6,10 +6,12 @@
     </h3>
     <div v-if="desiresContent || print">
       <span v-for="message in topic.messages" :key="message.id">
-        <Message :message="message" />
+        <Message :message="message" :show_message_data="show_message_data" />
         <span>&nbsp;</span>
       </span>
     </div>
+
+    <div style="float: none"><div style="page-break-after: always"></div></div>
   </div>
 </template>
 
@@ -26,7 +28,7 @@ export default {
       desiresContent: false,
     };
   },
-  props: ["topic", "print"],
+  props: ["topic", "print", "show_message_data"],
   computed: {
     toggleSymbol() {
       let r = "";

front/src/components/Content/Message.vue

@@ -1,22 +1,39 @@
 <template>
-  <span :class="classes" class="message">
-    <vue3-markdown-it :source="content" v-bind="$mdOpts"></vue3-markdown-it>
+  <div class="message-outer">
+    <div class="message-data" v-if="show_message_data">
+      <div class="from">{{ message.sender_full_name }}</div>
+      <div class="time">{{ time }}</div>
+    </div>
+    <div :class="classes" class="message">
+      <vue3-markdown-it :source="content" v-bind="$mdOpts"></vue3-markdown-it>
+    </div>
+    <div class="message-data-reactions" v-if="show_message_data">
+      <span
+        class="reaction"
+        v-for="reaction in message.reactions"
+        :key="reaction"
+      >
+        {{ String.fromCodePoint("0x" + reaction.emoji_code) }}
+      </span>
+    </div>
     <div class="reactions ui">
       <template v-for="reaction in reactions" :key="reaction">
         {{ reaction }}
       </template>
     </div>
-  </span>
+  </div>
 </template>
 
 <script>
+import emoji from "../../mixins/emoji";
 var EmojiConvertor = require("emoji-js");
 var emojiConv = new EmojiConvertor();
 /*eslint no-unused-vars: "off"*/
 /*eslint no-undef: "off"*/
 export default {
   name: "Message",
-  props: ["message"],
+  props: ["message", "show_message_data"],
+  mixins: [emoji],
   computed: {
     rawJSON() {
       return "```json\n" + JSON.stringify(this.message, null, 2) + "\n```";
@@ -58,6 +75,12 @@ export default {
     classes() {
       return this.message.reactions.map((r) => "u" + r.emoji_code);
     },
+    time() {
+      var ts = this.message.timestamp;
+      var ts_ms = ts * 1000;
+      var date_ob = new Date(ts_ms);
+      return date_ob.toLocaleString();
+    },
   },
   created() {
     // console.log(this.message.content);
@@ -90,4 +113,19 @@ export default {
   all: revert;
   display: none;
 }
+
+.message-data {
+  display: flex;
+  border-bottom: 1px solid #666;
+}
+.message-data > div {
+  flex-grow: 1;
+}
+
+.message-data .from:after {
+  content: ":";
+}
+.message-data .time {
+  text-align: right;
+}
 </style>

front/src/components/Content/index.vue

@@ -6,6 +6,7 @@
       :key="topic.title"
       :topic="topic"
       :print="print"
+      :show_message_data="show_message_data"
     />
   </section>
 </template>
@@ -24,7 +25,7 @@ export default {
     ...mapGetters(["sortedTopics"]),
   },
   methods: {},
-  props: ["print"],
+  props: ["print", "show_message_data"],
 };
 </script>
 

front/src/mixins/emoji.js

@@ -18,7 +18,7 @@
 export default {
   methods: {
     toEmojiCode: (emoji) => {
-      console.log(emoji);
+      // console.log(emoji);
       return emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16));
     },
 

front/src/views/Home.vue

@@ -4,13 +4,22 @@
       {{ show_ui ? "Hide" : "Show" }} UI
     </button>
     <splitpanes class="default-theme">
-      <pane v-if="show_ui" size="10" min-size="5">
+      <pane v-if="show_ui" size="10" min-size="5" @resize="resizer">
         <Streams />
-        <button @click="toggle_ui">{{ show_ui ? "Hide" : "Show" }} UI</button>
-        <button @click="print">Print</button>
+        <div class="controls">
+          <button @click="toggle_ui">{{ show_ui ? "Hide" : "Show" }} UI</button>
+          <button @click="print">Print</button>
+          <input
+            type="checkbox"
+            id="msg-data"
+            value="1"
+            v-model="show_message_data"
+          />
+          <label for="msg-data">Show chat message data</label>
+        </div>
       </pane>
       <pane size="55">
-        <Content :print="!show_ui" />
+        <Content :print="!show_ui" :show_message_data="show_message_data" />
       </pane>
       <pane v-if="show_ui" size="35" min-size="15">
         <Rules />
@@ -41,6 +50,8 @@ export default {
   data: () => {
     return {
       show_ui: true,
+      show_message_data: false,
+      panel_sizes: { 0: 10, 1: 55, 2: 35 },
     };
   },
   computed: {
@@ -49,6 +60,9 @@ export default {
     },
   },
   methods: {
+    resizer(e, i) {
+      console.log(e, i);
+    },
     print() {
       // let prev = this.show_ui;
       this.toggle_ui(null, false);
@@ -90,6 +104,11 @@ export default {
   height: 100vh;
 }
 
+.controls {
+  display: flex;
+  flex-direction: column;
+}
+
 .print .pane-wrapper {
   height: auto;
 }
@@ -102,6 +121,21 @@ export default {
   width: 100%;
   height: 100%;
 }
+
+/* absolutely needed to make the page breaks work (next style) */
+.print section {
+  display: block !important;
+}
+
+.print .body {
+  page-break-after: always;
+  border-bottom: 3px dotted green;
+}
+.print .body:first-of-type {
+  page-break-after: always;
+  border-bottom: 3px dotted yellow;
+}
+
 .float-btn {
   position: fixed;
   z-index: 1000;