Last active
December 30, 2015 19:19
-
-
Save adrianseeley/7873747 to your computer and use it in GitHub Desktop.
Naught
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Naught</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <!-- Bootstrap --> | |
| <link href="css/bootstrap.min.css" rel="stylesheet"> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> | |
| <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> | |
| <![endif]--> | |
| <style> | |
| .editor { min-height: 200px; width: 65%; } | |
| </style> | |
| <script> | |
| var tag_hopper = 0; | |
| function hide_code (tag) { | |
| $('#code-' + tag).hide(); | |
| $('#showcode-' + tag).show(); | |
| $('#hidecode-' + tag).hide(); | |
| } | |
| function show_code (tag) { | |
| $('#code-' + tag).show(); | |
| $('#showcode-' + tag).hide(); | |
| $('#hidecode-' + tag).show(); | |
| } | |
| function hide_all_code () { | |
| // iterate all classes | |
| for (var c = 0; c < code_classes.length; c++) { | |
| // hide class | |
| hide_code(code_classes[c].id); | |
| // iterate class functions | |
| for (var f = 0; f < code_classes[c].functions.length; f++) { | |
| // hide class function | |
| hide_code(code_classes[c].functions[f].id); | |
| } | |
| } | |
| // iterate all daemons | |
| for (var d = 0; d < daemons.length; d++) { | |
| // hide daemon | |
| hide_code(daemons[d].id); | |
| } | |
| // iterate all endpoints | |
| for (var e = 0; e < endpoints.length; e++) { | |
| // hide endpoint | |
| hide_code(endpoints[e].id); | |
| } | |
| } | |
| function show_all_code () { | |
| // iterate all classes | |
| for (var c = 0; c < code_classes.length; c++) { | |
| // show class | |
| show_code(code_classes[c].id); | |
| // iterate class functions | |
| for (var f = 0; f < code_classes[c].functions.length; f++) { | |
| // show class function | |
| show_code(code_classes[c].functions[f].id); | |
| } | |
| } | |
| // iterate all daemons | |
| for (var d = 0; d < daemons.length; d++) { | |
| // show daemon | |
| show_code(daemons[d].id); | |
| } | |
| // iterate all endpoints | |
| for (var e = 0; e < endpoints.length; e++) { | |
| // show endpoint | |
| show_code(endpoints[e].id); | |
| } | |
| } | |
| function hide_doc (tag) { | |
| $('#doc-' + tag).hide(); | |
| $('#showdoc-' + tag).show(); | |
| $('#hidedoc-' + tag).hide(); | |
| } | |
| function show_doc (tag) { | |
| $('#doc-' + tag).show(); | |
| $('#showdoc-' + tag).hide(); | |
| $('#hidedoc-' + tag).show(); | |
| } | |
| function hide_all_docs () { | |
| // iterate all reqs | |
| for (var r = 0; r < requirements.length; r++) { | |
| // hide req | |
| hide_doc(requirements[r].id); | |
| } | |
| // iterate all databases | |
| for (var d = 0; d < databases.length; d++) { | |
| // hide database | |
| hide_doc(databases[d].id); | |
| // iterate all connectors | |
| for (var c = 0; c < databases[d].connectors.length; c++) { | |
| // hide connector | |
| hide_doc(databases[d].connectors[c].id); | |
| } | |
| } | |
| // iterate all classes | |
| for (var c = 0; c < code_classes.length; c++) { | |
| // hide class | |
| hide_doc(code_classes[c].id); | |
| // iterate class properties | |
| for (var p = 0; p < code_classes[c].properties.length; p++) { | |
| // hide class property | |
| hide_doc(code_classes[c].properties[p].id); | |
| } | |
| // iterate class functions | |
| for (var f = 0; f < code_classes[c].functions.length; f++) { | |
| // hide class function | |
| hide_doc(code_classes[c].functions[f].id); | |
| } | |
| } | |
| // iterate all daemons | |
| for (var d = 0; d < daemons.length; d++) { | |
| // hide daemon | |
| hide_doc(daemons[d].id); | |
| } | |
| // iterate all endpoints | |
| for (var e = 0; e < endpoints.length; e++) { | |
| // hide endpoint | |
| hide_doc(endpoints[e].id); | |
| } | |
| } | |
| function show_all_docs () { | |
| // iterate all reqs | |
| for (var r = 0; r < requirements.length; r++) { | |
| // show req | |
| show_doc(requirements[r].id); | |
| } | |
| // iterate all databases | |
| for (var d = 0; d < databases.length; d++) { | |
| // show database | |
| show_doc(databases[d].id); | |
| // iterate all connectors | |
| for (var c = 0; c < databases[d].connectors.length; c++) { | |
| // show connector | |
| show_doc(databases[d].connectors[c].id); | |
| } | |
| } | |
| // iterate all classes | |
| for (var c = 0; c < code_classes.length; c++) { | |
| // show class | |
| show_doc(code_classes[c].id); | |
| // iterate class properties | |
| for (var p = 0; p < code_classes[c].properties.length; p++) { | |
| // show class property | |
| show_doc(code_classes[c].properties[p].id); | |
| } | |
| // iterate class functions | |
| for (var f = 0; f < code_classes[c].functions.length; f++) { | |
| // show class function | |
| show_doc(code_classes[c].functions[f].id); | |
| } | |
| } | |
| // iterate all daemons | |
| for (var d = 0; d < daemons.length; d++) { | |
| // show daemon | |
| show_doc(daemons[d].id); | |
| } | |
| // iterate all endpoints | |
| for (var e = 0; e < endpoints.length; e++) { | |
| // show endpoint | |
| show_doc(endpoints[e].id); | |
| } | |
| } | |
| var requirements = []; | |
| function add_requirement (req) { | |
| // add to dom | |
| $('#reqs').append( | |
| '<div id="' + tag_hopper + '" style="margin-top: 20px;">' | |
| + '<input id="req-name-' + tag_hopper + '" type="text" style="width: 30%;" placeholder="Requirement Name">' | |
| + '<input id="req-npm-' + tag_hopper + '" type="text" style="width: 35%;" placeholder="NPM Package Name">' | |
| + '<div id="doc-' + tag_hopper + '" class="editor"></div>' | |
| + '<br><a style="display:none;" href="#" id="showdoc-' + tag_hopper + '" onclick="show_doc(\'' + tag_hopper + '\'); return false;">Show Documentation</a> <a href="#" id="hidedoc-' + tag_hopper + '" onclick="hide_doc(\'' + tag_hopper + '\'); return false;">Hide Documentation</a> • <a id="req-remove-' + tag_hopper + '" href="#" onclick="remove_requirement(\'' + tag_hopper + '\'); return false;">Remove Requirement</a>' | |
| + '</div>'); | |
| // prep editor | |
| prep_editor('doc-' + tag_hopper, 'markdown', true); | |
| // add to model | |
| requirements.push({ | |
| id: tag_hopper, | |
| name: 'req-name-' + tag_hopper, | |
| npm: 'req-npm-' + tag_hopper, | |
| doc: 'doc-' + tag_hopper}); | |
| // if loading | |
| if (req) { | |
| // load name | |
| $('#req-name-' + tag_hopper).val(req.name); | |
| // load npm | |
| $('#req-npm-' + tag_hopper).val(req.npm); | |
| // load doc | |
| ace.edit('doc-' + tag_hopper).setValue(req.doc); | |
| } | |
| // increment hopper | |
| tag_hopper++; | |
| } | |
| function remove_requirement (id) { | |
| // find in requirements | |
| for (var r = 0; r < requirements.length; r++) { | |
| if (requirements[r].id == id) { | |
| // remove from dom | |
| $('#' + id).remove(); | |
| // remove from model | |
| requirements.splice(r, 1); | |
| return; | |
| } | |
| } | |
| } | |
| function read_requirements () { | |
| var ret = []; | |
| // iterate model to get element contents | |
| for (var r = 0; r < requirements.length; r++) { | |
| ret.push({ | |
| name: $('#' + requirements[r].name).val(), | |
| npm: $('#' + requirements[r].npm).val(), | |
| doc: ace.edit(requirements[r].doc).getValue()}); | |
| } | |
| return ret; | |
| } | |
| var databases = []; | |
| function add_database (db) { | |
| // add to dom | |
| $('#dbs').append( | |
| '<div id="' + tag_hopper + '" style="margin-top: 20px;">' | |
| + '<input id="dbs-host-' + tag_hopper + '" type="text" style="width: 30%;" placeholder="Host">' | |
| + '<input id="dbs-port-' + tag_hopper + '" type="text" style="width: 5%;" placeholder="Port">' | |
| + '<input id="dbs-auth-' + tag_hopper + '" type="text" style="width: 30%;" placeholder="Authentication">' | |
| + '<div id="doc-' + tag_hopper + '" class="editor"></div>' | |
| + '<br> <a style="display:none;" href="#" id="showdoc-' + tag_hopper + '" onclick="show_doc(\'' + tag_hopper + '\'); return false;">Show Documentation</a> <a href="#" id="hidedoc-' + tag_hopper + '" onclick="hide_doc(\'' + tag_hopper + '\'); return false;">Hide Documentation</a> • <a href="#" onclick="add_database_connector(' + tag_hopper + '); return false;">Add Connector</a> • <a href="#" onclick="remove_database(\'' + tag_hopper + '\'); return false;">Remove Database</a>' | |
| + '<div id="dbs-connectors-' + tag_hopper + '">' | |
| + '</div>' | |
| + '</div>'); | |
| // prep editor | |
| prep_editor('doc-' + tag_hopper, 'markdown', true); | |
| // add to model | |
| databases.push({ | |
| id: tag_hopper, | |
| host: 'dbs-host-' + tag_hopper, | |
| port: 'dbs-port-' + tag_hopper, | |
| auth: 'dbs-auth-' + tag_hopper, | |
| doc: 'doc-' + tag_hopper, | |
| connectors: []}); | |
| // if loading | |
| if (db) { | |
| // load host | |
| $('#dbs-host-' + tag_hopper).val(db.host); | |
| // load port | |
| $('#dbs-port-' + tag_hopper).val(db.port); | |
| // load auth | |
| $('#dbs-auth-' + tag_hopper).val(db.auth); | |
| // load doc | |
| ace.edit('doc-' + tag_hopper).setValue(db.doc); | |
| // save host tag | |
| var host_tag = tag_hopper; | |
| // iterate connectors | |
| for (var c = 0; c < db.connectors.length; c++) { | |
| // increment hopper | |
| tag_hopper++; | |
| // add connector | |
| add_database_connector(host_tag, db.connectors[c]); | |
| } | |
| } | |
| // increment hopper | |
| tag_hopper++; | |
| } | |
| function remove_database (id) { | |
| // find in databases | |
| for (var d = 0; d < databases.length; d++) { | |
| if (databases[d].id == id) { | |
| // remove from dom | |
| $('#' + id).remove(); | |
| // remove from model | |
| databases.splice(d, 1); | |
| return; | |
| } | |
| } | |
| } | |
| function read_databases () { | |
| var ret = []; | |
| // iterate model to get element contents | |
| for (var d = 0; d < databases.length; d++) { | |
| ret.push({ | |
| host: $('#' + databases[d].host).val(), | |
| port: $('#' + databases[d].port).val(), | |
| auth: $('#' + databases[d].auth).val(), | |
| doc: ace.edit(databases[d].doc).getValue(), | |
| connectors: read_database_connectors(databases[d].id)}); | |
| } | |
| return ret; | |
| } | |
| function add_database_connector (id, connector) { | |
| // add to dom | |
| $('#dbs-connectors-' + id).append( | |
| '<div id="' + tag_hopper + '" style="margin-left: 40px; margin-top: 10px;">' | |
| + '<input id="dbs-connector-name-' + tag_hopper + '" type="text" style="width: 65%;" placeholder="Connector Name">' | |
| + '<div id="doc-' + tag_hopper + '" class="editor"></div>' | |
| + '<br><a style="display:none;" href="#" id="showdoc-' + tag_hopper + '" onclick="show_doc(\'' + tag_hopper + '\'); return false;">Show Documentation</a> <a href="#" id="hidedoc-' + tag_hopper + '" onclick="hide_doc(\'' + tag_hopper + '\'); return false;">Hide Documentation</a> • <a href="#" onclick="remove_database_connector(\'' + tag_hopper + '\'); return false;">Remove Connector</a>' | |
| + '</div>'); | |
| // prep editor | |
| prep_editor('doc-' + tag_hopper, 'markdown', true); | |
| // find database in model | |
| for (var d = 0; d < databases.length; d++) { | |
| if (databases[d].id == id) { | |
| // add to model | |
| databases[d].connectors.push({ | |
| id: tag_hopper, | |
| name: 'dbs-connector-name-' + tag_hopper, | |
| doc: 'doc-' + tag_hopper}); | |
| break; | |
| } | |
| } | |
| // if loading | |
| if (connector) { | |
| // load connector name | |
| $('#dbs-connector-name-' + tag_hopper).val(connector.name); | |
| // load doc | |
| ace.edit('doc-' + tag_hopper).setValue(connector.doc); | |
| } | |
| // increment hopper | |
| tag_hopper++; | |
| } | |
| function remove_database_connector (id) { | |
| // find in databases connectors | |
| for (var d = 0; d < databases.length; d++) { | |
| for (var c = 0; c < databases[d].connectors.length; c++) { | |
| if (databases[d].connectors[c].id == id) { | |
| // remove from dom | |
| $('#' + id).remove(); | |
| // remove from model | |
| databases[d].connectors.splice(c, 1); | |
| return; | |
| } | |
| } | |
| } | |
| } | |
| function read_database_connectors (id) { | |
| var ret = []; | |
| // iterate model to find db | |
| for (var d = 0; d < databases.length; d++) { | |
| if (databases[d].id == id) { | |
| // iterate connectors | |
| for (var c = 0; c < databases[d].connectors.length; c++) { | |
| ret.push({ | |
| name: $('#' + databases[d].connectors[c].name).val(), | |
| doc: ace.edit(databases[d].connectors[c].doc).getValue()}); | |
| } | |
| } | |
| } | |
| return ret; | |
| } | |
| var code_classes = []; | |
| function add_class (loaded_class) { | |
| // add to dom | |
| $('#classes').append( | |
| '<div id="' + tag_hopper + '" style="margin-top: 10px;">' | |
| + '<input id="classes-name-' + tag_hopper + '" type="text" style="width: 30%;" placeholder="Class Name">' | |
| + '<input id="classes-constructor-' + tag_hopper + '" type="text" style="width: 35%;" placeholder="Constructor Parameters">' | |
| + '<br><div id="code-' + tag_hopper + '" class="editor"></div>' | |
| + '<div id="doc-' + tag_hopper + '" class="editor"></div>' | |
| + '<br><a style="display:none;" href="#" id="showcode-' + tag_hopper + '" onclick="show_code(\'' + tag_hopper + '\'); return false;">Show Code</a> <a href="#" id="hidecode-' + tag_hopper + '" onclick="hide_code(\'' + tag_hopper + '\'); return false;">Hide Code</a> •' | |
| + ' <a style="display:none;" href="#" id="showdoc-' + tag_hopper + '" onclick="show_doc(\'' + tag_hopper + '\'); return false;">Show Documentation</a> <a href="#" id="hidedoc-' + tag_hopper + '" onclick="hide_doc(\'' + tag_hopper + '\'); return false;">Hide Documentation</a> •' | |
| + ' <a href="#" onclick="add_class_property(' + tag_hopper + '); return false;">Add Property</a> • <a href="#" onclick="add_class_function(' + tag_hopper + '); return false;">Add Function</a> • <a href="#" onclick="remove_class(\'' + tag_hopper + '\'); return false;">Remove Class</a>' | |
| + '<div id="classes-properties-' + tag_hopper + '">' | |
| + '</div>' | |
| + '<div id="classes-functions-' + tag_hopper + '">' | |
| + '</div>' | |
| + '</div>'); | |
| // prep editors | |
| prep_editor('code-' + tag_hopper, 'javascript'); | |
| prep_editor('doc-' + tag_hopper, 'markdown', true); | |
| // add to model | |
| code_classes.push({ | |
| id: tag_hopper, | |
| name: 'classes-name-' + tag_hopper, | |
| code_constructor: 'classes-constructor-' + tag_hopper, | |
| constructor_body: 'code-' + tag_hopper, | |
| doc: 'doc-' + tag_hopper, | |
| properties: [], | |
| functions: []}); | |
| // if loaded | |
| if (loaded_class) { | |
| // load name | |
| $('#classes-name-' + tag_hopper).val(loaded_class.name); | |
| // load constructor params | |
| $('#classes-constructor-' + tag_hopper).val(loaded_class.code_constructor); | |
| // load constructor body | |
| ace.edit('code-' + tag_hopper).setValue(loaded_class.constructor_body); | |
| // load doc | |
| ace.edit('doc-' + tag_hopper).setValue(loaded_class.doc); | |
| // save host tag | |
| var host_tag = tag_hopper; | |
| // iterate properties | |
| for (var p = 0; p < loaded_class.properties.length; p++) { | |
| // increment hopper | |
| tag_hopper++; | |
| // add property | |
| add_class_property(host_tag, loaded_class.properties[p]); | |
| } | |
| // iterate functions | |
| for (var f = 0; f < loaded_class.functions.length; f++) { | |
| // increment hopper | |
| tag_hopper++; | |
| // add function | |
| add_class_function(host_tag, loaded_class.functions[f]); | |
| } | |
| } | |
| // increment hopper | |
| tag_hopper++; | |
| } | |
| function remove_class (id) { | |
| // find in classes | |
| for (var c = 0; c < code_classes.length; c++) { | |
| if (code_classes[c].id == id) { | |
| // remove from dom | |
| $('#' + id).remove(); | |
| // remove from model | |
| code_classes.splice(c, 1); | |
| return; | |
| } | |
| } | |
| } | |
| function read_classes () { | |
| var ret = []; | |
| // iterate model to get element contents | |
| for (var c = 0; c < code_classes.length; c++) { | |
| ret.push({ | |
| name: $('#' + code_classes[c].name).val(), | |
| code_constructor: $('#' + code_classes[c].code_constructor).val(), | |
| constructor_body: ace.edit(code_classes[c].constructor_body).getValue(), | |
| doc: ace.edit(code_classes[c].doc).getValue(), | |
| properties: read_class_properties(code_classes[c].id), | |
| functions: read_class_functions(code_classes[c].id) | |
| }); | |
| } | |
| return ret; | |
| } | |
| function add_class_property (id, loaded_property) { | |
| // add to dom | |
| $('#classes-properties-' + id).append( | |
| '<div id="' + tag_hopper + '" style="margin-left: 40px; margin-top: 10px;">' | |
| + '<input id="classes-prop-name-' + tag_hopper + '" type="text" style="width: 30%;" placeholder="Property Name">' | |
| + '<input id="classes-prop-value-' + tag_hopper + '" type="text" style="width: 35%;" placeholder="Property Value">' | |
| + '<div id="doc-' + tag_hopper + '" class="editor"></div>' | |
| + '<br><a style="display:none;" href="#" id="showdoc-' + tag_hopper + '" onclick="show_doc(\'' + tag_hopper + '\'); return false;">Show Documentation</a> <a href="#" id="hidedoc-' + tag_hopper + '" onclick="hide_doc(\'' + tag_hopper + '\'); return false;">Hide Documentation</a> • <a href="#" onclick="remove_class_property(\'' + tag_hopper + '\'); return false;">Remove Property</a>' | |
| + '</div>'); | |
| // prep editor | |
| prep_editor('doc-' + tag_hopper, 'markdown', true); | |
| // find class in model | |
| for (var c = 0; c < code_classes.length; c++) { | |
| if (code_classes[c].id == id) { | |
| // add to model | |
| code_classes[c].properties.push({ | |
| id: tag_hopper, | |
| name: 'classes-prop-name-' + tag_hopper, | |
| value: 'classes-prop-value-' + tag_hopper, | |
| doc: 'doc-' + tag_hopper}); | |
| break; | |
| } | |
| } | |
| // if loading | |
| if (loaded_property) { | |
| // load class property name | |
| $('#classes-prop-name-' + tag_hopper).val(loaded_property.name); | |
| // load class property value | |
| $('#classes-prop-value-' + tag_hopper).val(loaded_property.value); | |
| // load doc | |
| ace.edit('doc-' + tag_hopper).setValue(loaded_property.doc); | |
| } | |
| // increment hopper | |
| tag_hopper++; | |
| } | |
| function remove_class_property (id) { | |
| // find property in classes | |
| for (var c = 0; c < code_classes.length; c++) { | |
| for (var p = 0; p < code_classes[c].properties.length; p++) { | |
| if (code_classes[c].properties[p].id == id) { | |
| // remove from dom | |
| $('#' + id).remove(); | |
| // remove from model | |
| code_classes[c].properties.splice(p, 1); | |
| return; | |
| } | |
| } | |
| } | |
| } | |
| function read_class_properties (id) { | |
| var ret = []; | |
| // iterate model to find class | |
| for (var c = 0; c < code_classes.length; c++) { | |
| if (code_classes[c].id == id) { | |
| // iterate properties | |
| for (var p = 0; p < code_classes[c].properties.length; p++) { | |
| ret.push({ | |
| name: $('#' + code_classes[c].properties[p].name).val(), | |
| value: $('#' + code_classes[c].properties[p].value).val(), | |
| doc: ace.edit(code_classes[c].properties[p].doc).getValue()}); | |
| } | |
| } | |
| } | |
| return ret; | |
| } | |
| function add_class_function (id, loaded_function) { | |
| // add to dom | |
| $('#classes-functions-' + id).append( | |
| '<div id="' + tag_hopper + '" style="margin-left: 40px; margin-top: 10px;">' | |
| + '<input id="classes-func-name-' + tag_hopper + '" type="text" style="width: 30%;" placeholder="Function Name">' | |
| + '<input id="classes-func-params-' + tag_hopper + '" type="text" style="width: 35%;" placeholder="Function Parameters">' | |
| + '<br><div id="code-' + tag_hopper + '" class="editor"></div>' | |
| + '<div id="doc-' + tag_hopper + '" class="editor"></div>' | |
| + '<br><a style="display:none;" href="#" id="showcode-' + tag_hopper + '" onclick="show_code(\'' + tag_hopper + '\'); return false;">Show Code</a> <a href="#" id="hidecode-' + tag_hopper + '" onclick="hide_code(\'' + tag_hopper + '\'); return false;">Hide Code</a> •' | |
| + ' <a style="display:none;" href="#" id="showdoc-' + tag_hopper + '" onclick="show_doc(\'' + tag_hopper + '\'); return false;">Show Documentation</a> <a href="#" id="hidedoc-' + tag_hopper + '" onclick="hide_doc(\'' + tag_hopper + '\'); return false;">Hide Documentation</a> •' | |
| + ' <a href="#" onclick="remove_class_function(\'' + tag_hopper + '\'); return false;">Remove Function</a>' | |
| + '</div>'); | |
| // prep editor | |
| prep_editor('code-' + tag_hopper, 'javascript'); | |
| prep_editor('doc-' + tag_hopper, 'markdown', true); | |
| // find class in model | |
| for (var c = 0; c < code_classes.length; c++) { | |
| if (code_classes[c].id == id) { | |
| // add to model | |
| code_classes[c].functions.push({ | |
| id: tag_hopper, | |
| name: 'classes-func-name-' + tag_hopper, | |
| params: 'classes-func-params-' + tag_hopper, | |
| code: 'code-' + tag_hopper, | |
| doc: 'doc-' + tag_hopper}); | |
| } | |
| } | |
| // if loaded | |
| if (loaded_function) { | |
| // load function name | |
| $('#classes-func-name-' + tag_hopper).val(loaded_function.name); | |
| // load function params | |
| $('#classes-func-params-' + tag_hopper).val(loaded_function.params); | |
| // load function code | |
| ace.edit('code-' + tag_hopper).setValue(loaded_function.code); | |
| // load doc | |
| ace.edit('doc-' + tag_hopper).setValue(loaded_function.doc); | |
| } | |
| // increment hopper | |
| tag_hopper++; | |
| } | |
| function remove_class_function (id) { | |
| // find property in classes | |
| for (var c = 0; c < code_classes.length; c++) { | |
| for (var f = 0; f < code_classes[c].functions.length; f++) { | |
| if (code_classes[c].functions[f].id == id) { | |
| // remove from dom | |
| $('#' + id).remove(); | |
| // remove from model | |
| code_classes[c].functions.splice(f, 1); | |
| return; | |
| } | |
| } | |
| } | |
| } | |
| function read_class_functions (id) { | |
| var ret = []; | |
| // iterate model to find class | |
| for (var c = 0; c < code_classes.length; c++) { | |
| if (code_classes[c].id == id) { | |
| // iterate functions | |
| for (var f = 0; f < code_classes[c].functions.length; f++) { | |
| ret.push({ | |
| name: $('#' + code_classes[c].functions[f].name).val(), | |
| params: $('#' + code_classes[c].functions[f].params).val(), | |
| code: ace.edit(code_classes[c].functions[f].code).getValue(), | |
| doc: ace.edit(code_classes[c].functions[f].doc).getValue()}); | |
| } | |
| } | |
| } | |
| return ret; | |
| } | |
| var daemons = []; | |
| function add_daemon (loaded_daemon) { | |
| // add to dom | |
| $('#daemons').append( | |
| '<div id="' + tag_hopper + '" style="margin-top: 10px;">' | |
| + '<input id="daemon-func-name-' + tag_hopper + '" type="text" style="width: 30%;" placeholder="Daemon Name">' | |
| + '<input id="daemon-func-interval-' + tag_hopper + '"type="text" style="width: 35%;" placeholder="Daemon Run Interval">' | |
| + '<br><div id="code-' + tag_hopper + '" class="editor"></div>' | |
| + '<div id="doc-' + tag_hopper + '" class="editor"></div>' | |
| + '<br><a style="display:none;" href="#" id="showcode-' + tag_hopper + '" onclick="show_code(\'' + tag_hopper + '\'); return false;">Show Code</a> <a href="#" id="hidecode-' + tag_hopper + '" onclick="hide_code(\'' + tag_hopper + '\'); return false;">Hide Code</a> • <a style="display:none;" href="#" id="showdoc-' + tag_hopper + '" onclick="show_doc(\'' + tag_hopper + '\'); return false;">Show Documentation</a> <a href="#" id="hidedoc-' + tag_hopper + '" onclick="hide_doc(\'' + tag_hopper + '\'); return false;">Hide Documentation</a> • <a href="#" onclick="remove_daemon(\'' + tag_hopper + '\'); return false;">Remove Daemon</a>' | |
| + '</div>'); | |
| // prep editor | |
| prep_editor('code-' + tag_hopper, 'javascript'); | |
| prep_editor('doc-' + tag_hopper, 'markdown', true); | |
| // add to model | |
| daemons.push({ | |
| id: tag_hopper, | |
| name: 'daemon-func-name-' + tag_hopper, | |
| interval: 'daemon-func-interval-' + tag_hopper, | |
| code: 'code-' + tag_hopper, | |
| doc: 'doc-' + tag_hopper}); | |
| // if loaded | |
| if (loaded_daemon) { | |
| // load name | |
| $('#daemon-func-name-' + tag_hopper).val(loaded_daemon.name); | |
| // load interval | |
| $('#daemon-func-interval-' + tag_hopper).val(loaded_daemon.interval); | |
| // load code | |
| ace.edit('code-' + tag_hopper).setValue(loaded_daemon.code); | |
| // load doc | |
| ace.edit('doc-' + tag_hopper).setValue(loaded_daemon.doc); | |
| } | |
| // increment hopper | |
| tag_hopper++; | |
| } | |
| function remove_daemon (id) { | |
| // find in daemons | |
| for (var d = 0; d < daemons.length; d++) { | |
| if (daemons[d].id == id) { | |
| // remove from dom | |
| $('#' + id).remove(); | |
| // remove from model | |
| daemons.splice(d, 1); | |
| return; | |
| } | |
| } | |
| } | |
| function read_daemons () { | |
| var ret = []; | |
| // iterate model to get element contents | |
| for (var d = 0; d < daemons.length; d++) { | |
| ret.push({ | |
| name: $('#' + daemons[d].name).val(), | |
| interval: $('#' + daemons[d].interval).val(), | |
| code: ace.edit(daemons[d].code).getValue(), | |
| doc: ace.edit(daemons[d].doc).getValue()}); | |
| } | |
| return ret; | |
| } | |
| var endpoints = []; | |
| function add_endpoint (loaded_endpoint) { | |
| // add to dom | |
| $('#endpoints').append( | |
| '<div id="' + tag_hopper + '">' | |
| + '<select id="endpoint-method-' + tag_hopper + '" style="width: 10%;">' | |
| + '<option value="GET">GET</option>' | |
| + '<option value="POST">POST</option>' | |
| + '<option value="BOTH">BOTH</option>' | |
| + '</select>' | |
| + '<input id="endpoint-url-' + tag_hopper + '" type="text" style="width: 55%;" placeholder="Endpoint URL">' | |
| + '<br><div id="code-' + tag_hopper + '" class="editor"></div>' | |
| + '<div id="doc-' + tag_hopper + '" class="editor"></div>' | |
| + '<br><a style="display:none;" href="#" id="showcode-' + tag_hopper + '" onclick="show_code(\'' + tag_hopper + '\'); return false;">Show Code</a> <a href="#" id="hidecode-' + tag_hopper + '" onclick="hide_code(\'' + tag_hopper + '\'); return false;">Hide Code</a> • <a style="display:none;" href="#" id="showdoc-' + tag_hopper + '" onclick="show_doc(\'' + tag_hopper + '\'); return false;">Show Documentation</a> <a href="#" id="hidedoc-' + tag_hopper + '" onclick="hide_doc(\'' + tag_hopper + '\'); return false;">Hide Documentation</a> • <a href="#" onclick="remove_endpoint(\'' + tag_hopper + '\'); return false;">Remove Endpoint</a>' | |
| + '</div>'); | |
| // prep editor | |
| prep_editor('code-' + tag_hopper, 'javascript'); | |
| prep_editor('doc-' + tag_hopper, 'markdown', true); | |
| // add to model | |
| endpoints.push({ | |
| id: tag_hopper, | |
| url: 'endpoint-url-' + tag_hopper, | |
| method: 'endpoint-method-' + tag_hopper, | |
| code: 'code-' + tag_hopper, | |
| doc: 'doc-' + tag_hopper}); | |
| // if loaded | |
| if (loaded_endpoint) { | |
| // load method | |
| $('#endpoint-method-' + tag_hopper).val(loaded_endpoint.method); | |
| // load url | |
| $('#endpoint-url-' + tag_hopper).val(loaded_endpoint.url); | |
| // load code | |
| ace.edit('code-' + tag_hopper).setValue(loaded_endpoint.code); | |
| // load doc | |
| ace.edit('doc-' + tag_hopper).setValue(loaded_endpoint.doc); | |
| } | |
| // increment hopper | |
| tag_hopper++; | |
| } | |
| function remove_endpoint (id) { | |
| // find in endpoints | |
| for (var e = 0; e < endpoints.length; e++) { | |
| if (endpoints[e].id == id) { | |
| // remove from dom | |
| $('#' + id).remove(); | |
| // remove from model | |
| endpoints.splice(e, 1); | |
| return; | |
| } | |
| } | |
| } | |
| function read_endpoints () { | |
| var ret = []; | |
| // iterate model to get element contents | |
| for (var e = 0; e < endpoints.length; e++) { | |
| ret.push({ | |
| url: $('#' + endpoints[e].url).val(), | |
| method: $('#' + endpoints[e].method).val(), | |
| code: ace.edit(endpoints[e].code).getValue(), | |
| doc: ace.edit(endpoints[e].doc).getValue()}); | |
| } | |
| return ret; | |
| } | |
| function compile () { | |
| // read all from dom | |
| var reqs_fromdom = read_requirements(); | |
| var dbs_fromdom = read_databases(); | |
| var classes_fromdom = read_classes(); | |
| var daemons_fromdom = read_daemons(); | |
| var endpoints_fromdom = read_endpoints(); | |
| // create file holders | |
| var server_js = ''; | |
| var test_js = ''; | |
| var package_json = ''; | |
| var procfile = ''; | |
| var save_json = ''; | |
| // write save | |
| save_json = JSON.stringify({ | |
| reqs: reqs_fromdom, | |
| dbs: dbs_fromdom, | |
| classes: classes_fromdom, | |
| daemons: daemons_fromdom, | |
| endpoints: endpoints_fromdom}, null, '\t'); | |
| var le = '\n'; | |
| // write server js | |
| server_js += '// enable infinitely deep stack traces for better error reporting' + le; | |
| server_js += 'Error.stackTraceLimit = Infinity;' + le | |
| server_js += le; | |
| server_js += '// include requirements' + le; | |
| for (var r = 0; r < reqs_fromdom.length; r++) { | |
| server_js += 'var ' + reqs_fromdom[r].name + ' = require("' + reqs_fromdom[r].npm + '");' + le; | |
| } | |
| server_js += 'var express = require("express");' + le; | |
| server_js += 'var server = express();' + le; | |
| server_js += 'var redis = require("redis");' + le; | |
| server_js += le; | |
| server_js += '// configure express' + le; | |
| server_js += 'server.use(express.urlencoded());' + le; | |
| server_js += 'server.use(express.json());' + le; | |
| server_js += le; | |
| server_js += '// create db connectors' + le; | |
| for (var d = 0; d < dbs_fromdom.length; d++) { | |
| for (var c = 0; c < dbs_fromdom[d].connectors.length; c++) { | |
| server_js += 'var ' + dbs_fromdom[d].connectors[c].name + ' = redis.createClient(' + dbs_fromdom[d].port + ', "' + dbs_fromdom[d].host + '"'; | |
| // connector with auth | |
| if (dbs_fromdom[d].auth.length != 0) { | |
| server_js += ', {auth_pass : "' + dbs_fromdom[d].auth + '"});' + le; | |
| // connector without auth | |
| } else { | |
| server_js += ');' + le; | |
| } | |
| } | |
| } | |
| server_js += le; | |
| server_js += '// define classes' + le; | |
| for (var c = 0; c < classes_fromdom.length; c++) { | |
| server_js += 'function ' + classes_fromdom[c].name + ' (' + classes_fromdom[c].code_constructor + ') {' + le; | |
| for (var p = 0; p < classes_fromdom[c].properties.length; p++) { | |
| server_js += '\tthis.' + classes_fromdom[c].properties[p].name + ' = ' + classes_fromdom[c].properties[p].value + ';' + le; | |
| } | |
| server_js += '\t' + classes_fromdom[c].constructor_body.split('\n').join('\n\t') + le; | |
| server_js += '}' + le; | |
| for (var f = 0; f < classes_fromdom[c].functions.length; f++) { | |
| server_js += classes_fromdom[c].name + '.prototype.' + classes_fromdom[c].functions[f].name + ' (' + classes_fromdom[c].functions[f].params + ') {' + le; | |
| server_js += '\t' + classes_fromdom[c].functions[f].code.split('\n').join('\n\t') + le; | |
| server_js += '}' + le; | |
| } | |
| // newline after class | |
| server_js += le; | |
| } | |
| server_js += le; | |
| server_js += '// daemons' + le; | |
| for (var d = 0; d < daemons_fromdom.length; d++) { | |
| server_js += 'setInterval(function ' + daemons_fromdom[d].name + ' () {' + le; | |
| server_js += '\t' + daemons_fromdom[d].code.split('\n').join('\n\t') + le; | |
| server_js += '}, ' + daemons_fromdom[d].interval + ');' + le; | |
| server_js += le; | |
| } | |
| server_js += le; | |
| server_js += '// endpoints' + le; | |
| for (var e = 0; e < endpoints_fromdom.length; e++) { | |
| server_js += 'server.' + endpoints_fromdom[e].method + ' ("' + endpoints_fromdom[e].url + '", function (req, res, next) {' + le; | |
| server_js += '\t' + endpoints_fromdom[e].code.split('\n').join('\n\t') + le; | |
| server_js += '});' + le; | |
| server_js += le; | |
| } | |
| server_js += le; | |
| server_js += 'server.listen(80);'; | |
| // write test js | |
| // write package.json | |
| // write procfile | |
| procfile += 'web: node Server.js'; | |
| // output to dom | |
| ace.edit('server-js').setValue(server_js); | |
| ace.edit('test-js').setValue(test_js); | |
| ace.edit('package-json').setValue(package_json); | |
| ace.edit('procfile').setValue(procfile); | |
| ace.edit('save').setValue(save_json); | |
| } | |
| function load () { | |
| // parse load json | |
| var loaded = JSON.parse(ace.edit('load').getValue()); | |
| // cleanup dom and model | |
| while (requirements.length > 0) remove_requirement(requirements[0].id); | |
| while (databases.length > 0) remove_database(databases[0].id); | |
| while (code_classes.length > 0) remove_class(code_classes[0].id); | |
| while (daemons.length > 0) remove_daemon(daemons[0].id); | |
| while (endpoints.length > 0) remove_endpoint(endpoints[0].id); | |
| // iterate requirements | |
| for (var r = 0; r < loaded.reqs.length; r++) { | |
| // create requirement | |
| add_requirement(loaded.reqs[r]); | |
| } | |
| // iterate databases | |
| for (var d = 0; d < loaded.dbs.length; d++) { | |
| // create database | |
| add_database(loaded.dbs[d]); | |
| } | |
| // iterate classes | |
| for (var c = 0; c < loaded.classes.length; c++) { | |
| // create class | |
| add_class(loaded.classes[c]); | |
| } | |
| // iterate daemons | |
| for (var d = 0; d < loaded.daemons.length; d++) { | |
| // create daemon | |
| add_daemon(loaded.daemons[d]); | |
| } | |
| // iterate endpoints | |
| for (var e = 0; e < loaded.endpoints.length; e++) { | |
| // create endpoint | |
| add_endpoint(loaded.endpoints[e]); | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body style="margin: 20px;"> | |
| <h4><a href="#" onclick="hide_all_code(); return false;">Hide All Code</a> • <a href="#" onclick="show_all_code(); return false;">Show All Code</a> • <a href="#" onclick="hide_all_docs(); return false;">Hide All Documentation</a> • <a href="#" onclick="show_all_docs(); return false;">Show All Documentation</a></h4><hr> | |
| <h4><a href="#" onclick="load(); $('#load').hide(); $('#hideload').hide(); $('#showload').show(); return false;">Load</a></h4><div id="load" class="editor"></div> | |
| <a id="hideload" href="#" onclick="$('#hideload').hide(); $('#showload').show(); $('#load').hide(); return false;">Hide Load</a><a id="showload" style="display:none;" href="#" onclick="$('#hideload').show(); $('#showload').hide(); $('#load').show(); return false;">Show Load</a><hr> | |
| <h4><a href="#" onclick="add_requirement(); return false;">Add Requirement</a></h4><div id="reqs"></div><hr> | |
| <h4><a href="#" onclick="add_database(); return false;">Add Database</a></h4><div id="dbs"></div><hr> | |
| <h4><a href="#" onclick="add_class(); return false;">Add Class</a></h4><div id="classes"></div><hr> | |
| <h4><a href="#" onclick="add_daemon(); return false;">Add Daemon</a></h4><div id="daemons"></div><hr> | |
| <h4><a href="#" onclick="add_endpoint(); return false;">Add Endpoint</a></h4><div id="endpoints"></div><hr> | |
| <h4><a href="#" onclick="compile(); $('#compiled').show(); $('#hidecomp').show(); $('#showcomp').hide(); return false;">Compile</a></h4> | |
| <div id="compiled" style="display:none;"> | |
| <h4><small><i>Server.js</i></small></h4> | |
| <div id="server-js" class="editor"></div> | |
| <h4><small><i>Test.js</i></small></h4> | |
| <div id="test-js" class="editor"></div> | |
| <h4><small><i>package.json</i></small></h4> | |
| <div id="package-json" class="editor"></div> | |
| <h4><small><i>Procfile</i></small></h4> | |
| <div id="procfile" class="editor"></div> | |
| <h4><small><i>Save</i></small></h4> | |
| <div id="save" class="editor"></div> | |
| </div> | |
| <a id="hidecomp" href="#" style="display:none;" onclick="$('#hidecomp').hide(); $('#showcomp').show(); $('#compiled').hide(); return false;">Hide Compiled</a><a id="showcomp" href="#" onclick="$('#hidecomp').show(); $('#showcomp').hide(); $('#compiled').show(); return false;">Show Compiled</a><hr> | |
| <script src="https://code.jquery.com/jquery.js"></script> | |
| <script src="js/bootstrap.min.js"></script> | |
| <script src="js/ace/ace.js" type="text/javascript" charset="utf-8"></script> | |
| <script> | |
| function prep_editor (tag, mode, doc) { | |
| var editor = ace.edit(tag); | |
| editor.setTheme(doc ? "ace/theme/solarized_light" : "ace/theme/monokai"); | |
| editor.getSession().setMode("ace/mode/" + mode); | |
| } | |
| prep_editor('load', 'json'); | |
| prep_editor('server-js', 'javascript'); | |
| prep_editor('test-js', 'javascript'); | |
| prep_editor('package-json', 'json'); | |
| prep_editor('procfile', 'text'); | |
| prep_editor('save', 'json'); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment