Added Roles, User Management, fixed bugs, added FlexTable component (should be renamed to GridTable), other table components and test code should be removed down the line, added admin function to fix broken data structures.

imports/ui/temp.svelte

@@ -0,0 +1,109 @@
+
+<script>
+	import {Meteor} from "meteor/meteor";
+	import {Route, router} from 'tinro';
+	import {useTracker} from 'meteor/rdb:svelte-meteor-data';
+	import {Roles} from 'meteor/alanning:roles';
+	import Chromebooks from './Chromebooks.svelte';
+	import Users from './Users.svelte';
+	import ListUsers from './ListUsers.svelte';
+	import Admin from './Admin.svelte';
+	import Announcer from './Announcer.svelte';
+
+	// When the URL changes, run the code... in this case to scroll to the top.
+	router.subscribe(_ => window.scrollTo(0, 0));
+
+	$: currentUser = useTracker(() => Meteor.user());
+	$: canManageLaptops = false;
+	$: isAdmin = false;
+
+	Tracker.autorun(() => {
+		// For some reason currentUser is always null here, and is not reactive (user changes and this does not get re-called).
+		let user = Meteor.user();
+		canManageLaptops = user && Roles.userIsInRole(user._id, 'laptop-management', 'global');
+		isAdmin = user && Roles.userIsInRole(user._id, 'admin', 'global');
+	});
+	function performLogin() {
+		//Login style can be "popup" or "redirect".  I am not sure we need to request and offline token.
+		Meteor.loginWithGoogle({loginStyle: "popup", requestOfflineToken: true}, (err) => {
+			if (err) {
+				console.log(err);
+			} else {
+				//console.log("Logged in");
+			}
+		})
+	}
+	function performLogout() {
+		Meteor.logout();
+	}
+
+</script>
+
+<Announcer/>
+
+<div class="container">
+	<header class="row">
+		<div class="col-12 logoContainer">
+			<img class="logo" src="/images/logo.svg"/>
+			<div class="login">
+				{#if !$currentUser}
+					<button type="button" role="button" on:click={performLogin}>Login</button>
+				{:else}
+					<button type="button" role="button" on:click={performLogout}>Logout</button>
+				{/if}
+			</div>
+		</div>
+		<div class="col-12 center" style="margin-bottom: 0"><h1 style="margin-bottom: 0">District Central</h1></div>
+		<div class="col-12 center">
+			<div class="nav-separator"></div>
+		</div>
+		<nav class="col-12 center">
+			<a href="/">Home</a>
+			{#if canManageLaptops}
+				<a href="/chromebooks">Chromebooks</a>
+			{/if}
+			{#if canManageLaptops}
+				<a href="/users">Users</a>
+			{/if}
+			{#if isAdmin}
+				<a href="/admin">Admin</a>
+			{/if}
+			<!--			<a href="/TestTable">Test</a>-->
+			<!--			<a href="/ListUsers">List Users</a>-->
+		</nav>
+	</header>
+</div>
+
+<Route path="/">
+	<div class="container">
+		<div class="row">
+			TODO: Some statistics and such.
+		</div>
+	</div>
+</Route>
+<Route path="/ListUsers">
+	<ListUsers/>
+</Route>
+<Route path="/admin">
+	{#if isAdmin}
+		<Admin/>
+	{/if}
+</Route>
+<Route path="/chromebooks/*">
+	{#if canManageLaptops}
+		<Chromebooks/>
+	{:else}
+		<!-- User not authorized to use this UI.  Don't render anything because it is likely the user is still loading and will have access in a moment. -->
+	{/if}
+</Route>
+<Route path="/users/*">
+	{#if isAdmin}
+		<Users/>
+	{:else}
+		<!-- User not authorized to use this UI.  Don't render anything because it is likely the user is still loading and will have access in a moment. -->
+	{/if}
+</Route>
+
+<style>
+    ...
+</style>