<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="PNF">PNF</option>
<option value="VNF or PNF">VNF or PNF</option>
<option value="VNF PROVIDER">VNF PROVIDER</option>
<option value="PNF PROVIDER">PNF PROVIDER</option>
<option value="VNF or PNF PROVIDER">VNF or PNF PROVIDER</option>
<option value="VNF HEAT PACKAGE">VNF HEAT PACKAGE</option>
<option value="VNF CSAR PACKAGE">VNF CSAR PACKAGE</option>
<option value="PNF CSAR PACKAGE">PNF CSAR PACKAGE</option>
<option value="VNF or PNF CSAR PACKAGE">VNF or PNF CSAR PACKAGE</option>
<option value="VNF DOCUMENTATION PACKAGE">VNF DOCUMENTATION PACKAGE</option>
<option value="PNF DOCUMENTATION PACKAGE">PNF DOCUMENTATION PACKAGE</option>
<option value="VNF or PNF DOCUMENTATION PACKAGE">VNF or PNF DOCUMENTATION PACKAGE</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;" 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";
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);
}
}
if (result.length != 0) {
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>
| 