Permalink
Browse files

Feature: ECL Playground

New web page which lets users "play" with ECL without installing any
client tools.  Includes ECL editor, Graph Viewer and Result/Syntax
Error viewer.

Signed-off-by: Gordon Smith <gordon.smith@lexisnexis.com>
  • Loading branch information...
GordonSmith committed Apr 19, 2012
1 parent c96f820 commit 5a9686fcdffaf510e379c1bc952a4224e5047c72
View
@@ -0,0 +1,141 @@
+/*##############################################################################
+# Copyright (C) 2011 HPCC Systems.
+#
+# All rights reserved. This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program. If not, see <http://www.gnu.org/licenses/>.
+############################################################################## */
+html, body {
+ background: white;
+ width: 100%;
+ height: 100%;
+ margin: 0px;
+ color: rgb(51, 51, 51);
+ font-family: Lucida Sans,Lucida Grande,Arial !important;
+ font-size: 13px !important;
+ padding-top:0px;
+ padding-right:0px;
+ padding-bottom:0px;
+ padding-left:0px;
+}
+button {
+ background-position: top;
+ padding: 2px 8px 4px;
+ border-radius: 4px;
+ border: 1px solid rgb(118, 157, 192);
+ font-size: 1em;
+ background-image: url("http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/form/images/button.png");
+ background-repeat: repeat-x;
+ background-color: rgb(228, 242, 255);
+ -webkit-transition: background-color 0.2s linear;
+ -moz-border-radius: 4px 4px 4px 4px;
+ -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+}
+button:hover {
+ color: rgb(0, 0, 0);
+ background-color: rgb(175, 217, 255);
+}
+h1 {
+ font-size: 1.5em;
+}
+
+#eclContent {
+ height: 80%;
+}
+.CodeMirror {
+}
+.CodeMirror-scroll {
+ position: absolute;
+ height: 99%;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+#title {
+ font-weight: bold;
+ font-size: x-large;
+}
+
+#appLayout {
+ height: 100%;
+}
+.claro .demoLayout .topPanel {
+ background-color: rgb(208, 233, 252);
+}
+.claro .demoLayout .edgePanel {
+ background-color: rgb(208, 233, 252);
+}
+.pageOverlay {
+ left: 0px;
+ top: 0px;
+ width: 100%;
+ height: 100%;
+ display: block;
+ position: absolute;
+ z-index: 1001;
+}
+#loadingOverlay {
+ background: url("/esp/files/img/loadingAnimation.gif") no-repeat 10px 23px rgb(255, 255, 255);
+}
+#loadingOverlay .loadingMessage {
+ padding: 25px 40px;
+ color: rgb(153, 153, 153);
+}
+.searchInputColumn {
+ width: 100%;
+ margin-right: -10em;
+ float: left;
+}
+.searchInputColumnInner {
+ padding-top: 2px;
+ padding-right: 11em;
+}
+.searchButtonColumn {
+ width: 10em;
+ float: left;
+}
+#searchBtn {
+ width: 100%;
+ display: block;
+}
+#searchTerms {
+ width: 100%;
+ display: block;
+}
+.demoImageList {
+ margin: 0px;
+ padding: 0px;
+ background-color: rgb(204, 204, 204);
+}
+.demoImageList li.item img {
+ overflow: hidden;
+ margin-right: 10px;
+ cursor: pointer;
+ max-height: 50px;
+}
+.demoImageList li.item {
+ margin: 0px;
+ padding: 4px 15px 3px 10px;
+ overflow: hidden;
+ border-top-color: rgb(255, 255, 255);
+ border-bottom-color: rgb(153, 153, 153);
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-top-style: solid;
+ border-bottom-style: solid;
+ position: relative;
+ max-height: 60px;
+ background-color: rgb(238, 238, 238);
+}
+
View
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<!--
+##############################################################################
+# Copyright (C) 2011 HPCC Systems.
+#
+# All rights reserved. This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program. If not, see <http://www.gnu.org/licenses/>.
+##############################################################################
+-->
+<html>
+
+<head>
+<meta charset="utf-8">
+<title>Demo: Graph Control</title>
+<link href="CodeMirror2/lib/codemirror.css" rel="stylesheet">
+<script src="CodeMirror2/lib/codemirror.js"></script>
+<script src="CodeMirror2/mode/ecl/ecl.js"></script>
+<link href="css/ecl.css" rel="stylesheet">
+<link href="ECLPlayground.css" media="screen" rel="stylesheet">
+<link href="dijit/themes/claro/claro.css" media="screen" rel="stylesheet">
+<link href="dojox/grid/resources/Grid.css" rel="stylesheet">
+<link href="dojox/grid/resources/claroGrid.css" rel="stylesheet">
+<!-- load dojo and provide config via dojoConfig global -->
+<script>
+ var dojoConfig = (function(){
+ var base = location.href.split("/");
+ var developerMode = base[0] == "file:"; // If URL is local then we are in web developer mode!
+ base.pop();
+ base = base.join("/");
+
+ return {
+ async: true,
+ isDebug: developerMode,
+ parseOnLoad: true,
+ urlBase: base,
+ serverIP: developerMode ? "192.168.2.68" : "", //IP of any ESP server
+ packages: [{
+ name: "main",
+ location: base + "/"
+ }, {
+ name: "hpcc",
+ location: base + "/scripts/"
+ }]
+ };
+ })();
+ </script>
+<script src="dojo/dojo.js"></script>
+<script>
+ require(["dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/layout/TabContainer", "dijit/layout/AccordionContainer", "dijit/layout/AccordionPane",
+ "dojo/domReady!"]);
+</script>
+<script>
+ require(["main/ECLPlayground", "dojo/domReady!"], function(app) {
+ app.init();
+ });
+</script>
+</head>
+
+<body class="claro">
+
+<!-- overlay -->
+<div id="loadingOverlay" class="pageOverlay">
+ <div class="loadingMessage">
+ Loading...</div>
+</div>
+<!-- application -->
+<div id="appLayout" class="demoLayout" data-dojo-props="design: 'headline'" data-dojo-type="dijit.layout.BorderContainer">
+ <div id="topPane" class="topPanel" data-dojo-props="region: 'top'" data-dojo-type="dijit.layout.ContentPane">
+ <div id="title" style="display:inline-block; vertical-align:middle">ECL Playground</div>
+ <div style="float: right;display :inline-block; vertical-align:middle">
+ <label for="sampleSelect">Sample:</label>
+ <div id="sampleSelect"></div>
+ </div>
+ </div>
+ <div id="tabs" class="centerPanel" data-dojo-props="region: 'center'" data-dojo-type="dijit.layout.ContentPane">
+ <div id="eclContent">
+ <textarea id="eclCode">
+/*
+ Example code - use without restriction.
+*/
+Layout_Person := RECORD
+ UNSIGNED1 PersonID;
+ STRING15 FirstName;
+ STRING25 LastName;
+END;
+
+allPeople := DATASET([ {1,'Fred','Smith'},
+ {2,'Joe','Blow'},
+ {3,'Jane','Smith'}],Layout_Person);
+
+somePeople := allPeople(LastName = 'Smith');
+
+// Outputs ---
+somePeople;
+ </textarea>
+ </div>
+ </div>
+ <div id="rightPane" class="edgePanel" data-dojo-props="minSize:120, region: 'right', splitter:true" data-dojo-type="dijit.layout.TabContainer" style="width: 240px;">
+ <div id="graphs" style="width: 100%; height: 100%"></div>
+ </div>
+ <div id="bottomPane" class="edgePanel" data-dojo-props="minSize:120, region: 'bottom', splitter:true, tabPosition: 'bottom'" data-dojo-type="dijit.layout.TabContainer" style="height: 240px">
+ </div>
+ <div id="submitPane" class="edgePanel" data-dojo-props="region: 'bottom'" data-dojo-type="dijit.layout.ContentPane">
+ <div style="display:inline-block; vertical-align:middle"><button id="submitBtn">Submit</button></div>
+ <div style="float: right;display :inline-block; vertical-align:middle">
+ <div id="status">...</div>
+ </div>
+ </div>
+</div>
+</body>
+
+</html>
Oops, something went wrong.

0 comments on commit 5a9686f

Please sign in to comment.