Merge branch 'dev' into 'pretzel-fixes'

Merge Dev to pretzel

See merge request crafty-controller/crafty-commander!165

.editorconfig

@@ -0,0 +1,16 @@
+# https://editorconfig.org
+
+root = true
+
+[*.{js,py,html}]
+charset = utf-8
+insert_final_newline = true
+# end_of_line = lf
+
+[*.py]
+indent_style = space
+indent_size = 4
+
+[*.{js,html}]
+indent_style = space
+indent_size = 2

app/classes/web/panel_handler.py

@@ -264,12 +264,24 @@ class PanelHandler(BaseHandler):
             template = "public/error.html"
 
         elif page == 'credits':
-            with open(helper.credits_cache, encoding='utf-8') as republic_credits_will_do:
+            with open(helper.credits_cache, encoding='utf-8') as credits_default_local:
-                credits_dict: dict = json.load(republic_credits_will_do)
+                try:
+                    remote = requests.get('https://craftycontrol.com/credits', allow_redirects=True)
+                    credits_dict: dict = remote.json()
+                    if not credits_dict["staff"]:
+                        logger.error("Issue with upstream Staff, using local.")
+                        credits_dict: dict = json.load(credits_default_local)
+                except:
+                    logger.error("Request to credits bucket failed, using local.")
+                    credits_dict: dict = json.load(credits_default_local)
+
                 timestamp = credits_dict["lastUpdate"] / 1000.0
                 page_data["patrons"] = credits_dict["patrons"]
                 page_data["staff"] = credits_dict["staff"]
                 page_data["translations"] = credits_dict["translations"]
+                if timestamp == 0:
+                    page_data["lastUpdate"] = '😿'
+                else:
                     page_data["lastUpdate"] = str(datetime.datetime.fromtimestamp(timestamp).strftime('%Y-%m-%d %H:%M:%S'))
             template = "panel/credits.html"
 

app/config/credits.json

@@ -1,138 +1,67 @@
 {
 	"staff": {
 	  "development": [
-			{
-				"name": "Phil Tarrant",
-				"title": "Creator",
-				"loc": "Southeast, USA",
-				"tags": [
-					"Staff",
-					[
-						"Developer",
-						"https://gitlab.com/Ptarrant1"
-					],
-					"Creator"
-				],
-				"blurb": "For best results, apply a thin layer of Phillip to code, cyber security, and parenthood for maximum effectiveness. Phillip often spends too much time with his chickens.",
-				"pic": "/static/assets/images/credits/ptarrant.png"
-			},
 		{
 		  "name":  "Pita Bread",
-				"title": "Leadership Team",
+		  "title": "CEO",
 		  "loc":   "Midwest, USA",
-				"tags": [
+		  "tags": [ "Staff", [ "Developer", "https://gitlab.com/craftbreadth" ], "Crafty Leadership" ],
-					"Staff",
-					[
-						"Developer",
-						"https://gitlab.com/craftbreadth"
-					],
-					"Community Leader"
-				],
 		  "blurb": "Baked goods enthusiast who dabbles in Linux and sets up networks for fun. Can be found writing long-winded emails, debugging strange wifi issues, or taking care of his extensive houseplant collection.",
 		  "pic":   "/static/assets/images/credits/pita.png"
 		},
 		{
-				"name": "macgeek",
+		  "name":  "Xithical",
-				"title": "Leadership Team",
+		  "title": "CFO/COO",
 		  "loc":   "Midwest, USA",
-				"tags": [
+		  "tags": [ "Staff", [ "Developer", "https://gitlab.com/xithical" ], "Crafty Leadership" ],
-					"Staff",
+		  "blurb": "Having sold his soul to the IT administration gods many eons ago, you can usually find him working, going home to do work, or continuing to work in the support Discord.",
-					[
+		  "pic":   "/static/assets/images/credits/xithical.png"
-						"Developer",
+		},
-						"https://gitlab.com/computergeek125"
+		{
-					],
+		  "name":  "Phil Tarrant",
-					"Project Manager"
+		  "title": "Creator",
-				],
+		  "loc": "Southeast, USA",
+		  "tags": [	"Staff", [ "Developer", "https://gitlab.com/Ptarrant1" ], "Crafty Advisor" ],
+		  "blurb": "For best results, apply a thin layer of Phillip to code, cyber security, and parenthood for maximum effectiveness. Phillip often spends too much time with his chickens.",
+		  "pic":   "/static/assets/images/credits/ptarrant.png"
+		},
+		{
+		  "name":  "macgeek",
+		  "title": "Lead Software Engineer",
+		  "loc":   "Midwest, USA",
+		  "tags": [ "Staff", [ "Developer", "https://gitlab.com/computergeek125" ], "Crafty Advisor" ],
 		  "blurb": "Sysadmin for work and sysadmin for fun (avid homelabber). He enjoys a good tech tangent and gaming.",
 		  "pic":   "/static/assets/images/credits/macgeek.png"
 		},
 		{
 		  "name":  "parzivaldewey",
-				"title": null,
+		  "title": "Support Manager",
 		  "loc":   "East Coast, USA",
-				"tags": [
+		  "tags": [ "Staff", [ "Developer", "https://gitlab.com/amcmanu3" ], "Support Manager" ],
-					"Staff",
-					[
-						"Developer",
-						"https://gitlab.com/amcmanu3"
-					],
-					"Support Manager"
-				],
 		  "blurb": "His interests include Linux, gaming, and helping others. When he's able to unplug he enjoys biking, hiking, and playing soccer.",
 		  "pic":   "/static/assets/images/credits/parzivaldewey.png"
 		},
-			{
-				"name": "Xithical",
-				"title": null,
-				"loc": "Midwest, USA",
-				"tags": [
-					"Staff",
-					[
-						"Developer",
-						"https://gitlab.com/xithical"
-					],
-					null
-				],
-				"blurb": "Having sold his soul to the IT administration gods many eons ago, you can usually find him working, going home to do work, or continuing to work in the support Discord.",
-				"pic": "/static/assets/images/credits/xithical.png"
-			},
-			{
-				"name": "MC Gaming",
-				"title": null,
-				"loc": "Central, UK",
-				"tags": [
-					"Staff",
-					[
-						"Developer",
-						"https://gitlab.com/MCgamin1738"
-					],
-					null
-				],
-				"blurb": "His interests include learning, Linux, and programming. He loves pentesting apps and gaming.",
-				"pic": "/static/assets/images/credits/mcgaming.png"
-			},
 		{
 		  "name": "Silversthorn",
-				"title": null,
+		  "title": "Software Engineer",
 		  "loc": "Provence, FR",
-				"tags": [
+		  "tags": [ "Staff", [ "Developer", "https://gitlab.com/Silversthorn" ], null ],
-					"Staff",
-					[
-						"Developer",
-						"https://gitlab.com/Silversthorn"
-					],
-					null
-				],
 		  "blurb": "Developer at work and at home, testing his own code is a pain, so his coding precept is \"Testing is Doubting\"",
 		  "pic": "/static/assets/images/credits/silversthorn.png"
 		},
 		{
 		  "name": "ThatOneLukas",
-				"title": null,
+		  "title": "Software Engineer",
 		  "loc": "Helsinki, FI",
-				"tags": [
+		  "tags": [ "Staff", [ "Developer", "https://gitlab.com/LukasDoesDev" ], null ],
-					"Staff",
+		  "blurb": "Arch Linux enthusiast who likes 80s/90s music, Rust (The programming language) and light distros like Arch Linux btw. Dislikes C, C++, Go, and Microsoft. Also doesn't like Finnish weather that freezes molten snow to (deadly) ice.",
-					[
-						"Developer",
-						"https://gitlab.com/LukasDoesDev"
-					],
-					null
-				],
-				"blurb": "Lukas enjoys bashing his head at the table while his code does not work",
 		  "pic": "/static/assets/images/credits/lukas.png"
 		},
 		{
 		  "name": "Zedifus",
-				"title": null,
+		  "title": "DevOps Engineer",
 		  "loc": "Scotland, UK",
-				"tags": [
+		  "tags": [ "Staff", [ "Developer", "https://gitlab.com/Zedifus" ], "DevOps" ],
-					"Staff",
-					[
-						"Developer",
-						"https://gitlab.com/Zedifus"
-					],
-					"DevOps"
-				],
 		  "blurb": "A Streamer, who is currently working in the insurance industry, self-teaching software development & DevOps, with the hopes of a career change! Enjoys playing games and has a sassy cat called Eve.",
 		  "pic": "/static/assets/images/credits/zedifus.jpg"
 		}
@@ -140,28 +69,17 @@
 	  "support": [
 		{
 		  "name": "iSilverfyre",
-				"title": null,
+		  "title": "Community Manager",
-				"loc": null,
+		  "loc": "South Central, US",
-				"tags": [
+		  "tags": [ "Staff", null, "Wiki" ],
-					"Staff",
-					"Wiki",
-					null
-				],
 		  "blurb": "Silver enjoys helping others with their computer needs, writing documentation, and loving her cat.",
 		  "pic": "/static/assets/images/credits/isilverfyre.png"
 		},
 		{
 		  "name": "Quentin",
-				"title": null,
+		  "title": "Document Curator",
 		  "loc": null,
-				"tags": [
+		  "tags": [ "Staff", [ "Developer", "https://gitlab.com/qub3d" ], "Wiki" ],
-					"Staff",
-					[
-						"Developer",
-						"https://gitlab.com/qub3d"
-					],
-					"Wiki"
-				],
 		  "blurb": "Hosts Minecraft servers for his weird friends, works for an IoT company as his dayjob. The 's' in IoT stands for 'secure'.",
 		  "pic": "/static/assets/images/credits/qub3d.png"
 		}
@@ -171,14 +89,7 @@
 		  "name": "Kev Dagoat",
 		  "title": "Head of Development",
 		  "loc": "East Coast, AU",
-				"tags": [
+		  "tags": [ "Staff", [ "Developer", "https://gitlab.com/kevdagoat" ], "HOD" ],
-					"Staff",
-					[
-						"Developer",
-						"https://gitlab.com/kevdagoat"
-					],
-					"HOD"
-				],
 		  "blurb": "His interests include Linux, programming, and goats of course. He enjoys building APIs, K8s, and geeking over video cards.",
 		  "pic": "/static/assets/images/credits/kevdagoat.jpeg"
 		},
@@ -186,11 +97,7 @@
 		  "name": "Manu",
 		  "title": null,
 		  "loc": "Eastern, CA",
-				"tags": [
+		  "tags": [ "Staff", "Developer", "Project Manager" ],
-					"Staff",
-					"Developer",
-					"Project Manager"
-				],
 		  "blurb": "His interests include learning, Linux, and programming. He enjoys speaking French, doing 6 things at once, and testing software.",
 		  "pic": "/static/assets/images/credits/manu.png"
 		},
@@ -198,114 +105,28 @@
 		  "name": "UltraBlack",
 		  "title": null,
 		  "loc": "Bavaria, DE",
-				"tags": [
+		  "tags": [ "Staff", null, "Idea Manager" ],
-					"Staff",
-					null,
-					"Idea Manager"
-				],
 		  "blurb": "Hi, my name is Tim, and I'm a huge fan of linux. I'm often gaming and occasionally coding.",
 		  "pic": "/static/assets/images/credits/ultrablack.png"
+		},
+		{
+		  "name":  "MC Gaming",
+		  "title": null,
+		  "loc":   "Central, UK",
+		  "tags": [ "Staff", [ "Developer", "https://gitlab.com/MCgamin1738" ], null ],
+		  "blurb": "His interests include learning, Linux, and programming. He loves pentesting apps and gaming.",
+		  "pic":   "/static/assets/images/credits/mcgaming.png"
 		}
 	  ]
 	},
 	"translations": {
-		"ptarrant": [
+		"Data Unavailable": ["🌎🪣🔗👎😭"]
-			"Sarcasm",
-			"Wit"
-		],
-		"Lukas": [
-			"Finnish"
-		],
-		"Manu": [
-			"French"
-		],
-		"Silversthorn": [
-			"French"
-		],
-		"UltraBlack": [
-			"German"
-		],
-		"Zedifus": [
-			"LOLCAT (Kingdum ov Katz)"
-		]
 	},
 	"patrons": [
 		{
-			"name": "Richard B",
+			"name": "Data Unavailable 🌎🪣🔗👎😭",
-			"level": "Crafty Sustainer"
+			"level": ""
-		},
-		{
-			"name": "JOHN C",
-			"level": "Crafty Advocate"
-		},
-		{
-			"name": "iSilverfyre",
-			"level": "Crafty Sustainer"
-		},
-		{
-			"name": "Dean R",
-			"level": "Crafty Sustainer"
-		},
-		{
-			"name": "scott m",
-			"level": "Crafty Sustainer"
-		},
-		{
-			"name": "Lino",
-			"level": "Crafty Sustainer"
-		},
-		{
-			"name": "PeterPorker3",
-			"level": "Crafty Supporter"
-		},
-		{
-			"name": "Ewari",
-			"level": "Crafty Supporter"
-		},
-		{
-			"name": "Thyodas",
-			"level": "Crafty Sustainer"
-		},
-		{
-			"name": "AngryPanda",
-			"level": "Crafty Sustainer"
-		},
-		{
-			"name": "Chris T",
-			"level": "Crafty Sustainer"
-		},
-		{
-			"name": "Adam B",
-			"level": "Crafty Sustainer"
-		},
-		{
-			"name": "Eric G",
-			"level": "Crafty Sustainer"
-		},
-		{
-			"name": "Chris B",
-			"level": "Crafty Sustainer"
-		},
-		{
-			"name": "Emmet d",
-			"level": "Crafty Sustainer"
-		},
-		{
-			"name": "Steven T",
-			"level": "Crafty Sustainer"
-		},
-		{
-			"name": "Row H",
-			"level": "Crafty Supporter"
-		},
-		{
-			"name": "vorboid",
-			"level": "Crafty Supporter"
-		},
-		{
-			"name": "Justman",
-			"level": "Crafty Sustainer"
 		}
 	],
