wcrisman/DistrictCentral
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleaned up the chromebooks view; Reorganized the admin view; Added functionality to import students and staff (still need to add/test functionality to edit them and delete them).

Browse Source
This commit is contained in:
DESKTOP-C9V2M01\Zeeri
2022-07-23 23:42:23 -07:00
parent 195d93fd20
commit 603f395ef0
15 changed files with 4825 additions and 523 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
imports/ui/Chromebooks.svelte
View File

@@ -1,51 +1,4 @@
<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';
@@ -55,25 +8,35 @@
import Icon from '@smui/textfield/icon';
import { Icon as CommonIcon } from '@smui/common';
import DateInput from "./DateInput.svelte";
import Button, { Label } from '@smui/button';
import IconButton from '@smui/icon-button';
let serialInput = null;
let emailInput = null;
let dateInput = null;
let assetIdInput = null;
function serialSearch() {
router.goto("/chromebooks?serial=" + encodeURIComponent(serialInput) + "&regex=true");
}
function assetIdSearch() {
router.goto("/chromebooks?assetId=" + encodeURIComponent(assetIdInput) + "&regex=true");
}
function emailSearch() {
router.goto("/chromebooks?email=" + encodeURIComponent(emailInput) + "&regex=true");
}
function dateSearch() {
console.log("Date Search")
console.log(dateInput);
// console.log("Date Search")
// console.log(dateInput);
if(dateInput) {
console.log(dateInput instanceof Date)
if(typeof dateInput === 'string' || dateInput instanceof String) {
let parts = dateInput.split('-');
dateInput = new Date(parts[0], parts[1]-1, parts[2]);
}
// console.log(dateInput instanceof Date)
//console.log(!isNaN(date.valueOf()));
console.log(dateInput.getTime())
// console.log(dateInput.getTime())
}
if(dateInput && dateInput instanceof Date)
router.goto("/chromebooks?date=" + encodeURIComponent(dateInput.getTime()));
@@ -102,18 +65,21 @@
let deviceId = null;
let serial = null;
let assetId = 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");
assetId = router.location.query.get('assetId');
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(assetId) assetId = decodeURIComponent(assetId);
if(email) email = decodeURIComponent(email);
if(date) date = decodeURIComponent(date);
if(regex) regex = true;
@@ -121,6 +87,7 @@
// console.log("Query:");
// console.log(deviceId);
// console.log(serial);
// console.log(assetId);
// console.log(email);
// console.log(date);
});
@@ -131,6 +98,7 @@
if(deviceId) params.deviceId = deviceId;
else if(serial) params.serial = serial;
else if(assetId) params.assetId = assetId;
else if(email) params.email = email;
else if(date) params.date = parseInt(date, 10);
@@ -176,30 +144,53 @@
<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>
<!-- <svelte:fragment slot="label">-->
<!-- <CommonIcon class="material-icons" style="font-size: 1em; line-height: normal; vertical-align: top;">email</CommonIcon> Email-->
<!-- </svelte:fragment>-->
<IconButton slot="trailingIcon" class="material-icons" on:click={emailSearch}>search</IconButton>
<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 style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; align-content: flex-start; gap: 2rem;">
<div style="display: inline-block;">
<TextField type="text" bind:value={serialInput} on:keypress={(e) => {if(e.keyCode === 13) serialSearch()}} label="Serial Number">
<IconButton slot="trailingIcon" class="material-icons" on:click={serialSearch}>search</IconButton>
<HelperText slot="helper">Type any part of a device serial number.</HelperText>
</TextField>
</div>
<div style="display: inline-block">
or
<Button style="margin-left: 2rem;" color="secondary" touch variant="raised" on:click={() => {document.location.href="/chromebooks/scan"}}>
<Label style="color: white">Scan</Label>
<Icon style="color: white" class="material-icons">qr_code_scanner</Icon>
</Button>
</div>
</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>
<TextField type="text" bind:value={assetIdInput} on:keypress={(e) => {if(e.keyCode === 13) assetIdSearch()}} label="Asset ID">
<IconButton slot="trailingIcon" class="material-icons" on:click={assetIdSearch}>search</IconButton>
<HelperText slot="helper">Type any part of an Asset ID.</HelperText>
</TextField>
</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>
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>
<TextField type="date" bind:value={dateInput} on:keypress={(e) => {if(e.keyCode === 13) dateSearch()}} label="Date Search">
<IconButton slot="trailingIcon" class="material-icons" on:click={dateSearch}>search</IconButton>
<HelperText slot="helper">Find records since...</HelperText>
</TextField>
<!-- All records since: <br/>-->
<!-- <DateInput bind:date={dateInput}/>-->
<!-- <button type="button" role="button" on:click={dateSearch}>Search</button>-->
</li>
</ul>
</div>
@@ -225,5 +216,51 @@
<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>
<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>