Finish up frontend for now

backend/server.js

@@ -7,7 +7,7 @@ import ws from "express-ws";
 import _ from "lodash";
 
 import * as api from "./api.js";
-import { aliases, langs } from "./langs.js";
+import { aliases, langsPromise } from "./langs.js";
 import * as util from "./util.js";
 import { log, privilegedTeardown } from "./util.js";
 
@@ -17,6 +17,7 @@ const tlsPort = parseInt(process.env.TLS_PORT || "") || 6120;
 const useTLS = process.env.TLS ? true : false;
 const fathomSiteId = process.env.FATHOM_SITE_ID || "";
 
+const langs = await langsPromise;
 const app = express();
 
 app.set("query parser", (qs) => new URLSearchParams(qs));

frontend/pages/app.ejs

@@ -38,6 +38,9 @@
           <span style="display: inline-block; vertical-align: middle; margin-left: 6px; padding-top: 2px">
             <b>Riju :: <%= config.name %></b>
           </span>
+          <span style="display: inline-block; vertical-align: middle; margin-left: 6px; padding-top: 2px">
+            <i id="connectionStatus" style="color: lightgray"></i>
+          </span>
           <span style="display: inline-block; vertical-align: middle; height: 100%"></span>
           <button id="runButton" type="button" class="button is-small is-success is-pulled-right">
             <span>Run</span>

frontend/src/app.js

@@ -24,6 +24,7 @@ const config = window.rijuConfig;
 const formatButton = document.getElementById("formatButton");
 const lspButton = document.getElementById("lspButton");
 const lspButtonState = document.getElementById("lspButtonState");
+const connectionStatus = document.getElementById("connectionStatus");
 
 function closeModal() {
   document.querySelector("html").classList.remove("is-clipped");
@@ -150,6 +151,7 @@ async function main() {
     serviceLogLines = {};
     let clientDisposable = null;
     let servicesDisposable = null;
+    connectionStatus.innerText = "connecting...";
     console.log("Connecting to server...");
     socket = new WebSocket(
       (document.location.protocol === "http:" ? "ws://" : "wss://") +
@@ -157,6 +159,7 @@ async function main() {
         `/api/v1/ws?lang=${encodeURIComponent(config.id)}`
     );
     socket.addEventListener("open", () => {
+      connectionStatus.innerText = "connected";
       console.log("Successfully connected to server");
     });
     socket.addEventListener("message", (event) => {
@@ -345,10 +348,12 @@ async function main() {
         servicesDisposable.dispose();
         servicesDisposable = null;
       }
-      lspButton.disabled = false;
-      lspButton.classList.remove("is-loading");
-      lspButton.classList.add("is-light");
-      lspButtonState.innerText = "DISCONNECTED";
+      if (lspButtonState.innerText === "ON") {
+        lspButton.disabled = false;
+        lspButton.classList.remove("is-loading");
+        lspButton.classList.add("is-light");
+        lspButtonState.innerText = "DISCONNECTED";
+      }
       scheduleConnect();
     });
   }