Commit 91af797c authored by Curtis Adam's avatar Curtis Adam

Refactor the bonus form

parent 502efee2
......@@ -20,7 +20,7 @@
@import '../imports/ui/card/sidebar/item/aspectRatio.scss';
@import '../imports/ui/markdeep/editor/content/content.scss';
@import '../imports/ui/markdeep/editor/navigation/navigation.scss';
@import '../imports/ui/forms/bonusForm.scss';
@import '../imports/ui/cardset/navigation/modal/bonus/bonusForm.scss';
@import '../imports/ui/forms/cardsetForm.scss';
@import '../imports/ui/profile/profile.scss';
@import '../imports/ui/learn/learn.scss';
......
......@@ -40,7 +40,11 @@ export let BonusForm = class BonusForm {
daysBeforeReset = Session.get('activeCardset').daysBeforeReset;
intervals = Session.get('activeCardset').learningInterval;
dateBonusStart.attr("min", start);
errorCount = Session.get('activeCardset').workload.simulator.errorCount[0];
if (Session.get('activeCardset').workload !== undefined && Session.get('activeCardset').workload.simulator !== undefined) {
errorCount = Session.get('activeCardset').workload.simulator.errorCount[0];
} else {
errorCount = config.defaultErrorCount;
}
}
$('#maxWorkload').val(maxWorkload);
$('#bonusFormModal #daysBeforeReset').val(daysBeforeReset);
......@@ -293,7 +297,9 @@ export let BonusForm = class BonusForm {
static calculateWorkload (maxWorkload, interval = 0, isReverse = false, finetuning = false) {
if (maxWorkload > 100) {
this.setMaxWorkload(100);
Bert.defaults.hideDelay = 7000;
BertAlertVisuals.displayBertAlert(TAPi18n.__('bonus.form.simulator.notification.adjustmentsNeeded'), "danger", 'growl-top-left');
Bert.defaults.hideDelay = 3500;
return;
}
let result = this.runSimulation(maxWorkload);
......
......@@ -11,7 +11,7 @@ import {Bonus} from "../../api/bonus";
import "../card/card.js";
import "../learn/learn.js";
import "../presentation/presentation.js";
import "../forms/bonusForm.js";
import "./navigation/modal/bonus/bonusForm.js";
import "../forms/cardsetForm.js";
import "./index/cards/cards.js";
import "./index/editors/editors.js";
......
......@@ -8,7 +8,7 @@ import {Cardsets} from "../../../../api/cardsets";
import {BertAlertVisuals} from "../../../../api/bertAlertVisuals";
import "../modal/leaveBonus.js";
import "../modal/endBonus.js";
import "../modal/leitnerSimulator.js";
import "../modal/bonus/simulator/leitnerSimulator.js";
import "./bonus.html";
/*
......
<template name="bonusForm">
<div class="modal fade" id="bonusFormModal" tabindex="-1" role="dialog"
aria-labelledby="bonusFormModalTitle">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<span class="modal-icon">
<i class="fas fa-graduation-cap"></i>
</span>
{{> mainModalItemCloseIcon}}
<h4 id="bonusFormModalTitle" class="modal-title">{{#if isNewBonus}}{{_
"bonus.form.new.title"}}{{else}}{{_ "bonus.form.edit.title"}}{{/if}}
</h4>
</div>
<div class="modal-body">
<div class="form">
{{> bonusFormDaysBeforeReset}}
{{> bonusFormStartDate}}
{{> bonusFormEndDate}}
{{> bonusFormRegistrationPeriod}}
{{> bonusFormMaxPoints}}
{{> bonusFormOpenSimulator}}
{{> pomodoroTimerModalContent}}
</div>
</div>
<div class="modal-footer">
<button id="cancelBonus" class="btn btn-default btn-raised pull-left"
data-dismiss="modal">{{_ "bonus.form.button.cancel"}}</button>
<button id="resetBonus" class="btn btn-danger btn-raised pull-left">{{_
"bonus.form.button.reset"}}</button>
<button id="startBonus"
class="btn btn-success btn-raised pull-right">{{#if isNewBonus}}{{_
"bonus.form.button.start"}}{{else}}{{_
"bonus.form.button.update"}}{{/if}}</button>
</div>
</div>
</div>
</div><!-- /form group -->
</template>
import {Session} from "meteor/session";
import {BonusForm} from "../../../../../api/bonusForm";
import "./bonusForm.html";
import "./item/daysBeforeReset.js";
import "./item/endDate.js";
import "./item/maxBonusPoints.js";
import "./item/openSimulator.js";
import "./item/registrationPeriod.js";
import "./item/startDate.js";
import "./completeProfile/completeProfile.js";
import "./join/join.js";
import "./leave/leave.js";
import {PomodoroTimer} from "../../../../../api/pomodoroTimer";
/*
* ############################################################################
* bonusForm
* ############################################################################
*/
Template.bonusForm.onRendered(function () {
BonusForm.cleanModal();
$('#bonusFormModal').on('show.bs.modal', function () {
BonusForm.cleanModal();
PomodoroTimer.initializeVariables();
PomodoroTimer.initializeModalContent();
});
$('#bonusFormModal').on('hidden.bs.modal', function () {
BonusForm.cleanModal();
PomodoroTimer.initializeVariables();
PomodoroTimer.initializeModalContent();
});
});
Template.bonusForm.helpers({
isNewBonus: function () {
return Session.get('isNewBonus');
}
});
Template.bonusForm.events({
"click #startBonus": function () {
if (Session.get('isNewBonus')) {
BonusForm.startBonus();
} else {
BonusForm.updateBonus();
}
$('#bonusFormModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
},
"click #resetBonus": function () {
BonusForm.cleanModal();
PomodoroTimer.initializeVariables();
PomodoroTimer.initializeModalContent();
}
});
<template name="profileIncompleteModal">
<div class="modal fade" id="profileIncompleteModal" tabindex="-1" role="dialog" aria-labelledby="joinBonusTitle">
<div class="modal-dialog">
<div class="modal-content modal-content-for-buttons xs-12">
<div class="modal-header">
{{> mainModalItemCloseIcon}}
<h4 id="completeProfileTitle" class="modal-title">{{_ "sweetAlert.completeProfile.title"}}
</h4>
</div>
<div class="modal-body">
<p>{{_ "sweetAlert.completeProfile.text"}}</p>
<br>
<hr>
<button id="completeProfileGoToProfile" class="btn btn-block btn-raised btn-default btn-success">{{_
"sweetAlert.completeProfile.button.confirm"}}</button>
<button id="completeProfileCancel" class="btn btn-default btn-block btn-raised"
data-dismiss="modal">{{_ "sweetAlert.completeProfile.button.cancel"}}</button>
</div>
</div>
</div>
</div>
</template>
import "./completeProfile.html";
import {Meteor} from "meteor/meteor";
/*
* ############################################################################
* profileIncompleteModal
* ############################################################################
*/
Template.profileIncompleteModal.events({
'click #completeProfileGoToProfile': function () {
$('#profileIncompleteModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
Router.go('profileSettings', {
_id: Meteor.userId()
});
},
'click #completeProfileCancel': function () {
$('#profileIncompleteModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
}
});
<template name="bonusFormDaysBeforeReset">
<div class="form-group row">
<label class="col-md-3 control-label">{{_ "bonus.form.daysBeforeReset.label"}}</label>
<div class="col-md-9">
<input type="number" min="1" max="100" data-bind="value:replyNumber"
onkeypress="return (event.charCode === 8 || event.charCode === 0) ? null : event.charCode >= 48 && event.charCode <= 57"
class="form-control" id="daysBeforeReset"
placeholder="{{_ "bonus.form.daysBeforeReset.placeholder"}}" value="">
<span id="errorDaysBeforeReset" class="help-block name"></span>
</div>
</div>
</template>
import "./daysBeforeReset.html";
import {BonusForm} from "../../../../../../api/bonusForm";
/*
* ############################################################################
* bonusFormDaysBeforeReset
* ############################################################################
*/
Template.bonusFormDaysBeforeReset.events({
"input #daysBeforeReset": function () {
BonusForm.adjustDaysBeforeReset();
}
});
<template name="bonusFormEndDate">
<div class="form-group row">
<label class="col-md-3 control-label">{{_ "bonus.form.endDate.label"}}</label>
<div class="col-md-9">
<input type="date" class="form-control" id="dateBonusEnd"
placeholder="{{_ "bonus.form.endDate.placeholder"}}" value="">
</div>
</div>
</template>
import "./endDate.html";
import {BonusForm} from "../../../../../../api/bonusForm";
/*
* ############################################################################
* bonusFormEndDate
* ############################################################################
*/
Template.bonusFormEndDate.events({
"input #dateBonusEnd": function () {
BonusForm.adjustRegistrationPeriod();
}
});
<template name="bonusFormMaxPoints">
<div class="form-group row">
<label class="col-md-3 control-label">{{_ "bonus.form.maxPoints.label"}}</label>
<div class="col-md-9 form-inline">
<input type="number" min="{{getDefaultMinBonusPoints}}" max="{{getDefaultMaxBonusPoints}}"
data-bind="value:replyNumber"
onkeypress="return (event.charCode === 8 || event.charCode === 0) ? null : event.charCode >= 48 && event.charCode <= 57"
class="form-control interval" id="maxBonusPoints"
placeholder="{{getDefaultMaxBonusPoints}}" value="{{getCurrentMaxBonusPoints this}}">
</div>
</div>
</template>
import "./maxBonusPoints.html";
import {BonusForm} from "../../../../../../api/bonusForm";
/*
* ############################################################################
* bonusFormMaxPoints
* ############################################################################
*/
Template.bonusFormMaxPoints.events({
"input #maxBonusPoints": function () {
BonusForm.adjustMaxBonusPoints();
}
});
<template name="bonusFormOpenSimulator">
<div class="form-group row">
<div class="col-md-12">
<div class="btn btn-success btn-raised" data-toggle="modal" data-target="#cardsetLeitnerSimulatorModal">
<span class="flex-content"><i class="fas fa-calculator"></i>&nbsp;{{_ "bonus.form.simulator.buttonModal"}}</span>
</div>
</div>
</div>
</template>
<template name="bonusFormRegistrationPeriod">
<div class="form-group row">
<label class="col-md-3 control-label">{{_ "bonus.form.registrationPeriod.label"}}</label>
<div class="col-md-9 form-inline">
<input type="date" class="form-control" id="dateRegistrationPeriod"
placeholder="{{_ "bonus.form.registrationPeriod.placeholder"}}" value="">
</div>
</div>
</template>
<template name="bonusFormStartDate">
<div class="form-group row">
<label class="col-md-3 control-label">{{_ "bonus.form.startDate.label"}}</label>
<div class="col-md-9">
<input type="date" class="form-control" id="dateBonusStart"
placeholder="{{_ "bonus.form.startDate.placeholder"}}" value="">
</div>
</div>
</template>
import "./startDate.html";
import {BonusForm} from "../../../../../../api/bonusForm";
/*
* ############################################################################
* bonusFormStartDate
* ############################################################################
*/
Template.bonusFormStartDate.events({
"input #dateBonusStart": function () {
BonusForm.adjustRegistrationPeriod();
}
});
<template name="joinBonusForm">
<div class="modal fade" id="joinBonusModal" tabindex="-1" role="dialog" aria-labelledby="joinBonusTitle">
<div class="modal-dialog">
<div class="modal-content modal-content-for-buttons xs-12">
<div class="modal-header">
<span class="modal-icon">
<i class="fas fa-sign-in-alt"></i>
</span>
{{> mainModalItemCloseIcon}}
<h4 id="joinBonusTitle" class="modal-title">{{_ "bonus.form-join.title"}}
</h4>
</div>
<div class="modal-body">
<p>{{_ "bonus.form-join.message"}}</p>
<hr>
</div>
<div class="modal-footer">
<button id="joinBonusConfirm" class="btn btn-raised btn-success pull-right">{{_
"bonus.form-join.button.confirm"}}</button>
<button id="joinBonusCancel" class="btn btn-default btn-raised pull-left"
data-dismiss="modal">{{_ "bonus.form-join.button.cancel"}}</button>
</div>
</div>
</div>
</div>
</template>
import "./join.html";
import {Meteor} from "meteor/meteor";
import {Session} from "meteor/session";
/*
* ############################################################################
* joinBonusForm
* ############################################################################
*/
Template.joinBonusForm.events({
"click #joinBonusConfirm": function () {
Meteor.call("joinBonus", Session.get('activeCardset')._id);
$('#joinBonusModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
}
});
<template name="leaveBonusForm">
<div class="modal fade" id="leaveBonusModal" tabindex="-1" role="dialog" aria-labelledby="leaveBonusTitle">
<div class="modal-dialog">
<div class="modal-content modal-content-for-buttons xs-12">
<div class="modal-header">
<span class="modal-icon">
<i class="fas fa-sign-out-alt"></i>
</span>
{{> mainModalItemCloseIcon}}
<h4 id="leaveBonusTitle" class="modal-title">{{_ "bonus.form-leave.title"}}
</h4>
</div>
<div class="modal-body">
<p>{{_ "bonus.form-leave.message"}}</p>
<hr>
</div>
<div class="modal-footer">
<button id="leaveBonusConfirm" class="btn btn-raised btn-danger pull-right">{{_
"bonus.form-leave.button.confirm"}}</button>
<button id="leaveBonusCancel" class="btn btn-default btn-raised pull-left"
data-dismiss="modal">{{_ "bonus.form-leave.button.cancel"}}</button>
</div>
</div>
</div>
</div>
</template>
import "./leave.html";
import {Meteor} from "meteor/meteor";
import {Session} from "meteor/session";
/*
* ############################################################################
* leaveBonusForm
* ############################################################################
*/
Template.leaveBonusForm.events({
"click #leaveBonusConfirm": function () {
Meteor.call("leaveBonus", Session.get('activeCardset')._id);
$('#leaveBonusModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
}
});
<template name="bonusFormSimulatorCalculate">
<div class="form-group row">
<div class="col-md-12">
<div class="btn btn-success btn-raised calculateWorkload">
<span class="flex-content"><i class="fas fa-calculator"></i>&nbsp;{{_ "bonus.form.simulator.buttonSimulate"}}</span>
</div>
</div>
</div>
</template>
import "./calculate.html";
import {BonusForm} from "../../../../../../../api/bonusForm";
import {LeitnerProgress} from "../../../../../../../api/leitnerProgress";
/*
* ############################################################################
* bonusFormSimulatorCalculate
* ############################################################################
*/
Template.bonusFormSimulatorCalculate.events({
'click .calculateWorkload': function () {
BonusForm.adjustErrorCount();
BonusForm.calculateWorkload(BonusForm.getMaxWorkload());
LeitnerProgress.updateGraph();
}
});
<template name="bonusFormSimulatorErrorRate">
<div class="form-group row">
<br>
<hr>
<div class="col-xs-12">{{_ "bonus.form.simulator.errorRate.description" count=getCardCount}}</div>
<label class="col-md-3 control-label">{{_ "bonus.form.simulator.errorRate.label"}}</label>
<div class="col-md-9 form-inline">
<input type="number" step="5" min="0" max="100" class="form-control errorRate" id="errorRate1"
placeholder="0">
<input type="number" step="5" min="0" max="100" class="form-control errorRate" id="errorRate2"
placeholder="0">
<input type="number" step="5" min="0" max="100" class="form-control errorRate" id="errorRate3"
placeholder="0">
<input type="number" step="5" min="0" max="100" class="form-control errorRate" id="errorRate4"
placeholder="0">
<input type="number" step="5" min="0" max="100" class="form-control errorRate" id="errorRate5"
placeholder="0">
</div>
<div class="col-xs-12">
<button id="resetErrorRate" class="btn btn-raised btn-danger">{{_ "bonus.form.simulator.errorRate.button.reset"}}</button>
<hr>
</div>
</div>
</template>
import "./errorRate.html";
import {BonusForm} from "../../../../../../../api/bonusForm";
import {LeitnerProgress} from "../../../../../../../api/leitnerProgress";
/*
* ############################################################################
* bonusFormSimulatorErrorRate
* ############################################################################
*/
Template.bonusFormSimulatorErrorRate.helpers({
getCardCount: function () {
return BonusForm.getCardCount();
}
});
Template.bonusFormSimulatorErrorRate.events({
'change input': function () {
BonusForm.adjustErrorCount();
BonusForm.initializeSimulatorData();
LeitnerProgress.updateGraph();
},
'click #resetErrorRate': function () {
BonusForm.resetErrorCount();
}
});
<template name="bonusFormIntervals">
<div class="form-group row">
<label class="col-md-3 control-label">{{_ "bonus.form.intervals.label"}}</label>
<div class="col-md-9 form-inline">
<input type="number" min="1" max="999" data-bind="value:replyNumber"
onkeypress="return (event.charCode === 8 || event.charCode === 0) ? null : event.charCode >= 48 && event.charCode <= 57"
class="form-control interval" id="bonusFormInterval1"
placeholder="1" value="1">
<input type="number" min="1" max="999" data-bind="value:replyNumber"
onkeypress="return (event.charCode === 8 || event.charCode === 0) ? null : event.charCode >= 48 && event.charCode <= 57"
class="form-control interval" id="bonusFormInterval2"
placeholder="3" value="3">
<input type="number" min="1" max="999" data-bind="value:replyNumber"
onkeypress="return (event.charCode === 8 || event.charCode === 0) ? null : event.charCode >= 48 && event.charCode <= 57"
class="form-control interval" id="bonusFormInterval3"
placeholder="7" value="7">
<input type="number" min="1" max="999" data-bind="value:replyNumber"
onkeypress="return (event.charCode === 8 || event.charCode === 0) ? null : event.charCode >= 48 && event.charCode <= 57"
class="form-control interval" id="bonusFormInterval4"
placeholder="28" value="28">
<input type="number" min="1" max="999" data-bind="value:replyNumber"
onkeypress="return (event.charCode === 8 || event.charCode === 0) ? null : event.charCode >= 48 && event.charCode <= 57"
class="form-control interval" id="bonusFormInterval5"
placeholder="84" value="84">
</div>
</div>
</template>
import "./intervals.html";
import {BonusForm} from "../../../../../../../api/bonusForm";
import {LeitnerProgress} from "../../../../../../../api/leitnerProgress";
/*
* ############################################################################
* bonusFormIntervals
* ############################################################################
*/
Template.bonusFormIntervals.events({
"input #bonusFormInterval1, input #bonusFormInterval2, input #bonusFormInterval3, input #bonusFormInterval4, input #bonusFormInterval5": function () {
BonusForm.adjustInterval();
},
"change input": function () {
BonusForm.initializeSimulatorData();
LeitnerProgress.updateGraph();
}
});
<template name="bonusFormMaxWorkload">
<div class="form-group row">
<label class="col-md-3 control-label">{{_ "bonus.form.maxWorkload.label"}}</label>
<div class="col-md-9">
<input type="number" min="1" max="100" data-bind="value:replyNumber"
onkeypress="return (event.charCode === 8 || event.charCode === 0) ? null : event.charCode >= 48 && event.charCode <= 57"
class="form-control" id="maxWorkload"
placeholder="{{_ "bonus.form.maxWorkload.placeholder"}}" value="">
<span id="errorMaxCards" class="help-block name"></span>
</div>
</div>
</template>
import "./maxWorkload.html";
import {BonusForm} from "../../../../../../../api/bonusForm";
import {LeitnerProgress} from "../../../../../../../api/leitnerProgress";
/*
* ############################################################################
* bonusFormMaxWorkload
* ############################################################################
*/
Template.bonusFormMaxWorkload.events({
"change input": function () {
BonusForm.adjustMaxWorkload();
BonusForm.initializeSimulatorData();
LeitnerProgress.updateGraph();
}
});
<template name="bonusFormSimulatorSnapshots">
<div class="form-group row">
{{_ "bonus.form.simulator.snapshots"}}<br>
{{#each getSnapshots}}
<div class="btn {{#if isActive @index}}btn-primary{{else}}btn-default{{/if}} btn-raised col-xs-2 snapshot-date" data-id="{{@index}}">
<span class="flex-content" data-id="{{@index}}">
{{this}}
</span>
</div>
{{/each}}
</div>
</template>
import "./snapshots.html";
import {Session} from "meteor/session";
import {BonusForm} from "../../../../../../../api/bonusForm";
import {LeitnerProgress} from "../../../../../../../api/leitnerProgress";
/*
* ############################################################################
* bonusFormSimulatorSnapshots
* ############################################################################
*/
Session.setDefault('activeSimulatorSnapshotDate', 0);
Template.bonusFormSimulatorSnapshots.helpers({
getSnapshots: function () {
return BonusForm.getSnapshotDates();
},
isActive: function (index) {
if (Session.get('activeSimulatorSnapshotDate') === index) {
return true;
}
}
});
Template.bonusFormSimulatorSnapshots.events({
'click .snapshot-date': function (event) {
Session.set('activeSimulatorSnapshotDate', $(event.target).data('id'));
BonusForm.initializeSimulatorData();
LeitnerProgress.updateGraph();
}
});
//------------------------ IMPORTS
import "./item/calculate.js";
import "./item/errorRate.js";
import "./item/maxWorkload.js";
import "./item/snapshots.js";
import "./item/intervals.js";
import {Template} from "meteor/templating";
import "./leitnerSimulator.html";
import {BonusForm} from "../../../../api/bonusForm";
import {BonusForm} from "../../../../../../api/bonusForm";
import {Session} from "meteor/session";
import {LeitnerProgress} from "../../../../api/leitnerProgress";
import {LeitnerProgress} from "../../../../../../api/leitnerProgress";
/*
* ############################################################################
......
This diff is collapsed.
import {Session} from "meteor/session";
import {BonusForm} from "../../api/bonusForm";
import "./bonusForm.html";
import {Meteor} from "meteor/meteor";
import {PomodoroTimer} from "../../api/pomodoroTimer";
import {LeitnerProgress} from "../../api/leitnerProgress";
/*
* ############################################################################
* bonusForm
* ############################################################################
*/
Template.bonusForm.onRendered(function () {
BonusForm.cleanModal();
$('#bonusFormModal').on('show.bs.modal', function () {
BonusForm.cleanModal();
PomodoroTimer.initializeVariables();
PomodoroTimer.initializeModalContent();
});