File: JSONEdit.php

Recommend this page to a friend!
  Classes of Chris Jeffries  >  Web JSON Editor  >  JSONEdit.php  >  Download  
File: JSONEdit.php
Role: Example script
Content type: text/plain
Description: Example file showing use
Class: Web JSON Editor
Create data values in JSON format interactively
Author: By
Last change:
Date: 4 years ago
Size: 7,863 bytes
 

Contents

Class file image Download
<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>