DistrictCentral/imports/ui/Chromebooks.svelte

<style>
    a.button {
        background: #7171ec;
        border-radius: 999px;
        box-shadow: #5E5DF0 0 10px 20px -10px;
        box-sizing: border-box;
        color: #FFFFFF;
        cursor: pointer;
        font-family: Inter,Helvetica,"Apple Color Emoji","Segoe UI Emoji",NotoColorEmoji,"Noto Color Emoji","Segoe UI Symbol","Android Emoji",EmojiSymbols,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",sans-serif;
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
        opacity: 1;
        outline: 0 solid transparent;
        padding: 8px 18px;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        width: fit-content;
        word-break: break-word;
        border: 0;
	    text-decoration: none;
    }
    input {
        --background: #fff;
        --border-default: #D0D0DF;
        --border-active: #3D6DF9;
        /*--shadow-default: #{rgba(#202048, .12)};*/
        /*--shadow-active: #{rgba(#3D6DF9, .25)};*/
        --text-color: #818190;
        --placeholder-color: #C9C9D9;
        --placeholder-color-hover: #BABAC9;
        --close: #818190;
        --close-light: #BABAC9;
        --close-background: #F1F1FA;
        width: 100%;
        max-width: 240px;
        border-radius: 8px;
        box-shadow: inset 0 0 0 1px;
    }

    .options {
	    margin: 0 auto;
	    max-width: 800px;
    }
</style>

<script>
	import {Route, router, meta} from 'tinro';
	import ChromebookScan from './ChromebookScan.svelte';
	import {Meteor} from "meteor/meteor";
	import TextField from '@smui/textfield';
	import HelperText from '@smui/textfield/helper-text';
	import Icon from '@smui/textfield/icon';
	import { Icon as CommonIcon } from '@smui/common';
	import DateInput from "./DateInput.svelte";

	let serialInput = null;
	let emailInput = null;
	let dateInput = null;

	function serialSearch() {
		router.goto("/chromebooks?serial=" + encodeURIComponent(serialInput) + "&regex=true");
	}
	function emailSearch() {
		router.goto("/chromebooks?email=" + encodeURIComponent(emailInput) + "&regex=true");
	}
	function dateSearch() {
		console.log("Date Search")
		console.log(dateInput);

		if(dateInput) {
			console.log(dateInput instanceof Date)
			//console.log(!isNaN(date.valueOf()));
			console.log(dateInput.getTime())
		}
		if(dateInput && dateInput instanceof Date)
			router.goto("/chromebooks?date=" + encodeURIComponent(dateInput.getTime()));
	}

	// console.log("Loading Script");
	// //Attempt to listen for URL changes (query portion specifically).
	// (function(history){
	// 	const pushState = history.pushState;
	// 	history.pushState = function(state) {
	// 		if (typeof history.onpushstate == "function") {
	// 			history.onpushstate({state: state});
	// 		}
	// 		// Call your custom function here
	// 		console.log("Push state");
	// 		console.log(history);
	// 		console.log(arguments);
	// 		return pushState.apply(history, arguments);
	// 	}
	// })(window.history);

	// const params = Object.fromEntries(new URLSearchParams(window.location.search));
	//
	// console.log("Params: ");
	// console.log(params);

	let deviceId = null;
	let serial = null;
	let email = null;
	let date = null;
	let regex = false;
	$: router.subscribe(query => {
		deviceId = router.location.query.get("deviceId");
		serial = router.location.query.get("serial");
		email = router.location.query.get("email");
		regex = router.location.query.get("regex");
		date = router.location.query.get("date");

		if(deviceId) deviceId = decodeURIComponent(deviceId);
		if(serial) serial = decodeURIComponent(serial);
		if(email) email = decodeURIComponent(email);
		if(date) date = decodeURIComponent(date);
		if(regex) regex = true;

		// console.log("Query:");
		// console.log(deviceId);
		// console.log(serial);
		// console.log(email);
		// console.log(date);
	});
	let chromebookData = null;
	$: {
		if(deviceId || serial || email || date) {
			let params = {};

			if(deviceId) params.deviceId = deviceId;
			else if(serial) params.serial = serial;
			else if(email) params.email = email;
			else if(date) params.date = parseInt(date, 10);

			if(!date && regex) params.regex = true;

			console.log("Calling DataCollection.chromebookData")
			console.log(params);
			Meteor.call("DataCollection.chromebookData", params, (error, result) => {
				if (error) {
					console.error(error);
				} else {
					chromebookData = result;
				}
			});
		}
		else {
			chromebookData = null;
		}
	}
</script>

<Route path="/" let:meta>
	{#if chromebookData}
		<div class="container">
			<div class="row col-12">
				<ul>
					{#each chromebookData as data}
						<li><a href="/chromebooks?email={encodeURIComponent(data.email)}">{data.email}</a><br/>
							<a href="/chromebooks?deviceId={encodeURIComponent(data.deviceId)}">{data.deviceId}</a><br/>
							<a href="/chromebooks?serial={encodeURIComponent(data.serial)}">{data.serial}</a><br/>
							{new Date(data.startTime).toLocaleDateString("en-US") + "-" + new Date(data.endTime).toLocaleDateString("en-US")}
						</li>
					{/each}
				</ul>
			</div>
		</div>
	{:else}
		<div class="container">
			<div class="row col-12">
				<div class="options">
					<h1>Chromebook Management</h1>

					<ul>
						<li>
							<TextField type="text" bind:value={emailInput} on:keypress={(e) => {if(e.keyCode === 13) emailSearch()}} label="Email">
								<svelte:fragment slot="label">
									<CommonIcon class="material-icons" style="font-size: 1em; line-height: normal; vertical-align: top;">email</CommonIcon> Email
								</svelte:fragment>
								<Icon class="material-icons" slot="trailingIcon">search</Icon>
								<HelperText slot="helper">Type any part of an email address.</HelperText>
							</TextField>
						</li>
						<li>
							By Chromebook Device ID: <a href="/chromebooks/scan" className="button">Scan</a>
						</li>
						<li>
							By Chromebook Serial Number: <br/>
							<input type="text" bind:value="{serialInput}" placeholder="Serial Number"/><br/>
							<button type="button" role="button" on:click={serialSearch}>Search</button>
						</li>
						<li>
							By Email Address: <br/>
							<input type="text" bind:value="{emailInput}" placeholder="Email"/>@avpanthers.org<br/>
							<button type="button" role="button" on:click={emailSearch}>Search</button>
						</li>
						<li>
							All records since: <br/>
							<DateInput bind:date={dateInput}/>
							<button type="button" role="button" on:click={dateSearch}>Search</button>
						</li>
					</ul>
				</div>
			</div>
		</div>
	{/if}
</Route>

<Route path="/byDevice/:deviceId">
	<div class="container">
		<div class="row col-12">
			<ul>
				{#each chromebookData as data}
					<li>{data.email}<br/>{data.serial}
						<br/>{new Date(data.startTime).toLocaleDateString("en-US") + "-" + new Date(data.endTime).toLocaleDateString("en-US")}
					</li>
				{/each}
			</ul>
		</div>
	</div>
</Route>

<Route path="/scan">
	<ChromebookScan/>
</Route>
<Route path="/byStudent">TODO: Use student email to look up Chromebook history</Route>
<Route path="/byChromebook">TODO: Use chromebook ID (or picture of ID) to look up Chromebook history</Route>