Commit 2281bf52 authored by Curtis Adam's avatar Curtis Adam

Add a modal for use cases and refactor the cardset form template

parent 61f62139
......@@ -31,4 +31,5 @@
@import '../imports/ui/loadingScreen/loadingScreen.scss';
@import '../imports/ui/impressum/modal/statistics/statistics.scss';
@import '../imports/ui/main/navigation/top/item/search.scss';
@import '../imports/ui/useCases/useCases.scss';
@import 'noscript.scss';
......@@ -574,6 +574,13 @@ $themes: (
$wordcloud_border: map-get($map, "wordcloud_border");
$wordcloud_hover_box_background: map-get($map, "wordcloud_hover_box_background");
$wordcloud_hover_box_border: map-get($map, "wordcloud_hover_box_border");
//useCases
$use_cases_button_background: map-get($map, "use_cases_button_background");
$use_cases_button_icon: map-get($map, "use_cases_button_icon");
$use_cases_button_background_hover: map-get($map, "use_cases_button_background_hover");
$use_cases_button_icon_hover: map-get($map, "use_cases_button_icon_hover");
$use_cases_table_header_background: map-get($map, "use_cases_table_header_background");
$use_cases_table_header_text: map-get($map, "use_cases_table_header_text");
body.landing-page {
background-color: $background_landing_page !important;
......@@ -626,7 +633,7 @@ $themes: (
background-color: $white !important;
}
#thm-top-navigation {
#thm-top-navigation, .mobile-nav-items {
.active {
background-color: $thm_green !important;
color: $white !important;
......@@ -2611,7 +2618,7 @@ $themes: (
background-color: $button_difficulty3 ;
}
#setCardsetFormModal, #showSelectLearningUnitModal, #setLeitnerProgressCardsetFilter {
#setCardsetFormModal, #showSelectLearningUnitModal, #setLeitnerProgressCardsetFilter, #useCasesModal {
ul > li {
background-color: $cardset_form_list_background !important;
border-bottom-color: $cardset_form_border !important;
......@@ -3218,5 +3225,21 @@ $themes: (
background-color:$card_sidebar_aspect_ratio_dropdown_background_active_hover !important;
color: $card_sidebar_aspect_ratio_dropdown_text_active_hover !important;
}
//use cases
.useCase-Navigation-Button {
background-color: $use_cases_button_background !important;
color: $use_cases_button_icon !important;
}
.useCase-Navigation-Button:hover, .useCase-Navigation-Button.active {
background-color: $use_cases_button_background_hover !important;
color: $use_cases_button_icon_hover !important;
}
#useCasesModal th {
background-color: $use_cases_table_header_background !important;
color: $use_cases_table_header_text !important;
}
}
}
......@@ -598,6 +598,14 @@
"wordcloud_background": "unset",
"wordcloud_border": "unset",
"wordcloud_hover_box_background":transparent,
"wordcloud_hover_box_border": white
"wordcloud_hover_box_border": white,
//useCases
"use_cases_button_background": $thm_green,
"use_cases_button_icon": white,
"use_cases_button_background_hover": $button_background_hover,
"use_cases_button_icon_hover": white,
"use_cases_table_header_background": $thm_green,
"use_cases_table_header_text": white
);
}
......@@ -528,6 +528,28 @@
}
}
},
"useCases": {
"modal": {
"title": "Use Cases",
"text": "Hallo __firstName__, was möchtest du tun?",
"noName": "Benutzer",
"description": {
"create": "Ich möchte eine Kartei mit Karten von einem bestimmten Typ anlegen:",
"myCardIndex": "Ich möchte alle meine Karteien sehen.",
"pool": "Ich möchte eine Kartei zu einem bestimmten Thema finden.",
"repetitorium": "Ich möchte ein Repetitorium (= Sammlung von Karteien) zu einem bestimmten Thema finden.",
"workload": "Ich möchte mein Lernpensum sehen."
},
"button": {
"cancel": "Danke, ich kenne mich aus",
"create": "Los!",
"myCardIndex": "Los!",
"pool": "Los!",
"repetitorium": "Los!",
"workload": "Los!"
}
}
},
"modal-dialog": {
"missingFields": "Bitte fülle die folgenden Felder aus",
"newcarddeck": "Kartei erstellen (Box für Lernkarten)",
......
......@@ -529,6 +529,28 @@
}
}
},
"useCases": {
"modal": {
"title": "Use Cases",
"text": "Hello __firstName__, what would you like to do?",
"noName": "User",
"description": {
"create": "I want to create a card index with cards of the type:",
"myCardIndex": "I want to see all my card indexes.",
"pool": "I want to find a card index on a specific topic.",
"repetitorium": "I want to find a Repetitorium (= collection of card indexes) on a specific topic.",
"workload": "I want to see my learning workload."
},
"button": {
"cancel": "Thanks, I know my way around",
"create": "Go",
"myCardIndex": "Go",
"pool": "Go",
"repetitorium": "Go",
"workload": "Go"
}
}
},
"modal-dialog": {
"missingFields": "Bitte fülle die folgenden Felder aus",
"newcarddeck": "Kartei erstellen (Box für Lernkarten)",
......
......@@ -143,6 +143,7 @@ if (Meteor.isServer) {
user_id: Meteor.userId()
});
Meteor.call("updateLearnerCount", cardset_id);
Meteor.call('updateWorkloadCount', Meteor.userId());
return true;
},
deleteWozniak: function (cardset_id) {
......@@ -157,6 +158,7 @@ if (Meteor.isServer) {
user_id: Meteor.userId()
});
Meteor.call("updateLearnerCount", cardset_id);
Meteor.call('updateWorkloadCount', Meteor.userId());
return true;
},
updateWozniak: function (cardset_id, card_id, grade) {
......
......@@ -2,6 +2,7 @@ import {Meteor} from "meteor/meteor";
import {Leitner, Wozniak} from "./learned.js";
import {Filter} from "./filter.js";
import * as config from "../config/login.js";
import {UserPermissions} from "./permissions";
export let LoginTasks = class LoginTasks {
......@@ -24,6 +25,14 @@ export let LoginTasks = class LoginTasks {
}
}
static autoShowUseCasesForUser () {
if (UserPermissions.isAdmin()) {
return config.showUseCasesOnLoginForAdmin;
} else {
return true;
}
}
static setLoginRedirect () {
Filter.resetFilters();
Meteor.subscribe("userLeitner", {
......
import {Session} from "meteor/session";
import {Route} from "./route";
import {NavigatorCheck} from "./navigatorCheck";
let keyEventsUnlocked = true;
let firstTimePresentation = 'isFirstTimePresentation';
......@@ -18,6 +19,14 @@ export let MainNavigation = class MainNavigation {
$('#helpModal').modal('show');
}
static focusSearchBar () {
if (NavigatorCheck.isSmartphone()) {
$('.input-search').focus();
} else {
$('#toggle-search-dropdown').click();
}
}
static getFirstTimePresentationString () {
return firstTimePresentation;
}
......
......@@ -140,6 +140,10 @@ export let Route = class Route {
return Router.current().route.getName() === "pool";
}
static isFilterIndex () {
return (this.isHome() || this.isPool() || this.isMyCardsets() || this.isRepetitorium() || this.isAllCardsets() || this.isWorkload());
}
static isFirstTimeVisit () {
if (Route.isMakingOf()) {
return false;
......@@ -247,6 +251,9 @@ export let Route = class Route {
return icons.footerNavigation.statistics + TAPi18n.__('contact.statistics');
case "statisticsMobile":
return icons.footerNavigation.statistics;
case "useCasesIcon":
case "useCases":
return icons.topNavigation.useCases;
}
}
};
......@@ -92,6 +92,8 @@ if (Meteor.isServer) {
'profile.title': 1,
'profile.locale': 1,
'count.cardsets': 1,
'count.shuffle': 1,
'count.workload': 1,
'email': 1,
'services': 1,
'lvl': 1,
......@@ -124,6 +126,8 @@ if (Meteor.isServer) {
'profile.title': 1,
'profile.locale': 1,
'count.cardsets': 1,
'count.shuffle': 1,
'count.workload': 1,
'email': 1,
'services': 1,
'lvl': 1,
......@@ -484,6 +488,20 @@ Meteor.methods({
);
}
},
updateWorkloadCount: function (user_id) {
check(user_id, String);
if (Meteor.isServer) {
Meteor.users.update({
_id: user_id
},
{
$set: {
"count.workload": Leitner.find({user_id: user_id}).count() + Wozniak.find({user_id: user_id}).count()
}
}
);
}
},
/** Function saves the given colorTheme to the given user
* @param {string} selectedColorTheme - The id of the selected color theme
* @param {string} id - The id of the user
......
......@@ -28,7 +28,8 @@ let topNavigation = {
profileNotifications: "<i class='fa fa-bell'></i>&nbsp;",
profileSettings: "<i class='fa fa-user'></i>&nbsp;",
profileRequests: "<i class='fa fa-check'></i>&nbsp;",
backend: "<i class='fa fa-server'></i>&nbsp;"
backend: "<i class='fa fa-server'></i>&nbsp;",
useCases: "<i class='fa fa-map-signs'></i>"
};
//Only used for the active route display on mobile. Will be carried over to desktop after the main template got refactored.
......
......@@ -2,9 +2,11 @@
//0 All Cardsets (Admin only)
//1 Workload (If workload exists)
//2 My Cardsets (If user created at least one cardset
let loginRedirectPriority = [1, 2];
let showUseCasesOnLoginForAdmin = true;
module.exports = {
loginRedirectPriority
loginRedirectPriority,
showUseCasesOnLoginForAdmin
};
......@@ -259,6 +259,10 @@ Template.registerHelper("getCardsetIcons", function (isShuffled) {
}
});
Template.registerHelper("isUseCasesModalOpen", function () {
return Session.get('useCasesModalOpen');
});
Template.registerHelper("getServerInventory", function (type) {
return ServerInventoryTools.getServerInventory(type);
});
......
......@@ -825,6 +825,10 @@ Meteor.startup(function () {
Meteor.call('updateCardsetCount', users[i]._id);
}
for (let i = 0; i < users.length; i++) {
Meteor.call('updateWorkloadCount', users[i]._id);
}
ColorThemes.remove({});
for (let theme in themes) {
if (themes.hasOwnProperty(theme)) {
......
......@@ -13,7 +13,7 @@ import "./notifications/notifications.js";
import "./university/university.js";
import "./settings/settings.js";
import "../learn/progress.js";
import {Session} from "meteor/session";
Meteor.subscribe("notifications");
......@@ -79,3 +79,7 @@ Template.admin_main.helpers({
}
}
});
Template.admin_main.onCreated(function () {
Session.set('firedUseCaseModal', true);
});
......@@ -8,6 +8,8 @@ import {Route} from "../../../api/route";
import {FilterNavigation} from "../../../api/filterNavigation";
import {firstLoginBertAlert} from "../../../startup/client/routes";
import {CardType} from "../../../api/cardTypes";
import {Leitner, Wozniak} from "../../../api/learned";
import {MainNavigation} from "../../../api/mainNavigation";
import "./item/cardset.js";
import "./item/createCardsetButton.js";
import "./item/createRepetitoriumButton.js";
......@@ -20,7 +22,6 @@ import "../modal/deleteWorkload.js";
import "../modal/deleteCardset.js";
import "../modal/selectWorkload.js";
import "./index.html";
import {Leitner, Wozniak} from "../../../api/learned";
Session.setDefault('cardsetId', undefined);
Session.set('moduleActive', true);
......@@ -66,6 +67,10 @@ Template.filterIndexPool.events({
Template.filterIndexPool.onRendered(function () {
firstLoginBertAlert();
if (Session.get('useCaseType') === 3) {
MainNavigation.focusSearchBar();
Session.set('useCaseType', 0);
}
});
/*
......@@ -105,6 +110,12 @@ Template.filterIndexCreate.helpers({
});
Template.filterIndexCreate.onRendered(function () {
if (Route.isMyCardsets() && Session.get('useCaseType') === 1) {
$('#setCardsetFormModal').modal('show');
}
});
Template.filterIndexCreate.onDestroyed(function () {
Filter.resetMaxItemCounter();
});
......@@ -141,6 +152,13 @@ Template.filterIndexRepetitorium.helpers({
}
});
Template.filterIndexRepetitorium.onRendered(function () {
if (Session.get('useCaseType') === 2) {
MainNavigation.focusSearchBar();
Session.set('useCaseType', 0);
}
});
Template.filterIndexRepetitorium.onDestroyed(function () {
Filter.resetMaxItemCounter();
});
......
......@@ -78,7 +78,7 @@ ul.nav-list li.active {
margin-bottom: 7px;
}
.setCardTypeDropdownCaret {
.setCardTypeDropdownCaret, .setCardTypeUseCaseDropdownCaret {
width: 25px !important;
padding: 0 !important;
text-align: center !important;
......
......@@ -121,8 +121,8 @@
"cardType"}}</label>
<div class="dropdown">
<div class="btn-group col-xs-12">
<button id="setCardType" type="button"
class="btn btn-raised btn-default setCardTypeDropdown longButton"
<button type="button"
class="btn btn-raised btn-default setCardType setCardTypeDropdown longButton"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"
value="{{cardType}}">
......
......@@ -35,11 +35,16 @@ export function cleanModal() {
$('#helpSetName').html('');
if (isNewCardset()) {
$('#setCardType').html(CardType.getCardTypeLongName(-1));
$('#setCardType').val(-1);
let _id = -1;
if (Session.get('useCaseType') === 1) {
_id = Session.get('useCaseSelectedCardType');
Session.set('useCaseType', 0);
}
$('.setCardType').html(CardType.getCardTypeLongName(_id));
$('.setCardType').val(_id);
} else {
$('#setCardType').html(CardType.getCardTypeLongName(Session.get('previousCardsetData').cardType));
$('#setCardType').val(Session.get('previousCardsetData').cardType);
$('.setCardType').html(CardType.getCardTypeLongName(Session.get('previousCardsetData').cardType));
$('.setCardType').val(Session.get('previousCardsetData').cardType);
if (Session.get('previousCardsetData').cardType !== -1) {
Session.set('cardType', Session.get('previousCardsetData').cardType);
}
......@@ -82,7 +87,7 @@ export function saveCardset() {
$('#setNameLabel').addClass('text-warning');
$('#helpSetName').html(TAPi18n.__('modal-dialog.name_required'));
}
if ($('#setCardType').val() < 0) {
if ($('#setCardsetFormModal .setCardType').val() < 0) {
error = true;
errorMessage += "<li>" + TAPi18n.__('modal-dialog.cardType') + "</li>";
bertDelayMultiplier++;
......@@ -105,7 +110,7 @@ export function saveCardset() {
if (Route.isShuffle() || Route.isRepetitorium()) {
cardType = -1;
} else {
cardType = $('#setCardType').val();
cardType = $('#setCardsetFormModal .setCardType').val();
}
description = $('#contentEditor').val();
if (isNewCardset()) {
......@@ -285,11 +290,11 @@ Template.cardsetFormContent.events({
},
'click .cardType': function (evt) {
let cardType = $(evt.currentTarget).attr("data");
$('#setCardType').html($(evt.currentTarget).text());
$('#setCardType').val(cardType);
$('.setCardType').html($(evt.currentTarget).text());
$('.setCardType').val(cardType);
Session.set('cardType', Number(cardType));
Session.set('difficultyColor', Session.get('previousCardsetData').difficulty);
$('#setCardTypeLabel').removeClass('text-warning');
$('.setCardTypeLabel').removeClass('text-warning');
$('#helpSetCardType').html('');
},
'keyup #setName': function () {
......
......@@ -19,7 +19,7 @@
}
}
#setCardsetFormModal, #showSelectLearningUnitModal, #setLeitnerProgressCardsetFilter {
#setCardsetFormModal, #showSelectLearningUnitModal, #setLeitnerProgressCardsetFilter, #useCasesModal .dropdown {
ul > li {
padding-top: $size_cardset_form_list_padding !important;
padding-bottom: $size_cardset_form_list_padding !important;
......
<template name="mainNavigationItemUseCases">
<a href="#" id="useCases" class="{{#if isUseCasesModalOpen}}active{{/if}}" data-toggle="modal"
data-target="#useCasesModal">{{_ "navbar-collapse.useCases"}}</a>
</template>
import {Template} from "meteor/templating";
import {Session} from "meteor/session";
import "./useCases.html";
Template.mainNavigationItemUseCases.helpers({
isUseCasesModalOpen: function () {
return Session.get('useCasesModalOpen');
}
});
......@@ -11,6 +11,7 @@
{{> helpModal}}
{{> mainItemSearchResult}}
{{> mainNavigationTop}}
{{> useCasesModal}}
<div id="main" class="{{getMainContainer}}">
{{> yield}}
</div>
......
......@@ -35,6 +35,7 @@ import "../card/editor/editor.js";
import "./item/searchResult.js";
import "./modal/item/closeIcon.js";
import "./navigation/navigation.js";
import "../useCases/useCases.js";
import "./main.html";
import "./modal/arsnovaClick.js";
import "./modal/connectionStatus.js";
......
//can't be modified inside theme-switcher
$background: rgb(153, 153, 153);
//bert alert (Doesn't work in theme-switcher)
.bert-alert.warning {
......@@ -401,7 +403,7 @@ button {
}
}
@media (max-width: 768px) {
@media (max-width: 767px) {
.filterCardsHeader {
font-size: 10px;
}
......@@ -715,6 +717,32 @@ th {
font-style: normal;
}
#profile-drop {
overflow: hidden;
text-align: left;
min-width: auto;
@media(min-width: 768px) {
position: absolute;
}
padding-top: 0;
padding-bottom: 0;
a {
text-decoration: none;
display: block;
height: 100%;
width: 100%;
}
td {
padding-left: 0;
padding-right: 0;
}
td .fa, .glyphicon {
margin-left: 5px;
}
}
#arsnovaAppModal, #arsnovaClickModal {
iframe {
......@@ -752,26 +780,10 @@ th {
}
}
.modal-content {
border-radius: 30px !important;
}
.no-results, .no-results-filtered {
border-radius: 15px;
}
.swal2-popup {
border-radius: 30px !important;
}
.mobile-websocket-container {
margin-right: 15px;
}
.modal {
z-index: 3000 !important;
}
.modal-icon, .modal-icon-white {
font-size: $size_modal_icon;
height: $size_modal_icon;
......@@ -785,6 +797,22 @@ th {
margin-bottom: $margin_bottom_search_result_item !important;
}
.modal {
z-index: 10000 !important;
}
.modal-content {
border-radius: 30px !important;
}
.no-results, .no-results-filtered {
border-radius: 15px;
}
.swal2-popup {
border-radius: 30px !important;
}
.cc-theme-edgeless.cc-window {
border-radius: 30px;
margin: 0 20px 50px 20px;
......@@ -817,3 +845,5 @@ blockquote {
background-color: #2ac55f !important;
border-radius: 10px !important;
}
......@@ -91,7 +91,7 @@ $searchbar_desktop_height: $size_navbar_height - 6px;
}
@media (max-width: 767px) {
.search {
width: 110px;
width: 100px;
.form-group {
margin-top: 5px !important;
}
......
<template name="mainNavigationTopItemUseCasesDesktop">
<li class="hidden-xs">
{{> mainNavigationTopItemUseCases}}
</li>
</template>
<template name="mainNavigationTopItemUseCasesMobile">
<li>
{{> mainNavigationTopItemUseCases}}
</li>
</template>
<template name="mainNavigationTopItemUseCases">
<button type="button" class="btn useCase-Navigation-Button {{#if isUseCasesModalOpen}}active{{/if}}">
{{{getNavigationName "useCases"}}}
</button>
</template>
import {MainNavigation} from "../../../../../api/mainNavigation";
import {Template} from "meteor/templating";
import {Session} from "meteor/session";
import {Route} from "../../../../../api/route";
import {LoginTasks} from "../../../../../api/login";
import "./useCases.html";
Session.setDefault('firedUseCaseModal', false);
/*
* ############################################################################
* mainNavigationTopItemUseCases
* ############################################################################
*/
Template.mainNavigationTopItemUseCases.events({
'click .useCase-Navigation-Button': function () {
MainNavigation.closeCollapse();
$('#useCasesModal').modal('show');
}
});
Template.mainNavigationTopItemUseCases.onRendered(function () {
if (!Session.get('firedUseCaseModal')) {
Session.set('firedUseCaseModal', true);
if (Route.isFilterIndex() && LoginTasks.autoShowUseCasesForUser()) {
$('.useCase-Navigation-Button').click();
}
}
});
......@@ -35,6 +35,9 @@
{{> mainNavigationTopItemSearchInput longPlaceholder=false}}
</div>
{{/unless}}
<div class="navbar-header-item pull-right">
{{> mainNavigationTopItemUseCasesMobile}}
</div>
</div>
<div class="visible-xs">
{{> mainNavigationFooterDropdownContent}}
......@@ -51,6 +54,7 @@
<template name="mainNavigationTopDropdownContent">
<div class="collapse navbar-collapse" id="navbar-cards-top-collapse">
<ul class="nav navbar-nav navbar-left">
{{> mainNavigationTopItemUseCasesDesktop}}
{{> mainNavigationTopItemSearch}}
{{> mainNavigationTopItemPool}}
{{> mainNavigationTopItemRepetitorium}}
......
......@@ -12,6 +12,7 @@ import "./item/pool.js";
import "./item/profile/profile.js";
import "./item/repetitorium.js";
import "./item/search.js";
import "./item/useCases.js";
import "./item/workload.js";
import "./top.html";
......@@ -20,6 +21,7 @@ Template.mainNavigationTop.events({
event.preventDefault();
Session.set('helpFilter', undefined);
MainNavigation.setLoginTarget(false);
Session.set('firedUseCaseModal', false);
Meteor.logout();
},
'click .toggleFooterNavigation': function (event) {
......
......@@ -23,6 +23,7 @@ Session.set('animationPlaying', false);
*/
Template.presentation.onCreated(function () {
Session.set('firedUseCaseModal', true);
if (Session.get('aspectRatioMode') === 0) {
Session.set('aspectRatioMode', AspectRatio.getDefault());
}
......
<template name="useCasesItemCancel">
<button class="btn btn-raised btn-default pull-left" type="button" data-dismiss="modal"