...
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/> </p> <p> <label for="keyword">Keyword:</label> <select style="width: 100%; margin: 8px 0; box-sizing: border-box; padding: 12px 20px;" name="keyword" id ="keyword"> <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="target">Target:</label> <select style="width: 100%; margin: 8px 0; box-sizing: border-box; padding: 12px 20px;" name="target"> <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="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="ExternalAPI">External API</option> <option value="Holmes">Holmes</option> <option value="Integration">Integration</option> <option value="Logging">Logging</option> <option value="MicroBus">Micro Bus</option> <option value="Modeling">Modeling</option> <option value="MultiVIM">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="UsecaseUI">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="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" value="" type="text">Enter Requirement text.</textarea> </p> <p> <b>*Make sure to surround your keyword with '**', for example, **MUST**. 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="demo" 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(); }); $('body').on('click', '#convert', function(e) { convert(); }); 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; } } buildRST(o); return o; } function buildRST(o) { var rst = "..req::\n\n"; var arrayOfLines = $('#requirementText').val().split('\n'); forvar (ykeyW in o) {= document.getElementById("keyword"); var keyWord = keyW.options[keyW.selectedIndex].text; for (y in o) { if (y == "requirementText") { for (z in arrayOfLines) { rst += "\nvar finLine " + = boldString(arrayOfLines[z], keyWord); } rst += "\n " + finLine; } } else { rst += " :" + y + ": " + o[y] + "\n"; } } document.getElementById("demo").innerHTML = rst; } function boldString(str, find) { var re = new RegExp(find, 'g'); return str.replace(re, '**' + find + '**'); } </script> </body> </html> |