130 lines
3.5 KiB
Svelte
130 lines
3.5 KiB
Svelte
<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');
|
|
});
|
|
|
|
const fixRecords = () => {Meteor.call("admin.fixRecords");}
|
|
|
|
const submitForm = () => {
|
|
Meteor.call('students.loadCsv');
|
|
}
|
|
let files;
|
|
|
|
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 actions = {
|
|
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 = null;
|
|
// 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);
|
|
}
|
|
const rejectSiteChanges = () => {
|
|
editedSite.set(null);
|
|
}
|
|
</script>
|
|
|
|
<div class="container">
|
|
<GridTable bind:rows={sites} columns="{siteColumns}" actions="{actions}" rowKey="{(user) => {return user._id}}" bind:edited="{editedSite}">
|
|
{#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>
|
|
|
|
<!--{#each sites as site}-->
|
|
<!-- <div>{site.name}</div>-->
|
|
<!--{/each}-->
|
|
<!-- <button type="button" on:click={fixRecords}>Fix Records</button>-->
|
|
<form on:submit={submitForm}>
|
|
<input type="file" bind:files={files}/>
|
|
<input type="submit"/>
|
|
</form>
|
|
</div>
|
|
|
|
<style>
|
|
.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>
|