Skip to content
Snippets Groups Projects
Commit a6366815 authored by Benjamin Koltes's avatar Benjamin Koltes
Browse files

Merge branch 'feat/hyperscript' into 'master' 

Feat/hyperscript

See merge request hermod/tv_panel!1
parents 653fc54b d3d44f64
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 173 additions and 103 deletions
.babelrc
+ 2
− 1
View file @ a6366815
{ {
"presets": ["es2015"] "presets": ["es2015"],
"plugins": [["transform-react-jsx", { "pragma": "h" }]]
} }
front/.eslintrc
+ 2
− 1
View file @ a6366815
{ {
"globals": { "globals": {
"io": true, "io": true,
"document": true "document": true,
"window": true
} }
} }
front/toCSS.js → front/cssStringify.js
+ 4
− 2
View file @ a6366815
const toDash = string => string.replace(/([A-Z])/g, char => `-${char.toLowerCase()}`); const toDash = string => string.replace(/([A-Z])/g, char => `-${char.toLowerCase()}`);
export const cssStringify = (object) => { const cssStringify = (object) => {
const array = Object.keys(object).map((cssAttribute) => { const array = Object.keys(object).map((cssAttribute) => {
if (typeof object[cssAttribute] === 'object') { if (typeof object[cssAttribute] === 'object') {
return `${toDash(cssAttribute)} {${stringify(object[cssAttribute])}}`; return `${toDash(cssAttribute)} {${cssStringify(object[cssAttribute])}}`;
} }
return `${toDash(cssAttribute)}: ${object[cssAttribute]};`; return `${toDash(cssAttribute)}: ${object[cssAttribute]};`;
}); });
return array.join(''); return array.join('');
}; };
export default cssStringify;
front/diffNodes.js 0 → 100644
+ 24
− 0
View file @ a6366815
const diffNodes = (parentNode, newNodes) => {
const previousChildNumber = parentNode.childElementCount;
const newChildNumber = newNodes.length;
const previousChildren = parentNode.childNodes;
for (let index = 0; index < Math.min(previousChildNumber, newChildNumber); index += 1) {
parentNode.replaceChild(newNodes[index], previousChildren[index]);
}
for (
let index = Math.min(previousChildNumber, newChildNumber);
index < previousChildNumber;
index += 1
) {
parentNode.removeChild(previousChildren[index]);
}
for (
let index = Math.min(previousChildNumber, newChildNumber);
index < newChildNumber;
index += 1
) {
parentNode.appendChild(newNodes[index]);
}
};
export default diffNodes;
front/display.js
+ 48
− 61
View file @ a6366815
import { cssStringify } from "./toCSS"; import cssStringify from './cssStringify';
export const jsonToHtml = (data) => { const concatTextParts = textParts =>
const head = ` textParts.map((part) => {
<hr style="color: #DDDDDD"/> const style = 'style' in part ? cssStringify(part.style) : '';
<div style="background-color:#F2F2FF; padding:10px"> return (
`; <span className="text-element" style={style}>
{part.text}
</span>
);
});
const jsonTextToHtml = data => <div className="text-bloc">{concatTextParts(data.text)}</div>;
const jsonImageToHtml = data => <div className="image-bloc">{data.image}</div>;
const jsonImageTextToHtml = data => (
<div className="image-text-bloc" style="display: flex">
<img
src="https://people.via.ecp.fr/~stook/perso/ancien_public_html/stickerFlat.png"
style="height: 40px; margin-right: 10px"
/>
<div style="width: 100%; display: flex; justify-content: space-between">
{concatTextParts(data.text)}
</div>
</div>
);
const middle = data.rows.map(row => { export default (data) => {
const head = <div style="background-color:#F2F2FF; padding:10px" />;
data.rows
.map((row) => {
switch (row.type) { switch (row.type) {
case 0: case 0:
return jsonTextToHtml(row); return jsonTextToHtml(row);
...@@ -15,50 +38,14 @@ export const jsonToHtml = (data) => { ...@@ -15,50 +38,14 @@ export const jsonToHtml = (data) => {
case 2: case 2:
return jsonImageToHtml(row); return jsonImageToHtml(row);
default: default:
`` return '';
} }
}).join(''); })
.forEach((row) => {
const foot = ` if (typeof row !== 'string') {
</div> head.appendChild(row);
<hr style="color: #DDDDDD"/>
<div style="color: #DDDDDD">
Hermod version ${data.version}, 2018
</div>
`;
return head + middle + foot;
} }
});
const concatTextParts = (textParts) => { const foot = <div style="color: #DDDDDD">Hermod version {data.version}, 2018</div>;
return textParts.map(part => { return [<hr style="color: #DDDDDD" />, head, <hr style="color: #DDDDDD" />, foot];
const style = ("style" in part) ? `style="${cssStringify(part.style)}"` : ``;
return `<span class="text-element" ${style}>${part.text}</span>`
}).join('&nbsp;&nbsp;');
};
const jsonTextToHtml = (data) => {
return `
<div class="text-bloc">
${concatTextParts(data.text)}
</div>`
};
const jsonImageToHtml = (data) => {
return `
<div class="image-bloc">
${data.image}
</div>`
}
const jsonImageTextToHtml = (data) => {
return `
<div class="image-text-bloc" style="display: flex">
<img src="https://people.via.ecp.fr/~stook/perso/ancien_public_html/stickerFlat.png"
style="height: 40px; margin-right: 10px">
</img>
<div style="width: 100%; display: flex; justify-content: space-between">
${concatTextParts(data.text)}
</div>
</div>`
}; };
front/index.html
+ 2
− 1
View file @ a6366815
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
<div id="panel_data"></div> <div id="panel_data"></div>
<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="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>
<script type="text/javascript" src="./socket.js" defer></script> <script type="text/javascript" src="./socket.js" defer></script>
</body> </body>
......
front/setup.js 0 → 100644
+ 7
− 0
View file @ a6366815
import h from 'hyperscript';
Object.defineProperty(window, 'h', {
value: h,
writable: false,
configurable: false,
});
front/socket.js
+ 5
− 4
View file @ a6366815
import { jsonToHtml } from "./display"; import jsonToHtmlArray from './display';
import diffNodes from './diffNodes';
const socketIO = io.connect('http://localhost:3000/'); const socketIO = io.connect('http://localhost:3000/');
socketIO.on('connect', () => { socketIO.on('connect', () => {
socketIO.emit('date'); socketIO.emit('date');
setInterval(() => { setInterval(() => {
socketIO.emit('date'); socketIO.emit('date');
...@@ -20,9 +20,10 @@ socketIO.on('panel_data', (data) => { ...@@ -20,9 +20,10 @@ socketIO.on('panel_data', (data) => {
console.log(data); console.log(data);
setTimeout(() => { setTimeout(() => {
socketIO.emit('panel_data'); socketIO.emit('panel_data');
console.log(`Next call in ${data.ttl} milliseconds.`) console.log(`Next call in ${data.ttl} milliseconds.`);
}, data.ttl); }, data.ttl);
document.getElementById('panel_data').innerHTML = jsonToHtml(data); const panelData = document.getElementById('panel_data');
diffNodes(panelData, jsonToHtmlArray(data));
}); });
socketIO.on('message', (data) => { socketIO.on('message', (data) => {
......
package.json
+ 3
− 2
View file @ a6366815
...@@ -10,16 +10,17 @@ ...@@ -10,16 +10,17 @@
"start:dev": "nodemon ./server/index.js", "start:dev": "nodemon ./server/index.js",
"start:prod": "node ./server/index.js", "start:prod": "node ./server/index.js",
"start:front": "parcel serve ./front/ -d build", "start:front": "parcel serve ./front/ -d build",
"build:front": "build:front": "rm -f build/* && parcel build ./front/ -d build --public-url / --no-cache && mv build/*.html build/index.html"
"rm -f build/* && parcel build ./front/ -d build --public-url / --no-cache && mv build/*.html build/index.html"
}, },
"dependencies": { "dependencies": {
"hyperscript": "^2.0.2",
"node-fetch": "^2.0.0", "node-fetch": "^2.0.0",
"parcel-bundler": "^1.5.1", "parcel-bundler": "^1.5.1",
"socket.io": "^2.0.4" "socket.io": "^2.0.4"
}, },
"devDependencies": { "devDependencies": {
"babel-eslint": "^8.2.1", "babel-eslint": "^8.2.1",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-es2015": "^6.24.1", "babel-preset-es2015": "^6.24.1",
"eslint": "^4.17.0", "eslint": "^4.17.0",
"eslint-config-airbnb-base": "^12.1.0", "eslint-config-airbnb-base": "^12.1.0",
......
server/index.js
+ 30
− 31
View file @ a6366815
...@@ -13,38 +13,37 @@ io.of('/').on('connection', (socket) => { ...@@ -13,38 +13,37 @@ io.of('/').on('connection', (socket) => {
}); });
socket.on('panel_data', () => { socket.on('panel_data', () => {
socket.emit('panel_data', socket.emit(
'panel_data',
// Pour les tests, json en dur // Pour les tests, json en dur
{ {
"version": "0.0.3", version: '0.0.3',
"ttl": 2000, ttl: 2000,
"rows": [ rows: [
{ {
"type": 1, // 0 for "text", 1 for "text + image", 2 for "image"... type: 1, // 0 for "text", 1 for "text + image", 2 for "image"...
"image": "base_url", image: 'base_url',
"text": [ text: [
{"text": "What I want to display", "style": {"color": "#440044"}}, { text: 'What I want to display', style: { color: '#440044' } },
{"text": incr.toString(), "style": {"color": "#BB8800", "fontWeight": "bold"}} { text: incr.toString(), style: { color: '#BB8800', fontWeight: 'bold' } },
] ],
}, },
{ {
"type": 0, type: 0,
"text": [ text: [
{"text": "Some text", "style": {"color": "#440044"}}, { text: 'Some text', style: { color: '#440044' } },
{"text": incr.toString(), "style": {"color": "#BB8800", "fontWeight": "bold"}} { text: incr.toString(), style: { color: '#BB8800', fontWeight: 'bold' } },
] ],
}, },
{ {
"type": 2, type: 2,
"image": "base_url", image: 'base_url',
"text": [ text: [{ text: 'Nope' }],
{"text": "Nope"} },
] ],
} },
] );
});
// Truc qui change juste pour voir si ça refresh // Truc qui change juste pour voir si ça refresh
incr += 1; incr += 1;
}); });
}); });
server/utils.js
+ 2
− 0
View file @ a6366815
/* eslint no-param-reassign: off, import/prefer-default-export: off */
export const interval = (fn, initialTTL, output = { id: null, clear: () => undefined }) => { export const interval = (fn, initialTTL, output = { id: null, clear: () => undefined }) => {
const timeoutID = setTimeout(async () => { const timeoutID = setTimeout(async () => {
let TTL = fn(); let TTL = fn();
......
yarn.lock
+ 44
− 0
View file @ a6366815
...@@ -339,6 +339,14 @@ babel-generator@^6.25.0, babel-generator@^6.26.0: ...@@ -339,6 +339,14 @@ babel-generator@^6.25.0, babel-generator@^6.26.0:
source-map "^0.5.7" source-map "^0.5.7"
trim-right "^1.0.1" trim-right "^1.0.1"
babel-helper-builder-react-jsx@^6.24.1:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.26.0.tgz#39ff8313b75c8b65dceff1f31d383e0ff2a408a0"
dependencies:
babel-runtime "^6.26.0"
babel-types "^6.26.0"
esutils "^2.0.2"
babel-helper-call-delegate@^6.24.1: babel-helper-call-delegate@^6.24.1:
version "6.24.1" version "6.24.1"
resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.24.1.tgz#ece6aacddc76e41c3461f88bfc575bd0daa2df8d" resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.24.1.tgz#ece6aacddc76e41c3461f88bfc575bd0daa2df8d"
...@@ -426,6 +434,10 @@ babel-plugin-check-es2015-constants@^6.22.0: ...@@ -426,6 +434,10 @@ babel-plugin-check-es2015-constants@^6.22.0:
dependencies: dependencies:
babel-runtime "^6.22.0" babel-runtime "^6.22.0"
babel-plugin-syntax-jsx@^6.8.0:
version "6.18.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
babel-plugin-transform-es2015-arrow-functions@^6.22.0: babel-plugin-transform-es2015-arrow-functions@^6.22.0:
version "6.22.0" version "6.22.0"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
...@@ -594,6 +606,14 @@ babel-plugin-transform-es2015-unicode-regex@^6.24.1: ...@@ -594,6 +606,14 @@ babel-plugin-transform-es2015-unicode-regex@^6.24.1:
babel-runtime "^6.22.0" babel-runtime "^6.22.0"
regexpu-core "^2.0.0" regexpu-core "^2.0.0"
babel-plugin-transform-react-jsx@^6.24.1:
version "6.24.1"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.24.1.tgz#840a028e7df460dfc3a2d29f0c0d91f6376e66a3"
dependencies:
babel-helper-builder-react-jsx "^6.24.1"
babel-plugin-syntax-jsx "^6.8.0"
babel-runtime "^6.22.0"
babel-plugin-transform-regenerator@^6.24.1: babel-plugin-transform-regenerator@^6.24.1:
version "6.26.0" version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f" resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f"
...@@ -829,6 +849,10 @@ browser-resolve@^1.11.2: ...@@ -829,6 +849,10 @@ browser-resolve@^1.11.2:
dependencies: dependencies:
resolve "1.1.7" resolve "1.1.7"
browser-split@0.0.0:
version "0.0.0"
resolved "https://registry.yarnpkg.com/browser-split/-/browser-split-0.0.0.tgz#41419caef769755929dd518967d3eec0a6262771"
browserify-aes@^1.0.0, browserify-aes@^1.0.4: browserify-aes@^1.0.0, browserify-aes@^1.0.4:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.1.1.tgz#38b7ab55edb806ff2dcda1a7f1620773a477c49f" resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.1.1.tgz#38b7ab55edb806ff2dcda1a7f1620773a477c49f"
...@@ -1043,6 +1067,12 @@ clap@^1.0.9: ...@@ -1043,6 +1067,12 @@ clap@^1.0.9:
dependencies: dependencies:
chalk "^1.1.3" chalk "^1.1.3"
class-list@~0.1.0, class-list@~0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/class-list/-/class-list-0.1.1.tgz#9b9745192c4179b5da0a0d7633658e3c70d796cb"
dependencies:
indexof "0.0.1"
class-utils@^0.3.5: class-utils@^0.3.5:
version "0.3.6" version "0.3.6"
resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463" resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
...@@ -2228,6 +2258,12 @@ html-comment-regex@^1.1.0: ...@@ -2228,6 +2258,12 @@ html-comment-regex@^1.1.0:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e" resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
html-element@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/html-element/-/html-element-2.2.0.tgz#c3c1ff88c261db74d0af6391eef90c346f900730"
dependencies:
class-list "~0.1.1"
htmlnano@^0.1.6: htmlnano@^0.1.6:
version "0.1.6" version "0.1.6"
resolved "https://registry.yarnpkg.com/htmlnano/-/htmlnano-0.1.6.tgz#709aa2d96d8df37bfd8dbfa6ce5f4f80c863738e" resolved "https://registry.yarnpkg.com/htmlnano/-/htmlnano-0.1.6.tgz#709aa2d96d8df37bfd8dbfa6ce5f4f80c863738e"
...@@ -2271,6 +2307,14 @@ https-browserify@^1.0.0: ...@@ -2271,6 +2307,14 @@ https-browserify@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73" resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
hyperscript@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/hyperscript/-/hyperscript-2.0.2.tgz#3839cba45554bdfe27bb81c2142d1684f8135af5"
dependencies:
browser-split "0.0.0"
class-list "~0.1.0"
html-element "^2.0.0"
iconv-lite@^0.4.17: iconv-lite@^0.4.17:
version "0.4.19" version "0.4.19"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment