Commit b05b4dbb authored by Curtis Adam's avatar Curtis Adam Committed by Tom Käsler

Move each profile view into its own file

parent 7ea9a252
......@@ -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');
}
});
......@@ -83,608 +83,8 @@
{{/if}}
</template>
<template name="profileSidebar">
<div class="well well-sm sidebar-nav">
<div class="input-group">
<h3>{{_ "profil-header.name"}} {{getUser.profile.name}}</h3>
</div>
<div>
<p>{{_ "panel-body.login"}} {{getService}}</p>
</div>
{{#if isUser}}
<hr/>
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="{{#if isActiveRoute 'profileOverview'}}active{{/if}}">
<a href="/profile/{{currentUser._id}}/overview">
<i class="fa fa-trophy"></i>{{_ "profile.overview"}}
</a>
</li>
<li role="presentation" class="{{#if isActiveRoute 'profileMembership'}}active{{/if}}">
<a href="/profile/{{currentUser._id}}/membership">
<i class="fa fa-user"></i>{{_ "profile.membership"}}
</a>
</li>
<li role="presentation" class="{{#if isActiveRoute 'profileBilling'}}active{{/if}}">
<a href="/profile/{{currentUser._id}}/billing">
<i class="fa fa-credit-card"></i>{{_ "profile.billing"}}
</a>
</li>
<li role="presentation" class="{{#if isActiveRoute 'profileNotifications'}}active{{/if}}">
<a href="/profile/{{currentUser._id}}/notifications">
<i class="fa fa-bell"></i>{{_ "profile.notifications"}}
</a>
</li>
<li role="presentation" class="{{#if isActiveRoute 'profileSettings'}}active{{/if}}">
<a href="/profile/{{currentUser._id}}/settings">
<i class="fa fa-user"></i>{{_ "profile.settings.name"}}
</a>
</li>
{{#if isInRole 'lecturer'}}
<hr>
<li role="presentation" class="{{#if isActiveRoute 'profileRequests'}}active{{/if}}">
<a href="/profile/{{currentUser._id}}/requests">
<i class="fa fa-check"></i>{{_ "profile.requests"}}
</a>
</li>
{{/if}}
</ul>
{{/if}}
</div>
</template>
<!--##################################################################-->
<!--profileSettings-->
<!--##################################################################-->
<template name="profileSettings">
<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 isUser}}
{{#unless isInRole 'pro,lecturer'}}
<div class="form-group">
<label class="col-md-4 control-label">{{_ "panel-body.profilepublic"}}</label>
<div class="col-md-8">
<div class="btn-group" data-toggle="buttons">
<label id="profilepublicoption1"
class="btn btn-success profile-public {{#if
getUser.visible}}active profilepublic-rb-text-color{{/if}}">
<input type="radio" name="visible" value="true">
<div>{{_ "panel-body.profilepublicoption1"}}</div>
</label>
<label id="profilepublicoption2"
class="btn btn-danger profile-private {{#unless
getUser.visible}}active profilepublic-rb-text-color{{/unless}}">
<input type="radio" name="visible" value="false">
<div>{{_ "panel-body.profilepublicoption2"}}</div>
</label>
</div>
</div>
</div>
<hr>
{{/unless}}
<div class="form-group">
<label class="col-md-4 control-label">{{_ "panel-body.email"}} <a
href="mailto:{{getUser.email}}"><span class="glyphicon glyphicon-envelope"
aria-hidden="true"></span></a></label>
<div class="col-md-8">
<input type="email" class="form-control" id="inputEmail"
placeholder="{{_ "panel-body.email-desc"}}" value="{{getUser.email}}">
<span id="errorEmail" class="help-block name"></span>
</div>
</div>
<div class="form-group hidden" id="inputEmailValidationForm">
<label class="col-md-4 control-label">{{_ "panel-body.emailValidation"}} </label>
<div class="col-md-8">
<input type="email" class="form-control" id="inputEmailValidation"
placeholder="{{_ "panel-body.emailValidation-desc"}}" value="">
<span id="errorEmailValidation" class="help-block name"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">{{_ "panel-body.name"}}</label>
<div class="col-md-8">
<input type="text" class="form-control" id="inputName"
placeholder="{{_ "panel-body.name"}}" value="{{getUser.profile.name}}">
<span id="errorName" class="help-block name"></span>
</div>
</div>
<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>
<div class="form-group">
<label class="col-md-4 control-label">{{_ "panel-body.birthname"}}</label>
<div class="col-md-8">
<input 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 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>
<div class="form-group">
<label class="col-md-4 control-label">{{_ "confirmLearn-form.notification"}}</label>
<form>
<fieldset>
<div class="col-md-9 form-group">
<div class="col-md-6">
<label class="checkbox-inline" for="mailNotificationCheckbox">
<input type="checkbox" name="notification" id="mailNotificationCheckbox"
{{getMailNotifications}}>
{{_ "confirmLearn-form.mailNotificationCheckbox"}}
</label>
</div>
<div class="col-md-6">
<label class="checkbox-inline" for="webNotificationCheckbox">
<input type="checkbox" name="notification" id="webNotificationCheckbox"
{{getWebNotifications}}>
{{_ "confirmLearn-form.webNotificationCheckbox"}}
</label>
</div>
</div>
</fieldset>
</form>
</div>
<button id="profileCancel" type="button"
class="btn btn-default btn-raised btn-block col-xs-12 col-sm3 profileSave"
data-id="disabled">{{_
"profile.cancel"}}</button>
<button id="profileSave" type="button"
class="btn btn-success btn-raised btn-block col-xs-12 col-sm3 pull-right"
{{disableIfOffline}}>
{{_ "profile.save"}}
</button>
{{/if}}
</form>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">{{_ "profile.settings.appearance"}}</h4>
</div>
<div class="panel-body">
<div class="form-group row">
<label for="sel1">{{_ "profile.settings.theme"}}:</label>
<select class="form-control" id="colorThemeSelect">
{{#each getColorThemes}}
<option {{getSelectedColorThemes}} value="{{_id}}">{{name}}</option>
{{/each}}
</select>
{{#unless isDisabledSaveTheme}}
<button id="colorThemeSave" type="button"
class="btn btn-success btn-raised btn-block col-xs-12 col-sm-3 pull-right">{{_
"profile.save"}}</button>
{{/unless}}
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">{{_ "profile.settings.delete"}}</h4>
</div>
<div class="panel-body">
<p>{{_ "profile.settings.deleteText" lastAppTitle=(getLastAppTitle)}}</p>
<hr/>
<button id="profileDelete" type="button" class="btn btn-danger btn-raised btn-block col-xs-12 col-sm-3"
data-toggle="modal"
data-target="#profileDelteConfirmModal" {{disableIfOffline}}>
{{_ "profile.settings.delete"}}
</button>
</div>
{{> profileDeleteConfirmForm}}
</div>
</div>
</template>
<!--##################################################################-->
<!--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>
<template name="appLayout2">
<div class="container">
{{> yield}}
</div>
</template>
<!--##################################################################-->
<!--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>
<!--##################################################################-->
<!--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>
<!--##################################################################-->
<!--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>
<!--##################################################################-->
<!--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>
<!--##################################################################-->
<!--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">
{{#each getRequests}}
<a href="/cardset/{{_id}}" class="list-group-item">
<h4 class="list-group-item-heading">{{name}}</h4>
<p class="list-group-item-text">{{description}}</p>
</a>
{{/each}}
</div>
{{else}}
<div class="notification-heading">
<h4 class="menu-title">{{_ "profile.norequests"}}</h4>
</div>
{{/if}}
</div>
</div>
</template>
<!--##################################################################-->
<!--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 {Session} from "meteor/session";
import {Cardsets} from "../../api/cardsets.js";
import {ColorThemes} from "../../api/theme.js";
import {Paid} from "../../api/paid.js";
import {Notifications} from "../../api/notifications.js";
import "./view/billing.js";
import "./view/membership.js";
import "./view/notifications.js";
import "./view/requests.js";
import "./view/settings.js";
import "./view/leitnerProgress.js";
import "./view/public.js";
import "./view/overview.js";
import "./modal/deleteProfile.js";
import "./profile.html";
import {BertAlertVisuals} from "../../api/bertAlertVisuals";
Meteor.subscribe("notifications");
Meteor.subscribe("cardsets");
......@@ -45,596 +48,3 @@ Template.profile.helpers({
return null;
}
});
/*
* ############################################################################
* profileSidebar