...
HTML |
---|
<html> <body> <button style="background-color: #008CBA; color: white; border: 2px solid black; width: 100%; font-size: 24px;" id="generate">Generate ID</button> <form id="req"> <div id="sections"> <div class="section"> <fieldset> <p> <label for="id">Requirement ID:</label> <input style="width: 100%; margin: 8px 0; box-sizing: border-box; padding: 12px 20px;" name="id" id="id" value="" type="text" readonly class="required" /> </p> <p> <label for="target">Target:</label> <select onchange="buildReq(target)" style="width: 100%; margin: 8px 0; box-sizing: border-box; padding: 12px 20px;" name="target" id="target" class="required"> <option value="" hidden>Select Target</option> <option value="VNF">VNF</option> <option value="VNFC">VNFC</option> <option value="VNF PROVIDER">VNF PROVIDER</option> <option value="VNF HEAT ORCHESTRATION TEMPLATE">VNF HEAT ORCHESTRATION TEMPLATE</option> <option value="VNF PACKAGE">VNF PACKAGE</option> <option value="PNF">PNF</option> <option value="VNF or PNF">VNF or PNF</option> </select> </p> <p> <label for="keyword">Keyword:</label> <select onchange="buildReq(keyword)" style="width: 100%; margin: 8px 0; box-sizing: border-box; padding: 12px 20px;" name="keyword" id="keyword" class="required"> <option value="" hidden>Select Keyword</option> <option value="**MUST**">MUST</option> <option value="**MUST NOT**">MUST NOT</option> <option value="**SHOULD**">SHOULD</option> <option value="**SHOULD NOT**">SHOULD NOT</option> <option value="**MAY**">MAY</option> </select> </p> <p> <label for="introduced">Introduced:</label> <select style="width: 100%; margin: 8px 0; box-sizing: border-box; padding: 12px 20px;" name="introduced"> <option value="amsterdam">amsterdam</option> <option value="beijing">beijing</option> <option value="casablanca">casablanca</option> <option value="dublin" selected="selected">dublin</option> <option value="el alto">el alto</option> </select> </p> <p> <label for="impacts">Impacts*:</label> <select style="width: 100%; margin: 8px 0; box-sizing: border-box; padding: 12px 20px;" name="impacts" size="10" multiple> <option value="AAI">AAI</option> <option value="AAF">AAF</option> <option value="APPC">APPC</option> <option value="CLAMP">CLAMP</option> <option value="CCSDK">CCSDK</option> <option value="DCAE">DCAE</option> <option value="Documentation">Documentation</option> <option value="DCAE">DCAE</option> <option value="External API">External API</option> <option value="Holmes">Holmes</option> <option value="Integration">Integration</option> <option value="Logging">Logging</option> <option value="Micro Bus">Micro Bus</option> <option value="Modeling">Modeling</option> <option value="Multi VIM">Multi VIM</option> <option value="Music">Music</option> <option value="CLI">CLI</option> <option value="OOM">OOM</option> <option value="OOF">OOF</option> <option value="Usecase UI">Usecase UI</option> <option value="Policy">Policy</option> <option value="Portal">Portal</option> <option value="SDNC">SDNC</option> <option value="SDC">SDC</option> <option value="SO">SO</option> <option value="VFC">VFC</option> <option value="VID">VID</option> <option value="VNFSDK">VNFSDK</option> <option value="VNFRQTS">VNFRQTS</option> <option value="VVP">VVP</option> </select> </p> <p> <b>*Hold down the Ctrl (windows) / Command (Mac) button to select multiple options for impacts.</b> </p> <p> <label for="validation_mode">Validation Mode:</label> <select style="width: 100%; margin: 8px 0; box-sizing: border-box; padding: 12px 20px;" name="validation_mode"> <option value="" selected disabled hidden>Select Validation Mode</option> <option value="static">static</option> <option value="none">none</option> </select> </p> <p> <label for="requirementText">Requirement Text:*</label> <textarea style="width: 100%; margin: 8px 0; box-sizing: border-box; padding: 12px 20px;" name="requirementText" id="requirementText" rows="10" cols="30" class="required" value="" type="text"></textarea> </p> <p> <b>*Make sure to add keyword entered in KEYWORD field in the requirement in CAPS.</b> </p> </fieldset> </div> </div> </form> <button style="background-color: #008CBA; color: white; border: 2px solid black; width: 100%; font-size: 24px;" onclick="formDataToObject(document.getElementById('req'))">Convert to RST</button> <textarea style="width: 100%; margin: 8px 0; box-sizing: border-box; padding: 12px 20px;" rows="10" cols="30" id="formatted" readonly> Formatted RST will Show here. </textarea> <script> //define template var template = $('#sections .section:first').clone(); //define counter var sectionsCount = 1; var url = "https://wiki.onap.org/download/attachments/60887371/needs.json?api=v2" $('body').on('click', '#generate', function(e) { myFunction(); }); function myFunction() { get(url).then(JSON.parse).then(function(data) { console.log("It worked!", data); return data; }).catch(function(err) { // Instead, this happens: console.log("It failed!", err); }).then(function(data) { var parsedData = parseIDs(data); var finalIDs = createIDs(1, parsedData); console.log(finalIDs); addSection(finalIDs); }) } function get(url) { // Return a new promise. return new Promise(function(resolve, reject) { // Do the usual XHR stuff var req = new XMLHttpRequest(); req.open('GET', url); req.onload = function() { // This is called even on 404 etc // so check the status if (req.status == 200) { // Resolve the promise with the response text resolve(req.response); } else { // Otherwise reject with the status text // which will hopefully be a meaningful error reject(Error(req.statusText)); } }; // Handle network errors req.onerror = function() { reject(Error("Network Error")); }; // Make the request req.send(); }); } function parseIDs(jsonText) { var result = new Set(); var version = jsonText.current_version; result.add(Object.keys(jsonText["versions"][version]["needs"])); console.log(result); return result; } function createIDs(numberOfIDs, parsedData) { var addedIDs = []; for (x = 0; x < numberOfIDs; x++) { var new_id = ""; do { new_id = (Math.floor(Math.random() * 999999)); if (new_id < 100000) { new_id = ('000000' + new_id).slice(-6); } new_id = ("R-" + new_id); } while (parsedData.has(new_id)); addedIDs[x] = new_id; } return addedIDs; } function addSection(finalIDs) { document.getElementById('id').value = finalIDs; } function formDataToObject(elForm) { //if (!elForm instanceof Element) return; var fields = elForm.querySelectorAll('input, select, textarea'), o = {}; for (var i = 0, imax = fields.length; i < imax; ++i) { var field = fields[i], sKey = field.name || field.id; if (field.type === 'button' || field.type === 'image' || field.type === 'submit' || !sKey) continue; switch (field.type) { case 'checkbox': o[sKey] = +field.checked; break; case 'radio': if (o[sKey] === undefined) o[sKey] = ''; if (field.checked) o[sKey] = field.value; break; case 'select-multiple': var a = []; for (var j = 0, jmax = field.options.length; j < jmax; ++j) { if (field.options[j].selected) a.push(field.options[j].value); } o[sKey] = a; break; default: o[sKey] = field.value; } } formcheck(); buildRST(o); return o; } function buildRST(o) { var rst = "..req::\n\n"; var arrayOfLines = $('#requirementText').val().split('\n'); for (y in o) { if (y == "requirementText") { for (z in arrayOfLines) { rst += "\n " + arrayOfLines[z]; } } else { rst += " :" + y + ": " + o[y] + "\n"; } } document.getElementById("formatted").innerHTML = rst; } function formcheck() { var l = $(".required").length; var result = []; for (i = 0; i < l; i++) { //Push each element to the array if ($('.required').eq(i).val() == "") { result.push($('.required')[i].name); } } console.log(result); if (result.length != null0) { alert("Please enter a value in: " + result); } } function buildReq(fieldClicked) { var addedTarget, addedKeword; var text = $('#requirementText'); switch (fieldClicked.id) { case 'target': addedTarget = 'The ' + fieldClicked.value + ' '; text.val(text.val() + addedTarget); break; case 'keyword': text.val(text.val() + fieldClicked.value); break; } } </script> </body> </html> |