added user config for dark mode and navigation

client/Accounts/UserMgmt/userInfoModal.js

@@ -10,13 +10,16 @@ Template.userInfoModal.onRendered(function() {
     Session.set("userEmailErr", false);
     Session.set("userRoleErr", false);
 
-    Meteor.setTimeout(() => {
+    var elems = document.querySelectorAll('.modal');
-        var elems = document.querySelectorAll('.modal');
+    var instances = M.Modal.init(elems, {});
-        var instances = M.Modal.init(elems, {});
 
-        var elemse = document.querySelectorAll('select');
+    var elemse = document.querySelectorAll('select');
-        var instancese = M.FormSelect.init(elemse, {});
+    var instancese = M.FormSelect.init(elemse, {});
-    }, 350);
+
+    Meteor.setTimeout(() => {
+        instances = M.Modal.init(elems, {});
+        instancese = M.FormSelect.init(elemse, {});
+    }, 500);
 });
 
 Template.userInfoModal.helpers({

client/General/headerBar.html

@@ -11,6 +11,7 @@
               <li><a href="#" id="mylists" class="navBtn">My Lists</a></li>
               <li><a href="#" id="mymenus" class="navBtn">My Menus</a></li>
               <li><a href="#" id="myTasks" class="navBtn">My Tasks</a></li>
+              <li><a href="#" class="navBtn" id="mySettings">My Settings</a></li>
               {{#if isInRole 'systemadmin'}}
                 <li><a href="#" id="manage" class="navBtn">Manage</a></li>
               {{/if}}
@@ -26,6 +27,7 @@
         <li><a href="#!" id="mylists" class="navBtn">My Lists</a></li>
         <li><a href="#!" id="mymenus" class="navBtn">My Menus</a></li>
         <li><a href="#!" id="myTasks" class="navBtn">My Tasks</a></li>
+        <li><a href="#!" class="navBtn" id="mySettings">My Settings</a></li>
         {{#if isInRole 'systemadmin'}}
           <li><a href="#!" id="manage" class="navBtn">Manage</a></li>
         {{/if}}

client/MainLayout.js

@@ -9,7 +9,7 @@ Template.MainLayout.onRendered(function() {
         let myId = Meteor.userId();
         let myprefs = UserConfig.findOne({ user: myId });
         if (typeof myprefs != 'undefined') {
-            if (myprefs.darkPref == "light") {
+            if (myprefs.darkMode == "light") {
                 console.log("Found theme as light");
                 // Session.set("myTheme", "light");
                 document.documentElement.setAttribute('theme', "light");

client/UserConfig/userConfig.html

@@ -1,3 +1,21 @@
 <template name="userConfig">
-
+    <h4>My Settings</h4>
+    <div class="row">
+        <div class="col s12 m6 l4">
+            <div class="card">
+                <div class="card-content">
+                  <span class="card-title">Dark / Light Mode</span>
+                  <div class="switch">
+                    <label>
+                      Light
+                      <input type="checkbox" id="darkMode">
+                      <span class="lever"></span>
+                      Dark
+                    </label>
+                  </div>
+                </div>
+              </div>
+        </div>
+    </div>
+    {{> snackbar}}
 </template>

client/UserConfig/userConfig.js

@@ -5,7 +5,15 @@ Template.userConfig.onCreated(function() {
 });
 
 Template.userConfig.onRendered(function() {
-
+    let myConfig = UserConfig.findOne({ user: Meteor.userId() });
+    if (typeof myConfig != 'undefined') {
+        console.log("My Pref: " + myConfig.darkPref);
+        if (myConfig.darkMode == 'light') {
+            $("#darkMode").prop('checked', false);
+        } else {
+            $("#darkMode").prop('checked', true);
+        }
+    }
 });
 
 Template.userConfig.helpers({
@@ -13,5 +21,24 @@ Template.userConfig.helpers({
 });
 
 Template.userConfig.events({
-
+    'click #darkMode' (event) {
+        let darkModePref = $("#darkMode").prop('checked');
+        if (darkModePref == true) {
+            Meteor.call('update.darkModePref', 'dark', function(err, reuslt) {
+                if (err) {
+                    console.log("    ERROR: could not set dark mode preference to dark: " + err);
+                } else {
+                    showSnackbar("Dark Mode Preference Set to Dark", "green");
+                }
+            });
+        } else {
+            Meteor.call('update.darkModePref', 'light', function(err, result) {
+                if (err) {
+                    console.log("    ERROR: could not set dark mode preference to light: " + err);
+                } else {
+                    showSnackbar("Dark Mode Preference Set to Light", "green");
+                }
+            });
+        }
+    },
 });

imports/api/userConfig.js

@@ -32,11 +32,20 @@ Meteor.methods({
             throw new Meteor.Error('Not able to change registration setting. Make sure you are logged in with valid system administrator credentials.');
         }
 
-        return UserConfig.update({ user: this.userId }, {
+        let myConfig = UserConfig.findOne({ user: this.userId });
-            $set: {
+        if (typeof myConfig == 'undefined') {
-                darkMode: pref,
+            Meteor.call('add.darkModePref', pref, function(err, result) {
-                dateUpdate: Date()
+                if (err) {
-            }
+                    console.log("    ERROR calling the add functioin for dark mode: " + err);
-        });
+                } 
+            });
+        } else {
+            return UserConfig.update({ user: this.userId }, {
+                $set: {
+                    darkMode: pref,
+                    dateUpdate: Date()
+                }
+            });
+        }
     }
 });

lib/routes.js

@@ -122,4 +122,11 @@ FlowRouter.route('/cleanUp', {
     action() {
         BlazeLayout.render('MainLayout', { main: 'cleanUp'});
     }
+});
+
+FlowRouter.route('/mySettings', {
+    name: 'mySettings',
+    action() {
+        BlazeLayout.render('MainLayout', { main: 'userConfig'});
+    }
 });