Use slim socketio again (this time with .map file) change socket behavior

app/static/js/nopaque.js

@@ -5,7 +5,7 @@
 var nopaque = {};
 
 // nopaque ressources
-nopaque.socket = io();
+nopaque.socket = undefined;
 
 nopaque.corpora = undefined;
 nopaque.corporaSubscribers = [];
@@ -17,8 +17,71 @@ nopaque.foreignCorporaSubscribers = [];
 nopaque.foreignJobs = undefined;
 nopaque.foreignJobsSubscribers = [];
 
+nopaque.user = {};
+nopaque.user.isAuthenticated = undefined;
+nopaque.user.settings = {}
+nopaque.user.settings.darkMode = undefined;
+
+nopaque.flashedMessages = []
 
 // nopaque functions
+nopaque.socket = {};
+nopaque.socket.init = function() {
+  nopaque.socket = io();
+  // Add event handlers
+  nopaque.socket.on("corpora_init", function(msg) {
+    nopaque.corpora = JSON.parse(msg);
+    for (let subscriber of nopaque.corporaSubscribers) {subscriber._init(nopaque.corpora);}
+  });
+
+  nopaque.socket.on("jobs_init", function(msg) {
+    nopaque.jobs = JSON.parse(msg);
+    for (let subscriber of nopaque.jobsSubscribers) {subscriber._init(nopaque.jobs);}
+  });
+
+  nopaque.socket.on("corpora_update", function(msg) {
+    var patch;
+
+    patch = JSON.parse(msg);
+    nopaque.corpora = jsonpatch.apply_patch(nopaque.corpora, patch);
+    for (let subscriber of nopaque.corporaSubscribers) {subscriber._update(patch);}
+  });
+
+  nopaque.socket.on("jobs_update", function(msg) {
+    var patch;
+
+    patch = JSON.parse(msg);
+    nopaque.jobs = jsonpatch.apply_patch(nopaque.jobs, patch);
+    for (let subscriber of nopaque.jobsSubscribers) {subscriber._update(patch);}
+  });
+
+  nopaque.socket.on("foreign_corpora_init", function(msg) {
+    nopaque.foreignCorpora = JSON.parse(msg);
+    for (let subscriber of nopaque.foreignCorporaSubscribers) {subscriber._init(nopaque.foreignCorpora);}
+  });
+
+  nopaque.socket.on("foreign_jobs_init", function(msg) {
+    nopaque.foreignJobs = JSON.parse(msg);
+    for (let subscriber of nopaque.foreignJobsSubscribers) {subscriber._init(nopaque.foreignJobs);}
+  });
+
+  nopaque.socket.on("foreign_corpora_update", function(msg) {
+    var patch;
+
+    patch = JSON.parse(msg);
+    nopaque.foreignCorpora = jsonpatch.apply_patch(nopaque.foreignCorpora, patch);
+    for (let subscriber of nopaque.foreignCorporaSubscribers) {subscriber._update(patch);}
+  });
+
+  nopaque.socket.on("foreign_jobs_update", function(msg) {
+    var patch;
+
+    patch = JSON.parse(msg);
+    nopaque.foreignJobs = jsonpatch.apply_patch(nopaque.foreignJobs, patch);
+    for (let subscriber of nopaque.foreignJobsSubscribers) {subscriber._update(patch);}
+  });
+}
+
 nopaque.Workarounds = {};
 nopaque.Workarounds.apply = function() {
   // Disable all option elements with no value
@@ -128,66 +191,6 @@ nopaque.toast = function(message, color="") {
 }
 
 
-// socket event handlers
-nopaque.socket.on("corpora_init", function(msg) {
-  nopaque.corpora = JSON.parse(msg);
-  for (let subscriber of nopaque.corporaSubscribers) {subscriber._init(nopaque.corpora);}
-});
-
-
-nopaque.socket.on("jobs_init", function(msg) {
-  nopaque.jobs = JSON.parse(msg);
-  for (let subscriber of nopaque.jobsSubscribers) {subscriber._init(nopaque.jobs);}
-});
-
-
-nopaque.socket.on("corpora_update", function(msg) {
-  var patch;
-
-  patch = JSON.parse(msg);
-  nopaque.corpora = jsonpatch.apply_patch(nopaque.corpora, patch);
-  for (let subscriber of nopaque.corporaSubscribers) {subscriber._update(patch);}
-});
-
-
-nopaque.socket.on("jobs_update", function(msg) {
-  var patch;
-
-  patch = JSON.parse(msg);
-  nopaque.jobs = jsonpatch.apply_patch(nopaque.jobs, patch);
-  for (let subscriber of nopaque.jobsSubscribers) {subscriber._update(patch);}
-});
-
-
-nopaque.socket.on("foreign_corpora_init", function(msg) {
-  nopaque.foreignCorpora = JSON.parse(msg);
-  for (let subscriber of nopaque.foreignCorporaSubscribers) {subscriber._init(nopaque.foreignCorpora);}
-});
-
-
-nopaque.socket.on("foreign_jobs_init", function(msg) {
-  nopaque.foreignJobs = JSON.parse(msg);
-  for (let subscriber of nopaque.foreignJobsSubscribers) {subscriber._init(nopaque.foreignJobs);}
-});
-
-
-nopaque.socket.on("foreign_corpora_update", function(msg) {
-  var patch;
-
-  patch = JSON.parse(msg);
-  nopaque.foreignCorpora = jsonpatch.apply_patch(nopaque.foreignCorpora, patch);
-  for (let subscriber of nopaque.foreignCorporaSubscribers) {subscriber._update(patch);}
-});
-
-
-nopaque.socket.on("foreign_jobs_update", function(msg) {
-  var patch;
-
-  patch = JSON.parse(msg);
-  nopaque.foreignJobs = jsonpatch.apply_patch(nopaque.foreignJobs, patch);
-  for (let subscriber of nopaque.foreignJobsSubscribers) {subscriber._update(patch);}
-});
-
 document.addEventListener("DOMContentLoaded", function() {
   nopaque.Workarounds.apply();
   M.AutoInit();
@@ -196,5 +199,14 @@ document.addEventListener("DOMContentLoaded", function() {
                   {alignment: "right", constrainWidth: false, coverTrigger: false});
   nopaque.Forms.init();
   nopaque.Navigation.init();
-  nopaque.socket.emit("user_ressources_init");
+  while (nopaque.flashedMessages.length) {
+    nopaque.toast(nopaque.flashedMessages.shift().message);
+  }
+  if (nopaque.user.isAuthenticated) {
+    if (nopaque.user.settings.darkMode) {
+      DarkReader.enable({"brightness": 150, "contrast": 100, "sepia": 0});
+    }
+    nopaque.socket.init();
+    nopaque.socket.emit("user_ressources_init");
+  }
 });

app/templates/nopaque.html.j2

@@ -45,9 +45,16 @@
     <script src="{{ url_for('static', filename='js/JSONPatch.js/jsonpatch.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/Dark_Reader/darkreader.js') }}"></script>
     <script src="{{ url_for('static', filename='js/List.js/list.min.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/Socket.IO/socket.io.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/Socket.IO/socket.io.slim.js') }}"></script>
     <script src="{{ url_for('static', filename='js/nopaque.js') }}"></script>
     <script src="{{ url_for('static', filename='js/nopaque.lists.js') }}"></script>
+    <script>
+      nopaque.user.isAuthenticated = {{ current_user.is_authenticated|tojson }};
+      nopaque.user.settings.darkMode = {{ (current_user.is_authenticated and current_user.is_dark)|tojson }};
+      {% for category, message in get_flashed_messages(with_categories=true) %}
+      nopaque.flashedMessages.push({category: {{ category|tojson }}, message: {{ message|tojson }}});
+      {% endfor %}
+    </script>
   </head>
   <body>
     <header>
@@ -88,7 +95,7 @@
         {% endif %}
       </ul>
 
-      <ul id="sidenav-main" class="sidenav sidenav-fixed hide">
+      <ul id="sidenav-main" class="sidenav sidenav-fixed{% if not current_user.is_authenticated %} hide{% endif %}">
         <li><a href="{{ url_for('main.index') }}"><i class="material-icons">opacity</i>nopaque</a></li>
         <li><a href="#"><i class="material-icons">linear_scale</i>Workflow</a></li>
         <li><a href="{{ url_for('main.dashboard') }}"><i class="material-icons">dashboard</i>Dashboard</a></li>
@@ -220,18 +227,8 @@
     <script src="{{ url_for('static', filename='js/Materialize/materialize.min.js') }}"></script>
     <script>
       document.addEventListener("DOMContentLoaded", function() {
-        {% if current_user.is_authenticated and current_user.is_dark %}
+
-        DarkReader.enable({"brightness": 150, "contrast": 100, "sepia": 0});
-        {% endif %}
-        {% for flashed_message in get_flashed_messages() %}
-        nopaque.toast("{{ flashed_message }}");
-        {% endfor %}
       });
     </script>
-    {% if current_user.is_authenticated %}
-    <script>
-      document.getElementById("sidenav-main").classList.remove("hide");
-    </script>
-    {% endif %}
   </body>
 </html>