<html>
<head>
<style>
* { font-family:Helvetica,Arial,sans-serif}
body {background-color:aaaaaa;}
#textarea {
border:5px ridge silver;
margin-top:10px;
background-color:ffffcc;
border-radius:10px;
overflow:auto;
white-space: pre;
padding:10px;
font-family:MonospaceRegular,monospace;
font-size:smaller;
height:60%;
width:95%;
}
#form {
background-color:FFFFEE;
border-radius:10px;
padding:5px;
margin-top:5px;
border:3px outset silver;
}
dt{ font-weight:bold;}
dt::after {content:':';}
li, dd{ border-left:1px solid blue; }
dl, ol {padding:0px;margin:0px;}
img {padding-right:2px;}
*.editable {
background-color:#ddddee;
border:2px inset silver;
white-space:pre-wrap;
font-family:monospace;
border-radius:3px;
padding:3px;}
button {margin-left:5px;margin-right:5px;}
</style>
<script src='jsonedit.js'></script>
<script src='serverlink.js'></script>
<script>
let parms =
{
"server":{ "url":"simpleserver.php" },
"request_parms":{ }
};
docLoad(parms)
.then(getList)
.then(choosequery);
/***
* getList(parms) - retrieve data based on a prameter object
*
* Extracts URL and request parms from a parms object and calls
* getData returning the result (a promise)
***/
function getList(parms)
{
parms.request_parms.action='list';
return getData(parms.server.url, parms.request_parms);
}
/***
* choosequery - appends a list of items to a pre-existing SELECT
* object with the id 'select'
*
* @param object the result of a query using getData. Contains
* the items to go in the list
***/
function choosequery(response)
{
return new Promise( function (resolve,reject) {
let keys = [];
response.resultData.forEach(function(k) { keys.push(k.queryName);});
keys.unshift('Select a file to edit');
let lst = document.createElement('select');
lst.id='querynames';
lst.onchange = function (e) {
if (e.currentTarget.selectedIndex > 0) {
e.currentTarget.xx_lastIndex = e.currentTarget.selectedIndex
let request = {"action":"getData", "objectName":e.currentTarget.value};
resolve (getData(parms.server.url, request).then(function (response) {populateEditor(response); }));
} else {
e.currentTarget.selectedIndex = e.currentTarget.xx_lastIndex ;
}};
keys.forEach(function(key){
let opt = document.createElement('option');
opt.innerText = key;
lst.appendChild(opt);
});
document.getElementById('select').appendChild(lst);
});
}
/***
* displayError(txt) - display an error message
*
* @param string the text to be displayed
***/
function displayError(txt)
{
let color;
let msg = txt.errorMessage
//let msg = JSON.stringify(txt,undefined,4);
if(txt.severity == 0) {
blockDisplayMessage(msg, undefined, 120);
} else {
color=(txt.severity>1)?0:240;
blockDisplayMessage(msg, 'https://dev.mysql.com/doc/refman/5.5/en/error-messages-client.html', color);
}
}
/***
* blockDisplayMessage - display a message in a given colour
*
* @param string txt the message to display
* @param string href a URL to go to if the message is clicked
* @param int hue the color to use for the display 0=red
* 120=green, 240=blue
***/
function blockDisplayMessage(txt, href, color)
{
if (color == undefined) color = 0;
let oMsg = document.getElementById('messageBlock'); //if we already created or user created
if(oMsg==undefined)
oMsg = createMessageBlock(); //need to create one
let oMessageBlockText = oMsg.childNodes[1];
let oCloser = oMsg.childNodes[0];
let cMsg = oMsg.style;
let cCloser = oCloser.style;
oMessageBlockText.innerText = txt;
if(href != undefined)
{
oMessageBlockText.href = href;
oMessageBlockText.title = 'Click to view MySQL error codes (in a new window)';
oMessageBlockText.cursor = 'help';
oMessageBlockText.style.borderBottom = '1px dotted black';
}
cMsg.border='3px ridge hsl('+color+',50%,60%)';
cMsg.backgroundColor='hsl('+color+',50%,80%)';
cMsg.color = 'hsl('+color+',50%,30%)';
cCloser.backgroundColor = 'hsl('+color+',50%,60%)';
oMessageBlockText.style.backgroundColor = 'none';
oMessageBlockText.style.color = 'hsl('+color+',100%,20%)';
oMsg.style.display = 'block';
}
/***
* createMessageBlock - create a block to display messages in
***/
function createMessageBlock()
{
//The holding div
oMsg = document.createElement('div');
oMsg.addEventListener('click', function(e) { e.target.style.display = 'none'; });
oMsg.id = 'messageBlock';
oBody = document.getElementsByTagName('body')[0];
oBody.appendChild(oMsg);
let cMsg = oMsg.style;
cMsg.position = 'absolute';
cMsg.top = '-10px';
cMsg.right = '5px';
cMsg.width='50%';
cMsg.height='10%';
cMsg.top='10px';
cMsg.position='fixed';
cMsg.display='none';
cMsg.borderRadius='10px';
cMsg.padding='10px';
cMsg.overflow='auto';
cMsg.opacity='0.8';
//The close button
let x = document.createTextNode('x');
let oCloser = document.createElement('div');
oCloser.id = 'closer';
oCloser.appendChild(x);
let cCloser = oCloser.style;
cCloser.position='absolute';
cCloser.top='-6px';
cCloser.right = '-1px';
cCloser.padding='3px';
cCloser.borderRadius='3px';
cCloser.color='white';
cCloser.cursor='pointer';
oCloser.addEventListener('click', function (e) {e.currentTarget.parentNode.style.display='none';} );
oMsg.appendChild(oCloser);
//Holder for the message
oMessageBlockText = document.createElement('a')
oMessageBlockText.target = '_BLANK';
oMessageBlockText.id = 'messageBlockText';
oMessageBlockText.style.width='85%';
oMsg.appendChild(oMessageBlockText);
oMsg.style.display='block';
if(oMessageBlockText == undefined)
{
oMessageBlockText=document.getElementById('messageBlockText');
oMsg = document.getElementById('messageBlock');
}
return oMsg;
}
function makebuttonbox(dialogueArea, resolve, reject) {
let queryName
let buttonBox = document.createElement('div');
buttonBox.style.textAlign = 'center';
saveButton = document.createElement('button');
saveButton.type = 'button';
saveButton.innerText = 'Save';
saveButton.name = 'CMD';
saveButton.addEventListener('click', function(e) {
oTxt = document.getElementById('queryName');
if(oTxt == undefined) {
objectName = document.getElementById('querynames').value;
} else {
objectName = oTxt.innerText;
}
getData(
parms.server.url,
{
"action":"putData",
"objectData": untransform(dialogueArea).DATA,
"objectName":objectName
}).
then(function(response) {displayError(response);}).
catch(function(response) {displayError(response);});
});
buttonBox.appendChild(saveButton);
closeButton = document.createElement('button');
closeButton.type = 'button';
closeButton.innerText = 'Close';
closeButton.name = 'CMD';
closeButton.addEventListener('click', function(e) {
document.getElementById('form').innerHTML = '';
let mb = document.getElementById('messageBlock')
if(mb != undefined)
mb.style.display = 'none';
let ls = document.getElementById('querynames')
ls.selectedIndex = 0;
});
buttonBox.appendChild(closeButton);
return buttonBox;
}
/***
* populateEditor - place data into the dialogue window
*
* @param object response Data returned from getData
***/
function populateEditor(response) {
let pForm = document.getElementById('form');
pForm.innerHTML = '';
let dialogueArea = transform({"DATA":response.resultData})
pForm.appendChild(dialogueArea);
pForm.appendChild(makebuttonbox(dialogueArea));
}
</script>
</head>
<body>
<h1>JSON File Editor</h1>
<div id=select></div>
<div id=form></div>
</body>
</html>
|
Download
