Very initial work at togglable darktheme.

Dammit @alexdaniel654 just when I had my scope creep kinda under control. It'll be v. nice to have though...!

RIGS/static/js/alert.js

@@ -1,6 +1,6 @@
 /*!
-  * Bootstrap alert.js v4.4.1 (https://getbootstrap.com/)
-  * Copyright 2011-2019 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Bootstrap alert.js v4.5.0 (https://getbootstrap.com/)
+  * Copyright 2011-2020 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
   */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("jquery"),require("./util.js")):"function"==typeof define&&define.amd?define(["jquery","./util.js"],t):(e=e||self).Alert=t(e.jQuery,e.Util)}(this,(function(e,t){"use strict";function n(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var r=e.fn.alert,o={CLOSE:"close.bs.alert",CLOSED:"closed.bs.alert",CLICK_DATA_API:"click.bs.alert.data-api"},i="alert",l="fade",s="show",a=function(){function r(e){this._element=e}var a,u,f,c=r.prototype;return c.close=function(e){var t=this._element;e&&(t=this._getRootElement(e)),this._triggerCloseEvent(t).isDefaultPrevented()||this._removeElement(t)},c.dispose=function(){e.removeData(this._element,"bs.alert"),this._element=null},c._getRootElement=function(n){var r=t.getSelectorFromElement(n),o=!1;return r&&(o=document.querySelector(r)),o||(o=e(n).closest("."+i)[0]),o},c._triggerCloseEvent=function(t){var n=e.Event(o.CLOSE);return e(t).trigger(n),n},c._removeElement=function(n){var r=this;if(e(n).removeClass(s),e(n).hasClass(l)){var o=t.getTransitionDurationFromElement(n);e(n).one(t.TRANSITION_END,(function(e){return r._destroyElement(n,e)})).emulateTransitionEnd(o)}else this._destroyElement(n)},c._destroyElement=function(t){e(t).detach().trigger(o.CLOSED).remove()},r._jQueryInterface=function(t){return this.each((function(){var n=e(this),o=n.data("bs.alert");o||(o=new r(this),n.data("bs.alert",o)),"close"===t&&o[t](this)}))},r._handleDismiss=function(e){return function(t){t&&t.preventDefault(),e.close(this)}},a=r,f=[{key:"VERSION",get:function(){return"4.4.1"}}],(u=null)&&n(a.prototype,u),f&&n(a,f),r}();return e(document).on(o.CLICK_DATA_API,'[data-dismiss="alert"]',a._handleDismiss(new a)),e.fn.alert=a._jQueryInterface,e.fn.alert.Constructor=a,e.fn.alert.noConflict=function(){return e.fn.alert=r,a._jQueryInterface},a}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("jquery"),require("./util.js")):"function"==typeof define&&define.amd?define(["jquery","./util.js"],t):(e=e||self).Alert=t(e.jQuery,e.Util)}(this,(function(e,t){"use strict";function n(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e,t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var r="alert",o=e.fn[r],i=function(){function r(e){this._element=e}var o,i,l,s=r.prototype;return s.close=function(e){var t=this._element;e&&(t=this._getRootElement(e)),this._triggerCloseEvent(t).isDefaultPrevented()||this._removeElement(t)},s.dispose=function(){e.removeData(this._element,"bs.alert"),this._element=null},s._getRootElement=function(n){var r=t.getSelectorFromElement(n),o=!1;return r&&(o=document.querySelector(r)),o||(o=e(n).closest(".alert")[0]),o},s._triggerCloseEvent=function(t){var n=e.Event("close.bs.alert");return e(t).trigger(n),n},s._removeElement=function(n){var r=this;if(e(n).removeClass("show"),e(n).hasClass("fade")){var o=t.getTransitionDurationFromElement(n);e(n).one(t.TRANSITION_END,(function(e){return r._destroyElement(n,e)})).emulateTransitionEnd(o)}else this._destroyElement(n)},s._destroyElement=function(t){e(t).detach().trigger("closed.bs.alert").remove()},r._jQueryInterface=function(t){return this.each((function(){var n=e(this),o=n.data("bs.alert");o||(o=new r(this),n.data("bs.alert",o)),"close"===t&&o[t](this)}))},r._handleDismiss=function(e){return function(t){t&&t.preventDefault(),e.close(this)}},o=r,l=[{key:"VERSION",get:function(){return"4.5.0"}}],(i=null)&&n(o.prototype,i),l&&n(o,l),r}();return e(document).on("click.bs.alert.data-api",'[data-dismiss="alert"]',i._handleDismiss(new i)),e.fn[r]=i._jQueryInterface,e.fn[r].Constructor=i,e.fn[r].noConflict=function(){return e.fn[r]=o,i._jQueryInterface},i}));

RIGS/static/js/dark-mode-switch.min.js

@@ -0,0 +1 @@
+!function(){var t,e=document.getElementById("darkSwitch");e&&(t=null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch"),(e.checked=t)?document.body.setAttribute("data-theme","dark"):document.body.removeAttribute("data-theme"),e.addEventListener("change",(function(t){e.checked?(document.body.setAttribute("data-theme","dark"),localStorage.setItem("darkSwitch","dark")):(document.body.removeAttribute("data-theme"),localStorage.removeItem("darkSwitch"))})))}();

RIGS/static/js/popover.js

@@ -1,6 +1,6 @@
 /*!
-  * Bootstrap popover.js v4.4.1 (https://getbootstrap.com/)
-  * Copyright 2011-2019 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Bootstrap popover.js v4.5.0 (https://getbootstrap.com/)
+  * Copyright 2011-2020 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
   */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("jquery"),require("./tooltip.js")):"function"==typeof define&&define.amd?define(["jquery","./tooltip.js"],t):(e=e||self).Popover=t(e.jQuery,e.Tooltip)}(this,(function(e,t){"use strict";function n(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var u="popover",s=".bs.popover",c=e.fn[u],p=new RegExp("(^|\\s)bs-popover\\S+","g"),f=i({},t.Default,{placement:"right",trigger:"click",content:"",template:'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'}),a=i({},t.DefaultType,{content:"(string|element|function)"}),l="fade",h="show",y=".popover-header",d=".popover-body",v={HIDE:"hide"+s,HIDDEN:"hidden"+s,SHOW:"show"+s,SHOWN:"shown"+s,INSERTED:"inserted"+s,CLICK:"click"+s,FOCUSIN:"focusin"+s,FOCUSOUT:"focusout"+s,MOUSEENTER:"mouseenter"+s,MOUSELEAVE:"mouseleave"+s},g=function(t){var r,o;function i(){return t.apply(this,arguments)||this}o=t,(r=i).prototype=Object.create(o.prototype),r.prototype.constructor=r,r.__proto__=o;var c,g,b,O=i.prototype;return O.isWithContent=function(){return this.getTitle()||this._getContent()},O.addAttachmentClass=function(t){e(this.getTipElement()).addClass("bs-popover-"+t)},O.getTipElement=function(){return this.tip=this.tip||e(this.config.template)[0],this.tip},O.setContent=function(){var t=e(this.getTipElement());this.setElementContent(t.find(y),this.getTitle());var n=this._getContent();"function"==typeof n&&(n=n.call(this.element)),this.setElementContent(t.find(d),n),t.removeClass(l+" "+h)},O._getContent=function(){return this.element.getAttribute("data-content")||this.config.content},O._cleanTipClass=function(){var t=e(this.getTipElement()),n=t.attr("class").match(p);null!==n&&n.length>0&&t.removeClass(n.join(""))},i._jQueryInterface=function(t){return this.each((function(){var n=e(this).data("bs.popover"),r="object"==typeof t?t:null;if((n||!/dispose|hide/.test(t))&&(n||(n=new i(this,r),e(this).data("bs.popover",n)),"string"==typeof t)){if(void 0===n[t])throw new TypeError('No method named "'+t+'"');n[t]()}}))},c=i,b=[{key:"VERSION",get:function(){return"4.4.1"}},{key:"Default",get:function(){return f}},{key:"NAME",get:function(){return u}},{key:"DATA_KEY",get:function(){return"bs.popover"}},{key:"Event",get:function(){return v}},{key:"EVENT_KEY",get:function(){return s}},{key:"DefaultType",get:function(){return a}}],(g=null)&&n(c.prototype,g),b&&n(c,b),i}(t);return e.fn[u]=g._jQueryInterface,e.fn[u].Constructor=g,e.fn[u].noConflict=function(){return e.fn[u]=c,g._jQueryInterface},g}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("jquery"),require("./tooltip.js")):"function"==typeof define&&define.amd?define(["jquery","./tooltip.js"],t):(e=e||self).Popover=t(e.jQuery,e.Tooltip)}(this,(function(e,t){"use strict";function n(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e,t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var c="popover",u=".bs.popover",p=e.fn[c],s=new RegExp("(^|\\s)bs-popover\\S+","g"),f=i(i({},t.Default),{},{placement:"right",trigger:"click",content:"",template:'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'}),a=i(i({},t.DefaultType),{},{content:"(string|element|function)"}),l={HIDE:"hide"+u,HIDDEN:"hidden"+u,SHOW:"show"+u,SHOWN:"shown"+u,INSERTED:"inserted"+u,CLICK:"click"+u,FOCUSIN:"focusin"+u,FOCUSOUT:"focusout"+u,MOUSEENTER:"mouseenter"+u,MOUSELEAVE:"mouseleave"+u},h=function(t){var r,o;function i(){return t.apply(this,arguments)||this}o=t,(r=i).prototype=Object.create(o.prototype),r.prototype.constructor=r,r.__proto__=o;var p,h,y,d=i.prototype;return d.isWithContent=function(){return this.getTitle()||this._getContent()},d.addAttachmentClass=function(t){e(this.getTipElement()).addClass("bs-popover-"+t)},d.getTipElement=function(){return this.tip=this.tip||e(this.config.template)[0],this.tip},d.setContent=function(){var t=e(this.getTipElement());this.setElementContent(t.find(".popover-header"),this.getTitle());var n=this._getContent();"function"==typeof n&&(n=n.call(this.element)),this.setElementContent(t.find(".popover-body"),n),t.removeClass("fade show")},d._getContent=function(){return this.element.getAttribute("data-content")||this.config.content},d._cleanTipClass=function(){var t=e(this.getTipElement()),n=t.attr("class").match(s);null!==n&&n.length>0&&t.removeClass(n.join(""))},i._jQueryInterface=function(t){return this.each((function(){var n=e(this).data("bs.popover"),r="object"==typeof t?t:null;if((n||!/dispose|hide/.test(t))&&(n||(n=new i(this,r),e(this).data("bs.popover",n)),"string"==typeof t)){if(void 0===n[t])throw new TypeError('No method named "'+t+'"');n[t]()}}))},p=i,y=[{key:"VERSION",get:function(){return"4.5.0"}},{key:"Default",get:function(){return f}},{key:"NAME",get:function(){return c}},{key:"DATA_KEY",get:function(){return"bs.popover"}},{key:"Event",get:function(){return l}},{key:"EVENT_KEY",get:function(){return u}},{key:"DefaultType",get:function(){return a}}],(h=null)&&n(p.prototype,h),y&&n(p,y),i}(t);return e.fn[c]=h._jQueryInterface,e.fn[c].Constructor=h,e.fn[c].noConflict=function(){return e.fn[c]=p,h._jQueryInterface},h}));

RIGS/static/js/util.js

@@ -1,6 +1,6 @@
 /*!
-  * Bootstrap util.js v4.4.1 (https://getbootstrap.com/)
-  * Copyright 2011-2019 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Bootstrap util.js v4.5.0 (https://getbootstrap.com/)
+  * Copyright 2011-2020 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
   */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],e):(t=t||self).Util=e(t.jQuery)}(this,(function(t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;function e(e){var r=this,o=!1;return t(this).one(n.TRANSITION_END,(function(){o=!0})),setTimeout((function(){o||n.triggerTransitionEnd(r)}),e),this}var n={TRANSITION_END:"bsTransitionEnd",getUID:function(t){do{t+=~~(1e6*Math.random())}while(document.getElementById(t));return t},getSelectorFromElement:function(t){var e=t.getAttribute("data-target");if(!e||"#"===e){var n=t.getAttribute("href");e=n&&"#"!==n?n.trim():""}try{return document.querySelector(e)?e:null}catch(t){return null}},getTransitionDurationFromElement:function(e){if(!e)return 0;var n=t(e).css("transition-duration"),r=t(e).css("transition-delay"),o=parseFloat(n),i=parseFloat(r);return o||i?(n=n.split(",")[0],r=r.split(",")[0],1e3*(parseFloat(n)+parseFloat(r))):0},reflow:function(t){return t.offsetHeight},triggerTransitionEnd:function(e){t(e).trigger("transitionend")},supportsTransitionEnd:function(){return Boolean("transitionend")},isElement:function(t){return(t[0]||t).nodeType},typeCheckConfig:function(t,e,r){for(var o in r)if(Object.prototype.hasOwnProperty.call(r,o)){var i=r[o],a=e[o],u=a&&n.isElement(a)?"element":(s=a,{}.toString.call(s).match(/\s([a-z]+)/i)[1].toLowerCase());if(!new RegExp(i).test(u))throw new Error(t.toUpperCase()+': Option "'+o+'" provided type "'+u+'" but expected type "'+i+'".')}var s},findShadowRoot:function(t){if(!document.documentElement.attachShadow)return null;if("function"==typeof t.getRootNode){var e=t.getRootNode();return e instanceof ShadowRoot?e:null}return t instanceof ShadowRoot?t:t.parentNode?n.findShadowRoot(t.parentNode):null},jQueryDetection:function(){if(void 0===t)throw new TypeError("Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.");var e=t.fn.jquery.split(" ")[0].split(".");if(e[0]<2&&e[1]<9||1===e[0]&&9===e[1]&&e[2]<1||e[0]>=4)throw new Error("Bootstrap's JavaScript requires at least jQuery v1.9.1 but less than v4.0.0")}};return n.jQueryDetection(),t.fn.emulateTransitionEnd=e,t.event.special[n.TRANSITION_END]={bindType:"transitionend",delegateType:"transitionend",handle:function(e){if(t(e.target).is(this))return e.handleObj.handler.apply(this,arguments)}},n}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],e):(t=t||self).Util=e(t.jQuery)}(this,(function(t){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;function e(e){var r=this,o=!1;return t(this).one(n.TRANSITION_END,(function(){o=!0})),setTimeout((function(){o||n.triggerTransitionEnd(r)}),e),this}var n={TRANSITION_END:"bsTransitionEnd",getUID:function(t){do{t+=~~(1e6*Math.random())}while(document.getElementById(t));return t},getSelectorFromElement:function(t){var e=t.getAttribute("data-target");if(!e||"#"===e){var n=t.getAttribute("href");e=n&&"#"!==n?n.trim():""}try{return document.querySelector(e)?e:null}catch(t){return null}},getTransitionDurationFromElement:function(e){if(!e)return 0;var n=t(e).css("transition-duration"),r=t(e).css("transition-delay"),o=parseFloat(n),i=parseFloat(r);return o||i?(n=n.split(",")[0],r=r.split(",")[0],1e3*(parseFloat(n)+parseFloat(r))):0},reflow:function(t){return t.offsetHeight},triggerTransitionEnd:function(e){t(e).trigger("transitionend")},supportsTransitionEnd:function(){return Boolean("transitionend")},isElement:function(t){return(t[0]||t).nodeType},typeCheckConfig:function(t,e,r){for(var o in r)if(Object.prototype.hasOwnProperty.call(r,o)){var i=r[o],a=e[o],u=a&&n.isElement(a)?"element":null==(s=a)?""+s:{}.toString.call(s).match(/\s([a-z]+)/i)[1].toLowerCase();if(!new RegExp(i).test(u))throw new Error(t.toUpperCase()+': Option "'+o+'" provided type "'+u+'" but expected type "'+i+'".')}var s},findShadowRoot:function(t){if(!document.documentElement.attachShadow)return null;if("function"==typeof t.getRootNode){var e=t.getRootNode();return e instanceof ShadowRoot?e:null}return t instanceof ShadowRoot?t:t.parentNode?n.findShadowRoot(t.parentNode):null},jQueryDetection:function(){if(void 0===t)throw new TypeError("Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.");var e=t.fn.jquery.split(" ")[0].split(".");if(e[0]<2&&e[1]<9||1===e[0]&&9===e[1]&&e[2]<1||e[0]>=4)throw new Error("Bootstrap's JavaScript requires at least jQuery v1.9.1 but less than v4.0.0")}};return n.jQueryDetection(),t.fn.emulateTransitionEnd=e,t.event.special[n.TRANSITION_END]={bindType:"transitionend",delegateType:"transitionend",handle:function(e){if(t(e.target).is(this))return e.handleObj.handler.apply(this,arguments)}},n}));

