Skip to content
Snippets Groups Projects
Commit 794f7201 authored by Ayc0's avatar Ayc0
Browse files

Add hyperscript

parent 8f559d22
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
.babelrc
+ 2
− 1
View file @ 794f7201
{
"presets": ["es2015"]
"presets": ["es2015"],
"plugins": [["transform-react-jsx", { "pragma": "h" }]]
}
front/.eslintrc
+ 2
− 1
View file @ 794f7201
{
"globals": {
"io": true,
"document": true
"document": true,
"window": true
}
}
front/display.js
+ 50
− 61
View file @ 794f7201
import { cssStringify } from "./toCSS";
export const jsonToHtml = (data) => {
const head = `
<hr style="color: #DDDDDD"/>
<div style="background-color:#F2F2FF; padding:10px">
`;
import cssStringify from './cssStringify';
const concatTextParts = textParts =>
textParts.map((part) => {
const style = 'style' in part ? `"${cssStringify(part.style)}"` : '';
return (
<span class="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) {
case 0:
return jsonTextToHtml(row);
......@@ -15,50 +38,16 @@ export const jsonToHtml = (data) => {
case 2:
return jsonImageToHtml(row);
default:
``
return null;
}
}).join('');
const foot = `
</div>
<hr style="color: #DDDDDD"/>
<div style="color: #DDDDDD">
Hermod version ${data.version}, 2018
</div>
`;
return head + middle + foot;
})
.forEach((row) => {
if (typeof row !== 'string') {
head.appendChild(row);
} else {
console.log(row);
}
const concatTextParts = (textParts) => {
return textParts.map(part => {
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>`
});
const foot = <div style="color: #DDDDDD">Hermod version {data.version}, 2018</div>;
return [<hr style="color: #DDDDDD" />, head, <hr style="color: #DDDDDD" />, foot];
};
front/index.html
+ 2
− 1
View file @ 794f7201
......@@ -16,6 +16,7 @@
<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="./setup.js" defer></script>
<script type="text/javascript" src="./socket.js" defer></script>
</body>
......
front/setup.js 0 → 100644
+ 7
− 0
View file @ 794f7201
import h from 'hyperscript';
Object.defineProperty(window, 'h', {
value: h,
writable: false,
configurable: false,
});
front/socket.js
+ 3
− 3
View file @ 794f7201
import { jsonToHtml } from "./display";
import jsonToHtmlArray from './display';
const socketIO = io.connect('http://localhost:3000/');
socketIO.on('connect', () => {
socketIO.emit('date');
setInterval(() => {
socketIO.emit('date');
......@@ -22,7 +21,8 @@ socketIO.on('panel_data', (data) => {
socketIO.emit('panel_data');
console.log(`Next call in ${data.ttl} milliseconds.`);
}, data.ttl);
document.getElementById('panel_data').innerHTML = jsonToHtml(data);
const panelData = document.getElementById('panel_data');
jsonToHtmlArray(data).forEach(htmlElement => panelData.appendChild(htmlElement));
});
socketIO.on('message', (data) => {
......
package.json
+ 3
− 2
View file @ 794f7201
......@@ -10,16 +10,17 @@
"start:dev": "nodemon ./server/index.js",
"start:prod": "node ./server/index.js",
"start:front": "parcel serve ./front/ -d build",
"build:front":
"rm -f build/* && parcel build ./front/ -d build --public-url / --no-cache && mv build/*.html build/index.html"
"build:front": "rm -f build/* && parcel build ./front/ -d build --public-url / --no-cache && mv build/*.html build/index.html"
},
"dependencies": {
"hyperscript": "^2.0.2",
"node-fetch": "^2.0.0",
"parcel-bundler": "^1.5.1",
"socket.io": "^2.0.4"
},
"devDependencies": {
"babel-eslint": "^8.2.1",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"eslint": "^4.17.0",
"eslint-config-airbnb-base": "^12.1.0",
......
yarn.lock
+ 44
− 0
View file @ 794f7201
......@@ -339,6 +339,14 @@ babel-generator@^6.25.0, babel-generator@^6.26.0:
source-map "^0.5.7"
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:
version "6.24.1"
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:
dependencies:
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:
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"
......@@ -594,6 +606,14 @@ babel-plugin-transform-es2015-unicode-regex@^6.24.1:
babel-runtime "^6.22.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:
version "6.26.0"
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:
dependencies:
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:
version "1.1.1"
resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.1.1.tgz#38b7ab55edb806ff2dcda1a7f1620773a477c49f"
......@@ -1043,6 +1067,12 @@ clap@^1.0.9:
dependencies:
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:
version "0.3.6"
resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
......@@ -2228,6 +2258,12 @@ html-comment-regex@^1.1.0:
version "1.1.1"
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:
version "0.1.6"
resolved "https://registry.yarnpkg.com/htmlnano/-/htmlnano-0.1.6.tgz#709aa2d96d8df37bfd8dbfa6ce5f4f80c863738e"
......@@ -2271,6 +2307,14 @@ https-browserify@^1.0.0:
version "1.0.0"
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:
version "0.4.19"
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