From cdfb7915beee2c9119f30499457c34b20c59bc9a Mon Sep 17 00:00:00 2001
From: Radon Rosborough <radon.neon@gmail.com>
Date: Sun, 15 Aug 2021 17:57:54 -0700
Subject: [PATCH] Finish up frontend for now

---
 backend/server.js      |  3 ++-
 frontend/pages/app.ejs |  3 +++
 frontend/src/app.js    | 13 +++++++++----
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/backend/server.js b/backend/server.js
index 3125bf1..c65b75c 100644
--- a/backend/server.js
+++ b/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));
diff --git a/frontend/pages/app.ejs b/frontend/pages/app.ejs
index f08be09..b2db5a3 100644
--- a/frontend/pages/app.ejs
+++ b/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>
diff --git a/frontend/src/app.js b/frontend/src/app.js
index 1036ed0..d5f0e43 100644
--- a/frontend/src/app.js
+++ b/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();
     });
   }