Icontem

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: 1 year 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>