-	"lastUpdate": 1637635758855
+	"lastUpdate": 0
 }

app/frontend/static/assets/js/shared/misc.js

@@ -207,6 +207,10 @@ if ($('canvas').length) {
         body.toggleClass('sidebar-hidden');
       } else {
         body.toggleClass('sidebar-icon-only');
+        const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+        if (vw >= 1200) {
+            localStorage.setItem('crafty-sidebar-expanded', !body.hasClass('sidebar-icon-only'));
+        }
       }
     });
 

app/frontend/templates/base.html

@@ -47,8 +47,17 @@
           <img src="/static/assets/images/logo_small.svg" alt="logo" /> </a>
       </div>
       <div class="navbar-menu-wrapper d-flex align-items-center">
+        <style>
+        body:not(.sidebar-icon-only) .navbar-toggler .mdi-chevron-double-right {
+            display: none;
+        }
+        body.sidebar-icon-only .navbar-toggler .mdi-chevron-double-left {
+            display: none;
+        }
+        </style>
         <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
-          <span class="mdi mdi-menu"></span>
+          <span class="mdi mdi-chevron-double-left"></span>
+          <span class="mdi mdi-chevron-double-right"></span>
         </button>
 
         {% include notify.html %}

app/frontend/templates/main_menu.html

@@ -1,6 +1,68 @@
 <!-- partial -->
       <div class="container-fluid page-body-wrapper">
         <!-- partial:partials/_sidebar.html -->