RIGS/static/scss/_custom-variables.scss

@@ -8,4 +8,4 @@ $theme-colors: (
   "danger": #A94447,
   "info": #B8FAFF,
   "primary": #4CB8F1
-);
+) !default;

RIGS/static/scss/screen.scss

@@ -1,3 +1,9 @@
+[data-theme='dark'] {
+    @import "custom-variables";
+    @import 'node_modules/@forevolve/bootstrap-dark/scss/bootstrap-dark.scss';
+    background: #222;
+    color: white;
+}
 @import "custom-variables";
 @import "node_modules/bootstrap/scss/bootstrap";
 

RIGS/templates/base_rigs.html

@@ -72,30 +72,7 @@
         <a href="{% url 'search_help' %}" class="nav-link modal-href btn-sm"><span class="fas fa-question-circle"></span></a>
     </form>
 {% endif %}
-<li class="nav-item dropdown" id="user">
-    {% if user.is_authenticated %}
-        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Hi {{ user.first_name }}
-        </a>
-        <ul class="dropdown-menu p-3" id="userdropdown">
-                <li class="media">
-                    <a href="{% url 'profile_detail' %}">
-                        <img src="{{ request.user.profile_picture }}" class="media-object"/>
-                        <div class="media-body">
-                            <b>{{ request.user.first_name }} {{ request.user.last_name }}</b>
-                            <p class="muted">{{ request.user.email }}</p>
-                        </div>
-                    </a>
-                </li>
-                <li>
-                <a href="{% url 'logout' %}" class="btn btn-primary align"><i class="fas fa-sign-out-alt"></i> Logout</a>
-                </li>
-            </ul>
-    {% else %}
-        <a class="nav-link" href="{% url 'login' %}">
-            Login
-        </a>
-    {% endif %}
+{% include 'partials/navbar_user.html' %}
 </li>
 {% endblock %}
 {% block js %}

