Commit 8d112dbe authored by Curtis Adam's avatar Curtis Adam

Move each profile view into its own file

parent 7b32be41
......@@ -15,7 +15,7 @@
@import '../imports/ui/filter/navigation/navigation.scss';
@import '../imports/ui/forms/bonusForm.scss';
@import '../imports/ui/forms/cardsetForm.scss';
@import '../imports/ui/profile/profile.scss';
@import '../imports/ui/profile/profile';
@import '../imports/ui/learn/learn.scss';
@import '../imports/ui/learn/progress.scss';
@import '../imports/ui/pomodoroTimer/pomodoroTimer.scss';
......
<!--##################################################################-->
<!--profileDeleteConfirmForm-->
<!--##################################################################-->
<template name="profileDeleteConfirmForm">
<div class="modal fade" id="profileDelteConfirmModal" tabindex="-1" role="dialog"
aria-labelledby="profileDelteConfirmModalTitle">
<div class="modal-dialog">
<div class="modal-content modal-content-for-buttons">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 id="profileDelteConfirmModalTitle" class="modal-title">{{_ "confirm-form-profile.title"}}</h4>
</div>
<div class="modal-body">
<p>{{_ "confirm-form-profile.text" lastAppTitle=(getLastAppTitle)}}</p>
<br/>
<p>{{_ "confirm-form-profile.text2" lastAppTitle=(getLastAppTitle)}}</p>
<br/>
<hr/>
<button id="profileDelete"
class="btn btn-danger btn-raised btn-block col-xs-12 col-sm-3 btn-setDelete">{{_
"confirm-form-profile.title"}}</button>
<button id="profileCancel"
class="btn btn-default btn-raised btn-block col-xs-12 col-sm-3 pull-right"
data-dismiss="modal">{{_
"modal-dialog.cancel"}}</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</template>
//------------------------ IMPORTS
import {Meteor} from "meteor/meteor";
import {Template} from "meteor/templating";
import "./deleteProfile.html";
/*
* ############################################################################
* profileDeleteConfirmForm
* ############################################################################
*/
Template.profileDeleteConfirmForm.events({
'click #profileDelete': function () {
$('#profileDelteConfirmModal').on('hidden.bs.modal', function () {
Meteor.call("deleteUserProfile");
document.location.reload(true);
}).modal('hide');
}
});
This diff is collapsed.
This diff is collapsed.
<!--##################################################################-->
<!--profileBilling-->
<!--##################################################################-->
<template name="profileBilling">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{_ "profile.billing"}}</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills justify-content-center nav-fill">
<li class="active"><a data-toggle="tab" href="#payment">{{_ "billing.payment.header"}}</a></li>
<li><a data-toggle="tab" href="#balance">{{_ "billing.balance.header"}}</a></li>
<li><a data-toggle="tab" href="#revenue">{{_ "billing.revenue.header"}}</a></li>
<li><a data-toggle="tab" href="#purchases">{{_ "billing.purchases.header"}}</a></li>
</ul>
<div class="tab-content">
<div id="payment" class="tab-pane fade in active">
<h5>{{_ "billing.payment.actual"}}</h5>
{{#if hasPaymentMethod}}
<div class="list-group">
{{#each getPaymentMethod}}
<div class="list-group-item {{#if default}}list-group-item-success{{/if}}">
<div class="media">
<div class="media-left media-middle">
<img class="media-object" src="{{imageUrl}}" alt="...">
</div>
<div class="media-body">
<h4 class="media-heading">{{#if cardType}}{{cardType}}{{else}}
PayPal{{/if}}</h4>
{{#if cardType}}
{{maskedNumber}} - {{expirationDate}}
{{else}}
{{email}}
{{/if}}
</div>
</div>
</div>
{{/each}}
</div>
{{else}}
<p class="alert alert-info">{{_ "billing.payment.empty"}}</p>
{{/if}}
<br>
<h5>{{_ "billing.payment.add"}}</h5>
<form role="form">
<div class="row">
<div class="col-md-12">
<div id="paymentMethodDropIn"></div>
<button type="submit" id="savePaymentBtn" class="btn btn-block btn-info btn-raised">{{_
"billing.payment.save"}}</button>
</div>
</div>
</form>
</div>
<div id="balance" class="tab-pane fade">
<br>
<strong class="pull-left">{{_ "billing.balance.header"}}: {{getPrice getBalance}}</strong>
{{#if hasBalance}}
<br><br>
<form role="form">
<div class="">
<div class="">
<div id="payoutDropIn"></div>
<button id="payoutBtn" type="submit" class="btn btn-info btn-block btn-raised">
{{getPrice getBalance}} {{_ "billing.balance.disburse"}}
</button>
</div>
</div>
</form>
{{/if}}
</div>
<div id="revenue" class="tab-pane fade">
<br>
{{#if getRevenue.count}}
<div class="list-group">
{{#each getRevenue}}
<a href="/cardset/{{cardset_id}}" class="list-group-item">
<h4 class="list-group-item-heading">{{getCardsetName cardset_id}}</h4>
<p class="list-group-item-text">{{_ "billing.revenue.boughtFrom"}} {{user_id}} {{_
"billing.revenue.for"}} {{getPrice amount}} {{_
"billing.revenue.at"}} {{getDate}}</p>
</a>
{{/each}}
</div>
{{else}}
<p class="alert alert-info">{{_ "billing.revenue.empty"}}</p>
{{/if}}
</div>
<div id="purchases" class="tab-pane fade">
<br>
{{#if getInvoices.count}}
<div class="list-group">
{{#each getInvoices}}
<a href="/cardset/{{cardset_id}}" class="list-group-item">
<h4 class="list-group-item-heading">{{getCardsetName cardset_id}}</h4>
<p class="list-group-item-text">{{_ "billing.purchases.boughtFor"}} {{getPrice
amount}} {{_
"billing.purchases.at"}} {{getDate}}</p>
</a>
{{/each}}
</div>
{{else}}
<p class="alert alert-info">{{_ "billing.purchases.empty"}}</p>
{{/if}}
</div>
</div>
</div>
</div>
</template>
//------------------------ IMPORTS
import {Meteor} from "meteor/meteor";
import {Template} from "meteor/templating";
import {Session} from "meteor/session";
import {Cardsets} from "../../../api/cardsets";
import {BertAlertVisuals} from "../../../api/bertAlertVisuals";
import {Paid} from "../../../api/paid";
import "./billing.html";
/*
* ############################################################################
* profileBilling
* ############################################################################
*/
Template.profileBilling.onCreated(function () {
Session.set("switchedSitesCheck", undefined);
});
Template.profileBilling.onRendered(function () {
var customerId = Meteor.user().customerId;
Meteor.call('getClientToken', customerId, function (error, clientToken) {
if (error) {
throw new Meteor.Error(error.statusCode, 'Error getting client token from braintree');
} else {
if ($('#paymentMethodDropIn').length) {
braintree.setup(clientToken, "dropin", {
container: "paymentMethodDropIn",
defaultFirst: true,
onPaymentMethodReceived: function (response) {
$('#savePaymentBtn').prop("disabled", true);
BertAlertVisuals.displayBertAlert(TAPi18n.__('billing.payment.progress'), 'info', 'growl-top-left');
var nonce = response.nonce;
Meteor.call('btUpdatePaymentMethod', nonce, function (error) {
if (error) {
throw new Meteor.Error(error.message, 'error');
} else {
BertAlertVisuals.displayBertAlert(TAPi18n.__('billing.payment.saveMsg'), 'success', 'growl-top-left');
$('#savePaymentBtn').prop("disabled", false);
}
});
}
});
}
}
});
Meteor.call('getClientToken', customerId, function (error, clientToken) {
if (error) {
throw new Meteor.Error(error.statusCode, 'Error getting client token from braintree');
} else {
if ($('#payoutDropIn').length) {
braintree.setup(clientToken, "dropin", {
container: "payoutDropIn",
onPaymentMethodReceived: function (response) {
$('#payoutBtn').prop("disabled", true);
BertAlertVisuals.displayBertAlert(TAPi18n.__('billing.balance.progress'), 'info', 'growl-top-left');
var nonce = response.nonce;
Meteor.call('btCreateCredit', nonce, function (error, success) {
if (error) {
throw new Meteor.Error('transaction-creation-failed');
} else if (success !== undefined && success.name === "authorizationError") {
BertAlertVisuals.displayBertAlert(TAPi18n.__('billing.balance.failed'), 'danger', 'growl-top-left');
} else {
Meteor.call("resetUsersBalance", Meteor.userId());
BertAlertVisuals.displayBertAlert(TAPi18n.__('billing.balance.success'), 'success', 'growl-top-left');
$('#payoutBtn').prop("disabled", false);
}
});
}
});
}
}
});
});
Template.profileBilling.helpers({
getInvoices: function () {
return Paid.find({user_id: Meteor.userId()}, {sort: {date: -1}});
},
getRevenue: function () {
var cardsetsIds = Cardsets.find({
owner: Meteor.userId()
}).map(function (cardset) {
return cardset._id;
});
return Paid.find({cardset_id: {$in: cardsetsIds}}, {sort: {date: -1}});
},
getCardsetName: function (cardset_id) {
return (cardset_id !== undefined) ? Cardsets.findOne(cardset_id).name : undefined;
},
getBalance: function () {
Meteor.subscribe("privateUserData");
var balance = Meteor.users.findOne(Meteor.userId).balance;
return (balance !== undefined) ? parseFloat(balance).toFixed(2) : 0;
},
hasBalance: function () {
Meteor.subscribe("privateUserData");
var balance = Meteor.users.findOne(Meteor.userId).balance;
return balance > 0;
},
getPaymentMethod: function () {
Meteor.call("btGetPaymentMethod", function (error, result) {
if (result) {
Session.set("paymentMethods", result);
}
});
return Session.get('paymentMethods');
},
hasPaymentMethod: function () {
Meteor.call("btGetPaymentMethod", function (error, result) {
if (result) {
Session.set("hasPaymentMethods", !jQuery.isEmptyObject(result));
}
});
return Session.get('hasPaymentMethods');
}
});
<!--##################################################################-->
<!--profileOverview-->
<!--##################################################################-->
<template name="profileOverview">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{_ "profile.overview"}}</h3>
</div>
<div class="panel-body">
<div id="container" style="min-width: 100%;
max-width: 100%; min-height: 100%; max-height: 100%; margin: 0 auto">
{{> graph}}
</div>
</div>
</div>
</template>
//------------------------ IMPORTS
import "./leitnerProgress.js";
<!--##################################################################-->
<!--profileMembership-->
<!--##################################################################-->
<template name="profileMembership">
<div id="profile-info">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{_ "billing.plan.header"}}</h3>
</div>
<div class="panel-body">
<div>{{_ "billing.plan.desc"}}</div>
<br>
<div class="col-md-6">
<div class="panel price {{#if isInRole 'standard'}}panel-success{{else}}panel-default{{/if}}">
<div class="panel-heading text-center standard-membership">
<h3>{{_ 'access-level.edu.short'}}</h3>
</div>
<div class="panel-body text-center">
<div class="lead">
<h2>{{getPrice "0"}}</h2>
</div>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item green-passage"><i class="fa fa-check"></i> {{_
"billing.plan.free"}}</li>
{{#if isInRole 'university'}}
<li class="list-group-item green-passage"><i class="fa fa-university"></i> {{_
"billing.plan.edu"}}</li>
<!--add new class "red-passage" to change text to red, and add third listgroup to Standard User-->
<li class="list-group-item red-passage"><i class="fa fa-star"></i> {{_
"billing.plan.pro"}}</li>
{{/if}}
</ul>
<div class="panel-footer">
{{#if isInRole 'pro'}}
<button type="submit" id="downgrade" class="btn btn-danger btn-raised btn-block">{{_
"billing.plan.back"}}</button>
{{else}}
<button id="downgrade" class="btn btn-default btn-raised btn-block disabled"
href="#">{{_
"billing.plan.actual"}}</button>
{{/if}}
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel price {{#if isInRole 'pro'}}panel-success{{else}}panel-default{{/if}}">
<div class="panel-heading text-center pro-membership">
<h3>{{_ 'access-level.pro.short'}}</h3>
</div>
<div class="panel-body text-center">
<div class="lead">
<h2>{{getPrice "6.99"}} / {{_ "billing.plan.month"}}</h2></div>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item green-passage"><i class="fa fa-check"></i> {{_
"billing.plan.free"}}</li>
<li class="list-group-item green-passage"><i class="fa fa-university"></i> {{_
"billing.plan.edu"}}</li>
<li class="list-group-item green-passage"><i class="fa fa-star"></i> {{_
"billing.plan.pro"}}</li>
</ul>
<div class="panel-footer">
{{#if isInRole 'pro'}}
<button id="upgrade" class="btn btn-block btn-success btn-raised disabled">{{_
"billing.plan.actual"}}</button>
{{else}}
<form role="form">
<div class="row">
<div class="col-md-12">
<div id="subscribe-form"></div>
<button type="submit" id="upgrade"
class="btn btn-block btn-info btn-raised col-xs-12">{{_
"billing.plan.subscribe"}}</button>
</div>
</div>
</form>
{{/if}}
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">{{_ "billing.plan.lecturer"}}</h4>
</div>
<div class="panel-body">
{{#if isInRole 'lecturer'}}
{{_ "billing.plan.lecturerActivatet"}}
{{else}}
{{#if hasUserData}}
<form class="form-horizontal" id="lecturerRequestForm">
<button type="button" id="sendLecturerRequest"
class="btn btn-info btn-raised pull-right">{{_
"billing.plan.send"}}</button>
</form>
{{else}}
Geben Sie zuerst Ihre Kontaktdaten an um eine Anfrage zu stellen.
<a class="btn btn-default btn-xs pull-right" href="/profile/{{currentUser._id}}/settings">Kontaktdaten
angeben</a>
{{/if}}
{{/if}}
</div>
</div>
</div>
</template>
//------------------------ IMPORTS
import {Meteor} from "meteor/meteor";
import {Template} from "meteor/templating";
import {Session} from "meteor/session";
import {Cardsets} from "../../../api/cardsets";
import {BertAlertVisuals} from "../../../api/bertAlertVisuals";
import "./membership.html";
/*
* ############################################################################
* profileMembership
* ############################################################################
*/
Template.profileMembership.rendered = function () {
var customerId = Meteor.user().customerId;
Meteor.call('getClientToken', customerId, function (error, clientToken) {
if (error) {
throw new Meteor.Error(error.statusCode, 'Error getting client token from braintree');
} else {
if ($('#subscribe-form').length) {
braintree.setup(clientToken, "dropin", {
container: "subscribe-form",
defaultFirst: true,
onPaymentMethodReceived: function (response) {
$('#upgrade').prop("disabled", true);
BertAlertVisuals.displayBertAlert(TAPi18n.__('membership.upgrade.progress'), 'info', 'growl-top-left');
var nonce = response.nonce;
var plan = Session.get('plan');
Meteor.call('btSubscribe', nonce, plan, function (error) {
if (error) {
throw new Meteor.Error(error.message, 'error');
} else {
BertAlertVisuals.displayBertAlert(TAPi18n.__('membership.upgrade.subscribed'), 'success', 'growl-top-left');
}
});
}
});
}
}
});
};
Template.profileMembership.events({
"click #upgrade": function () {
Session.set('plan', 'pro');
},
"click #downgrade": function () {
var hasPro = Cardsets.find({owner: Meteor.userId(), kind: 'pro'}).count();
if (hasPro > 0) {
BertAlertVisuals.displayBertAlert(TAPi18n.__('membership.downgrade.error'), 'danger', 'growl-top-left');
} else {
var confirmCancel = confirm(TAPi18n.__('membership.downgrade.confirm'));
if (confirmCancel) {
$('#downgrade').prop("disabled", true);
Session.set('plan', 'standard');
Meteor.call('btCancelSubscription', function (error, response) {
if (error) {
BertAlertVisuals.displayBertAlert(error.reason, "danger", 'growl-top-left');
} else {
if (response.error) {
BertAlertVisuals.displayBertAlert(response.error.message, "danger", 'growl-top-left');
} else {
Session.set('currentUserPlan_' + Meteor.userId(), null);
BertAlertVisuals.displayBertAlert(TAPi18n.__('membership.downgrade.canceled'), 'success', 'growl-top-left');
}
}
});
}
}
},
"click #sendLecturerRequest": function () {
var text = Meteor.user().profile.name + " möchte Dozent werden.";
var type = "Dozenten-Anfrage";
var target = "admin";
Meteor.call("addNotification", target, type, text, Meteor.userId(), target);
Meteor.call("setLecturerRequest", Meteor.userId(), true);
BertAlertVisuals.displayBertAlert('Anfrage wurde gesendet', 'success', 'growl-top-left');
}
});
Template.profileMembership.helpers({
hasUserData: function () {
var email = Meteor.user().email;
return email !== "" && email !== undefined;
}
});
<!--##################################################################-->
<!--profileNotifications-->
<!--##################################################################-->
<template name="profileNotifications">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title pull-left">{{_ "profile.notifications"}}</h3>
{{#if getNotifications.count}}
<button id="clearBtn" type="button" class="btn btn-xs btn-danger pull-right">{{_
"notifications.deleteAll"}}</button>
{{/if}}
<div class="clearfix"></div>
</div>
<div class="panel-body">
{{#if getNotifications.count}}
<div class="list-group">
{{#each getNotifications}}
<div class="list-group-item">
<h4 class="list-group-item-heading pull-left">{{getType type}}</h4>
<button id="deleteNotificationBtn" class="btn btn-danger btn-xs pull-right"><i
class="fa fa-times"></i></button>
<div class="clearfix"></div>
<a href="{{getLink}}" class="list-group-item-text">{{text}}</a>
<hr>
<small class="list-group-item-text pull-left">{{getTimestamp}}</small>
<small class="list-group-item-text pull-right"><p>Status: {{getStatus}}
</p></small>
<div class="clearfix"></div>
</div>
{{/each}}
</div>
{{else}}
<div class="notification-heading">
<h4 class="menu-title">{{_ "notifications.noNotification"}}</h4>
</div>
{{/if}}
</div>
</div>
</template>
//------------------------ IMPORTS
import {Meteor} from "meteor/meteor";
import {Template} from "meteor/templating";
import {Cardsets} from "../../../api/cardsets";
import {Notifications} from "../../../api/notifications";
import "./notifications.html";
/*
* ############################################################################
* profileNotifications
* ############################################################################
*/
Template.profileNotifications.events({
"click #clearBtn": function () {
var notifications = Notifications.find({target_type: 'user', target: Meteor.userId()});
notifications.forEach(function (notification) {
Meteor.call("deleteNotification", notification);
});
},
"click #deleteNotificationBtn": function () {
Meteor.call("deleteNotification", this._id);
}
});
Template.profileNotifications.helpers({
getNotifications: function () {
if (Roles.userIsInRole(Meteor.userId(), ['admin', 'editor'])) {
return Notifications.find({}, {sort: {date: -1}});
} else {
return Notifications.find({target_type: 'user', target: Meteor.userId()}, {sort: {date: -1}});
}
},
getLink: function () {
return "/cardset/" + this.link_id;
},
getStatus: function () {
if (this.type === 'Kartensatz-Freigabe') {
var cardset = Cardsets.findOne(this.link_id);
return (cardset.visible === true) ? TAPi18n.__('notifications.approved') : TAPi18n.__('notifications.pending');
} else {
return TAPi18n.__('notifications.progress');
}
}
});
<!--##################################################################-->
<!--profileOverview-->
<!--##################################################################-->
<template name="profileOverview">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{_ "profile.overview"}}</h3>
</div>
<div class="panel-body">
<div id="container" style="min-width: 100%;
max-width: 100%; min-height: 100%; max-height: 100%; margin: 0 auto">
{{> graph}}
</div>
</div>
</div>
</template>
\ No newline at end of file
//------------------------ IMPORTS
import "./overview.html";
<!--##################################################################-->
<!--profilePublic-->
<!--##################################################################-->
<template name="profilePublic">
<div id="profile-info">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{_ "panel-heading.hallo"}}</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
{{#if getUser.profile.title}}
<div class="form-group">
<label class="col-md-4 control-label">{{_ "panel-body.title"}}</label>
<div class="col-md-8">
<input disabled type="text" class="form-control" id="inputTitle"
placeholder="{{_ "panel-body.title-desc"}}" value="{{getUser.profile.title}}">
<span id="errorTitle" class="help-block name"></span>
</div>
</div>
{{/if}}
<div class="form-group">
<label class="col-md-4 control-label">{{_ "panel-body.birthname"}}</label>
<div class="col-md-8">
<input disabled type="text" class="form-control" id="inputBirthName"
placeholder="{{_ "panel-body.birthname-desc"}}"
value="{{getUser.profile.birthname}}">
<span id="errorBirthName" class="help-block name"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">{{_ "panel-body.givenname"}}</label>
<div class="col-md-8">
<input disabled type="text" class="form-control" id="inputGivenName"
placeholder="{{_ "panel-body.givenname-desc"}}"
value="{{getUser.profile.givenname}}">
<span id="errorGivenName" class="help-block name"></span>
</div>
</div>
</form>
</div>
</div>
</div>
</template>
//------------------------ IMPORTS
import "./public.html";
<!--##################################################################-->
<!--profileRequests-->
<!--##################################################################-->
<template name="profileRequests">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{_ "profile.requests"}}</h3>
</div>
<div class="panel-body">
{{#if getRequests.count}}
<div class="list-group">