+        <style>
+        @media screen and (max-width: 991px) {
+            .sidebar-offcanvas {
+                -webkit-transition: all 0.25s cubic-bezier(.22,.61,.36,1);
+                transition: all 0.25s cubic-bezier(.22,.61,.36,1);
+                box-shadow: 0px 8px 17px 2px rgba(0,0,0,0.14) , 0px 3px 14px 2px rgba(0,0,0,0.12) , 0px 5px 5px -3px rgba(0,0,0,0.2);
+            }
+        }
+        </style>
+        <script>
+            function debounce(func, wait, immediate) {
+            	var timeout;
+            	return function() {
+		            var context = this, args = arguments;
+        		    var later = function() {
+		        	    timeout = null;
+            			if (!immediate) func.apply(context, args);
+	    	        };
+            		var callNow = immediate && !timeout;
+		            clearTimeout(timeout);
+        		    timeout = setTimeout(later, wait);
+		            if (callNow) func.apply(context, args);
+            	};
+            };
+            function isExtraLargeBreakpoint() {
+                const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+                return vw >= 1200;
+            }
+            function isLargeBreakpoint() {
+                const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+                return vw >= 992;
+            }
+            $(document).ready(function() {
+                sidebarResizeHandler(null);
+                $(window).on(
+                    'resize',
+                    debounce(sidebarResizeHandler, 25, true)
+                );
+            });
+            function sidebarResizeHandler(e) {
+                /*
+                    Viewport sizes: Extra large (vw >= 1200px), large (vw >= 992px), medium (vw >= 768px)
+                  - A localstorage item is set to remember a user's preference between collapsed or expanded.
+                  - For extra large viewports, the sidebar is the user's preference (by default expanded). When
+                    expanded or collapsed manually, it doesn't overlap the page content and the preference
+                    gets saved to a localstorage item.
+                  - For large viewports, the sidebar is collapsed. When expanded manually, it doesn't overlap
+                    the page content. The user's localstorage preference is not overridden during this state.
+                  - For medium and below viewports, the sidebar is hidden behing a hamburger icon. When expanded, the sidebar
+                    overlaps the page content. The user's localstorage preference is not overridden during this state.
+
+                  More code in `app/frontend/static/assets/js/shared/misc.js` and `app/frontend/templates/base.html`
+                */
+                if (isExtraLargeBreakpoint()) {
+                    let value = localStorage.getItem('crafty-sidebar-expanded') !== 'false';
+                    $('body').toggleClass('sidebar-icon-only', !value);
+                    localStorage.setItem('crafty-sidebar-expanded', value);
+                } else if (isLargeBreakpoint()) {
+                    $('body').toggleClass('sidebar-icon-only', true);
+                }
+            }
+        </script>
         <nav class="sidebar sidebar-offcanvas" id="sidebar">
           <ul class="nav">
 
