From ca74a51e358f660baf4b501edf49fce99be8c317 Mon Sep 17 00:00:00 2001
From: paf <paf@titelfrei.de>
Date: Thu, 28 Jan 2021 10:39:53 +0100
Subject: [PATCH] make docs as html instead md because colors are absolutely
not possible in GFM
https://github.github.com/gfm/
---
docs/super-states.html | 213 ++++++++++++++++++
src/app/config/super-states.md | 6 -
src/app/group-monitor/test-session.service.ts | 4 +-
.../group-monitor/test-view/super-states.js | 30 ++-
.../test-view/test-view.component.ts | 3 +-
src/scripts/generateDocs-testSuperState.js | 121 +++++-----
6 files changed, 292 insertions(+), 85 deletions(-)
create mode 100644 docs/super-states.html
delete mode 100644 src/app/config/super-states.md
diff --git a/docs/super-states.html b/docs/super-states.html
new file mode 100644
index 00000000..bb9cd797
--- /dev/null
+++ b/docs/super-states.html
@@ -0,0 +1,213 @@
+
+<!DOCTYPE html>
+<html lang="de">
+ <meta charset="utf-8">
+ <title>States of Running Tests</title>
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ <style>
+ body {
+ font-family: sans-serif;
+ }
+ i {
+ font-family: "Material Icons";
+ font-style: normal;
+ font-size: xx-large;
+ }
+ i.warning {
+ color: #821123;
+ }
+ i.danger {
+ color: #821123;
+ }
+ i.success {
+ color: #b2ff59 !important
+ }
+ </style>
+</html>
+<body>
+ <h1>States of Running Tests</h1>
+ <p>(explanatory text)</p>
+
+<table>
+ <tr>
+ <td rowspan="3"><i class=" material-icons">supervisor_account</i></td>
+ <td><strong>monitor_group</strong></td>
+ </tr>
+ <tr>
+ <td>Tooltip: <code>Testleiter</code></td>
+ </tr>
+ <tr>
+ <td>undefined</td>
+ </tr>
+</table>
+<br>
+
+<table>
+ <tr>
+ <td rowspan="3"><i class=" material-icons">preview</i></td>
+ <td><strong>demo</strong></td>
+ </tr>
+ <tr>
+ <td>Tooltip: <code>Vorschau-Modus</code></td>
+ </tr>
+ <tr>
+ <td>undefined</td>
+ </tr>
+</table>
+<br>
+
+<table>
+ <tr>
+ <td rowspan="3"><i class=" material-icons">person_outline</i></td>
+ <td><strong>pending</strong></td>
+ </tr>
+ <tr>
+ <td>Tooltip: <code>Test noch nicht gestartet</code></td>
+ </tr>
+ <tr>
+ <td>undefined</td>
+ </tr>
+</table>
+<br>
+
+<table>
+ <tr>
+ <td rowspan="3"><i class=" material-icons">lock</i></td>
+ <td><strong>locked</strong></td>
+ </tr>
+ <tr>
+ <td>Tooltip: <code>Test gesperrt</code></td>
+ </tr>
+ <tr>
+ <td>Zustand kommt zu stande, wenn vom Teilnehmer der "Test beenden"-Button gedrückt wurde.</td>
+ </tr>
+</table>
+<br>
+
+<table>
+ <tr>
+ <td rowspan="3"><i class="danger material-icons">error</i></td>
+ <td><strong>error</strong></td>
+ </tr>
+ <tr>
+ <td>Tooltip: <code>Es ist ein Fehler aufgetreten!</code></td>
+ </tr>
+ <tr>
+ <td>Bei Teilnehmer-Rechner ist ein Fehler aufgetreten. Wahrscheinlich ein Netzwerkfehler oder ähnliches, kann aber auch auf Bugs hindeuten und sollte nach Möglichkeit untersucht werden. Der Teilnehmer sollte seinen Browser neu laden und probieren ob das Problem dann immer noch besteht.</td>
+ </tr>
+</table>
+<br>
+
+<table>
+ <tr>
+ <td rowspan="3"><i class="danger material-icons">sync_problem</i></td>
+ <td><strong>controller_terminated</strong></td>
+ </tr>
+ <tr>
+ <td>Tooltip: <code>Testausführung wurde beendet und kann wieder aufgenommen werden. Der Browser des Teilnehmers ist nicht verbunden und muss neu geladen werden!</code></td>
+ </tr>
+ <tr>
+ <td>Zustand kommt zustande, wenn der "Entsperren"-Knopf im gruppen-Monitor verwendet wurde.</td>
+ </tr>
+</table>
+<br>
+
+<table>
+ <tr>
+ <td rowspan="3"><i class="danger material-icons">error</i></td>
+ <td><strong>connection_lost</strong></td>
+ </tr>
+ <tr>
+ <td>Tooltip: <code>Seite wurde verlassen oder Browserfenster geschlossen!</code></td>
+ </tr>
+ <tr>
+ <td>Die Verbindung zum Teilnehmer-Browser ist abgerissen. Er könnte das Fenster geschlossen haben oder die Netzwerkverbindung ist abgerissen</td>
+ </tr>
+</table>
+<br>
+
+<table>
+ <tr>
+ <td rowspan="3"><i class=" material-icons">pause</i></td>
+ <td><strong>paused</strong></td>
+ </tr>
+ <tr>
+ <td>Tooltip: <code>Test pausiert</code></td>
+ </tr>
+ <tr>
+ <td>undefined</td>
+ </tr>
+</table>
+<br>
+
+<table>
+ <tr>
+ <td rowspan="3"><i class="danger material-icons">warning</i></td>
+ <td><strong>focus_lost</strong></td>
+ </tr>
+ <tr>
+ <td>Tooltip: <code>Fenster/Tab wurde verlassen!</code></td>
+ </tr>
+ <tr>
+ <td>Ein anderes Fenster oder ein anderer Tab wurde angewählt, dei Seite ist jedoch immer noch offen und verbunden.</td>
+ </tr>
+</table>
+<br>
+
+<table>
+ <tr>
+ <td rowspan="3"><i class="danger material-icons">hourglass_full</i></td>
+ <td><strong>idle</strong></td>
+ </tr>
+ <tr>
+ <td>Tooltip: <code>Test ist 5 Minuten oder länger inaktiv!</code></td>
+ </tr>
+ <tr>
+ <td>undefined</td>
+ </tr>
+</table>
+<br>
+
+<table>
+ <tr>
+ <td rowspan="3"><i class="success material-icons">play_circle_filled</i></td>
+ <td><strong>connection_websocket</strong></td>
+ </tr>
+ <tr>
+ <td>Tooltip: <code>Test läuft, Verbindung ist live</code></td>
+ </tr>
+ <tr>
+ <td>Test läuft und Teilnehmer ist im Live-Modus (= Websocket) verbunden.</td>
+ </tr>
+</table>
+<br>
+
+<table>
+ <tr>
+ <td rowspan="3"><i class="success material-icons">play_circle_outline</i></td>
+ <td><strong>connection_polling</strong></td>
+ </tr>
+ <tr>
+ <td>Tooltip: <code>Test läuft</code></td>
+ </tr>
+ <tr>
+ <td>Test läuft und Teilnehmer ist im Polling-Modus Verbindung verbunden.</td>
+ </tr>
+</table>
+<br>
+
+<table>
+ <tr>
+ <td rowspan="3"><i class=" material-icons">play_circle_filled</i></td>
+ <td><strong>ok</strong></td>
+ </tr>
+ <tr>
+ <td>Tooltip: <code>Test läuft</code></td>
+ </tr>
+ <tr>
+ <td>Test läuft, Verbindungstyp is unbekannt.</td>
+ </tr>
+</table>
+<br>
+
+</body>
diff --git a/src/app/config/super-states.md b/src/app/config/super-states.md
deleted file mode 100644
index 533cc674..00000000
--- a/src/app/config/super-states.md
+++ /dev/null
@@ -1,6 +0,0 @@
-# States of Running Tests
-
-(explanatory text)
-
-| key | icon | description |
-| --- | --- | --- |
diff --git a/src/app/group-monitor/test-session.service.ts b/src/app/group-monitor/test-session.service.ts
index 8fa08084..25931ee4 100644
--- a/src/app/group-monitor/test-session.service.ts
+++ b/src/app/group-monitor/test-session.service.ts
@@ -50,10 +50,10 @@ export class TestSessionService {
};
private static getSuperState(session: TestSessionData): TestSessionSuperState {
- if (session.mode === 'monitor-group') {
+ if (session.mode === 'monitor-group') { // TODO deprecated?
return 'monitor_group';
}
- if (TestSessionService.getMode(session.mode).modeId !== 'HOT') {
+ if (TestSessionService.getMode(session.mode).modeId !== 'HOT') { // TODO deprecated?
return 'demo';
}
diff --git a/src/app/group-monitor/test-view/super-states.js b/src/app/group-monitor/test-view/super-states.js
index fd529e7e..e5616632 100644
--- a/src/app/group-monitor/test-view/super-states.js
+++ b/src/app/group-monitor/test-view/super-states.js
@@ -13,23 +13,30 @@ exports.superStates = {
},
locked: {
tooltip: 'Test gesperrt',
- icon: 'lock'
+ icon: 'lock',
+ description: 'State is reached if Testtaker pressed "Quit"-Button or Supervisor hit the "Quit all"-Button'
},
error: {
tooltip: 'Es ist ein Fehler aufgetreten!',
icon: 'error',
- class: 'danger'
+ class: 'danger',
+ description: 'Bei Teilnehmer-Rechner ist ein Fehler aufgetreten. Wahrscheinlich ein Netzwerkfehler oder ' +
+ 'ähnliches, kann aber auch auf Bugs hindeuten und sollte nach Möglichkeit untersucht werden. ' +
+ 'Der Teilnehmer sollte seinen Browser neu laden und probieren ob das Problem dann immer noch besteht.'
},
controller_terminated: {
tooltip: 'Testausführung wurde beendet und kann wieder aufgenommen werden. ' +
- 'Der Browser des Teilnehmers ist nicht verbunden und muss neu geladen werden!',
+ 'Der Browser des Teilnehmers ist nicht verbunden und muss neu geladen werden!',
icon: 'sync_problem',
- class: 'danger'
+ class: 'danger',
+ description: 'Zustand kommt zustande, wenn der "Entsperren"-Knopf im gruppen-Monitor verwendet wurde.'
},
connection_lost: {
tooltip: 'Seite wurde verlassen oder Browserfenster geschlossen!',
icon: 'error',
- class: 'danger'
+ class: 'danger',
+ description: 'Die Verbindung zum Teilnehmer-Browser ist abgerissen. Er könnte das Fenster geschlossen haben oder ' +
+ 'die Netzwerkverbindung ist abgerissen'
},
paused: {
tooltip: 'Test pausiert',
@@ -38,7 +45,9 @@ exports.superStates = {
focus_lost: {
tooltip: 'Fenster/Tab wurde verlassen!',
icon: 'warning',
- class: 'danger'
+ class: 'danger',
+ description: 'Ein anderes Fenster oder ein anderer Tab wurde angewählt, dei Seite ist jedoch immer noch offen ' +
+ 'und verbunden.'
},
idle: {
tooltip: 'Test ist 5 Minuten oder länger inaktiv!',
@@ -48,15 +57,18 @@ exports.superStates = {
connection_websocket: {
tooltip: 'Test läuft, Verbindung ist live',
icon: 'play_circle_filled',
- class: 'success'
+ class: 'success',
+ description: 'Test läuft und Teilnehmer ist im Live-Modus (= Websocket) verbunden.'
},
connection_polling: {
tooltip: 'Test läuft',
icon: 'play_circle_outline',
- class: 'success'
+ class: 'success',
+ description: 'Test läuft und Teilnehmer ist im Polling-Modus Verbindung verbunden.'
},
ok: {
tooltip: 'Test läuft',
- icon: 'play_circle_filled'
+ icon: 'play_circle_filled',
+ description: 'Test läuft, Verbindungstyp is unbekannt.'
}
};
diff --git a/src/app/group-monitor/test-view/test-view.component.ts b/src/app/group-monitor/test-view/test-view.component.ts
index 077ae29d..db3d8b35 100644
--- a/src/app/group-monitor/test-view/test-view.component.ts
+++ b/src/app/group-monitor/test-view/test-view.component.ts
@@ -12,7 +12,8 @@ import { superStates } from './super-states';
interface IconData {
icon: string,
tooltip: string,
- class?: string
+ class?: string,
+ description?: string
}
@Component({
diff --git a/src/scripts/generateDocs-testSuperState.js b/src/scripts/generateDocs-testSuperState.js
index d24938d8..0afa4517 100644
--- a/src/scripts/generateDocs-testSuperState.js
+++ b/src/scripts/generateDocs-testSuperState.js
@@ -1,77 +1,64 @@
/* 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';
+const mdTargetFilename = '../../docs/super-states.html';
-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);
- });
- });
-});
+console.log('writing html documentation');
-const classToColor = {
- warning: '#821123',
- danger: '#821123',
- success: '#b2ff59'
-};
+let content = '';
-const colorizeIcon = (color, iconSVGCode) => iconSVGCode.replace('<svg', `<svg style="fill:${color}"`);
+Object.keys(superStates).forEach(key => {
+ const className = (typeof superStates[key].class !== 'undefined') ? superStates[key].class : '';
+ content += `
+<table>
+ <tr>
+ <td rowspan="3"><i class="${className} material-icons">${superStates[key].icon}</i></td>
+ <td><strong>${key}</strong></td>
+ </tr>
+ <tr>
+ <td>Tooltip: <code>${superStates[key].tooltip}</code></td>
+ </tr>
+ <tr>
+ <td>${superStates[key].description}</td>
+ </tr>
+</table>
+<br>
+ `;
+});
-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 += '[?]';
+const docFile = `
+<!DOCTYPE html>
+<html lang="de">
+ <meta charset="utf-8">
+ <title>States of Running Tests</title>
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ <style>
+ body {
+ font-family: sans-serif;
}
+ i {
+ font-family: "Material Icons";
+ font-style: normal;
+ font-size: xx-large;
+ }
+ i.warning {
+ color: #821123;
+ }
+ i.danger {
+ color: #821123;
+ }
+ i.success {
+ color: #b2ff59 !important
+ }
+ </style>
+</html>
+<body>
+ <h1>States of Running Tests</h1>
+ <p>(explanatory text)</p>
+ ${content}
+</body>
+`;
- // 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.');
-};
-
-writeDocs();
+fs.writeFileSync(mdTargetFilename, docFile, 'utf8');
+console.log('done.');
--
GitLab