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).
This commit is contained in:
@@ -1,358 +1,30 @@
|
||||
<script>
|
||||
import {Meteor} from "meteor/meteor";
|
||||
import {onMount} from "svelte";
|
||||
import {Sites} from "../api/sites";
|
||||
import GridTable from "./GridTable.svelte";
|
||||
import {writable} from "svelte/store";
|
||||
import TextField from '@smui/textfield';
|
||||
import HelperText from '@smui/textfield/helper-text';
|
||||
import {Students} from "../api/students";
|
||||
import {Staff} from "../api/staff";
|
||||
import {AssetTypes} from "../api/asset-types";
|
||||
import Tab, { Label } from '@smui/tab';
|
||||
import TabBar from '@smui/tab-bar';
|
||||
import AssetTypes from "/imports/ui/Admin/AssetTypes.svelte";
|
||||
import Sites from "/imports/ui/Admin/Sites.svelte";
|
||||
import Students from "/imports/ui/Admin/Students.svelte";
|
||||
import Staff from "/imports/ui/Admin/Staff.svelte";
|
||||
|
||||
onMount(async () => {
|
||||
Meteor.subscribe('sites');
|
||||
Meteor.subscribe('assetTypes');
|
||||
});
|
||||
|
||||
// Should not be needed now. Did not work well - had a bug somewhere.
|
||||
// const fixRecords = () => {Meteor.call("admin.fixRecords");}
|
||||
|
||||
const siteColumns = [
|
||||
{
|
||||
key: "_id",
|
||||
title: "ID",
|
||||
value: v => v._id,
|
||||
minWidth: 20,
|
||||
weight: 1,
|
||||
cls: "id",
|
||||
}, {
|
||||
key: "name",
|
||||
title: "Name",
|
||||
value: v => v.name,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "name",
|
||||
},
|
||||
];
|
||||
const siteActions = {
|
||||
title: "Actions",
|
||||
headerWidgets: [
|
||||
{icon: "add_box", action: () => {editedSite.set({name: ""});}, tooltip: "Add a new Site."}
|
||||
],
|
||||
rowWidgets: [
|
||||
{icon: "add_circle", action: (v) => {editedSite.set(v)}},
|
||||
{icon: "delete", action: (v) => {deleteSite(v)}}
|
||||
],
|
||||
};
|
||||
const deleteSite = site => {
|
||||
//TODO:
|
||||
};
|
||||
// Create a holder for the site being edited. This allows us to clear the editor when the user finishes, and allows the table or parent view to setup the editor.
|
||||
let editedSite = writable(null);
|
||||
let dirtySite;
|
||||
// Copy the edited site when ever it changes, set some defaults for a new site object (to make the view happy).
|
||||
editedSite.subscribe(site => {dirtySite = Object.assign({name:""}, site)});
|
||||
// Load the sites (reactive).
|
||||
let sites = Sites.find({});
|
||||
const applySiteChanges = () => {
|
||||
if(dirtySite._id)
|
||||
Meteor.call("sites.update", dirtySite._id, dirtySite.name);
|
||||
else
|
||||
Meteor.call("sites.add", dirtySite.name);
|
||||
editedSite.set(null);
|
||||
dirtySite = null;
|
||||
}
|
||||
const rejectSiteChanges = () => {
|
||||
editedSite.set(null);
|
||||
}
|
||||
let selectedSite = null;
|
||||
const onSiteSelection = (e) => {
|
||||
selectedSite = Sites.findOne({_id: e.detail});
|
||||
}
|
||||
|
||||
let students = null;
|
||||
let staff = null;
|
||||
$: {
|
||||
if(selectedSite) {
|
||||
Meteor.subscribe('students', selectedSite._id);
|
||||
Meteor.subscribe('staff', selectedSite._id);
|
||||
students = Students.find({siteId: selectedSite._id});
|
||||
staff = Staff.find({siteId: selectedSite._id});
|
||||
}
|
||||
}
|
||||
|
||||
const uploadStudents = () => {
|
||||
// console.log(files);
|
||||
// console.log(selectedSite);
|
||||
// console.log(selectedSite._id);
|
||||
if(files && files.length) {
|
||||
let file = files[0];
|
||||
let reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
// console.log("Sending Data");
|
||||
// console.log(selectedSite._id);
|
||||
// console.log(reader.result);
|
||||
Meteor.call('students.loadCsv', reader.result, selectedSite._id);
|
||||
}
|
||||
reader.readAsText(file, "UTF-8");
|
||||
}
|
||||
}
|
||||
let files;
|
||||
|
||||
const studentColumns = [
|
||||
{
|
||||
key: "_id",
|
||||
title: "ID",
|
||||
value: v => v._id,
|
||||
minWidth: 20,
|
||||
weight: 1,
|
||||
cls: "id",
|
||||
}, {
|
||||
key: "email",
|
||||
title: "Email",
|
||||
value: v => v.email,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "email",
|
||||
}, {
|
||||
key: "firstName",
|
||||
title: "First Name",
|
||||
value: v => v.firstName,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "firstName",
|
||||
}, {
|
||||
key: "lastName",
|
||||
title: "Last Name",
|
||||
value: v => v.lastName,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "lastName",
|
||||
}, {
|
||||
key: "grade",
|
||||
title: "Grade",
|
||||
value: v => v.grade,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "grade",
|
||||
},
|
||||
];
|
||||
let editedStudent = writable(null);
|
||||
const onStudentSelection = (e) => {
|
||||
|
||||
}
|
||||
|
||||
const staffColumns = [
|
||||
{
|
||||
key: "_id",
|
||||
title: "ID",
|
||||
value: v => v._id,
|
||||
minWidth: 20,
|
||||
weight: 1,
|
||||
cls: "id",
|
||||
}, {
|
||||
key: "email",
|
||||
title: "Email",
|
||||
value: v => v.email,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "email",
|
||||
}, {
|
||||
key: "firstName",
|
||||
title: "First Name",
|
||||
value: v => v.firstName,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "firstName",
|
||||
}, {
|
||||
key: "lastName",
|
||||
title: "Last Name",
|
||||
value: v => v.lastName,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "lastName",
|
||||
},
|
||||
];
|
||||
let editedStaff = writable(null);
|
||||
const onStaffSelection = (e) => {
|
||||
|
||||
}
|
||||
|
||||
const assetTypesColumns = [
|
||||
{
|
||||
key: "_id",
|
||||
title: "ID",
|
||||
value: v => v._id,
|
||||
minWidth: 20,
|
||||
weight: 1,
|
||||
cls: "id",
|
||||
}, {
|
||||
key: "name",
|
||||
title: "Name",
|
||||
value: v => v.name,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "name",
|
||||
}, {
|
||||
key: "description",
|
||||
title: "Description",
|
||||
value: v => v.description,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "description",
|
||||
},
|
||||
];
|
||||
const assetTypesActions = {
|
||||
title: "Actions",
|
||||
headerWidgets: [
|
||||
{icon: "add_box", action: () => {editedAssetType.set({});}, tooltip: "Add a new asset type."}
|
||||
],
|
||||
rowWidgets: [
|
||||
{icon: "add_circle", action: (v) => {editedAssetType.set(v)}},
|
||||
{icon: "delete", action: (v) => {deleteAssetType(v)}}
|
||||
],
|
||||
};
|
||||
let editedAssetType = writable(null);
|
||||
const onAssetTypeSelection = (e) => {
|
||||
}
|
||||
let dirtyAssetType;
|
||||
// Copy the edited value when ever it changes, set some defaults for a new value object (to make the view happy).
|
||||
editedAssetType.subscribe(v => {dirtyAssetType = Object.assign({name: "", description: ""}, v)});
|
||||
// Load the sites (reactive).
|
||||
let assetTypes = AssetTypes.find({});
|
||||
const deleteAssetType = assetType => {
|
||||
//TODO:
|
||||
};
|
||||
const applyAssetTypeChanges = () => {
|
||||
if(dirtyAssetType._id)
|
||||
Meteor.call("assetTypes.update", dirtyAssetType._id, dirtyAssetType.name, dirtyAssetType.description);
|
||||
else
|
||||
Meteor.call("assetTypes.add", dirtyAssetType.name, dirtyAssetType.description);
|
||||
editedAssetType.set(null);
|
||||
dirtyAssetType = null;
|
||||
}
|
||||
const rejectAssetTypeChanges = () => {
|
||||
editedSite.set(null);
|
||||
}
|
||||
let activeTab = null;
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<h2>Sites</h2>
|
||||
<GridTable bind:rows={sites} columns="{siteColumns}" actions="{siteActions}" rowKey="{(v) => {return v._id}}" bind:edited="{editedSite}" on:selection={onSiteSelection}>
|
||||
{#if dirtySite}
|
||||
<div class="editorContainer">
|
||||
<div style="grid-column: 1/span 1">
|
||||
<TextField type="text" style="width: 100%" bind:value={dirtySite.name} label="Name">
|
||||
<HelperText slot="helper">Provide a unique name for the site.</HelperText>
|
||||
</TextField>
|
||||
</div>
|
||||
|
||||
<button type="button" style="grid-column: 2/span 1;" class="button accept-button material-icons material-symbols-outlined" on:click={applySiteChanges}>
|
||||
check
|
||||
</button>
|
||||
<button type="button" style="grid-column: 3/span 1;" class="button reject-button material-icons material-symbols-outlined" on:click={rejectSiteChanges}>
|
||||
close
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</GridTable>
|
||||
|
||||
{#if selectedSite}
|
||||
<h2>Site Students</h2>
|
||||
<form on:submit|preventDefault={uploadStudents}>
|
||||
<input style="display: inline-block" type="file" multiple="false" accept="text/csv" bind:files={files}/>
|
||||
<input type="submit" value="Upload"/>
|
||||
</form>
|
||||
<GridTable bind:rows={students} columns="{studentColumns}" actions="{null}" rowKey="{(v) => {return v._id}}" bind:edited="{editedStudent}" on:selection={onStudentSelection}>
|
||||
{#if dirtySite}
|
||||
<div class="editorContainer">
|
||||
<div style="grid-column: 1/span 1">
|
||||
<TextField type="text" style="width: 100%" bind:value={dirtySite.name} label="Name">
|
||||
<HelperText slot="helper">Provide a unique name for the site.</HelperText>
|
||||
</TextField>
|
||||
</div>
|
||||
|
||||
<button type="button" style="grid-column: 2/span 1;" class="button accept-button material-icons material-symbols-outlined" on:click={applySiteChanges}>
|
||||
check
|
||||
</button>
|
||||
<button type="button" style="grid-column: 3/span 1;" class="button reject-button material-icons material-symbols-outlined" on:click={rejectSiteChanges}>
|
||||
close
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</GridTable>
|
||||
|
||||
<h2>Site Staff</h2>
|
||||
<GridTable bind:rows={staff} columns="{staffColumns}" actions="{null}" rowKey="{(v) => {return v._id}}" bind:edited="{editedStaff}" on:selection={onStaffSelection}>
|
||||
{#if dirtySite}
|
||||
<div class="editorContainer">
|
||||
<div style="grid-column: 1/span 1">
|
||||
<TextField type="text" style="width: 100%" bind:value={dirtySite.name} label="Name">
|
||||
<HelperText slot="helper">Provide a unique name for the site.</HelperText>
|
||||
</TextField>
|
||||
</div>
|
||||
|
||||
<button type="button" style="grid-column: 2/span 1;" class="button accept-button material-icons material-symbols-outlined" on:click={applySiteChanges}>
|
||||
check
|
||||
</button>
|
||||
<button type="button" style="grid-column: 3/span 1;" class="button reject-button material-icons material-symbols-outlined" on:click={rejectSiteChanges}>
|
||||
close
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</GridTable>
|
||||
<TabBar tabs={[{id:'sites', label:'Sites'}, {id:'students', label:'Students'}, {id:'staff', label:'Staff'}, {id:'assetTypes', label:'Asset Types'}]} minWidth let:tab bind:active={activeTab}>
|
||||
<Tab {tab}>
|
||||
<Label>{tab.label}</Label>
|
||||
</Tab>
|
||||
</TabBar>
|
||||
{#if activeTab && activeTab.id === 'sites'}
|
||||
<Sites></Sites>
|
||||
{:else if activeTab && activeTab.id === 'students'}
|
||||
<Students></Students>
|
||||
{:else if activeTab && activeTab.id === 'staff'}
|
||||
<Staff></Staff>
|
||||
{:else if activeTab && activeTab.id === 'assetTypes'}
|
||||
<AssetTypes></AssetTypes>
|
||||
{/if}
|
||||
|
||||
<h2>Asset Types</h2>
|
||||
<GridTable bind:rows={assetTypes} columns="{assetTypesColumns}" actions="{assetTypesActions}" rowKey="{(v) => {return v._id}}" bind:edited="{editedAssetType}" on:selection={onAssetTypeSelection}>
|
||||
{#if dirtyAssetType}
|
||||
<div class="editorContainer">
|
||||
<div style="grid-column: 1/span 1">
|
||||
<TextField type="text" style="width: 100%" bind:value={dirtyAssetType.name} label="Name">
|
||||
<HelperText slot="helper">Provide a unique name for the asset type.</HelperText>
|
||||
</TextField>
|
||||
<TextField type="text" style="width: 100%" bind:value={dirtyAssetType.description} label="Description">
|
||||
<HelperText slot="helper">A detailed description.</HelperText>
|
||||
</TextField>
|
||||
</div>
|
||||
|
||||
<button type="button" style="grid-column: 2/span 1;" class="button accept-button material-icons material-symbols-outlined" on:click={applyAssetTypeChanges}>check</button>
|
||||
<button type="button" style="grid-column: 3/span 1;" class="button reject-button material-icons material-symbols-outlined" on:click={rejectAssetTypeChanges}>close</button>
|
||||
</div>
|
||||
{/if}
|
||||
</GridTable>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
.editorContainer {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(10px, 1fr) minmax(3rem, 3rem) minmax(3rem, 3rem);
|
||||
}
|
||||
.accept-button, .reject-button {
|
||||
font-size: .8rem;
|
||||
padding: .6rem;
|
||||
margin: auto;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
border: 0;
|
||||
font-weight: 800;
|
||||
alignment: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.accept-button {
|
||||
background-color: rgba(61, 148, 61, 0.91);
|
||||
}
|
||||
.reject-button {
|
||||
background-color: rgba(176, 64, 64, 0.61);
|
||||
}
|
||||
.accept-button:hover {
|
||||
background-color: rgb(61, 148, 61);
|
||||
}
|
||||
.reject-button:hover {
|
||||
background-color: rgb(176, 64, 64);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
124
imports/ui/Admin/AssetTypes.svelte
Normal file
124
imports/ui/Admin/AssetTypes.svelte
Normal file
@@ -0,0 +1,124 @@
|
||||
<script>
|
||||
import {Meteor} from "meteor/meteor";
|
||||
import {onMount} from "svelte";
|
||||
import GridTable from "./../GridTable.svelte";
|
||||
import {writable} from "svelte/store";
|
||||
import TextField from '@smui/textfield';
|
||||
import HelperText from '@smui/textfield/helper-text';
|
||||
import {AssetTypes} from "../../api/asset-types";
|
||||
|
||||
onMount(async () => {
|
||||
Meteor.subscribe('assetTypes');
|
||||
});
|
||||
|
||||
const assetTypesColumns = [
|
||||
{
|
||||
key: "_id",
|
||||
title: "ID",
|
||||
value: v => v._id,
|
||||
minWidth: 20,
|
||||
weight: 1,
|
||||
cls: "id",
|
||||
}, {
|
||||
key: "name",
|
||||
title: "Name",
|
||||
value: v => v.name,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "name",
|
||||
}, {
|
||||
key: "description",
|
||||
title: "Description",
|
||||
value: v => v.description,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "description",
|
||||
},
|
||||
];
|
||||
const assetTypesActions = {
|
||||
title: "Actions",
|
||||
headerWidgets: [
|
||||
{icon: "add_box", action: () => {editedAssetType.set({});}, tooltip: "Add a new asset type."}
|
||||
],
|
||||
rowWidgets: [
|
||||
{icon: "add_circle", action: (v) => {editedAssetType.set(v)}},
|
||||
{icon: "delete", action: (v) => {deleteAssetType(v)}}
|
||||
],
|
||||
};
|
||||
let editedAssetType = writable(null);
|
||||
const onAssetTypeSelection = (e) => {
|
||||
}
|
||||
let dirtyAssetType;
|
||||
// Copy the edited value when ever it changes, set some defaults for a new value object (to make the view happy).
|
||||
editedAssetType.subscribe(v => {dirtyAssetType = Object.assign({name: "", description: ""}, v)});
|
||||
// Load the sites (reactive).
|
||||
let assetTypes = AssetTypes.find({});
|
||||
const deleteAssetType = assetType => {
|
||||
//TODO:
|
||||
};
|
||||
const applyAssetTypeChanges = () => {
|
||||
if(dirtyAssetType._id)
|
||||
Meteor.call("assetTypes.update", dirtyAssetType._id, dirtyAssetType.name, dirtyAssetType.description);
|
||||
else
|
||||
Meteor.call("assetTypes.add", dirtyAssetType.name, dirtyAssetType.description);
|
||||
editedAssetType.set(null);
|
||||
dirtyAssetType = null;
|
||||
}
|
||||
const rejectAssetTypeChanges = () => {
|
||||
editedAssetType.set(null);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<h2>Asset Types</h2>
|
||||
<GridTable bind:rows={assetTypes} columns="{assetTypesColumns}" actions="{assetTypesActions}" rowKey="{(v) => {return v._id}}" bind:edited="{editedAssetType}" on:selection={onAssetTypeSelection}>
|
||||
{#if dirtyAssetType}
|
||||
<div class="editorContainer">
|
||||
<div style="grid-column: 1/span 1">
|
||||
<TextField type="text" style="width: 100%" bind:value={dirtyAssetType.name} label="Name">
|
||||
<HelperText slot="helper">Provide a unique name for the asset type.</HelperText>
|
||||
</TextField>
|
||||
<TextField type="text" style="width: 100%" bind:value={dirtyAssetType.description} label="Description">
|
||||
<HelperText slot="helper">A detailed description.</HelperText>
|
||||
</TextField>
|
||||
</div>
|
||||
|
||||
<button type="button" style="grid-column: 2/span 1;" class="button accept-button material-icons material-symbols-outlined" on:click={applyAssetTypeChanges}>check</button>
|
||||
<button type="button" style="grid-column: 3/span 1;" class="button reject-button material-icons material-symbols-outlined" on:click={rejectAssetTypeChanges}>close</button>
|
||||
</div>
|
||||
{/if}
|
||||
</GridTable>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
.editorContainer {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(10px, 1fr) minmax(3rem, 3rem) minmax(3rem, 3rem);
|
||||
}
|
||||
.accept-button, .reject-button {
|
||||
font-size: .8rem;
|
||||
padding: .6rem;
|
||||
margin: auto;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
border: 0;
|
||||
font-weight: 800;
|
||||
alignment: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.accept-button {
|
||||
background-color: rgba(61, 148, 61, 0.91);
|
||||
}
|
||||
.reject-button {
|
||||
background-color: rgba(176, 64, 64, 0.61);
|
||||
}
|
||||
.accept-button:hover {
|
||||
background-color: rgb(61, 148, 61);
|
||||
}
|
||||
.reject-button:hover {
|
||||
background-color: rgb(176, 64, 64);
|
||||
}
|
||||
</style>
|
||||
117
imports/ui/Admin/Sites.svelte
Normal file
117
imports/ui/Admin/Sites.svelte
Normal file
@@ -0,0 +1,117 @@
|
||||
<script>
|
||||
import {Meteor} from "meteor/meteor";
|
||||
import {onMount} from "svelte";
|
||||
import {Sites} from "../../api/sites";
|
||||
import GridTable from "./../GridTable.svelte";
|
||||
import {writable} from "svelte/store";
|
||||
import TextField from '@smui/textfield';
|
||||
import HelperText from '@smui/textfield/helper-text';
|
||||
|
||||
onMount(async () => {
|
||||
Meteor.subscribe('sites');
|
||||
});
|
||||
|
||||
// Should not be needed now. Did not work well - had a bug somewhere.
|
||||
// const fixRecords = () => {Meteor.call("admin.fixRecords");}
|
||||
|
||||
const siteColumns = [
|
||||
{
|
||||
key: "name",
|
||||
title: "Name",
|
||||
value: v => v.name,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "name",
|
||||
},
|
||||
];
|
||||
const siteActions = {
|
||||
title: "Actions",
|
||||
headerWidgets: [
|
||||
{icon: "add_box", action: () => {editedSite.set({name: ""});}, tooltip: "Add a new Site."}
|
||||
],
|
||||
rowWidgets: [
|
||||
{icon: "add_circle", action: (v) => {editedSite.set(v)}},
|
||||
{icon: "delete", action: (v) => {deleteSite(v)}}
|
||||
],
|
||||
};
|
||||
const deleteSite = site => {
|
||||
//TODO:
|
||||
};
|
||||
// Create a holder for the site being edited. This allows us to clear the editor when the user finishes, and allows the table or parent view to setup the editor.
|
||||
let editedSite = writable(null);
|
||||
let dirtySite;
|
||||
// Copy the edited site when ever it changes, set some defaults for a new site object (to make the view happy).
|
||||
editedSite.subscribe(site => {dirtySite = Object.assign({name:""}, site)});
|
||||
// Load the sites (reactive).
|
||||
let sites = Sites.find({});
|
||||
const applySiteChanges = () => {
|
||||
if(dirtySite._id)
|
||||
Meteor.call("sites.update", dirtySite._id, dirtySite.name);
|
||||
else
|
||||
Meteor.call("sites.add", dirtySite.name);
|
||||
editedSite.set(null);
|
||||
dirtySite = null;
|
||||
}
|
||||
const rejectSiteChanges = () => {
|
||||
editedSite.set(null);
|
||||
}
|
||||
let selectedSite = null;
|
||||
const onSiteSelection = (e) => {
|
||||
selectedSite = Sites.findOne({_id: e.detail});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<h2>Sites</h2>
|
||||
<GridTable bind:rows={sites} columns="{siteColumns}" actions="{siteActions}" rowKey="{(v) => {return v._id}}" bind:edited="{editedSite}" on:selection={onSiteSelection}>
|
||||
{#if dirtySite}
|
||||
<div class="editorContainer">
|
||||
<div style="grid-column: 1/span 1">
|
||||
<TextField type="text" style="width: 100%" bind:value={dirtySite.name} label="Name">
|
||||
<HelperText slot="helper">Provide a unique name for the site.</HelperText>
|
||||
</TextField>
|
||||
</div>
|
||||
|
||||
<button type="button" style="grid-column: 2/span 1;" class="button accept-button material-icons material-symbols-outlined" on:click={applySiteChanges}>
|
||||
check
|
||||
</button>
|
||||
<button type="button" style="grid-column: 3/span 1;" class="button reject-button material-icons material-symbols-outlined" on:click={rejectSiteChanges}>
|
||||
close
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</GridTable>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
.editorContainer {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(10px, 1fr) minmax(3rem, 3rem) minmax(3rem, 3rem);
|
||||
}
|
||||
.accept-button, .reject-button {
|
||||
font-size: .8rem;
|
||||
padding: .6rem;
|
||||
margin: auto;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
border: 0;
|
||||
font-weight: 800;
|
||||
alignment: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.accept-button {
|
||||
background-color: rgba(61, 148, 61, 0.91);
|
||||
}
|
||||
.reject-button {
|
||||
background-color: rgba(176, 64, 64, 0.61);
|
||||
}
|
||||
.accept-button:hover {
|
||||
background-color: rgb(61, 148, 61);
|
||||
}
|
||||
.reject-button:hover {
|
||||
background-color: rgb(176, 64, 64);
|
||||
}
|
||||
</style>
|
||||
223
imports/ui/Admin/Staff.svelte
Normal file
223
imports/ui/Admin/Staff.svelte
Normal file
@@ -0,0 +1,223 @@
|
||||
<script>
|
||||
import {Meteor} from "meteor/meteor";
|
||||
import {onMount} from "svelte";
|
||||
import {Sites} from "../../api/sites";
|
||||
import GridTable from "./../GridTable.svelte";
|
||||
import {writable} from "svelte/store";
|
||||
import TextField from '@smui/textfield';
|
||||
import HelperText from '@smui/textfield/helper-text';
|
||||
import {Staff} from "../../api/staff";
|
||||
import Select, { Option } from '@smui/select';
|
||||
import Dialog, { Title, Content, Actions } from '@smui/dialog';
|
||||
import Button, { Label } from '@smui/button';
|
||||
|
||||
onMount(async () => {
|
||||
Meteor.subscribe('sites');
|
||||
});
|
||||
|
||||
// Load the sites (reactive).
|
||||
let sites = Sites.find({});
|
||||
let selectedSiteId;
|
||||
|
||||
let staff = null;
|
||||
let staffCount = 0;
|
||||
$: {
|
||||
if(selectedSiteId) {
|
||||
Meteor.subscribe('staff', selectedSiteId);
|
||||
staff = Staff.find({siteId: selectedSiteId});
|
||||
}
|
||||
}
|
||||
$: {
|
||||
if(staff) {
|
||||
staffCount = $staff.length;
|
||||
}
|
||||
else {
|
||||
staffCount = 0;
|
||||
}
|
||||
}
|
||||
|
||||
let uploadType = 'CSV'
|
||||
|
||||
const uploadStaff = () => {
|
||||
// console.log(files);
|
||||
// console.log(selectedSite);
|
||||
// console.log(selectedSite._id);
|
||||
if(files && files.length) {
|
||||
let file = files[0];
|
||||
let reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
// console.log("Sending Data");
|
||||
// console.log(selectedSite._id);
|
||||
// console.log(reader.result);
|
||||
Meteor.call('staff.loadCsv', reader.result, uploadType, selectedSiteId);
|
||||
}
|
||||
reader.readAsText(file, "UTF-8");
|
||||
}
|
||||
}
|
||||
let files;
|
||||
|
||||
const staffColumns = [
|
||||
{
|
||||
key: "id",
|
||||
title: "ID",
|
||||
value: v => v.id,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "id",
|
||||
}, {
|
||||
key: "email",
|
||||
title: "Email",
|
||||
value: v => v.email,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "email",
|
||||
}, {
|
||||
key: "firstName",
|
||||
title: "First Name",
|
||||
value: v => v.firstName,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "firstName",
|
||||
}, {
|
||||
key: "lastName",
|
||||
title: "Last Name",
|
||||
value: v => v.lastName,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "lastName",
|
||||
},
|
||||
];
|
||||
const staffActions = {
|
||||
title: "Actions",
|
||||
headerWidgets: [
|
||||
{icon: "add_box", action: () => {editedStaff.set({});}, tooltip: "Add a staff member."}
|
||||
],
|
||||
rowWidgets: [
|
||||
{icon: "add_circle", action: (v) => {editedStaff.set(v)}},
|
||||
{icon: "delete", action: (v) => {deleteStaff(v)}}
|
||||
],
|
||||
};
|
||||
let editedStaff = writable(null);
|
||||
let siteSelectComponent;
|
||||
const onStaffSelection = (e) => {
|
||||
|
||||
}
|
||||
let dirtyStaff;
|
||||
// Copy the edited value when ever it changes, set some defaults for a new value object (to make the view happy).
|
||||
editedStaff.subscribe(v => {dirtyStaff = Object.assign({email: "", firstName: "", lastName: ""}, v)});
|
||||
const deleteStaff = staff => {
|
||||
//TODO:
|
||||
};
|
||||
const applyStaffChanges = () => {
|
||||
if(dirtyStaff._id)
|
||||
Meteor.call("staff.update", dirtyStaff);
|
||||
else
|
||||
Meteor.call("staff.add", dirtyStaff);
|
||||
editedStaff.set(null);
|
||||
dirtyStaff = null;
|
||||
}
|
||||
const rejectStaffChanges = () => {
|
||||
editedStaff.set(null);
|
||||
}
|
||||
let openExportHelpDialog = false;
|
||||
const clickOpenExportHelpDialog = () => {
|
||||
openExportHelpDialog = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<Select bind:value={selectedSiteId} label="Site" bind:this={siteSelectComponent}>
|
||||
{#each $sites as site}
|
||||
<Option value={site._id}>{site.name}</Option>
|
||||
{/each}
|
||||
</Select>
|
||||
|
||||
<h2>Site Staff ({staffCount})</h2>
|
||||
<form on:submit|preventDefault={uploadStaff}>
|
||||
<input style="display: inline-block" type="file" multiple="false" accept="text/*" bind:files={files}/>
|
||||
<select bind:value={uploadType}>
|
||||
<option value="CSV">Comma Separated Value (CSV)</option>
|
||||
<option value="Aeries Text Report">Aeries Text Report (TXT)</option>
|
||||
</select>
|
||||
<input disabled="{!selectedSiteId}" type="submit" value="Upload"/>
|
||||
<input type="button" value="?" on:click={clickOpenExportHelpDialog}/>
|
||||
</form>
|
||||
<GridTable bind:rows={staff} columns="{staffColumns}" actions="{staffActions}" rowKey="{(v) => {return v._id}}" bind:edited="{editedStaff}" on:selection={onStaffSelection}>
|
||||
{#if dirtyStaff}
|
||||
<div class="editorContainer">
|
||||
<div style="grid-column: 1/span 1">
|
||||
<TextField type="text" style="width: 100%" bind:value={dirtyStaff.email} label="Email">
|
||||
</TextField>
|
||||
</div>
|
||||
<div style="grid-column: 1/span 1">
|
||||
<TextField type="text" style="width: 100%" bind:value={dirtyStaff.firstName} label="First Name">
|
||||
</TextField>
|
||||
</div>
|
||||
<div style="grid-column: 1/span 1">
|
||||
<TextField type="text" style="width: 100%" bind:value={dirtyStaff.lastName} label="Last Name">
|
||||
</TextField>
|
||||
</div>
|
||||
|
||||
<button type="button" style="grid-column: 2/span 1;" class="button accept-button material-icons material-symbols-outlined" on:click={applyStaffChanges}>
|
||||
check
|
||||
</button>
|
||||
<button type="button" style="grid-column: 3/span 1;" class="button reject-button material-icons material-symbols-outlined" on:click={rejectStaffChanges}>
|
||||
close
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</GridTable>
|
||||
<Dialog bind:open={openExportHelpDialog} aria-labelledby="exportHelpTitle" aria-describedby="exportHelpContent" surface$style="width: 800px; max-width: calc(100vw - 32px);">
|
||||
<Title id="exportHelpTitle">Exporting Staff Data</Title>
|
||||
<Content id="exportHelpContent">
|
||||
<h3>Aeries</h3>
|
||||
<p>For the Aeries system, log into your Aeries web interface and navigate to the query page. Enter the following query (change PSC = 5 to your school's number):</p>
|
||||
<pre style="font-size: 0.7rem"><code>LIST STF ID FN LN EM BY FN IF PSC = 5 AND TG # I</code></pre>
|
||||
<p>Run the query and validate that all staff have an email address and a staff ID. The `TG # I` hides staff that are inactive.</p>
|
||||
<p>You have two options for export. You can:</p>
|
||||
<ol class="help">
|
||||
<li class="help">Click the `Report` button to generate a TXT formatted report. Use Single Spacing, Automatic Orientation and no page breaks. The generated text is CSV but with a repeating collection of headers for each page. The headers will be ignored.</li>
|
||||
<li class="help">Click the `Excel` button to generate an excel spreadsheet of the results. Open this with any spreadsheet software (Excel, LibreOffice Calc, or Google Sheets) and save as CSV. The first line in the CSV file is assumed to be a header and will be ignored.</li>
|
||||
</ol>
|
||||
<p>Now upload the generated CSV file (or text file).</p>
|
||||
</Content>
|
||||
<Actions>
|
||||
<Button action="accept">
|
||||
<Label>Done</Label>
|
||||
</Button>
|
||||
</Actions>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
.editorContainer {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(10px, 1fr) minmax(3rem, 3rem) minmax(3rem, 3rem);
|
||||
}
|
||||
.accept-button, .reject-button {
|
||||
font-size: .8rem;
|
||||
padding: .6rem;
|
||||
margin: auto;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
border: 0;
|
||||
font-weight: 800;
|
||||
alignment: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.accept-button {
|
||||
background-color: rgba(61, 148, 61, 0.91);
|
||||
}
|
||||
.reject-button {
|
||||
background-color: rgba(176, 64, 64, 0.61);
|
||||
}
|
||||
.accept-button:hover {
|
||||
background-color: rgb(61, 148, 61);
|
||||
}
|
||||
.reject-button:hover {
|
||||
background-color: rgb(176, 64, 64);
|
||||
}
|
||||
</style>
|
||||
236
imports/ui/Admin/Students.svelte
Normal file
236
imports/ui/Admin/Students.svelte
Normal file
@@ -0,0 +1,236 @@
|
||||
<script>
|
||||
import {Meteor} from "meteor/meteor";
|
||||
import {onMount} from "svelte";
|
||||
import {Sites} from "../../api/sites";
|
||||
import GridTable from "./../GridTable.svelte";
|
||||
import {writable} from "svelte/store";
|
||||
import TextField from '@smui/textfield';
|
||||
import HelperText from '@smui/textfield/helper-text';
|
||||
import {Students} from "../../api/students";
|
||||
import Select, { Option } from '@smui/select';
|
||||
import Dialog, { Title, Content, Actions } from '@smui/dialog';
|
||||
import Button, { Label } from '@smui/button';
|
||||
|
||||
onMount(async () => {
|
||||
Meteor.subscribe('sites');
|
||||
});
|
||||
|
||||
// Load the sites (reactive).
|
||||
let sites = Sites.find({});
|
||||
let selectedSiteId;
|
||||
|
||||
let students;
|
||||
let studentCount = 0;
|
||||
$: {
|
||||
if(selectedSiteId) {
|
||||
Meteor.subscribe('students', selectedSiteId);
|
||||
students = Students.find({siteId: selectedSiteId});
|
||||
}
|
||||
}
|
||||
$: {
|
||||
if(students) {
|
||||
studentCount = $students.length;
|
||||
}
|
||||
else {
|
||||
studentCount = 0;
|
||||
}
|
||||
}
|
||||
|
||||
let uploadType = 'CSV'
|
||||
|
||||
const uploadStudents = () => {
|
||||
// console.log(files);
|
||||
// console.log(selectedSite);
|
||||
// console.log(selectedSite._id);
|
||||
if(files && files.length) {
|
||||
let file = files[0];
|
||||
let reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
// console.log("Sending Data");
|
||||
// console.log(selectedSite._id);
|
||||
// console.log(reader.result);
|
||||
Meteor.call('students.loadCsv', reader.result, uploadType, selectedSiteId);
|
||||
}
|
||||
reader.readAsText(file, "UTF-8");
|
||||
}
|
||||
}
|
||||
let files;
|
||||
|
||||
const studentColumns = [
|
||||
{
|
||||
key: "email",
|
||||
title: "Email",
|
||||
value: v => v.email,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "email",
|
||||
}, {
|
||||
key: "firstName",
|
||||
title: "First Name",
|
||||
value: v => v.firstName,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "firstName",
|
||||
}, {
|
||||
key: "lastName",
|
||||
title: "Last Name",
|
||||
value: v => v.lastName,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "lastName",
|
||||
}, {
|
||||
key: "grade",
|
||||
title: "Grade",
|
||||
value: v => v.grade,
|
||||
minWidth: 100,
|
||||
weight: 1,
|
||||
cls: "grade",
|
||||
},
|
||||
];
|
||||
const studentsActions = {
|
||||
title: "Actions",
|
||||
headerWidgets: [
|
||||
{icon: "add_box", action: () => {editedStudent.set({});}, tooltip: "Add a student."}
|
||||
],
|
||||
rowWidgets: [
|
||||
{icon: "add_circle", action: (v) => {editedStudent.set(v)}},
|
||||
{icon: "delete", action: (v) => {deleteStudent(v)}}
|
||||
],
|
||||
};
|
||||
let siteSelectComponent;
|
||||
let editedStudent = writable(null);
|
||||
const onStudentSelection = (e) => {
|
||||
}
|
||||
let dirtyStudent;
|
||||
// Copy the edited value when ever it changes, set some defaults for a new value object (to make the view happy).
|
||||
editedStudent.subscribe(v => {dirtyStudent = Object.assign({email: "", firstName: "", lastName: "", grade: ""}, v)});
|
||||
const deleteStudent = student => {
|
||||
//TODO:
|
||||
};
|
||||
const applyStudentChanges = () => {
|
||||
if(dirtyStudent._id)
|
||||
Meteor.call("students.update", dirtyStudent);
|
||||
else
|
||||
Meteor.call("students.add", dirtyStudent);
|
||||
editedStudent.set(null);
|
||||
dirtyStudent = null;
|
||||
}
|
||||
const rejectStudentChanges = () => {
|
||||
editedStudent.set(null);
|
||||
}
|
||||
let openExportHelpDialog = false;
|
||||
const clickOpenExportHelpDialog = () => {
|
||||
openExportHelpDialog = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<Select bind:value={selectedSiteId} label="Site" bind:this={siteSelectComponent}>
|
||||
{#each $sites as site}
|
||||
<Option value={site._id}>{site.name}</Option>
|
||||
{/each}
|
||||
</Select>
|
||||
<h2>Site Students ({studentCount})</h2>
|
||||
<form on:submit|preventDefault={uploadStudents}>
|
||||
<input style="display: inline-block" type="file" multiple="false" accept="text/*" bind:files={files}/>
|
||||
<select bind:value={uploadType}>
|
||||
<option value="CSV">Comma Separated Value (CSV)</option>
|
||||
<option value="Aeries Text Report">Aeries Text Report (TXT)</option>
|
||||
</select>
|
||||
<input disabled="{!selectedSiteId}" type="submit" value="Upload"/>
|
||||
<input type="button" value="?" on:click={clickOpenExportHelpDialog}/>
|
||||
</form>
|
||||
<GridTable bind:rows={students} columns="{studentColumns}" actions="{studentsActions}" rowKey="{(v) => {return v._id}}" bind:edited="{editedStudent}" on:selection={onStudentSelection}>
|
||||
{#if dirtyStudent}
|
||||
<div class="editorContainer">
|
||||
<div style="grid-column: 1/span 1">
|
||||
<TextField type="text" style="width: 100%" bind:value={dirtyStudent.email} label="Email">
|
||||
</TextField>
|
||||
</div>
|
||||
<div style="grid-column: 1/span 1">
|
||||
<TextField type="text" style="width: 100%" bind:value={dirtyStudent.firstName} label="First Name">
|
||||
</TextField>
|
||||
</div>
|
||||
<div style="grid-column: 1/span 1">
|
||||
<TextField type="text" style="width: 100%" bind:value={dirtyStudent.lastName} label="Last Name">
|
||||
</TextField>
|
||||
</div>
|
||||
<div style="grid-column: 1/span 1">
|
||||
<TextField type="text" style="width: 100%" bind:value={dirtyStudent.grade} label="Grade">
|
||||
</TextField>
|
||||
</div>
|
||||
|
||||
<button type="button" style="grid-column: 2/span 1;" class="button accept-button material-icons material-symbols-outlined" on:click={applyStudentChanges}>
|
||||
check
|
||||
</button>
|
||||
<button type="button" style="grid-column: 3/span 1;" class="button reject-button material-icons material-symbols-outlined" on:click={rejectStudentChanges}>
|
||||
close
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</GridTable>
|
||||
|
||||
<Dialog bind:open={openExportHelpDialog} aria-labelledby="exportHelpTitle" aria-describedby="exportHelpContent" surface$style="width: 800px; max-width: calc(100vw - 32px);">
|
||||
<Title id="exportHelpTitle">Exporting Student Data</Title>
|
||||
<Content id="exportHelpContent">
|
||||
<h3>Aeries</h3>
|
||||
<p>For the Aeries system, log into your Aeries web interface and navigate to the query page. Enter the following query:</p>
|
||||
<pre style="font-size: 0.7rem"><code>LIST STU STU.ID STU.SEM STU.FN STU.LN STU.NG BY STU.ID STU.NG STU.SEM IF STU.NG >= 7 AND NG <= 12 AND STU.NS = 5</code></pre>
|
||||
<p>Run the query and validate that all students have an email address and a student ID. You likely also want to check that the student `next grade (NG)` field is set correctly for the students.</p>
|
||||
<p>You have two options for export. You can:</p>
|
||||
<ol class="help">
|
||||
<li class="help">Click the `Report` button to generate a TXT formatted report. Use Single Spacing, Automatic Orientation and no page breaks. The generated text is CSV but with a repeating collection of headers for each page. The headers will be ignored.</li>
|
||||
<li class="help">Click the `Excel` button to generate an excel spreadsheet of the results. Open this with any spreadsheet software (Excel, LibreOffice Calc, or Google Sheets) and save as CSV. The first line in the CSV file is assumed to be a header and will be ignored.</li>
|
||||
</ol>
|
||||
<p>Now upload the generated CSV file (or text file).</p>
|
||||
</Content>
|
||||
<Actions>
|
||||
<Button action="accept">
|
||||
<Label>Done</Label>
|
||||
</Button>
|
||||
</Actions>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
ol.help {
|
||||
list-style-type: decimal;
|
||||
margin-top: 0.2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
li.help {
|
||||
list-style: inherit;
|
||||
padding-top: 0.2rem;
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
.editorContainer {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(10px, 1fr) minmax(3rem, 3rem) minmax(3rem, 3rem);
|
||||
}
|
||||
.accept-button, .reject-button {
|
||||
font-size: .8rem;
|
||||
padding: .6rem;
|
||||
margin: auto;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
border: 0;
|
||||
font-weight: 800;
|
||||
alignment: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.accept-button {
|
||||
background-color: rgba(61, 148, 61, 0.91);
|
||||
}
|
||||
.reject-button {
|
||||
background-color: rgba(176, 64, 64, 0.61);
|
||||
}
|
||||
.accept-button:hover {
|
||||
background-color: rgb(61, 148, 61);
|
||||
}
|
||||
.reject-button:hover {
|
||||
background-color: rgb(176, 64, 64);
|
||||
}
|
||||
</style>
|
||||
@@ -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) + "®ex=true");
|
||||
}
|
||||
function assetIdSearch() {
|
||||
router.goto("/chromebooks?assetId=" + encodeURIComponent(assetIdInput) + "®ex=true");
|
||||
}
|
||||
function emailSearch() {
|
||||
router.goto("/chromebooks?email=" + encodeURIComponent(emailInput) + "®ex=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>
|
||||
|
||||
@@ -130,21 +130,23 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each $rows as row (rowKey(row))}
|
||||
<tr data-key="{rowKey(row)}" class:hidden={row === $edited} on:mousedown={(e) => selectRow(e, row)} on:dblclick={(e) => {$edited = row}}>
|
||||
{#each columns as column}
|
||||
{#if column.isActions}
|
||||
<td>
|
||||
{#each column.rowWidgets as widget}
|
||||
<span class="material-icons material-symbols-outlined" on:click={widget.action(row)}>{widget.icon}</span>
|
||||
{/each}
|
||||
</td>
|
||||
{:else}
|
||||
<td>{column.value(row)}</td>
|
||||
{/if}
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
{#if rows}
|
||||
{#each $rows as row (rowKey(row))}
|
||||
<tr data-key="{rowKey(row)}" class:hidden={row === $edited} on:mousedown={(e) => selectRow(e, row)} on:dblclick={(e) => {$edited = row}}>
|
||||
{#each columns as column}
|
||||
{#if column.isActions}
|
||||
<td>
|
||||
{#each column.rowWidgets as widget}
|
||||
<span class="material-icons material-symbols-outlined" on:click={widget.action(row)}>{widget.icon}</span>
|
||||
{/each}
|
||||
</td>
|
||||
{:else}
|
||||
<td>{column.value(row)}</td>
|
||||
{/if}
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
{/if}
|
||||
</tbody>
|
||||
</table>
|
||||
<!--<button on:click={() => {$edited = null}} type="button">Stop Editing</button>-->
|
||||
|
||||
Reference in New Issue
Block a user