Rework setup wizard

This commit is contained in:
Florian Pesth 2023-12-27 19:29:44 +01:00
parent c928cec07d
commit 906efd44a5
4 changed files with 134 additions and 681 deletions

View File

@ -1,628 +1,10 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="generator" content="Docutils 0.16: http://docutils.sourceforge.net/" />
<title>HelferDB Setup Wizard</title>
<style type="text/css">
/* Minimal style sheet for the HTML output of Docutils. */
/* */
/* :Author: Günter Milde, based on html4css1.css by David Goodger */
/* :Id: $Id: minimal.css 8397 2019-09-20 11:09:34Z milde $ */
/* :Copyright: © 2015 Günter Milde. */
/* :License: Released under the terms of the `2-Clause BSD license`_, */
/* in short: */
/* */
/* Copying and distribution of this file, with or without modification, */
/* are permitted in any medium without royalty provided the copyright */
/* notice and this notice are preserved. */
/* */
/* This file is offered as-is, without any warranty. */
/* */
/* .. _2-Clause BSD license: http://www.spdx.org/licenses/BSD-2-Clause */
/* This CSS2.1_ stylesheet defines rules for Docutils elements without */
/* HTML equivalent. It is required to make the document semantic visible. */
/* */
/* .. _CSS2.1: http://www.w3.org/TR/CSS2 */
/* .. _validates: http://jigsaw.w3.org/css-validator/validator$link */
/* alignment of text and inline objects inside block objects*/
.align-left { text-align: left; }
.align-right { text-align: right; }
.align-center { clear: both; text-align: center; }
.align-top { vertical-align: top; }
.align-middle { vertical-align: middle; }
.align-bottom { vertical-align: bottom; }
/* titles */
h1.title, p.subtitle {
text-align: center;
}
p.topic-title,
p.sidebar-title,
p.rubric,
p.admonition-title,
p.system-message-title {
font-weight: bold;
}
h1 + p.subtitle,
h1 + p.section-subtitle {
font-size: 1.6em;
}
h2 + p.section-subtitle { font-size: 1.28em; }
p.subtitle,
p.section-subtitle,
p.sidebar-subtitle {
font-weight: bold;
margin-top: -0.5em;
}
p.sidebar-title,
p.rubric {
font-size: larger;
}
p.rubric { color: maroon; }
a.toc-backref {
color: black;
text-decoration: none; }
/* Warnings, Errors */
div.caution p.admonition-title,
div.attention p.admonition-title,
div.danger p.admonition-title,
div.error p.admonition-title,
div.warning p.admonition-title,
div.system-messages h1,
div.error,
span.problematic,
p.system-message-title {
color: red;
}
/* inline literals */
span.docutils.literal {
font-family: monospace;
white-space: pre-wrap;
}
/* do not wraph at hyphens and similar: */
.literal > span.pre { white-space: nowrap; }
/* Lists */
/* compact and simple lists: no margin between items */
.simple li, .compact li,
.simple ul, .compact ul,
.simple ol, .compact ol,
.simple > li p, .compact > li p,
dl.simple > dd, dl.compact > dd {
margin-top: 0;
margin-bottom: 0;
}
/* Table of Contents */
div.topic.contents { margin: 0.5em 0; }
div.topic.contents ul {
list-style-type: none;
padding-left: 1.5em;
}
/* Enumerated Lists */
ol.arabic { list-style: decimal }
ol.loweralpha { list-style: lower-alpha }
ol.upperalpha { list-style: upper-alpha }
ol.lowerroman { list-style: lower-roman }
ol.upperroman { list-style: upper-roman }
dt span.classifier { font-style: italic }
dt span.classifier:before {
font-style: normal;
margin: 0.5em;
content: ":";
}
/* Field Lists and drivatives */
/* bold field name, content starts on the same line */
dl.field-list > dt,
dl.option-list > dt,
dl.docinfo > dt,
dl.footnote > dt,
dl.citation > dt {
font-weight: bold;
clear: left;
float: left;
margin: 0;
padding: 0;
padding-right: 0.5em;
}
/* Offset for field content (corresponds to the --field-name-limit option) */
dl.field-list > dd,
dl.option-list > dd,
dl.docinfo > dd {
margin-left: 9em; /* ca. 14 chars in the test examples */
}
/* start field-body on a new line after long field names */
dl.field-list > dd > *:first-child,
dl.option-list > dd > *:first-child
{
display: inline-block;
width: 100%;
margin: 0;
}
/* field names followed by a colon */
dl.field-list > dt:after,
dl.docinfo > dt:after {
content: ":";
}
/* Bibliographic Fields (docinfo) */
pre.address { font: inherit; }
dd.authors > p { margin: 0; }
/* Option Lists */
dl.option-list { margin-left: 1.5em; }
dl.option-list > dt { font-weight: normal; }
span.option { white-space: nowrap; }
/* Footnotes and Citations */
dl.footnote.superscript > dd {margin-left: 1em; }
dl.footnote.brackets > dd {margin-left: 2em; }
dl > dt.label { font-weight: normal; }
a.footnote-reference.brackets:before,
dt.label > span.brackets:before { content: "["; }
a.footnote-reference.brackets:after,
dt.label > span.brackets:after { content: "]"; }
a.footnote-reference.superscript,
dl.footnote.superscript > dt.label {
vertical-align: super;
font-size: smaller;
}
dt.label > span.fn-backref { margin-left: 0.2em; }
dt.label > span.fn-backref > a { font-style: italic; }
/* Line Blocks */
div.line-block { display: block; }
div.line-block div.line-block {
margin-top: 0;
margin-bottom: 0;
margin-left: 40px;
}
/* Figures, Images, and Tables */
.figure.align-left,
figure.align-left,
img.align-left,
object.align-left,
table.align-left {
margin-right: auto;
}
.figure.align-center,
figure.align-center,
img.align-center,
object.align-center,
table.align-center {
margin-left: auto;
margin-right: auto;
}
.figure.align-right,
figure.align-right,
img.align-right,
object.align-right,
table.align-right {
margin-left: auto;
}
.figure.align-center, .figure.align-right,
figure.align-center, figure.align-right,
img.align-center, img.align-right,
object.align-center, object.align-right {
display: block;
}
/* reset inner alignment in figures and tables */
.figure.align-left, .figure.align-right,
figure.align-left, figure.align-right,
table.align-left, table.align-center, table.align-right {
text-align: inherit;
}
/* Admonitions and System Messages */
div.admonition,
div.system-message,
div.sidebar,
aside.sidebar {
margin: 1em 1.5em;
border: medium outset;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-right: 1em;
padding-left: 1em;
}
/* Sidebar */
div.sidebar,
aside.sidebar {
width: 30%;
max-width: 26em;
float: right;
clear: right;
}
/* Text Blocks */
blockquote,
div.topic,
pre.literal-block,
pre.doctest-block,
pre.math,
pre.code {
margin-left: 1.5em;
margin-right: 1.5em;
}
pre.code .ln { color: gray; } /* line numbers */
/* Tables */
table { border-collapse: collapse; }
td, th {
border-style: solid;
border-color: silver;
padding: 0 1ex;
border-width: thin;
}
td > p:first-child, th > p:first-child { margin-top: 0; }
td > p, th > p { margin-bottom: 0; }
table > caption {
text-align: left;
margin-bottom: 0.25em
}
table.borderless td, table.borderless th {
border: 0;
padding: 0;
padding-right: 0.5em /* separate table cells */
}
/* Document Header and Footer */
/* div.header, */
/* header { border-bottom: 1px solid black; } */
/* div.footer, */
/* footer { border-top: 1px solid black; } */
/* new HTML5 block elements: set display for older browsers */
header, section, footer, aside, nav, main, article, figure {
display: block;
}
</style>
<style type="text/css">
/* CSS31_ style sheet for the output of Docutils HTML writers. */
/* Rules for easy reading and pre-defined style variants. */
/* */
/* :Author: Günter Milde, based on html4css1.css by David Goodger */
/* :Id: $Id: plain.css 8397 2019-09-20 11:09:34Z milde $ */
/* :Copyright: © 2015 Günter Milde. */
/* :License: Released under the terms of the `2-Clause BSD license`_, */
/* in short: */
/* */
/* Copying and distribution of this file, with or without modification, */
/* are permitted in any medium without royalty provided the copyright */
/* notice and this notice are preserved. */
/* */
/* This file is offered as-is, without any warranty. */
/* */
/* .. _2-Clause BSD license: http://www.spdx.org/licenses/BSD-2-Clause */
/* .. _CSS3: http://www.w3.org/TR/CSS3 */
/* Document Structure */
/* ****************** */
/* "page layout" */
body {
margin: 0;
background-color: #dbdbdb;
}
div.document,
main {
line-height:1.3;
counter-reset: table;
/* counter-reset: figure; */
/* avoid long lines --> better reading */
/* OTOH: lines should not be too short because of missing hyphenation, */
max-width: 50em;
padding: 1px 2%; /* 1px on top avoids grey bar above title (mozilla) */
margin: auto;
background-color: white;
}
/* Sections */
/* Transitions */
hr.docutils {
width: 80%;
margin-top: 1em;
margin-bottom: 1em;
clear: both;
}
/* Paragraphs */
/* ========== */
/* vertical space (parskip) */
p, ol, ul, dl,
div.line-block,
div.topic,
table {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
p:first-child { margin-top: 0; }
/* (:last-child is new in CSS 3) */
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4, h5, h6,
dl > dd {
margin-bottom: 0.5em;
}
/* Lists */
/* ===== */
/* Definition Lists */
/* lists nested in definition lists */
/* (:only-child is new in CSS 3) */
dd > ul:only-child, dd > ol:only-child { padding-left: 1em; }
/* Description Lists */
/* styled like in most dictionaries, encyclopedias etc. */
dl.description > dt {
font-weight: bold;
clear: left;
float: left;
margin: 0;
padding: 0;
padding-right: 0.5em;
}
/* Field Lists */
/* example for custom field-name width */
dl.field-list.narrow > dd {
margin-left: 5em;
}
/* run-in: start field-body on same line after long field names */
dl.field-list.run-in > dd p {
display: block;
}
/* Bibliographic Fields */
/* generally, bibliographic fields use special definition list dl.docinfo */
/* but dedication and abstract are placed into "topic" divs */
div.abstract p.topic-title {
text-align: center;
}
div.dedication {
margin: 2em 5em;
text-align: center;
font-style: italic;
}
div.dedication p.topic-title {
font-style: normal;
}
/* Citations */
dl.citation dt.label {
font-weight: bold;
}
span.fn-backref {
font-weight: normal;
}
/* Text Blocks */
/* =========== */
/* Literal Blocks */
pre.literal-block,
pre.doctest-block,
pre.math,
pre.code {
font-family: monospace;
}
/* Block Quotes */
blockquote > table,
div.topic > table {
margin-top: 0;
margin-bottom: 0;
}
blockquote p.attribution,
div.topic p.attribution {
text-align: right;
margin-left: 20%;
}
/* Tables */
/* ====== */
/* th { vertical-align: bottom; } */
table tr { text-align: left; }
/* "booktabs" style (no vertical lines) */
table.booktabs {
border: 0;
border-top: 2px solid;
border-bottom: 2px solid;
border-collapse: collapse;
}
table.booktabs * {
border: 0;
}
table.booktabs th {
border-bottom: thin solid;
}
/* numbered tables (counter defined in div.document) */
table.numbered > caption:before {
counter-increment: table;
content: "Table " counter(table) ": ";
font-weight: bold;
}
/* Explicit Markup Blocks */
/* ====================== */
/* Footnotes and Citations */
/* ----------------------- */
/* line on the left */
dl.footnote {
padding-left: 1ex;
border-left: solid;
border-left-width: thin;
}
/* Directives */
/* ---------- */
/* Body Elements */
/* ~~~~~~~~~~~~~ */
/* Images and Figures */
/* let content flow to the side of aligned images and figures */
.figure.align-left,
figure.align-left,
img.align-left,
object.align-left {
display: block;
clear: left;
float: left;
margin-right: 1em;
}
.figure.align-right,
figure.align-right,
img.align-right,
object.align-right {
display: block;
clear: right;
float: right;
margin-left: 1em;
}
/* Stop floating sidebars, images and figures at section level 1,2,3 */
h1, h2, h3 { clear: both; }
/* Sidebar */
/* Move right. In a layout with fixed margins, */
/* it can be moved into the margin. */
div.sidebar,
aside.sidebar {
width: 30%;
max-width: 26em;
margin-left: 1em;
margin-right: -2%;
background-color: #ffffee;
}
/* Code */
pre.code { padding: 0.7ex }
pre.code, code { background-color: #eeeeee }
pre.code .ln { color: gray; } /* line numbers */
/* basic highlighting: for a complete scheme, see */
/* http://docutils.sourceforge.net/sandbox/stylesheets/ */
pre.code .comment, code .comment { color: #5C6576 }
pre.code .keyword, code .keyword { color: #3B0D06; font-weight: bold }
pre.code .literal.string, code .literal.string { color: #0C5404 }
pre.code .name.builtin, code .name.builtin { color: #352B84 }
pre.code .deleted, code .deleted { background-color: #DEB0A1}
pre.code .inserted, code .inserted { background-color: #A3D289}
/* Math */
/* styled separately (see math.css for math-output=HTML) */
/* Epigraph */
/* Highlights */
/* Pull-Quote */
/* Compound Paragraph */
/* Container */
/* can be styled in a custom stylesheet */
/* Document Header and Footer */
footer, header,
div.footer, div.header {
font-size: smaller;
clear: both;
padding: 0.5em 2%;
background-color: #ebebee;
border: none;
}
/* Inline Markup */
/* ============= */
/* Emphasis */
/* em */
/* Strong Emphasis */
/* strong */
/* Interpreted Text */
/* span.interpreted */
/* Title Reference */
/* cite */
/* Inline Literals */
/* possible values: normal, nowrap, pre, pre-wrap, pre-line */
/* span.docutils.literal { white-space: pre-wrap; } */
/* Hyperlink References */
a { text-decoration: none; }
/* External Targets */
/* span.target.external */
/* Internal Targets */
/* span.target.internal */
/* Footnote References */
/* a.footnote-reference */
/* Citation References */
/* a.citation-reference */
</style>
</head>
<body>
<div class="document" id="helferdb-setup-wizard">
<h1 class="title">HelferDB Setup Wizard</h1>
<p>Diese Seite führt durch die Einrichtung der Helferdatenbank.</p>
<?php
if(!isset($_GET['step'])){
?><div class="section" id="schritt-1-logindaten-fur-datenbank-eingeben">
<h1>Schritt 1: Logindaten für Datenbank eingeben</h1>
<p>Bitte hier zunächst die Logindaten für die Datenbank eingeben. Es muss in der Regel nur ein Passwort vergeben werden und die anderen beiden Werte können unverändert bleiben.</p>
<form action="Setup.php" >
<input type="hidden" name="step" value="2" />
<label for="host">Hostname</label><br />
<input type="text" id="host" name="host" value="localhost" /><br />
<label for="user">Benutzername</label><br />
<input type="text" id="user" name="user" value="helferdb" /><br />
<label for="password">Passwort</label><br />
<input type="password" id="password" name="password" /><br />
<input type="submit" value="Schritt 2: Datenbank einrichten" />
</form>
<?php } ?><?php
if(isset($_GET['step']) && $_GET['step'] == '2'){
?></div>
<div class="section" id="schritt-2-datenbank-einrichten">
<h1>Schritt 2: Datenbank einrichten</h1>
<p>Bitte zunächst mariadb einrichten (oder mysql) und dazu folgendes in der Shell (z.b. bash) eingeben:</p>
<pre class="code bash literal-block"><code>sudo apt-get install mariadb</code></pre>
<?php } ?></div>
</div>
</body>
</html>
require_once("Wizard.php");
$wizard = new Wizard();
$wizard->renderPHP();
?>

View File

@ -1,54 +0,0 @@
HelferDB Setup Wizard
---------------------
Diese Seite führt durch die Einrichtung der Helferdatenbank.
.. raw:: html
<?php
if(!isset($_GET['step'])){
?>
Schritt 1: Logindaten für Datenbank eingeben
............................................
Bitte hier zunächst die Logindaten für die Datenbank eingeben. Es muss in der Regel nur ein Passwort vergeben werden und die anderen beiden Werte können unverändert bleiben.
.. raw:: html
<form action="Setup.php" >
<input type="hidden" name="step" value="2" />
<label for="host">Hostname</label><br />
<input type="text" id="host" name="host" value="localhost" /><br />
<label for="user">Benutzername</label><br />
<input type="text" id="user" name="user" value="helferdb" /><br />
<label for="password">Passwort</label><br />
<input type="password" id="password" name="password" /><br />
<input type="submit" value="Schritt 2: Datenbank einrichten" />
</form>
<?php } ?>
.. raw:: html
<?php
if(isset($_GET['step']) && $_GET['step'] == '2'){
?>
Schritt 2: Datenbank einrichten
...............................
Bitte zunächst mariadb einrichten (oder mysql) und dazu folgendes in der Shell (z.b. bash) eingeben:
.. code:: bash
sudo apt-get install mariadb
.. raw:: html
<?php } ?>

92
html/Wizard.php Normal file
View File

@ -0,0 +1,92 @@
<?php
class WizardStep {
public string $page = "";
public array $redirects = array();
public function __construct($step){
if(isset($step['page'])){
$this->page = $step['page'];
}
if(isset($step['redirects'])){
$this->redirects = $step['redirects'];
}
}
public function setCurrentStep(){
if(!empty($this->redirects)){
foreach($this->redirects as $redirect){
if(isset($redirect['==']) && isset($redirect['id'])){
foreach($redirect['=='] as $key => $value){
if(isset($_GET[$key]) && $_GET[$key] == $value){
$_GET['step'] = $redirect['id'];
}
}
}
if(isset($redirect['!=']) && isset($redirect['id'])){
foreach($redirect['!='] as $key => $value){
if(isset($_GET[$key]) && $_GET[$key] != $value){
$_GET['step'] = $redirect['id'];
}
}
}
if(isset($redirect['>']) && isset($redirect['id'])){
foreach($redirect['>'] as $key => $value){
if(isset($_GET[$key]) && $_GET[$key] > $value){
$_GET['step'] = $redirect['id'];
}
}
}
if(isset($redirect['<']) && isset($redirect['id'])){
foreach($redirect['<'] as $key => $value){
if(isset($_GET[$key]) && $_GET[$key] < $value){
$_GET['step'] = $redirect['id'];
}
}
}
if(isset($redirect['>=']) && isset($redirect['id'])){
foreach($redirect['>='] as $key => $value){
if(isset($_GET[$key]) && $_GET[$key] >= $value){
$_GET['step'] = $redirect['id'];
}
}
}
if(isset($redirect['<=']) && isset($redirect['id'])){
foreach($redirect['<='] as $key => $value){
if(isset($_GET[$key]) && $_GET[$key] <= $value){
$_GET['step'] = $redirect['id'];
}
}
}
}
}
}
}
class Wizard {
private string $header = "";
private string $firststep = "";
private array $steps = array();
private string $footer = "";
public function __construct($json_file = 'setupWizard.json'){
$stepsArray = json_decode(file_get_contents($json_file), true);
$this->header = $stepsArray['header'];
$this->firststep = $stepsArray['firststep'];
foreach($stepsArray['steps'] as $step){
$this->steps[$step['id']] = new WizardStep($step);
}
$this->footer = $stepsArray['footer'];
}
public function renderPHP(){
if(isset($_GET['stepfrom'])){
$this->steps[$_GET['stepfrom']]->setCurrentStep();
}
echo $this->header;
if(isset($_GET['step'])){
echo $this->steps[$_GET['step']]->page;
}
else{
echo $this->steps[$this->firststep]->page;
}
echo $this->footer;
}
}
?>

33
html/setupWizard.json Normal file
View File

@ -0,0 +1,33 @@
{
"header": "<!DOCTYPE html>\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xml:lang=\"en\" lang=\"en\">\n<head>\n<meta charset=\"utf-8\"\/>\n<meta name=\"generator\" content=\"Docutils 0.16: http:\/\/docutils.sourceforge.net\/\" \/>\n<title>Bengelsystem Setup Wizard<\/title>\n<head><\/head>\n<body><h1>Bengelsystem Setup Wizard<\/h1><p>Diese Seite führt durch die Einrichtung der Helferdatenbank.<\/p>",
"firststep": "selectdatabase",
"steps": [
{
"id": "selectdatabase",
"page": "<h2>Datenbanktyp auswählen<\/h2><p>Für die meisten Conventions sollte eine SQLite Datenbank ausreichen. In diesem Fall ist die Datenbank in einer einzelnen Datei und es ist nicht nötig eine separate Datenbank aufzusetzen.<\/p><p><form action=\"Setup.php\">\r\n <fieldset>\r\n <legend>Datenbank auswählen<\/legend>\r\n <input type=\"hidden\" name=\"stepfrom\" value=\"selectdatabase\" \/>\r\n <input type=\"radio\" id=\"sqlite\" name=\"databasetype\" value=\"SQLite\" checked \/>\r\n <label for=\"sqlite\">SQLite<\/label><br \/>\r\n <input type=\"radio\" id=\"sqlite\" name=\"databasetype\" value=\"MariaDB\" \/>\r\n <label for=\"sqlite\">MariaDB<\/label><br \/>\r\n <input type=\"submit\" value=\"Weiter\" \/>\r\n <\/fieldset>\r\n<\/form><\/p>",
"redirects": [
{
"==": {"databasetype": "SQLite"},
"id": "createtables"
},
{
"!=": {"databasetype": "SQLite"},
"id": "enterlogindata"
}
]
},
{
"id": "createtables",
"page": "<h2>Tabellen einrichten</h2>"
},
{
"id": "enterlogindata",
"page": "<h2>Logindaten f\u00FCr die Datenbank eingeben<\/h2>\r\n<p>Bitte hier zun\u00E4chst die Logindaten f\u00FCr die Datenbank eingeben. Es muss in der Regel nur ein Passwort vergeben werden und die anderen beiden Werte k\u00F6nnen unver\u00E4ndert bleiben.<\/p>\r\n<p><form action=\"Setup.php\" >\r\n <input type=\"hidden\" name=\"step\" value=\"setupdatabase\" \/>\r\n <label for=\"host\">Hostname<\/label><br \/>\r\n <input type=\"text\" id=\"host\" name=\"host\" value=\"localhost\" \/><br \/>\r\n <label for=\"user\">Benutzername<\/label><br \/>\r\n <input type=\"text\" id=\"user\" name=\"user\" value=\"helferdb\" \/><br \/>\r\n <label for=\"password\">Passwort<\/label><br \/>\r\n <input type=\"password\" id=\"password\" name=\"password\" \/><br \/>\r\n <input type=\"submit\" value=\"Datenbank einrichten\" \/>\r\n<\/form><\/p>\r\n"
},
{
"id": "setupdatabase",
"page": "<h2>Datenbank einrichten<\/h2>\r\n<p>Bitte zunächst mariadb einrichten (oder mysql) und dazu folgendes in der Shell (z.b. bash) eingeben:<\/p>\r\n<pre><code>sudo apt-get install mariadb<\/code><\/pre>"
}
],
"footer": "</body></html>"
}