assets/templates/base_assets.html

@@ -10,31 +10,32 @@
 {% endblock %}
 
 {% block titleelements %}
-    <li class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Assets</a>
-        <div class="dropdown-menu">
-            <a class="dropdown-item" href="{% url 'asset_list' %}"><span class="fas fa-list"></span> List Assets</a>
-            {% if perms.assets.add_asset %}
-                <a class="dropdown-item" href="{% url 'asset_create' %}"><span class="fas fa-plus"></span> Create Asset</a>
-            {% endif %}
-            <div class="dropdown-divider"></div>
-            <a class="dropdown-item" href="{% url 'cable_type_list' %}"><span class="fas fa-list"></span> List Cable Types</a>
-            {% if perms.assets.add_cable_type %}
-            <a class="dropdown-item" href="{% url 'cable_type_create' %}"><span class="fas fa-plus"></span> Create Cable Type</a>
-            {% endif %}
-        </div>
-    </li>
-    <div class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Suppliers</a>
-        <ul class="dropdown-menu">
-            <a class="dropdown-item" href="{% url 'supplier_list' %}"><span class="fas fa-list"></span> List Suppliers</a>
-            {% if perms.assets.add_supplier %}
-                <a class="dropdown-item" href="{% url 'supplier_create' %}"><span class="fas fa-plus"></span> Create Supplier</a>
-            {% endif %}
-        </ul>
+<li class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Assets</a>
+    <div class="dropdown-menu">
+        <a class="dropdown-item" href="{% url 'asset_list' %}"><span class="fas fa-list"></span> List Assets</a>
+        {% if perms.assets.add_asset %}
+            <a class="dropdown-item" href="{% url 'asset_create' %}"><span class="fas fa-plus"></span> Create Asset</a>
+        {% endif %}
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="{% url 'cable_type_list' %}"><span class="fas fa-list"></span> List Cable Types</a>
+        {% if perms.assets.add_cable_type %}
+        <a class="dropdown-item" href="{% url 'cable_type_create' %}"><span class="fas fa-plus"></span> Create Cable Type</a>
+        {% endif %}
     </div>
