schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove mybadges integration

Browse Source
This commit is contained in:
Mario Pesch 2021-07-27 11:57:46 +02:00
parent ed36a27ac2
commit 5b2add4098
21 changed files with 12148 additions and 9820 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.env
View File

@ -2,8 +2,5 @@ REACT_APP_COMPILER_URL=https://compiler.sensebox.de
REACT_APP_BOARD=sensebox-mcu REACT_APP_BOARD=sensebox-mcu
REACT_APP_BLOCKLY_API=https://api.blockly.sensebox.de REACT_APP_BLOCKLY_API=https://api.blockly.sensebox.de
REACT_APP_MYBADGES=https://mybadges.org
REACT_APP_MYBADGES_API=https://mybadges.org/api/v1
# in days # in days
REACT_APP_SHARE_LINK_EXPIRES=30 REACT_APP_SHARE_LINK_EXPIRES=30

2
package.json
View File

@ -38,7 +38,7 @@
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
"dev": "set \"REACT_APP_BLOCKLY_API=http://localhost:8080\" && set \"REACT_APP_MYBADGES_API=http://localhost:3001/api/v1\"&& npm start", "dev": "set \"REACT_APP_BLOCKLY_API=http://localhost:8080\" && npm start",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject" "eject": "react-scripts eject"

366
src/actions/authActions.js
View File

