added process diagram component

baseweb/static/css/process_diagram.css

@@ -0,0 +1,130 @@
+/* based on the wonderful https://www.cssscript.com/process-flow-diagram/ */
+
+/* All parameters */
+:root {
+  --linethick: 2px;
+  --linewidth: 1em;
+}
+
+/* node style */
+.process_diagram li > div {
+  background-color:#eee;
+  color:#333;
+  border-style:solid;
+  border-color:#777;
+  text-align:left;
+  border-radius: 7px;
+  padding: 0px;
+}
+
+.process_diagram div.header {
+  background-color: #888;
+  color: white;
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+.process_diagram div.body {
+  padding: 1em;
+}
+
+/* connecting lines between nodes */
+.process_diagram li:before,
+.process_diagram li:after,
+.process_diagram ul:before,
+.process_diagram ul:after,
+.process_diagram div:before,
+.process_diagram div:after {
+  border-style: solid;
+  border-color: #777;
+}
+
+/* debug connecting lines * /
+.process_diagram div:before,
+.process_diagram div:after {border-color:green;}
+.process_diagram ul:before,
+.process_diagram ul:after {border-color:red;}
+/**/
+
+/************************************************************/
+
+/* positioning for the diagram */
+.process_diagram,
+.process_diagram ol,
+.process_diagram ul,
+.process_diagram li {margin:0 auto; padding:0; display:block; list-style:none; text-align:center; vertical-align:middle;}
+
+.process_diagram li {position:relative;}
+
+.process_diagram,
+.process_diagram ol {display:table; width:100%; border-collapse:collapse; }
+
+.process_diagram > li,
+.process_diagram ol > li {display:table-cell; }
+
+.process_diagram > li,
+.process_diagram ol > li,
+.process_diagram ul > li {padding:.5em 0}
+
+/* a dash before and behind all uls */
+.process_diagram ul {position:relative; padding:0 var(--linewidth);}
+.process_diagram ul:before,
+.process_diagram ul:after {position:absolute; content:""; top:50%; width: var(--linewidth); display:block; border-width:var(--linethick) 0 0; }
+.process_diagram ul:before {left:0;}
+.process_diagram ul:after {right:0;}
+
+/* put connecting vertical lines */
+.process_diagram ul > li:after,
+.process_diagram ul > li:before {position:absolute; content:""; top:0; bottom:0; width:var(--linewidth); height:100%; display:block;}
+.process_diagram ul > li:before {left:0; border-width:0 0 0 var(--linethick);}
+.process_diagram ul > li:after {right:0; border-width:0 var(--linethick) 0 0;}
+
+/* correct length and position of dashes for first and last li-item in ul */
+.process_diagram ul > li:first-child:before,
+.process_diagram ul > li:first-child:after {top:50%; bottom:auto; height:50%; }
+.process_diagram ul > li:last-child:before,
+.process_diagram ul > li:last-child:after {top:0; bottom:auto; height:50%;}
+.process_diagram ul > li:first-child:last-child:before,
+.process_diagram ul > li:first-child:last-child:after {top:0; bottom:auto; height:50%;}
+
+/* put left and right dashes */
+.process_diagram li > div {position:relative; margin:0 var(--linewidth); padding: 0; border-width:var(--linethick); }
+.process_diagram li > div:before,
+.process_diagram li > div:after {content:""; top:50%; width:var(--linewidth); position:absolute; border-width:var(--linethick) 0 0; height:50%;}
+.process_diagram li > div:after {right: calc(0em - var(--linewidth)); margin-right: calc(0px - var(--linethick));}
+.process_diagram li > div:before {left: calc(0em - var(--linewidth)); margin-left: calc(0px - var(--linethick));}
+.process_diagram li:last-child > div:after,
+.process_diagram li:last-child > div:before {top:0; border-width: 0 0 var(--linethick);}
+
+/* remove dash for the very first/last nodes keeping margin and padding */
+.process_diagram > li:first-child > div:before,
+.process_diagram > li:first-child > ul:before,
+.process_diagram > li:first-child > ul > li:before,
+.process_diagram > li:first-child > ul > li > div:first-child:before,
+.process_diagram > li:first-child > ul > li > ol > li:first-child > div:before,
+.process_diagram > li:last-child > div:after,
+.process_diagram > li:last-child > ul:after {border:0;}
+
+/* remove double dashes */
+ol.process_diagram > li > div:after,
+.process_diagram ol > li > div:after,
+ol.process_diagram > li > ul:after,
+.process_diagram ol > li > ul:after {display:none}
+ol.process_diagram > li > div,
+.process_diagram ol > li > div {margin-right: 0;}
+ol.process_diagram > li > ul,
+.process_diagram ol > li > ul {padding-right: 0;}
+
+/* last dashes are not double and need to be recovered */
+ol.process_diagram > li:last-child > div:after,
+.process_diagram ol > li:last-child > div:after,
+ol.process_diagram > li:last-child > ul:after,
+.process_diagram ol > li:last-child > ul:after {display:block;}
+ol.process_diagram > li:last-child > div,
+.process_diagram ol > li:last-child > div {margin-right: var(--linewidth);}
+ol.process_diagram > li:last-child > ul,
+.process_diagram ol > li:last-child > ul {padding-right: var(--linewidth); }
+
+

baseweb/static/js/components/ProcessDiagram.js

@@ -0,0 +1,43 @@
+Vue.component("ProcessStep", {
+  template: `
+    <li v-if="'title' in step">
+      <div class="step">
+        <div class="header">
+          <h4>{{ step.title }}</h4>
+        </div>
+        <div v-if="step.html" class="body" v-html="step.html"></div>
+        <div v-if="step.body" class="body">
+          <component :is="step.body.component" v-bind="step.body.data"/>
+        </div>
+      </div>
+    </li>
+    <li v-else-if="'sequence' in step && child">
+      <ol>
+        <ProcessStep v-for="(childstep, i) in step.sequence" :step="childstep" :key="i" child="true"/>
+      </ol>
+    </li>
+    <ol v-else-if="'sequence' in step && ! child" class="process_diagram">
+      <ProcessStep v-for="(childstep, i) in step.sequence" :step="childstep" :key="i" child="true"/>
+    </ol>
+    <li v-else-if="'fanout' in step">
+      <ul>
+        <ProcessStep v-for="(childstep, i) in step.fanout" :step="childstep" :key="i" child="true"/>
+      </ul>
+    </li>
+`,
+  props: [ "step", "child" ]
+});
+
+Vue.component("ProcessDiagram", {
+  template: `
+  <v-card>
+    <v-card-actions v-if="title">
+      <h2>{{ title }}</h2>
+    </v-card-actions>
+    <v-card-text>
+      <ProcessStep :step="diagram"/>
+    </v-card-text>
+  </v-card>
+`,
+  props: [ "title", "diagram" ]
+});

baseweb/templates/main.html

@@ -23,6 +23,8 @@
     <link href="/static/vendor/css/highlight.js.github.css"      rel="stylesheet">
 
     <link href="/static/css/main.css"                            rel="stylesheet">
+
+    <link href="/static/css/process_diagram.css"                 rel="stylesheet">
 
     {% for file in stylesheets %}
     <link href="/app/style/{{ file }}" rel="stylesheet">
@@ -125,6 +127,7 @@
     <script src="/static/js/components/PageWithStatus.js"></script>
     <script src="/static/js/components/CollectionView.js"></script>
     <script src="/static/js/components/LineChart.js"></script>
+    <script src="/static/js/components/ProcessDiagram.js"></script>
 
     {% for file in components %}
     <script src="/app/{{ file }}"></script>