-    {% if perms.assets.view_asset %}
-        <li class="nav-item"><a class="nav-link" href="{% url 'asset_activity_table' %}">Recent Changes</a></li>
-        <li class="nav-item"><a class="nav-link" href="{% url 'asset_audit_list' %}">Audit</a></li>
-    {% endif %}
+</li>
+<div class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Suppliers</a>
+    <ul class="dropdown-menu">
+        <a class="dropdown-item" href="{% url 'supplier_list' %}"><span class="fas fa-list"></span> List Suppliers</a>
+        {% if perms.assets.add_supplier %}
+            <a class="dropdown-item" href="{% url 'supplier_create' %}"><span class="fas fa-plus"></span> Create Supplier</a>
+        {% endif %}
+    </ul>
+</div>
+{% if perms.assets.view_asset %}
+    <li class="nav-item"><a class="nav-link" href="{% url 'asset_activity_table' %}">Recent Changes</a></li>
+    <li class="nav-item"><a class="nav-link" href="{% url 'asset_audit_list' %}">Audit</a></li>
+{% endif %}
+{% include 'partials/navbar_user.html' %}
 {% endblock %}

gulpfile.js

@@ -12,6 +12,8 @@ var sourcemaps = require('gulp-sourcemaps');
 var browsersync = require('browser-sync').create();
 var { exec } = require("child_process");
 var spawn = require('child_process').spawn;
