blob: c3bca330c4cdb7bba15e8d2c7279bdb0be447578 [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Asciidoctor 1.5.5.dev">
<title></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700">
<style>
/* Asciidoctor default stylesheet | MIT License | http://asciidoctor.org */
/* Remove comment around @import statement below when using as a custom stylesheet */
/*@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700";*/
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
script{display:none!important}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
a{background:transparent}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace;font-size:1em}
pre{white-space:pre-wrap}
q{quotes:"\201C" "\201D" "\2018" "\2019"}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:0}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}
*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
html,body{font-size:100%}
body{background:#fff;color:rgba(0,0,0,.8);padding:0;margin:0;font-family:"Noto Serif","DejaVu Serif",serif;font-weight:400;font-style:normal;line-height:1;position:relative;cursor:auto}
a:hover{cursor:pointer}
img,object,embed{max-width:100%;height:auto}
object,embed{height:100%}
img{-ms-interpolation-mode:bicubic}
.left{float:left!important}
.right{float:right!important}
.text-left{text-align:left!important}
.text-right{text-align:right!important}
.text-center{text-align:center!important}
.text-justify{text-align:justify!important}
.hide{display:none}
body{-webkit-font-smoothing:antialiased}
img,object,svg{display:inline-block;vertical-align:middle}
textarea{height:auto;min-height:50px}
select{width:100%}
.center{margin-left:auto;margin-right:auto}
.spread{width:100%}
p.lead,.paragraph.lead>p,#preamble>.sectionbody>.paragraph:first-of-type p{font-size:1.21875em;line-height:1.6}
.subheader,.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{line-height:1.45;color:#7a2518;font-weight:400;margin-top:0;margin-bottom:.25em}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0;direction:ltr}
a{color:#2156a5;text-decoration:underline;line-height:inherit}
a:hover,a:focus{color:#1d4b8f}
a img{border:none}
p{font-family:inherit;font-weight:400;font-size:1em;line-height:1.6;margin-bottom:1.25em;text-rendering:optimizeLegibility}
p aside{font-size:.875em;line-height:1.35;font-style:italic}
h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{font-family:"Open Sans","DejaVu Sans",sans-serif;font-weight:300;font-style:normal;color:#ba3925;text-rendering:optimizeLegibility;margin-top:1em;margin-bottom:.5em;line-height:1.0125em}
h1 small,h2 small,h3 small,#toctitle small,.sidebarblock>.content>.title small,h4 small,h5 small,h6 small{font-size:60%;color:#e99b8f;line-height:0}
h1{font-size:2.125em}
h2{font-size:1.6875em}
h3,#toctitle,.sidebarblock>.content>.title{font-size:1.375em}
h4,h5{font-size:1.125em}
h6{font-size:1em}
hr{border:solid #ddddd8;border-width:1px 0 0;clear:both;margin:1.25em 0 1.1875em;height:0}
em,i{font-style:italic;line-height:inherit}
strong,b{font-weight:bold;line-height:inherit}
small{font-size:60%;line-height:inherit}
code{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;color:rgba(0,0,0,.9)}
ul,ol,dl{font-size:1em;line-height:1.6;margin-bottom:1.25em;list-style-position:outside;font-family:inherit}
ul,ol,ul.no-bullet,ol.no-bullet{margin-left:1.5em}
ul li ul,ul li ol{margin-left:1.25em;margin-bottom:0;font-size:1em}
ul.square li ul,ul.circle li ul,ul.disc li ul{list-style:inherit}
ul.square{list-style-type:square}
ul.circle{list-style-type:circle}
ul.disc{list-style-type:disc}
ul.no-bullet{list-style:none}
ol li ul,ol li ol{margin-left:1.25em;margin-bottom:0}
dl dt{margin-bottom:.3125em;font-weight:bold}
dl dd{margin-bottom:1.25em}
abbr,acronym{text-transform:uppercase;font-size:90%;color:rgba(0,0,0,.8);border-bottom:1px dotted #ddd;cursor:help}
abbr{text-transform:none}
blockquote{margin:0 0 1.25em;padding:.5625em 1.25em 0 1.1875em;border-left:1px solid #ddd}
blockquote cite{display:block;font-size:.9375em;color:rgba(0,0,0,.6)}
blockquote cite:before{content:"\2014 \0020"}
blockquote cite a,blockquote cite a:visited{color:rgba(0,0,0,.6)}
blockquote,blockquote p{line-height:1.6;color:rgba(0,0,0,.85)}
@media only screen and (min-width:768px){h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2}
h1{font-size:2.75em}
h2{font-size:2.3125em}
h3,#toctitle,.sidebarblock>.content>.title{font-size:1.6875em}
h4{font-size:1.4375em}}
table{background:#fff;margin-bottom:1.25em;border:solid 1px #dedede}
table thead,table tfoot{background:#f7f8f7;font-weight:bold}
table thead tr th,table thead tr td,table tfoot tr th,table tfoot tr td{padding:.5em .625em .625em;font-size:inherit;color:rgba(0,0,0,.8);text-align:left}
table tr th,table tr td{padding:.5625em .625em;font-size:inherit;color:rgba(0,0,0,.8)}
table tr.even,table tr.alt,table tr:nth-of-type(even){background:#f8f8f7}
table thead tr th,table tfoot tr th,table tbody tr td,table tr td,table tfoot tr td{display:table-cell;line-height:1.6}
body{tab-size:4}
h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2;word-spacing:-.05em}
h1 strong,h2 strong,h3 strong,#toctitle strong,.sidebarblock>.content>.title strong,h4 strong,h5 strong,h6 strong{font-weight:400}
.clearfix:before,.clearfix:after,.float-group:before,.float-group:after{content:" ";display:table}
.clearfix:after,.float-group:after{clear:both}
*:not(pre)>code{font-size:.9375em;font-style:normal!important;letter-spacing:0;padding:.1em .5ex;word-spacing:-.15em;background-color:#f7f7f8;-webkit-border-radius:4px;border-radius:4px;line-height:1.45;text-rendering:optimizeSpeed}
pre,pre>code{line-height:1.45;color:rgba(0,0,0,.9);font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;text-rendering:optimizeSpeed}
.keyseq{color:rgba(51,51,51,.8)}
kbd{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;display:inline-block;color:rgba(0,0,0,.8);font-size:.65em;line-height:1.45;background-color:#f7f7f7;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em white inset;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em #fff inset;margin:0 .15em;padding:.2em .5em;vertical-align:middle;position:relative;top:-.1em;white-space:nowrap}
.keyseq kbd:first-child{margin-left:0}
.keyseq kbd:last-child{margin-right:0}
.menuseq,.menu{color:rgba(0,0,0,.8)}
b.button:before,b.button:after{position:relative;top:-1px;font-weight:400}
b.button:before{content:"[";padding:0 3px 0 2px}
b.button:after{content:"]";padding:0 2px 0 3px}
p a>code:hover{color:rgba(0,0,0,.9)}
#header,#content,#footnotes,#footer{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:62.5em;*zoom:1;position:relative;padding-left:.9375em;padding-right:.9375em}
#header:before,#header:after,#content:before,#content:after,#footnotes:before,#footnotes:after,#footer:before,#footer:after{content:" ";display:table}
#header:after,#content:after,#footnotes:after,#footer:after{clear:both}
#content{margin-top:1.25em}
#content:before{content:none}
#header>h1:first-child{color:rgba(0,0,0,.85);margin-top:2.25rem;margin-bottom:0}
#header>h1:first-child+#toc{margin-top:8px;border-top:1px solid #ddddd8}
#header>h1:only-child,body.toc2 #header>h1:nth-last-child(2){border-bottom:1px solid #ddddd8;padding-bottom:8px}
#header .details{border-bottom:1px solid #ddddd8;line-height:1.45;padding-top:.25em;padding-bottom:.25em;padding-left:.25em;color:rgba(0,0,0,.6);display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap}
#header .details span:first-child{margin-left:-.125em}
#header .details span.email a{color:rgba(0,0,0,.85)}
#header .details br{display:none}
#header .details br+span:before{content:"\00a0\2013\00a0"}
#header .details br+span.author:before{content:"\00a0\22c5\00a0";color:rgba(0,0,0,.85)}
#header .details br+span#revremark:before{content:"\00a0|\00a0"}
#header #revnumber{text-transform:capitalize}
#header #revnumber:after{content:"\00a0"}
#content>h1:first-child:not([class]){color:rgba(0,0,0,.85);border-bottom:1px solid #ddddd8;padding-bottom:8px;margin-top:0;padding-top:1rem;margin-bottom:1.25rem}
#toc{border-bottom:1px solid #efefed;padding-bottom:.5em}
#toc>ul{margin-left:.125em}
#toc ul.sectlevel0>li>a{font-style:italic}
#toc ul.sectlevel0 ul.sectlevel1{margin:.5em 0}
#toc ul{font-family:"Open Sans","DejaVu Sans",sans-serif;list-style-type:none}
#toc li{line-height:1.3334;margin-top:.3334em}
#toc a{text-decoration:none}
#toc a:active{text-decoration:underline}
#toctitle{color:#7a2518;font-size:1.2em}
@media only screen and (min-width:768px){#toctitle{font-size:1.375em}
body.toc2{padding-left:15em;padding-right:0}
#toc.toc2{margin-top:0!important;background-color:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #efefed;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto}
#toc.toc2 #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
#toc.toc2>ul{font-size:.9em;margin-bottom:0}
#toc.toc2 ul ul{margin-left:0;padding-left:1em}
#toc.toc2 ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em}
body.toc2.toc-right{padding-left:0;padding-right:15em}
body.toc2.toc-right #toc.toc2{border-right-width:0;border-left:1px solid #efefed;left:auto;right:0}}
@media only screen and (min-width:1280px){body.toc2{padding-left:20em;padding-right:0}
#toc.toc2{width:20em}
#toc.toc2 #toctitle{font-size:1.375em}
#toc.toc2>ul{font-size:.95em}
#toc.toc2 ul ul{padding-left:1.25em}
body.toc2.toc-right{padding-left:0;padding-right:20em}}
#content #toc{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
#content #toc>:first-child{margin-top:0}
#content #toc>:last-child{margin-bottom:0}
#footer{max-width:100%;background-color:rgba(0,0,0,.8);padding:1.25em}
#footer-text{color:rgba(255,255,255,.8);line-height:1.44}
.sect1{padding-bottom:.625em}
@media only screen and (min-width:768px){.sect1{padding-bottom:1.25em}}
.sect1+.sect1{border-top:1px solid #efefed}
#content h1>a.anchor,h2>a.anchor,h3>a.anchor,#toctitle>a.anchor,.sidebarblock>.content>.title>a.anchor,h4>a.anchor,h5>a.anchor,h6>a.anchor{position:absolute;z-index:1001;width:1.5ex;margin-left:-1.5ex;display:block;text-decoration:none!important;visibility:hidden;text-align:center;font-weight:400}
#content h1>a.anchor:before,h2>a.anchor:before,h3>a.anchor:before,#toctitle>a.anchor:before,.sidebarblock>.content>.title>a.anchor:before,h4>a.anchor:before,h5>a.anchor:before,h6>a.anchor:before{content:"\00A7";font-size:.85em;display:block;padding-top:.1em}
#content h1:hover>a.anchor,#content h1>a.anchor:hover,h2:hover>a.anchor,h2>a.anchor:hover,h3:hover>a.anchor,#toctitle:hover>a.anchor,.sidebarblock>.content>.title:hover>a.anchor,h3>a.anchor:hover,#toctitle>a.anchor:hover,.sidebarblock>.content>.title>a.anchor:hover,h4:hover>a.anchor,h4>a.anchor:hover,h5:hover>a.anchor,h5>a.anchor:hover,h6:hover>a.anchor,h6>a.anchor:hover{visibility:visible}
#content h1>a.link,h2>a.link,h3>a.link,#toctitle>a.link,.sidebarblock>.content>.title>a.link,h4>a.link,h5>a.link,h6>a.link{color:#ba3925;text-decoration:none}
#content h1>a.link:hover,h2>a.link:hover,h3>a.link:hover,#toctitle>a.link:hover,.sidebarblock>.content>.title>a.link:hover,h4>a.link:hover,h5>a.link:hover,h6>a.link:hover{color:#a53221}
.audioblock,.imageblock,.literalblock,.listingblock,.stemblock,.videoblock{margin-bottom:1.25em}
.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{text-rendering:optimizeLegibility;text-align:left;font-family:"Noto Serif","DejaVu Serif",serif;font-size:1rem;font-style:italic}
table.tableblock>caption.title{white-space:nowrap;overflow:visible;max-width:0}
.paragraph.lead>p,#preamble>.sectionbody>.paragraph:first-of-type p{color:rgba(0,0,0,.85)}
table.tableblock #preamble>.sectionbody>.paragraph:first-of-type p{font-size:inherit}
.admonitionblock>table{border-collapse:separate;border:0;background:none;width:100%}
.admonitionblock>table td.icon{text-align:center;width:80px}
.admonitionblock>table td.icon img{max-width:none}
.admonitionblock>table td.icon .title{font-weight:bold;font-family:"Open Sans","DejaVu Sans",sans-serif;text-transform:uppercase}
.admonitionblock>table td.content{padding-left:1.125em;padding-right:1.25em;border-left:1px solid #ddddd8;color:rgba(0,0,0,.6)}
.admonitionblock>table td.content>:last-child>:last-child{margin-bottom:0}
.exampleblock>.content{border-style:solid;border-width:1px;border-color:#e6e6e6;margin-bottom:1.25em;padding:1.25em;background:#fff;-webkit-border-radius:4px;border-radius:4px}
.exampleblock>.content>:first-child{margin-top:0}
.exampleblock>.content>:last-child{margin-bottom:0}
.sidebarblock{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
.sidebarblock>:first-child{margin-top:0}
.sidebarblock>:last-child{margin-bottom:0}
.sidebarblock>.content>.title{color:#7a2518;margin-top:0;text-align:center}
.exampleblock>.content>:last-child>:last-child,.exampleblock>.content .olist>ol>li:last-child>:last-child,.exampleblock>.content .ulist>ul>li:last-child>:last-child,.exampleblock>.content .qlist>ol>li:last-child>:last-child,.sidebarblock>.content>:last-child>:last-child,.sidebarblock>.content .olist>ol>li:last-child>:last-child,.sidebarblock>.content .ulist>ul>li:last-child>:last-child,.sidebarblock>.content .qlist>ol>li:last-child>:last-child{margin-bottom:0}
.literalblock pre,.listingblock pre:not(.highlight),.listingblock pre[class="highlight"],.listingblock pre[class^="highlight "],.listingblock pre.CodeRay,.listingblock pre.prettyprint{background:#f7f7f8}
.sidebarblock .literalblock pre,.sidebarblock .listingblock pre:not(.highlight),.sidebarblock .listingblock pre[class="highlight"],.sidebarblock .listingblock pre[class^="highlight "],.sidebarblock .listingblock pre.CodeRay,.sidebarblock .listingblock pre.prettyprint{background:#f2f1f1}
.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{-webkit-border-radius:4px;border-radius:4px;word-wrap:break-word;padding:1em;font-size:.8125em}
.literalblock pre.nowrap,.literalblock pre[class].nowrap,.listingblock pre.nowrap,.listingblock pre[class].nowrap{overflow-x:auto;white-space:pre;word-wrap:normal}
@media only screen and (min-width:768px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:.90625em}}
@media only screen and (min-width:1280px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:1em}}
.literalblock.output pre{color:#f7f7f8;background-color:rgba(0,0,0,.9)}
.listingblock pre.highlightjs{padding:0}
.listingblock pre.highlightjs>code{padding:1em;-webkit-border-radius:4px;border-radius:4px}
.listingblock pre.prettyprint{border-width:0}
.listingblock>.content{position:relative}
.listingblock code[data-lang]:before{display:none;content:attr(data-lang);position:absolute;font-size:.75em;top:.425rem;right:.5rem;line-height:1;text-transform:uppercase;color:#999}
.listingblock:hover code[data-lang]:before{display:block}
.listingblock.terminal pre .command:before{content:attr(data-prompt);padding-right:.5em;color:#999}
.listingblock.terminal pre .command:not([data-prompt]):before{content:"$"}
table.pyhltable{border-collapse:separate;border:0;margin-bottom:0;background:none}
table.pyhltable td{vertical-align:top;padding-top:0;padding-bottom:0;line-height:1.45}
table.pyhltable td.code{padding-left:.75em;padding-right:0}
pre.pygments .lineno,table.pyhltable td:not(.code){color:#999;padding-left:0;padding-right:.5em;border-right:1px solid #ddddd8}
pre.pygments .lineno{display:inline-block;margin-right:.25em}
table.pyhltable .linenodiv{background:none!important;padding-right:0!important}
.quoteblock{margin:0 1em 1.25em 1.5em;display:table}
.quoteblock>.title{margin-left:-1.5em;margin-bottom:.75em}
.quoteblock blockquote,.quoteblock blockquote p{color:rgba(0,0,0,.85);font-size:1.15rem;line-height:1.75;word-spacing:.1em;letter-spacing:0;font-style:italic;text-align:justify}
.quoteblock blockquote{margin:0;padding:0;border:0}
.quoteblock blockquote:before{content:"\201c";float:left;font-size:2.75em;font-weight:bold;line-height:.6em;margin-left:-.6em;color:#7a2518;text-shadow:0 1px 2px rgba(0,0,0,.1)}
.quoteblock blockquote>.paragraph:last-child p{margin-bottom:0}
.quoteblock .attribution{margin-top:.5em;margin-right:.5ex;text-align:right}
.quoteblock .quoteblock{margin-left:0;margin-right:0;padding:.5em 0;border-left:3px solid rgba(0,0,0,.6)}
.quoteblock .quoteblock blockquote{padding:0 0 0 .75em}
.quoteblock .quoteblock blockquote:before{display:none}
.verseblock{margin:0 1em 1.25em 1em}
.verseblock pre{font-family:"Open Sans","DejaVu Sans",sans;font-size:1.15rem;color:rgba(0,0,0,.85);font-weight:300;text-rendering:optimizeLegibility}
.verseblock pre strong{font-weight:400}
.verseblock .attribution{margin-top:1.25rem;margin-left:.5ex}
.quoteblock .attribution,.verseblock .attribution{font-size:.9375em;line-height:1.45;font-style:italic}
.quoteblock .attribution br,.verseblock .attribution br{display:none}
.quoteblock .attribution cite,.verseblock .attribution cite{display:block;letter-spacing:-.025em;color:rgba(0,0,0,.6)}
.quoteblock.abstract{margin:0 0 1.25em 0;display:block}
.quoteblock.abstract blockquote,.quoteblock.abstract blockquote p{text-align:left;word-spacing:0}
.quoteblock.abstract blockquote:before,.quoteblock.abstract blockquote p:first-of-type:before{display:none}
table.tableblock{max-width:100%;border-collapse:separate}
table.tableblock td>.paragraph:last-child p>p:last-child,table.tableblock th>p:last-child,table.tableblock td>p:last-child{margin-bottom:0}
table.tableblock,th.tableblock,td.tableblock{border:0 solid #dedede}
table.grid-all th.tableblock,table.grid-all td.tableblock{border-width:0 1px 1px 0}
table.grid-all tfoot>tr>th.tableblock,table.grid-all tfoot>tr>td.tableblock{border-width:1px 1px 0 0}
table.grid-cols th.tableblock,table.grid-cols td.tableblock{border-width:0 1px 0 0}
table.grid-all *>tr>.tableblock:last-child,table.grid-cols *>tr>.tableblock:last-child{border-right-width:0}
table.grid-rows th.tableblock,table.grid-rows td.tableblock{border-width:0 0 1px 0}
table.grid-all tbody>tr:last-child>th.tableblock,table.grid-all tbody>tr:last-child>td.tableblock,table.grid-all thead:last-child>tr>th.tableblock,table.grid-rows tbody>tr:last-child>th.tableblock,table.grid-rows tbody>tr:last-child>td.tableblock,table.grid-rows thead:last-child>tr>th.tableblock{border-bottom-width:0}
table.grid-rows tfoot>tr>th.tableblock,table.grid-rows tfoot>tr>td.tableblock{border-width:1px 0 0 0}
table.frame-all{border-width:1px}
table.frame-sides{border-width:0 1px}
table.frame-topbot{border-width:1px 0}
th.halign-left,td.halign-left{text-align:left}
th.halign-right,td.halign-right{text-align:right}
th.halign-center,td.halign-center{text-align:center}
th.valign-top,td.valign-top{vertical-align:top}
th.valign-bottom,td.valign-bottom{vertical-align:bottom}
th.valign-middle,td.valign-middle{vertical-align:middle}
table thead th,table tfoot th{font-weight:bold}
tbody tr th{display:table-cell;line-height:1.6;background:#f7f8f7}
tbody tr th,tbody tr th p,tfoot tr th,tfoot tr th p{color:rgba(0,0,0,.8);font-weight:bold}
p.tableblock>code:only-child{background:none;padding:0}
p.tableblock{font-size:1em}
td>div.verse{white-space:pre}
ol{margin-left:1.75em}
ul li ol{margin-left:1.5em}
dl dd{margin-left:1.125em}
dl dd:last-child,dl dd:last-child>:last-child{margin-bottom:0}
ol>li p,ul>li p,ul dd,ol dd,.olist .olist,.ulist .ulist,.ulist .olist,.olist .ulist{margin-bottom:.625em}
ul.unstyled,ol.unnumbered,ul.checklist,ul.none{list-style-type:none}
ul.unstyled,ol.unnumbered,ul.checklist{margin-left:.625em}
ul.checklist li>p:first-child>.fa-square-o:first-child,ul.checklist li>p:first-child>.fa-check-square-o:first-child{width:1em;font-size:.85em}
ul.checklist li>p:first-child>input[type="checkbox"]:first-child{width:1em;position:relative;top:1px}
ul.inline{margin:0 auto .625em auto;margin-left:-1.375em;margin-right:0;padding:0;list-style:none;overflow:hidden}
ul.inline>li{list-style:none;float:left;margin-left:1.375em;display:block}
ul.inline>li>*{display:block}
.unstyled dl dt{font-weight:400;font-style:normal}
ol.arabic{list-style-type:decimal}
ol.decimal{list-style-type:decimal-leading-zero}
ol.loweralpha{list-style-type:lower-alpha}
ol.upperalpha{list-style-type:upper-alpha}
ol.lowerroman{list-style-type:lower-roman}
ol.upperroman{list-style-type:upper-roman}
ol.lowergreek{list-style-type:lower-greek}
.hdlist>table,.colist>table{border:0;background:none}
.hdlist>table>tbody>tr,.colist>table>tbody>tr{background:none}
td.hdlist1,td.hdlist2{vertical-align:top;padding:0 .625em}
td.hdlist1{font-weight:bold;padding-bottom:1.25em}
.literalblock+.colist,.listingblock+.colist{margin-top:-.5em}
.colist>table tr>td:first-of-type{padding:0 .75em;line-height:1}
.colist>table tr>td:last-of-type{padding:.25em 0}
.thumb,.th{line-height:0;display:inline-block;border:solid 4px #fff;-webkit-box-shadow:0 0 0 1px #ddd;box-shadow:0 0 0 1px #ddd}
.imageblock.left,.imageblock[style*="float: left"]{margin:.25em .625em 1.25em 0}
.imageblock.right,.imageblock[style*="float: right"]{margin:.25em 0 1.25em .625em}
.imageblock>.title{margin-bottom:0}
.imageblock.thumb,.imageblock.th{border-width:6px}
.imageblock.thumb>.title,.imageblock.th>.title{padding:0 .125em}
.image.left,.image.right{margin-top:.25em;margin-bottom:.25em;display:inline-block;line-height:0}
.image.left{margin-right:.625em}
.image.right{margin-left:.625em}
a.image{text-decoration:none;display:inline-block}
a.image object{pointer-events:none}
sup.footnote,sup.footnoteref{font-size:.875em;position:static;vertical-align:super}
sup.footnote a,sup.footnoteref a{text-decoration:none}
sup.footnote a:active,sup.footnoteref a:active{text-decoration:underline}
#footnotes{padding-top:.75em;padding-bottom:.75em;margin-bottom:.625em}
#footnotes hr{width:20%;min-width:6.25em;margin:-.25em 0 .75em 0;border-width:1px 0 0 0}
#footnotes .footnote{padding:0 .375em 0 .225em;line-height:1.3334;font-size:.875em;margin-left:1.2em;text-indent:-1.05em;margin-bottom:.2em}
#footnotes .footnote a:first-of-type{font-weight:bold;text-decoration:none}
#footnotes .footnote:last-of-type{margin-bottom:0}
#content #footnotes{margin-top:-.625em;margin-bottom:0;padding:.75em 0}
.gist .file-data>table{border:0;background:#fff;width:100%;margin-bottom:0}
.gist .file-data>table td.line-data{width:99%}
div.unbreakable{page-break-inside:avoid}
.big{font-size:larger}
.small{font-size:smaller}
.underline{text-decoration:underline}
.overline{text-decoration:overline}
.line-through{text-decoration:line-through}
.aqua{color:#00bfbf}
.aqua-background{background-color:#00fafa}
.black{color:#000}
.black-background{background-color:#000}
.blue{color:#0000bf}
.blue-background{background-color:#0000fa}
.fuchsia{color:#bf00bf}
.fuchsia-background{background-color:#fa00fa}
.gray{color:#606060}
.gray-background{background-color:#7d7d7d}
.green{color:#006000}
.green-background{background-color:#007d00}
.lime{color:#00bf00}
.lime-background{background-color:#00fa00}
.maroon{color:#600000}
.maroon-background{background-color:#7d0000}
.navy{color:#000060}
.navy-background{background-color:#00007d}
.olive{color:#606000}
.olive-background{background-color:#7d7d00}
.purple{color:#600060}
.purple-background{background-color:#7d007d}
.red{color:#bf0000}
.red-background{background-color:#fa0000}
.silver{color:#909090}
.silver-background{background-color:#bcbcbc}
.teal{color:#006060}
.teal-background{background-color:#007d7d}
.white{color:#bfbfbf}
.white-background{background-color:#fafafa}
.yellow{color:#bfbf00}
.yellow-background{background-color:#fafa00}
span.icon>.fa{cursor:default}
.admonitionblock td.icon [class^="fa icon-"]{font-size:2.5em;text-shadow:1px 1px 2px rgba(0,0,0,.5);cursor:default}
.admonitionblock td.icon .icon-note:before{content:"\f05a";color:#19407c}
.admonitionblock td.icon .icon-tip:before{content:"\f0eb";text-shadow:1px 1px 2px rgba(155,155,0,.8);color:#111}
.admonitionblock td.icon .icon-warning:before{content:"\f071";color:#bf6900}
.admonitionblock td.icon .icon-caution:before{content:"\f06d";color:#bf3400}
.admonitionblock td.icon .icon-important:before{content:"\f06a";color:#bf0000}
.conum[data-value]{display:inline-block;color:#fff!important;background-color:rgba(0,0,0,.8);-webkit-border-radius:100px;border-radius:100px;text-align:center;font-size:.75em;width:1.67em;height:1.67em;line-height:1.67em;font-family:"Open Sans","DejaVu Sans",sans-serif;font-style:normal;font-weight:bold}
.conum[data-value] *{color:#fff!important}
.conum[data-value]+b{display:none}
.conum[data-value]:after{content:attr(data-value)}
pre .conum[data-value]{position:relative;top:-.125em}
b.conum *{color:inherit!important}
.conum:not([data-value]):empty{display:none}
dt,th.tableblock,td.content,div.footnote{text-rendering:optimizeLegibility}
h1,h2,p,td.content,span.alt{letter-spacing:-.01em}
p strong,td.content strong,div.footnote strong{letter-spacing:-.005em}
p,blockquote,dt,td.content,span.alt{font-size:1.0625rem}
p{margin-bottom:1.25rem}
.sidebarblock p,.sidebarblock dt,.sidebarblock td.content,p.tableblock{font-size:1em}
.exampleblock>.content{background-color:#fffef7;border-color:#e0e0dc;-webkit-box-shadow:0 1px 4px #e0e0dc;box-shadow:0 1px 4px #e0e0dc}
.print-only{display:none!important}
@media print{@page{margin:1.25cm .75cm}
*{-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}
a{color:inherit!important;text-decoration:underline!important}
a.bare,a[href^="#"],a[href^="mailto:"]{text-decoration:none!important}
a[href^="http:"]:not(.bare):after,a[href^="https:"]:not(.bare):after{content:"(" attr(href) ")";display:inline-block;font-size:.875em;padding-left:.25em}
abbr[title]:after{content:" (" attr(title) ")"}
pre,blockquote,tr,img,object,svg{page-break-inside:avoid}
thead{display:table-header-group}
svg{max-width:100%}
p,blockquote,dt,td.content{font-size:1em;orphans:3;widows:3}
h2,h3,#toctitle,.sidebarblock>.content>.title{page-break-after:avoid}
#toc,.sidebarblock,.exampleblock>.content{background:none!important}
#toc{border-bottom:1px solid #ddddd8!important;padding-bottom:0!important}
.sect1{padding-bottom:0!important}
.sect1+.sect1{border:0!important}
#header>h1:first-child{margin-top:1.25rem}
body.book #header{text-align:center}
body.book #header>h1:first-child{border:0!important;margin:2.5em 0 1em 0}
body.book #header .details{border:0!important;display:block;padding:0!important}
body.book #header .details span:first-child{margin-left:0!important}
body.book #header .details br{display:block}
body.book #header .details br+span:before{content:none!important}
body.book #toc{border:0!important;text-align:left!important;padding:0!important;margin:0!important}
body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-break-before:always}
.listingblock code[data-lang]:before{display:block}
#footer{background:none!important;padding:0 .9375em}
#footer-text{color:rgba(0,0,0,.6)!important;font-size:.9em}
.hide-on-print{display:none!important}
.print-only{display:block!important}
.hide-for-print{display:none!important}
.show-for-print{display:inherit!important}}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body class="article">
<div id="header">
</div>
<div id="content">
<hr>
<style>
.arc42help {font-size:small; width: 14px; height: 16px; overflow: hidden; position: absolute; right: 0px; padding: 2px 0px 3px 2px;}
.arc42help::before {content: "?";}
.arc42help:hover {width:auto; height: auto; z-index: 100; padding: 10px;}
.arc42help:hover::before {content: "";}
@media print {
.arc42help {display:hidden;}
}
</style>
<h1 id="true-span-class-image-img-src-images-open-konsequenz-jpg-alt-openk_logo-span" class="sect0"><a class="anchor" href="#true-span-class-image-img-src-images-open-konsequenz-jpg-alt-openk_logo-span"></a><span class="image"><img src="images/open-konsequenz.jpg" alt="openK_logo"></span></h1>
<div class="sect1">
<h2 id="truearchitecture-description-for-standby-planning-module"><a class="anchor" href="#truearchitecture-description-for-standby-planning-module"></a>Architecture description for "Standby Planning" module</h2>
<div class="sectionbody">
<div class="paragraph">
<p><strong>Acknowledgement</strong></p>
</div>
<div class="paragraph">
<p>The following document contains the description of the architecture of the openKonsequenz "Standby Planning" module and is based on the arc42 asciidoc template.</p>
</div>
<div class="paragraph">
<p>Template Revision: 7.0 DE (asciidoc-based), January 2017</p>
</div>
<div class="paragraph">
<p>&#169;
We acknowledge that this document uses material from the
arc 42 architecture template, <a href="http://www.arc42.de" class="bare">http://www.arc42.de</a>.
Created by Dr. Peter Hruschka &amp; Dr. Gernot Starke.</p>
</div>
<div style="page-break-after: always;"></div>
</div>
</div>
<div class="sect1">
<h2 id="section-introduction-and-goals"><a class="anchor" href="#section-introduction-and-goals"></a>1. Introduction and Goals</h2>
<div class="sectionbody">
<div class="sect2">
<h3 id="truerequirements-overview"><a class="anchor" href="#truerequirements-overview"></a>1.1. Requirements Overview</h3>
<div class="paragraph">
<p>The module "Standby Planning" should support a user by creating a standby schedule and giving the employee (standby_user) the chance to see when he/she has a planned standby time.
Therefore the person who make the plan has the change to define groups and functions, connect them to regions, on which he/she can filter to switch standby times, for example.
Also the user has the change to start an automatic generation process in the planning phase were he/she can choose a standby cycle that defines to which times an standby time start or ends.
The full requirements of the module are specified in the external specification.</p>
</div>
</div>
<div class="sect2">
<h3 id="truequality-goals"><a class="anchor" href="#truequality-goals"></a>1.2. Quality Goals</h3>
<div class="paragraph">
<p>The following documents contain the quality goals in detail:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Architecture Committee Handbook v1.3.1 from 05-09-2017</p>
</li>
<li>
<p>Quality Committee Handbook v1.1.1 from 11-09-2017</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>The architecture is based on the AC-Handbook. The quality demands are described in the QC-Handbook.
Both specifications were fully complied with in the project, so that a high quality is given.</p>
</div>
<div class="paragraph">
<p>The code quality regarding static code analysis and unit test code coverage on the backend and fronend sides
are ensured by the use of sonarqube. The rule set and the qualtity gate are defined by the default, the
so called "sonar way".</p>
</div>
<div class="paragraph">
<p>The module 'Standby Planning' is part of the Eclipse project 'Eclipse openK User Modules'.
This project bases on the Eclipse Public Licence 2.0.</p>
</div>
</div>
<div class="sect2">
<h3 id="truestakeholder"><a class="anchor" href="#truestakeholder"></a>1.3. Stakeholder</h3>
<table class="tableblock frame-all grid-all spread">
<caption class="title">Tabelle 1. Stakeholders</caption>
<colgroup>
<col style="width: 33.3333%;">
<col style="width: 33.3333%;">
<col style="width: 33.3334%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Role/Name</th>
<th class="tableblock halign-left valign-top">Contact</th>
<th class="tableblock halign-left valign-top">Expectations</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Product Owner (represents the Distribution System Operators)</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Oliver Frank, Heinrich Schubert</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The software must fulfil their functional and nonfunctional Requirements.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Module Developer</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Maximillian Ridder, Christoph Weber, Markus Wolf, Saverio Mancuso, Jan Gerste</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">All relevant business and technical information must be available for implementing the software.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">External Reviewer (represents the AC/QC)</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Thorsten Meyer</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The software and the documentation is realized according the Quality and Architecture Handbook of openKONSEQUENZ.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">External Reviewer (represents the Eclipse-Requirements)</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Angelika Wittek</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The software is licensed under the EPL 2.0. It must be validated that all requirements are fulfilled.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">System Integrator</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">n.n.</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">A documentation for the integration of the module in the DSO specific environments must be available.</p></td>
</tr>
</tbody>
</table>
<div style="page-break-after: always;"></div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="section-architecture-constraints"><a class="anchor" href="#section-architecture-constraints"></a>2. Architecture Constraints</h2>
<div class="sectionbody">
<div class="paragraph">
<p>TODO: LINK zum Eclipse Repository anpassen</p>
</div>
<div class="paragraph">
<p>The main architecture constraints are:</p>
</div>
<div class="ulist">
<ul>
<li>
<p><strong>Public License</strong> The module must be available under the "Eclipse Public License 2.0".</p>
</li>
<li>
<p><strong>Availability</strong> The source code of the module must be accessible to any interested person/company.
Therefore the project is published at <a href="https://projects.eclipse.org/projects/technology.openk-usermodules/developer" class="bare">https://projects.eclipse.org/projects/technology.openk-usermodules/developer</a></p>
</li>
</ul>
</div>
<div class="sect2">
<h3 id="truetechnical-constraints"><a class="anchor" href="#truetechnical-constraints"></a>2.1. Technical Constraints</h3>
<div class="paragraph">
<p>The following technical constraints are given:</p>
</div>
<table class="tableblock frame-all grid-all spread">
<caption class="title">Tabelle 2. Technical Contraints</caption>
<colgroup>
<col style="width: 50%;">
<col style="width: 50%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Component</th>
<th class="tableblock halign-left valign-top">Constraints</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Basis components of the reference platform</p></td>
<td class="tableblock halign-left valign-top"><div><div class="ulist">
<ul>
<li>
<p>Application Server Tomcat</p>
</li>
<li>
<p>Database PostgreSQL</p>
</li>
</ul>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Programming Language Backend</p></td>
<td class="tableblock halign-left valign-top"><div><div class="ulist">
<ul>
<li>
<p>Java 1.8</p>
</li>
<li>
<p>REST/JSON Interfaces</p>
</li>
<li>
<p>Eclipse Link as ORM</p>
</li>
<li>
<p>JUnit + Mockito</p>
</li>
</ul>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Programming Language Frontend</p></td>
<td class="tableblock halign-left valign-top"><div><div class="ulist">
<ul>
<li>
<p>Angular 6.1.0 (Javascript, Typescript, HTML5, CSS3)</p>
</li>
<li>
<p>Bootstrap</p>
</li>
<li>
<p>According to oK-GUI-Styleguide</p>
</li>
</ul>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Java QA environment</p></td>
<td class="tableblock halign-left valign-top"><div><div class="ulist">
<ul>
<li>
<p>Sonarqube 6.4</p>
</li>
</ul>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">IDE</p></td>
<td class="tableblock halign-left valign-top"><div><div class="ulist">
<ul>
<li>
<p>Not restricted (Eclipse, Microsoft Visual Code &#8230;&#8203;)</p>
</li>
</ul>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Build system</p></td>
<td class="tableblock halign-left valign-top"><div><div class="ulist">
<ul>
<li>
<p>Backend: Maven</p>
</li>
<li>
<p>Frontend: NodeJS + Angular/cli</p>
</li>
</ul>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Libraries, Frameworks,Components</p></td>
<td class="tableblock halign-left valign-top"><div><div class="ulist">
<ul>
<li>
<p>Used Libraries/Frameworks have to be compatible to the Eclipse Public License</p>
</li>
</ul>
</div></div></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">Architecture Documentation</p></td>
<td class="tableblock halign-left valign-top"><div><div class="ulist">
<ul>
<li>
<p>According ARC42-Template</p>
</li>
</ul>
</div></div></td>
</tr>
</tbody>
</table>
</div>
<div class="sect2">
<h3 id="truetechnical-dependencies"><a class="anchor" href="#truetechnical-dependencies"></a>2.2. Technical Dependencies</h3>
<div class="sect3">
<h4 id="truemodules"><a class="anchor" href="#truemodules"></a>2.2.1. Modules</h4>
<div class="paragraph">
<p>The following modules are required to use the 'Standby Planning':</p>
</div>
<table class="tableblock frame-all grid-all spread">
<caption class="title">Tabelle 3. Modules</caption>
<colgroup>
<col style="width: 33.3333%;">
<col style="width: 33.3333%;">
<col style="width: 33.3334%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Name of the module</th>
<th class="tableblock halign-left valign-top">Purpose</th>
<th class="tableblock halign-left valign-top">Status of the module</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">'Auth&amp;Auth'</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Authentification and Authorization</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">available</p></td>
</tr>
</tbody>
</table>
</div>
<div class="sect3">
<h4 id="truelibraries"><a class="anchor" href="#truelibraries"></a>2.2.2. Libraries</h4>
<div class="paragraph">
<p><strong>Frontend</strong></p>
</div>
<table class="tableblock frame-all grid-all spread">
<colgroup>
<col style="width: 50%;">
<col style="width: 50%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Dependency</th>
<th class="tableblock halign-left valign-top">Reason for Usage</th>
</tr>
</thead>
<tfoot>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">primeng/primeicons</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">PrimeNG is a huge library which offers different angular components like multiselect boxes, context menu or toast messages. These components are part of our application.</p></td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">@angular/* libraries</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Comes with Angular</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">classlist.js, core-js, rxjs, web-animations-js, zone.js</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Comes with Angular</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">@ng-bootstrap/ng-bootstrap</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">This dependency provides a load of different bootstrap/angular components. Mostly we use the datepicker/timepicker but some other components found it&#8217;s way into the application as well.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">ag-grid, ag-grid-angular</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">This library is used to display tables. It provides functionality like filtering out of the box. This library was preferred by the Product Owner and therefore we used it.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">bootstrap</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">As we want a responsive application in general there is no way around bootstrap in these days. Therefore we put it into our application.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">font-awesome</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">To make our app more appealing to the users we are using font-awesome to get range of nice icons into our application.</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
<p>TODO: Pfad zu den Datein (Bibliotheken) ergaenzen.</p>
</div>
<div class="paragraph">
<p>The used libraries can be found here:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Backend</p>
<div class="ulist">
<ul>
<li>
<p>pom.xml of the module</p>
</li>
</ul>
</div>
</li>
<li>
<p>Frontend</p>
<div class="ulist">
<ul>
<li>
<p>package.json</p>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div style="page-break-after: always;"></div>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="section-system-scope-and-context"><a class="anchor" href="#section-system-scope-and-context"></a>3. System Scope and Context</h2>
<div class="sectionbody">
<div class="sect2">
<h3 id="truebusiness-context"><a class="anchor" href="#truebusiness-context"></a>3.1. Business Context</h3>
<div class="paragraph">
<p>The user module 'Standby Planning' communicates via Restful Webservices with the following modules:</p>
</div>
<div class="ulist">
<ul>
<li>
<p><strong>Core Module 'Auth &amp; Auth'</strong> The 'Standby Planning' can only be used by authorized users.Therefore, it is essential to invoke the module 'Auth &amp; Auth' for authorization and authentication purposes.</p>
</li>
</ul>
</div>
<div class="paragraph">
<p><strong>&lt;Diagramm und/oder Tabelle&gt;</strong>
TODO Diagramm erstellen und hinzufügen</p>
</div>
</div>
<div class="sect2">
<h3 id="truetechnical-context"><a class="anchor" href="#truetechnical-context"></a>3.2. Technical Context</h3>
<div class="paragraph">
<p>The following aspects have to be taken into account for external communication of the module Standby Planning:</p>
</div>
<div class="paragraph">
<p>RESTful web services are used as interface-technology.</p>
</div>
<div class="paragraph">
<p>Each external interface (interfaces between modules or external systems) has to be documented.</p>
</div>
<div class="paragraph">
<p>Dependencies of modules to services realized by other modules have to be specified and documented explicitly.</p>
</div>
<div class="paragraph">
<p>The interfaces of the module 'Standby Planning' are described in the interface documentation.</p>
</div>
<div style="page-break-after: always;"></div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="section-solution-strategy"><a class="anchor" href="#section-solution-strategy"></a>4. Solution Strategy</h2>
<div class="sectionbody">
<div class="paragraph">
<p>The module 'Standby Planning' bases on a three-tier architecture:</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p><strong>Frontend</strong> - The GUI is implemented as a web-frontend.</p>
</li>
<li>
<p><strong>Backend</strong> - The business functionalities are implemented in the backend tier. It provides the business functions via RESTful Webservices.</p>
</li>
<li>
<p><strong>Database</strong> - The database stores all module specific data.</p>
</li>
</ol>
</div>
<div style="page-break-after: always;"></div>
</div>
</div>
<div class="sect1">
<h2 id="section-building-block-view"><a class="anchor" href="#section-building-block-view"></a>5. Building Block View</h2>
<div class="sectionbody">
<div class="paragraph">
<p>The following image shows the structure of the modul 'StandbyPlanning'
<span class="image"><img src="./images/ok_arch_overview.png" alt="openK_logo"></span></p>
</div>
<div class="sect2">
<h3 id="truefrontend-tier-spfe"><a class="anchor" href="#truefrontend-tier-spfe"></a>5.1. Frontend - Tier (spfe)</h3>
<div class="paragraph">
<p>This component implements the presentation logic for the standby-planning-module using the Angular framework. The Frontend is a so called <strong>Single Page Application</strong> (SPA) because it behaves like a single HTML-page. The name of the war file is <strong>spfe</strong>.</p>
</div>
<div class="paragraph">
<p>Technical the frontend consists of the following building blocks:</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p><strong>Modules</strong> - There is one Core Module which holds all the singleton assets of the application like login, authentication service, navbar,etc. The Shared Module keeps all the reuseable elements like general components, directives, etc. In addition to these two Modules there are several Feature Module which encapsulate one functional requirement each like masterdata-management, standby-planning or reports.</p>
</li>
<li>
<p><strong>Services</strong> - Each Module has itś own Services which are mostly used to make restcalls to the backends.</p>
</li>
<li>
<p><strong>Components</strong> - In each Module you will find a component section which holds the different Components.
.frontend_picture
<span class="image"><img src="./images/ok_arch_frontend.png" alt="ok_arch_frontend.png"></span></p>
</li>
</ol>
</div>
<div class="sect3">
<h4 id="truebackend-tier-spbe"><a class="anchor" href="#truebackend-tier-spbe"></a>5.1.1. Backend - Tier (spbe)</h4>
<div class="paragraph">
<p>This component implements the business functionality of the planned grid measures. And it provides services, that the <strong>spfe</strong> – SPA can use the functions in the frontend. The name of the war file is <strong>spbe</strong>.</p>
</div>
<div class="paragraph">
<p>The backend tier contains five components which can be summarized in three layers:</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p><strong>Presentation layer</strong> - Represented by</p>
<div class="olist loweralpha">
<ol class="loweralpha" type="a">
<li>
<p>REST-Srv</p>
</li>
<li>
<p>DTO (Data Transfer Object)</p>
</li>
</ol>
</div>
</li>
<li>
<p><strong>Controller layer</strong> - Represented by</p>
<div class="olist loweralpha">
<ol class="loweralpha" type="a">
<li>
<p>Controller</p>
</li>
</ol>
</div>
</li>
<li>
<p><strong>Model layer</strong> - Represented by</p>
<div class="olist loweralpha">
<ol class="loweralpha" type="a">
<li>
<p>DAO</p>
</li>
<li>
<p>Model (Entity)</p>
</li>
</ol>
</div>
</li>
</ol>
</div>
<div class="paragraph">
<div class="title">backend_picture</div>
<p><span class="image"><img src="./images/ok_arch_backend.png" alt="ok_arch_backend.png"></span></p>
</div>
</div>
<div class="sect3">
<h4 id="truedatabase-tier"><a class="anchor" href="#truedatabase-tier"></a>5.1.2. Database - Tier</h4>
<div class="paragraph">
<p>The database has the name "BP" and needs a user "bp". The project generates the needed tables and keys during startup. All needed data for the Standby-Planning application will be stored here. Also the camunda database will be used for storing process relevant data.</p>
</div>
<div class="paragraph">
<div class="title">database_picture</div>
<p><span class="image"><img src="./images/ok_arch_db.png" alt="ok_arch_db.png"></span></p>
</div>
<div class="paragraph">
<div class="title">database_tables</div>
<p><span class="image"><img src="./images/ok_db_model_002.png" alt="ok_db_model_002.png"></span></p>
</div>
</div>
<div class="sect3">
<h4 id="trueprogram-configuration"><a class="anchor" href="#trueprogram-configuration"></a>5.1.3. Program Configuration</h4>
<div class="sect4">
<h5 id="truefrontend-configuration"><a class="anchor" href="#truefrontend-configuration"></a>Frontend Configuration</h5>
<div class="paragraph">
<p>In Frontend tier there are environment files to configure the application.
The files can be found in the frontend git under \src\environments.</p>
</div>
<div class="paragraph">
<p>Example environment file:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-json" data-lang="json">export const environment = {
production: false,
basePath: 'http://10.1.18.175:8280/spbe/webapi',
loginPage: 'http://10.1.18.175:8080/portalFE/#/login'
};
}</code></pre>
</div>
</div>
</div>
<div class="sect4">
<h5 id="truebackend-configuration"><a class="anchor" href="#truebackend-configuration"></a>Backend Configuration</h5>
<div class="sect5">
<h6 id="truee-mail-configuration"><a class="anchor" href="#truee-mail-configuration"></a>E-Mail Configuration</h6>
<div class="paragraph">
<p>Not defined yet.</p>
</div>
<div style="page-break-after: always;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="section-runtime-view"><a class="anchor" href="#section-runtime-view"></a>6. Runtime View</h2>
<div class="sectionbody">
<div class="sect2">
<h3 id="truelogin-authentication"><a class="anchor" href="#truelogin-authentication"></a>6.1. Login / Authentication</h3>
<div class="paragraph">
<p>TODO: Authentifizierung beschreiben
TODO: Ablaufplaene (BPMN) beschreiben</p>
</div>
<div style="page-break-after: always;"></div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="section-deployment-view"><a class="anchor" href="#section-deployment-view"></a>7. Deployment of the application components</h2>
<div class="sectionbody">
<div class="sect2">
<h3 id="truedeployment-of-the-frontend"><a class="anchor" href="#truedeployment-of-the-frontend"></a>7.1. Deployment of the frontend</h3>
<div class="paragraph">
<p>Not defined yet.</p>
</div>
</div>
<div class="sect2">
<h3 id="truedeployment-of-the-backend"><a class="anchor" href="#truedeployment-of-the-backend"></a>7.2. Deployment of the backend</h3>
<div class="paragraph">
<p>Not defined yet.</p>
</div>
</div>
<div class="sect2">
<h3 id="truedeployment-of-the-database"><a class="anchor" href="#truedeployment-of-the-database"></a>7.3. Deployment of the database</h3>
<div class="paragraph">
<p>Not defined yet.</p>
</div>
<div style="page-break-after: always;"></div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="section-concepts"><a class="anchor" href="#section-concepts"></a>8. Concepts</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Not defined yet.</p>
</div>
<div style="page-break-after: always;"></div>
</div>
</div>
<div class="sect1">
<h2 id="section-design-decisions"><a class="anchor" href="#section-design-decisions"></a>9. Design Decisions</h2>
<div class="sectionbody">
<div class="paragraph">
<p>All architecture decisions based on the Architecture Committee Handbook. There are no other deviations then the following.</p>
</div>
<div class="sect2">
<h3 id="truebdew-whitepaper-anforderungen-an-sichere-steuerungs-und-telekommunikationssysteme"><a class="anchor" href="#truebdew-whitepaper-anforderungen-an-sichere-steuerungs-und-telekommunikationssysteme"></a>9.1. BDEW Whitepaper "Anforderungen an sichere Steuerungs- und Telekommunikationssysteme "</h3>
<div class="paragraph">
<p>During the development of this module the whitepaper of the BDWE will be used as basis concept, but only for the given four aspects with the here given exclusions.</p>
</div>
<table class="tableblock frame-all grid-all spread">
<caption class="title">Tabelle 4. aspects from BDWE whitepaper</caption>
<colgroup>
<col style="width: 25%;">
<col style="width: 25%;">
<col style="width: 25%;">
<col style="width: 25%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">aspect</th>
<th class="tableblock halign-left valign-top">german</th>
<th class="tableblock halign-left valign-top">priority</th>
<th class="tableblock halign-left valign-top">description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">integrity</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Integrität</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">high</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">- Integrity testing of module specific configuration files will be checked on DEV and TEST system manualy before they will be deployed to PROD.
</p><p class="tableblock">- A crypted checksum for system-, config- and application files will not be implemented.
</p><p class="tableblock">- user information will be handled with the 'Auth &amp; Auth' core module. Therefore there are no real user data sended in the module. Just the crypted bearer value.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">availability</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Verfügbarkeit</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">normal</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">In the document the aspect availability is mostly described as a hardware based topic and has not really much to do with development of this module. The only point that fits is the patching situation. (p.12) But because of the normal priority a short downtime should be acceptable. A server start is recommended but not necessary. But the application contexts need to be undployed and deployed. Therefore a short downtime is needed.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">intimacy</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Vertraulichkeit</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">normal</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">At the moment there is no intimacy classifaction defined. The Standby Planning module uses user data for generation standby plans. All the data are stored in a local database with restricted access. The Module uses HTTP-Rest requests for getting the data to UI. Therefore restrictions can be set that only users with special roles can be granted access.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">maintainability</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Wartbarkeit</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">normal</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">- There is no defined maintainability contract at the moment.
</p><p class="tableblock">- The Standby Planning module is currently splittet into three components. Backend, Frontend and database. It uses moduls from openK like 'Auth &amp; Auth' but has not other interaction to the module. So far there are no interfaces that should be called from other modules.</p></td>
</tr>
</tbody>
</table>
<table class="tableblock frame-all grid-all spread">
<caption class="title">Tabelle 5. timetable of decisons</caption>
<colgroup>
<col style="width: 33.3333%;">
<col style="width: 33.3333%;">
<col style="width: 33.3334%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Date</th>
<th class="tableblock halign-left valign-top">Short</th>
<th class="tableblock halign-left valign-top">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">2018-05-29</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Fontend Framework</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">We chose to use the current version of Angular (6.1.0) in order to have a stable environment. An older version like Angular 4 was no option since the newer version has several bugfixes and optimizations. Angular JS was no alternative for us.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">2018-05-29</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Fontend Buildmechanism</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">We decided to stay as close to the native and recommended build mechanism as possible. Therefore we are using Angular CLI as our build- and testtool. We opposed to use Maven for Frontendbuild as this brings additional complexity into the build process and is far away from the recommended and accepted way in the community.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">2018-05-29</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Fontend - Backend - DB</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">At this point the module is splitted in 3 different projects.
- Frontend: Angular with cli build
- Backend: Java with Maven build
- Database
Frontend and Backend have different components but at this point it would not make much sense to modulize them. (Diffenrent .jars, for example, would be more effort than benefit.)</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">2018-05-29</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Camunda BPM</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Camunda BPM is used as BPMN engine to route processes.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">2018-05-29</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Tools and APIs</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The technical constraints are documented in the 02_architecture_constraints.adoc and defined in the backend (spbe) pom.xml</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">2018-05-29</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">ng2-daterangepicker</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The source code of the date picker openK prefered is not maintained since 10 month. The last change was an ugrade to angular 4. Because the Standby Planning module uses angular 6 we decide not to use this date picker. Instead we chose to use the datepicker from ng-bootstrap (<a href="https://ng-bootstrap.github.io" class="bare">https://ng-bootstrap.github.io</a>) which is well maintained.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">2018-06-14</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">AG-Grid for tables</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">The Product Owner preferred the usage of AG-Grid in this Project. As we did not see any disadvantages we agreed and used AG-Grid from now on. The alternative standard HTML-Tables were therefore obsolete.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">2018-06-29</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">no use of bom.xml</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">A bom.xml is not needed as long no further modularization is needed for the backend modul. The pom.xml file is enough to describe the external used .jars.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">2018-10-23</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Standard HTML Tables for View "Abfrage aktuelle Bereitschaft"</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">For the View "Abfrage aktuelle Bereitschaft" it was required that it is responsive in order to use it on mobile devices and on Computers. We couldn´t get the AG-Grid responsive and therefore asked the Product Owner to use Standard HTML Tables. He agreed - (<a href="https://openkonsequenz.atlassian.net/browse/BP-187?focusedCommentId=10277&amp;page=com.atlassian.jira.plugin.system.issuetabpanels%3Acomment-tabpanel#comment-10277" class="bare">https://openkonsequenz.atlassian.net/browse/BP-187?focusedCommentId=10277&amp;page=com.atlassian.jira.plugin.system.issuetabpanels%3Acomment-tabpanel#comment-10277</a>).</p></td>
</tr>
</tbody>
</table>
<div style="page-break-after: always;"></div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="section-quality-scenarios"><a class="anchor" href="#section-quality-scenarios"></a>10. Quality scenarios</h2>
<div class="sectionbody">
<div class="paragraph">
<p>not described yet.</p>
</div>
<div style="page-break-after: always;"></div>
</div>
</div>
<div class="sect1">
<h2 id="section-technical-risks"><a class="anchor" href="#section-technical-risks"></a>11. Risks and Technical Debts</h2>
<div class="sectionbody">
<div class="paragraph">
<p>(Currently there aren&#8217;t any known issues)</p>
</div>
<div style="page-break-after: always;"></div>
</div>
</div>
<div class="sect1">
<h2 id="section-glossary"><a class="anchor" href="#section-glossary"></a>12. Glossary</h2>
<div class="sectionbody">
<table class="tableblock frame-all grid-all spread">
<caption class="title">Tabelle 6. Abbreviations and glossary terms</caption>
<colgroup>
<col style="width: 25%;">
<col style="width: 25%;">
<col style="width: 25%;">
<col style="width: 25%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Short</th>
<th class="tableblock halign-left valign-top">Long</th>
<th class="tableblock halign-left valign-top">German</th>
<th class="tableblock halign-left valign-top">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">AC</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Architecture Committee</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Architektur-Komittee</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Gives Framework and Constraints according to architecture for oK projects.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">DAO</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Data Access Objects</p></td>
<td class="tableblock halign-left valign-top"></td>
<td class="tableblock halign-left valign-top"></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">DTO</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Data Transfer Object</p></td>
<td class="tableblock halign-left valign-top"></td>
<td class="tableblock halign-left valign-top"></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">EPL</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Eclipse Public License</p></td>
<td class="tableblock halign-left valign-top"></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Underlying license model for Eclipse projects like elogbook@openK</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">REST</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Representational State Transfer</p></td>
<td class="tableblock halign-left valign-top"></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Representational State Transfer bezeichnet ein Programmierparadigma für verteilte Systeme, insbesondere für Webservices.</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">oK</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">openKONSEQUENZ</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">openKONSEQUENZ</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Name of the consortium of DSOs</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">QC</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Quality Committee</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Qualitätskomitee</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">Gives framework and constraints according to quality for oK projects.</p></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="footer">
<div id="footer-text">
Last updated 2018-12-19 14:47:19 MZ
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/solarized_dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<script>hljs.initHighlighting()</script>
</body>
</html>