Merge branch 'front/improvements' into 'master'

Front/improvements

See merge request hermod/tv_panel!4

front/display.js

@@ -10,23 +10,21 @@ const concatTextParts = textParts =>
     );
   });
 
-const jsonTextToHtml = data => <div className="text-bloc">{concatTextParts(data.text)}</div>;
+const jsonTextToHtml = data => <div className="bloc text-bloc">{concatTextParts(data.text)}</div>;
 
-const jsonImageToHtml = data => <div className="image-bloc">
-  <img
-    src="https://people.via.ecp.fr/~bebert/chatenay.jpg"
-    alt-src={data.image}
-    style="height: 80px; margin-right: 10px; border: solid 1px #A0A0A0"
-  />
-</div>;
+const jsonImageToHtml = (data) => {
+  const style = 'heightFactor' in data ? `height: calc(${data.heightFactor} * var(--rowHeight))` : '';
+  return (
+    <div className="bloc image-bloc" style={style}>
+      <img src={data.image}/>
+    </div>
+  );
+};
 
 const jsonImageTextToHtml = data => (
-  <div className="image-text-bloc" style="display: flex">
-    <img
-      src="https://people.via.ecp.fr/~bebert/toddy.jpg"
-      style="height: 80px; margin-right: 10px; border: solid 1px #A0A0A0"
-    />
-    <div style="width: 100%; display: flex; justify-content: space-between">
+  <div className="bloc image-text-bloc">
+    <img src={data.image}/>
+    <div className="text-section">
       {concatTextParts(data.text)}
     </div>
   </div>
@@ -55,6 +53,10 @@ export default (data) => {
         head.appendChild(row);
       }
     });
-  const foot = <div style="color: #DDDDDD">Hermod version {data.version}, 2018</div>;
-  return [<hr style="color: #DDDDDD" />, head, <hr style="color: #DDDDDD" />, foot];
+  const foot = (
+    <div className="mini">
+      <p>Last data: { (new Date(Date.now())).toLocaleString() }; TTL: {data.ttl / 1000}s</p>
+      <p>Hermod version {data.version}, 2018</p>
+    </div>);
+  return [<hr className="mini" />, head, <hr style="color: #DDDDDD" />, foot];
 };

front/index.html

@@ -15,8 +15,7 @@
 
   <div id="panel_data"></div>
 
-  <style type="text/css" id="root">
-  </style>
+  <style type="text/css" id="root"></style>
 
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.slim.js"></script>
   <script type="text/javascript" src="./setup.js" defer></script>

front/socket.js

@@ -12,22 +12,28 @@ socketIO.on('connect', () => {
   socketIO.emit('panel_data');
 });
 
+socketIO.on('config', (data) => {
+  document.getElementById('root').innerHTML = `html
+    {
+      --fontSize: ${data.fontSize};
+      --rowHeight: ${data.rowHeight};
+    }`;
+});
+
 socketIO.on('date', (data) => {
   document.getElementById('date').innerHTML = new Date(data.date).toLocaleString();
 });
 
 socketIO.on('panel_data', (data) => {
-  console.log(data);
+  // console.log(data);
   // data.ttl = 500000;
   setTimeout(() => {
     socketIO.emit('panel_data');
-    console.log(`Next call in ${data.ttl} milliseconds.`);
   }, data.ttl);
   const panelData = document.getElementById('panel_data');
-  document.getElementById('root').innerHTML = 'html {--size: 80px;}';
   diffNodes(panelData, jsonToHtmlArray(data));
 });
 
-socketIO.on('message', (data) => {
-  console.log(data);
-});
+// socketIO.on('message', (data) => {
+//   console.log(data);
+// });

front/style.css

+.mini {
+  color: #DDDDDD;
+}
+
+.mini p {
+  margin: 0;
+}
+
 .text-element {
-  font-size: var(--size);
+  font-size: var(--fontSize);
+}
+
+.bloc {
+  height: 100px;
+  margin-bottom: 10px;
 }
 
 .text-bloc {
   border: 1px solid black;
-  padding: 10px;
-  margin-bottom: 10px;
   background-color: #E2FFE0;
+  padding: 10px;
   display: flex;
   justify-content: space-between;
 }
 
 .image-bloc {
   border: 1px solid black;
-  padding: 10px;
-  margin-bottom: 10px;
   background-color: #FFDDDD;
 }
 
+.image-bloc img {
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+
 .image-text-bloc {
   border: 1px solid black;
-  padding: 10px;
-  margin-bottom: 10px;
   background-color: #FFFFDD;
+  padding: 10px;
+  display: flex;
+}
+
+.image-text-bloc img {
+  height: 100%;
+  margin-right: 20px;
+  /* border: solid 1px #A0A0A0; */
+  /* margin-left: -1px; */
+  /* margin-top: -1px; */
+}
+
+.image-text-bloc .text-section {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
 }

server/config.js

@@ -4,5 +4,6 @@ const path = require('path');
 module.exports = {
   uuid: '10',
   fontSize: '80px',
+  rowHeight: '100px',
   cert: fs.readFileSync(path.resolve(__dirname, '../key.pem')),
 };

server/index.js

 const fetch = require('node-fetch');
 const io = require('socket.io')(3000);
 
-const { uuid } = require('./config');
+const { uuid, fontSize, rowHeight } = require('./config');
 const { createSignedJWT } = require('./utils');
 
 io.of('/').on('connection', (socket) => {
+  socket.emit('config', { fontSize, rowHeight });
+
   // Respond to date message with the date
   socket.on('date', () => {
     socket.emit('date', { date: Date.now() });
@@ -21,4 +23,35 @@ io.of('/').on('connection', (socket) => {
       .then(res => socket.emit('panel_data', res))
       .catch(console.log);
   });
+
+  // TEMP Respond to panel_data message by fetching the info from the server
+  socket.on('panel_data0', () => {
+    socket.emit('panel_data', {
+      version: '0.0.4',
+      ttl: 300000,
+      rows: [
+        {
+          type: 1,
+          image: 'https://people.via.ecp.fr/~bebert/toddy.jpg',
+          text: [
+            { text: 'What I want to display', style: { color: '#000000' } },
+            { text: '42', style: { color: '#BB8800', fontWeight: 'bold' } },
+          ],
+        },
+        {
+          type: 0,
+          text: [
+            { text: 'Some text', style: { color: '#000000' } },
+            { text: '66', style: { color: '#BB8800', fontWeight: 'bold' } },
+          ],
+        },
+        {
+          type: 2,
+          image: 'https://people.via.ecp.fr/~bebert/chatenay.jpg',
+          heightFactor: 3,
+          text: [{ text: 'Nope' }],
+        },
+      ],
+    });
+  });
 });