Add better error reports if the data server is inaccessible and if no…

…t all data is ready. Closes #68
slmnio · Oct 12, 2021 · 30cdd18 · 30cdd18
1 parent 9da9871
commit 30cdd18
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 3 deletions.
diff --git a/server/src/airtable-interface.js b/server/src/airtable-interface.js
@@ -9,6 +9,32 @@ const chalk = require("chalk");
 
 const logUpdates = false;
 
+
+/***
+ * @type {Server}
+ */
+let io = null;
+let _isRebuilding = true;
+function setup(_io) {
+    io = _io;
+
+    io.on("connect", (socket) => {
+        io.emit("server_rebuilding", _isRebuilding);
+    });
+
+    return this;
+}
+
+function setRebuilding(isRebuilding) {
+    _isRebuilding = isRebuilding;
+    if (isRebuilding) {
+        io.emit("server_rebuilding", true);
+    } else {
+        io.emit("server_rebuilding", false);
+    }
+}
+
+
 // Starting with syncing Matches
 
 // const tables = ["Matches", "Teams", "Themes", "Events", "Players", "Player Relationships"];
@@ -109,6 +135,8 @@ function t(ms) {
     });
 }
 
+let firstRun = true;
+
 async function sync() {
     for (let table of staticTables) {
         await processTableData(table, await getAllTableData(table), true);
@@ -120,6 +148,8 @@ async function sync() {
         setInterval(async () => processTableData(table, await getAllTableData(table)), 30 * 1000);
         registerUpdater(table);
     }
+    if (firstRun) setRebuilding(false);
+    firstRun = false;
 }
 
 sync();
@@ -131,5 +161,6 @@ module.exports = {
     },
     async select(table, filter) {
         return await slmngg(table).select(filter).all();
-    }
+    },
+    setup
 };
diff --git a/server/src/index.js b/server/src/index.js
@@ -42,7 +42,7 @@ const auction = require("./discord/new_auction.js")({
 
 
 const Cache = (require("./cache.js")).setup(io);
-require("./airtable-interface.js");
+(require("./airtable-interface.js")).setup(io);
 
 app.use(bodyParser.urlencoded({ extended: true }));
 

diff --git a/website/src/components/website/WebsiteNav.vue b/website/src/components/website/WebsiteNav.vue
@@ -1,5 +1,12 @@
 <template>
     <div class="website-nav">
+
+        <WebsiteNavBanner class="bg-danger" v-if="showDisconnectedMessage">
+            <i class="fas fa-wifi-slash fa-fw mr-1"></i> <b>No connection to the data server.</b> Don't refresh, we're trying to reconnect...
+        </WebsiteNavBanner>
+        <WebsiteNavBanner class="bg-warning text-dark" v-if="showRebuildingMessage">
+            <i class="fas fa-spinner fa-pulse fa-fw mr-1"></i> <b>Server rebuilding</b>: The server is rebuilding its data store. Some pages might not be accessible.</WebsiteNavBanner>
+
 <!--        <WebsiteNavBanner v-if="siteMode === 'live' || siteMode === 'production'" class="bg-primary text-white">-->
 <!--            <b><a href="https://github.com/slmnio/slmngg-sfc" class="text-light">Welcome to the new SLMN.GG!</a></b> Completely rewritten to be faster, cleaner and better. Please be patient with any teething problems from the big switch over.-->
 <!--        </WebsiteNavBanner>-->
@@ -9,6 +16,7 @@
         <WebsiteNavBanner v-if="siteMode === 'local'" class="bg-primary text-light">
             SLMN.GG is running in local development mode.
         </WebsiteNavBanner>
+<!--       example: <WebsiteNavBanner class="bg-success" v-if="$socket.connected">Connected to the data server for live data updates!</WebsiteNavBanner>-->
 
         <b-navbar toggleable="lg" type="dark">
             <router-link class="navbar-brand " to="/">
@@ -72,6 +80,9 @@ export default {
         NavLiveMatch
     },
     props: ["minisite"],
+    data: () => ({
+        pageNoLongerNew: false
+    }),
     computed: {
         liveMatches() {
             return ReactiveRoot("special:live-matches", {
@@ -126,8 +137,21 @@ export default {
             // console.log("[theme]", theme);
             if (!theme) return null;
             return getImage(theme.small_logo) || getImage(theme.default_logo);
+        },
+        showDisconnectedMessage() {
+            return this.pageNoLongerNew && this.$socket.disconnected;
+        },
+        showRebuildingMessage() {
+            if (this.showDisconnectedMessage) return false;
+            return this.$root.isRebuilding;
         }
     },
+    mounted() {
+        setTimeout(() => {
+            // ignore if the socket is disconnected for the first 3 seconds of loading
+            this.pageNoLongerNew = true;
+        }, 3000);
+    },
     methods: {
         slmnggURL(page) {
             return `${this.slmnggDomain}/${page}`;

diff --git a/website/src/main.js b/website/src/main.js
@@ -111,6 +111,10 @@ const app = new Vue({
         data_update(d) {
             // handled by vuex
             console.log("[socket]", "data_update", d);
+        },
+        server_rebuilding(x) {
+            console.log("rebuilding", x);
+            this.isRebuilding = x;
         }
     },
     metaInfo: {
@@ -120,7 +124,11 @@ const app = new Vue({
             { rel: "icon", href: "https://slmn.io/slmn-new.png" }
         ]
     },
-    data: () => ({ interval: null, minisiteEventStatus: subdomain ? "loading" : null }),
+    data: () => ({
+        interval: null,
+        minisiteEventStatus: subdomain ? "loading" : null,
+        isRebuilding: false
+    }),
     mounted() {
         console.log("[app]", "subdomain", subdomain);
         if (subdomain) {