git

SoftVarE-Group · Dec 5, 2023 · de448bc · de448bc
2 parents a62663d + d37ed30
commit de448bc
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 0 deletions.
diff --git a/WebSocketClient/index.html b/WebSocketClient/index.html
@@ -13,14 +13,30 @@
         <h1>UVL Playground</h1>
         <h2 id="connection" style="color: red;"></h2>
     </div>
+    <div>
+        <dialog id="dialog">
+            <div>
+                <button autofocus id="modalClose">X</button>
+            </div>
+            <h1>Get the UVLS VSCode Extension</h1>
+            <p>You are trying to access the Configuration Page for Feature Models.
+                As by now, the Web-Playground does not support this, but it is available in the VSCode Extension!
+                Here is a preview:
+            </p>
+            <img src="https://raw.githubusercontent.com/Universal-Variability-Language/uvl-lsp/master/img/show_editor.gif" id="gif_in_dialog" alt="Preview">
+            <p>Get the extension <a href="https://marketplace.visualstudio.com/items?itemName=caradhras.uvls-code">here</a></p>
+        </dialog>
+    </div>
     <div class="splitter">
         <div id="first">
             <div id="container" class="editor"></div>
         </div>
         <div id="separator" ></div>
+
         <div id="second">
             <div class="graph"></div>
 
+
         </div>
     </div>
 

diff --git a/WebSocketClient/src/main.ts b/WebSocketClient/src/main.ts
@@ -123,6 +123,12 @@ const createLanguageClient = (transports: MessageTransports): MonacoLanguageClie
                 executeCommand(command, args, next) {
                     const information = {command: command, arguments: args};
                     if(command === "uvls/open_config") {
+                        const dialog: HTMLDialogElement | null = document.querySelector("#dialog")
+                        const modalClose: HTMLButtonElement | null = document.querySelector('#modalClose');
+                        if(modalClose){
+                            modalClose.onclick = () => dialog?.close();
+                        }
+                        dialog?.showModal();
                         //we do not support config view
                         return;
                     }

diff --git a/WebSocketClient/style.css b/WebSocketClient/style.css
@@ -28,6 +28,41 @@ body {
   overflow: scroll;
 }
 
+::backdrop {
+  background-image: linear-gradient(
+          45deg,
+          darkgray,
+          black
+  );
+  opacity: 0.75;
+}
+
+#dialog {
+  background: #1e1e1e;
+  color: white;
+  width: 50vw;
+  height: 70vh;
+
+  #gif_in_dialog {
+    display: block;
+    margin: 10px auto;
+    max-width: 40vw;
+    min-width: 20vw;
+  }
+
+  & div {
+    text-align: right;
+
+    & button {
+      color: white;
+      background: #1e1e1e;
+      border: none;
+      font-size: 20pt;
+    }
+  }
+}
+
+
 h1 {
   font-size: 30px;
   margin-bottom: 20px;