Merge branch 'dev'

README.MD

@@ -12,23 +12,24 @@ This project contains the code for the UVL playground, a small website that uses
 
 Compile a new UVLS executable for Linux from [source](https://github.com/Universal-Variability-Language/uvl-lsp) and replace `uvl-playground/WebSocketLanguageServer/lib/uvls`
 
-### Locale Development
+### Local Development
 
-Install a recent version of node and npm, change in the `WebSocketLanguageServer` directory and execute `npm run start:dev`.
+Install a recent version of node and npm, change in the `WebSocketLanguageServer` directory and execute `npm install` and `npm run start:dev`.
 
 ### Deploying
 
-When your changes are added to the master branch, a github action takes care of the deployment.
+When your changes are added to the master or dev branch, a github action takes care of the deployment.
 
 ## Website
 
-### Locale Development
+### Local Development
 
-Install a recent version of node and npm, change to the `WebSocketClient` directory and execute `npm run dev`.
+Install a recent version of node and npm, change to the `WebSocketClient` directory and execute `npm install` and `npm run dev`.
+Hint: npm run dev includes running a shell script that only works under linux. However, this only copies style files to workaround a strange error in development mode of vite. Alternatively, you can run `npm run build` to build the website and then serve the content of `./WebSocketClient/dist` with a webserver of your choice.
 
 ### Deploying
 
-When your changes are added to the master branch, a github action takes care of the deployment.
+When your changes are added to the master or dev branch, a github action takes care of the deployment.
 
 ## Hosting on a different machine
 
@@ -40,7 +41,7 @@ To change the machine on which the playground is hosted, you need to take the fo
 - change the `SSH_PRIVATE_KEY` github secret to the new private key
 - change the variables for hostname, username, email and working directory on the server at the beginning of the workflow files under `.github/workflows`
 
-# Hosting your own uvl playground
+## Hosting your own uvl playground
 
 - To host your own uvl playground setup a machine with docker
 - Clone the repository
@@ -52,6 +53,60 @@ To change the machine on which the playground is hosted, you need to take the fo
 - run `docker compose up --build -d`
 - This will run the uvl playground behind a reverse proxy with letsencrypt certificates
 
-# Hosting your own uvl playground without reverse proxy
-
-- Remove everything treafik related from the docker compose file
+## Hosting your own uvl playground (locally) without letsencrypt
+
+- run `docker compose -f docker-compose-http.yaml up --build -d`
+
+# Directory structure
+
+## WebSocketClient
+
+- contains the website of the playground
+
+```
+WebSocketClient
+├── assets //contains all relevant pictures as well as the example and tutorial feature models
+├── dark_mode_dev_env.sh //script to workaround vite dev error
+├── dist //contains the production build
+├── Dockerfile
+├── index.html
+├── node_modules
+├── package.json
+├── package-lock.json
+├── src
+│   ├── config.ts //configuration for ports etc.
+│   ├── ImportExportFiles.ts //functionality for up- and download of files in the editor
+│   ├── intro.ts //functionality for the playground tour
+│   ├── main.ts
+│   ├── util.ts //mainly for error handling
+│   ├── uvlTutorial.ts //functionality for the UVL Tutorial (content is in assets folder)
+│   └── vite-env.d.ts
+├── style
+│   ├── dropdown.css //styling for the example library drop down
+│   ├── split.css //styling for the split pane
+│   └── style.css
+└── tsconfig.json
+```
+
+## WebSocketLanguageServer
+
+- contains the wrapper for the language server
+
+```
+WebSocketLanguageServer
+├── build //contains the minified production build
+│   ├── config.js
+│   ├── config.js.map
+│   ├── index.js
+│   └── index.js.map
+├── Dockerfile
+├── lib
+│   └── uvls //the language server executable compiled from https://github.com/Universal-Variability-Language/uvl-lsp
+├── node_modules
+├── package.json
+├── package-lock.json
+├── src
+│   ├── config.ts
+│   └── index.ts
+└── tsconfig.json
+```

WebSocketClient/src/examples.ts → WebSocketClient/assets/uvlExamples.ts

@@ -6,9 +6,10 @@ let globalEditor: editor.IStandaloneCodeEditor|null;
 
 export function initExamples(editor: editor.IStandaloneCodeEditor) {
     globalEditor = editor;
-    loadDefaultExample();
-    loadIceCreamExample();
-    loadComputerExample();
+    initExample("Default", defaultExampleText);
+    initExample("Ice Cream", iceCreamExampleText);
+    initExample("Computer", computerExampleText);
+    initExample("Elevator", elevatorExampleText);
 }
 
 const defaultExampleText = `features
@@ -75,42 +76,56 @@ constraints
     Dedicated => Liquid
     sum(powerConsumption) > 300 => StrongPSU`
 
-function loadDefaultExample() {
-    const button: HTMLButtonElement|null = document.querySelector("#defaultExample");
-    if(button){
-        button.onclick = () => {
-            const opsModel = globalEditor?.getModel();
-            if (opsModel) {
-                const fullModelRange = opsModel.getFullModelRange();
-                const operation: IIdentifiedSingleEditOperation = {text: defaultExampleText, range: fullModelRange};
-                opsModel.applyEdits([operation], false);
-            }
-        }
-    }
-}
+const elevatorExampleText = `//Example from FeatureIDE Book
+features
+    Elevator {abstract}
+        mandatory
+            Behavior {abstract}
+                mandatory
+                    Modes {abstract}
+                        alternative
+                            Sabbath
+                            FIFO
+                            ShortestPath
+                optional
+                    Service
+                    Priorities {abstract}
+                        or
+                            RushHour
+                            FloorPriority
+                            PersonPriority
+        optional
+            VoiceOutput
+            CallButtons {abstract}
+                alternative
+                    DirectedCall
+                    UndirectedCall
+            Security {abstract}
+                mandatory
+                    Permission {abstract}
+                        or
+                            FloorPermission
+                            PermissionControl
+            Safety {abstract}
+                optional
+                    Overloaded
 
-function loadIceCreamExample() {
-    const button: HTMLButtonElement|null = document.querySelector("#iceCreamExample");
-    if(button){
-        button.onclick = () => {
-            const opsModel = globalEditor?.getModel();
-            if (opsModel) {
-                const fullModelRange = opsModel.getFullModelRange();
-                const operation: IIdentifiedSingleEditOperation = {text: iceCreamExampleText, range: fullModelRange};
-                opsModel.applyEdits([operation], false);
-            }
-        }
-    }
-}
+constraints
+    CallButtons | Sabbath
+    DirectedCall => ShortestPath
+    UndirectedCall => FIFO | ShortestPath`
 
-function loadComputerExample() {
-    const button: HTMLButtonElement|null = document.querySelector("#computerExample");
-    if(button){
+function initExample(name: string, content: string){
+    const dropdown = document.getElementById("examples-dropdown");
+    const button = document.createElement("button");
+    if(dropdown){
+        dropdown.appendChild(button);
+        button.innerText = name; 
         button.onclick = () => {
             const opsModel = globalEditor?.getModel();
             if (opsModel) {
                 const fullModelRange = opsModel.getFullModelRange();
-                const operation: IIdentifiedSingleEditOperation = {text: computerExampleText, range: fullModelRange};
+                const operation: IIdentifiedSingleEditOperation = {text: content, range: fullModelRange};
                 opsModel.applyEdits([operation], false);
             }
         }