Provide full frontend API documentation

README.md

@@ -17,7 +17,10 @@ In this section we are going to explore the various pre-made components this pro
 Generally these components connect to a TFW event handler running on the backend.
 Communication is handled via simpe APIs exposed by these event handlers – over TFW messages.
 
-These APIs are documented in the [baseimage-tutorial-framework](https://github.com/avatao-content/baseimage-tutorial-framework) repository as docstrings in the [lib/tfw/components](https://github.com/avatao-content/baseimage-tutorial-framework/tree/master/lib/tfw/components) directory (this is where the implementations of our pre-written event handlers live).
+These APIs are documented in the [baseimage-tutorial-framework](https://github.com/avatao-content/baseimage-tutorial-framework) repository README and as docstrings in the [lib/tfw/components](https://github.com/avatao-content/baseimage-tutorial-framework/tree/master/lib/tfw/components) directory (this is where the implementations of our pre-written event handlers live).
+
+Frontend components expose APIs as well (e.g. changing layouts).
+These are documented in the API section of this README.
 
 ## Configuration
 
@@ -26,19 +29,6 @@ Generally it is unadvised to directly modify the source code of our pre-written
 For this reason most components are extensively configurable through the `src/app/config.ts` file.
 These configurations range from the enabling of different layouts to how frequently should our IDE save automatically.
 
-Many configuration options are changeable dynamically using API messages sent from the backend, like so:
-
-```
-{ 
-    "key": ...component name...,
-    "data":
-    {
-        "command": ...configuration key...,
-        "value": ...
-    }
-}
-```
-
 Should you encounter any missing features, feel free to contact team TFW and we'll consider implementing them as configuration options (a common example would be making a configuration option dynamic).
 
 ### Terminal (webshell)
@@ -90,47 +80,12 @@ To configure which process the button should restart edit `ide.deployProcessName
 This is a simple chat-like component you can use to instruct, help and guide your users.
 It displays messages sent to the frontend with the key `message.`
 
-The message format used: 
-```
-{ 
-    "key": "message",
-    "data":
-    {
-        "originator": ...,
-        "message": ...
-    }
-}
-```
-
 This component can be used as a simple chatbot as well.
 
 You can provide a list of messages to queue and they will be automatically displayed one after the other.
 There is a wait time between each message so that the user can properly read them.
 This wait time is calculated from the length of the last message, and can be configured using the `messages.messageQueueWPM` key in `config.ts`.
 
-You can queue messages like so:
-
-```
-{
-    "key": "queueMessages",
-    "data":
-    {
-        "messages":
-        [
-            {
-                "originator": ...
-                "message": ...
-            },
-            {
-                "originator": ...
-                "message": ...
-            },
-            ...
-        ]
-    }
-}
-```
-
 You can use the `MessageSender` class to send messages from the TFW server or event handlers written in Python.
 
 ### Web – customisable component
@@ -170,15 +125,120 @@ Available layouts– with self explaining names:
 - `ide-only`
 - `web-only`
 
-The dashboard also exposes a frontend API to dynamically change layouts any time using a message format as such (note that the layout you switch to must be enabled):
 
+## API
+
+Supported frontend APIs are documented here.
+
+### Dynamic configuration
+
+Many configuration options are changeable dynamically, like so (these are stuff from `config.ts`):
+```
+{ 
+    "key": ...component name...,
+    "data":
+    {
+        "command": ...configuration key...,
+        "value": ...
+    }
+}
+```
+
+### Messages
+
+To send a messages message you can use the following message:
+```
+{ 
+    "key": "message",
+    "data":
+    {
+        "originator": ...string...,
+        "message": ...string...
+    }
+}
+```
+
+You can queue a list of messages like so:
+```
+{
+    "key": "queueMessages",
+    "data":
+    {
+        "messages":
+        [
+            {
+                "originator": ...string...,
+                "message": ...string...
+            },
+            {
+                "originator": ...string...,
+                "message": ...string...
+            },
+            ...
+        ]
+    }
+}
+```
+
+### Dashboard
+
+Changing layouts is possible using the following message (note that the layout you switch to must be enabled):
 ```
 { 
     "key": "dashboard",
     "data":
     {
         "command": "layout",
-        "value": ...
+        "value": ...string...
     }
 }
-```
+```
+
+You can hide and show the messages component with the following message:
+```
+{ 
+    "key": "dashboard",
+    "data":
+    {
+        "command": "hideMessages",
+        "value": ...boolean...
+    }
+}
+```
+
+To switch between the terminal and console use this message (where `value` is `terminal` or `console`:
+```
+{ 
+    "key": "dashboard",
+    "data":
+    {
+        "command": "terminalMenuItem",
+        "value": ...string...
+    }
+}
+```
+
+### Console
+
+You can write to the console like so (this is only practical when `rewriteContentWithProcessLogsOnDeploy` equals an empty string):
+```
+{ 
+    "key": "console",
+    "data":
+    {
+        "command": "write",
+        "content": ...string...
+    }
+}
+```
+
+Reading the contents is also possible:
+```
+{ 
+    "key": "console",
+    "data":
+    {
+        "command": "read"
+    }
+}
+```