Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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="target">Target:</label>
 <select onchange="buildReq(target)" style="width: 100%; margin: 8px 0; box-sizing: border-box; padding: 12px 20px;" name="target" id="target">
 <option value="" selected disabled 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">
 <option value="" selected disabled 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="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"></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();
 });
 $('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');
 for (y in o) {
 if (y == "requirementText") {
 for (z in arrayOfLines) {
 //var finLine = boldString(arrayOfLines[z], keyWord);
 rst += "\n " + arrayOfLines[z];
 }
 } else {
 rst += " :" + y + ": " + o[y] + "\n";
 }
 }
 document.getElementById("formatted").innerHTML = rst;
 }

 function boldString(str, find) {
 var re = new RegExp(find, 'g');
 return str.replace(re, '**' + find + '**');
 }

 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':
 addedKeword = '**' + fieldClicked.value + '**';
 text.val(text.val() + addedKeword);
 break;
 }
 }

 </script>
 </body>

</html>

...