web based command line interface
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
images initial commit May 5, 2016
.gitignore initial commit May 5, 2016
LICENSE Initial commit Apr 19, 2016
README.md initial commit May 5, 2016
bower.json using acli v0.0.11 Jul 18, 2016
component.js initial commit May 5, 2016
web-cli.html initial commit May 5, 2016

README.md

web-cli

Web-cli is an extensible web-based command line interface component. It's a Polymer component wrapping the aCLI project, making it easier to consume and use.

Features

  • Manages environment variables and use them as part of the command line.
  • Supports plugins- remote commands integrated into the console, using docRouter metadata.
    Supporting plugins with client side processing and styling.
  • Maintains command line history, installed plugins and environment variables.
  • Pin Panel which is kind of a dashboard for keeping command execution results on-screen.
  • Html visualization for json results with collapsing feature.
  • Supports working in parallel with few instances/tabs.

Example

Animated Demo

Installing

bower install web-cli

Getting Started

Follow the sample app for extended example of how to use this component. The sample app includes varaiety of plugins and examples for commands you can use as a reference.

The following is an example of how to quickly start using the component.

<!DOCTYPE HTML>
<html>
<head>
  <title>corpus to graph admin console</title>
  <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
  <link rel="import" href="bower_components/web-cli/web-cli.html">
  <style>
	.promptImage {
		vertical-align: middle;
	}
  </style>
</head>
<body>
	<web-cli id="webCli"></web-cli>
</body>
<script>
	$(function () {
	  
		// get plugins and user details from the server.
	  // we could have also provided the pluginsUrl property on the control itselft, and the control would have fetched this data.
	  // since we need to get the user details anyway, we're using the same request to get all the data at once and providing the plugins explicitely.
	  $.getJSON('pathToApi', function (cliData) { 
		var user = cliData.user;

		// environment variables to use by this console instance
		var environmentVars = {
		  app: { type: 'string', value: 'console', description: 'The current app name', userReadOnly: false },
		  username: { type: 'string', value: user.username, description: 'The current username', userReadOnly: true },
		  userImageUrl: { type: 'string', value: user.image, description: 'The current user image url', userReadOnly: true },
		};
		
		// get a reference to the control
		var webCli = $('web-cli')[0];

		// listen on envronment variables changes and update the console prompt string accordingly.
		// in this case, we'de like to reflect the change in the app name.
		webCli.addEventListener('envChanged', function(e) {
		  console.log('envChanged!', e.detail);
		  updatePrompt();
		});
		
		// webCli is ready to be initialized    
		webCli.onReady = function () {

			// init the console    
			webCli.init({
				environment: environmentVars,
				plugins: cliData.apis,
				commands: getLocalCommands()
			});
			
			updatePrompt();
		}
			
		// updates the prompt string    
		function updatePrompt() {
		  var app = webCli.env('app');
		  var image = user.image ? "<img src='" + user.image + "' class='promptImage' width='18px'/>" : '';
		  var prompt = image + ' [';
		  if (user.name) prompt += user.name + '\\';
		  if (app) prompt += '' + app + '';
		  prompt += ']>';
		  webCli.prompt(prompt);
		}
	});  


	// this is the place to extend the console
	// with more client-side commands
	function getLocalCommands() {
	
		var versionCommand = {
			name: 'version',
			description: "gets the version of this console",
			usage: 'version',
			example: 'version',
			params: [],
			exec: function (args, context) {
			return '1.0';
			}
		};

		var commands = [versionCommand];
		return commands;
	}
});
</script>
</html>

Design

The web-cli internal design in addition to more documentation can be found in the original aCLI repository docs folder

License

MIT