+var rename = require('gulp-rename');
+var _if = require('gulp-if');
 
 sass.compiler = require('node-sass');
 
@@ -21,8 +23,9 @@ function styles(done) {
                     'node_modules/fullcalendar/dist/fullcalendar.print.css',
                     'node_modules/bootstrap-select/dist/css/bootstrap-select.css',
                     'node_modules/ajax-bootstrap-select/dist/css/ajax-bootstrap-select.css',
-                    //'node_modules/autocompleter/autocomplete.css',
+                    //'node_modules/@forevolve/bootstrap-dark/dist/css/bootstrap-dark.css',
                     'node_modules/@activix/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css'])
+    //.pipe(_if('**/bootstrap-dark.css', rename({basename:'dark-mode'})))
     .pipe(sourcemaps.init())
     .pipe(sass().on('error', sass.logError))
     .pipe(postcss([ autoprefixer() ]))
@@ -54,7 +57,7 @@ function scripts() {
                     'node_modules/bootstrap-select/dist/js/bootstrap-select.js',
                     'node_modules/ajax-bootstrap-select/dist/js/ajax-bootstrap-select.js',
                     'node_modules/konami/konami.js',
-                    //'node_modules/autocompleter/autocomplete.js',
+                    'node_modules/dark-mode-switch/dark-mode-switch.min.js',
                     'node_modules/@activix/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js'])
     .pipe(flatten())
     .pipe(terser())

