---
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
= '
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() + '
' + dir + '
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'
+ '
" + dir + "
.Something went wrong in TofGui.openProject(' + rec + ')
' + e + '' ); } var html = '\n'; html += '
' + clickablePathList ({"do":"open", "projectDir":projectDir}, 'projectDir') + '
\n'; html += '' + projectDir + '
' + pi + '
... ' + pi + ext + '
is deleted
' + pi + '
is deleted and ' + n + ' files were removed.
Something went wrong in deleting project " + pi + "
\n" + "
" + e + "" ); } } else { html += '
' + pi + '
project?