aboutsummaryrefslogtreecommitdiffstats
path: root/sdv/pdf/site
diff options
context:
space:
mode:
authoropensource-tnbt <sridhar.rao@spirent.com>2020-09-10 12:23:34 +0530
committerSridhar Rao <sridhar.rao@spirent.com>2020-09-12 03:37:23 +0000
commit86d4114ab61f9cb00c1d01f91e81e9a38c6ba2f6 (patch)
tree5d5048528f9c5a15b372e9c889a276b5a3721de2 /sdv/pdf/site
parent27fff834bee372c53e1b5d222c398543ac3f34aa (diff)
SDV: Platform Description Implementation.
This patch includes PDF Template and a tool to create PDF. Signed-off-by: Sridhar K. N. Rao <sridhar.rao@spirent.com> Change-Id: Ib702ff42352d584cb9146ff1959258c558e06615
Diffstat (limited to 'sdv/pdf/site')
-rwxr-xr-xsdv/pdf/site/assets/pdfrep.pngbin0 -> 158477 bytes
-rw-r--r--sdv/pdf/site/assets/plus-circle-solid.svg59
-rw-r--r--sdv/pdf/site/assets/plus-square-regular.svg1
-rw-r--r--sdv/pdf/site/assets/redo-alt-solid.svg1
-rw-r--r--sdv/pdf/site/assets/trash-alt-regular.svg59
-rw-r--r--sdv/pdf/site/index.html1797
-rw-r--r--sdv/pdf/site/scripts/actions.js24
-rw-r--r--sdv/pdf/site/scripts/createfile.js13
-rw-r--r--sdv/pdf/site/scripts/mergeDeep.js31
-rw-r--r--sdv/pdf/site/scripts/readFromHTML.js57
-rw-r--r--sdv/pdf/site/scripts/writeToHTML.js117
-rw-r--r--sdv/pdf/site/style/array.css55
-rw-r--r--sdv/pdf/site/style/multitab.css109
13 files changed, 2323 insertions, 0 deletions
diff --git a/sdv/pdf/site/assets/pdfrep.png b/sdv/pdf/site/assets/pdfrep.png
new file mode 100755
index 0000000..ed144f3
--- /dev/null
+++ b/sdv/pdf/site/assets/pdfrep.png
Binary files differ
diff --git a/sdv/pdf/site/assets/plus-circle-solid.svg b/sdv/pdf/site/assets/plus-circle-solid.svg
new file mode 100644
index 0000000..39a0f8e
--- /dev/null
+++ b/sdv/pdf/site/assets/plus-circle-solid.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ inkscape:version="1.0 (6e3e5246a0, 2020-05-07)"
+ sodipodi:docname="plus-circle-solid.svg"
+ id="svg4"
+ version="1.1"
+ viewBox="0 0 512 512"
+ role="img"
+ class="svg-inline--fa fa-plus-circle fa-w-16"
+ data-icon="plus-circle"
+ data-prefix="fas"
+ focusable="false"
+ aria-hidden="true">
+ <metadata
+ id="metadata10">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs8" />
+ <sodipodi:namedview
+ inkscape:current-layer="svg4"
+ inkscape:window-maximized="1"
+ inkscape:window-y="27"
+ inkscape:window-x="0"
+ inkscape:cy="256"
+ inkscape:cx="114.5679"
+ inkscape:zoom="1.265625"
+ showgrid="false"
+ id="namedview6"
+ inkscape:window-height="794"
+ inkscape:window-width="1600"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0"
+ guidetolerance="10"
+ gridtolerance="10"
+ objecttolerance="10"
+ borderopacity="1"
+ bordercolor="#666666"
+ pagecolor="#ffffff" />
+ <path
+ style="fill:#61b9ff;fill-opacity:1"
+ id="path2"
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
+ fill="currentColor" />
+</svg>
diff --git a/sdv/pdf/site/assets/plus-square-regular.svg b/sdv/pdf/site/assets/plus-square-regular.svg
new file mode 100644
index 0000000..b9e300d
--- /dev/null
+++ b/sdv/pdf/site/assets/plus-square-regular.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="plus-square" class="svg-inline--fa fa-plus-square fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"></path></svg> \ No newline at end of file
diff --git a/sdv/pdf/site/assets/redo-alt-solid.svg b/sdv/pdf/site/assets/redo-alt-solid.svg
new file mode 100644
index 0000000..b8e9455
--- /dev/null
+++ b/sdv/pdf/site/assets/redo-alt-solid.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="redo-alt" class="svg-inline--fa fa-redo-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"></path></svg> \ No newline at end of file
diff --git a/sdv/pdf/site/assets/trash-alt-regular.svg b/sdv/pdf/site/assets/trash-alt-regular.svg
new file mode 100644
index 0000000..fbce77b
--- /dev/null
+++ b/sdv/pdf/site/assets/trash-alt-regular.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ inkscape:version="1.0 (6e3e5246a0, 2020-05-07)"
+ sodipodi:docname="trash-alt-regular.svg"
+ id="svg4"
+ version="1.1"
+ viewBox="0 0 448 512"
+ role="img"
+ class="svg-inline--fa fa-trash-alt fa-w-14"
+ data-icon="trash-alt"
+ data-prefix="far"
+ focusable="false"
+ aria-hidden="true">
+ <metadata
+ id="metadata10">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs8" />
+ <sodipodi:namedview
+ inkscape:current-layer="svg4"
+ inkscape:window-maximized="1"
+ inkscape:window-y="27"
+ inkscape:window-x="0"
+ inkscape:cy="192.79012"
+ inkscape:cx="224"
+ inkscape:zoom="1.265625"
+ showgrid="false"
+ id="namedview6"
+ inkscape:window-height="794"
+ inkscape:window-width="1600"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0"
+ guidetolerance="10"
+ gridtolerance="10"
+ objecttolerance="10"
+ borderopacity="1"
+ bordercolor="#666666"
+ pagecolor="#ffffff" />
+ <path
+ style="fill:#ff6161;fill-opacity:1"
+ id="path2"
+ d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"
+ fill="currentColor" />
+</svg>
diff --git a/sdv/pdf/site/index.html b/sdv/pdf/site/index.html
new file mode 100644
index 0000000..fe88f29
--- /dev/null
+++ b/sdv/pdf/site/index.html
@@ -0,0 +1,1797 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Cloud Platform Description</title>
+ <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+ <meta content="utf-8" http-equiv="encoding">
+
+ <link rel="stylesheet" href="style/multitab.css">
+ <link rel="stylesheet" href="style/array.css">
+ <script src="scripts/actions.js"></script>
+ <script src="scripts/readFromHTML.js"></script>
+ <script src="scripts/writeToHTML.js"></script>
+ <script src="scripts/mergeDeep.js"></script>
+ <script src="scripts/createfile.js"></script>
+<script>
+ window.console = window.console || function(t) {};
+</script>
+<script>
+ if (document.location.search.match(/type=embed/gi)) {
+ window.parent.postMessage("resize", "*");
+ }
+</script>
+</head>
+<body translate="no">
+<div class="form-area">
+ <div class="form-header">
+ <div class="top-header">
+ <div class="devider-row">
+ <div class="half-2">
+ <!-- <div class="logo-area">
+ <h1><a href="javascript:;">Cloud Platform Description</a></h1>
+ </div>
+ -->
+ <div class="logo-area">
+ <h1>Cloud Platform Description</h1>
+ </div>
+ </div>
+ <div class="half-2">
+ <div class="need-help">
+ <a href="javascript:;">About PDF <i>?</i></a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="bottom-header">
+ <div class="devider-row">
+ <div class="half-2">
+ <div class="status">
+ <h3> Guidelines: </h2>
+ <ul>
+ <li> Please add the values correctly - No validations are included in this version. </li>
+ <li> The Deployment can be OOO, OOK, OWK or OaV. In the first three deployments, openstack services are deployed as containers. </li>
+ <li> Block Storage method is either rbd or iscsi </li>
+ <li> Example Power-state prefetcher setting: C4_C6_MLC-STR_MLC-SPA_DCU_DCA_RAS_TURBO </li>
+ <li> Under Physical Network please include IPMI Network Information too. </li>
+ <li> A network link could be a trunk, bond, interface or a bridge. </li>
+ <li> Please click of Submit button before clicking the Dowload button. </li>
+
+ </ul>
+ </div>
+ </div>
+ <div class="half-2">
+ <img src="assets/pdfrep.png" style="margin:auto; width:500px;height=400px;display:block" />
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="form-body">
+ <div class="multitab-form-area">
+ <div class="tab-links-area">
+ <h1>PDF 2.0</h1>
+ <p>Platform Description Categories</p>
+ <hr>
+ <ul>
+ <li><a data-toggle="formtab" href="#mgmtinfo" class="active">Management Information</a></li>
+ <li><a data-toggle="formtab" href="#userInfo">User Information</a></li>
+ <li><a data-toggle="formtab" href="#ntpInfo">NTP Information</a></li>
+ <li><a data-toggle="formtab" href="#dnsInfo">DNS Information</a></li>
+ <li><a data-toggle="formtab" href="#proxyInfo">Proxy Information</a></li>
+ <li><a data-toggle="formtab" href="#ldapInfo">LDAP Information</a></li>
+ <li><a data-toggle="formtab" href="#vimInfo">VIM Information</a></li>
+ <li><a data-toggle="formtab" href="#vimfInfo">VIM Functional Info</a></li>
+ <li><a data-toggle="formtab" href="#deployInfo">Deployment Information</a></li>
+ <li><a data-toggle="formtab" href="#jumpInfo">Jump Host Information</a></li>
+ <li><a data-toggle="formtab" href="#rackInfo">Rack Information</a></li>
+ <li><a data-toggle="formtab" href="#stocluInfo">Storage Cluster Information</a></li>
+ <li><a data-toggle="formtab" href="#biosProfiles">BIOS Profiles</a></li>
+ <li><a data-toggle="formtab" href="#procProfiles">Processor Profiles</a></li>
+ <li><a data-toggle="formtab" href="#disksProfiles">Disks Profiles</a></li>
+ <li><a data-toggle="formtab" href="#nicProfiles">NIC Profiles</a></li>
+ <li><a data-toggle="formtab" href="#hwProfiles">Hardware Profiles</a></li>
+ <li><a data-toggle="formtab" href="#storprofiles">Storage Profiles</a></li>
+ <li><a data-toggle="formtab" href="#virNets">Networks</a></li>
+ <li><a data-toggle="formtab" href="#phyNets">Physical Networks</a></li>
+ <li><a data-toggle="formtab" href="#netLinks">Network Links</a></li>
+ <li><a data-toggle="formtab" href="#ifMap">Interface Mapping Profiles</a></li>
+ <li><a data-toggle="formtab" href="#pfProfiles">Platform Profiles</a></li>
+ <li><a data-toggle="formtab" href="#ucOok">Undercloud OOK</a></li>
+ <li><a data-toggle="formtab" href="#ucOoo">Undercloud OOO</a></li>
+ <li><a data-toggle="formtab" href="#usSw">Undercloud Software Profiles</a></li>
+ <li><a data-toggle="formtab" href="#osSw">Openstack Sofware Profiles</a></li>
+ <li><a data-toggle="formtab" href="#infSw">Infra Software Profiles</a></li>
+ <li><a data-toggle="formtab" href="#swSet">Software Sets</a></li>
+ <li><a data-toggle="formtab" href="#roles">Roles</a></li>
+ <li><a data-toggle="formtab" href="#extraPo">Extrapolation Info</a></li>
+ <li><a data-toggle="formtab" href="#hostAg">Host Aggregates</a></li>
+ </ul>
+ </div>
+ <div class="tab-form-area" id="pdfform">
+ <div class="tabs-panels active" id="mgmtinfo">
+ <div class="tab-part">
+ <h4>Management Information</h4>
+ <hr>
+ <div class="devider-row" name="mgmt_profile">
+ <div class="form-field">
+ <label>Owner</label>
+ <input type="text" placeholder="Contact Name" name="owner">
+ </div>
+ <div class="form-field">
+ <label>Area Name</label>
+ <input type="text" placeholder="Region Name" name="area_name">
+ </div>
+ <div class="form-field">
+ <label>Area Center Name</label>
+ <input type="text" placeholder="Region Center" name="area_center_name">
+ </div>
+ <div class="form-field">
+ <label>Room ID</label>
+ <input type="text" placeholder="00000" name="room_id">
+ </div>
+ <div class="form-field">
+ <label>City</label>
+ <input type="text" placeholder="Bangalore" name="city">
+ </div>
+ <div class="form-field">
+ <label>Resource Pool Name</label>
+ <input type="text" placeholder="EPG" name="resource_pool_name">
+ </div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#userInfo">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="userInfo">
+ <div class="tab-part">
+ <h4> User Information </h4>
+ <hr>
+ <div class="arr" name="user_info">
+ <div class="form-field">
+ <label>Username</label>
+ <input type="text" placeholder="sridhar" name="username">
+ </div>
+ <div class="form-field">
+ <label>Password</label>
+ <input type="text" placeholder="*******" name="password">
+ </div>
+ <div class="form-field">
+ <label>Public Key</label>
+ <input type="text" rows="4" cols="60" name="pub_key">
+ </div>
+ <div class="form-field">
+ <label>Pass-Phrase</label>
+ <input type="text" placeholder="Spirent" name="name">
+ </div>
+ <div class="form-field">
+ <label>TLS CA Cert</label>
+ <input type="text" name="tls_ca_cert">
+ </div>
+ <div class="form-field">
+ <label>TLS Cert</label>
+ <input type="text" name="tls_cert">
+ </div>
+ <div class="form-field">
+ <label>TLS Key</label>
+ <input type="text" name="tls_key">
+ </div>
+ <div class="form-field">
+ <label>Email</label>
+ <input type="text" placeholder="sridhar.rao@spirent.com" name="email">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#ntpInfo">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="ntpInfo">
+ <div class="tab-part">
+ <h4> NTP Information </h4>
+ <hr>
+ <div class="devider-row" name="ntp_info">
+ <div class="form-field">
+ <label>Primary IP</label>
+ <input type="text" placeholder="a:b:c:d" name="primary_ip">
+ </div>
+ <div class="form-field">
+ <label>Primary Zone</label>
+ <input type="text" placeholder="Zone-A" name="primary_zone">
+ </div>
+ <div class="form-field">
+ <label>Secondary IP</label>
+ <input type="text" placeholder="a:b:c:d" name="secondary_ip">
+ </div>
+ <div class="form-field">
+ <label>Secondary Zone</label>
+ <input type="text" placeholder="Zone-B" name="secondary_zone">
+ </div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#dnsInfo">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="dnsInfo">
+ <div class="tab-part">
+ <h4> DNS Information</h4>
+ <hr>
+ <div class="devider-row" name="dns_info">
+ <div class="form-field">
+ <label>Name</label>
+ <input type="text" placeholder="Telco-A" name="name">
+ </div>
+ <div class="form-field">
+ <label>domain</label>
+ <input type="text" placeholder="Domain-A" name="domain">
+ </div>
+ <div class="form-field">
+ <label>Servers</label>
+ </div>
+ <div class="arr" name="servers">
+ <div class="form-field">
+ <label>IP Address</label>
+ <input type="text" placeholder="a:b:c:d" name="ip">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#proxyInfo">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="proxyInfo">
+ <div class="tab-part">
+ <h4> Proxy Information </h4>
+ <hr>
+ <div class="devider-row" name="proxy_info">
+ <div class="form-field">
+ <label>Proxy Address</label>
+ <input type="text" placeholder="a:b:c:d" name="address">
+ </div>
+ <div class="form-field">
+ <label>Port </label>
+ <input type="text" placeholder="8081" name="port">
+ </div>
+ <div class="form-field">
+ <label>Username</label>
+ <input type="text" placeholder="Sridhar" name="user">
+ </div>
+ <div class="form-field">
+ <label>Password</label>
+ <input type="text" placeholder="******" name="password">
+ </div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#ldapInfo">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="ldapInfo">
+ <div class="tab-part">
+ <h4> LDAP Information </h4>
+ <hr>
+ <div class="devider-row" name="ldap_info">
+ <div class="form-field">
+ <label>Base URL</label>
+ <input type="text" placeholder="a:b:c:d" name="base_url">
+ </div>
+ <div class="form-field">
+ <label>URL</label>
+ <input type="text" placeholder="Zone-A" name="url">
+ </div>
+ <div class="form-field">
+ <label>Authentication Path</label>
+ <input type="text" placeholder="a:b:c:d" name="auth_path">
+ </div>
+ <div class="form-field">
+ <label>Common Name</label>
+ <input type="text" placeholder="Zone-B" name="common_name">
+ </div>
+ <div class="form-field">
+ <label>Sub-Domain </label>
+ <input type="text" placeholder="a:b:c:d" name="subdomain">
+ </div>
+ <div class="form-field">
+ <label>Domain</label>
+ <input type="text" placeholder="Zone-B" name="domain">
+ </div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#vimInfo">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="vimInfo">
+ <div class="tab-part">
+ <h4> VIM Information </h4>
+ <hr>
+ <div class="devider-row" name="vim_info">
+ <div class="form-field">
+ <label> VIM Name </label>
+ <input type="text" placeholder=" " name="vim_name">
+ </div>
+ <div class="form-field">
+ <label>VIM ID </label>
+ <input type="text" placeholder=" " name="vim_id">
+ </div>
+ <div class="form-field">
+ <label> Vendor </label>
+ <input type="text" placeholder=" " name="vendor">
+ </div>
+ <div class="form-field">
+ <label> Version </label>
+ <input type="text" placeholder=" " name="version">
+ </div>
+ <div class="form-field">
+ <label> Installer </label>
+ <input type="text" placeholder=" " name="installer">
+ </div>
+ <div class="form-field">
+ <label> Deployment Style </label>
+ <input type="text" placeholder=" " name="deployment_style">
+ </div>
+ <div class="form-field">
+ <label> Container Orchestrator </label>
+ <input type="text" placeholder=" " name="container_orchestrator">
+ </div>
+ <div class="form-field">
+ <label> Storage Type </label>
+ <input type="text" placeholder=" " name="storage_type">
+ </div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#vimfInfo">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="vimfInfo">
+ <div class="tab-part">
+ <h4> VIM Functional Information </h4>
+ <hr>
+ <div class="devider-row" name="vim_functional_info">
+ <div class="form-field">
+ <label>Scheduler Filters </label>
+ <input type="text" placeholder=" " name="schedule_filters">
+ </div>
+ <div class="form-field">
+ <label> CPU Allocation Ratio </label>
+ <input type="text" placeholder=" " name="cpu_allocation_ratio">
+ </div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#deployInfo">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="deployInfo">
+ <div class="tab-part">
+ <h4> Deployment Information </h4>
+ <hr>
+ <div class="devider-row" name="deployment_info">
+ <div class="form-field">
+ <label> High Availability (Y/N) </label>
+ <input type="text" placeholder=" " name="high_availability">
+ </div>
+ <div class="form-field">
+ <label> Introspection </label>
+ <input type="text" placeholder=" " name="introspection">
+ </div>
+ <div class="form-field">
+ <label> Deployment Type</label>
+ <input type="text" placeholder=" " name="deployment_type">
+ </div>
+ <div class="form-field">
+ <label> Installer Used </label>
+ <input type="text" placeholder=" " name="installer_used">
+ </div>
+ <div class="form-field">
+ <label> Workload VNF (Y/N) </label>
+ <input type="text" placeholder=" " name="workload_vnf">
+ </div>
+ <div class="form-field">
+ <label> Workload CNF (Y/N)</label>
+ <input type="text" placeholder=" " name="workload_cnf">
+ </div>
+ <div class="form-field">
+ <label> SDN Controller (Y/N)</label>
+ <input type="text" placeholder=" " name="sdn_controller">
+ </div>
+ <div class="form-field">
+ <label> SDN Controller Version </label>
+ <input type="text" placeholder=" " name="sdn_controller_version">
+ </div>
+ <div class="form-field">
+ <label> SDN NB-APPs </label>
+ <input type="text" placeholder=" " name="sdn_controller_nbapps">
+ </div>
+ <div class="form-field">
+ <label> VNFM (Y/N) </label>
+ <input type="text" placeholder=" " name="vnfm">
+ </div>
+ <div class="form-field">
+ <label> VNFM Version </label>
+ <input type="text" placeholder=" " name="vnfm_version">
+ </div>
+ <div class="form-field">
+ <label> Dataplane Used</label>
+ <input type="text" placeholder=" " name="data_plane_used">
+ </div>
+ <div class="form-field">
+ <label> Ironic Deployment Interface</label>
+ <input type="text" placeholder=" " name="ironic_deploy_interface">
+ </div>
+ <div class="form-field">
+ <label> External Storage Cluster (Y/N) </label>
+ <input type="text" placeholder=" " name="external_storage_cluster">
+ </div>
+ <div class="form-field">
+ <label> Block Storage Connection Method</label>
+ <input type="text" placeholder=" " name="bl_str_connect_method">
+ </div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#jumpInfo">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="jumpInfo">
+ <div class="tab-part">
+ <h4> Jump Host Information </h4>
+ <hr>
+ <div class="devider-row" name="jumphost_info">
+ <div class="form-field">
+ <label> IP Address </label>
+ <input type="text" placeholder=" " name="ip">
+ </div>
+ <div class="form-field">
+ <label> Name of the Server </label>
+ <input type="text" placeholder=" " name="name">
+ </div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#rackInfo">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="rackInfo">
+ <div class="tab-part">
+ <h4> Rack Information </h4>
+ <hr>
+ <div class="devider-row">
+ <div class="arr" name="rack_info" >
+ <div class="form-field">
+ <label> Rack ID </label>
+ <input type="text" placeholder=" " name="rack_id">
+ </div>
+ <div class="form-field">
+ <label> Rack Details </label>
+ <hr>
+ <div class="form-field">
+ <label> Rack Name </label>
+ <input type="text" placeholder=" " name=" ">
+ </div>
+ <div class="form-field">
+ <label> Rack Description </label>
+ <input type="text" placeholder=" " name=" ">
+ </div>
+ <div class="form-field">
+ <label> Rack Availability Zone </label>
+ <input type="text" placeholder=" " name=" ">
+ </div>
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#stocluInfo">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="stocluInfo">
+ <div class="tab-part">
+ <h4> Storage Cluster Information </h4>
+ <hr>
+ <div class="devider-row" name="storage_cluster_info">
+ <div class="form-field">
+ <label> Name </label>
+ <input type="text" placeholder=" " name="name">
+ </div>
+ <div class="form-field">
+ <label> Cluster Type </label>
+ <input type="text" placeholder=" " name="cluster_type">
+ </div>
+ <div class="form-field">
+ <label> Cluster ID </label>
+ <input type="text" placeholder=" " name="cluster_id">
+ </div>
+ <div class="form-field">
+ <label> Authentication Type </label>
+ <input type="text" placeholder=" " name="auth_type">
+ </div>
+ <div class="form-field">
+ <label> Username </label>
+ <input type="text" placeholder=" " name="username">
+ </div>
+ <div class="form-field">
+ <label> Password </label>
+ <input type="text" placeholder=" " name="password">
+ </div>
+ <div class="form-field">
+ <label> Monitoring Host IPs </label>
+ </div>
+ <div class="arr" name="mon_host_ips">
+ <div class="form-field">
+ <label>IP Address</label>
+ <input type="text" placeholder="a:b:c:d" name="ips">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ <div class="form-field">
+ <label> Certification Location </label>
+ <input type="text" placeholder=" " name="certificate_location">
+ </div>
+ <div class="form-field">
+ <label> Client Key </label>
+ <input type="text" placeholder=" " name="client_key">
+ </div>
+ <div class="form-field">
+ <label> Public CIDR </label>
+ <input type="text" placeholder=" " name="public_cidr">
+ </div>
+ <div class="form-field">
+ <label> Cluster CIDR </label>
+ <input type="text" placeholder=" " name="cluster_cidr">
+ </div>
+ <div class="form-field">
+ <label> Pools </label>
+ </div>
+ <div class="arr" name="pools">
+ <div class="form-field">
+ <label> Key </label>
+ <input type="text" placeholder=" " name="key">
+ </div>
+ <div class="form-field">
+ <label>Value </label>
+ <input type="text" placeholder=" " name="value">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#biosProfiles">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="biosProfiles">
+ <div class="tab-part">
+ <h4> BIOS Profiles </h4>
+ <hr>
+ <div class="devider-row">
+ <div class="arr" name="bios_profile">
+ <div class="form-field">
+ <label>Profile Name </label>
+ <input type="text" placeholder=" " name="profile_name">
+ </div>
+ <div class="form-field">
+ <label> Bios Values </label>
+ <div class="form-field">
+ <label> Bios Version </label>
+ <input type="text" placeholder=" " name="bios_version">
+ </div>
+ <div class="form-field">
+ <label> Bios Mode </label>
+ <input type="text" placeholder=" " name="bios_mode">
+ </div>
+ <div class="form-field">
+ <label> Bootstrap Protocol </label>
+ <input type="text" placeholder=" " name="bootstrap_proto">
+ </div>
+ <div class="form-field">
+ <label> Hyperthreading Enabled (Y/N) </label>
+ <input type="text" placeholder=" " name="hyperthreading_enabled">
+ </div>
+ <div class="form-field">
+ <label> Flags - Power-Prefetcher combo </label>
+ <input type="text" placeholder=" " name="bios_setting">
+ </div>
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#procProfiles">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="procProfiles">
+ <div class="tab-part">
+ <h4> Processor Profiles </h4>
+ <hr>
+ <div class="devider-row">
+ <div class="arr" name="processor_profiles">
+ <div class="form-field">
+ <label> Profile Name </label>
+ <input type="text" placeholder=" " name="profile_name">
+ </div>
+ <div class="form-field">
+ <label> Profile Info </label>
+ <div class="form-field">
+ <label> Manufacturer </label>
+ <input type="text" placeholder=" " name="manufacturer">
+ </div>
+ <div class="form-field">
+ <label> Generation </label>
+ <input type="text" placeholder=" " name="generation">
+ </div>
+ <div class="form-field">
+ <label> Speed </label>
+ <input type="text" placeholder=" " name="speed">
+ </div>
+ <div class="form-field">
+ <label> Model </label>
+ <input type="text" placeholder=" " name="model">
+ </div>
+ <div class="form-field">
+ <label> Architecture </label>
+ <input type="text" placeholder=" " name="architecture">
+ </div>
+ <div class="form-field">
+ <label> CPU C-Flags </label>
+ <input type="text" placeholder=" " name="cpu_cflags">
+ </div>
+ <div class="form-field">
+ <label> Cache Size </label>
+ <input type="text" placeholder=" " name="cache_size">
+ </div>
+ <div class="form-field">
+ <label> NUMAs </label>
+ <div class="arr" name="numas">
+ <div class="form-field">
+ <label> NUMA Node-ID </label>
+ <input type="text" placeholder=" " name="node_id">
+ </div>
+ <div class="form-field">
+ <label> CPU SET </label>
+ <input type="text" placeholder=" " name="cpu_set">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#disksProfiles">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="disksProfiles">
+ <div class="tab-part">
+ <h4> Disk Profiles </h4>
+ <hr>
+ <div class="devider-row">
+ <div class="arr" name="disk_profiles">
+ <div class="form-field">
+ <label> Profile Name </label>
+ <input type="text" placeholder=" " name="profile_name">
+ </div>
+ <div class="form-field">
+ <label> Profile Info </label>
+ </div>
+ <div class="arr" name="profile_info">
+ <div class="form-field">
+ <label> Alias </label>
+ <input type="text" placeholder=" " name="alias">
+ </div>
+ <div class="form-field">
+ <label> Vendor </label>
+ <input type="text" placeholder=" " name="vendor">
+ </div>
+ <div class="form-field">
+ <label> Address </label>
+ <input type="text" placeholder=" " name="address">
+ </div>
+ <div class="form-field">
+ <label> Size </label>
+ <input type="text" placeholder=" " name="size">
+ </div>
+ <div class="form-field">
+ <label> Model </label>
+ <input type="text" placeholder=" " name="model">
+ </div>
+ <div class="form-field">
+ <label> Device Type </label>
+ <input type="text" placeholder=" " name="dev_type">
+ </div>
+ <div class="form-field">
+ <label> Rotation </label>
+ <input type="text" placeholder=" " name="rotation">
+ </div>
+ <div class="form-field">
+ <label> Bus </label>
+ <input type="text" placeholder=" " name="bus">
+ </div>
+ <div class="form-field">
+ <label> Logical Name </label>
+ <input type="text" placeholder=" " name="logical_name">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#nicProfiles">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="nicProfiles">
+ <div class="tab-part">
+ <h4> NIC Profiles </h4>
+ <hr>
+ <div class="devider-row">
+ <div class="arr" name = "nic_profiles">
+ <div class="form-field">
+ <label> Profile Name </label>
+ <input type="text" placeholder=" " name="profile_name">
+ </div>
+ <div class="form-field">
+ <label> Profile Info </label>
+ </div>
+ <div class="arr" name="profile_info">
+ <div class="form-field">
+ <label> Alias </label>
+ <input type="text" placeholder=" " name="alias">
+ </div>
+ <div class="form-field">
+ <label> Name </label>
+ <input type="text" placeholder=" " name="name">
+ </div>
+ <div class="form-field">
+ <label> Address </label>
+ <input type="text" placeholder=" " name="address">
+ </div>
+ <div class="form-field">
+ <label> Device Type </label>
+ <input type="text" placeholder=" " name="dev_type">
+ </div>
+ <div class="form-field">
+ <label> Bus </label>
+ <input type="text" placeholder=" " name="bus">
+ </div>
+ <div class="form-field">
+ <label> SRIOV Capable (Y/N) </label>
+ <input type="text" placeholder=" " name="sriov_capable">
+ </div>
+ <div class="form-field">
+ <label> Numa ID </label>
+ <input type="text" placeholder=" " name="numa_id">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#hwProfiles">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="hwProfiles">
+ <div class="tab-part">
+ <h4> Hardware Profiles </h4>
+ <hr>
+ <div class="devider-row">
+ <div class="arr">
+ <div class="form-field">
+ <label> Profile Name </label>
+ <input type="text" placeholder=" " name="name">
+ </div>
+ <div class="form-field">
+ <label> Profile Info </label>
+ <div class="form-field">
+ <label> Server Manufacturer </label>
+ <input type="text" placeholder=" " name="manufacturer">
+ </div>
+ <div class="form-field">
+ <label> Compute Server Model </label>
+ <input type="text" placeholder=" " name="model">
+ </div>
+ <div class="form-field">
+ <label> Compute Server Generation </label>
+ <input type="text" placeholder=" " name="generation">
+ </div>
+ <div class="form-field">
+ <label> Bios Profile</label>
+ <input type="text" placeholder=" " name="bios_profile">
+ </div>
+ <div class="form-field">
+ <label> Processor Profile </label>
+ <input type="text" placeholder=" " name="processor_profile">
+ </div>
+ <div class="form-field">
+ <label> Compute Server RAM size </label>
+ <input type="text" placeholder=" " name="memory">
+ </div>
+ <div class="form-field">
+ <label> Disks Profile </label>
+ <input type="text" placeholder=" " name="disks_profile">
+ </div>
+ <div class="form-field">
+ <label> NIC Profile</label>
+ <input type="text" placeholder=" " name="nics_profile">
+ </div>
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#storProfiles">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="storProfiles">
+ <div class="tab-part">
+ <h4> Storage Profiles </h4>
+ <hr>
+ <div class="devider-row">
+ <div class="arr" name="storage_profile">
+ <div class="form-field">
+ <label> Name </label>
+ <input type="text" placeholder=" " name="name">
+ </div>
+ <div class="form-field">
+ <label> Boot Disk </label>
+ <input type="text" placeholder=" " name="bootdrive">
+ </div>
+ <div class="form-field">
+ <label> Boot Disk Partitions </label>
+ </div>
+ <div class="arr" name="bd_partitions">
+ <div class="form-field">
+ <label> Name </label>
+ <input type="text" placeholder=" " name="name">
+ </div>
+ <div class="form-field">
+ <label> Size </label>
+ <input type="text" placeholder=" " name="size">
+ </div>
+ <div class="form-field">
+ <label> Bootable (Y/N) </label>
+ <input type="text" placeholder=" " name="bootable">
+ </div>
+ <div class="form-field" name="filesystem">
+ <label> Filesystem </label>
+ <div class="form-field">
+ <label> Mount Point </label>
+ <input type="text" placeholder=" " name="mountpoint">
+ </div>
+ <div class="form-field">
+ <label> Filesystem Type </label>
+ <input type="text" placeholder=" " name="fstype">
+ </div>
+ <div class="form-field">
+ <label> Mount Options </label>
+ <input type="text" placeholder=" " name="mount_options">
+ </div>
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ <div class="form-field">
+ <label> Data Devices </label>
+ </div>
+ <div class="arr" name="data_devices">
+ <div class="form-field">
+ <label> Name </label>
+ <input type="text" placeholder=" " name="name">
+ </div>
+ <div class="form-field">
+ <label> Partitions </label>
+ </div>
+ <div class="arr" name="partitions">
+ <div class="form-field">
+ <label> Name </label>
+ <input type="text" placeholder=" " name="name">
+ </div>
+ <div class="form-field">
+ <label> Size </label>
+ <input type="text" placeholder=" " name="size">
+ </div>
+ <div class="form-field">
+ <label> File System </label>
+ <div class="form-field">
+ <label> Mountpoint </label>
+ <input type="text" placeholder=" " name="mountpoint">
+ </div>
+ <div class="form-field">
+ <label> Filesystem Type </label>
+ <input type="text" placeholder=" " name="fstype">
+ </div>
+ <div class="form-field">
+ <label> Mount Options </label>
+ <input type="text" placeholder=" " name="mount_options">
+ </div>
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ <div class="form-field">
+ <label> Jounal Devices </label>
+ </div>
+ <div class="arr" name="journal_devices">
+ <div class="form-field">
+ <label> Name </label>
+ <input type="text" placeholder=" " name="name">
+ </div>
+ <div class="form-field">
+ <label> Mapped OSDs </label>
+ <input type="text" placeholder=" " name="mapped_osds">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#virNets">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="virNets">
+ <div class="tab-part">
+ <h4> Virtual Networks </h4>
+ <hr>
+ <div class="devider-row">
+ <div class="arr", name="networks">
+ <div class="form-field">
+ <label> Network Name </label>
+ <input type="text" placeholder=" " name="name">
+ </div>
+ <div class="form-field">
+ <label> Tunnel Type </label>
+ <input type="text" placeholder=" " name="tunnel_type">
+ </div>
+ <div class="form-field">
+ <label> Tunnel ID </label>
+ <input type="text" placeholder=" " name="tunnel_id">
+ </div>
+ <div class="form-field">
+ <label> Tunnel ID Range </label>
+ <input type="text" placeholder=" " name="tunnel_id_range">
+ </div>
+ <div class="form-field">
+ <label> MTU </label>
+ <input type="text" placeholder=" " name="mtu">
+ </div>
+ <div class="form-field">
+ <label> Route Domain </label>
+ <input type="text" placeholder=" " name="routedomain">
+ </div>
+ <div class="form-field">
+ <label> IPV4 CIDR </label>
+ <input type="text" placeholder=" " name="cidr">
+ </div>
+ <div class="form-field">
+ <label> IPV6 CIDR </label>
+ <input type="text" placeholder=" " name="v6_cidr">
+ </div>
+ <div class="form-field">
+ <label> DNS </label>
+ <input type="text" placeholder=" " name="dns">
+ </div>
+ <div class="form-field">
+ <label> VIPs </label>
+ </div>
+ <div class="arr" name="vips">
+ <div class="form-field">
+ <label> Name </label>
+ <input type="text" placeholder=" " name="name">
+ </div>
+ <div class="form-field">
+ <label> IP </label>
+ <input type="text" placeholder=" " name="ip">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ <div class="form-field">
+ <label> Routes </label>
+ </div>
+ <div class="arr">
+ <div class="form-field" name="routes">
+ <label> Subnet </label>
+ <input type="text" placeholder=" " name="subnet">
+ </div>
+ <div class="form-field">
+ <label> Gateway </label>
+ <input type="text" placeholder=" " name="gateway">
+ </div>
+ <div class="form-field">
+ <label> Metric </label>
+ <input type="text" placeholder=" " name="metric">
+ </div>
+ <div class="form-field">
+ <label> Route Domain </label>
+ <input type="text" placeholder=" " name="routedomain">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ <div class="form-field">
+ <label> IPV4 Allocation Pools </label>
+ </div>
+ <div class="arr" name="allocation_pools">
+ <div class="form-field">
+ <label> Type </label>
+ <input type="text" placeholder=" " name="type">
+ </div>
+ <div class="form-field">
+ <label> Start </label>
+ <input type="text" placeholder=" " name="start">
+ </div>
+ <div class="form-field">
+ <label> End </label>
+ <input type="text" placeholder=" " name="end">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ <div class="form-field">
+ <label> IPV6 Allocation Pools </label>
+ </div>
+ <div class="arr" name="v6_allocation_pools">
+ <div class="form-field">
+ <label> Type </label>
+ <input type="text" placeholder=" " name="type">
+ </div>
+ <div class="form-field">
+ <label> Start </label>
+ <input type="text" placeholder=" " name="start">
+ </div>
+ <div class="form-field">
+ <label> End </label>
+ <input type="text" placeholder=" " name="end">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#phyNets">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="phyNets">
+ <div class="tab-part">
+ <h4> Physical Networks </h4>
+ <hr>
+ <div class="devider-row">
+ <div class="arr", name="physical_networks">
+ <div class="form-field">
+ <label> Network Name </label>
+ <input type="text" placeholder=" " name="name">
+ </div>
+ <div class="form-field">
+ <label> CIDR </label>
+ <input type="text" placeholder=" " name="cidr">
+ </div>
+ <div class="form-field">
+ <label> Tunnel ID </label>
+ <input type="text" placeholder=" " name="tpe">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#netLinks">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="netLinks">
+ <div class="tab-part">
+ <h4> Network Links </h4>
+ <hr>
+ <div class="devider-row">
+ <div class="arr", name="network_link">
+ <div class="form-field">
+ <label> Link Name </label>
+ <input type="text" placeholder=" " name="name">
+ </div>
+ <div class="form-field">
+ <label> Link Type </label>
+ <input type="text" placeholder=" " name="type">
+ </div>
+ <div class="form-field">
+ <label> Bonding Mode </label>
+ <input type="text" placeholder=" " name="bonding_mode">
+ </div>
+ <div class="form-field">
+ <label> MTU </label>
+ <input type="text" placeholder=" " name="mtu">
+ </div>
+ <div class="form-field">
+ <label> Link Speed </label>
+ <input type="text" placeholder=" " name="linkspeed">
+ </div>
+ <div class="form-field">
+ <label> Trunking Mode </label>
+ <input type="text" placeholder=" " name="trunking_mode">
+ </div>
+ <div class="form-field">
+ <label> Trunking Default Network </label>
+ <input type="text" placeholder=" " name="trunking_default_nw">
+ </div>
+ <div class="form-field">
+ <label> VID </label>
+ <input type="text" placeholder=" " name="vid">
+ </div>
+ <div class="form-field">
+ <label> VF Count </label>
+ <input type="text" placeholder=" " name="vf_count">
+ </div>
+ <div class="form-field">
+ <label> Meta Data </label>
+ </div>
+ <div class="arr" name="metadata">
+ <div class="form-field">
+ <label> Key </label>
+ <input type="text" placeholder=" " name="key">
+ </div>
+ <div class="form-field">
+ <label> Value </label>
+ <input type="text" placeholder=" " name="value">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ <div class="form-field">
+ <label> Members </label>
+ </div>
+ <div class="arr" name="members">
+ <div class="form-field">
+ <label> Name </label>
+ <input type="text" placeholder=" " name="name">
+ </div>
+ <div class="form-field">
+ <label> Type </label>
+ <input type="text" placeholder=" " name="type">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#ifMap">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="ifMap">
+ <div class="tab-part">
+ <h4> Network-Interface Mapping </h4>
+ <hr>
+ <div class="devider-row">
+ <div class="arr", name="interface_mapping_profiles">
+ <div class="form-field">
+ <label> Profile Name </label>
+ <input type="text" placeholder=" " name="profile_name">
+ </div>
+ <div class="form-field">
+ <label> Profile Data </label>
+ </div>
+ <div class="arr" name="profile_data">
+ <div class="form-field">
+ <label> Interface Name </label>
+ <input type="text" placeholder=" " name="interface_name">
+ </div>
+ <div class="form-field">
+ <label> Interface Type </label>
+ <input type="text" placeholder=" " name="interface_type">
+ </div>
+ <div class="form-field">
+ <label> Use DHCP (Y/N) </label>
+ <input type="text" placeholder=" " name="use_dhcp">
+ </div>
+ <div class="form-field">
+ <label> Networks </label>
+ </div>
+ <div class="arr" name="networks">
+ <div class="form-field">
+ <label> Network Name </label>
+ <input type="text" placeholder=" " name="name">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#pfProfiles">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="pfProfiles">
+ <div class="tab-part">
+ <h4> Platform Profiles </h4>
+ <hr>
+ <div class="devider-row">
+ <div class="arr", name="platform_profiles">
+ <div class="form-field">
+ <label> Profile Name </label>
+ <input type="text" placeholder=" " name="profile_name">
+ </div>
+ <div class="form-field">
+ <label> Operating System </label>
+ <input type="text" placeholder=" " name="os">
+ </div>
+ <div class="form-field">
+ <label> Real-Time KVM (Y/N) </label>
+ <input type="text" placeholder=" " name="rt_kvm">
+ </div>
+ <div class="form-field">
+ <label> Kernel Version </label>
+ <input type="text" placeholder=" " name="kernel_version">
+ </div>
+ <div class="form-field">
+ <label> Kernel Parameters </label>
+ <input type="text" placeholder=" " name="kernel_parameters">
+ </div>
+ <div class="form-field">
+ <label> Isolated CPUs </label>
+ <input type="text" placeholder=" " name="isolated_cpus">
+ </div>
+ <div class="form-field">
+ <label> VNF Cores </label>
+ <input type="text" placeholder=" " name="vnf_cores">
+ </div>
+ <div class="form-field">
+ <label> OS reserved Cores </label>
+ <input type="text" placeholder=" " name="os_reserved_cores">
+ </div>
+ <div class="form-field">
+ <label> IOMMU (Y/N) </label>
+ <input type="text" placeholder=" " name="iommu">
+ </div>
+ <div class="form-field">
+ <label> vSwitch Daemon Cores </label>
+ <input type="text" placeholder=" " name="vswitch_daemon_cores">
+ </div>
+ <div class="form-field">
+ <label> vSwitch Type </label>
+ <input type="text" placeholder=" " name="vswitch_type">
+ </div>
+ <div class="form-field">
+ <label> vSwitch UIO Drivers </label>
+ <input type="text" placeholder=" " name="vswitch_uio_driver">
+ </div>
+ <div class="form-field">
+ <label> vSwitch Memory Channels </label>
+ <input type="text" placeholder=" " name="vswitch_mem_channels">
+ </div>
+ <div class="form-field">
+ <label> vSwitch Socket Memory </label>
+ <input type="text" placeholder=" " name="vswitch_socket_memory">
+ </div>
+ <div class="form-field">
+ <label> vSwitch PMD Cores </label>
+ <input type="text" placeholder=" " name="vswitch_pmd_cores">
+ </div>
+ <div class="form-field">
+ <label> vSwitch DPDK Lcores </label>
+ <input type="text" placeholder=" " name="vswitch_dpdk_lcores">
+ </div>
+ <div class="form-field">
+ <label> vSwitch DPDK Rxqs </label>
+ <input type="text" placeholder=" " name="vswitch_dpdk_rxqs">
+ </div>
+ <div class="form-field">
+ <label> vSwitch Options </label>
+ <input type="text" placeholder=" " name="vswitch_options">
+ </div>
+ <div class="form-field">
+ <label> Hugepage Count </label>
+ <input type="text" placeholder=" " name="hugepage_count">
+ </div>
+ <div class="form-field">
+ <label> Hugepages </label>
+ </div>
+ <div class="arr" name="hugepages">
+ <div class="form-field">
+ <label> Hugepage Count </label>
+ <input type="text" placeholder=" " name="hugepage_count">
+ </div>
+ <div class="form-field">
+ <label> Size </label>
+ <input type="text" placeholder=" " name="hugepage_size">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#ucOok">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="ucOok">
+ <div class="tab-part">
+ <h4> Undercloud: Openstack Over Kubernetes</h4>
+ <hr>
+ <div class="devider-row" name="undercloud_ook">
+ <div name = "dns">
+ <label> DNS </label>
+ <div class="form-field">
+ <label> Cluster Domain </label>
+ <input type="text" placeholder=" " name="cluster_domain">
+ </div>
+ <div class="form-field">
+ <label> Service IP </label>
+ <input type="text" placeholder=" " name="service_ip">
+ </div>
+ </div>
+ <div name = "etcd">
+ <label> ETCD Details </label>
+ <div class="form-field">
+ <label> Service IP </label>
+ <input type="text" placeholder=" " name="service_ip">
+ </div>
+ <div class="form-field">
+ <label> Container Port </label>
+ <input type="text" placeholder=" " name="container_port">
+ </div>
+ <div class="form-field">
+ <label> HA Proxy Port </label>
+ <input type="text" placeholder=" " name="haproxy_port">
+ </div>
+ </div>
+ <div>
+ <label> Masters </label>
+ </div>
+ <div class="arr" name = "masters">
+ <div class="form-field">
+ <label> Hostname </label>
+ <input type="text" placeholder=" " name="hostname">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ <div name = "networking">
+ <label> Networking </label>
+ <div class="form-field">
+ <label> Type </label>
+ <input type="text" placeholder=" " name="type">
+ </div>
+ <div class="form-field">
+ <label> Interface Used </label>
+ <input type="text" placeholder=" " name="interface_used">
+ </div>
+ <div class="form-field">
+ <label> API Server IP </label>
+ <input type="text" placeholder=" " name="api_service_ip">
+ </div>
+ <div class="form-field">
+ <label> Etcd Server IP </label>
+ <input type="text" placeholder=" " name="etcd_service_ip">
+ </div>
+ <div class="form-field">
+ <label> POD CIDR </label>
+ <input type="text" placeholder=" " name="pod_cidr">
+ </div>
+ <div class="form-field">
+ <label> Service CIDR </label>
+ <input type="text" placeholder=" " name="service_cidr">
+ </div>
+ <div class="form-field">
+ <label> API Server Port </label>
+ <input type="text" placeholder=" " name="apiserver_port">
+ </div>
+ <div class="form-field">
+ <label> HA Proxy Port </label>
+ <input type="text" placeholder=" " name="haproxy_port">
+ </div>
+ <div class="form-field">
+ <label> Service Node Port Range </label>
+ <input type="text" placeholder=" " name="servicenoe_port_range">
+ </div>
+ </div>
+ <div>
+ <label> Key-Value Pairs </label>
+ </div>
+ <div class="arr" name="kvps">
+ <div class="form-field">
+ <label> Key </label>
+ <input type="text" placeholder=" " name="key">
+ </div>
+ <div class="form-field">
+ <label> Value </label>
+ <input type="text" placeholder=" " name="value">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#ucOoo">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="ucOoo">
+ <div class="tab-part">
+ <h4> Undercloud: Openstack Over Openstack</h4>
+ <hr>
+ <div class="devider-row" name="undercloud_ooo">
+ <div class="form-field">
+ <label> Host Name </label>
+ <input type="text" placeholder=" " name="host_name">
+ </div>
+ <div class="form-field">
+ <label> Local IP </label>
+ <input type="text" placeholder=" " name="local_ip">
+ </div>
+ <div class="form-field">
+ <label> Public Host </label>
+ <input type="text" placeholder=" " name="public_host">
+ </div>
+ <div class="form-field">
+ <label> Admin Host </label>
+ <input type="text" placeholder=" " name="admin_host">
+ </div>
+ <div class="form-field">
+ <label> Local Interface </label>
+ <input type="text" placeholder=" " name="local_interface">
+ </div>
+ <div class="form-field">
+ <label> Inspection Interface </label>
+ <input type="text" placeholder=" " name="inspection_interface">
+ </div>
+ <div name="networking">
+ <label> Networking </label>
+ <div class="form-field">
+ <label> Control Plane CIDR </label>
+ <input type="text" placeholder=" " name="ctrlplane_cidr">
+ </div>
+ <div class="form-field">
+ <label> Control IP Start </label>
+ <input type="text" placeholder=" " name="ctrlplane_ip_start">
+ </div>
+ <div class="form-field">
+ <label> Control IP End </label>
+ <input type="text" placeholder=" " name="ctrlplane_ip_end">
+ </div>
+ <div class="form-field">
+ <label> Inspection Range </label>
+ <input type="text" placeholder=" " name="inspection_range">
+ </div>
+ <div class="form-field">
+ <label> Gateway </label>
+ <input type="text" placeholder=" " name="gateway">
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#ucSw">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="ucSw">
+ <div class="tab-part">
+ <h4> Undercloud Software </h4>
+ <hr>
+ <div class="devider-row">
+ <div class="arr", name="undercloud_sw_profiles">
+ <div class="form-field">
+ <label> Profile Name </label>
+ <input type="text" placeholder=" " name="profile_name">
+ </div>
+ <div class="form-field">
+ <label> Software list</label>
+ </div>
+ <div class="arr", name="sw_list">
+ <div class="form-field">
+ <label> Name </label>
+ <input type="text" placeholder=" " name="name">
+ </div>
+ <div class="form-field">
+ <label> Version </label>
+ <input type="text" placeholder=" " name="version">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#osSw">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="osSw">
+ <div class="tab-part">
+ <h4> Openstack Software </h4>
+ <hr>
+ <div class="devider-row">
+ <div class="arr", name="openstack_sw_profiles">
+ <div class="form-field">
+ <label> Profile Name </label>
+ <input type="text" placeholder=" " name="profile_name">
+ </div>
+ <div class="form-field">
+ <label> Software list</label>
+ </div>
+ <div class="arr", name="sw_list">
+ <div class="form-field">
+ <label> Name </label>
+ <input type="text" placeholder=" " name="name">
+ </div>
+ <div class="form-field">
+ <label> Version </label>
+ <input type="text" placeholder=" " name="version">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#infSw">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="infSw">
+ <div class="tab-part">
+ <h4> Infrastructure Software </h4>
+ <hr>
+ <div class="devider-row">
+ <div class="arr", name="infra_sw_profiles">
+ <div class="form-field">
+ <label> Profile Name </label>
+ <input type="text" placeholder=" " name="profile_name">
+ </div>
+ <div class="form-field">
+ <label> Software list</label>
+ </div>
+ <div class="arr", name="sw_list">
+ <div class="form-field">
+ <label> Name </label>
+ <input type="text" placeholder=" " name="name">
+ </div>
+ <div class="form-field">
+ <label> Version </label>
+ <input type="text" placeholder=" " name="version">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#swSet">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="swSet">
+ <div class="tab-part">
+ <h4> Software Set </h4>
+ <hr>
+ <div class="devider-row">
+ <div class="arr", name="software_set">
+ <label> Software Set </label>
+ <div class="form-field">
+ <label> Set Name </label>
+ <input type="text" placeholder=" " name="set_name ">
+ </div>
+ <div class="form-field">
+ <label> Undercloud Profile </label>
+ <input type="text" placeholder=" " name="undercloud_profile ">
+ </div>
+ <div class="form-field">
+ <label> Infra Software Profile </label>
+ <input type="text" placeholder=" " name="infrasw_profile ">
+ </div>
+ <div class="form-field">
+ <label> Openstack Software Profile </label>
+ <input type="text" placeholder=" " name="openstack_profile ">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#roles">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="roles">
+ <div class="tab-part">
+ <h4> Roles </h4>
+ <hr>
+ <div class="devider-row" name="roles">
+ <div class="arr">
+ <div class="form-field">
+ <label> Name </label>
+ <input type="text" placeholder=" " name="name">
+ </div>
+ <div class="form-field">
+ <label> Hostname Prefix </label>
+ <input type="text" placeholder=" " name="hostname_prefix">
+ </div>
+ <div class="form-field">
+ <label> Hostname Suffix </label>
+ <input type="text" placeholder=" " name="hostname_suffix">
+ </div>
+ <div class="form-field">
+ <label> Hostname Number Start </label>
+ <input type="text" placeholder=" " name="hostname_number_start">
+ </div>
+ <div class="form-field">
+ <label> Count </label>
+ <input type="text" placeholder=" " name="count">
+ </div>
+ <div class="form-field">
+ <label> Hardware Profile </label>
+ <input type="text" placeholder=" " name="hardware_profile">
+ </div>
+ <div class="form-field">
+ <label> Interface Mapping </label>
+ <input type="text" placeholder=" " name="interface_mapping">
+ </div>
+ <div class="form-field">
+ <label> Storage Mapping </label>
+ <input type="text" placeholder=" " name="storage_mapping">
+ </div>
+ <div class="form-field">
+ <label> Platform Profile </label>
+ <input type="text" placeholder=" " name="platform_profile">
+ </div>
+ <div class="form-field">
+ <label> Software Set </label>
+ <input type="text" placeholder=" " name="sw_set_name">
+ </div>
+ <div>
+ <label> Metadata </label>
+ </div>
+ <div class="arr" name="metadata">
+ <div>
+ <div class="form-field">
+ <label> On Count Condition </label>
+ <input type="text" placeholder=" " name="on_count_condition">
+ </div>
+ <div class="form-field">
+ <label> Count </label>
+ <input type="text" placeholder=" " name="count">
+ </div>
+ <div class="form-field">
+ <label> Key </label>
+ <input type="text" placeholder=" " name="key">
+ </div>
+ <div class="form-field">
+ <label> Value </label>
+ <input type="text" placeholder=" " name="value">
+ </div>
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#extraPo">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="extraPo">
+ <div class="tab-part">
+ <h4> Extrapolation Information </h4>
+ <hr>
+ <div class="devider-row" name="extrapolation_info">
+ <div class="form-field">
+ <label>ILO Username </label>
+ <input type="text" placeholder=" " name="ilo_user">
+ </div>
+ <div class="form-field">
+ <label> ILO Password </label>
+ <input type="text" placeholder=" " name="ilo_password">
+ </div>
+ <div class="form-field">
+ <label> IP Increment </label>
+ <input type="text" placeholder=" " name="ip_increment ">
+ </div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <a data-toggle="formtab" href="#hostAg">Next</a>
+ </div>
+ </div>
+ <div class="tabs-panels" id="hostAg">
+ <div class="tab-part">
+ <h4> Host Aggregates </h4>
+ <hr>
+ <div class="devider-row">
+ <div class="arr">
+ <div class="form-field">
+ <label> Aggregate Name </label>
+ <input type="text" placeholder=" " name="aggregate_name">
+ </div>
+ <div class="form-field">
+ <label> Properties </label>
+ </div>
+ <div class="arr" name="properties">
+ <div class="form-field">
+ <label> Key </label>
+ <input type="text" placeholder=" " name="key">
+ </div>
+ <div class="form-field">
+ <label> Value </label>
+ <input type="text" placeholder=" " name="value">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ <div class="form-field">
+ <label> Servers </label>
+ </div>
+ <div class="arr" name="servers">
+ <div class="form-field">
+ <label> Identifier </label>
+ <input type="text" placeholder=" " name="identifier">
+ </div>
+ <div class="form-field">
+ <label> ILO IP </label>
+ <input type="text" placeholder=" " name="ilo_ip">
+ </div>
+ <div class="form-field">
+ <label> Host Name </label>
+ <input type="text" placeholder=" " name="hostname">
+ </div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ <div class="add-button" onclick="duplicate(this)"></div>
+ </div>
+ </div>
+ <div class="next-btn">
+ <button type="submit" onclick="createjson()">Submit</button>
+ </div>
+ <div class="next-btn">
+ <label> Click Submit before Download. </label>
+ <hr>
+ <label> Download filename: sitepdf.json </label>
+ <a id="download_link" download="sitepdf.json" href="" > Download JSON </a>
+ </div>
+ </div>
+ <div class="note">
+ <p>*Please fill values correctly. No field is mandatory.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="form-footer">
+ <p>This is Part of OPNFV-CIRV SDV Project</p>
+ </div>
+
+</div>
+
+<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
+
+<script id="rendered-js">
+$('a[data-toggle="formtab"]').click(function () {
+ var targetId = $(this).attr('href');
+
+ $('.tabs-panels').removeClass('active');
+ $('a[data-toggle="formtab"]').removeClass('active');
+
+ $(targetId).addClass('active');
+ $('a[href="' + targetId + '"]').addClass('active');
+
+
+
+});
+//# sourceURL=pen.js
+</script>
+
+</body>
+</html>
diff --git a/sdv/pdf/site/scripts/actions.js b/sdv/pdf/site/scripts/actions.js
new file mode 100644
index 0000000..464c57f
--- /dev/null
+++ b/sdv/pdf/site/scripts/actions.js
@@ -0,0 +1,24 @@
+
+// expand-arrow button
+function toggleClass(element, classname){
+ element.classList.toggle(classname)
+}
+
+// Add button
+function duplicate(button){
+ if (button.previousElementSibling.hasAttribute('name') &&
+ button.previousElementSibling.getAttribute('name') != null)
+ {
+ newdiv = button.previousElementSibling.cloneNode(true);
+ if (!newdiv.lastElementChild.classList.contains('del-button')){
+ del ='<div class="del-button" onclick="remove(this)"></div>'
+ newdiv.innerHTML += del;
+ }
+ button.parentNode.insertBefore(newdiv, button)
+ }
+}
+
+// Delete Button
+function remove(button){
+ button.parentNode.parentNode.removeChild(button.parentNode);
+} \ No newline at end of file
diff --git a/sdv/pdf/site/scripts/createfile.js b/sdv/pdf/site/scripts/createfile.js
new file mode 100644
index 0000000..2e13f2f
--- /dev/null
+++ b/sdv/pdf/site/scripts/createfile.js
@@ -0,0 +1,13 @@
+/**
+ * This function creates a Json file to support client-side file download
+ */
+
+function createjson() {
+ element=document.getElementById('pdfform')
+ data = objectifyDiv(element);
+ jsonstr = JSON.stringify(data);
+ var data = new Blob([jsonstr], {type: 'application/json'});
+ var url = window.URL.createObjectURL(data);
+ document.getElementById('download_link').href = url;
+ console.log(jsonstr);
+}
diff --git a/sdv/pdf/site/scripts/mergeDeep.js b/sdv/pdf/site/scripts/mergeDeep.js
new file mode 100644
index 0000000..ebede4e
--- /dev/null
+++ b/sdv/pdf/site/scripts/mergeDeep.js
@@ -0,0 +1,31 @@
+
+/**
+* Performs a deep merge of objects and returns new object. Does not modify
+* objects (immutable) and merges arrays via concatenation.
+*
+* @param {...object} objects - Objects to merge
+* @returns {object} New object with merged key/values
+*/
+function mergeDeep(...objects) {
+ const isObject = obj => obj && typeof obj === 'object';
+
+ return objects.reduce((prev, obj) => {
+ Object.keys(obj).forEach(key => {
+ const pVal = prev[key];
+ const oVal = obj[key];
+
+ if (Array.isArray(pVal) && Array.isArray(oVal)) {
+ prev[key] = pVal.concat(...oVal);
+ }
+ else if (isObject(pVal) && isObject(oVal)) {
+ prev[key] = mergeDeep(pVal, oVal);
+ }
+ else {
+ prev[key] = oVal;
+ }
+ });
+
+ return prev;
+ }, {});
+}
+
diff --git a/sdv/pdf/site/scripts/readFromHTML.js b/sdv/pdf/site/scripts/readFromHTML.js
new file mode 100644
index 0000000..3255e79
--- /dev/null
+++ b/sdv/pdf/site/scripts/readFromHTML.js
@@ -0,0 +1,57 @@
+
+/**
+* Reads HTML contents into javascript object
+*
+*
+* @param {element} element to read, can be input or div element
+* @returns {object} New object with values read
+*/
+function objectifyDiv(element){
+ var obj = {};
+ var el = element.childNodes;
+ for(var i in el){
+
+ if(el[i] instanceof HTMLInputElement && el[i].hasAttribute('name')) {
+
+ if(el[i].type == 'text')
+ obj = mergeDeep(obj, objectify(el[i].name, el[i].value));
+
+ }
+ if(el[i] instanceof HTMLSelectElement && el[i].hasAttribute('name')){
+ obj = mergeDeep(obj, objectify(el[i].name, el[i].value));
+ }
+ if(el[i] instanceof HTMLDivElement){
+
+ if(el[i].classList.contains('arr')){
+ var key = el[i].getAttribute('name');
+ var value = objectifyDiv(el[i]);
+ if(obj[key] == undefined)
+ obj[key] =[];
+ obj[key].push(value[key]);
+ }
+ else
+ obj = mergeDeep(obj, objectifyDiv(el[i]));
+
+ }
+ }
+
+ if(element.hasAttribute('name')){
+ var newobj = {};
+ newobj[element.getAttribute('name')] = obj;
+ return newobj;
+ }
+ return obj;
+}
+
+
+
+function objectify(key, value){
+ var obj = {};
+ var keys = key.split('.');
+ for(var i = keys.length-1; i >= 0; i--){
+ obj[keys[i]] = value;
+ value = obj;
+ obj = {};
+ }
+ return value;
+}
diff --git a/sdv/pdf/site/scripts/writeToHTML.js b/sdv/pdf/site/scripts/writeToHTML.js
new file mode 100644
index 0000000..8eb8c29
--- /dev/null
+++ b/sdv/pdf/site/scripts/writeToHTML.js
@@ -0,0 +1,117 @@
+
+/**
+* Processes target HTML element and fill with values passed in
+* javascript object
+*
+* @param {element} element to update with values
+* @param {obj} Object from which values will be read
+*/
+ function writeToHTML(element, obj){
+
+ var el = element.childNodes;
+ for(var i in el)
+ {
+
+ if(el[i] instanceof HTMLInputElement && el[i].hasAttribute('name')){
+
+ if(el[i].type == 'text')
+ el[i].value = getValue(obj, el[i].name);
+
+ }
+ if(el[i] instanceof HTMLSelectElement && el[i].hasAttribute('name')){
+
+ var option = getValue(obj, el[i].name);
+ var defaultValue = el[i].value;
+ el[i].value = option;
+ if ( el[i].value != option){
+ el[i].focus();
+ alert(option + " is an invalid value! Setting to default");
+ el[i].value = defaultValue;
+ }
+
+ }
+ if(el[i] instanceof HTMLDivElement){
+
+ if(el[i].hasAttribute('name'))
+ {
+ if(el[i].classList.contains('arr')){
+
+ name = el[i].getAttribute('name');
+ values = getValue(obj, name);
+
+ // Sync number of Arr div with name inside element with number of values
+ syncArr(element, name, values.length);
+
+ // Update value inside all divs
+ var i = 0;
+ for(var div of element.getElementsByClassName('arr'))
+ if(div.getAttribute("name") == name)
+ writeToHTML(div , values[i++]);
+
+ } //else-if single div
+ else
+ writeToHTML(el[i], getValue(obj, el[i].getAttribute('name')));
+
+ }//else-if blank div without attribute name, then simply pass values to next child
+ else
+ writeToHTML(el[i], obj);
+ }
+
+ }
+ }
+
+ // Reads value from obj with string 'key1.key2.key3' convention
+ function getValue(obj, str) {
+ str = str.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
+ str = str.replace(/^\./, ''); // strip a leading dot
+ var a = str.split('.');
+ for (var i = 0; i < a.length; ++i) {
+ var key = a[i];
+ if (key in obj) {
+ obj = obj[key];
+ } else {
+ alert('Invalid PDF file! Key '+key+ ' not Found');
+ return "";
+ }
+ }
+ return obj;
+ }
+
+function syncArr(el, name, length){
+
+ // count number of arr-div with name present inside el
+ var count = 0;
+ var cp = null;
+ for(var div of el.getElementsByClassName('arr')){
+ if(div.getAttribute("name") == name){
+ count++;
+ cp = div;
+ }
+ }
+
+ // balance loop
+ while(count - length){
+ if((count - length) < 0)
+ { // add more div
+ newdiv = cp.cloneNode(true);
+ if (!newdiv.lastElementChild.classList.contains('del-button')){
+ del ='<div class="del-button" onclick="remove(this)"></div>'
+ newdiv.innerHTML += del;
+ }
+ cp.after(newdiv);
+ count++;
+ }
+ else
+ { // remove div
+ for(var div of el.getElementsByClassName('arr'))
+ if(div.getAttribute("name") == name)
+ if (div.lastElementChild.classList.contains('del-button')){
+ div.parentNode.removeChild(div);
+ count--;
+ if((count - length)==0)
+ break;
+ }
+ }
+ }
+
+}
diff --git a/sdv/pdf/site/style/array.css b/sdv/pdf/site/style/array.css
new file mode 100644
index 0000000..45a53fc
--- /dev/null
+++ b/sdv/pdf/site/style/array.css
@@ -0,0 +1,55 @@
+
+@keyframes popup {
+ 0%{
+ transform: scale(0.5);
+ }
+ 90%{
+ transform: scale(1.1);
+ }
+ 100%{
+ transform: scale(1.0);
+ }
+}
+
+.arr{
+ border-radius: 6px;
+ border-style: dashed;
+ border-color: #c9c9c9;
+ border-width: 2px;
+ display: inline-block;
+ padding-right: 3em;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ position: relative;
+ animation: popup 0.2s ease;
+}
+
+
+.add-button{
+ background-image: url("../assets/plus-circle-solid.svg");
+ opacity: 0.7;
+ width: 2em;
+ height: 2em;
+ display: inline-block;
+ left: 0;
+}
+.add-button:hover{
+ opacity: 1
+}
+
+
+
+.del-button{
+ background-image: url("../assets/trash-alt-regular.svg");
+ background-repeat: no-repeat;
+ opacity: 0.7;
+ width: 2em;
+ height: 2em;
+ position: absolute;
+ right: 0.5em;
+ bottom: 0.5em;
+}
+.del-button:hover{
+ opacity: 1
+}
+
diff --git a/sdv/pdf/site/style/multitab.css b/sdv/pdf/site/style/multitab.css
new file mode 100644
index 0000000..8460d8b
--- /dev/null
+++ b/sdv/pdf/site/style/multitab.css
@@ -0,0 +1,109 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
+*{ box-sizing: border-box;}
+button:active, button:focus{ outline: none; box-shadow: none;}
+body{ background: #eeffad;; font-family: 'Roboto', sans-serif;}
+.multitab-form-area { max-width: 750px; margin: 0 auto; background:#eee; padding: 20px}
+.form-field input:focus, .form-field input:active, .form-field select:focus, .form-field select:active, .form-field textarea:active, .form-field textarea:focus {outline: 1px solid #8aa71c;}
+.tab-links-area {width: 240px; display: inline-block; vertical-align: top; padding-right: 20px;}
+.tab-form-area { width: calc(100% - 245px); display: inline-block; background: #fff; vertical-align: top; padding: 16px; border-radius: 5px;}
+.tab-links-area p {margin: 0; font-size: 14px; color: #999;}
+.tab-links-area h1 { margin: 0; font-size: 24px;}
+.tab-part h4 {font-size: 24px;margin: 0;}
+.multitab-form-area hr {border: 0; height: 1px; width: 100%; background: rgba(0,0,0,0.3);}
+.tab-links-area ul li a {text-decoration: none;font-size: 14px;padding: 10px 15px;display: block;color: #333; position: relative;}
+.tab-links-area ul li a:before {content: '';height: 0%;width: 3px;background: #8aa71c;position: absolute;left: -2px;top: 0;bottom: 0;margin: auto;transition: 0.3s ease;}
+.tab-links-area ul li a.active:before{ height: 100%;}
+.tab-links-area ul li {display: block; border-left: 1px solid #eee;}
+.tab-links-area ul {list-style: none;padding: 0; margin: 20px 0 0;}
+.form-field input, .form-field select {width: 100%; font-family: 'Roboto', sans-serif; height: 35px; padding-left: 10px; border: 1px solid #ccc;}
+.form-field select {padding: 0 0 0 2px;}
+.form-field label { font-size: 14px; display: block; padding:10px 0;}
+.half-2 {width: 50%; padding: 0 10px; float: left;}
+.devider-row:after {content: '';display: table;clear: both;}
+.devider-row {margin: 0 -10px;clear: both;}
+.half-3 {width: calc(100%/3); float: left; padding: 0 10px;}
+.next-btn button, .next-btn a {background: #8aa71c;cursor: pointer;border: 1px solid #8aa71c;transition: 0.3s ease;color: #fff;height: 35px;width: 90px;border-radius: 100px;margin: 20px 0 10px auto;display: block;text-transform: uppercase;text-align: center;line-height: 35px;text-decoration: none;font-size: 14px;}
+.next-btn button:hover, .next-btn a:hover {background: transparent; color: #8aa71c;}
+.tabs-panels.active { display: block;}
+.tabs-panels { display: none; animation: fadeIn 0.3s ease;}
+.full {padding: 0 10px; width: 100%;}
+.form-field textarea {width: 100%;height: 100px;padding: 10px;font-size: 14px;border: 1px solid #ccc;font-family: 'Roboto', sans-serif;}
+.checkbox label:after {content: '';position: absolute;border-style: solid;border-color: #333;height: 8px;width: 5px;border-width: 0 3px 3px 0;left: 5px;z-index: 2;transform: rotate(35deg);top: 4px; display: none;}
+.checkbox label:before {content: '';height: 20px;width: 21px;background: #fff;position: absolute;border: 1px solid #8aa71c;left: -2px;top: 0;border-radius: 3px;}
+.checkbox {position: relative;margin: 10px 0;}
+.checkbox label {display: inline-block;vertical-align: middle;padding: 0;}
+.checkbox input[type="checkbox"] {width: 20px;height: 20px;display: inline-block;vertical-align: middle;margin: 0;position: relative;z-index: 3;opacity: 0;}
+.radio label:after { content: ''; display: none; height: 15px; width: 15px; position: absolute; background: #8aa71c; border-radius: 100px; left: 2px; top: 2px; z-index: 1;}
+.radio label:before {content: ''; height: 21px; width: 21px; background: #fff; border: 1px solid #8aa71c; position: absolute; left: -2px; top: -2px; border-radius: 100px;}
+.radio input[type="radio"] { height: 20px; width: 20px; display: inline-block; margin: 0; position: relative; z-index: 3; opacity: 0; vertical-align: middle;}
+.radio label {padding: 0; display: inline-block; margin: 0; vertical-align: middle;}
+.radio { position: relative; margin: 10px 0;}
+.radio input:checked + label:after, .checkbox input:checked + label:after{ display: block;}
+.note p { margin: 0; font-size: 12px; color: #999;}
+.form-area {max-width: 80%; margin: 0 auto; background: #eee; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.25)}
+.form-footer p {margin: 0; font-size: 12px;}
+.form-footer {padding: 20px; text-align: center; color: #676767;}
+.form-header {background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,0.1); margin-bottom: 20px;}
+.logo-area {padding: 0 10%;}
+.logo-area h1 a {color: #000; text-decoration: none; outline: none;}
+.logo-area h1 {margin: 0; font-size: 24px;}
+.need-help a i {background: #333; color: #fff; font-style: normal; font-size: 10px; height: 13px; width: 13px; display: inline-block; text-align: center; border-radius: 100px;}
+.need-help a {font-size: 12px; color: #333; text-decoration: none;}
+.need-help {text-align: right; padding: 0 10%;}
+.top-header {padding: 15px 0; border-bottom: 2px dashed #ccc;}
+.status p {font-size: 12px; color: #676767}
+.status h5, .status p { margin: 0;}
+.bars label { text-align: center; display: block; font-size: 14px;}
+.bars {position: relative;}
+.blank-bar {width: 100%; background: #ccc; height: 3px; border-radius: 100px;}
+.full-bar { width: 50%; background: #8aa71c; height: 3px; position: relative; bottom: -3px;}
+.bars span { height: 8px; width: 8px; display: inline-block; position: absolute; background: #ccc; border-radius: 100px; z-index: 1;}
+.bars span:nth-of-type(2) {left: 15%;}
+.bars span:nth-of-type(3) {left: 50%;}
+.bars span:nth-of-type(4) {left: 85%;}
+.bars span:nth-of-type(5) {left: 100%;}
+.bars span.active{background: #8aa71c;}
+.bottom-header {padding: 15px 10%;}
+.status {padding-left: 10%;}
+/*keyframes*/
+@-webkit-keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+.fadeIn {
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+}
+
+@media(max-width:750px){
+ .half-2 {width: 100%;}
+ .top-header .half-2 {width: 50%;}
+ .logo-area {padding: 0 5%; text-align: left;}
+ .status { padding-top: 20px; padding-left: 0;}
+}
+
+@media(max-width:570px){
+ .tab-links-area {width: 100%;display: block; margin-bottom: 20px;}
+ .tab-form-area{ width: 100%;}
+ .bottom-header {padding: 15px 5%;}
+}
+
+@media(max-width:420px){
+ .form-area {max-width: 90%;}
+}