---
project
tofgui
version
1.0.0
unit
struct
system_target
info
This project provides a function `tofgui`, that starts a Graphical User Interfact in the browser that supports the management and editing of [TofJs](htttp://tofjs.org) projects.
# Usage
Start a [NodeJs](http://nodejs.org) REPL, load the required projects (see below) and then call `tofgui(port)`, e.g.
> tofgui(55555)
Server started listening on port `55555` ...
`tofgui` is running now. Point your Firefox browser to `localhost:55555/?home` to get started.
undefined
> ...
By ending the REPL session (e.g. with `Ctrl+C`, `Ctrl+C`) you also terminate the GUI.
Alternatively, you could also use the module
> require ('./tofgui.tofm.js') . tofgui (55555);
# Requirements
There are a couple of other projects that are required to run `tofgui`, namely:
`type`, `value`, `html`, `augment`, `global`, `system`, `utils`, `flatcode`, `session`, `unit`, `HttpTools`, `tofgui`.
---
---
unit
value
name
tofgui
type
$act (HttpServer.$HttpPortNumber)
value
function (port) {
var httpServer = HttpServer.fileAndDocProducerServer (port) (TofGui.docProducer);
httpServer.start();
console.log ( '`tofgui` is running now. Point your Firefox browser to `localhost:%d/?home` to get started.', port );
}
info
`tofgui(port)` creates a HTTP server that immediately starts to listen to the `$HttpPortNumber` value `port`.
For example,
Start a [NodeJs](http://nodejs.org) REPL, load the required projects (see below) and then call `tofgui(port)`, e.g.
> tofgui(55555)
Server started listening on port `55555` ...
`tofgui` is running now. Point your Firefox browser to `localhost:55555/?home` to get started.
undefined
> ...
By ending the REPL session (e.g. with `Ctrl+C`, `Ctrl+C`) you also terminate the GUI.
comment
Recall, that the two lines
var httpServer = HttpServer.fileAndDocProducerServer (port) (TofGui.docProducer);
httpServer.start();
first create an instance of the `HttpServer` class (see the `HttpTools` project) and then starts it, so that the browser can point to `http://localhost:port` to use this GUI.
Recall (see the info in the `HttpTools` project), that the `httpServer` created with `HttpServer.fileAndDocProducerServer(port)(dp)` works as a *file server* as well as a *document producer server*, depending on the URL requested by the browser:
* If the URL query part (in fact, the combined query and data part from a GET as well as a POST request) of the URL is empty, the file from the URL path is returned.
For example,
http://localhost:port/one/two/three.html
displays `/one/two/three.html` in the browser window.
* If the URL query part is not empty, say if it is `?key1=value1&key2=value2&key3=value3`, the query part is converted into a record `{key1: value1, key2: value2, key3: value3}` and the HTML document produced by `dp({key1: value1, key2: value2, key3: value3})` is shown in the browser window.
The second parameter `dp` is a **document producer**, i.e. a function that takes a record `r` and returns an HTML document `dp(r)`.
In our case of `tofgui`, the document producer is the [`TofGui.docProducer`](#TofGui-docProducer).
---
unit
struct
name
TofGui
---
unit
value
name
TofGui.docProducer
type
$prod ([$Rec, $HtmlDoc])
value
function (rec) {
if ('home' in rec) {
return homePage();
} else {
if ('do' in rec) {
switch (rec.do) {
case 'list':
return listProjects ();
case 'edit':
if ('project' in rec) { return editProject (rec.project); }
else { return errorPage ("Cannot edit: no `project` was submitted!"); }
case 'compile':
if ('project' in rec) {
if ('flatcode' in rec) {
return compileProject (rec.project) (rec.flatcode);
} else {
return errorPage ("Cannot compile `" + rec.project + "`, because no `flatcode` was submitted.");
}
} else {
return errorPage ("Cannot compile: no `project` was submitted!");
}
case 'open':
return openProject (rec);
case 'delete':
if ('project' in rec) {
if ('confirmed' in rec) { return deleteProject ([rec.project, rec.confirmed]); }
else { return deleteProject (rec.project); }
} else {
return errorPage ("do=delete is called, but there is no project specified.");
}
case 'create':
return createProject (rec);
case 'move':
return moveProject (rec);
default:
return errorPage ("Unknown `do` value `" + rec.do + "`!");
}
} else {
return errorPage ("Either a `home` or `do` value must be specified!");
}
}
}
info
`TofGui.docProducer(rec)` returns a HTML document, depending on the parameters provided in the record `rec`.
In fact, this function works more like a router for a couple of other functions, namely:
Parameter HTML document is created by
------------- ---------------------------------------------------------------------------------------
`home=*` `homePage()`
`do=edit` `editProject(project)` or `editProject([project, log])`
`do=compile` `compileProject(project)`
`do=list` `listProjects ()`
`do=open` `openProject(rec)` where `rec` is the requested record
`do=delete` `deleteProject(project)` or `deleteProject([project,confirmed])`
`do=create` `createProject (rec)` where `rec` is the requested record
`do=move` `moveProject(rec)` where `rec` is the requested record
Note, that it is possible to move a project. But you cannot delete a project, at least not with this GUI.
If `rec` does not neither have a `home` or `do` property, or if the `do` property does not have one of the defined values (`'edit'`, `'compile'`, etc.), an error is thrown.
---
---
---
// Singular page generators ////////////////////////////////////////////////////////////////////////////
---
---
unit
doc
name
TofGui
header
The Single Page Generators
---
---
unit
value
name
TofGui.homePage
type
$prod0 ($HtmlDoc)
value
function () {
var html
= '' + Logo.chiLambdaCanvas + '
\n'
+ ' The GUI (Graphical User Interface) for editing and managing TofJs projects
\n'
+ '\n'
+ '
home of the TofJs GUI (= this page)
\n'
+ '
list all projects
\n'
+ '
open an existing project
\n'
+ '
create a new project
\n'
+ '
Server root: ' + process.cwd() + '
\n'
;
return Html.htmlDoc
( { title : "Tof.js GUI -- home page"
, css : defaultCss } )
( html ) ;
}
info
`TofGui.homePage()` returns a HTML document of the following layout
+----------------------------------------------------------------------------------------------------------------+
| +---------+ |
| | chi- | |
| | lambda- | |
| | logo | |
| +---------+ |
| |
| The GUI (Graphical User Interface) for editing and managing TofJs projects |
| |
| +------------------------------------------------------------------------------------------------------------+ |
| | | |
| | home of the TofJs GUI (= this page) | |
| | | |
| | list all projects | |
| | | |
| | open an existing project | |
| | | |
| | create a new project | |
| | | |
| +------------------------------------------------------------------------------------------------------------+ |
| Server root: `/path/to/server/root` |
+----------------------------------------------------------------------------------------------------------------+
`TofGui.homePage()` is the HTML page displayed when the `tofgui` server is running and the browser is pointed to
http://localhost:port/?home
From there, you can choose the first steps and choices when managing your [TofJs](http://tofjs.org) projects.
---
unit
value
name
TofGui.errorPage
type
$prod ([$Html, $HtmlDoc])
value
function (html) {
return Html.htmlDoc
( { title : 'Error'
, css : defaultCss } )
( 'home
\n'
+ 'Error
\n'
+ html );
}
info
.....
comment
The `href` value in the `` tag is not yet specified!!!
---
unit
value
name
TofGui.listProjects
type
$prod0 ($HtmlDoc)
value
function () {
var dir = process.cwd();
var branchL = findProjects (dir);
var body = 'home
\n';
if (branchL.length > 0) {
body += ' List of all projects found below ' + dir + '
\n';
body += '\n';
body += '| Project | Project files | \n';
for (var i = 0; i < branchL.length; i++) {
var pi = branchL[i];
body += '
|---|
'
+ '| ' + pi + ' | \n'
+ '' + projectFileList(pi) + ' | \n'
+ ''
+ ' move or copy
'
+ ' delete '
+ ' | \n'
+ '
\n';
}
body += '
\n';
} else {
body += "No tof.js projects found below " + dir + ".
\n";
}
body += 'home
\n';
var htmlDoc = Html.htmlDoc ({css: defaultCss}) (body);
return htmlDoc;
}
info
.....
---
unit
value
name
TofGui.openProject
type
prod ([$rec($null($String)), $HtmlDoc])
value
function (rec) {
var projectDir = rec.projectDir || '.';
var projectL, // e.g. `['foo/pi1', 'foo/pi2', 'bar/bla/bla/proj123']`
subDirL; // e.g. `['foo', 'bar']`
projectL = TofGui.findProjects (projectDir);
try {
subDirL = System.listDir (projectDir);
subDirL = subDirL.filter ( function (id) { return System.isDirectory (System.Path.join ([projectDir, id])); } );
} catch (e) {
return errorPage ( 'Something went wrong in TofGui.openProject(' + rec + ')
'
+ '' + e + '
' );
}
var html = 'home
\n';
html += 'Navigate
\n'
+ ''
+ clickablePathList ({"do":"open", "projectDir":projectDir}, 'projectDir')
+ '
\n';
html += '\n';
for (var i = 0; i < subDirL.length; i++) {
var subDir = System.Path.join ([projectDir, subDirL[i]]);
var href = queryString ([{"do": "open", "projectDir": subDir}]);
html += '- '
+ '' + subDirL[i] + ''
+ '
\n';
}
html += '
\n';
html += 'Available projects under ' + projectDir + '
\n';
html += '\n';
for (var i = 0; i < projectL.length; i++) {
var project = Unit.ProjectName.join ([projectDir, projectL[i]]);
var href = queryString ([{"do": "edit", "project": project}]);
html += '- '
+ '' + projectL[i] + ''
+ '
\n';
}
html += '
\n';
return Html.htmlDoc
( { css: defaultCss
, title: 'open project' } )
( html );
}
info
`TofGui.openProject(rec)` with lists the subdirectories and all projects that can be found under the `rec.projectDir` directory. It does so recursively until a project has been chosen.
---
unit
value
name
TofGui.deleteProject
type
prod ([$singlePlus ([Unit.$ProjectName, $String]), $Boolean])
value
function (args) {
// reconstruct the arguments; `args` is either the project name `pi` or `[pi,confirmed]` with string `confirmed`
var pi = (typeof args === 'string' ? args : args[0]);
var confirmed = (typeof args === 'string' ? false : args[1]);
// delete the project and create the HTML text
var html = 'home
\n'
+ 'list
\n';
if (confirmed) {
html += 'Deleting ' + pi + ' ...
\n';
try {
var n = 0;
for (var i = 0; i < projectFileExtensions.length; i++) {
var ext = projectFileExtensions [i];
if (System.exists (pi + ext)) {
n++;
System.removeFile (pi + ext);
html += '' + pi + ext + ' is deleted
';
}
}
html += '' + pi + ' is deleted and ' + n + ' files were removed.
';
} catch (e) {
return errorPage ( "Something went wrong in deleting project " + pi + "
\n"
+ "
" + e + "
" );
}
} else {
html += 'Are you sure you want to delete the ' + pi + ' project?\n'
+ '
\n';
}
// return the document
return Html.htmlDoc
( { css: defaultCss
, title: 'delete `' + pi + '`' } )
( html );
}
info
.....
---
unit
value
name
TofGui.createProject
type
$prod ([$Rec, $HtmlDoc])
value
function __createProject (rec) {
// normalize the input `rec`
rec.button = rec.button || 'none'; // value of one of the four