@ -1,290 +1,260 @@
import { MYBADGES_CONNECT, MYBADGES_DISCONNECT, GET_STATUS, USER_LOADED, USER_LOADING, AUTH_ERROR, LOGIN_SUCCESS, LOGIN_FAIL, LOGOUT_SUCCESS, LOGOUT_FAIL, REFRESH_TOKEN_SUCCESS } from '../actions/types'; import {
GET_STATUS,
USER_LOADED,
USER_LOADING,
AUTH_ERROR,
LOGIN_SUCCESS,
LOGIN_FAIL,
LOGOUT_SUCCESS,
LOGOUT_FAIL,
REFRESH_TOKEN_SUCCESS,
} from "../actions/types";
import axios from 'axios'; import axios from "axios";
import { returnErrors, returnSuccess } from './messageActions'; import { returnErrors, returnSuccess } from "./messageActions";
import { setLanguage } from './generalActions'; import { setLanguage } from "./generalActions";
// Check token & load user // Check token & load user
export const loadUser = () => (dispatch) => { export const loadUser = () => (dispatch) => {
// user loading // user loading
dispatch({ dispatch({
type: USER_LOADING type: USER_LOADING,
}); });
const config = { const config = {
success: res => { success: (res) => {
dispatch({ dispatch({
type: GET_STATUS, type: GET_STATUS,
payload: res.data.user.status payload: res.data.user.status,
}); });
dispatch(setLanguage(res.data.user.language)); dispatch(setLanguage(res.data.user.language));
dispatch({ dispatch({
type: USER_LOADED, type: USER_LOADED,
payload: res.data.user payload: res.data.user,
}); });
}, },
error: err => { error: (err) => {
if(err.response){ if (err.response) {
dispatch(returnErrors(err.response.data.message, err.response.status)); dispatch(returnErrors(err.response.data.message, err.response.status));
} }
var status = []; var status = [];
if (window.localStorage.getItem('status')) { if (window.localStorage.getItem("status")) {
status = JSON.parse(window.localStorage.getItem('status')); status = JSON.parse(window.localStorage.getItem("status"));
} }
dispatch({ dispatch({
type: GET_STATUS, type: GET_STATUS,
payload: status payload: status,
}); });
dispatch({ dispatch({
type: AUTH_ERROR type: AUTH_ERROR,
}); });
} },
}; };
axios.get(`${process.env.REACT_APP_BLOCKLY_API}/user`, config, dispatch(authInterceptor())) axios
.then(res => { .get(
`${process.env.REACT_APP_BLOCKLY_API}/user`,
config,
dispatch(authInterceptor())
)
.then((res) => {
res.config.success(res); res.config.success(res);
}) })
.catch(err => { .catch((err) => {
err.config.error(err); err.config.error(err);
}); });
}; };
var logoutTimerId; var logoutTimerId;
const timeToLogout = 14.9*60*1000; // nearly 15 minutes corresponding to the API const timeToLogout = 14.9 * 60 * 1000; // nearly 15 minutes corresponding to the API
// Login user // Login user
export const login = ({ email, password }) => (dispatch) => { export const login =
dispatch({ ({ email, password }) =>
type: USER_LOADING (dispatch) => {
});
// Headers
const config = {
headers: {
'Content-Type': 'application/json'
}
};
// Request Body
const body = JSON.stringify({ email, password });
axios.post(`${process.env.REACT_APP_BLOCKLY_API}/user`, body, config)
.then(res => {
// Logout automatically if refreshToken "expired"
const logoutTimer = () => setTimeout(
() => dispatch(logout()),
timeToLogout
);
logoutTimerId = logoutTimer();
dispatch(setLanguage(res.data.user.language));
dispatch({ dispatch({
type: LOGIN_SUCCESS, type: USER_LOADING,
payload: res.data
}); });
dispatch({ // Headers
type: GET_STATUS, const config = {
payload: res.data.user.status headers: {
}); "Content-Type": "application/json",
dispatch(returnSuccess(res.data.message, res.status, 'LOGIN_SUCCESS')); },
}) };
.catch(err => { // Request Body
dispatch(returnErrors(err.response.data.message, err.response.status, 'LOGIN_FAIL')); const body = JSON.stringify({ email, password });
dispatch({ axios
type: LOGIN_FAIL .post(`${process.env.REACT_APP_BLOCKLY_API}/user`, body, config)
}); .then((res) => {
var status = []; // Logout automatically if refreshToken "expired"
if (window.localStorage.getItem('status')) { const logoutTimer = () =>
status = JSON.parse(window.localStorage.getItem('status')); setTimeout(() => dispatch(logout()), timeToLogout);
} logoutTimerId = logoutTimer();
dispatch({ dispatch(setLanguage(res.data.user.language));
type: GET_STATUS, dispatch({
payload: status type: LOGIN_SUCCESS,
}); payload: res.data,
}); });
}; dispatch({
type: GET_STATUS,
payload: res.data.user.status,
// Connect to MyBadges-Account });
export const connectMyBadges = ({ username, password }) => (dispatch, getState) => { dispatch(returnSuccess(res.data.message, res.status, "LOGIN_SUCCESS"));
const config = { })
success: res => { .catch((err) => {
var user = getState().auth.user; dispatch(
user.badge = res.data.account; returnErrors(
user.badges = res.data.badges; err.response.data.message,
dispatch({ err.response.status,
type: MYBADGES_CONNECT, "LOGIN_FAIL"
payload: user )
);
dispatch({
type: LOGIN_FAIL,
});
var status = [];
if (window.localStorage.getItem("status")) {
status = JSON.parse(window.localStorage.getItem("status"));
}
dispatch({
type: GET_STATUS,
payload: status,
});
}); });
dispatch(returnSuccess(res.data.message, res.status, 'MYBADGES_CONNECT_SUCCESS'));
},
error: err => {
dispatch(returnErrors(err.response.data.message, err.response.status, 'MYBADGES_CONNECT_FAIL'));
}
}; };
// Request Body
const body = JSON.stringify({ username, password });
axios.post(`${process.env.REACT_APP_BLOCKLY_API}/user/badge`, body, config)
.then(res => {
res.config.success(res);
})
.catch(err => {
if(err.response && err.response.status !== 401){
err.config.error(err);
}
});
};
// Disconnect MyBadges-Account
export const disconnectMyBadges = () => (dispatch, getState) => {
const config = {
success: res => {
var user = getState().auth.user;
user.badge = null;
user.badges = null;
dispatch({
type: MYBADGES_DISCONNECT,
payload: user
});
dispatch(returnSuccess(res.data.message, res.status, 'MYBADGES_DISCONNECT_SUCCESS'));
},
error: err => {
dispatch(returnErrors(err.response.data.message, err.response.status, 'MYBADGES_DISCONNECT_FAIL'));
}
};
axios.put(`${process.env.REACT_APP_BLOCKLY_API}/user/badge`, {}, config)
.then(res => {
res.config.success(res);
})
.catch(err => {
if(err.response && err.response.status !== 401){
err.config.error(err);
}
});
};
// Logout User // Logout User
export const logout = () => (dispatch) => { export const logout = () => (dispatch) => {
const config = { const config = {
success: res => { success: (res) => {
dispatch({ dispatch({
type: LOGOUT_SUCCESS type: LOGOUT_SUCCESS,
}); });
var status = []; var status = [];
if (window.localStorage.getItem('status')) { if (window.localStorage.getItem("status")) {
status = JSON.parse(window.localStorage.getItem('status')); status = JSON.parse(window.localStorage.getItem("status"));
} }
dispatch({ dispatch({
type: GET_STATUS, type: GET_STATUS,
payload: status payload: status,
}); });
var locale = 'en_US'; var locale = "en_US";
if (window.localStorage.getItem('locale')) { if (window.localStorage.getItem("locale")) {
locale = window.localStorage.getItem('locale'); locale = window.localStorage.getItem("locale");
} } else if (navigator.language === "de-DE") {
else if (navigator.language === 'de-DE'){ locale = "de_DE";
locale = 'de_DE';
} }
dispatch(setLanguage(locale)); dispatch(setLanguage(locale));
dispatch(returnSuccess(res.data.message, res.status, 'LOGOUT_SUCCESS')); dispatch(returnSuccess(res.data.message, res.status, "LOGOUT_SUCCESS"));
clearTimeout(logoutTimerId); clearTimeout(logoutTimerId);
}, },
error: err => { error: (err) => {
dispatch(returnErrors(err.response.data.message, err.response.status, 'LOGOUT_FAIL')); dispatch(
returnErrors(
err.response.data.message,
err.response.status,
"LOGOUT_FAIL"
)
);
dispatch({ dispatch({
type: LOGOUT_FAIL type: LOGOUT_FAIL,
}); });
var status = []; var status = [];
if (window.localStorage.getItem('status')) { if (window.localStorage.getItem("status")) {
status = JSON.parse(window.localStorage.getItem('status')); status = JSON.parse(window.localStorage.getItem("status"));
} }
dispatch({ dispatch({
type: GET_STATUS, type: GET_STATUS,
payload: status payload: status,
}); });
clearTimeout(logoutTimerId); clearTimeout(logoutTimerId);
} },
}; };
axios.post('https://api.opensensemap.org/users/sign-out', {}, config) axios
.then(res => { .post("https://api.opensensemap.org/users/sign-out", {}, config)
res.config.success(res); .then((res) => {
}) res.config.success(res);
.catch(err => { })
if(err.response && err.response.status !== 401){ .catch((err) => {
err.config.error(err); if (err.response && err.response.status !== 401) {
} err.config.error(err);
}); }
});
}; };
export const authInterceptor = () => (dispatch, getState) => { export const authInterceptor = () => (dispatch, getState) => {
// Add a request interceptor // Add a request interceptor
axios.interceptors.request.use( axios.interceptors.request.use(
config => { (config) => {
config.headers['Content-Type'] = 'application/json'; config.headers["Content-Type"] = "application/json";
const token = getState().auth.token; const token = getState().auth.token;
if (token) { if (token) {
config.headers['Authorization'] = `Bearer ${token}`; config.headers["Authorization"] = `Bearer ${token}`;
} }
return config; return config;
}, },
error => { (error) => {
Promise.reject(error); Promise.reject(error);
} }
); );
// Add a response interceptor // Add a response interceptor
axios.interceptors.response.use( axios.interceptors.response.use(
response => { (response) => {
// request was successfull // request was successfull
return response; return response;
}, },
error => { (error) => {
const originalRequest = error.config; const originalRequest = error.config;
const refreshToken = getState().auth.refreshToken; const refreshToken = getState().auth.refreshToken;
if(refreshToken){ if (refreshToken) {
// try to refresh the token failed // try to refresh the token failed
if (error.response.status === 401 && originalRequest._retry) { if (error.response.status === 401 && originalRequest._retry) {
// router.push('/login'); // router.push('/login');
return Promise.reject(error); return Promise.reject(error);
} }
// token was not valid and 1st try to refresh the token // token was not valid and 1st try to refresh the token
if (error.response.status === 401 && !originalRequest._retry) { if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true; originalRequest._retry = true;
const refreshToken = getState().auth.refreshToken; const refreshToken = getState().auth.refreshToken;
// request to refresh the token, in request-body is the refreshToken // request to refresh the token, in request-body is the refreshToken
axios.post('https://api.opensensemap.org/users/refresh-auth', {"token": refreshToken}) axios
.then(res => { .post("https://api.opensensemap.org/users/refresh-auth", {
if (res.status === 200) { token: refreshToken,
clearTimeout(logoutTimerId); })
const logoutTimer = () => setTimeout( .then((res) => {
() => dispatch(logout()), if (res.status === 200) {
timeToLogout clearTimeout(logoutTimerId);
); const logoutTimer = () =>
logoutTimerId = logoutTimer(); setTimeout(() => dispatch(logout()), timeToLogout);
dispatch({ logoutTimerId = logoutTimer();
type: REFRESH_TOKEN_SUCCESS, dispatch({
payload: res.data type: REFRESH_TOKEN_SUCCESS,
}); payload: res.data,
axios.defaults.headers.common['Authorization'] = 'Bearer ' + getState().auth.token; });
// request was successfull, new request with the old parameters and the refreshed token axios.defaults.headers.common["Authorization"] =
return axios(originalRequest) "Bearer " + getState().auth.token;
.then(res => { // request was successfull, new request with the old parameters and the refreshed token
originalRequest.success(res); return axios(originalRequest)
}) .then((res) => {
.catch(err => { originalRequest.success(res);
originalRequest.error(err); })
}); .catch((err) => {
} originalRequest.error(err);
return Promise.reject(error); });
}) }
.catch(err => { return Promise.reject(error);
// request failed, token could not be refreshed })
if(err.response){ .catch((err) => {
dispatch(returnErrors(err.response.data.message, err.response.status)); // request failed, token could not be refreshed
} if (err.response) {
dispatch({ dispatch(
type: AUTH_ERROR returnErrors(err.response.data.message, err.response.status)
}); );
return Promise.reject(error); }
}); dispatch({
type: AUTH_ERROR,
});
return Promise.reject(error);
});
} }
} }
// request status was unequal to 401, no possibility to refresh the token // request status was unequal to 401, no possibility to refresh the token

287
src/actions/tutorialActions.js
View File

@ -1,107 +1,105 @@
import { MYBADGES_DISCONNECT, TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_STEP } from './types'; import {
TUTORIAL_PROGRESS,
GET_TUTORIAL,
GET_TUTORIALS,
TUTORIAL_SUCCESS,
TUTORIAL_ERROR,
TUTORIAL_CHANGE,
TUTORIAL_XML,
TUTORIAL_STEP,
} from "./types";
import axios from 'axios'; import axios from "axios";
import { returnErrors, returnSuccess } from './messageActions'; import { returnErrors, returnSuccess } from "./messageActions";
export const tutorialProgress = () => (dispatch) => { export const tutorialProgress = () => (dispatch) => {
dispatch({type: TUTORIAL_PROGRESS}); dispatch({ type: TUTORIAL_PROGRESS });
}; };
export const getTutorial = (id) => (dispatch, getState) => { export const getTutorial = (id) => (dispatch, getState) => {
axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`) axios
.then(res => { .get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`)
.then((res) => {
var tutorial = res.data.tutorial; var tutorial = res.data.tutorial;
existingTutorial(tutorial, getState().tutorial.status).then(status => { existingTutorial(tutorial, getState().tutorial.status).then((status) => {
dispatch({ dispatch({
type: TUTORIAL_SUCCESS, type: TUTORIAL_SUCCESS,
payload: status payload: status,
}); });
dispatch(updateStatus(status)); dispatch(updateStatus(status));
dispatch({ dispatch({
type: GET_TUTORIAL, type: GET_TUTORIAL,
payload: tutorial payload: tutorial,
}); });
dispatch({type: TUTORIAL_PROGRESS}); dispatch({ type: TUTORIAL_PROGRESS });
dispatch(returnSuccess(res.data.message, res.status)); dispatch(returnSuccess(res.data.message, res.status));
}); });
}) })
.catch(err => { .catch((err) => {
if (err.response) { if (err.response) {
dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_TUTORIAL_FAIL')); dispatch(
returnErrors(
err.response.data.message,
err.response.status,
"GET_TUTORIAL_FAIL"
)
);
} }
dispatch({ type: TUTORIAL_PROGRESS }); dispatch({ type: TUTORIAL_PROGRESS });
}); });
}; };
export const getTutorials = () => (dispatch, getState) => { export const getTutorials = () => (dispatch, getState) => {
axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial`) axios
.then(res => { .get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial`)
.then((res) => {
var tutorials = res.data.tutorials; var tutorials = res.data.tutorials;
existingTutorials(tutorials, getState().tutorial.status).then(status => { existingTutorials(tutorials, getState().tutorial.status).then(
dispatch({ (status) => {
type: TUTORIAL_SUCCESS, dispatch({
payload: status type: TUTORIAL_SUCCESS,
}); payload: status,
dispatch(updateStatus(status)); });
dispatch({ dispatch(updateStatus(status));
type: GET_TUTORIALS, dispatch({
payload: tutorials type: GET_TUTORIALS,
}); payload: tutorials,
dispatch({ type: TUTORIAL_PROGRESS }); });
dispatch(returnSuccess(res.data.message, res.status)); dispatch({ type: TUTORIAL_PROGRESS });
}); dispatch(returnSuccess(res.data.message, res.status));
}
);
}) })
.catch(err => { .catch((err) => {
if (err.response) { if (err.response) {
dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_TUTORIALS_FAIL')); dispatch(
returnErrors(
err.response.data.message,
err.response.status,
"GET_TUTORIALS_FAIL"
)
);
} }
dispatch({ type: TUTORIAL_PROGRESS }); dispatch({ type: TUTORIAL_PROGRESS });
}); });
}; };
export const assigneBadge = (id) => (dispatch, getState) => {
const config = {
success: res => {
var badge = res.data.badge;
var user = getState().auth.user;
user.badges.push(badge._id);
dispatch({
type: MYBADGES_DISCONNECT,
payload: user
});
dispatch(returnSuccess(badge, res.status, 'ASSIGNE_BADGE_SUCCESS'));
},
error: err => {
dispatch(returnErrors(err.response.data.message, err.response.status, 'ASSIGNE_BADGE_FAIL'));
}
};
axios.put(`${process.env.REACT_APP_BLOCKLY_API}/user/badge/${id}`, {}, config)
.then(res => {
res.config.success(res);
})
.catch(err => {
if(err.response && err.response.status !== 401){
err.config.error(err);
}
});
};
export const updateStatus = (status) => (dispatch, getState) => { export const updateStatus = (status) => (dispatch, getState) => {
if(getState().auth.isAuthenticated){ if (getState().auth.isAuthenticated) {
// update user account in database - sync with redux store // update user account in database - sync with redux store
axios.put(`${process.env.REACT_APP_BLOCKLY_API}/user/status`, {status: status}) axios
.then(res => { .put(`${process.env.REACT_APP_BLOCKLY_API}/user/status`, {
// dispatch(returnSuccess(badge, res.status, 'UPDATE_STATUS_SUCCESS')); status: status,
}) })
.catch(err => { .then((res) => {})
if(err.response){ .catch((err) => {
if (err.response) {
// dispatch(returnErrors(err.response.data.message, err.response.status, 'UPDATE_STATUS_FAIL')); // dispatch(returnErrors(err.response.data.message, err.response.status, 'UPDATE_STATUS_FAIL'));
} }
}); });
} else { } else {
// update locale storage - sync with redux store // update locale storage - sync with redux store
window.localStorage.setItem('status', JSON.stringify(status)); window.localStorage.setItem("status", JSON.stringify(status));
} }
}; };
@ -109,65 +107,77 @@ export const deleteTutorial = (id) => (dispatch, getState) => {
var tutorial = getState().tutorial; var tutorial = getState().tutorial;
var id = getState().builder.id; var id = getState().builder.id;
const config = { const config = {
success: res => { success: (res) => {
var tutorials = tutorial.tutorials; var tutorials = tutorial.tutorials;
var index = tutorials.findIndex(res => res._id === id); var index = tutorials.findIndex((res) => res._id === id);
tutorials.splice(index, 1) tutorials.splice(index, 1);
dispatch({ dispatch({
type: GET_TUTORIALS, type: GET_TUTORIALS,
payload: tutorials payload: tutorials,
}); });
dispatch(returnSuccess(res.data.message, res.status, 'TUTORIAL_DELETE_SUCCESS')); dispatch(
returnSuccess(res.data.message, res.status, "TUTORIAL_DELETE_SUCCESS")
);
},
error: (err) => {
dispatch(
returnErrors(
err.response.data.message,
err.response.status,
"TUTORIAL_DELETE_FAIL"
)
);
}, },
error: err => {
dispatch(returnErrors(err.response.data.message, err.response.status, 'TUTORIAL_DELETE_FAIL'));
}
}; };
axios.delete(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`, config) axios
.then(res => { .delete(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`, config)
.then((res) => {
res.config.success(res); res.config.success(res);
}) })
.catch(err => { .catch((err) => {
if(err.response && err.response.status !== 401){ if (err.response && err.response.status !== 401) {
err.config.error(err); err.config.error(err);
} }
}); });
}; };
export const resetTutorial = () => (dispatch) => { export const resetTutorial = () => (dispatch) => {
dispatch({ dispatch({
type: GET_TUTORIALS, type: GET_TUTORIALS,
payload: [] payload: [],
}); });
dispatch({ dispatch({
type: TUTORIAL_STEP, type: TUTORIAL_STEP,
payload: 0 payload: 0,
}); });
}; };
export const tutorialChange = () => (dispatch) => { export const tutorialChange = () => (dispatch) => {
dispatch({ dispatch({
type: TUTORIAL_CHANGE type: TUTORIAL_CHANGE,
}); });
}; };
export const tutorialCheck = (status, step) => (dispatch, getState) => { export const tutorialCheck = (status, step) => (dispatch, getState) => {
var tutorialsStatus = getState().tutorial.status; var tutorialsStatus = getState().tutorial.status;
var id = getState().tutorial.tutorials[0]._id; var id = getState().tutorial.tutorials[0]._id;
var tutorialsStatusIndex = tutorialsStatus.findIndex(tutorialStatus => tutorialStatus._id === id); var tutorialsStatusIndex = tutorialsStatus.findIndex(
var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(task => task._id === step._id); (tutorialStatus) => tutorialStatus._id === id
);
var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(
(task) => task._id === step._id
);
tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = { tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = {
...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex], ...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex],
type: status type: status,
}; };
dispatch({ dispatch({
type: status === 'success' ? TUTORIAL_SUCCESS : TUTORIAL_ERROR, type: status === "success" ? TUTORIAL_SUCCESS : TUTORIAL_ERROR,
payload: tutorialsStatus payload: tutorialsStatus,
}); });
dispatch(updateStatus(tutorialsStatus)); dispatch(updateStatus(tutorialsStatus));
dispatch(tutorialChange()); dispatch(tutorialChange());
dispatch(returnSuccess('', '', 'TUTORIAL_CHECK_SUCCESS')); dispatch(returnSuccess("", "", "TUTORIAL_CHECK_SUCCESS"));
}; };
export const storeTutorialXml = (code) => (dispatch, getState) => { export const storeTutorialXml = (code) => (dispatch, getState) => {
@ -176,17 +186,21 @@ export const storeTutorialXml = (code) => (dispatch, getState) => {
var id = tutorial._id; var id = tutorial._id;
var activeStep = getState().tutorial.activeStep; var activeStep = getState().tutorial.activeStep;
var steps = tutorial.steps; var steps = tutorial.steps;
if (steps && steps[activeStep].type === 'task') { if (steps && steps[activeStep].type === "task") {
var tutorialsStatus = getState().tutorial.status; var tutorialsStatus = getState().tutorial.status;
var tutorialsStatusIndex = tutorialsStatus.findIndex(tutorialStatus => tutorialStatus._id === id); var tutorialsStatusIndex = tutorialsStatus.findIndex(
var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(task => task._id === steps[activeStep]._id); (tutorialStatus) => tutorialStatus._id === id
);
var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(
(task) => task._id === steps[activeStep]._id
);
tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = { tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = {
...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex], ...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex],
xml: code xml: code,
}; };
dispatch({ dispatch({
type: TUTORIAL_XML, type: TUTORIAL_XML,
payload: tutorialsStatus payload: tutorialsStatus,
}); });
dispatch(updateStatus(tutorialsStatus)); dispatch(updateStatus(tutorialsStatus));
} }
@ -196,50 +210,65 @@ export const storeTutorialXml = (code) => (dispatch, getState) => {
export const tutorialStep = (step) => (dispatch) => { export const tutorialStep = (step) => (dispatch) => {
dispatch({ dispatch({
type: TUTORIAL_STEP, type: TUTORIAL_STEP,
payload: step payload: step,
}); });
}; };
const existingTutorials = (tutorials, status) =>
const existingTutorials = (tutorials, status) => new Promise(function (resolve, reject) {
var newstatus;
new Promise(function (resolve, reject) { new Promise(function (resolve, reject) {
var existingTutorialIds = tutorials.map((tutorial, i) => { var newstatus;
existingTutorial(tutorial, status).then(status => { new Promise(function (resolve, reject) {
newstatus = status; var existingTutorialIds = tutorials.map((tutorial, i) => {
existingTutorial(tutorial, status).then((status) => {
newstatus = status;
});
return tutorial._id;
}); });
return tutorial._id; resolve(existingTutorialIds);
}).then((existingTutorialIds) => {
// deleting old tutorials which do not longer exist
if (existingTutorialIds.length > 0) {
status = newstatus.filter(
(status) => existingTutorialIds.indexOf(status._id) > -1
);
}
resolve(status);
}); });
resolve(existingTutorialIds) });
}).then(existingTutorialIds => {
// deleting old tutorials which do not longer exist const existingTutorial = (tutorial, status) =>
if (existingTutorialIds.length > 0) { new Promise(function (resolve, reject) {
status = newstatus.filter(status => existingTutorialIds.indexOf(status._id) > -1); var tutorialsId = tutorial._id;
var statusIndex = status.findIndex((status) => status._id === tutorialsId);
if (statusIndex > -1) {
var tasks = tutorial.steps.filter((step) => step.type === "task");
var existingTaskIds = tasks.map((task, j) => {
var tasksId = task._id;
if (
status[statusIndex].tasks.findIndex(
(task) => task._id === tasksId
) === -1
) {
// task does not exist
status[statusIndex].tasks.push({ _id: tasksId });
}
return tasksId;
});
// deleting old tasks which do not longer exist
if (existingTaskIds.length > 0) {
status[statusIndex].tasks = status[statusIndex].tasks.filter(
(task) => existingTaskIds.indexOf(task._id) > -1
);
}
} else {
status.push({
_id: tutorialsId,
tasks: tutorial.steps
.filter((step) => step.type === "task")
.map((task) => {
return { _id: task._id };
}),
});
} }
resolve(status); resolve(status);
}); });
});
const existingTutorial = (tutorial, status) => new Promise(function(resolve, reject){
var tutorialsId = tutorial._id;
var statusIndex = status.findIndex(status => status._id === tutorialsId);
if (statusIndex > -1) {
var tasks = tutorial.steps.filter(step => step.type === 'task');
var existingTaskIds = tasks.map((task, j) => {
var tasksId = task._id;
if (status[statusIndex].tasks.findIndex(task => task._id === tasksId) === -1) {
// task does not exist
status[statusIndex].tasks.push({ _id: tasksId });
}
return tasksId;
});
// deleting old tasks which do not longer exist
if (existingTaskIds.length > 0) {
status[statusIndex].tasks = status[statusIndex].tasks.filter(task => existingTaskIds.indexOf(task._id) > -1);
}
}
else {
status.push({ _id: tutorialsId, tasks: tutorial.steps.filter(step => step.type === 'task').map(task => { return { _id: task._id }; }) });
}
resolve(status);
});

231
src/actions/tutorialBuilderActions.js
View File

@ -1,24 +1,36 @@
import { PROGRESS, JSON_STRING, BUILDER_CHANGE, BUILDER_ERROR, BUILDER_TITLE, BUILDER_ID, BUILDER_BADGE, BUILDER_ADD_STEP, BUILDER_DELETE_STEP, BUILDER_CHANGE_STEP, BUILDER_CHANGE_ORDER, BUILDER_DELETE_PROPERTY } from './types'; import {
PROGRESS,
JSON_STRING,
BUILDER_CHANGE,
BUILDER_ERROR,
BUILDER_TITLE,
BUILDER_ID,
BUILDER_ADD_STEP,
BUILDER_DELETE_STEP,
BUILDER_CHANGE_STEP,
BUILDER_CHANGE_ORDER,
BUILDER_DELETE_PROPERTY,
} from "./types";
import data from '../data/hardware.json'; import data from "../data/hardware.json";
export const changeTutorialBuilder = () => (dispatch) => { export const changeTutorialBuilder = () => (dispatch) => {
dispatch({ dispatch({
type: BUILDER_CHANGE type: BUILDER_CHANGE,
}); });
}; };
export const jsonString = (json) => (dispatch) => { export const jsonString = (json) => (dispatch) => {
dispatch({ dispatch({
type: JSON_STRING, type: JSON_STRING,
payload: json payload: json,
}); });
}; };
export const tutorialTitle = (title) => (dispatch) => { export const tutorialTitle = (title) => (dispatch) => {
dispatch({ dispatch({
type: BUILDER_TITLE, type: BUILDER_TITLE,
payload: title payload: title,
}); });
dispatch(changeTutorialBuilder()); dispatch(changeTutorialBuilder());
}; };
@ -26,7 +38,7 @@ export const tutorialTitle = (title) => (dispatch) => {
export const tutorialSteps = (steps) => (dispatch) => { export const tutorialSteps = (steps) => (dispatch) => {
dispatch({ dispatch({
type: BUILDER_ADD_STEP, type: BUILDER_ADD_STEP,
payload: steps payload: steps,
}); });
dispatch(changeTutorialBuilder()); dispatch(changeTutorialBuilder());
}; };
@ -34,15 +46,7 @@ export const tutorialSteps = (steps) => (dispatch) => {
export const tutorialId = (id) => (dispatch) => { export const tutorialId = (id) => (dispatch) => {
dispatch({ dispatch({
type: BUILDER_ID, type: BUILDER_ID,
payload: id payload: id,
});
dispatch(changeTutorialBuilder());
};
export const tutorialBadge = (badge) => (dispatch) => {
dispatch({
type: BUILDER_BADGE,
payload: badge
}); });
dispatch(changeTutorialBuilder()); dispatch(changeTutorialBuilder());
}; };
@ -51,14 +55,14 @@ export const addStep = (index) => (dispatch, getState) => {
var steps = getState().builder.steps; var steps = getState().builder.steps;
var step = { var step = {
id: index + 1, id: index + 1,
type: 'instruction', type: "instruction",
headline: '', headline: "",
text: '' text: "",
}; };
steps.splice(index, 0, step); steps.splice(index, 0, step);
dispatch({ dispatch({
type: BUILDER_ADD_STEP, type: BUILDER_ADD_STEP,
payload: steps payload: steps,
}); });
dispatch(addErrorStep(index)); dispatch(addErrorStep(index));
dispatch(changeTutorialBuilder()); dispatch(changeTutorialBuilder());
@ -69,7 +73,7 @@ export const addErrorStep = (index) => (dispatch, getState) => {
error.steps.splice(index, 0, {}); error.steps.splice(index, 0, {});
dispatch({ dispatch({
type: BUILDER_ERROR, type: BUILDER_ERROR,
payload: error payload: error,
}); });
}; };
@ -78,7 +82,7 @@ export const removeStep = (index) => (dispatch, getState) => {
steps.splice(index, 1); steps.splice(index, 1);
dispatch({ dispatch({
type: BUILDER_DELETE_STEP, type: BUILDER_DELETE_STEP,
payload: steps payload: steps,
}); });
dispatch(removeErrorStep(index)); dispatch(removeErrorStep(index));
dispatch(changeTutorialBuilder()); dispatch(changeTutorialBuilder());
@ -89,45 +93,47 @@ export const removeErrorStep = (index) => (dispatch, getState) => {
error.steps.splice(index, 1); error.steps.splice(index, 1);
dispatch({ dispatch({
type: BUILDER_ERROR, type: BUILDER_ERROR,
payload: error payload: error,
}); });
}; };
export const changeContent = (content, index, property1, property2) => (dispatch, getState) => { export const changeContent =
var steps = getState().builder.steps; (content, index, property1, property2) => (dispatch, getState) => {
var step = steps[index]; var steps = getState().builder.steps;
if (property2) { var step = steps[index];
if (step[property1] && step[property1][property2]) { if (property2) {
step[property1][property2] = content; if (step[property1] && step[property1][property2]) {
step[property1][property2] = content;
} else {
step[property1] = { [property2]: content };
}
} else { } else {
step[property1] = { [property2]: content }; step[property1] = content;
} }
} else { dispatch({
step[property1] = content; type: BUILDER_CHANGE_STEP,
} payload: steps,
dispatch({ });
type: BUILDER_CHANGE_STEP, dispatch(changeTutorialBuilder());
payload: steps };
});
dispatch(changeTutorialBuilder());
};
export const deleteProperty = (index, property1, property2) => (dispatch, getState) => { export const deleteProperty =
var steps = getState().builder.steps; (index, property1, property2) => (dispatch, getState) => {
var step = steps[index]; var steps = getState().builder.steps;
if (property2) { var step = steps[index];
if (step[property1] && step[property1][property2]) { if (property2) {
delete step[property1][property2]; if (step[property1] && step[property1][property2]) {
delete step[property1][property2];
}
} else {
delete step[property1];
} }
} else { dispatch({
delete step[property1]; type: BUILDER_DELETE_PROPERTY,
} payload: steps,
dispatch({ });
type: BUILDER_DELETE_PROPERTY, dispatch(changeTutorialBuilder());
payload: steps };
});
dispatch(changeTutorialBuilder());
};
export const changeStepIndex = (fromIndex, toIndex) => (dispatch, getState) => { export const changeStepIndex = (fromIndex, toIndex) => (dispatch, getState) => {
var steps = getState().builder.steps; var steps = getState().builder.steps;
@ -136,34 +142,34 @@ export const changeStepIndex = (fromIndex, toIndex) => (dispatch, getState) => {
steps.splice(toIndex, 0, step); steps.splice(toIndex, 0, step);
dispatch({ dispatch({
type: BUILDER_CHANGE_ORDER, type: BUILDER_CHANGE_ORDER,
payload: steps payload: steps,
}); });
dispatch(changeErrorStepIndex(fromIndex, toIndex)); dispatch(changeErrorStepIndex(fromIndex, toIndex));
dispatch(changeTutorialBuilder()); dispatch(changeTutorialBuilder());
}; };
export const changeErrorStepIndex = (fromIndex, toIndex) => (dispatch, getState) => { export const changeErrorStepIndex =
var error = getState().builder.error; (fromIndex, toIndex) => (dispatch, getState) => {
var errorStep = error.steps[fromIndex]; var error = getState().builder.error;
error.steps.splice(fromIndex, 1); var errorStep = error.steps[fromIndex];
error.steps.splice(toIndex, 0, errorStep); error.steps.splice(fromIndex, 1);
dispatch({ error.steps.splice(toIndex, 0, errorStep);
type: BUILDER_ERROR, dispatch({
payload: error type: BUILDER_ERROR,
}); payload: error,
}; });
};
export const setError = (index, property) => (dispatch, getState) => { export const setError = (index, property) => (dispatch, getState) => {
var error = getState().builder.error; var error = getState().builder.error;
if (index !== undefined) { if (index !== undefined) {
error.steps[index][property] = true; error.steps[index][property] = true;
} } else {
else {
error[property] = true; error[property] = true;
} }
dispatch({ dispatch({
type: BUILDER_ERROR, type: BUILDER_ERROR,
payload: error payload: error,
}); });
dispatch(changeTutorialBuilder()); dispatch(changeTutorialBuilder());
}; };
@ -172,13 +178,12 @@ export const deleteError = (index, property) => (dispatch, getState) => {
var error = getState().builder.error; var error = getState().builder.error;
if (index !== undefined) { if (index !== undefined) {
delete error.steps[index][property]; delete error.steps[index][property];
} } else {
else {
delete error[property]; delete error[property];
} }
dispatch({ dispatch({
type: BUILDER_ERROR, type: BUILDER_ERROR,
payload: error payload: error,
}); });
dispatch(changeTutorialBuilder()); dispatch(changeTutorialBuilder());
}; };
@ -188,11 +193,11 @@ export const setSubmitError = () => (dispatch, getState) => {
// if(builder.id === undefined || builder.id === ''){ // if(builder.id === undefined || builder.id === ''){
// dispatch(setError(undefined, 'id')); // dispatch(setError(undefined, 'id'));
// } // }
if (builder.title === '') { if (builder.title === "") {
dispatch(setError(undefined, 'title')); dispatch(setError(undefined, "title"));
} }
if (builder.title === null) { if (builder.title === null) {
dispatch(setError(undefined, 'badge')); dispatch(setError(undefined, "title"));
} }
var type = builder.steps.map((step, i) => { var type = builder.steps.map((step, i) => {
// media and xml are directly checked for errors in their components and // media and xml are directly checked for errors in their components and
@ -200,76 +205,82 @@ export const setSubmitError = () => (dispatch, getState) => {
step.id = i + 1; step.id = i + 1;
if (i === 0) { if (i === 0) {
if (step.requirements && step.requirements.length > 0) { if (step.requirements && step.requirements.length > 0) {
var requirements = step.requirements.filter(requirement => /^[0-9a-fA-F]{24}$/.test(requirement)); var requirements = step.requirements.filter((requirement) =>
/^[0-9a-fA-F]{24}$/.test(requirement)
);
if (requirements.length < step.requirements.length) { if (requirements.length < step.requirements.length) {
dispatch(changeContent(requirements, i, 'requirements')); dispatch(changeContent(requirements, i, "requirements"));
} }
} }
if (step.hardware === undefined || step.hardware.length < 1) { if (step.hardware === undefined || step.hardware.length < 1) {
dispatch(setError(i, 'hardware')); dispatch(setError(i, "hardware"));
} } else {
else { var hardwareIds = data.map((hardware) => hardware.id);
var hardwareIds = data.map(hardware => hardware.id); var hardware = step.hardware.filter((hardware) =>
var hardware = step.hardware.filter(hardware => hardwareIds.includes(hardware)); hardwareIds.includes(hardware)
);
if (hardware.length < step.hardware.length) { if (hardware.length < step.hardware.length) {
dispatch(changeContent(hardware, i, 'hardware')); dispatch(changeContent(hardware, i, "hardware"));
} }
} }
} }
if (step.headline === undefined || step.headline === '') { if (step.headline === undefined || step.headline === "") {
dispatch(setError(i, 'headline')); dispatch(setError(i, "headline"));
} }
if (step.text === undefined || step.text === '') { if (step.text === undefined || step.text === "") {
dispatch(setError(i, 'text')); dispatch(setError(i, "text"));
} }
return step.type; return step.type;
}); });
if (!(type.filter(item => item === 'task').length > 0 && type.filter(item => item === 'instruction').length > 0)) { if (
dispatch(setError(undefined, 'type')); !(
type.filter((item) => item === "task").length > 0 &&
type.filter((item) => item === "instruction").length > 0
)
) {
dispatch(setError(undefined, "type"));
} }
}; };
export const checkError = () => (dispatch, getState) => { export const checkError = () => (dispatch, getState) => {
dispatch(setSubmitError()); dispatch(setSubmitError());
var error = getState().builder.error; var error = getState().builder.error;
if (error.id || error.title || error.badge ||error.type) { if (error.id || error.title || error.type) {
return true; return true;
} }
for (var i = 0; i < error.steps.length; i++) { for (var i = 0; i < error.steps.length; i++) {
if (Object.keys(error.steps[i]).length > 0) { if (Object.keys(error.steps[i]).length > 0) {
return true return true;
} }
} }
return false; return false;
} };
export const progress = (inProgress) => (dispatch) => { export const progress = (inProgress) => (dispatch) => {
dispatch({ dispatch({
type: PROGRESS, type: PROGRESS,
payload: inProgress payload: inProgress,
}) });
}; };
export const resetTutorial = () => (dispatch, getState) => { export const resetTutorial = () => (dispatch, getState) => {
dispatch(jsonString('')); dispatch(jsonString(""));
dispatch(tutorialTitle('')); dispatch(tutorialTitle(""));
dispatch(tutorialBadge(undefined));
var steps = [ var steps = [
{ {
type: 'instruction', type: "instruction",
headline: '', headline: "",
text: '', text: "",
hardware: [], hardware: [],
requirements: [] requirements: [],
} },
]; ];
dispatch(tutorialSteps(steps)); dispatch(tutorialSteps(steps));
dispatch({ dispatch({
type: BUILDER_ERROR, type: BUILDER_ERROR,
payload: { payload: {
steps: [{}] steps: [{}],
} },
}); });
}; };
@ -278,8 +289,10 @@ export const readJSON = (json) => (dispatch, getState) => {
dispatch({ dispatch({
type: BUILDER_ERROR, type: BUILDER_ERROR,
payload: { payload: {
steps: json.steps.map(() => { return {}; }) steps: json.steps.map(() => {
} return {};
}),
},
}); });
// accept only valid attributes // accept only valid attributes
var steps = json.steps.map((step, i) => { var steps = json.steps.map((step, i) => {
@ -287,7 +300,7 @@ export const readJSON = (json) => (dispatch, getState) => {
_id: step._id, _id: step._id,
type: step.type, type: step.type,
headline: step.headline, headline: step.headline,
text: step.text text: step.text,
}; };
if (i === 0) { if (i === 0) {
object.hardware = step.hardware; object.hardware = step.hardware;
@ -296,19 +309,17 @@ export const readJSON = (json) => (dispatch, getState) => {
if (step.xml) { if (step.xml) {
object.xml = step.xml; object.xml = step.xml;
} }
if (step.media && step.type === 'instruction') { if (step.media && step.type === "instruction") {
object.media = {}; object.media = {};
if (step.media.picture) { if (step.media.picture) {
object.media.picture = step.media.picture; object.media.picture = step.media.picture;
} } else if (step.media.youtube) {
else if (step.media.youtube) {
object.media.youtube = step.media.youtube; object.media.youtube = step.media.youtube;
} }
} }
return object; return object;
}); });
dispatch(tutorialTitle(json.title)); dispatch(tutorialTitle(json.title));
dispatch(tutorialBadge(json.badge));
dispatch(tutorialSteps(steps)); dispatch(tutorialSteps(steps));
dispatch(setSubmitError()); dispatch(setSubmitError());
dispatch(progress(false)); dispatch(progress(false));

106
src/actions/types.js
View File

@ -1,65 +1,59 @@
// authentication // authentication
export const USER_LOADING = 'USER_LOADING'; export const USER_LOADING = "USER_LOADING";
export const USER_LOADED = 'USER_LOADED'; export const USER_LOADED = "USER_LOADED";
export const AUTH_ERROR = 'AUTH_ERROR'; export const AUTH_ERROR = "AUTH_ERROR";
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'; export const LOGIN_SUCCESS = "LOGIN_SUCCESS";
export const LOGIN_FAIL = 'LOGIN_FAIL'; export const LOGIN_FAIL = "LOGIN_FAIL";
export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS'; export const LOGOUT_SUCCESS = "LOGOUT_SUCCESS";
export const LOGOUT_FAIL = 'LOGOUT_FAIL'; export const LOGOUT_FAIL = "LOGOUT_FAIL";
export const REFRESH_TOKEN_FAIL = 'REFRESH_TOKEN_FAIL'; export const REFRESH_TOKEN_FAIL = "REFRESH_TOKEN_FAIL";
export const REFRESH_TOKEN_SUCCESS = 'REFRESH_TOKEN_SUCCESS'; export const REFRESH_TOKEN_SUCCESS = "REFRESH_TOKEN_SUCCESS";
export const MYBADGES_CONNECT = 'MYBADGES_CONNECT';
export const MYBADGES_DISCONNECT = 'MYBADGES_DISCONNECT';
export const NEW_CODE = 'NEW_CODE'; export const NEW_CODE = "NEW_CODE";
export const CHANGE_WORKSPACE = 'CHANGE_WORKSPACE'; export const CHANGE_WORKSPACE = "CHANGE_WORKSPACE";
export const CREATE_BLOCK = 'CREATE_BLOCK'; export const CREATE_BLOCK = "CREATE_BLOCK";
export const MOVE_BLOCK = 'MOVE_BLOCK'; export const MOVE_BLOCK = "MOVE_BLOCK";
export const CHANGE_BLOCK = 'CHANGE_BLOCK'; export const CHANGE_BLOCK = "CHANGE_BLOCK";
export const DELETE_BLOCK = 'DELETE_BLOCK'; export const DELETE_BLOCK = "DELETE_BLOCK";
export const CLEAR_STATS = 'CLEAR_STATS'; export const CLEAR_STATS = "CLEAR_STATS";
export const NAME = 'NAME'; export const NAME = "NAME";
export const TUTORIAL_PROGRESS = 'TUTORIAL_PROGRESS'; export const TUTORIAL_PROGRESS = "TUTORIAL_PROGRESS";
export const GET_TUTORIAL = 'GET_TUTORIAL'; export const GET_TUTORIAL = "GET_TUTORIAL";
export const GET_TUTORIALS = 'GET_TUTORIALS'; export const GET_TUTORIALS = "GET_TUTORIALS";
export const GET_STATUS = 'GET_STATUS'; export const GET_STATUS = "GET_STATUS";
export const TUTORIAL_SUCCESS = 'TUTORIAL_SUCCESS'; export const TUTORIAL_SUCCESS = "TUTORIAL_SUCCESS";
export const TUTORIAL_ERROR = 'TUTORIAL_ERROR'; export const TUTORIAL_ERROR = "TUTORIAL_ERROR";
export const TUTORIAL_CHANGE = 'TUTORIAL_CHANGE'; export const TUTORIAL_CHANGE = "TUTORIAL_CHANGE";
export const TUTORIAL_XML = 'TUTORIAL_XML'; export const TUTORIAL_XML = "TUTORIAL_XML";
export const TUTORIAL_ID = 'TUTORIAL_ID'; export const TUTORIAL_ID = "TUTORIAL_ID";
export const TUTORIAL_STEP = 'TUTORIAL_STEP'; export const TUTORIAL_STEP = "TUTORIAL_STEP";
export const JSON_STRING = 'JSON_STRING'; export const JSON_STRING = "JSON_STRING";
export const BUILDER_CHANGE = "BUILDER_CHANGE";
export const BUILDER_TITLE = "BUILDER_TITLE";
export const BUILDER_ID = "BUILDER_ID";
export const BUILDER_ADD_STEP = "BUILDER_ADD_STEP";
export const BUILDER_DELETE_STEP = "BUILDER_DELETE_STEP";
export const BUILDER_CHANGE_STEP = "BUILDER_CHANGE_STEP";
export const BUILDER_CHANGE_ORDER = "BUILDER_CHANGE_ORDER";
export const BUILDER_DELETE_PROPERTY = "BUILDER_DELETE_PROPERTY";
export const BUILDER_ERROR = "BUILDER_ERROR";
export const PROGRESS = "PROGRESS";
export const BUILDER_CHANGE = 'BUILDER_CHANGE'; export const VISIT = "VISIT";
export const BUILDER_TITLE = 'BUILDER_TITLE'; export const LANGUAGE = "LANGUAGE";
export const BUILDER_BADGE = 'BUILDER_BADGE'; export const RENDERER = "RENDERER";
export const BUILDER_ID = 'BUILDER_ID'; export const STATISTICS = "STATISTICS";
export const BUILDER_ADD_STEP = 'BUILDER_ADD_STEP';
export const BUILDER_DELETE_STEP = 'BUILDER_DELETE_STEP';
export const BUILDER_CHANGE_STEP = 'BUILDER_CHANGE_STEP';
export const BUILDER_CHANGE_ORDER = 'BUILDER_CHANGE_ORDER';
export const BUILDER_DELETE_PROPERTY = 'BUILDER_DELETE_PROPERTY';
export const BUILDER_ERROR = 'BUILDER_ERROR';
export const PROGRESS = 'PROGRESS';
export const VISIT = 'VISIT';
export const LANGUAGE = 'LANGUAGE';
export const RENDERER = 'RENDERER';
export const STATISTICS = 'STATISTICS';
// messages // messages
export const GET_ERRORS = 'GET_ERRORS'; export const GET_ERRORS = "GET_ERRORS";
export const GET_SUCCESS = 'GET_SUCCESS'; export const GET_SUCCESS = "GET_SUCCESS";
export const CLEAR_MESSAGES = 'CLEAR_MESSAGES'; export const CLEAR_MESSAGES = "CLEAR_MESSAGES";
// projects: share, gallery, project // projects: share, gallery, project
export const PROJECT_PROGRESS = 'PROJECT_PROGRESS'; export const PROJECT_PROGRESS = "PROJECT_PROGRESS";
export const GET_PROJECT = 'GET_PROJECT'; export const GET_PROJECT = "GET_PROJECT";
export const GET_PROJECTS = 'GET_PROJECTS'; export const GET_PROJECTS = "GET_PROJECTS";
export const PROJECT_TYPE = 'PROJECT_TYPE'; export const PROJECT_TYPE = "PROJECT_TYPE";
export const PROJECT_DESCRIPTION = 'PROJECT_DESCRIPTION'; export const PROJECT_DESCRIPTION = "PROJECT_DESCRIPTION";

9
src/components/Blockly/msg/de/ui.js
View File

@ -172,14 +172,6 @@ export const UI = {
labels_username: "E-Mail oder Nutzername", labels_username: "E-Mail oder Nutzername",
labels_password: "Passwort", labels_password: "Passwort",
/**
* Badges
*/
badges_explaination:
"Eine Übersicht über alle erhaltenen Badges im Kontext Blockly for senseBox findest du ",
badges_ASSIGNE_BADGE_SUCCESS_01: "Herzlichen Glückwunsch! Du hast den Badge ",
badges_ASSIGNE_BADGE_SUCCESS_02: " erhalten.",
/** /**
* Tutorials * Tutorials
*/ */
@ -228,7 +220,6 @@ export const UI = {
navbar_menu: "Menü", navbar_menu: "Menü",
navbar_login: "Einloggen", navbar_login: "Einloggen",
navbar_mybadges: "myBadges",
navbar_account: "Konto", navbar_account: "Konto",
navbar_logout: "Abmelden", navbar_logout: "Abmelden",
navbar_settings: "Einstellungen", navbar_settings: "Einstellungen",

1124
src/components/Blockly/msg/de_old.js
View File

File diff suppressed because it is too large Load Diff

10
src/components/Blockly/msg/en/ui.js
View File

@ -165,15 +165,6 @@ export const UI = {
labels_here: "here", labels_here: "here",
labels_username: "Email or username", labels_username: "Email or username",
labels_password: "Password", labels_password: "Password",
/**
* Badges
*/
badges_explaination:
"An overview of all badges received in the Blockly for senseBox context can be found ",
badges_ASSIGNE_BADGE_SUCCESS_01:
"Congratulations! You have received the badge ",
badges_ASSIGNE_BADGE_SUCCESS_02: ".",
/** /**
* Tutorials * Tutorials
@ -225,7 +216,6 @@ export const UI = {
navbar_menu: "Menu", navbar_menu: "Menu",
navbar_login: "Login", navbar_login: "Login",
navbar_mybadges: "myBadges",
navbar_account: "Account", navbar_account: "Account",
navbar_logout: "Logout", navbar_logout: "Logout",
navbar_settings: "Settings", navbar_settings: "Settings",

885
src/components/Blockly/msg/en_old.js
View File

File diff suppressed because it is too large Load Diff

341
src/components/Navbar.js
View File

@ -1,136 +1,177 @@
import React, { Component } from 'react'; import React, { Component } from "react";
import PropTypes from 'prop-types'; import PropTypes from "prop-types";
import { connect } from 'react-redux'; import { connect } from "react-redux";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import { logout } from '../actions/authActions'; import { logout } from "../actions/authActions";
import senseboxLogo from './sensebox_logo.svg'; import senseboxLogo from "./sensebox_logo.svg";
import { withRouter } from 'react-router-dom'; import { withRouter } from "react-router-dom";
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from "@material-ui/core/styles";
import Drawer from '@material-ui/core/Drawer'; import Drawer from "@material-ui/core/Drawer";
import AppBar from '@material-ui/core/AppBar'; import AppBar from "@material-ui/core/AppBar";
import Toolbar from '@material-ui/core/Toolbar'; import Toolbar from "@material-ui/core/Toolbar";
import List from '@material-ui/core/List'; import List from "@material-ui/core/List";
import Typography from '@material-ui/core/Typography'; import Typography from "@material-ui/core/Typography";
import Divider from '@material-ui/core/Divider'; import Divider from "@material-ui/core/Divider";
import IconButton from '@material-ui/core/IconButton'; import IconButton from "@material-ui/core/IconButton";
import ListItem from '@material-ui/core/ListItem'; import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from "@material-ui/core/ListItemText";
import LinearProgress from '@material-ui/core/LinearProgress'; import LinearProgress from "@material-ui/core/LinearProgress";
import Tour from 'reactour' import Tour from "reactour";
import { home, assessment } from './Tour'; import { home, assessment } from "./Tour";
import { faBars, faChevronLeft, faLayerGroup, faSignInAlt, faSignOutAlt, faCertificate, faUserCircle, faQuestionCircle, faCog, faChalkboardTeacher, faTools, faLightbulb } from "@fortawesome/free-solid-svg-icons"; import {
faBars,
faChevronLeft,
faLayerGroup,
faSignInAlt,
faSignOutAlt,
faUserCircle,
faQuestionCircle,
faCog,
faChalkboardTeacher,
faTools,
faLightbulb,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as Blockly from 'blockly' import * as Blockly from "blockly";
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from "@material-ui/core/Tooltip";
const styles = (theme) => ({ const styles = (theme) => ({
drawerWidth: { drawerWidth: {
// color: theme.palette.primary.main, // color: theme.palette.primary.main,
width: window.innerWidth < 600 ? '100%' : '240px', width: window.innerWidth < 600 ? "100%" : "240px",
borderRight: `1px solid ${theme.palette.primary.main}` borderRight: `1px solid ${theme.palette.primary.main}`,
}, },
appBarColor: { appBarColor: {
backgroundColor: theme.palette.primary.main backgroundColor: theme.palette.primary.main,
}, },
tourButton: { tourButton: {
marginleft: 'auto', marginleft: "auto",
marginright: '30px', marginright: "30px",
} },
}); });
class Navbar extends Component { class Navbar extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
open: false, open: false,
isTourOpen: false isTourOpen: false,
}; };
} }
toggleDrawer = () => { toggleDrawer = () => {
this.setState({ open: !this.state.open }); this.setState({ open: !this.state.open });
} };
openTour = () => { openTour = () => {
this.setState({ isTourOpen: true }); this.setState({ isTourOpen: true });
};
}
closeTour = () => { closeTour = () => {
this.setState({ isTourOpen: false }); this.setState({ isTourOpen: false });
} };
render() { render() {
var isHome = /^\/(\/.*$|$)/g.test(this.props.location.pathname); var isHome = /^\/(\/.*$|$)/g.test(this.props.location.pathname);
var isTutorial = /^\/tutorial(\/.*$|$)/g.test(this.props.location.pathname); var isTutorial = /^\/tutorial(\/.*$|$)/g.test(this.props.location.pathname);
var isAssessment = /^\/tutorial\/.{1,}$/g.test(this.props.location.pathname) && var isAssessment =
!this.props.tutorialIsLoading && this.props.tutorial && /^\/tutorial\/.{1,}$/g.test(this.props.location.pathname) &&
this.props.tutorial.steps[this.props.activeStep].type === 'task'; !this.props.tutorialIsLoading &&
this.props.tutorial &&
this.props.tutorial.steps[this.props.activeStep].type === "task";
return ( return (
<div> <div>
<AppBar <AppBar
position="relative" position="relative"
style={{ height: '50px', marginBottom: this.props.tutorialIsLoading || this.props.projectIsLoading ? '0px' : '30px', boxShadow: this.props.tutorialIsLoading || this.props.projectIsLoading ? 'none' : '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)' }} style={{
height: "50px",
marginBottom:
this.props.tutorialIsLoading || this.props.projectIsLoading
? "0px"
: "30px",
boxShadow:
this.props.tutorialIsLoading || this.props.projectIsLoading
? "none"
: "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
}}
classes={{ root: this.props.classes.appBarColor }} classes={{ root: this.props.classes.appBarColor }}
> >
<Toolbar style={{ height: '50px', minHeight: '50px', padding: 0, color: 'white' }}> <Toolbar
style={{
height: "50px",
minHeight: "50px",
padding: 0,
color: "white",
}}
>
<IconButton <IconButton
color="inherit" color="inherit"
onClick={this.toggleDrawer} onClick={this.toggleDrawer}
style={{ margin: '0 10px' }} style={{ margin: "0 10px" }}
className="MenuButton" className="MenuButton"
> >
<FontAwesomeIcon icon={faBars} /> <FontAwesomeIcon icon={faBars} />
</IconButton> </IconButton>
<Link to={"/"} style={{ textDecoration: 'none', color: 'inherit' }}> <Link to={"/"} style={{ textDecoration: "none", color: "inherit" }}>
<Typography variant="h6" noWrap> <Typography variant="h6" noWrap>
senseBox Blockly senseBox Blockly
</Typography> </Typography>
</Link> </Link>
<Link to={"/"} style={{ marginLeft: '10px' }}> <Link to={"/"} style={{ marginLeft: "10px" }}>
<img src={senseboxLogo} alt="senseBox-Logo" width="30" /> <img src={senseboxLogo} alt="senseBox-Logo" width="30" />
</Link> </Link>
{isTutorial ? {isTutorial ? (
<Link to={"/tutorial"} style={{ textDecoration: 'none', color: 'inherit', marginLeft: '10px' }}> <Link
to={"/tutorial"}
style={{
textDecoration: "none",
color: "inherit",
marginLeft: "10px",
}}
>
<Typography variant="h6" noWrap> <Typography variant="h6" noWrap>
Tutorial Tutorial
</Typography> </Typography>
</Link> : null} </Link>
{isHome ? ) : null}
<Tooltip title='Hilfe starten' arrow> {isHome ? (
<Tooltip title="Hilfe starten" arrow>
<IconButton <IconButton
color="inherit" color="inherit"
className={`openTour ${this.props.classes.button}`} className={`openTour ${this.props.classes.button}`}
onClick={() => { this.openTour(); }} onClick={() => {
style={{ margin: '0 30px 0 auto' }} this.openTour();
}}
style={{ margin: "0 30px 0 auto" }}
> >
<FontAwesomeIcon icon={faQuestionCircle} /> <FontAwesomeIcon icon={faQuestionCircle} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
: null} ) : null}
{isAssessment ? {isAssessment ? (
<Tooltip title='Hilfe starten' arrow> <Tooltip title="Hilfe starten" arrow>
<IconButton <IconButton
color="inherit" color="inherit"
className={`openTour ${this.props.classes.button}`} className={`openTour ${this.props.classes.button}`}
onClick={() => { this.openTour(); }} onClick={() => {
style={{ margin: '0 30px 0 auto' }} this.openTour();
}}
style={{ margin: "0 30px 0 auto" }}
> >
<FontAwesomeIcon icon={faQuestionCircle} /> <FontAwesomeIcon icon={faQuestionCircle} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
: null} ) : null}
<Tour <Tour
steps={isHome ? home() : assessment()} steps={isHome ? home() : assessment()}
isOpen={this.state.isTourOpen} isOpen={this.state.isTourOpen}
onRequestClose={() => { this.closeTour(); }} onRequestClose={() => {
this.closeTour();
}}
/> />
</Toolbar> </Toolbar>
</AppBar> </AppBar>
@ -142,71 +183,161 @@ class Navbar extends Component {
classes={{ paper: this.props.classes.drawerWidth }} classes={{ paper: this.props.classes.drawerWidth }}
ModalProps={{ keepMounted: true }} // Better open performance on mobile. ModalProps={{ keepMounted: true }} // Better open performance on mobile.
> >
<div style={{ height: '50px', cursor: 'pointer', color: 'white', padding: '0 22px' }} className={this.props.classes.appBarColor} onClick={this.toggleDrawer}> <div
<div style={{ display: ' table-cell', verticalAlign: 'middle', height: 'inherit', width: '0.1%' }}> style={{
<Typography variant="h6" style={{ display: 'inline' }}> height: "50px",
cursor: "pointer",
color: "white",
padding: "0 22px",
}}
className={this.props.classes.appBarColor}
onClick={this.toggleDrawer}
>
<div
style={{
display: " table-cell",
verticalAlign: "middle",
height: "inherit",
width: "0.1%",
}}
>
<Typography variant="h6" style={{ display: "inline" }}>
{Blockly.Msg.navbar_menu} {Blockly.Msg.navbar_menu}
</Typography> </Typography>
<div style={{ float: 'right' }}> <div style={{ float: "right" }}>
<FontAwesomeIcon icon={faChevronLeft} /> <FontAwesomeIcon icon={faChevronLeft} />
</div> </div>
</div> </div>
</div> </div>
<List> <List>
{[{ text: Blockly.Msg.navbar_tutorials, icon: faChalkboardTeacher, link: "/tutorial" }, {[
{ text: Blockly.Msg.navbar_tutorialbuilder, icon: faTools, link: "/tutorial/builder", restriction: this.props.user && this.props.user.blocklyRole !== 'user' && this.props.isAuthenticated }, {
{ text: Blockly.Msg.navbar_gallery, icon: faLightbulb, link: "/gallery" }, text: Blockly.Msg.navbar_tutorials,
{ text: Blockly.Msg.navbar_projects, icon: faLayerGroup, link: "/project", restriction: this.props.isAuthenticated }].map((item, index) => { icon: faChalkboardTeacher,
if (item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0) { link: "/tutorial",
},
{
text: Blockly.Msg.navbar_tutorialbuilder,
icon: faTools,
link: "/tutorial/builder",
restriction:
this.props.user &&
this.props.user.blocklyRole !== "user" &&
this.props.isAuthenticated,
},
{
text: Blockly.Msg.navbar_gallery,
icon: faLightbulb,
link: "/gallery",
},
{
text: Blockly.Msg.navbar_projects,
icon: faLayerGroup,
link: "/project",
restriction: this.props.isAuthenticated,
},
].map((item, index) => {
if (
item.restriction ||
Object.keys(item).filter(
(attribute) => attribute === "restriction"
).length === 0
) {
return ( return (
<Link to={item.link} key={index} style={{ textDecoration: 'none', color: 'inherit' }}> <Link
to={item.link}
key={index}
style={{ textDecoration: "none", color: "inherit" }}
>
<ListItem button onClick={this.toggleDrawer}> <ListItem button onClick={this.toggleDrawer}>
<ListItemIcon><FontAwesomeIcon icon={item.icon} /></ListItemIcon> <ListItemIcon>
<FontAwesomeIcon icon={item.icon} />
</ListItemIcon>
<ListItemText primary={item.text} /> <ListItemText primary={item.text} />
</ListItem> </ListItem>
</Link> </Link>
); );
} else {
return null;
} }
else { })}
return(
null
)
}
}
)}
</List> </List>
<Divider classes={{ root: this.props.classes.appBarColor }} style={{ marginTop: 'auto' }} /> <Divider
classes={{ root: this.props.classes.appBarColor }}
style={{ marginTop: "auto" }}
/>
<List> <List>
{[{ text: Blockly.Msg.navbar_login, icon: faSignInAlt, link: '/user/login', restriction: !this.props.isAuthenticated }, {[
{ text: Blockly.Msg.navbar_account, icon: faUserCircle, link: '/user', restriction: this.props.isAuthenticated }, {
{ text: Blockly.Msg.navbar_mybadges, icon: faCertificate, link: '/user/badge', restriction: this.props.isAuthenticated }, text: Blockly.Msg.navbar_login,
{ text: Blockly.Msg.navbar_logout, icon: faSignOutAlt, function: this.props.logout, restriction: this.props.isAuthenticated }, icon: faSignInAlt,
{ text: 'FAQ', icon: faQuestionCircle, link: "/faq" }, link: "/user/login",
{ text: Blockly.Msg.navbar_settings, icon: faCog, link: "/settings" }].map((item, index) => { restriction: !this.props.isAuthenticated,
if (item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0) { },
{
text: Blockly.Msg.navbar_account,
icon: faUserCircle,
link: "/user",
restriction: this.props.isAuthenticated,
},
{
text: Blockly.Msg.navbar_logout,
icon: faSignOutAlt,
function: this.props.logout,
restriction: this.props.isAuthenticated,
},
{ text: "FAQ", icon: faQuestionCircle, link: "/faq" },
{
text: Blockly.Msg.navbar_settings,
icon: faCog,
link: "/settings",
},
].map((item, index) => {
if (
item.restriction ||
Object.keys(item).filter(
(attribute) => attribute === "restriction"
).length === 0
) {
return ( return (
<Link to={item.link} key={index} style={{ textDecoration: 'none', color: 'inherit' }}> <Link
<ListItem button onClick={item.function ? () => { item.function(); this.toggleDrawer(); } : this.toggleDrawer}> to={item.link}
<ListItemIcon><FontAwesomeIcon icon={item.icon} /></ListItemIcon> key={index}
style={{ textDecoration: "none", color: "inherit" }}
>
<ListItem
button
onClick={
item.function
? () => {
item.function();
this.toggleDrawer();
}
: this.toggleDrawer
}
>
<ListItemIcon>
<FontAwesomeIcon icon={item.icon} />
</ListItemIcon>
<ListItemText primary={item.text} /> <ListItemText primary={item.text} />
</ListItem> </ListItem>
</Link> </Link>
); );
} else {
return null;
} }
else { })}
return(
null
)
}
}
)}
</List> </List>
</Drawer> </Drawer>
{this.props.tutorialIsLoading || this.props.projectIsLoading ? {this.props.tutorialIsLoading || this.props.projectIsLoading ? (
<LinearProgress style={{ marginBottom: '30px', boxShadow: '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)' }} /> <LinearProgress
: null} style={{
marginBottom: "30px",
boxShadow:
"0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
}}
/>
) : null}
</div> </div>
); );
} }
@ -218,10 +349,10 @@ Navbar.propTypes = {
isAuthenticated: PropTypes.bool.isRequired, isAuthenticated: PropTypes.bool.isRequired,
user: PropTypes.object, user: PropTypes.object,
tutorial: PropTypes.object.isRequired, tutorial: PropTypes.object.isRequired,
activeStep: PropTypes.number.isRequired activeStep: PropTypes.number.isRequired,
}; };
const mapStateToProps = state => ({ const mapStateToProps = (state) => ({
tutorialIsLoading: state.tutorial.progress, tutorialIsLoading: state.tutorial.progress,
projectIsLoading: state.project.progress, projectIsLoading: state.project.progress,
isAuthenticated: state.auth.isAuthenticated, isAuthenticated: state.auth.isAuthenticated,
@ -230,4 +361,6 @@ const mapStateToProps = state => ({
activeStep: state.tutorial.activeStep, activeStep: state.tutorial.activeStep,
}); });
export default connect(mapStateToProps, { logout })(withStyles(styles, { withTheme: true })(withRouter(Navbar))); export default connect(mapStateToProps, { logout })(
withStyles(styles, { withTheme: true })(withRouter(Navbar))
);

56
src/components/Route/Routes.js
View File

@ -1,40 +1,38 @@
import React, { Component } from 'react'; import React, { Component } from "react";
import PropTypes from 'prop-types'; import PropTypes from "prop-types";
import { connect } from 'react-redux'; import { connect } from "react-redux";
import { visitPage } from '../../actions/generalActions'; import { visitPage } from "../../actions/generalActions";
import { Route, Switch, withRouter } from 'react-router-dom'; import { Route, Switch, withRouter } from "react-router-dom";
import PublicRoute from './PublicRoute'; import PublicRoute from "./PublicRoute";
import PrivateRoute from './PrivateRoute'; import PrivateRoute from "./PrivateRoute";
import PrivateRouteCreator from './PrivateRouteCreator'; import PrivateRouteCreator from "./PrivateRouteCreator";
import IsLoggedRoute from './IsLoggedRoute'; import IsLoggedRoute from "./IsLoggedRoute";
import Home from '../Home'; import Home from "../Home";
import Tutorial from '../Tutorial/Tutorial'; import Tutorial from "../Tutorial/Tutorial";
import TutorialHome from '../Tutorial/TutorialHome'; import TutorialHome from "../Tutorial/TutorialHome";
import Builder from '../Tutorial/Builder/Builder'; import Builder from "../Tutorial/Builder/Builder";
import NotFound from '../NotFound'; import NotFound from "../NotFound";
import ProjectHome from '../Project/ProjectHome'; import ProjectHome from "../Project/ProjectHome";
import Project from '../Project/Project'; import Project from "../Project/Project";
import Settings from '../Settings/Settings'; import Settings from "../Settings/Settings";
import Impressum from '../Impressum'; import Impressum from "../Impressum";
import Privacy from '../Privacy'; import Privacy from "../Privacy";
import Login from '../User/Login'; import Login from "../User/Login";
import Account from '../User/Account'; import Account from "../User/Account";
import MyBadges from '../User/MyBadges'; import News from "../News";
import News from '../News' import Faq from "../Faq";
import Faq from '../Faq'
class Routes extends Component { class Routes extends Component {
componentDidUpdate() { componentDidUpdate() {
this.props.visitPage(); this.props.visitPage();
} }
render() { render() {
return ( return (
<div style={{ margin: '0 22px' }}> <div style={{ margin: "0 22px" }}>
<Switch> <Switch>
<PublicRoute path="/" exact> <PublicRoute path="/" exact>
<Home /> <Home />
@ -74,9 +72,6 @@ class Routes extends Component {
<PrivateRoute path="/user" exact> <PrivateRoute path="/user" exact>
<Account /> <Account />
</PrivateRoute> </PrivateRoute>
<PrivateRoute path="/user/badge" exact>
<MyBadges />
</PrivateRoute>
{/* settings */} {/* settings */}
<PublicRoute path="/settings" exact> <PublicRoute path="/settings" exact>
<Settings /> <Settings />
@ -98,7 +93,6 @@ class Routes extends Component {
<PublicRoute> <PublicRoute>
<NotFound /> <NotFound />
</PublicRoute> </PublicRoute>
</Switch> </Switch>
</div> </div>
); );
@ -106,7 +100,7 @@ class Routes extends Component {
} }
Home.propTypes = { Home.propTypes = {
visitPage: PropTypes.func.isRequired visitPage: PropTypes.func.isRequired,
}; };
export default connect(null, { visitPage })(withRouter(Routes)); export default connect(null, { visitPage })(withRouter(Routes));

119
src/components/Tutorial/Badge.js
View File

@ -1,119 +0,0 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { assigneBadge } from '../../actions/tutorialActions';
import Dialog from '../Dialog';
import { Link } from 'react-router-dom';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import Avatar from '@material-ui/core/Avatar';
import * as Blockly from 'blockly';
const styles = (theme) => ({
link: {
color: theme.palette.primary.main,
textDecoration: 'none',
'&:hover': {
color: theme.palette.primary.main,
textDecoration: 'underline'
}
}
});
class Badge extends Component {
state = {
open: false,
title: '',
content: ''
};
componentDidUpdate(props) {
if (this.props.message.id === 'TUTORIAL_CHECK_SUCCESS') {
if (this.props.tutorial.badge) {
// is connected to MyBadges?
if (this.props.isAuthenticated && this.props.user && this.props.user.badge) {
if (this.props.user.badges && !this.props.user.badges.includes(this.props.tutorial.badge)) {
if (this.isSuccess()) {
this.props.assigneBadge(this.props.tutorial.badge);
}
}
}
}
}
if (props.message !== this.props.message) {
if (this.props.message.id === 'ASSIGNE_BADGE_SUCCESS') {
this.setState({ title: `Badge: ${this.props.message.msg.name}`, content: `${Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_01} ${this.props.message.msg.name} ${Blockly.Msg.badges_ASSIGNE_BADGE_SUCCESS_02}`, open: true });
}
}
}
isSuccess = () => {
var tutorialId = this.props.tutorial._id;
var status = this.props.status.filter(status => status._id === tutorialId)[0];
var tasks = status.tasks;
var success = tasks.filter(task => task.type === 'success').length / tasks.length;
if (success === 1) {
return true;
}
return false;
}
toggleDialog = () => {
this.setState({ open: !this.state, title: '', content: '' });
}
render() {
return (
<Dialog
style={{ zIndex: 99999999 }}
open={this.state.open}
title={this.state.title}
content={this.state.content}
onClose={() => { this.toggleDialog(); }}
onClick={() => { this.toggleDialog(); }}
button={Blockly.Msg.button_close}
>
<div style={{ marginTop: '10px' }}>
<Paper style={{ textAlign: 'center' }}>
{this.props.message.msg.image && this.props.message.msg.image.path ?
<Avatar src={`${process.env.REACT_APP_MYBADGES}/media/${this.props.message.msg.image.path}`} style={{ width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto' }} />
: <Avatar style={{ width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto' }}></Avatar>}
<Typography variant='h6' style={{ display: 'flex', cursor: 'default', paddingBottom: '6px' }}>
<div style={{ flexGrow: 1, marginLeft: '10px', marginRight: '10px' }}>{this.props.message.msg.name}</div>
</Typography>
</Paper>
<Typography style={{ marginTop: '10px' }}>
{Blockly.Msg.badges_explaination}<Link to={'/user/badge'} className={this.props.classes.link}>{Blockly.Msg.labels_here}</Link>.
</Typography>
</div>
</Dialog>
);
};
}
Badge.propTypes = {
assigneBadge: PropTypes.func.isRequired,
status: PropTypes.array.isRequired,
change: PropTypes.number.isRequired,
tutorial: PropTypes.object.isRequired,
user: PropTypes.object,
isAuthenticated: PropTypes.bool.isRequired,
message: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
change: state.tutorial.change,
status: state.tutorial.status,
tutorial: state.tutorial.tutorials[0],
user: state.auth.user,
isAuthenticated: state.auth.isAuthenticated,
message: state.message
});
export default connect(mapStateToProps, { assigneBadge })(withStyles(styles, { withTheme: true })(Badge));

189
src/components/Tutorial/Builder/Badge.js
View File

@ -1,189 +0,0 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { tutorialBadge, deleteProperty, setError, deleteError } from '../../../actions/tutorialBuilderActions';
import axios from 'axios';
import { withStyles } from '@material-ui/core/styles';
import Switch from '@material-ui/core/Switch';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormHelperText from '@material-ui/core/FormHelperText';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import IconButton from '@material-ui/core/IconButton';
import OutlinedInput from '@material-ui/core/OutlinedInput';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTimes } from "@fortawesome/free-solid-svg-icons";
const styles = (theme) => ({
errorColor: {
color: `${theme.palette.error.dark} !important`
},
errorColorShrink: {
color: `rgba(0, 0, 0, 0.54) !important`
},
errorBorder: {
borderColor: `${theme.palette.error.dark} !important`
}
});
class Badge extends Component {
constructor(props){
super(props);
this.state={
checked: props.badge ? true : false,
badgeName: '',
filteredBadges: [],
badges: []
};
}
componentDidMount(){
this.getBadges();
}
componentDidUpdate(props){
if(props.badge !== this.props.badge){
this.setState({ checked: this.props.badge !== undefined ? true : false, badgeName: this.props.badge ? this.state.badges.filter(badge => badge._id === this.props.badge)[0].name : '' });
}
}
getBadges = () => {
axios.get(`${process.env.REACT_APP_MYBADGES_API}/badge`)
.then(res => {
this.setState({badges: res.data.badges, badgeName: this.props.badge ? res.data.badges.filter(badge => badge._id === this.props.badge)[0].name : '' });
})
.catch(err => {
});
};
deleteBadge = () => {
this.setState({ filteredBadges: [], badgeName: '' });
this.props.tutorialBadge(null);
this.props.setError(this.props.index, 'badge');
};
setBadge = (badge) => {
this.setState({ filteredBadges: [] });
this.props.tutorialBadge(badge._id);
this.props.deleteError(this.props.index, 'badge');
};
onChange = e => {
this.setState({ badgeName: e.target.value });
};
onChangeBadge = e => {
if(e.target.value && this.props.badge === null){
var filteredBadges = this.state.badges.filter(badge => new RegExp(e.target.value, 'i').test(badge.name));
if(filteredBadges.length < 1){
filteredBadges = ['Keine Übereinstimmung gefunden.'];
}
this.setState({filteredBadges: filteredBadges});
}
else {
this.setState({filteredBadges: []});
}
};
onChangeSwitch = (value) => {
var oldValue = this.state.checked;
this.setState({checked: value});
if(oldValue !== value){
if(value){
this.props.setError(this.props.index, 'badge');
this.props.tutorialBadge(null);
} else {
this.props.deleteError(this.props.index, 'badge');
this.props.tutorialBadge(undefined);
}
}
}
render() {
return (
<div style={{marginBottom: '10px', padding: '18.5px 14px', borderRadius: '25px', border: '1px solid lightgrey', width: 'calc(100% - 28px)'}}>
<FormControlLabel
labelPlacement="end"
label={"Badge"}
control={
<Switch
checked={this.state.checked}
onChange={(e) => this.onChangeSwitch(e.target.checked)}
color="primary"
/>
}
/>
{this.state.checked ?
<div style={{marginTop: '10px'}}>
<FormControl variant="outlined" fullWidth>
<InputLabel
htmlFor={'badge'}
classes={{shrink: this.props.error ? this.props.classes.errorColorShrink : null}}
>
{'Badge'}
</InputLabel>
<OutlinedInput
style={{borderRadius: '25px'}}
classes={{notchedOutline: this.props.error ? this.props.classes.errorBorder : null}}
error={this.props.error}
value={this.state.badgeName}
label={'Badge'}
id={'badge'}
disabled={this.props.badge}
onChange={(e) => this.onChange(e)}
onInput={(e) => this.onChangeBadge(e)}
fullWidth={true}
endAdornment={
<IconButton
onClick={this.deleteBadge}
edge="end"
>
<FontAwesomeIcon size='xs' icon={faTimes} />
</IconButton>
}
/>
{this.props.error && this.state.filteredBadges.length === 0 ?
<FormHelperText className={this.props.classes.errorColor}>Wähle ein Badge aus.</FormHelperText>
: null}
</FormControl>
<List style={{paddingTop: 0}}>
{this.state.filteredBadges.map((badge, i) => (
badge === 'Keine Übereinstimmung gefunden.' ?
<ListItem button key={i} onClick={this.deleteBadge} style={{border: '1px solid rgba(0, 0, 0, 0.23)', borderRadius: '25px'}}>
<ListItemText>{badge}</ListItemText>
</ListItem>
:
<ListItem button key={i} onClick={() => {this.setBadge(badge)}} style={{border: '1px solid rgba(0, 0, 0, 0.23)', borderRadius: '25px'}}>
<ListItemText>{`${badge.name}`}</ListItemText>
</ListItem>
))}
</List>
</div>
: null}
</div>
);
};
}
Badge.propTypes = {
tutorialBadge: PropTypes.func.isRequired,
deleteProperty: PropTypes.func.isRequired,
setError: PropTypes.func.isRequired,
deleteError: PropTypes.func.isRequired,
badge: PropTypes.string.isRequired
};
const mapStateToProps = state => ({
badge: state.builder.badge,
change: state.builder.change
});
export default connect(mapStateToProps, { tutorialBadge, deleteProperty, setError, deleteError })(withStyles(styles, {withTheme: true})(Badge));

574
src/components/Tutorial/Builder/Builder.js
View File

@ -1,67 +1,75 @@
import React, { Component } from 'react'; import React, { Component } from "react";
import PropTypes from 'prop-types'; import PropTypes from "prop-types";
import { connect } from 'react-redux'; import { connect } from "react-redux";
import { checkError, readJSON, jsonString, progress, tutorialId, resetTutorial as resetTutorialBuilder} from '../../../actions/tutorialBuilderActions'; import {
import { getTutorials, resetTutorial, deleteTutorial, tutorialProgress } from '../../../actions/tutorialActions'; checkError,
import { clearMessages } from '../../../actions/messageActions'; readJSON,
jsonString,
progress,
tutorialId,
resetTutorial as resetTutorialBuilder,
} from "../../../actions/tutorialBuilderActions";
import {
getTutorials,
resetTutorial,
deleteTutorial,
tutorialProgress,
} from "../../../actions/tutorialActions";
import { clearMessages } from "../../../actions/messageActions";
import axios from 'axios'; import axios from "axios";
import { withRouter } from 'react-router-dom'; import { withRouter } from "react-router-dom";
import Breadcrumbs from "../../Breadcrumbs";
import Textfield from "./Textfield";
import Step from "./Step";
import Dialog from "../../Dialog";
import Snackbar from "../../Snackbar";
import Breadcrumbs from '../../Breadcrumbs'; import { withStyles } from "@material-ui/core/styles";
import Badge from './Badge'; import Button from "@material-ui/core/Button";
import Textfield from './Textfield'; import Backdrop from "@material-ui/core/Backdrop";
import Step from './Step'; import CircularProgress from "@material-ui/core/CircularProgress";
import Dialog from '../../Dialog'; import Divider from "@material-ui/core/Divider";
import Snackbar from '../../Snackbar'; import FormHelperText from "@material-ui/core/FormHelperText";
import Radio from "@material-ui/core/Radio";
import { withStyles } from '@material-ui/core/styles'; import RadioGroup from "@material-ui/core/RadioGroup";
import Button from '@material-ui/core/Button'; import FormControlLabel from "@material-ui/core/FormControlLabel";
import Backdrop from '@material-ui/core/Backdrop'; import InputLabel from "@material-ui/core/InputLabel";
import CircularProgress from '@material-ui/core/CircularProgress'; import MenuItem from "@material-ui/core/MenuItem";
import Divider from '@material-ui/core/Divider'; import FormControl from "@material-ui/core/FormControl";
import FormHelperText from '@material-ui/core/FormHelperText'; import Select from "@material-ui/core/Select";
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
const styles = (theme) => ({ const styles = (theme) => ({
backdrop: { backdrop: {
zIndex: theme.zIndex.drawer + 1, zIndex: theme.zIndex.drawer + 1,
color: '#fff', color: "#fff",
}, },
errorColor: { errorColor: {
color: theme.palette.error.dark color: theme.palette.error.dark,
}, },
errorButton: { errorButton: {
marginTop: '5px', marginTop: "5px",
height: '40px', height: "40px",
backgroundColor: theme.palette.error.dark, backgroundColor: theme.palette.error.dark,
'&:hover': { "&:hover": {
backgroundColor: theme.palette.error.dark backgroundColor: theme.palette.error.dark,
} },
} },
}); });
class Builder extends Component { class Builder extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
tutorial: 'new', tutorial: "new",
open: false, open: false,
title: '', title: "",
content: '', content: "",
string: false, string: false,
snackbar: false, snackbar: false,
key: '', key: "",
message: '' message: "",
}; };
this.inputRef = React.createRef(); this.inputRef = React.createRef();
} }
@ -70,27 +78,38 @@ class Builder extends Component {
this.props.tutorialProgress(); this.props.tutorialProgress();
// retrieve tutorials only if a potential user is loaded - authentication // retrieve tutorials only if a potential user is loaded - authentication
// is finished (success or failed) // is finished (success or failed)
if(!this.props.authProgress){ if (!this.props.authProgress) {
this.props.getTutorials(); this.props.getTutorials();
} }
} }
componentDidUpdate(props, state) { componentDidUpdate(props, state) {
if(props.authProgress !== this.props.authProgress && !this.props.authProgress){ if (
props.authProgress !== this.props.authProgress &&
!this.props.authProgress
) {
// authentication is completed // authentication is completed
this.props.getTutorials(); this.props.getTutorials();
} }
if(props.message !== this.props.message){ if (props.message !== this.props.message) {
if(this.props.message.id === 'GET_TUTORIALS_FAIL'){ if (this.props.message.id === "GET_TUTORIALS_FAIL") {
// alert(this.props.message.msg); // alert(this.props.message.msg);
this.props.clearMessages(); this.props.clearMessages();
} } else if (this.props.message.id === "TUTORIAL_DELETE_SUCCESS") {
else if (this.props.message.id === 'TUTORIAL_DELETE_SUCCESS') { this.onChange("new");
this.onChange('new'); this.setState({
this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial wurde erfolgreich gelöscht.`, type: 'success' }); snackbar: true,
} key: Date.now(),
else if (this.props.message.id === 'TUTORIAL_DELETE_FAIL') { message: `Das Tutorial wurde erfolgreich gelöscht.`,
this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Löschen des Tutorials. Versuche es noch einmal.`, type: 'error' }); type: "success",
});
} else if (this.props.message.id === "TUTORIAL_DELETE_FAIL") {
this.setState({
snackbar: true,
key: Date.now(),
message: `Fehler beim Löschen des Tutorials. Versuche es noch einmal.`,
type: "error",
});
} }
} }
} }
@ -105,22 +124,32 @@ class Builder extends Component {
uploadJsonFile = (jsonFile) => { uploadJsonFile = (jsonFile) => {
this.props.progress(true); this.props.progress(true);
if (jsonFile.type !== 'application/json') { if (jsonFile.type !== "application/json") {
this.props.progress(false); this.props.progress(false);
this.setState({ open: true, string: false, title: 'Unzulässiger Dateityp', content: 'Die übergebene Datei entspricht nicht dem geforderten Format. Es sind nur JSON-Dateien zulässig.' }); this.setState({
} open: true,
else { string: false,
title: "Unzulässiger Dateityp",
content:
"Die übergebene Datei entspricht nicht dem geforderten Format. Es sind nur JSON-Dateien zulässig.",
});
} else {
var reader = new FileReader(); var reader = new FileReader();
reader.readAsText(jsonFile); reader.readAsText(jsonFile);
reader.onloadend = () => { reader.onloadend = () => {
this.readJson(reader.result, true); this.readJson(reader.result, true);
}; };
} }
} };
uploadJsonString = () => { uploadJsonString = () => {
this.setState({ open: true, string: true, title: 'JSON-String einfügen', content: '' }); this.setState({
} open: true,
string: true,
title: "JSON-String einfügen",
content: "",
});
};
readJson = (jsonString, isFile) => { readJson = (jsonString, isFile) => {
try { try {
@ -129,173 +158,255 @@ class Builder extends Component {
result.steps = [{}]; result.steps = [{}];
} }
this.props.readJSON(result); this.props.readJSON(result);
this.setState({ snackbar: true, key: Date.now(), message: `${isFile ? 'Die übergebene JSON-Datei' : 'Der übergebene JSON-String'} wurde erfolgreich übernommen.`, type: 'success' }); this.setState({
snackbar: true,
key: Date.now(),
message: `${
isFile ? "Die übergebene JSON-Datei" : "Der übergebene JSON-String"
} wurde erfolgreich übernommen.`,
type: "success",
});
} catch (err) { } catch (err) {
this.props.progress(false); this.props.progress(false);
this.props.jsonString(''); this.props.jsonString("");
this.setState({ open: true, string: false, title: 'Ungültiges JSON-Format', content: `${isFile ? 'Die übergebene Datei' : 'Der übergebene String'} enthält nicht valides JSON. Bitte überprüfe ${isFile ? 'die JSON-Datei' : 'den JSON-String'} und versuche es erneut.` }); this.setState({
open: true,
string: false,
title: "Ungültiges JSON-Format",
content: `${
isFile ? "Die übergebene Datei" : "Der übergebene String"
} enthält nicht valides JSON. Bitte überprüfe ${
isFile ? "die JSON-Datei" : "den JSON-String"
} und versuche es erneut.`,
});
} }
} };
checkSteps = (steps) => { checkSteps = (steps) => {
if (!(steps && steps.length > 0)) { if (!(steps && steps.length > 0)) {
return false; return false;
} }
return true; return true;
} };
toggle = () => { toggle = () => {
this.setState({ open: !this.state }); this.setState({ open: !this.state });
} };
onChange = (value) => { onChange = (value) => {
this.props.resetTutorialBuilder(); this.props.resetTutorialBuilder();
this.props.tutorialId(''); this.props.tutorialId("");
this.setState({ tutorial: value }); this.setState({ tutorial: value });
} };
onChangeId = (value) => { onChangeId = (value) => {
this.props.tutorialId(value); this.props.tutorialId(value);
if (this.state.tutorial === 'change') { if (this.state.tutorial === "change") {
this.props.progress(true); this.props.progress(true);
var tutorial = this.props.tutorials.filter(tutorial => tutorial._id === value)[0]; var tutorial = this.props.tutorials.filter(
(tutorial) => tutorial._id === value
)[0];
this.props.readJSON(tutorial); this.props.readJSON(tutorial);
this.setState({ snackbar: true, key: Date.now(), message: `Das ausgewählte Tutorial "${tutorial.title}" wurde erfolgreich übernommen.`, type: 'success' }); this.setState({
snackbar: true,
key: Date.now(),
message: `Das ausgewählte Tutorial "${tutorial.title}" wurde erfolgreich übernommen.`,
type: "success",
});
} }
} };
resetFull = () => { resetFull = () => {
this.props.resetTutorialBuilder(); this.props.resetTutorialBuilder();
this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial wurde erfolgreich zurückgesetzt.`, type: 'success' }); this.setState({
snackbar: true,
key: Date.now(),
message: `Das Tutorial wurde erfolgreich zurückgesetzt.`,
type: "success",
});
window.scrollTo(0, 0); window.scrollTo(0, 0);
} };
resetTutorial = () => { resetTutorial = () => {
var tutorial = this.props.tutorials.filter(tutorial => tutorial._id === this.props.id)[0]; var tutorial = this.props.tutorials.filter(
(tutorial) => tutorial._id === this.props.id
)[0];
this.props.readJSON(tutorial); this.props.readJSON(tutorial);
this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial ${tutorial.title} wurde erfolgreich auf den ursprünglichen Stand zurückgesetzt.`, type: 'success' }); this.setState({
snackbar: true,
key: Date.now(),
message: `Das Tutorial ${tutorial.title} wurde erfolgreich auf den ursprünglichen Stand zurückgesetzt.`,
type: "success",
});
window.scrollTo(0, 0); window.scrollTo(0, 0);
} };
submit = () => { submit = () => {
var isError = this.props.checkError(); var isError = this.props.checkError();
if (isError) { if (isError) {
this.setState({ snackbar: true, key: Date.now(), message: `Die Angaben für das Tutorial sind nicht vollständig.`, type: 'error' }); this.setState({
snackbar: true,
key: Date.now(),
message: `Die Angaben für das Tutorial sind nicht vollständig.`,
type: "error",
});
window.scrollTo(0, 0); window.scrollTo(0, 0);
return false; return false;
} } else {
else {
// export steps without attribute 'url' // export steps without attribute 'url'
var steps = this.props.steps; var steps = this.props.steps;
var newTutorial = new FormData(); var newTutorial = new FormData();
newTutorial.append('title', this.props.title); newTutorial.append("title", this.props.title);
if(this.props.badge){
newTutorial.append('badge', this.props.badge);
}
steps.forEach((step, i) => { steps.forEach((step, i) => {
if(step._id){ if (step._id) {
newTutorial.append(`steps[${i}][_id]`, step._id); newTutorial.append(`steps[${i}][_id]`, step._id);
} }
newTutorial.append(`steps[${i}][type]`, step.type); newTutorial.append(`steps[${i}][type]`, step.type);
newTutorial.append(`steps[${i}][headline]`, step.headline); newTutorial.append(`steps[${i}][headline]`, step.headline);
newTutorial.append(`steps[${i}][text]`, step.text); newTutorial.append(`steps[${i}][text]`, step.text);
if (i === 0 && step.type === 'instruction') { if (i === 0 && step.type === "instruction") {
if (step.requirements) { // optional if (step.requirements) {
// optional
step.requirements.forEach((requirement, j) => { step.requirements.forEach((requirement, j) => {
newTutorial.append(`steps[${i}][requirements][${j}]`, requirement); newTutorial.append(
`steps[${i}][requirements][${j}]`,
requirement
);
}); });
} }
step.hardware.forEach((hardware, j) => { step.hardware.forEach((hardware, j) => {
newTutorial.append(`steps[${i}][hardware][${j}]`, hardware); newTutorial.append(`steps[${i}][hardware][${j}]`, hardware);
}); });
} }
if (step.xml) { // optional if (step.xml) {
// optional
newTutorial.append(`steps[${i}][xml]`, step.xml); newTutorial.append(`steps[${i}][xml]`, step.xml);
} }
if (step.media) { // optional if (step.media) {
// optional
if (step.media.youtube) { if (step.media.youtube) {
newTutorial.append(`steps[${i}][media][youtube]`, step.media.youtube); newTutorial.append(
`steps[${i}][media][youtube]`,
step.media.youtube
);
} }
if (step.media.picture) { if (step.media.picture) {
newTutorial.append(`steps[${i}][media][picture]`, step.media.picture); newTutorial.append(
`steps[${i}][media][picture]`,
step.media.picture
);
} }
} }
}); });
return newTutorial; return newTutorial;
} }
} };
submitNew = () => { submitNew = () => {
var newTutorial = this.submit(); var newTutorial = this.submit();
if(newTutorial){ if (newTutorial) {
const config = { const config = {
success: res => { success: (res) => {
var tutorial = res.data.tutorial; var tutorial = res.data.tutorial;
this.props.history.push(`/tutorial/${tutorial._id}`); this.props.history.push(`/tutorial/${tutorial._id}`);
}, },
error: err => { error: (err) => {
this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Erstellen des Tutorials. Versuche es noch einmal.`, type: 'error' }); this.setState({
snackbar: true,
key: Date.now(),
message: `Fehler beim Erstellen des Tutorials. Versuche es noch einmal.`,
type: "error",
});
window.scrollTo(0, 0); window.scrollTo(0, 0);
} },
}; };
axios.post(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/`, newTutorial, config) axios
.then(res => { .post(
`${process.env.REACT_APP_BLOCKLY_API}/tutorial/`,
newTutorial,
config
)
.then((res) => {
res.config.success(res); res.config.success(res);
}) })
.catch(err => { .catch((err) => {
err.config.error(err); err.config.error(err);
}); });
} }
} };
submitUpdate = () => { submitUpdate = () => {
var updatedTutorial = this.submit(); var updatedTutorial = this.submit();
if(updatedTutorial){ if (updatedTutorial) {
const config = { const config = {
success: res => { success: (res) => {
var tutorial = res.data.tutorial; var tutorial = res.data.tutorial;
this.props.history.push(`/tutorial/${tutorial._id}`); this.props.history.push(`/tutorial/${tutorial._id}`);
}, },
error: err => { error: (err) => {
this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Ändern des Tutorials. Versuche es noch einmal.`, type: 'error' }); this.setState({
snackbar: true,
key: Date.now(),
message: `Fehler beim Ändern des Tutorials. Versuche es noch einmal.`,
type: "error",
});
window.scrollTo(0, 0); window.scrollTo(0, 0);
} },
}; };
axios.put(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${this.props.id}`, updatedTutorial, config) axios
.then(res => { .put(
`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${this.props.id}`,
updatedTutorial,
config
)
.then((res) => {
res.config.success(res); res.config.success(res);
}) })
.catch(err => { .catch((err) => {
err.config.error(err); err.config.error(err);
}); });
} }
} };
render() { render() {
var filteredTutorials = this.props.tutorials.filter(tutorial => tutorial.creator === this.props.user.email); var filteredTutorials = this.props.tutorials.filter(
(tutorial) => tutorial.creator === this.props.user.email
);
return ( return (
<div> <div>
<Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }, { link: '/tutorial/builder', title: 'Builder' }]} /> <Breadcrumbs
content={[
{ link: "/tutorial", title: "Tutorial" },
{ link: "/tutorial/builder", title: "Builder" },
]}
/>
<h1>Tutorial-Builder</h1> <h1>Tutorial-Builder</h1>
<RadioGroup row value={this.state.tutorial} onChange={(e) => this.onChange(e.target.value)}> <RadioGroup
<FormControlLabel style={{ color: 'black' }} row
value={this.state.tutorial}
onChange={(e) => this.onChange(e.target.value)}
>
<FormControlLabel
style={{ color: "black" }}
value="new" value="new"
control={<Radio color="primary" />} control={<Radio color="primary" />}
label="neues Tutorial erstellen" label="neues Tutorial erstellen"
labelPlacement="end" labelPlacement="end"
/> />
{filteredTutorials.length > 0 ? {filteredTutorials.length > 0 ? (
<div> <div>
<FormControlLabel style={{ color: 'black' }} <FormControlLabel
style={{ color: "black" }}
disabled={this.props.index === 0} disabled={this.props.index === 0}
value="change" value="change"
control={<Radio color="primary" />} control={<Radio color="primary" />}
label="bestehendes Tutorial ändern" label="bestehendes Tutorial ändern"
labelPlacement="end" labelPlacement="end"
/> />
<FormControlLabel style={{ color: 'black' }} <FormControlLabel
style={{ color: "black" }}
disabled={this.props.index === 0} disabled={this.props.index === 0}
value="delete" value="delete"
control={<Radio color="primary" />} control={<Radio color="primary" />}
@ -303,110 +414,196 @@ class Builder extends Component {
labelPlacement="end" labelPlacement="end"
/> />
</div> </div>
: null} ) : null}
</RadioGroup> </RadioGroup>
<Divider variant='fullWidth' style={{ margin: '10px 0 15px 0' }} /> <Divider variant="fullWidth" style={{ margin: "10px 0 15px 0" }} />
{this.state.tutorial === 'new' ? {this.state.tutorial === "new" ? (
/*upload JSON*/ /*upload JSON*/
<div ref={this.inputRef}> <div ref={this.inputRef}>
<input <input
style={{ display: 'none' }} style={{ display: "none" }}
accept="application/json" accept="application/json"
onChange={(e) => { this.uploadJsonFile(e.target.files[0]) }} onChange={(e) => {
this.uploadJsonFile(e.target.files[0]);
}}
id="open-json" id="open-json"
type="file" type="file"
/> />
<label htmlFor="open-json"> <label htmlFor="open-json">
<Button component="span" style={{ marginRight: '10px', marginBottom: '10px' }} variant='contained' color='primary'>Datei laden</Button> <Button
component="span"
style={{ marginRight: "10px", marginBottom: "10px" }}
variant="contained"
color="primary"
>
Datei laden
</Button>
</label> </label>
<Button style={{ marginRight: '10px', marginBottom: '10px' }} variant='contained' color='primary' onClick={() => this.uploadJsonString()}>String laden</Button> <Button
style={{ marginRight: "10px", marginBottom: "10px" }}
variant="contained"
color="primary"
onClick={() => this.uploadJsonString()}
>
String laden
</Button>
</div> </div>
: <FormControl variant="outlined" style={{ width: '100%' }}> ) : (
<FormControl variant="outlined" style={{ width: "100%" }}>
<InputLabel id="select-outlined-label">Tutorial</InputLabel> <InputLabel id="select-outlined-label">Tutorial</InputLabel>
<Select <Select
color='primary' color="primary"
labelId="select-outlined-label" labelId="select-outlined-label"
value={this.props.id} value={this.props.id}
onChange={(e) => this.onChangeId(e.target.value)} onChange={(e) => this.onChangeId(e.target.value)}
label="Tutorial" label="Tutorial"
> >
{filteredTutorials.map(tutorial => {filteredTutorials.map((tutorial) => (
<MenuItem value={tutorial._id}>{tutorial.title}</MenuItem> <MenuItem value={tutorial._id}>{tutorial.title}</MenuItem>
)} ))}
</Select> </Select>
</FormControl> </FormControl>
} )}
<Divider variant='fullWidth' style={{ margin: '10px 0 15px 0' }} /> <Divider variant="fullWidth" style={{ margin: "10px 0 15px 0" }} />
{this.state.tutorial === 'new' || (this.state.tutorial === 'change' && this.props.id !== '') ? {this.state.tutorial === "new" ||
/*Tutorial-Builder-Form*/ (this.state.tutorial === "change" && this.props.id !== "") ? (
<div> /*Tutorial-Builder-Form*/
{this.props.error.type ? <div>
<FormHelperText style={{ lineHeight: 'initial' }} className={this.props.classes.errorColor}>{`Ein Tutorial muss mindestens jeweils eine Instruktion und eine Aufgabe enthalten.`}</FormHelperText> {this.props.error.type ? (
: null} <FormHelperText
{/* <Id error={this.props.error.id} value={this.props.id} /> */} style={{ lineHeight: "initial" }}
<Textfield value={this.props.title} property={'title'} label={'Titel'} error={this.props.error.title} /> className={this.props.classes.errorColor}
<Badge error={this.props.error.badge}/> >{`Ein Tutorial muss mindestens jeweils eine Instruktion und eine Aufgabe enthalten.`}</FormHelperText>
) : null}
{/* <Id error={this.props.error.id} value={this.props.id} /> */}
<Textfield
value={this.props.title}
property={"title"}
label={"Titel"}
error={this.props.error.title}
/>
{this.props.steps.map((step, i) => {this.props.steps.map((step, i) => (
<Step step={step} index={i} key={i} /> <Step step={step} index={i} key={i} />
)} ))}
{/*submit or reset*/} {/*submit or reset*/}
{this.state.tutorial !== 'delete' ? {this.state.tutorial !== "delete" ? (
<div> <div>
<Divider variant='fullWidth' style={{ margin: '30px 0 10px 0' }} /> <Divider
{this.state.tutorial === 'new' ? variant="fullWidth"
<div> style={{ margin: "30px 0 10px 0" }}
<Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitNew()}>Tutorial erstellen</Button> />
<Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetFull()}>Zurücksetzen</Button> {this.state.tutorial === "new" ? (
</div> <div>
: <div> <Button
<Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitUpdate()}>Tutorial ändern</Button> style={{ marginRight: "10px", marginTop: "10px" }}
<Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetTutorial()}>Zurücksetzen</Button> variant="contained"
</div> color="primary"
} onClick={() => this.submitNew()}
</div> >
: null} Tutorial erstellen
</Button>
<Button
style={{ marginTop: "10px" }}
variant="contained"
onClick={() => this.resetFull()}
>
Zurücksetzen
</Button>
</div>
) : (
<div>
<Button
style={{ marginRight: "10px", marginTop: "10px" }}
variant="contained"
color="primary"
onClick={() => this.submitUpdate()}
>
Tutorial ändern
</Button>
<Button
style={{ marginTop: "10px" }}
variant="contained"
onClick={() => this.resetTutorial()}
>
Zurücksetzen
</Button>
</div>
)}
</div>
) : null}
<Backdrop className={this.props.classes.backdrop} open={this.props.isProgress}> <Backdrop
className={this.props.classes.backdrop}
open={this.props.isProgress}
>
<CircularProgress color="inherit" /> <CircularProgress color="inherit" />
</Backdrop> </Backdrop>
</div> </div>
: null} ) : null}
{this.state.tutorial === 'delete' && this.props.id !== '' ? {this.state.tutorial === "delete" && this.props.id !== "" ? (
<Button <Button
className={this.props.classes.errorButton} className={this.props.classes.errorButton}
variant='contained' variant="contained"
color='primary' color="primary"
onClick={() => this.props.deleteTutorial()}>Tutorial löschen</Button> onClick={() => this.props.deleteTutorial()}
: null} >
Tutorial löschen
</Button>
) : null}
<Dialog <Dialog
open={this.state.open} open={this.state.open}
maxWidth={this.state.string ? 'md' : 'sm'} maxWidth={this.state.string ? "md" : "sm"}
fullWidth={this.state.string} fullWidth={this.state.string}
title={this.state.title} title={this.state.title}
content={this.state.content} content={this.state.content}
onClose={this.toggle} onClose={this.toggle}
onClick={this.toggle} onClick={this.toggle}
button={'Schließen'} button={"Schließen"}
actions={ actions={
this.state.string ? this.state.string ? (
<div> <div>
<Button disabled={this.props.error.json || this.props.json === ''} variant='contained' onClick={() => { this.toggle(); this.props.progress(true); this.readJson(this.props.json, false); }} color="primary">Bestätigen</Button> <Button
<Button onClick={() => { this.toggle(); this.props.jsonString(''); }} color="primary">Abbrechen</Button> disabled={this.props.error.json || this.props.json === ""}
variant="contained"
onClick={() => {
this.toggle();
this.props.progress(true);
this.readJson(this.props.json, false);
}}
color="primary"
>
Bestätigen
</Button>
<Button
onClick={() => {
this.toggle();
this.props.jsonString("");
}}
color="primary"
>
Abbrechen
</Button>
</div> </div>
: null ) : null
} }
> >
{this.state.string ? {this.state.string ? (
<Textfield value={this.props.json} property={'json'} label={'JSON'} multiline error={this.props.error.json} /> <Textfield
: null} value={this.props.json}
property={"json"}
label={"JSON"}
multiline
error={this.props.error.json}
/>
) : null}
</Dialog> </Dialog>
<Snackbar <Snackbar
@ -415,10 +612,9 @@ class Builder extends Component {
type={this.state.type} type={this.state.type}
key={this.state.key} key={this.state.key}
/> />
</div> </div>
); );
}; }
} }
Builder.propTypes = { Builder.propTypes = {
@ -434,7 +630,6 @@ Builder.propTypes = {
resetTutorialBuilder: PropTypes.func.isRequired, resetTutorialBuilder: PropTypes.func.isRequired,
tutorialProgress: PropTypes.func.isRequired, tutorialProgress: PropTypes.func.isRequired,
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
badge: PropTypes.string.isRequired,
id: PropTypes.string.isRequired, id: PropTypes.string.isRequired,
steps: PropTypes.array.isRequired, steps: PropTypes.array.isRequired,
change: PropTypes.number.isRequired, change: PropTypes.number.isRequired,
@ -444,12 +639,11 @@ Builder.propTypes = {
tutorials: PropTypes.array.isRequired, tutorials: PropTypes.array.isRequired,
message: PropTypes.object.isRequired, message: PropTypes.object.isRequired,
user: PropTypes.object.isRequired, user: PropTypes.object.isRequired,
authProgress: PropTypes.bool.isRequired authProgress: PropTypes.bool.isRequired,
}; };
const mapStateToProps = state => ({ const mapStateToProps = (state) => ({
title: state.builder.title, title: state.builder.title,
badge: state.builder.badge,
id: state.builder.id, id: state.builder.id,
steps: state.builder.steps, steps: state.builder.steps,
change: state.builder.change, change: state.builder.change,
@ -459,7 +653,19 @@ const mapStateToProps = state => ({
tutorials: state.tutorial.tutorials, tutorials: state.tutorial.tutorials,
message: state.message, message: state.message,
user: state.auth.user, user: state.auth.user,
authProgress: state.auth.progress authProgress: state.auth.progress,
}); });
export default connect(mapStateToProps, { checkError, readJSON, jsonString, progress, tutorialId, resetTutorialBuilder, getTutorials, resetTutorial, tutorialProgress, clearMessages, deleteTutorial })(withStyles(styles, { withTheme: true })(withRouter(Builder))); export default connect(mapStateToProps, {
checkError,
readJSON,
jsonString,
progress,
tutorialId,
resetTutorialBuilder,
getTutorials,
resetTutorial,
tutorialProgress,
clearMessages,
deleteTutorial,
})(withStyles(styles, { withTheme: true })(withRouter(Builder)));

119
src/components/Tutorial/Builder/Textfield.js
View File

@ -1,34 +1,39 @@
import React, { Component } from 'react'; import React, { Component } from "react";
import PropTypes from 'prop-types'; import PropTypes from "prop-types";
import { connect } from 'react-redux'; import { connect } from "react-redux";
import { tutorialTitle, tutorialBadge, jsonString, changeContent, setError, deleteError } from '../../../actions/tutorialBuilderActions'; import {
tutorialTitle,
jsonString,
changeContent,
setError,
deleteError,
} from "../../../actions/tutorialBuilderActions";
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from "@material-ui/core/styles";
import OutlinedInput from '@material-ui/core/OutlinedInput'; import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputLabel from '@material-ui/core/InputLabel'; import InputLabel from "@material-ui/core/InputLabel";
import FormControl from '@material-ui/core/FormControl'; import FormControl from "@material-ui/core/FormControl";
import FormHelperText from '@material-ui/core/FormHelperText'; import FormHelperText from "@material-ui/core/FormHelperText";
const styles = theme => ({ const styles = (theme) => ({
multiline: { multiline: {
padding: '18.5px 14px 18.5px 24px' padding: "18.5px 14px 18.5px 24px",
}, },
errorColor: { errorColor: {
color: `${theme.palette.error.dark} !important` color: `${theme.palette.error.dark} !important`,
}, },
errorColorShrink: { errorColorShrink: {
color: `rgba(0, 0, 0, 0.54) !important` color: `rgba(0, 0, 0, 0.54) !important`,
}, },
errorBorder: { errorBorder: {
borderColor: `${theme.palette.error.dark} !important` borderColor: `${theme.palette.error.dark} !important`,
} },
}); });
class Textfield extends Component { class Textfield extends Component {
componentDidMount() {
componentDidMount(){ if (this.props.error) {
if(this.props.error){ if (this.props.property !== "media") {
if(this.props.property !== 'media'){
this.props.deleteError(this.props.index, this.props.property); this.props.deleteError(this.props.index, this.props.property);
} }
} }
@ -36,38 +41,50 @@ class Textfield extends Component {
handleChange = (e) => { handleChange = (e) => {
var value = e.target.value; var value = e.target.value;
if(this.props.property === 'title'){ if (this.props.property === "title") {
this.props.tutorialTitle(value); this.props.tutorialTitle(value);
} } else if (this.props.property === "json") {
else if(this.props.property === 'json'){
this.props.jsonString(value); this.props.jsonString(value);
} else {
this.props.changeContent(
value,
this.props.index,
this.props.property,
this.props.property2
);
} }
else if(this.props.property === 'badge'){ if (value.replace(/\s/g, "") === "") {
this.props.tutorialBadge(value);
}
else {
this.props.changeContent(value, this.props.index, this.props.property, this.props.property2);
}
if(value.replace(/\s/g,'') === ''){
this.props.setError(this.props.index, this.props.property); this.props.setError(this.props.index, this.props.property);
} } else {
else{
this.props.deleteError(this.props.index, this.props.property); this.props.deleteError(this.props.index, this.props.property);
} }
}; };
render() { render() {
return ( return (
<FormControl variant="outlined" fullWidth style={{marginBottom: '10px'}}> <FormControl
variant="outlined"
fullWidth
style={{ marginBottom: "10px" }}
>
<InputLabel <InputLabel
htmlFor={this.props.property} htmlFor={this.props.property}
classes={{shrink: this.props.error ? this.props.classes.errorColorShrink : null}} classes={{
shrink: this.props.error
? this.props.classes.errorColorShrink
: null,
}}
> >
{this.props.label} {this.props.label}
</InputLabel> </InputLabel>
<OutlinedInput <OutlinedInput
style={{borderRadius: '25px'}} style={{ borderRadius: "25px" }}
classes={{multiline: this.props.classes.multiline, notchedOutline: this.props.error ? this.props.classes.errorBorder : null}} classes={{
multiline: this.props.classes.multiline,
notchedOutline: this.props.error
? this.props.classes.errorBorder
: null,
}}
error={this.props.error} error={this.props.error}
value={this.props.value} value={this.props.value}
label={this.props.label} label={this.props.label}
@ -77,21 +94,37 @@ class Textfield extends Component {
rowsMax={10} rowsMax={10}
onChange={(e) => this.handleChange(e)} onChange={(e) => this.handleChange(e)}
/> />
{this.props.error ? {this.props.error ? (
this.props.property === 'title' ? <FormHelperText className={this.props.classes.errorColor}>Gib einen Titel für das Tutorial ein.</FormHelperText> this.props.property === "title" ? (
: this.props.property === 'json' ? <FormHelperText className={this.props.classes.errorColor}>Gib einen JSON-String ein und bestätige diesen mit einem Klick auf den entsprechenden Button</FormHelperText> <FormHelperText className={this.props.classes.errorColor}>
: <FormHelperText className={this.props.classes.errorColor}>{this.props.errorText}</FormHelperText> Gib einen Titel für das Tutorial ein.
: null} </FormHelperText>
) : this.props.property === "json" ? (
<FormHelperText className={this.props.classes.errorColor}>
Gib einen JSON-String ein und bestätige diesen mit einem Klick auf
den entsprechenden Button
</FormHelperText>
) : (
<FormHelperText className={this.props.classes.errorColor}>
{this.props.errorText}
</FormHelperText>
)
) : null}
</FormControl> </FormControl>
); );
}; }
} }
Textfield.propTypes = { Textfield.propTypes = {
tutorialTitle: PropTypes.func.isRequired, tutorialTitle: PropTypes.func.isRequired,
tutorialBadge: PropTypes.func.isRequired,
jsonString: PropTypes.func.isRequired, jsonString: PropTypes.func.isRequired,
changeContent: PropTypes.func.isRequired, changeContent: PropTypes.func.isRequired,
}; };
export default connect(null, { tutorialTitle, tutorialBadge, jsonString, changeContent, setError, deleteError })(withStyles(styles, { withTheme: true })(Textfield)); export default connect(null, {
tutorialTitle,
jsonString,
changeContent,
setError,
deleteError,
})(withStyles(styles, { withTheme: true })(Textfield));

187
src/components/Tutorial/Tutorial.js
View File

@ -1,46 +1,51 @@
import React, { Component } from 'react'; import React, { Component } from "react";
import PropTypes from 'prop-types'; import PropTypes from "prop-types";
import { connect } from 'react-redux'; import { connect } from "react-redux";
import { workspaceName } from '../../actions/workspaceActions'; import { workspaceName } from "../../actions/workspaceActions";
import { clearMessages } from '../../actions/messageActions'; import { clearMessages } from "../../actions/messageActions";
import { getTutorial, resetTutorial, tutorialStep,tutorialProgress } from '../../actions/tutorialActions'; import {
getTutorial,
resetTutorial,
tutorialStep,
tutorialProgress,
} from "../../actions/tutorialActions";
import { withRouter } from 'react-router-dom'; import { withRouter } from "react-router-dom";
import Breadcrumbs from '../Breadcrumbs'; import Breadcrumbs from "../Breadcrumbs";
import StepperHorizontal from './StepperHorizontal'; import StepperHorizontal from "./StepperHorizontal";
import StepperVertical from './StepperVertical'; import StepperVertical from "./StepperVertical";
import Instruction from './Instruction'; import Instruction from "./Instruction";
import Assessment from './Assessment'; import Assessment from "./Assessment";
import Badge from './Badge'; import NotFound from "../NotFound";
import NotFound from '../NotFound'; import * as Blockly from "blockly";
import * as Blockly from 'blockly' import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespace';
import Card from "@material-ui/core/Card";
import Card from '@material-ui/core/Card'; import Button from "@material-ui/core/Button";
import Button from '@material-ui/core/Button';
class Tutorial extends Component { class Tutorial extends Component {
componentDidMount() { componentDidMount() {
this.props.tutorialProgress(); this.props.tutorialProgress();
// retrieve tutorial only if a potential user is loaded - authentication // retrieve tutorial only if a potential user is loaded - authentication
// is finished (success or failed) // is finished (success or failed)
if(!this.props.progress){ if (!this.props.progress) {
this.props.getTutorial(this.props.match.params.tutorialId); this.props.getTutorial(this.props.match.params.tutorialId);
} }
} }
componentDidUpdate(props, state) { componentDidUpdate(props, state) {
if(props.progress !== this.props.progress && !this.props.progress){ if (props.progress !== this.props.progress && !this.props.progress) {
// authentication is completed // authentication is completed
this.props.getTutorial(this.props.match.params.tutorialId); this.props.getTutorial(this.props.match.params.tutorialId);
} } else if (
else if(this.props.tutorial && !this.props.isLoading && this.props.tutorial._id !== this.props.match.params.tutorialId) { this.props.tutorial &&
!this.props.isLoading &&
this.props.tutorial._id !== this.props.match.params.tutorialId
) {
this.props.getTutorial(this.props.match.params.tutorialId); this.props.getTutorial(this.props.match.params.tutorialId);
} }
if (this.props.message.id === 'GET_TUTORIAL_FAIL') { if (this.props.message.id === "GET_TUTORIAL_FAIL") {
alert(this.props.message.msg); alert(this.props.message.msg);
} }
} }
@ -56,44 +61,97 @@ class Tutorial extends Component {
render() { render() {
return ( return (
<div> <div>
{this.props.isLoading ? null : {this.props.isLoading ? null : !this.props.tutorial ? (
!this.props.tutorial ? this.props.message.id === "GET_TUTORIAL_FAIL" ? (
this.props.message.id === 'GET_TUTORIAL_FAIL' ? <NotFound button={{ title: Blockly.Msg.messages_GET_TUTORIAL_FAIL, link: '/tutorial' }} /> : null <NotFound
: (() => { button={{
var tutorial = this.props.tutorial; title: Blockly.Msg.messages_GET_TUTORIAL_FAIL,
var steps = this.props.tutorial.steps; link: "/tutorial",
var step = steps[this.props.activeStep]; }}
var name = `${detectWhitespacesAndReturnReadableResult(tutorial.title)}_${detectWhitespacesAndReturnReadableResult(step.headline)}`; />
return ( ) : null
<div> ) : (
<Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }, { link: `/tutorial/${this.props.tutorial._id}`, title: tutorial.title }]} /> (() => {
var tutorial = this.props.tutorial;
var steps = this.props.tutorial.steps;
var step = steps[this.props.activeStep];
var name = `${detectWhitespacesAndReturnReadableResult(
tutorial.title
)}_${detectWhitespacesAndReturnReadableResult(step.headline)}`;
return (
<div>
<Breadcrumbs
content={[
{ link: "/tutorial", title: "Tutorial" },
{
link: `/tutorial/${this.props.tutorial._id}`,
title: tutorial.title,
},
]}
/>
<StepperHorizontal /> <StepperHorizontal />
<Badge />
<div style={{ display: 'flex' }}> <div style={{ display: "flex" }}>
<StepperVertical steps={steps} /> <StepperVertical steps={steps} />
{/* calc(Card-padding: 10px + Button-height: 35px + Button-marginTop: 15px)*/} {/* calc(Card-padding: 10px + Button-height: 35px + Button-marginTop: 15px)*/}
<Card style={{ padding: '10px 10px 60px 10px', display: 'block', position: 'relative', height: 'max-content', width: '100%' }}> <Card
{step ? style={{
step.type === 'instruction' ? padding: "10px 10px 60px 10px",
<Instruction step={step} /> display: "block",
: <Assessment step={step} name={name} /> // if step.type === 'assessment' position: "relative",
: null} height: "max-content",
width: "100%",
}}
>
{step ? (
step.type === "instruction" ? (
<Instruction step={step} />
) : (
<Assessment step={step} name={name} />
) // if step.type === 'assessment'
) : null}
<div style={{ marginTop: '20px', position: 'absolute', bottom: '10px' }}> <div
<Button style={{ marginRight: '10px', height: '35px' }} variant='contained' disabled={this.props.activeStep === 0} onClick={() => this.props.tutorialStep(this.props.activeStep - 1)}>Zurück</Button> style={{
<Button style={{ height: '35px' }} variant='contained' color='primary' disabled={this.props.activeStep === tutorial.steps.length - 1} onClick={() => this.props.tutorialStep(this.props.activeStep + 1)}>Weiter</Button> marginTop: "20px",
</div> position: "absolute",
</Card> bottom: "10px",
</div> }}
>
<Button
style={{ marginRight: "10px", height: "35px" }}
variant="contained"
disabled={this.props.activeStep === 0}
onClick={() =>
this.props.tutorialStep(this.props.activeStep - 1)
}
>
Zurück
</Button>
<Button
style={{ height: "35px" }}
variant="contained"
color="primary"
disabled={
this.props.activeStep === tutorial.steps.length - 1
}
onClick={() =>
this.props.tutorialStep(this.props.activeStep + 1)
}
>
Weiter
</Button>
</div>
</Card>
</div> </div>
) </div>
})() );
} })()
)}
</div> </div>
); );
}; }
} }
Tutorial.propTypes = { Tutorial.propTypes = {
@ -109,17 +167,24 @@ Tutorial.propTypes = {
tutorial: PropTypes.object.isRequired, tutorial: PropTypes.object.isRequired,
isLoading: PropTypes.bool.isRequired, isLoading: PropTypes.bool.isRequired,
message: PropTypes.object.isRequired, message: PropTypes.object.isRequired,
progress: PropTypes.bool.isRequired progress: PropTypes.bool.isRequired,
}; };
const mapStateToProps = state => ({ const mapStateToProps = (state) => ({
change: state.tutorial.change, change: state.tutorial.change,
status: state.tutorial.status, status: state.tutorial.status,
activeStep: state.tutorial.activeStep, activeStep: state.tutorial.activeStep,
tutorial: state.tutorial.tutorials[0], tutorial: state.tutorial.tutorials[0],
isLoading: state.tutorial.progress, isLoading: state.tutorial.progress,
message: state.message, message: state.message,
progress: state.auth.progress progress: state.auth.progress,
}); });
export default connect(mapStateToProps, { getTutorial, resetTutorial, tutorialStep, tutorialProgress, clearMessages, workspaceName })(withRouter(Tutorial)); export default connect(mapStateToProps, {
getTutorial,
resetTutorial,
tutorialStep,
tutorialProgress,
clearMessages,
workspaceName,
})(withRouter(Tutorial));

267
src/components/User/MyBadges.js
View File

@ -1,267 +0,0 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { connectMyBadges, disconnectMyBadges } from '../../actions/authActions';
import axios from 'axios';
import { withRouter } from 'react-router-dom';
import Breadcrumbs from '../Breadcrumbs';
import Alert from '../Alert';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import TextField from '@material-ui/core/TextField';
import Divider from '@material-ui/core/Divider';
import InputAdornment from '@material-ui/core/InputAdornment';
import Link from '@material-ui/core/Link';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import Avatar from '@material-ui/core/Avatar';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
const styles = (theme) => ({
root: {
'& label.Mui-focused': {
color: '#aed9c8'
},
'& .MuiOutlinedInput-root': {
'&.Mui-focused fieldset': {
borderColor: '#aed9c8'
},
borderRadius: '0.75rem'
}
},
text: {
fontFamily: [
'"Open Sans"',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
fontSize: 16
}
});
export class MyBadges extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
showPassword: false,
msg: '',
badges: [],
progress: false
};
}
componentDidMount(){
if(this.props.user.badge){
this.getBadges();
}
}
componentDidUpdate(props){
const { message } = this.props;
if (message !== props.message) {
// Check for login error
if(message.id === 'MYBADGES_CONNECT_FAIL'){
this.setState({msg: 'Der Benutzername oder das Passwort ist nicht korrekt.', username: '', password: '', showPassword: false});
}
else if(message.id === 'MYBADGES_CONNECT_SUCCESS'){
this.getBadges();
}
else if(message.id === 'MYBADGES_DISCONNECT_SUCCESS' || message.id === 'MYBADGES_DISCONNECT_FAIL'){
this.setState({progress: false});
}
else {
this.setState({msg: null});
}
}
}
getBadges = () => {
this.setState({progress: true});
const config = {
success: res => {
this.setState({badges: res.data.badges, progress: false});
},
error: err => {
this.setState({progress: false});
}
};
axios.get(`${process.env.REACT_APP_BLOCKLY_API}/user/badge`, config)
.then(res => {
res.config.success(res);
})
.catch(err => {
err.config.error(err);
});
};
onChange = e => {
this.setState({ [e.target.name]: e.target.value, msg: '' });
};
onSubmit = e => {
e.preventDefault();
const {username, password} = this.state;
// create user object
const user = {
username,
password
};
this.props.connectMyBadges(user);
};
handleClickShowPassword = () => {
this.setState({ showPassword: !this.state.showPassword });
};
handleMouseDownPassword = (e) => {
e.preventDefault();
};
render(){
return(
<div>
<Breadcrumbs content={[{ link: '/user/badge', title: 'MyBadges' }]} />
<Grid container spacing={2}>
<Grid item xs={12} style={{margin: '4px'}}>
{!this.props.user.badge ?
<Alert>
Du kannst dein Blockly-Konto mit deinem <Link href={`${process.env.REACT_APP_MYBADGES}`}>MyBadges</Link>-Konto verknüpfen, um Badges erwerben zu können.
</Alert>
: null}
<Paper style={{background: '#fffbf5'}}>
<div style={{display: 'flex', flexDirection: 'row', alignSelf: 'center', justifyContent: 'center', flexWrap: 'wrap'}}>
<div style={!this.props.user.badge ? {margin: '15px 15px 0px 15px'} : {margin: '15px'}}>
<img src={`${process.env.REACT_APP_MYBADGES}/static/media/Logo.d1c71fdf.png`} alt="My Badges" style={{maxWidth: '200px', maxHeight: '200px'}}></img>
</div>
{!this.props.user.badge ?
<div style={{maxWidth: '500px', alignSelf: 'center', textAlign: 'center', margin: '15px'}}>
{this.state.msg ?
<div style={{lineHeight: 1.43, borderRadius: '0.75rem', padding: '14px 16px', marginBottom: '10px', color: 'rgb(97, 26, 21)', backgroundColor: 'rgb(253, 236, 234)', fontFamily: `"Open Sans",BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"`}}>
{this.state.msg}
</div> : null
}
<TextField
style={{marginBottom: '10px'}}
classes={{root: this.props.classes.root}}
variant='outlined'
type='text'
label='Nutzername'
name='username'
value={this.state.username}
onChange={this.onChange}
fullWidth={true}
/>
<TextField
classes={{root: this.props.classes.root}}
variant='outlined'
type={this.state.showPassword ? 'text' : 'password'}
label='Passwort'
name='password'
value={this.state.password}
InputProps={{
endAdornment:
<InputAdornment
position="end"
>
<IconButton
onClick={this.handleClickShowPassword}
onMouseDown={this.handleMouseDownPassword}
edge="end"
>
<FontAwesomeIcon size='xs' icon={this.state.showPassword ? faEyeSlash : faEye} />
</IconButton>
</InputAdornment>
}}
onChange={this.onChange}
fullWidth={true}
/>
<p>
<Button variant='contained' onClick={this.onSubmit} className={this.props.classes.text} style={{background: '#aed9c8', borderRadius: '0.75rem', width: '100%'}}>
Anmelden
</Button>
</p>
<p className={this.props.classes.text} style={{textAlign: 'center', fontSize: '0.8rem'}}>
<Link style={{color: '#aed9c8'}} href={`${process.env.REACT_APP_MYBADGES}/user/password`}>Passwort vergessen?</Link>
</p>
<Divider variant='fullWidth'/>
<p className={this.props.classes.text} style={{textAlign: 'center', paddingRight: "34px", paddingLeft: "34px"}}>
Du hast noch kein Konto? <Link style={{color: '#aed9c8'}} href={`${process.env.REACT_APP_MYBADGES}/register`}>Registrieren</Link>
</p>
</div>
: <div style={{margin: '15px', alignSelf: 'center'}}>
<Typography style={{fontWeight: 'bold', fontSize: '1.1rem'}}>MyBadges-Konto ist erfolgreich verknüpft.</Typography>
<Button variant='outlined' style={{borderColor: '#aed9c8'}} onClick={() => {this.props.disconnectMyBadges(); this.setState({badges: [], progress: true});}}>Konto trennen</Button>
</div>}
</div>
</Paper>
</Grid>
{this.props.user.badge && !this.state.progress ?
<Grid container item>
<Grid item style={{margin: '4px'}}>
{this.state.badges && this.state.badges.length > 0 ?
<Typography style={{fontWeight: 'bold'}}>
Du hast {this.state.badges.length} {this.state.badges.length === 1 ? 'Badge' : 'Badges'} im Kontext Blockly for senseBox erreicht.
</Typography>
: null}
</Grid>
<Grid container item>
{this.state.badges && this.state.badges.length > 0 ?
this.state.badges.map(badge => (
<Grid item xs={12} sm={6} md={4}>
<Paper style={{margin: '4px', textAlign: 'center'}}>
{badge.image && badge.image.path ?
<Avatar src={`${process.env.REACT_APP_MYBADGES}/media/${badge.image.path}`} style={{width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto'}}/>
: <Avatar style={{width: '200px', height: '200px', marginLeft: 'auto', marginRight: 'auto'}}></Avatar>}
<Typography variant='h6' style={{display: 'flex', cursor: 'default', paddingBottom: '6px'}}>
<div style={{flexGrow:1, marginLeft: '10px', marginRight: '10px'}}>{badge.name}</div>
</Typography>
</Paper>
</Grid>
))
:
<Grid item style={{margin: '4px'}}>
<Typography style={{fontWeight: 'bold'}}>
Du hast noch keine Badges im Kontext senseBox for Blockly erreicht.
</Typography>
</Grid>}
</Grid>
</Grid>
: null}
</Grid>
</div>
);
}
}
MyBadges.propTypes = {
connectMyBadges: PropTypes.func.isRequired,
disconnectMyBadges: PropTypes.func.isRequired,
message: PropTypes.object.isRequired,
user: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
message: state.message,
user: state.auth.user
});
export default connect(mapStateToProps, { connectMyBadges, disconnectMyBadges })(withStyles(styles, { withTheme: true })(withRouter(MyBadges)));

8
src/reducers/authReducer.js
View File

@ -1,6 +1,4 @@
import { import {
MYBADGES_CONNECT,
MYBADGES_DISCONNECT,
USER_LOADED, USER_LOADED,
USER_LOADING, USER_LOADING,
AUTH_ERROR, AUTH_ERROR,
@ -45,12 +43,6 @@ export default function foo(state = initialState, action) {
isAuthenticated: true, isAuthenticated: true,
progress: false, progress: false,
}; };
case MYBADGES_CONNECT:
case MYBADGES_DISCONNECT:
return {
...state,
user: action.payload,
};
case AUTH_ERROR: case AUTH_ERROR:
case LOGIN_FAIL: case LOGIN_FAIL:
case LOGOUT_SUCCESS: case LOGOUT_SUCCESS:

63
src/reducers/tutorialBuilderReducer.js
View File

@ -1,47 +1,54 @@
import { PROGRESS, JSON_STRING, BUILDER_CHANGE, BUILDER_ERROR, BUILDER_TITLE, BUILDER_BADGE, BUILDER_ID, BUILDER_ADD_STEP, BUILDER_DELETE_STEP, BUILDER_CHANGE_STEP,BUILDER_CHANGE_ORDER, BUILDER_DELETE_PROPERTY } from '../actions/types'; import {
PROGRESS,
JSON_STRING,
BUILDER_CHANGE,
BUILDER_ERROR,
BUILDER_TITLE,
BUILDER_ID,
BUILDER_ADD_STEP,
BUILDER_DELETE_STEP,
BUILDER_CHANGE_STEP,
BUILDER_CHANGE_ORDER,
BUILDER_DELETE_PROPERTY,
} from "../actions/types";
const initialState = { const initialState = {
change: 0, change: 0,
progress: false, progress: false,
json: '', json: "",
title: '', title: "",
id: '', id: "",
steps: [ steps: [
{ {
id: 1, id: 1,
type: 'instruction', type: "instruction",
headline: '', headline: "",
text: '', text: "",
hardware: [], hardware: [],
requirements: [] requirements: [],
} },
], ],
error: { error: {
steps: [{}] steps: [{}],
} },
}; };
export default function foo(state = initialState, action){ export default function foo(state = initialState, action) {
switch(action.type){ switch (action.type) {
case BUILDER_CHANGE: case BUILDER_CHANGE:
return { return {
...state, ...state,
change: state.change += 1 change: (state.change += 1),
}; };
case BUILDER_TITLE: case BUILDER_TITLE:
return { return {
...state, ...state,
title: action.payload title: action.payload,
};
case BUILDER_BADGE:
return {
...state,
badge: action.payload
}; };
case BUILDER_ID: case BUILDER_ID:
return { return {
...state, ...state,
id: action.payload id: action.payload,
}; };
case BUILDER_ADD_STEP: case BUILDER_ADD_STEP:
case BUILDER_DELETE_STEP: case BUILDER_DELETE_STEP:
@ -50,23 +57,23 @@ export default function foo(state = initialState, action){
case BUILDER_DELETE_PROPERTY: case BUILDER_DELETE_PROPERTY:
return { return {
...state, ...state,
steps: action.payload steps: action.payload,
}; };
case BUILDER_ERROR: case BUILDER_ERROR:
return { return {
...state, ...state,
error: action.payload error: action.payload,
} };
case PROGRESS: case PROGRESS:
return { return {
...state, ...state,
progress: action.payload progress: action.payload,
} };
case JSON_STRING: case JSON_STRING:
return { return {
...state, ...state,
json: action.payload json: action.payload,
} };
default: default:
return state; return state;
} }

17022
yarn.lock
View File

File diff suppressed because it is too large Load Diff