Merge pull request #196 from zusorio/local-dev-wrong-dataserver-warning

Warn in local development when using non-local data server

website/src/components/website/WebsiteNav.vue

@@ -16,8 +16,9 @@
         <WebsiteNavBanner v-if="siteMode === 'staging'" class="bg-warning text-dark">
             <b><a href="https://github.com/slmnio/slmngg-sfc" class="text-dark">Beta development version:</a></b> things may break. Use <a href="https://slmn.gg" class="text-dark font-weight-bold">slmn.gg</a> for the latest stable update.
         </WebsiteNavBanner>
-        <WebsiteNavBanner v-if="siteMode === 'local'" class="bg-primary text-light">
-            SLMN.GG is running in local development mode.
+        <WebsiteNavBanner v-if="siteMode === 'local'" class="text-light bg-primary">
+            <i v-if="dataServerMode !== 'local'" class="fas fa-exclamation-triangle fa-fw mr-1"></i>
+            SLMN.GG is running in local development mode<strong v-if="dataServerMode !== 'local'"> but not using a local data server</strong>.
         </WebsiteNavBanner>
 <!--       example: <WebsiteNavBanner class="bg-success" v-if="$socket.connected">Connected to the data server for live data updates!</WebsiteNavBanner>-->
 
@@ -148,6 +149,10 @@ export default {
         siteMode() {
             return import.meta.env.VITE_DEPLOY_MODE || import.meta.env.NODE_ENV;
         },
+        dataServerMode() {
+            const dataServerURL = new URL(import.meta.env.VITE_DATA_SERVER);
+            return ["localhost", "127.0.0.1"].includes(dataServerURL.hostname) ? "local" : "remote";
+        },
         navbarEvents() {
             if (!this.minisite?.id) return [];
             const events = ReactiveRoot(this.minisite.id, {