package.json

@@ -6,13 +6,17 @@
   "license": "MIT",
   "dependencies": {
     "@activix/bootstrap-datetimepicker": "^2.0.7",
+    "@forevolve/bootstrap-dark": "^1.0.0-alpha.1075",
     "@fortawesome/fontawesome-free": "^5.12.1",
     "ajax-bootstrap-select": "^1.4.5",
     "autocompleter": "^6.0.2",
     "autoprefixer": "^9.7.4",
     "bootstrap": "^4.4.1",
     "bootstrap-select": "^1.13.17",
+    "dark-mode-switch": "^1.0.0",
     "fullcalendar": "^3.10.1",
+    "gulp-if": "^3.0.0",
+    "gulp-rename": "^2.0.0",
     "jquery": "^3.4.1",
     "jquery-ui-dist": "^1.12.1",
     "konami": "^1.6.2",
@@ -32,6 +36,6 @@
     "node-sass": "^4.13.1"
   },
   "scripts": {
-        "gulp": "gulp"
+    "gulp": "gulp"
   }
 }

templates/base.html

@@ -117,6 +117,7 @@
         easter_egg.load();
     });
 </script>
+<script src="{% static 'js/dark-mode-switch.min.js' %}"></script>
 {% block js %}
 {% endblock %}
 </body>

users/templates/partials/navbar_user.html

@@ -0,0 +1,31 @@
+<li class="nav-item dropdown" id="user">
+{% if user.is_authenticated %}
+    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        Hi {{ user.first_name }}
+    </a>
+    <ul class="dropdown-menu p-3" id="userdropdown">
+        <li class="media">
+            <a href="{% url 'profile_detail' %}">
+                <img src="{{ request.user.profile_picture }}" class="media-object"/>
+                <div class="media-body">
+                    <b>{{ request.user.first_name }} {{ request.user.last_name }}</b>
+                    <p class="muted">{{ request.user.email }}</p>
+                </div>
+            </a>
+        </li>
+        <li>
+            <div class="custom-control custom-switch">
+                <input type="checkbox" class="custom-control-input" id="darkSwitch" />
+                <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
+            </div>
+        </li>
+        <li>
+            <a href="{% url 'logout' %}" class="btn btn-primary align"><i class="fas fa-sign-out-alt"></i> Logout</a>
+        </li>
+    </ul>
+{% else %}
+<a class="nav-link" href="{% url 'login' %}">
+    Login
+</a>
+{% endif %}
+</li>