Я работаю над проектом по управлению посещаемостью учащихся в школе.
Фронтенд работает с метеором. Он отображает присутствие всех учащихся из одного класса на текущий день. Пользователь (учитель) может переключать дни назад и вперед, чтобы внести некоторые изменения.
Теперь мне интересно, как перезапустить функцию помощников для presentStudents при изменении selectedDate.
HTML-код:
<head>
<meta charset='utf—8' name='theme—color' content='#282A36'>
<title>Anwesenheit</title>
<!-- This website includes -->
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<!-- Currently not in use but later needed to get nice icons for the buttons to switch between the dates. -->
<script defer src='https://use.fontawesome.com/releases/v5.0.2/js/all.js'></script>
</head>
<body>
<header class=''>
<div class='heading'>Anwesenheitliste</div>
</header>
<div class='backboard'>
<header class=''>
<div id='search_space'>
<form class='insertStudent'>
<input id='beacon_input' type='text' name='beacon' placeholder='Input beacon ID' autocomplete='off'>
<input type='submit' style='display: none'>
</form>
</div>
<div id='date_space'>
<i id='previous_date' class='fas fa-angle-left date_space_content previousDateClick'></i>
<div id='current_date' class='date_space_content'></div>
<i id='next_date' class='fas fa-angle-right date_space_content nextDateClick'></i>
</div>
</header>
</div>
<content>
<div class='backboard'>
<div class='pagecontent'>
<div id='cat_list' class=''>
<table id='list' class='list_students'>
<tr>
<!--
<th class='cnt'>Nr.</th>
-->
<th>Vorname</th>
<th>Nachname</th>
<th>Beacon ID</th>
<th>1. Block</th>
<th>2. Block</th>
<th>3. Block</th>
<th>4. Block</th>
</tr>
{{#each presentStudents}}
{{> listingPresence}}
{{/each}}
</table>
</div>
</div>
</div>
</content>
</body>
<template name='listingPresence'>
<tr>
<td>{{firstName}}</td>
<td>{{lastName}}</td>
<td>{{beaconID}}</td>
<td class='{{#if checked}}checked{{/if}}'>
<input type='checkbox' id='{{checkbox1}}' checked='{{block1}}' class='toggled1'>
<label for='{{checkbox1}}'>1. Block</label>
</td>
<td class='{{#if checked}}checked{{/if}}'>
<input type='checkbox' id='{{checkbox2}}' checked='{{block2}}' class='toggled2'>
<label for='{{checkbox2}}'>2. Block</label>
</td>
<td class='{{#if checked}}checked{{/if}}'>
<input type='checkbox' id='{{checkbox3}}' checked='{{block3}}' class='toggled3'>
<label for='{{checkbox3}}'>3. Block</label>
</td>
<td id='myCheckBox' class='{{#if checked}}checked{{/if}}'>
<input type='checkbox' id='{{checkbox4}}' checked='{{block4}}' class='toggled4'>
<label for='{{checkbox4}}'>4. Block</label>
</td>
</tr>
</template>
Код с сервера / main.js:
import { Meteor } from 'meteor/meteor';
const PresenceDB = new Mongo.Collection('studentsPresence');
const ListDB = new Mongo.Collection('studentsList');
function getDate(){
let d = new Date();
return d.getFullYear() + ('0' + (d.getMonth() + 1)).slice(-2).toString() + d.getDate().toString().slice(-2);
}
export function init(){
const date = getDate();
const match = PresenceDB.find({date: date}).fetch();
if(match[0] == null) {
const allStudents = ListDB.find().fetch();
for (const student of allStudents){
PresenceDB.insert({
_id: newObjectID = new Mongo.ObjectID(),
beaconID: student.beaconID,
firstName: student.firstName,
lastName: student.lastName,
block1: false,
block2: false,
block3: false,
block4: false,
checkbox1: newObjectID1 = new Mongo.ObjectID(),
checkbox2: newObjectID2 = new Mongo.ObjectID(),
checkbox3: newObjectID3 = new Mongo.ObjectID(),
checkbox4: newObjectID4 = new Mongo.ObjectID(),
date: date
});
}
}
}
Meteor.startup(() => {
// code to run on server at startup
init();
});
Код от клиента / main.js:
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
// When this is imported the website doesn't load anymore!
//import { Session } from 'meteor/session';
import './main.html';
// Declare used collections
const PresenceDB = new Mongo.Collection('studentsPresence');
const ListDB = new Mongo.Collection('studentsList');
let selectedDate = getDate(0);
window.onload = function () {
document.getElementById('current_date').textContent = getDate(1);
};
Date.prototype.addDays = function (n) {
alert('Function got called!');
let year = Number(selectedDate.slice(0, 4));
let month = Number(selectedDate.slice(4, 6));
let day = Number(selectedDate.slice(6, 8));
if((day + n) > daysInMonth(month, year)) {
month++;
if(month < 1) {
month = 12;
year--;
} if(month > 12) {
month = 1;
year++;
}
day = 0;
}
if((day + n) < 1) {
month--;
if(month < 1) {
month = 12;
year--;
} if(month > 12) {
month = 1;
year++;
}
day = daysInMonth(month, year);
} else {
day = day + n;
}
document.getElementById('current_date').textContent = ('0' + day).slice(-2) + '.' + ('0' + month).slice(-2) + '.' + year;
return '' + year + ('0' + month).slice(-2) + ('0' + day).slice(-2);
};
// Function for getting the number of days for a month depending on the month and year
function daysInMonth(month, year) {
return new Date(year, month, 0).getDate();
}
// Function for getting today's date in the right format
function getDate(n){
let d = new Date();
if(n === 0) {
// Return the date in the format: YYYYMMDD
return d.getFullYear() + ('0' + (d.getMonth() + 1)).slice(-2).toString() + d.getDate().toString().slice(-2);
} else {
// Return the date in the format: DD.MM.YYYY
return d.getDate().toString().slice(-2) + '.' + ('0' + (d.getMonth() + 1)).slice(-2).toString() + '.' + d.getFullYear();
}
}
// Function for getting right time in the right format
function getTime(){
let t = new Date();
const time = t.getHours().toString() + t.getMinutes().toString();
return parseInt(time, 10);
}
// Function to determine the current block lesson
function getBlock(time){
let block = 0;
if (745 < time && time < 915){
block = 1;
} else if (915 < time && time < 1100){
block = 2;
} else if (1100 < time && time < 1245){
block = 3;
} else if (1245 < time && time < 1800){
block = 4;
}
return block;
}
// List students that are present today
Template.body.helpers({
presentStudents: function() {
//return PresenceDB.find({date: reactiveDate});
return PresenceDB.find({date: selectedDate});
//return PresenceDB.find({date: Session.get('sessionDate')});
}
});
Template.body.events({
// Update the presence for a scanned student for a specific lesson or create the document if necessary
'submit .insertStudent': function(event) {
const time = getTime();
const currentBlock = getBlock(time);
const userInput = event.target.beacon.value;
const scannedStudent = ListDB.find(
{beaconID: userInput},
{firstName: 1, lastName: 1}
).fetch();
const inPresenceList = PresenceDB.find(
{beaconID: userInput, date: selectedDate},
{_id: 1}
).fetch();
let isExisting = (inPresenceList[0] != null);
if (currentBlock !== 0){
if (!isExisting){
PresenceDB.insert(
{
_id: newObjectID = new Mongo.ObjectID(),
beaconID: userInput,
firstName: scannedStudent[0].firstName,
lastName: scannedStudent[0].lastName,
block1: false,
block2: false,
block3: false,
block4: false,
checkbox1: newObjectID1 = new Mongo.ObjectID(),
checkbox2: newObjectID2 = new Mongo.ObjectID(),
checkbox3: newObjectID3 = new Mongo.ObjectID(),
checkbox4: newObjectID4 = new Mongo.ObjectID(),
date: selectedDate
});
const currentBlockString = 'block' + currentBlock;
let obj = {};
obj[currentBlockString] = true;
PresenceDB.update(
{_id: newObjectID},
{$set: obj}
);
} else {
const currentBlockString = 'block' + currentBlock;
let obj = {};
obj[currentBlockString] = true;
PresenceDB.update(
{_id: inPresenceList[0]._id},
{$set: obj}
);
}
} else {
alert('Außerhalb der Schulzeiten!');
}
event.target.beacon.value = '';
return false;
},
'click .previousDateClick': function(event) {
//changeDate(0);
let d = new Date();
//selectedDate = d.addDays(0);
Session.set('sessionDate', d.addDays(0));
Session.set('sessionDate', 'TestSenf');
alert(Session.get('sessionDate'));
},
'submit .nextDateClick': function(event) {
//changeDate(1);
let d = new Date();
selectedDate = d.addDays(1);
Session.set('sessionDate', selectedDate);
}
});
Template.listingPresence.helpers({
/*presentStudents: function() {
// Here we get our template instance from Template.instance() and
// can access showExtraFields from it.
return Template.instance().reactiveDate.get();
}*/
});
Template.listingPresence.onCreated(function(){
// Here, this equals the current template instance. We can assign
// our ReactiveVar to it, making it accessible throughout the
// current template instance.
this.reactiveDate = new ReactiveVar( selectedDate );
});
Template.listingPresence.events({
'click .toggled1': function() {
PresenceDB.update(this._id, { $set: {block1: !this.block1}})
},
'click .toggled2': function() {
PresenceDB.update(this._id, { $set: {block2: !this.block2}})
},
'click .toggled3': function() {
PresenceDB.update(this._id, { $set: {block3: !this.block3}})
},
'click .toggled4': function() {
PresenceDB.update(this._id, { $set: {block4: !this.block4}})
}
});