Commit 88ec1eaf authored by Maxim's avatar Maxim
Browse files

Tutorial is now on /tutorial , popup now leads to tutorila if yo udecide to,...

Tutorial is now on /tutorial , popup now leads to tutorila if yo udecide to, new cookie counting what step the user is in the tutorial added
parent eac5f314
......@@ -61,7 +61,7 @@ body {
.tutorial {
grid-row: 1 / span 2;
position: sticky;
bottom: 20%;
bottom: 50%;
border: 1px solid #9CA3AF;
......@@ -86,7 +86,7 @@ body {
@media (min-width: 768px) {
max-width: 60%;
max-width: 30%;
align-items: center;
margin: 0 auto;
padding-bottom: 0;
......@@ -128,13 +128,16 @@ body {
.pointer{
cursor: pointer;
}
.center-text{
text-align: center;
}
.overlay{
background-color: rgba(0,0,0,0.5);
width: 100%;
height: 4000px;
height: 100vh;
position: sticky;
bottom: 0px;
margin:0px;
}
.buttonClose{
padding: 20px 10px 20px 10px;
......@@ -156,4 +159,9 @@ body {
@keyframes fadeGreen {
from {background-color: #28a745;}
to {background-color: #007bff;}
}
.tutorialBigButton{
font-size:10rem;
text-align: center;
}
\ No newline at end of file
class TutorialController < ApplicationController
def tutorial; end
def main
@info = I18n.t 'help.infobox.mainPage'
end
def change_locale
l = params[:locale].to_s.strip.to_sym
l = I18n.default_locale unless I18n.available_locales.include?(l)
cookies.permanent[:my_locale] = l
redirect_to request.referer || root_url
end
def create_user
if request.post?
begin
@result = User.demo_create(params['login'], params['firstname'], params['lastname'])
rescue StandardError => e
@result = 'Fehlgeschlagen. Existiert Benutzer mit dem Login schon? '
end
end
end
end
\ No newline at end of file
......@@ -11,34 +11,33 @@ $(() => {
}
//cookie check part, enable on production
if (typeof Cookies.get('step') === 'undefined'){
var counter = 0;
} else {
var counter = parseInt(Cookies.get("step"));
}
var images = document.getElementsByClassName("imageTutorial");
var counter = 0;
var descriptionTexts = ["Herzlich Willkommen im Gruppenverwaltungstool der Hochschule Mittweida. In diesem Tutorial erklären wir Dir die ersten Schritte mit diesem Tool. Du kannst das Tutorial schließen und jederzeit wieder neu starten.",
"Auf der Hauptseite findest Du oben rechts Deinen Benutzernamen und links befinden sich alle Gruppen, in denen Du ein Mitglied bist.",
"Um eine neue Gruppe anzulegen musst Du auf den “Gruppe erstellen”-Button oben links klicken.",
"Um eine neue Gruppe zu erstellen musst Du ihr einen Namen und eine Beschreibung hinzufügen. Die Textfelder dafür findest Du oben rechts in der “Gruppe erstellen”-Schaltfläche. Abschließend musst Du zum Speichern den “Erstellen”-Button drücken.",
"Durch einen Klick auf eine Gruppe oder die Erstellung einer neuen Gruppe gelangst Du in die Gruppenansicht. Hier findest Du eine Auflistung aller Mitglieder, deren Rolle und die verwendeten Dienste.",
"Nur Mitglieder mit der Rolle “Admin” können neue Mitglieder hinzufügen. Dafür muss am Ende der Mitgliederliste in das Textfeld der gültige HSMW-Name des neuen Mitglieds eingefügt und mit dem Button “Mitglied hinzufügen” gespeichert werden.",
"Es gibt drei verschiedene Rollen, welche einem Mitglied zugewiesen werden können. Diese sind Admin, Teilnehmer und Gast. Nur ein Admin kann die Rollen den Mitgliedern zuweisen. Zum Speichern muss der “Änderungen Speichern”-Button unten rechts betätigt werden.",
"Bei der Erstellung einer neuen Gruppe wird man automatisch Admin. Als Admin hat man die Berechtigung neue Mitglieder hinzuzufügen, Rollen zuzuweisen und Dienste zu verwalten. Es können beliebig viele Admins in einer Gruppe existieren.",
"Als Teilnehmer einer Gruppe kann man die Mitglieder, ihre Rollen und Berechtigungen sowie die Gruppeninformationen einsehen. Diese können aber als Teilnehmer nicht verändert werden.",
"Ist man Gast einer Gruppe kann man lediglich die Gruppeninformationen und die eigenen Berechtigungen einsehen. Andere Mitglieder dieser Gruppe werden nicht angezeigt.",
"Um verschiedene Dienste mit der Gruppe und ihren Mitgliedern zu verknüpfen, kann ein Admin auf die Dienstansicht wechseln. Dazu muss dieser auf den “Weitere Dienste”-Button klicken.",
"In der Dienstansicht findet man eine Übersicht aller Dienste. Durch einen Klick auf den jeweiligen Dienst gelangt man in die Rechtevergabe.",
"In der Rechtevergabe kann ein Admin jedem Mitglied der Gruppe individuell Berechtigungen für den zuvor ausgewählten Dienst durch einen Klick in die Checkbox zuweisen. Zum Bestätigen muss man auf den “Änderungen Speichern”-Button unten links klicken.",
"Du bist nun am Ende des Tutorials angekommen. Wir wünschen Dir noch viel Spaß mit dem Tool."];
$('#description').text(descriptionTexts[counter]);
var descriptions = document.getElementsByClassName("descriptionTutorial");
for(var i = 0; i < images.length; i++){
var numb = images[i].id.match(/\d/g);
numb = numb.join("");
if(numb == counter){
$('#imageTutorial' + i).removeClass("d-none");
$('#descriptionTutorial' + i).removeClass("d-none");
}else{
$('#imageTutorial' + i).addClass("d-none");
$('#descriptionTutorial' + i).addClass("d-none");
}
}
if(counter == 0){
$('#leftArrow').addClass("d-none");
}else{
$('#leftArrow').removeClass("d-none");
}
$(".tutorialEnable").on("click", function(){
$('#tutorial').removeClass("d-none");
$('#overlay').removeClass("d-none");
});
$(".buttonClose").on("click", function() {
document.cookie = "tutorial=1; expires=Fri, 31 Dec 9999 23:59:59 GMT"
......@@ -46,21 +45,31 @@ $(() => {
$('#overlay').addClass("d-none");
console.log("Tutorial Closed!");
});
$(".buttonOpen").on("click", function() {
document.cookie = "tutorial=1; expires=Fri, 31 Dec 9999 23:59:59 GMT"
$('#tutorial').addClass("d-none");
$('#overlay').addClass("d-none");
console.log("Tutorial Opened!");
});
$(".buttonNext").on("click", function() {
if(counter < descriptionTexts.length-1){
if(counter < descriptions.length-1){
counter += 1;
$('#description').text(descriptionTexts[counter]);
$('#description').text(descriptions[counter]);
document.cookie = "step=" + counter + "; expires=Fri, 31 Dec 9999 23:59:59 GMT"
for(var i = 0; i < images.length; i++){
var numb = images[i].id.match(/\d/g);
numb = numb.join("");
if(numb == counter){
$('#imageTutorial' + i).removeClass("d-none");
$('#descriptionTutorial' + i).removeClass("d-none");
}else{
$('#imageTutorial' + i).addClass("d-none");
$('#descriptionTutorial' + i).addClass("d-none");
}
}
if(counter == descriptionTexts.length-1){
if(counter == descriptions.length-1){
$('#rightArrow').addClass("d-none");
}else{
$('#rightArrow').removeClass("d-none");
......@@ -79,16 +88,17 @@ $(() => {
if(counter > 0){
counter -=1;
$('#description').text(descriptionTexts[counter]);
document.cookie = "step=" + counter + "; expires=Fri, 31 Dec 9999 23:59:59 GMT"
for(var i = 0; i < images.length; i++){
var numb = images[i].id.match(/\d/g);
numb = numb.join("");
if(numb == counter){
$('#imageTutorial' + i).removeClass("d-none");
$('#descriptionTutorial' + i).removeClass("d-none");
}else{
$('#imageTutorial' + i).addClass("d-none");
$('#descriptionTutorial' + i).addClass("d-none");
}
}
......
<div id="overlay" class="overlay d-none"></div>
<div id="tutorial" class="container tutorial d-none">
<div class="row align-items-center justify-content-center">
<div class="col-6 center-text buttonOpen"><a href="/tutorial"><i class="bi bi-question-circle tutorialBigButton pointer"></i></a><br><%= t("help.tutorialpop.yes1") %></div>
<div class="col-6 buttonClose center-text"> <span data-toggle="tooltip" data-placement="bottom" title="<%= t("help.tutorialpop.no2") %>"><i class="bi bi-dash-circle tutorialBigButton pointer"></i></span><br><%= t("help.tutorialpop.no1") %>
</div>
</div>
</div>
......@@ -39,7 +39,7 @@
</ul>
</div>
<% if cookies[:sessionToken] === 'a' %>
<span data-toggle="tooltip" data-placement="bottom" title="Tutorial"> <i class="navbar-brand tutorialEnable pointer bi bi-question-circle"></i></span>
<span data-toggle="tooltip" data-placement="bottom" title="Tutorial"><a href="/tutorial"><i class="navbar-brand pointer bi bi-question-circle"></i></a></span>
<% end %>
<a class="navbar-brand"><%= t('navBar.user') %> <%= session[:user_login] %> </a>
</div>
......@@ -66,7 +66,7 @@
<% if cookies[:allow_cookies].blank? %>
<% if cookies[:sessionToken] === 'a' %>
<%= render 'layouts/tutorial' %>
<%= render 'layouts/tutorialnotification' %>
<% end %>
<% if cookies[:sessionToken] === 'b' %>
<%= render 'layouts/info' %>
......
<div id="overlay" class="overlay d-none"></div>
<div id="tutorial" class="container tutorial d-none">
<div id="tutorial">
<div class="row align-items-center justify-content-center">
<div class="col-1"></div>
<div class="col-10">
</div>
<div class="col-1">
<div class="centers textvb pointer buttonClose">
<i class="bi bi-x fontAnimation"></i></div>
</div>
</div>
<div class="row align-items-center">
<div class="col-1">
......@@ -33,9 +28,11 @@
<div class="col-1"></div>
<div class="col-10 centers textr">
<div class="imgDesc">
<span id="description">Meine Beschreibung zu dem Bild.</span>
<% (0..13).each do |i| %>
<span id="descriptionTutorial<%= i %>" class="descriptionTutorial d-none"><%= t("help.tutorial.description#{i}") %></span>
<% end %>
</div>
</div>
<div class="col-1 texts"></div>
</div>
</div>
</div>
\ No newline at end of file
......@@ -109,6 +109,24 @@ de:
<br><br>Da sich die Anwendung noch in Entwicklung befindet, sind die Entwickler:innen auf Ihr Feedback angewiesen. Falls Sie Anmerkungen, Hinweise oder Kritiken haben, scheuen Sie sich nicht diese unter [Klicke Hier] mitzuteilen"
help:
tutorial:
description0: "Herzlich Willkommen im Gruppenverwaltungstool der Hochschule Mittweida. In diesem Tutorial erklären wir Dir die ersten Schritte mit diesem Tool. Du kannst das Tutorial schließen und jederzeit wieder neu starten."
description1: "Auf der Hauptseite findest Du oben rechts Deinen Benutzernamen und links befinden sich alle Gruppen, in denen Du ein Mitglied bist."
description2: "Um eine neue Gruppe anzulegen musst Du auf den “Gruppe erstellen”-Button oben links klicken."
description3: "Um eine neue Gruppe zu erstellen musst Du ihr einen Namen und eine Beschreibung hinzufügen. Die Textfelder dafür findest Du oben rechts in der “Gruppe erstellen”-Schaltfläche. Abschließend musst Du zum Speichern den “Erstellen”-Button drücken."
description4: "Durch einen Klick auf eine Gruppe oder die Erstellung einer neuen Gruppe gelangst Du in die Gruppenansicht. Hier findest Du eine Auflistung aller Mitglieder, deren Rolle und die verwendeten Dienste."
description5: "Nur Mitglieder mit der Rolle “Admin” können neue Mitglieder hinzufügen. Dafür muss am Ende der Mitgliederliste in das Textfeld der gültige HSMW-Name des neuen Mitglieds eingefügt und mit dem Button “Mitglied hinzufügen” gespeichert werden."
description6: "Es gibt drei verschiedene Rollen, welche einem Mitglied zugewiesen werden können. Diese sind Admin, Teilnehmer und Gast. Nur ein Admin kann die Rollen den Mitgliedern zuweisen. Zum Speichern muss der “Änderungen Speichern”-Button unten rechts betätigt werden."
description7: "Bei der Erstellung einer neuen Gruppe wird man automatisch Admin. Als Admin hat man die Berechtigung neue Mitglieder hinzuzufügen, Rollen zuzuweisen und Dienste zu verwalten. Es können beliebig viele Admins in einer Gruppe existieren."
description8: "Als Teilnehmer einer Gruppe kann man die Mitglieder, ihre Rollen und Berechtigungen sowie die Gruppeninformationen einsehen. Diese können aber als Teilnehmer nicht verändert werden."
description9: "Ist man Gast einer Gruppe kann man lediglich die Gruppeninformationen und die eigenen Berechtigungen einsehen. Andere Mitglieder dieser Gruppe werden nicht angezeigt."
description10: "Um verschiedene Dienste mit der Gruppe und ihren Mitgliedern zu verknüpfen, kann ein Admin auf die Dienstansicht wechseln. Dazu muss dieser auf den “Weitere Dienste”-Button klicken."
description11: "In der Dienstansicht findet man eine Übersicht aller Dienste. Durch einen Klick auf den jeweiligen Dienst gelangt man in die Rechtevergabe."
description12: "In der Rechtevergabe kann ein Admin jedem Mitglied der Gruppe individuell Berechtigungen für den zuvor ausgewählten Dienst durch einen Klick in die Checkbox zuweisen. Zum Bestätigen muss man auf den “Änderungen Speichern”-Button unten links klicken."
description13: "Du bist nun am Ende des Tutorials angekommen. Wir wünschen Dir noch viel Spaß mit dem Tool."
tutorialpop:
yes1: "Zu der Einführung"
no1: "Ohne die Einführung fortfahren."
no2: " Zu der Einfühung können Sie immer über den Fragezeichen Knopf auf der oberen Leiste rechts gelangen. "
infobox:
consumerList: "Hier findest Du eine Übersicht aller Dienste.
Durch einen Klick auf den jeweiligen Dienst gelangst Du zur Rechtevergabe.
......
......@@ -109,6 +109,24 @@ en:
<br><br>Since the application is still under development, the developers depend on your feedback. If you have any comments, hints or criticisms, please do not hesitate to send them to [Click Here]."
help:
tutorial:
description0: "Welcome to the group management tool of Mittweida University. In this tutorial we explain you the first steps with this tool. You can close the tutorial and restart it at any time."
description1: "On the main page you will find your username on the top right and on the left are all the groups you are a member of."
description2: "To create a new group you have to click on the “Create Group” button on the top left."
description3: "To create a new group you have to add a name and a description to it. The text fields for this can be found in the upper right corner of the “Create Group” button. Finally you have to press the “Create” button to save it."
description4: "Clicking on a group or creating a new group will take you to the group view. Here you will find a list of all members, their role and the services used."
description5: "Only members with the role “Admin” can add new members. For this you have to insert the valid HSMW name of the new member into the text field at the end of the member list and save it with the button “Add member”."
description6: "There are three different roles which can be assigned to a member. These are admin, participant and guest. Only an admin can assign the roles to the members. To save, the “Save Changes” button must be clicked at the bottom right."
description7: "When creating a new group, one automatically becomes an admin. As an admin, one has the authority to add new members, assign roles and manage services. There can be any number of admins in a group."
description8: "As a participant of a group, one can view the members, their roles and permissions as well as the group information. However, these cannot be changed as a participant."
description9: "If you are a guest in a group, you can only view the group information and your own permissions. Other members of this group are not displayed."
description10: "To link different services to the group and its members, an admin can switch to the service view. To do this, the latter must click on the “More services” button."
description11: "In the service view one can find an overview of all services. By clicking on the respective service, one gets to the rights assignment."
description12: "In the rights assignment, an admin can assign permissions for the previously selected service to each member of the group individually by clicking in the checkbox. To confirm, one must click on the “Save Changes” button at the bottom left."
description13: "You have now reached the end of the tutorial. We wish you a lot of fun with the tool."
tutorialpop:
yes1: "To the introduction"
no1: "Continue without the introduction."
no2: "You can always get to the introduction via the question mark button on the right of the top bar "
infobox:
consumerList: "Hier findest Du eine Übersicht aller Dienste.
Durch einen Klick auf den jeweiligen Dienst gelangst Du zur Rechtevergabe.
......
......@@ -20,11 +20,12 @@ Rails.application.routes.draw do
get 'vpn', to: 'vpn#vpn'
get 'tutorial', to: 'tutorial#tutorial'
match 'lang/:locale', to: 'index#change_locale', as: :change_locale, via: [:get]
# get '/', to: 'index#index'
get '/vpntest', to: proc{ |env|
[
302,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment