From 9fa0d793c5f77afdfb87c3e3393f2206056db712 Mon Sep 17 00:00:00 2001
From: paf <paf@titelfrei.de>
Date: Thu, 28 Jan 2021 09:00:37 +0100
Subject: [PATCH] improve super state documentation by coloring icons
---
docs/super-states.md | 26 +++----
src/scripts/generateDocs-testSuperState.js | 85 +++++++++++++++++-----
2 files changed, 78 insertions(+), 33 deletions(-)
diff --git a/docs/super-states.md b/docs/super-states.md
index e8194904..234f4f09 100644
--- a/docs/super-states.md
+++ b/docs/super-states.md
@@ -4,16 +4,16 @@
| key | icon | description |
| --- | --- | --- |
- | monitor_group | <img src="https://fonts.gstatic.com/s/i/materialicons/supervisor_account/v10/24px.svg"> | Testleiter |
- | demo | <img src="https://fonts.gstatic.com/s/i/materialicons/preview/v10/24px.svg"> | Vorschau-Modus |
- | pending | <img src="https://fonts.gstatic.com/s/i/materialicons/person_outline/v10/24px.svg"> | Test noch nicht gestartet |
- | locked | <img src="https://fonts.gstatic.com/s/i/materialicons/lock/v10/24px.svg"> | Test gesperrt |
- | error | <div style="filter: invert(10%) sepia(46%) saturate(5531%) hue-rotate(338deg) brightness(100%) contrast(98%);"><img src="https://fonts.gstatic.com/s/i/materialicons/error/v10/24px.svg"></div> | Es ist ein Fehler aufgetreten! |
- | controller_terminated | <div style="filter: invert(10%) sepia(46%) saturate(5531%) hue-rotate(338deg) brightness(100%) contrast(98%);"><img src="https://fonts.gstatic.com/s/i/materialicons/sync_problem/v10/24px.svg"></div> | Testausführung wurde beendet und kann wieder aufgenommen werden. Der Browser des Teilnehmers ist nicht verbunden und muss neu geladen werden! |
- | connection_lost | <div style="filter: invert(10%) sepia(46%) saturate(5531%) hue-rotate(338deg) brightness(100%) contrast(98%);"><img src="https://fonts.gstatic.com/s/i/materialicons/error/v10/24px.svg"></div> | Seite wurde verlassen oder Browserfenster geschlossen! |
- | paused | <img src="https://fonts.gstatic.com/s/i/materialicons/pause/v10/24px.svg"> | Test pausiert |
- | focus_lost | <div style="filter: invert(10%) sepia(46%) saturate(5531%) hue-rotate(338deg) brightness(100%) contrast(98%);"><img src="https://fonts.gstatic.com/s/i/materialicons/warning/v10/24px.svg"></div> | Fenster/Tab wurde verlassen! |
- | idle | <div style="filter: invert(10%) sepia(46%) saturate(5531%) hue-rotate(338deg) brightness(100%) contrast(98%);"><img src="https://fonts.gstatic.com/s/i/materialicons/hourglass_full/v10/24px.svg"></div> | Test ist 5 Minuten oder länger inaktiv! |
- | connection_websocket | <div style="filter: invert(83%) sepia(55%) saturate(487%) hue-rotate(33deg) brightness(104%) contrast(102%);"><img src="https://fonts.gstatic.com/s/i/materialicons/play_circle_filled/v10/24px.svg"></div> | Test läuft, Verbindung ist live |
- | connection_polling | <div style="filter: invert(83%) sepia(55%) saturate(487%) hue-rotate(33deg) brightness(104%) contrast(102%);"><img src="https://fonts.gstatic.com/s/i/materialicons/play_circle_outline/v10/24px.svg"></div> | Test läuft |
- | ok | <img src="https://fonts.gstatic.com/s/i/materialicons/play_circle_filled/v10/24px.svg"> | Test läuft |
+ | monitor_group | <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.5 12c1.38 0 2.49-1.12 2.49-2.5S17.88 7 16.5 7C15.12 7 14 8.12 14 9.5s1.12 2.5 2.5 2.5zM9 11c1.66 0 2.99-1.34 2.99-3S10.66 5 9 5C7.34 5 6 6.34 6 8s1.34 3 3 3zm7.5 3c-1.83 0-5.5.92-5.5 2.75V19h11v-2.25c0-1.83-3.67-2.75-5.5-2.75zM9 13c-2.33 0-7 1.17-7 3.5V19h7v-2.25c0-.85.33-2.34 2.37-3.47C10.5 13.1 9.66 13 9 13z"/></svg> | Testleiter |
+ | demo | [?] | Vorschau-Modus |
+ | pending | <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"/></svg> | Test noch nicht gestartet |
+ | locked | <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><path d="M18,8h-1V6c0-2.76-2.24-5-5-5S7,3.24,7,6v2H6c-1.1,0-2,0.9-2,2v10c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V10 C20,8.9,19.1,8,18,8z M12,17c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S13.1,17,12,17z M15.1,8H8.9V6c0-1.71,1.39-3.1,3.1-3.1 s3.1,1.39,3.1,3.1V8z"/></g></svg> | Test gesperrt |
+ | error | <svg style="fill:#821123" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M13,17h-2v-2h2V17z M13,13h-2V7h2V13z"/></g></g></svg> | Es ist ein Fehler aufgetreten! |
+ | controller_terminated | <svg style="fill:#821123" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><path d="M11,13h2V7h-2V13z M11,17h2v-2h-2V17z M5.35,17.66L3,20h6v-6l-2.24,2.25c-3.1-3.1-1.93-8.39,2.24-9.88l0-2.09 C3.1,5.79,0.93,13.24,5.35,17.66z M21,4.01L14.99,4v6l2.25-2.24c3.19,3.19,1.79,8.5-2.24,9.88v2.08c5.91-1.51,8.07-8.96,3.66-13.38 L21,4.01z"/></g></svg> | Testausführung wurde beendet und kann wieder aufgenommen werden. Der Browser des Teilnehmers ist nicht verbunden und muss neu geladen werden! |
+ | connection_lost | <svg style="fill:#821123" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M13,17h-2v-2h2V17z M13,13h-2V7h2V13z"/></g></g></svg> | Seite wurde verlassen oder Browserfenster geschlossen! |
+ | paused | <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg> | Test pausiert |
+ | focus_lost | <svg style="fill:#821123" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><path d="M1,21h22L12,2L1,21z M13,18h-2v-2h2V18z M13,15h-2v-5h2V15z" enable-background="new"/></g></svg> | Fenster/Tab wurde verlassen! |
+ | idle | [?] | Test ist 5 Minuten oder länger inaktiv! |
+ | connection_websocket | <svg style="fill:#b2ff59" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg> | Test läuft, Verbindung ist live |
+ | connection_polling | <svg style="fill:#b2ff59" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><path d="M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z M9.5,16.5l7-4.5l-7-4.5V16.5z"/></g></svg> | Test läuft |
+ | ok | <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg> | Test läuft |
diff --git a/src/scripts/generateDocs-testSuperState.js b/src/scripts/generateDocs-testSuperState.js
index 1b1c5a72..d24938d8 100644
--- a/src/scripts/generateDocs-testSuperState.js
+++ b/src/scripts/generateDocs-testSuperState.js
@@ -1,32 +1,77 @@
/* eslint-disable no-console,@typescript-eslint/no-var-requires */
+const https = require('https');
const fs = require('fs');
const { superStates } = require('../app/group-monitor/test-view/super-states');
const mdSourceFilename = '../app/config/super-states.md';
const mdTargetFilename = '../../docs/super-states.md';
-console.log('');
-console.log('writing markdown');
-let mdContent = fs.readFileSync(mdSourceFilename, 'utf8').toString();
+const getIcon = icon => new Promise((resolve, reject) => {
+ https.get(`https://fonts.gstatic.com/s/i/materialicons/${icon}/v10/24px.svg`, response => {
+ const dataChunks = [];
+ if (response.statusCode < 200 || response.statusCode > 299) {
+ response.on('data', () => {});
+ reject(response.statusCode);
+ } else {
+ response.on('data', fragments => {
+ dataChunks.push(fragments);
+ });
+ response.on('end', () => {
+ console.log(`got ${icon}`);
+ const responseBody = Buffer.concat(dataChunks);
+ resolve(responseBody.toString());
+ });
+ }
+ response.on('error', error => {
+ console.log(`error ${icon}`);
+ reject(error);
+ });
+ });
+});
+const classToColor = {
+ warning: '#821123',
+ danger: '#821123',
+ success: '#b2ff59'
+};
+const colorizeIcon = (color, iconSVGCode) => iconSVGCode.replace('<svg', `<svg style="fill:${color}"`);
-Object.keys(superStates).forEach(key => {
- mdContent += ` | ${key} | `;
- if ((typeof superStates[key].class !== 'undefined') && (superStates[key].class === 'success')) {
- mdContent += '<div style="filter: invert(83%) sepia(55%) saturate(487%) hue-rotate(33deg) brightness(104%) contrast(102%);">';
- }
- if ((typeof superStates[key].class !== 'undefined') && (superStates[key].class === 'danger')) {
- mdContent += '<div style="filter: invert(10%) sepia(46%) saturate(5531%) hue-rotate(338deg) brightness(100%) contrast(98%);">';
- }
- mdContent += `<img src="https://fonts.gstatic.com/s/i/materialicons/${superStates[key].icon}/v10/24px.svg">`;
- if (typeof superStates[key].class !== 'undefined') {
- mdContent += '</div>';
- }
- mdContent += ` | ${superStates[key].tooltip} |\n`;
-});
+const writeDocs = async () => {
+ console.log('writing markdown documentation');
+ const keys = Object.keys(superStates);
+ let mdContent = fs.readFileSync(mdSourceFilename, 'utf8').toString();
+ for (let index = 0; index < keys.length; index++) {
+ const key = keys[index];
+ console.log(`writing doc for ${key}`);
+ mdContent += ` | ${key} | `;
+ try {
+ // eslint-disable-next-line no-await-in-loop
+ let icon = await getIcon(superStates[key].icon);
+ if (typeof superStates[key].class !== 'undefined') {
+ icon = colorizeIcon(classToColor[superStates[key].class], icon);
+ }
+ mdContent += icon;
+ } catch (e) {
+ console.log(e);
+ mdContent += '[?]';
+ }
-fs.writeFileSync(mdTargetFilename, mdContent, 'utf8');
+ // if ((typeof superStates[key].class !== 'undefined') && (superStates[key].class === 'success')) {
+ // mdContent += '<div style="filter: invert(83%) sepia(55%) saturate(487%) hue-rotate(33deg) brightness(104%) contrast(102%);">';
+ // }
+ // if ((typeof superStates[key].class !== 'undefined') && (superStates[key].class === 'danger')) {
+ // mdContent += '<div style="filter: invert(10%) sepia(46%) saturate(5531%) hue-rotate(338deg) brightness(100%) contrast(98%);">';
+ // }
+ // mdContent += `<img src="https://fonts.gstatic.com/s/i/materialicons/${superStates[key].icon}/v10/24px.svg">`;
+ // if (typeof superStates[key].class !== 'undefined') {
+ // mdContent += '</div>';
+ // }
+ mdContent += ` | ${superStates[key].tooltip} |\n`;
+ }
+ fs.writeFileSync(mdTargetFilename, mdContent, 'utf8');
+ console.log('');
+ console.log('done.');
+};
-console.log('');
-console.log('done.');
+writeDocs();
--
GitLab