110 lines
3.0 KiB
Svelte
110 lines
3.0 KiB
Svelte
|
|
<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>
|