@@ -37,7 +99,7 @@
             </li>
 
             <li class="nav-item">
-              <a class="nav-link" href="https://gitlab.com/crafty-controller/crafty-web/-/wikis/home" target="_blank">
+              <a class="nav-link" href="https://wiki.craftycontrol.com" target="_blank">
                 <i class="fas fa-book"></i> &nbsp;
                 <span class="menu-title">{{ translate('sidebar', 'documentation', data['lang']) }}</span>
               </a>

app/frontend/templates/panel/credits.html

@@ -39,8 +39,10 @@
                     <div class="col-md-4">
 
                       <div class="user-avatar mb-auto">
+                        {% if person['pic'] %}
                         <img src="{{ person['pic'] }}"
                              alt="profile image" class="profile-img img-lg rounded-circle">
+                        {% end %}
                       </div>
 
                       <div class="wrapper">
@@ -108,8 +110,10 @@
                     <div class="col-md-4">
 
                       <div class="user-avatar mb-auto">
+                        {% if person['pic'] %}
                         <img src="{{ person['pic'] }}"
                              alt="profile image" class="profile-img img-lg rounded-circle">
+                        {% end %}
                       </div>
 
                       <div class="wrapper">
@@ -149,7 +153,7 @@
 
                       <div class="wrapper align-items-start pt-3">
                         {% if person['title'] %}
-                        <h5><strong>Crafty's {{ person['title'] }}</strong></h5>
+                        <h5><strong>{{ person['title'] }}</strong></h5>
                         {% end %}
                         <p>{{ person['blurb'] }}</p>
                       </div>
@@ -178,8 +182,10 @@
                     <div class="col-md-4">
 
                       <div class="user-avatar mb-auto">
+                        {% if person['pic'] %}
                         <img src="{{ person['pic'] }}"
                              alt="profile image" class="profile-img img-lg rounded-circle">
+                        {% end %}
                       </div>
 
                       <div class="wrapper">
@@ -219,7 +225,7 @@
 
                       <div class="wrapper align-items-start pt-3">
                         {% if person['title'] %}
-                        <h5><strong>Crafty's {{ person['title'] }}</strong></h5>
+                        <h5><strong>{{ person['title'] }}</strong></h5>
                         {% end %}
                         <p>{{ person['blurb'] }}</p>
                       </div>