add multi interval feature

update blockly to latest release
2021-04-22 15:28:30 +02:00 · 2021-04-22 15:28:12 +02:00
78 changed files with 6460 additions and 9064 deletions
@@ -2,5 +2,8 @@ REACT_APP_COMPILER_URL=https://compiler.sensebox.de
 REACT_APP_BOARD=sensebox-mcu
 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
 REACT_APP_SHARE_LINK_EXPIRES=30
@@ -5,9 +5,7 @@
  "dependencies": {
    "@blockly/block-plus-minus": "^2.0.10",
    "@blockly/field-slider": "^2.1.1",
-    "@blockly/plugin-scroll-options": "^1.0.2",
+    "@blockly/plugin-typed-variable-modal": "^3.1.15",
    "@blockly/plugin-typed-variable-modal": "^3.1.26",
    "@blockly/zoom-to-fit": "^2.0.7",
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.11",
@@ -18,29 +16,27 @@
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.21.0",
-    "blockly": "^6.20210701.0",
+    "blockly": "^5.20210325.1",
    "file-saver": "^2.0.2",
    "mnemonic-id": "^3.2.7",
    "moment": "^2.28.0",
-    "prismjs": "^1.24.0",
+    "prismjs": "^1.23.0",
-    "react": "^17.0.2",
+    "react": "^16.13.1",
    "react-cookie-consent": "^5.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^16.13.1",
    "react-markdown": "^5.0.2",
-    "react-mde": "^11.5.0",
+    "react-redux": "^7.2.0",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "reactour": "^1.18.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
-    "rich-markdown-editor": "^11.17.7",
+    "styled-components": "^4.4.1",
    "styled-components": "^5.0.0",
    "uuid": "^8.3.1"
  },
  "scripts": {
    "start": "react-scripts start",
-    "dev": "set \"REACT_APP_BLOCKLY_API=http://localhost:8080\" && npm start",
+    "dev": "set \"REACT_APP_BLOCKLY_API=http://localhost:8080\" && set \"REACT_APP_MYBADGES_API=http://localhost:3001/api/v1\"&& npm start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
@@ -24,13 +24,6 @@
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <!-- Matomo Image Tracker-->
    <img
      src="https://piwik.sensebox.kaufen/matomo.php?idsite=9&amp;rec=1"
      style="border: 0; display: none"
      alt=""
    />
    <!-- End Matomo -->
    <div id="root"></div>
    <!--
      This HTML file is a template.
@@ -1,260 +1,290 @@
-import {
+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';
  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
 export const loadUser = () => (dispatch) => {
  // user loading
  dispatch({
-    type: USER_LOADING,
+    type: USER_LOADING
  });
  const config = {
-    success: (res) => {
+    success: res => {
      dispatch({
        type: GET_STATUS,
-        payload: res.data.user.status,
+        payload: res.data.user.status
      });
      dispatch(setLanguage(res.data.user.language));
      dispatch({
        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));
      }
      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({
        type: GET_STATUS,
-        payload: status,
+        payload: status
      });
      dispatch({
-        type: AUTH_ERROR,
+        type: AUTH_ERROR
      });
-    },
+    }
  };
-  axios
+  axios.get(`${process.env.REACT_APP_BLOCKLY_API}/user`, config, dispatch(authInterceptor()))
-    .get(
+    .then(res => {
      `${process.env.REACT_APP_BLOCKLY_API}/user`,
      config,
      dispatch(authInterceptor())
    )
    .then((res) => {
      res.config.success(res);
    })
-    .catch((err) => {
+    .catch(err => {
      err.config.error(err);
    });
 };
 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
-export const login =
+export const login = ({ email, password }) => (dispatch) => {
-  ({ email, password }) =>
+  dispatch({
-  (dispatch) => {
+    type: USER_LOADING
-    dispatch({
+  });
-      type: USER_LOADING,
+  // Headers
-    });
+  const config = {
-    // Headers
+    headers: {
-    const config = {
+      'Content-Type': 'application/json'
-      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({
          type: LOGIN_SUCCESS,
          payload: res.data,
        });
        dispatch({
          type: GET_STATUS,
          payload: res.data.user.status,
        });
        dispatch(returnSuccess(res.data.message, res.status, "LOGIN_SUCCESS"));
      })
      .catch((err) => {
        dispatch(
          returnErrors(
            err.response.data.message,
            err.response.status,
            "LOGIN_FAIL"
          )
        );
        dispatch({
          type: LOGIN_FAIL,
        });
        var status = [];
        if (window.localStorage.getItem("status")) {
          status = JSON.parse(window.localStorage.getItem("status"));
        }
        dispatch({
          type: GET_STATUS,
          payload: status,
        });
      });
  };
  // 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({
      type: LOGIN_SUCCESS,
      payload: res.data
    });
    dispatch({
      type: GET_STATUS,
      payload: res.data.user.status
    });
    dispatch(returnSuccess(res.data.message, res.status, 'LOGIN_SUCCESS'));
  })
  .catch(err => {
    dispatch(returnErrors(err.response.data.message, err.response.status, 'LOGIN_FAIL'));
    dispatch({
      type: LOGIN_FAIL
    });
    var status = [];
    if (window.localStorage.getItem('status')) {
      status = JSON.parse(window.localStorage.getItem('status'));
    }
    dispatch({
      type: GET_STATUS,
      payload: status
    });
  });
 };
 // Connect to MyBadges-Account
 export const connectMyBadges = ({ username, password }) => (dispatch, getState) => {
  const config = {
    success: res => {
      var user = getState().auth.user;
      user.badge = res.data.account;
      user.badges = res.data.badges;
      dispatch({
        type: MYBADGES_CONNECT,
        payload: user
      });
      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
 export const logout = () => (dispatch) => {
  const config = {
-    success: (res) => {
+    success: res => {
      dispatch({
-        type: LOGOUT_SUCCESS,
+        type: LOGOUT_SUCCESS
      });
      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({
        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") {
+      }
-        locale = "de_DE";
+      else if (navigator.language === 'de-DE'){
        locale = 'de_DE';
      }
      dispatch(setLanguage(locale));
-      dispatch(returnSuccess(res.data.message, res.status, "LOGOUT_SUCCESS"));
+      dispatch(returnSuccess(res.data.message, res.status, 'LOGOUT_SUCCESS'));
      clearTimeout(logoutTimerId);
    },
-    error: (err) => {
+    error: err => {
-      dispatch(
+      dispatch(returnErrors(err.response.data.message, err.response.status, 'LOGOUT_FAIL'));
        returnErrors(
          err.response.data.message,
          err.response.status,
          "LOGOUT_FAIL"
        )
      );
      dispatch({
-        type: LOGOUT_FAIL,
+        type: LOGOUT_FAIL
      });
      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({
        type: GET_STATUS,
-        payload: status,
+        payload: status
      });
      clearTimeout(logoutTimerId);
-    },
+    }
  };
-  axios
+  axios.post('https://api.opensensemap.org/users/sign-out', {}, config)
-    .post("https://api.opensensemap.org/users/sign-out", {}, config)
+  .then(res => {
-    .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 authInterceptor = () => (dispatch, getState) => {
  // Add a request interceptor
  axios.interceptors.request.use(
-    (config) => {
+    config => {
-      config.headers["Content-Type"] = "application/json";
+      config.headers['Content-Type'] = 'application/json';
      const token = getState().auth.token;
      if (token) {
-        config.headers["Authorization"] = `Bearer ${token}`;
+       config.headers['Authorization'] = `Bearer ${token}`;
      }
      return config;
-    },
+   },
-    (error) => {
+   error => {
-      Promise.reject(error);
+     Promise.reject(error);
-    }
+   }
  );
  // Add a response interceptor
  axios.interceptors.response.use(
-    (response) => {
+    response => {
      // request was successfull
      return response;
    },
-    (error) => {
+    error => {
      const originalRequest = error.config;
      const refreshToken = getState().auth.refreshToken;
-      if (refreshToken) {
+      if(refreshToken){
        // try to refresh the token failed
        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
        if (error.response.status === 401 && !originalRequest._retry) {
          originalRequest._retry = true;
          const refreshToken = getState().auth.refreshToken;
          // request to refresh the token, in request-body is the refreshToken
-          axios
+          axios.post('https://api.opensensemap.org/users/refresh-auth', {"token": refreshToken})
-            .post("https://api.opensensemap.org/users/refresh-auth", {
+               .then(res => {
-              token: refreshToken,
+                 if (res.status === 200) {
-            })
+                   clearTimeout(logoutTimerId);
-            .then((res) => {
+                   const logoutTimer = () => setTimeout(
-              if (res.status === 200) {
+                     () => dispatch(logout()),
-                clearTimeout(logoutTimerId);
+                     timeToLogout
-                const logoutTimer = () =>
+                   );
-                  setTimeout(() => dispatch(logout()), timeToLogout);
+                   logoutTimerId = logoutTimer();
-                logoutTimerId = logoutTimer();
+                   dispatch({
-                dispatch({
+                     type: REFRESH_TOKEN_SUCCESS,
-                  type: REFRESH_TOKEN_SUCCESS,
+                     payload: res.data
-                  payload: res.data,
+                   });
-                });
+                   axios.defaults.headers.common['Authorization'] = 'Bearer ' + getState().auth.token;
-                axios.defaults.headers.common["Authorization"] =
+                   // request was successfull, new request with the old parameters and the refreshed token
-                  "Bearer " + getState().auth.token;
+                   return axios(originalRequest)
-                // request was successfull, new request with the old parameters and the refreshed token
+                          .then(res => {
-                return axios(originalRequest)
+                             originalRequest.success(res);
-                  .then((res) => {
+                           })
-                    originalRequest.success(res);
+                           .catch(err => {
-                  })
+                             originalRequest.error(err);
-                  .catch((err) => {
+                           });
-                    originalRequest.error(err);
+                 }
-                  });
+                 return Promise.reject(error);
-              }
+               })
-              return Promise.reject(error);
+               .catch(err => {
-            })
+                 // request failed, token could not be refreshed
-            .catch((err) => {
+                 if(err.response){
-              // request failed, token could not be refreshed
+                   dispatch(returnErrors(err.response.data.message, err.response.status));
-              if (err.response) {
+                 }
-                dispatch(
+                 dispatch({
-                  returnErrors(err.response.data.message, err.response.status)
+                   type: AUTH_ERROR
-                );
+                 });
-              }
+                 return Promise.reject(error);
-              dispatch({
+               });
                type: AUTH_ERROR,
              });
              return Promise.reject(error);
            });
        }
      }
      // request status was unequal to 401, no possibility to refresh the token
@@ -1,105 +1,109 @@
-import {
+import { MYBADGES_DISCONNECT, TUTORIAL_PROGRESS, GET_TUTORIAL, GET_TUTORIALS, TUTORIAL_SUCCESS, TUTORIAL_ERROR, TUTORIAL_CHANGE, TUTORIAL_XML, TUTORIAL_STEP } from './types';
  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) => {
-  dispatch({ type: TUTORIAL_PROGRESS });
+  dispatch({type: TUTORIAL_PROGRESS});
 };
 export const getTutorial = (id) => (dispatch, getState) => {
-  axios
+  axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`)
-    .get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`)
+    .then(res => {
    .then((res) => {
      var tutorial = res.data.tutorial;
-      existingTutorial(tutorial, getState().tutorial.status).then((status) => {
+      existingTutorial(tutorial, getState().tutorial.status).then(status => {
        dispatch({
          type: TUTORIAL_SUCCESS,
-          payload: status,
+          payload: status
        });
        dispatch(updateStatus(status));
        dispatch({
          type: GET_TUTORIAL,
-          payload: tutorial,
+          payload: tutorial
        });
-        dispatch({ type: TUTORIAL_PROGRESS });
+        dispatch({type: TUTORIAL_PROGRESS});
        dispatch(returnSuccess(res.data.message, res.status));
      });
    })
-    .catch((err) => {
+    .catch(err => {
      if (err.response) {
-        dispatch(
+        dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_TUTORIAL_FAIL'));
          returnErrors(
            err.response.data.message,
            err.response.status,
            "GET_TUTORIAL_FAIL"
          )
        );
      }
      dispatch({ type: TUTORIAL_PROGRESS });
    });
 };
 export const getTutorials = () => (dispatch, getState) => {
-  axios
+  axios.get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial`)
-    .get(`${process.env.REACT_APP_BLOCKLY_API}/tutorial`)
+    .then(res => {
    .then((res) => {
      var tutorials = res.data.tutorials;
-      existingTutorials(tutorials, getState().tutorial.status).then(
+      console.log(tutorials);
-        (status) => {
+      existingTutorials(tutorials, getState().tutorial.status).then(status => {
-          dispatch({
+        dispatch({
-            type: TUTORIAL_SUCCESS,
+          type: TUTORIAL_SUCCESS,
-            payload: status,
+          payload: status
-          });
+        });
-          dispatch(updateStatus(status));
+        console.log('zwei');
-          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) {
-        dispatch(
+        dispatch(returnErrors(err.response.data.message, err.response.status, 'GET_TUTORIALS_FAIL'));
          returnErrors(
            err.response.data.message,
            err.response.status,
            "GET_TUTORIALS_FAIL"
          )
        );
      }
      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) => {
-  if (getState().auth.isAuthenticated) {
+  if(getState().auth.isAuthenticated){
    // update user account in database - sync with redux store
-    axios
+    axios.put(`${process.env.REACT_APP_BLOCKLY_API}/user/status`, {status: status})
-      .put(`${process.env.REACT_APP_BLOCKLY_API}/user/status`, {
+      .then(res => {
-        status: status,
+        // dispatch(returnSuccess(badge, res.status, 'UPDATE_STATUS_SUCCESS'));
      })
-      .then((res) => {})
+      .catch(err => {
-      .catch((err) => {
+        if(err.response){
        if (err.response) {
          // dispatch(returnErrors(err.response.data.message, err.response.status, 'UPDATE_STATUS_FAIL'));
        }
      });
  } else {
    // update locale storage - sync with redux store
-    window.localStorage.setItem("status", JSON.stringify(status));
+    window.localStorage.setItem('status', JSON.stringify(status));
  }
 };
@@ -107,77 +111,66 @@ export const deleteTutorial = (id) => (dispatch, getState) => {
  var tutorial = getState().tutorial;
  var id = getState().builder.id;
  const config = {
-    success: (res) => {
+    success: res => {
      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({
        type: GET_TUTORIALS,
-        payload: tutorials,
+        payload: tutorials
      });
-      dispatch(
+      dispatch(returnSuccess(res.data.message, res.status, 'TUTORIAL_DELETE_SUCCESS'));
        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
+  axios.delete(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`, config)
-    .delete(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${id}`, config)
+    .then(res => {
    .then((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);
      }
    });
 };
 export const resetTutorial = () => (dispatch) => {
  dispatch({
    type: GET_TUTORIALS,
-    payload: [],
+    payload: []
  });
  dispatch({
    type: TUTORIAL_STEP,
-    payload: 0,
+    payload: 0
  });
 };
 export const tutorialChange = () => (dispatch) => {
  dispatch({
-    type: TUTORIAL_CHANGE,
+    type: TUTORIAL_CHANGE
  });
 };
 export const tutorialCheck = (status, step) => (dispatch, getState) => {
  var tutorialsStatus = getState().tutorial.status;
  var id = getState().tutorial.tutorials[0]._id;
-  var tutorialsStatusIndex = tutorialsStatus.findIndex(
+  var tutorialsStatusIndex = tutorialsStatus.findIndex(tutorialStatus => tutorialStatus._id === id);
-    (tutorialStatus) => tutorialStatus._id === id
+  var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(task => task._id === step._id);
  );
  var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(
    (task) => task._id === step._id
  );
  tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = {
    ...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex],
-    type: status,
+    type: status
  };
  dispatch({
-    type: status === "success" ? TUTORIAL_SUCCESS : TUTORIAL_ERROR,
+    type: status === 'success' ? TUTORIAL_SUCCESS : TUTORIAL_ERROR,
-    payload: tutorialsStatus,
+    payload: tutorialsStatus
  });
  console.log('drei');
  dispatch(updateStatus(tutorialsStatus));
  dispatch(tutorialChange());
-  dispatch(returnSuccess("", "", "TUTORIAL_CHECK_SUCCESS"));
+  dispatch(returnSuccess('', '', 'TUTORIAL_CHECK_SUCCESS'));
 };
 export const storeTutorialXml = (code) => (dispatch, getState) => {
@@ -186,21 +179,17 @@ export const storeTutorialXml = (code) => (dispatch, getState) => {
    var id = tutorial._id;
    var activeStep = getState().tutorial.activeStep;
    var steps = tutorial.steps;
-    if (steps && steps[activeStep].type === "task") {
+    if (steps && steps[activeStep].type === 'task') {
      var tutorialsStatus = getState().tutorial.status;
-      var tutorialsStatusIndex = tutorialsStatus.findIndex(
+      var tutorialsStatusIndex = tutorialsStatus.findIndex(tutorialStatus => tutorialStatus._id === id);
-        (tutorialStatus) => tutorialStatus._id === id
+      var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(task => task._id === steps[activeStep]._id);
      );
      var tasksIndex = tutorialsStatus[tutorialsStatusIndex].tasks.findIndex(
        (task) => task._id === steps[activeStep]._id
      );
      tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex] = {
        ...tutorialsStatus[tutorialsStatusIndex].tasks[tasksIndex],
-        xml: code,
+        xml: code
      };
      dispatch({
        type: TUTORIAL_XML,
-        payload: tutorialsStatus,
+        payload: tutorialsStatus
      });
      dispatch(updateStatus(tutorialsStatus));
    }
@@ -210,65 +199,50 @@ export const storeTutorialXml = (code) => (dispatch, getState) => {
 export const tutorialStep = (step) => (dispatch) => {
  dispatch({
    type: TUTORIAL_STEP,
-    payload: step,
+    payload: step
  });
 };
 const existingTutorials = (tutorials, status) =>
  new Promise(function (resolve, reject) {
    var newstatus;
    new Promise(function (resolve, reject) {
      var existingTutorialIds = tutorials.map((tutorial, i) => {
        existingTutorial(tutorial, status).then((status) => {
          newstatus = status;
        });
        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);
    });
  });
-const existingTutorial = (tutorial, status) =>
+const existingTutorials = (tutorials, status) => new Promise(function (resolve, reject) {
  var newstatus;
  new Promise(function (resolve, reject) {
-    var tutorialsId = tutorial._id;
+    var existingTutorialIds = tutorials.map((tutorial, i) => {
-    var statusIndex = status.findIndex((status) => status._id === tutorialsId);
+      existingTutorial(tutorial, status).then(status => {
-    if (statusIndex > -1) {
+        newstatus = status;
      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 };
          }),
      });
      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);
  });
 });
 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);
 });
@@ -1,36 +1,24 @@
-import {
+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';
  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) => {
  dispatch({
-    type: BUILDER_CHANGE,
+    type: BUILDER_CHANGE
  });
 };
 export const jsonString = (json) => (dispatch) => {
  dispatch({
    type: JSON_STRING,
-    payload: json,
+    payload: json
  });
 };
 export const tutorialTitle = (title) => (dispatch) => {
  dispatch({
    type: BUILDER_TITLE,
-    payload: title,
+    payload: title
  });
  dispatch(changeTutorialBuilder());
 };
@@ -38,7 +26,7 @@ export const tutorialTitle = (title) => (dispatch) => {
 export const tutorialSteps = (steps) => (dispatch) => {
  dispatch({
    type: BUILDER_ADD_STEP,
-    payload: steps,
+    payload: steps
  });
  dispatch(changeTutorialBuilder());
 };
@@ -46,7 +34,15 @@ export const tutorialSteps = (steps) => (dispatch) => {
 export const tutorialId = (id) => (dispatch) => {
  dispatch({
    type: BUILDER_ID,
-    payload: id,
+    payload: id
  });
  dispatch(changeTutorialBuilder());
 };
 export const tutorialBadge = (badge) => (dispatch) => {
  dispatch({
    type: BUILDER_BADGE,
    payload: badge
  });
  dispatch(changeTutorialBuilder());
 };
@@ -55,14 +51,14 @@ export const addStep = (index) => (dispatch, getState) => {
  var steps = getState().builder.steps;
  var step = {
    id: index + 1,
-    type: "instruction",
+    type: 'instruction',
-    headline: "",
+    headline: '',
-    text: "",
+    text: ''
  };
  steps.splice(index, 0, step);
  dispatch({
    type: BUILDER_ADD_STEP,
-    payload: steps,
+    payload: steps
  });
  dispatch(addErrorStep(index));
  dispatch(changeTutorialBuilder());
@@ -73,7 +69,7 @@ export const addErrorStep = (index) => (dispatch, getState) => {
  error.steps.splice(index, 0, {});
  dispatch({
    type: BUILDER_ERROR,
-    payload: error,
+    payload: error
  });
 };
@@ -82,7 +78,7 @@ export const removeStep = (index) => (dispatch, getState) => {
  steps.splice(index, 1);
  dispatch({
    type: BUILDER_DELETE_STEP,
-    payload: steps,
+    payload: steps
  });
  dispatch(removeErrorStep(index));
  dispatch(changeTutorialBuilder());
@@ -93,47 +89,45 @@ export const removeErrorStep = (index) => (dispatch, getState) => {
  error.steps.splice(index, 1);
  dispatch({
    type: BUILDER_ERROR,
-    payload: error,
+    payload: error
  });
 };
-export const changeContent =
+export const changeContent = (content, index, property1, property2) => (dispatch, getState) => {
-  (content, index, property1, property2) => (dispatch, getState) => {
+  var steps = getState().builder.steps;
-    var steps = getState().builder.steps;
+  var step = steps[index];
-    var step = steps[index];
+  if (property2) {
-    if (property2) {
+    if (step[property1] && step[property1][property2]) {
-      if (step[property1] && step[property1][property2]) {
+      step[property1][property2] = content;
        step[property1][property2] = content;
      } else {
        step[property1] = { [property2]: content };
      }
    } else {
-      step[property1] = content;
+      step[property1] = { [property2]: content };
    }
-    dispatch({
+  } else {
-      type: BUILDER_CHANGE_STEP,
+    step[property1] = content;
-      payload: steps,
+  }
-    });
+  dispatch({
-    dispatch(changeTutorialBuilder());
+    type: BUILDER_CHANGE_STEP,
-  };
+    payload: steps
  });
  dispatch(changeTutorialBuilder());
 };
-export const deleteProperty =
+export const deleteProperty = (index, property1, property2) => (dispatch, getState) => {
-  (index, property1, property2) => (dispatch, getState) => {
+  var steps = getState().builder.steps;
-    var steps = getState().builder.steps;
+  var step = steps[index];
-    var step = steps[index];
+  if (property2) {
-    if (property2) {
+    if (step[property1] && step[property1][property2]) {
-      if (step[property1] && step[property1][property2]) {
+      delete step[property1][property2];
        delete step[property1][property2];
      }
    } else {
      delete step[property1];
    }
-    dispatch({
+  } else {
-      type: BUILDER_DELETE_PROPERTY,
+    delete step[property1];
-      payload: steps,
+  }
-    });
+  dispatch({
-    dispatch(changeTutorialBuilder());
+    type: BUILDER_DELETE_PROPERTY,
-  };
+    payload: steps
  });
  dispatch(changeTutorialBuilder());
 };
 export const changeStepIndex = (fromIndex, toIndex) => (dispatch, getState) => {
  var steps = getState().builder.steps;
@@ -142,34 +136,34 @@ export const changeStepIndex = (fromIndex, toIndex) => (dispatch, getState) => {
  steps.splice(toIndex, 0, step);
  dispatch({
    type: BUILDER_CHANGE_ORDER,
-    payload: steps,
+    payload: steps
  });
  dispatch(changeErrorStepIndex(fromIndex, toIndex));
  dispatch(changeTutorialBuilder());
 };
-export const changeErrorStepIndex =
+export const changeErrorStepIndex = (fromIndex, toIndex) => (dispatch, getState) => {
-  (fromIndex, toIndex) => (dispatch, getState) => {
+  var error = getState().builder.error;
-    var error = getState().builder.error;
+  var errorStep = error.steps[fromIndex];
-    var errorStep = error.steps[fromIndex];
+  error.steps.splice(fromIndex, 1);
-    error.steps.splice(fromIndex, 1);
+  error.steps.splice(toIndex, 0, errorStep);
-    error.steps.splice(toIndex, 0, errorStep);
+  dispatch({
-    dispatch({
+    type: BUILDER_ERROR,
-      type: BUILDER_ERROR,
+    payload: error
-      payload: error,
+  });
-    });
+};
  };
 export const setError = (index, property) => (dispatch, getState) => {
  var error = getState().builder.error;
  if (index !== undefined) {
    error.steps[index][property] = true;
-  } else {
+  }
  else {
    error[property] = true;
  }
  dispatch({
    type: BUILDER_ERROR,
-    payload: error,
+    payload: error
  });
  dispatch(changeTutorialBuilder());
 };
@@ -178,12 +172,13 @@ export const deleteError = (index, property) => (dispatch, getState) => {
  var error = getState().builder.error;
  if (index !== undefined) {
    delete error.steps[index][property];
-  } else {
+  }
  else {
    delete error[property];
  }
  dispatch({
    type: BUILDER_ERROR,
-    payload: error,
+    payload: error
  });
  dispatch(changeTutorialBuilder());
 };
@@ -193,11 +188,11 @@ export const setSubmitError = () => (dispatch, getState) => {
  // if(builder.id === undefined || builder.id === ''){
  //   dispatch(setError(undefined, 'id'));
  // }
-  if (builder.title === "") {
+  if (builder.title === '') {
-    dispatch(setError(undefined, "title"));
+    dispatch(setError(undefined, 'title'));
  }
  if (builder.title === null) {
-    dispatch(setError(undefined, "title"));
+    dispatch(setError(undefined, 'badge'));
  }
  var type = builder.steps.map((step, i) => {
    // media and xml are directly checked for errors in their components and
@@ -205,82 +200,76 @@ export const setSubmitError = () => (dispatch, getState) => {
    step.id = i + 1;
    if (i === 0) {
      if (step.requirements && step.requirements.length > 0) {
-        var requirements = step.requirements.filter((requirement) =>
+        var requirements = step.requirements.filter(requirement => /^[0-9a-fA-F]{24}$/.test(requirement));
          /^[0-9a-fA-F]{24}$/.test(requirement)
        );
        if (requirements.length < step.requirements.length) {
-          dispatch(changeContent(requirements, i, "requirements"));
+          dispatch(changeContent(requirements, i, 'requirements'));
        }
      }
      if (step.hardware === undefined || step.hardware.length < 1) {
-        dispatch(setError(i, "hardware"));
+        dispatch(setError(i, 'hardware'));
-      } else {
+      }
-        var hardwareIds = data.map((hardware) => hardware.id);
+      else {
-        var hardware = step.hardware.filter((hardware) =>
+        var hardwareIds = data.map(hardware => hardware.id);
-          hardwareIds.includes(hardware)
+        var hardware = step.hardware.filter(hardware => hardwareIds.includes(hardware));
        );
        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;
  });
-  if (
+  if (!(type.filter(item => item === 'task').length > 0 && type.filter(item => item === 'instruction').length > 0)) {
-    !(
+    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) => {
  dispatch(setSubmitError());
  var error = getState().builder.error;
-  if (error.id || error.title || error.type) {
+  if (error.id || error.title || error.badge ||error.type) {
    return true;
  }
  for (var i = 0; i < error.steps.length; i++) {
    if (Object.keys(error.steps[i]).length > 0) {
-      return true;
+      return true
    }
  }
  return false;
-};
+}
 export const progress = (inProgress) => (dispatch) => {
  dispatch({
    type: PROGRESS,
-    payload: inProgress,
+    payload: inProgress
-  });
+  })
 };
 export const resetTutorial = () => (dispatch, getState) => {
-  dispatch(jsonString(""));
+  dispatch(jsonString(''));
-  dispatch(tutorialTitle(""));
+  dispatch(tutorialTitle(''));
  dispatch(tutorialBadge(undefined));
  var steps = [
    {
-      type: "instruction",
+      type: 'instruction',
-      headline: "",
+      headline: '',
-      text: "",
+      text: '',
      hardware: [],
-      requirements: [],
+      requirements: []
-    },
+    }
  ];
  dispatch(tutorialSteps(steps));
  dispatch({
    type: BUILDER_ERROR,
    payload: {
-      steps: [{}],
+      steps: [{}]
-    },
+    }
  });
 };
@@ -289,10 +278,8 @@ export const readJSON = (json) => (dispatch, getState) => {
  dispatch({
    type: BUILDER_ERROR,
    payload: {
-      steps: json.steps.map(() => {
+      steps: json.steps.map(() => { return {}; })
-        return {};
+    }
      }),
    },
  });
  // accept only valid attributes
  var steps = json.steps.map((step, i) => {
@@ -300,7 +287,7 @@ export const readJSON = (json) => (dispatch, getState) => {
      _id: step._id,
      type: step.type,
      headline: step.headline,
-      text: step.text,
+      text: step.text
    };
    if (i === 0) {
      object.hardware = step.hardware;
@@ -309,17 +296,19 @@ export const readJSON = (json) => (dispatch, getState) => {
    if (step.xml) {
      object.xml = step.xml;
    }
-    if (step.media && step.type === "instruction") {
+    if (step.media && step.type === 'instruction') {
      object.media = {};
      if (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;
      }
    }
    return object;
  });
  dispatch(tutorialTitle(json.title));
  dispatch(tutorialBadge(json.badge));
  dispatch(tutorialSteps(steps));
  dispatch(setSubmitError());
  dispatch(progress(false));
@@ -1,59 +1,65 @@
 // 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 VISIT = "VISIT";
+export const BUILDER_CHANGE = 'BUILDER_CHANGE';
-export const LANGUAGE = "LANGUAGE";
+export const BUILDER_TITLE = 'BUILDER_TITLE';
-export const RENDERER = "RENDERER";
+export const BUILDER_BADGE = 'BUILDER_BADGE';
-export const STATISTICS = "STATISTICS";
+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 VISIT = 'VISIT';
 export const LANGUAGE = 'LANGUAGE';
 export const RENDERER = 'RENDERER';
 export const STATISTICS = 'STATISTICS';
 // 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
-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';
@@ -17,6 +17,7 @@ export const onChangeCode = () => (dispatch, getState) => {
  var xmlDom = Blockly.Xml.workspaceToDom(workspace);
  code.xml = Blockly.Xml.domToPrettyText(xmlDom);
  var selectedBlock = Blockly.selected
  console.log(selectedBlock)
  if (selectedBlock !== null) {
    code.helpurl = selectedBlock.helpUrl
    code.tooltip = selectedBlock.tooltip
@@ -21,74 +21,55 @@
 * @author samelh@google.com (Sam El-Husseini)
 */
-import React from "react";
+import React from 'react';
 import Blockly from 'blockly/core';
 import 'blockly/blocks';
 import Toolbox from './toolbox/Toolbox';
 import { Card } from '@material-ui/core';
 import Blockly from "blockly/core";
 import "blockly/blocks";
 import Toolbox from "./toolbox/Toolbox";
 import { Card } from "@material-ui/core";
 import {
  ScrollOptions,
  ScrollBlockDragger,
  ScrollMetricsManager,
 } from "@blockly/plugin-scroll-options";
 class BlocklyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.blocklyDiv = React.createRef();
    this.toolbox = React.createRef();
    this.state = { workspace: undefined };
  }
-  componentDidMount() {
+    constructor(props) {
-    const { initialXml, children, ...rest } = this.props;
+        super(props);
-    this.primaryWorkspace = Blockly.inject(this.blocklyDiv.current, {
+        this.blocklyDiv = React.createRef();
-      toolbox: this.toolbox.current,
+        this.toolbox = React.createRef();
-      plugins: {
+        this.state = { workspace: undefined };
        // These are both required.
        blockDragger: ScrollBlockDragger,
        metricsManager: ScrollMetricsManager,
      },
      ...rest,
    });
    // Initialize plugin.
    this.setState({ workspace: this.primaryWorkspace });
    const plugin = new ScrollOptions(this.workspace);
    plugin.init({ enableWheelScroll: true, enableEdgeScroll: false });
    if (initialXml) {
      Blockly.Xml.domToWorkspace(
        Blockly.Xml.textToDom(initialXml),
        this.primaryWorkspace
      );
    }
  }
-  get workspace() {
+    componentDidMount() {
-    return this.primaryWorkspace;
+        const { initialXml, children, ...rest } = this.props;
-  }
+        this.primaryWorkspace = Blockly.inject(
            this.blocklyDiv.current,
            {
                toolbox: this.toolbox.current,
                ...rest
            },
        );
        this.setState({ workspace: this.primaryWorkspace })
-  setXml(xml) {
+        if (initialXml) {
-    Blockly.Xml.domToWorkspace(
+            Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(initialXml), this.primaryWorkspace);
-      Blockly.Xml.textToDom(xml),
+        }
-      this.primaryWorkspace
+    }
    );
  }
-  render() {
+    get workspace() {
-    return (
+        return this.primaryWorkspace;
-      <React.Fragment>
+    }
-        <Card
+
-          ref={this.blocklyDiv}
+    setXml(xml) {
-          id="blocklyDiv"
+        Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), this.primaryWorkspace);
-          style={this.props.style ? this.props.style : {}}
+    }
-        />
+
-        <Toolbox toolbox={this.toolbox} workspace={this.state.workspace} />
+    render() {
-      </React.Fragment>
+        return <React.Fragment>
-    );
+            <Card ref={this.blocklyDiv} id="blocklyDiv" style={this.props.style ? this.props.style : {}} />
-  }
+            <Toolbox toolbox={this.toolbox} workspace={this.state.workspace} />
        </React.Fragment>;
    }
 }
 export default BlocklyComponent;
@@ -1,18 +1,20 @@
-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 { onChangeWorkspace, clearStats } from "../../actions/workspaceActions";
+import { onChangeWorkspace, clearStats } from '../../actions/workspaceActions';
-import BlocklyComponent from "./BlocklyComponent";
+import BlocklyComponent from './BlocklyComponent';
-import BlocklySvg from "./BlocklySvg";
+import BlocklySvg from './BlocklySvg';
 import * as Blockly from 'blockly/core';
 import './blocks/index';
 import './generator/index';
 import { initialXml } from './initialXml.js';
 import * as Blockly from "blockly/core";
 import "./blocks/index";
 import "./generator/index";
 import { ZoomToFitControl } from "@blockly/zoom-to-fit";
 import { initialXml } from "./initialXml.js";
 class BlocklyWindow extends Component {
  constructor(props) {
    super(props);
    this.simpleWorkspace = React.createRef();
@@ -31,8 +33,6 @@ class BlocklyWindow extends Component {
      }
    });
    Blockly.svgResize(workspace);
    const zoomToFit = new ZoomToFitControl(workspace);
    zoomToFit.init();
  }
  componentDidUpdate(props) {
@@ -51,82 +51,62 @@ class BlocklyWindow extends Component {
      var xmlDom = Blockly.Xml.textToDom(xml);
      Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);
      // var toolbox = workspace.getToolbox();
      // console.log(toolbox);
      // workspace.updateToolbox(toolbox.toolboxDef_);
    }
    Blockly.svgResize(workspace);
  }
  render() {
    return (
      <div>
-        <BlocklyComponent
+        <BlocklyComponent ref={this.simpleWorkspace}
          ref={this.simpleWorkspace}
          style={this.props.svg ? { height: 0 } : this.props.blocklyCSS}
-          readOnly={
+          readOnly={this.props.readOnly !== undefined ? this.props.readOnly : false}
-            this.props.readOnly !== undefined ? this.props.readOnly : false
+          trashcan={this.props.trashcan !== undefined ? this.props.trashcan : true}
          }
          trashcan={
            this.props.trashcan !== undefined ? this.props.trashcan : true
          }
          renderer={this.props.renderer}
-          zoom={{
+          zoom={{ // https://developers.google.com/blockly/guides/configure/web/zoom
-            // https://developers.google.com/blockly/guides/configure/web/zoom
+            controls: this.props.zoomControls !== undefined ? this.props.zoomControls : true,
            controls:
              this.props.zoomControls !== undefined
                ? this.props.zoomControls
                : true,
            wheel: false,
            startScale: 1,
            maxScale: 3,
            minScale: 0.3,
-            scaleSpeed: 1.2,
+            scaleSpeed: 1.2
          }}
-          grid={
+          grid={this.props.grid !== undefined && !this.props.grid ? {} :
-            this.props.grid !== undefined && !this.props.grid
+            { // https://developers.google.com/blockly/guides/configure/web/grid
-              ? {}
+              spacing: 20,
-              : {
+              length: 1,
-                  // https://developers.google.com/blockly/guides/configure/web/grid
+              colour: '#4EAF47', // senseBox-green
-                  spacing: 20,
+              snap: false
-                  length: 1,
+            }}
-                  colour: "#4EAF47", // senseBox-green
+          media={'/media/blockly/'}
-                  snap: false,
+          move={this.props.move !== undefined && !this.props.move ? {} :
-                }
+            { // https://developers.google.com/blockly/guides/configure/web/move
-          }
+              scrollbars: true,
-          media={"/media/blockly/"}
+              drag: true,
-          move={
+              wheel: false
-            this.props.move !== undefined && !this.props.move
+            }}
-              ? {}
+          initialXml={this.props.initialXml ? this.props.initialXml : initialXml}
-              : {
+        >
-                  // https://developers.google.com/blockly/guides/configure/web/move
+        </BlocklyComponent >
-                  scrollbars: true,
+        {this.props.svg && this.props.initialXml ? <BlocklySvg initialXml={this.props.initialXml} /> : null}
                  drag: true,
                  wheel: true,
                }
          }
          initialXml={
            this.props.initialXml ? this.props.initialXml : initialXml
          }
        ></BlocklyComponent>
        {this.props.svg && this.props.initialXml ? (
          <BlocklySvg initialXml={this.props.initialXml} />
        ) : null}
      </div>
    );
-  }
+  };
 }
 BlocklyWindow.propTypes = {
  onChangeWorkspace: PropTypes.func.isRequired,
  clearStats: PropTypes.func.isRequired,
  renderer: PropTypes.string.isRequired,
-  language: PropTypes.string.isRequired,
+  language: PropTypes.string.isRequired
 };
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
  renderer: state.general.renderer,
-  language: state.general.language,
+  language: state.general.language
 });
-export default connect(mapStateToProps, { onChangeWorkspace, clearStats })(
+export default connect(mapStateToProps, { onChangeWorkspace, clearStats })(BlocklyWindow);
  BlocklyWindow
 );
@@ -1,26 +1,24 @@
-import "./loops";
+import './loops';
-import "./sensebox";
+import './sensebox';
-import "./logic";
+import './logic';
-import "./sensebox-sensors";
+import './sensebox-sensors';
-import "./sensebox-telegram";
+import './sensebox-telegram';
-import "./sensebox-osem";
+import './sensebox-osem';
-import "./sensebox-web";
+import './sensebox-web';
-import "./sensebox-display";
+import './sensebox-display';
-import "./sensebox-lora";
+import './sensebox-lora';
-import "./sensebox-led";
+import './sensebox-led';
-import "./sensebox-rtc";
+import './sensebox-sd';
-import "./sensebox-ble";
+import './mqtt';
-import "./sensebox-sd";
+import './text';
-import "./mqtt";
+import './io';
-import "./text";
+import './audio';
-import "./io";
+import './math';
-import "./audio";
+import './map';
-import "./math";
+import './procedures';
-import "./map";
+import './time';
-import "./procedures";
+import './variables';
-import "./time";
+import './lists';
-import "./variables";
+import './webserver';
 import "./lists";
 import "./webserver";
-import "../helpers/types";
+import '../helpers/types'
@@ -16,7 +16,7 @@ Blockly.Blocks['controls_whileUntil'] = {
        this.setHelpUrl(Blockly.Msg.CONTROLS_WHILEUNTIL_HELPURL);
        this.setColour(getColour().loops);
        this.appendValueInput('BOOL')
-            .setCheck(getCompatibleTypes('boolean'))
+            .setCheck(getCompatibleTypes(Boolean))
            .appendField(new Blockly.FieldDropdown(OPERATORS), 'MODE');
        this.appendStatementInput('DO')
            .appendField(Blockly.Msg.CONTROLS_WHILEUNTIL_INPUT_DO);
@@ -53,19 +53,19 @@ Blockly.Blocks['controls_for'] = {
                {
                    "type": "input_value",
                    "name": "FROM",
-                    "check": getCompatibleTypes('int'),
+                    "check": getCompatibleTypes(Number),
                    "align": "RIGHT"
                },
                {
                    "type": "input_value",
                    "name": "TO",
-                    "check": getCompatibleTypes('int'),
+                    "check": getCompatibleTypes(Number),
                    "align": "RIGHT"
                },
                {
                    "type": "input_value",
                    "name": "BY",
-                    "check": getCompatibleTypes('int'),
+                    "check": getCompatibleTypes(Number),
                    "align": "RIGHT"
                }
            ],
@@ -104,7 +104,7 @@ Blockly.Blocks['controls_forEach'] = {
                {
                    "type": "input_value",
                    "name": "LIST",
-                    "check": getCompatibleTypes('Array')
+                    "check": getCompatibleTypes(Array)
                }
            ],
            "previousStatement": null,
@@ -197,7 +197,7 @@ Blockly.Blocks['controls_repeat_ext'] = {
                {
                    "type": "input_value",
                    "name": "TIMES",
-                    "check": getCompatibleTypes('int'),
+                    "check": getCompatibleTypes(Number),
                }
            ],
            "previousStatement": null,
@@ -1148,7 +1148,9 @@ Blockly.Blocks['procedures_callnoreturn'] = {
                    // This should only be possible programatically and may indicate a problem
                    // with event grouping. If you see this message please investigate. If the
                    // use ends up being valid we may need to reorder events in the undo stack.
-                   
+                    console.log(
                        'Saw an existing group while responding to a definition change'
                    );
                }
                Blockly.Events.setGroup(event.group);
                if (event.newValue) {
@@ -1,145 +0,0 @@
 import * as Blockly from "blockly";
 import { getColour } from "../helpers/colour";
 Blockly.Blocks["sensebox_phyphox_init"] = {
  init: function () {
    this.setColour(getColour().phyphox);
    this.appendDummyInput()
      .appendField(Blockly.Msg.sensebox_phyphox_init)
      .appendField(new Blockly.FieldTextInput("Geräte Name"), "devicename");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setTooltip(Blockly.Msg.sensebox_phyphox_init_tooltip);
  },
 };
 Blockly.Blocks["sensebox_phyphox_experiment"] = {
  init: function () {
    this.setColour(getColour().phyphox);
    this.appendDummyInput().appendField(
      Blockly.Msg.sensebox_phyphox_createExperiment
    );
    this.appendDummyInput()
      .appendField(Blockly.Msg.sensebox_phyphox_experimentTitle)
      .appendField(new Blockly.FieldTextInput("Experiment Title"), "title");
    this.appendDummyInput()
      .appendField(Blockly.Msg.sensebox_phyphox_experimentDescription)
      .appendField(
        new Blockly.FieldTextInput(
          Blockly.Msg.sensebox_phyphox_experiment_description
        ),
        "description"
      );
    this.appendStatementInput("view").appendField(
      Blockly.Msg.sensebox_phyphox_createView
    );
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setTooltip(Blockly.Msg.sensebox_phyphox_experiment_tooltip);
  },
 };
 Blockly.Blocks["sensebox_phyphox_graph"] = {
  init: function () {
    this.setColour(getColour().phyphox);
    this.appendDummyInput()
      .appendField(Blockly.Msg.sensebox_phyphox_createGraph)
      .appendField(Blockly.Msg.sensebox_phyphox_graphLabel)
      .appendField(new Blockly.FieldTextInput("Label"), "label");
    this.appendDummyInput()
      .appendField(Blockly.Msg.sensebox_phyphox_unitx)
      .appendField(new Blockly.FieldTextInput("Unit X"), "unitx");
    this.appendDummyInput()
      .appendField(Blockly.Msg.sensebox_phyphox_unity)
      .appendField(new Blockly.FieldTextInput("Unit Y"), "unity");
    this.appendDummyInput()
      .appendField(Blockly.Msg.sensebox_phyphox_labelx)
      .appendField(new Blockly.FieldTextInput("Label X"), "labelx");
    this.appendDummyInput()
      .appendField(Blockly.Msg.sensebox_phyphox_labely)
      .appendField(new Blockly.FieldTextInput("Label Y"), "labely");
    this.appendDummyInput()
      .appendField(Blockly.Msg.sensebox_phyphox_graphStyle)
      .appendField(
        new Blockly.FieldDropdown([
          [Blockly.Msg.sensebox_phyphox_style_dots, "dots"],
          [Blockly.Msg.sensebox_phyphox_style_line, "line"],
        ]),
        "style"
      );
    this.appendValueInput("channel0").appendField(
      Blockly.Msg.sensebox_phyphox_channel0
    );
    this.appendValueInput("channel1").appendField(
      Blockly.Msg.sensebox_phyphox_channel1
    );
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setTooltip(Blockly.Msg.sensebox_phyphox_graph_tooltip);
  },
 };
 Blockly.Blocks["sensebox_phyphox_timestamp"] = {
  init: function () {
    this.setColour(getColour().phyphox);
    this.appendDummyInput().appendField(Blockly.Msg.sensebox_phyphox_timestamp);
    this.setOutput(true);
    this.setTooltip(Blockly.Msg.sensebox_phyphox_timestamp_tooltip);
  },
 };
 Blockly.Blocks["sensebox_phyphox_channel"] = {
  init: function () {
    this.setColour(getColour().phyphox);
    this.appendDummyInput()
      .appendField(Blockly.Msg.sensebox_phyphox_channel)
      .appendField(
        new Blockly.FieldDropdown([
          ["1", "1"],
          ["2", "2"],
          ["3", "3"],
          ["4", "4"],
          ["5", "5"],
        ]),
        "channel"
      );
    this.setOutput(true);
    this.setTooltip(Blockly.Msg.sensebox_phyphox_channel_tooltip);
  },
 };
 Blockly.Blocks["sensebox_phyphox_sendchannel"] = {
  init: function () {
    this.setColour(getColour().phyphox);
    this.appendValueInput("value")
      .appendField(Blockly.Msg.sensebox_phyphox_sendchannel)
      .appendField(
        new Blockly.FieldDropdown([
          ["1", "1"],
          ["2", "2"],
          ["3", "3"],
          ["4", "4"],
          ["5", "5"],
        ]),
        "channel"
      );
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setTooltip(Blockly.Msg.sensebox_phyphox_sendchannel_tooltip);
  },
 };
 Blockly.Blocks["sensebox_phyphox_experiment_send"] = {
  init: function () {
    this.setColour(getColour().phyphox);
    this.appendStatementInput("sendValues").appendField(
      Blockly.Msg.sensebox_phyphox_writeValues
    );
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setTooltip(Blockly.Msg.sensebox_phyphox_experiment_send_tooltip);
  },
 };
@@ -1,301 +1,284 @@
-import * as Blockly from "blockly/core";
+import * as Blockly from 'blockly/core';
-import { getColour } from "../helpers/colour";
+import { getColour } from '../helpers/colour';
 /*
 ----------------------------------LoRa--------------------------------------------------
 */
-Blockly.Blocks["sensebox_lora_initialize_otaa"] = {
+Blockly.Blocks['sensebox_lora_initialize_otaa'] = {
-  init: function () {
+    init: function () {
-    this.setTooltip(Blockly.Msg.senseBox_LoRa_init_otaa_tooltip);
+        this.setTooltip(Blockly.Msg.senseBox_LoRa_init_otaa_tooltip);
-    this.setHelpUrl(Blockly.Msg.senseBox_LoRa_init_helpurl);
+        this.setHelpUrl(Blockly.Msg.senseBox_LoRa_init_helpurl);
-    this.setColour(getColour().sensebox);
+        this.setColour(getColour().sensebox);
-    this.appendDummyInput().appendField("Initialize LoRa (OTAA)");
+        this.appendDummyInput()
-    this.appendDummyInput()
+            .appendField("Initialize LoRa (OTAA)");
-      .setAlign(Blockly.ALIGN_LEFT)
+        this.appendDummyInput()
-      .appendField(Blockly.Msg.senseBox_LoRa_device_id)
+            .setAlign(Blockly.ALIGN_LEFT)
-      .appendField("{")
+            .appendField(Blockly.Msg.senseBox_LoRa_device_id)
-      .appendField(new Blockly.FieldTextInput("DEVICE ID"), "DEVICEID")
+            .appendField(new Blockly.FieldTextInput("DEVICE ID"), "DEVICEID");
-      .appendField("}");
+        this.appendDummyInput()
-    this.appendDummyInput()
+            .setAlign(Blockly.ALIGN_LEFT)
-      .setAlign(Blockly.ALIGN_LEFT)
+            .appendField(Blockly.Msg.senseBox_LoRa_app_id)
-      .appendField(Blockly.Msg.senseBox_LoRa_app_id)
+            .appendField(new Blockly.FieldTextInput("APP ID"), "APPID");
-      .appendField("{")
+        this.appendDummyInput()
-      .appendField(new Blockly.FieldTextInput("APP ID"), "APPID")
+            .setAlign(Blockly.ALIGN_LEFT)
-      .appendField("}");
+            .appendField(Blockly.Msg.senseBox_LoRa_app_key)
-    this.appendDummyInput()
+            .appendField(new Blockly.FieldTextInput("APP KEY"), "APPKEY");
-      .setAlign(Blockly.ALIGN_LEFT)
+        this.appendDummyInput()
-      .appendField(Blockly.Msg.senseBox_LoRa_app_key)
+            .setAlign(Blockly.ALIGN_LEFT)
-      .appendField("{")
+            .appendField(Blockly.Msg.senseBox_LoRa_interval)
-      .appendField(new Blockly.FieldTextInput("APP KEY"), "APPKEY")
+            .appendField(new Blockly.FieldTextInput("5"), "INTERVAL");
-      .appendField("}");
+        this.setPreviousStatement(true, null);
-    this.appendDummyInput()
+        this.setNextStatement(true, null);
-      .setAlign(Blockly.ALIGN_LEFT)
+    },
      .appendField(Blockly.Msg.senseBox_LoRa_interval)
      .appendField(new Blockly.FieldTextInput("5"), "INTERVAL");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
  },
 };
-Blockly.Blocks["sensebox_lora_initialize_abp"] = {
+Blockly.Blocks['sensebox_lora_initialize_abp'] = {
-  init: function () {
+    init: function () {
-    this.setTooltip(Blockly.Msg.senseBox_LoRa_init_abp_tooltip);
+        this.setTooltip(Blockly.Msg.senseBox_LoRa_init_abp_tooltip);
-    this.setHelpUrl(Blockly.Msg.senseBox_LoRa_init_helpurl);
+        this.setHelpUrl(Blockly.Msg.senseBox_LoRa_init_helpurl);
-    this.setColour(getColour().sensebox);
+        this.setColour(getColour().sensebox);
-    this.appendDummyInput().appendField("Initialize LoRa (ABP)");
+        this.appendDummyInput()
-    this.appendDummyInput()
+            .appendField("Initialize LoRa (ABP)");
-      .setAlign(Blockly.ALIGN_LEFT)
+        this.appendDummyInput()
-      .appendField(Blockly.Msg.senseBox_LoRa_nwskey_id)
+            .setAlign(Blockly.ALIGN_LEFT)
-      .appendField("{")
+            .appendField(Blockly.Msg.senseBox_LoRa_nwskey_id)
-      .appendField(new Blockly.FieldTextInput("NWSKEY"), "NWSKEY")
+            .appendField(new Blockly.FieldTextInput("NWSKEY"), "NWSKEY");
-      .appendField("}");
+        this.appendDummyInput()
-    this.appendDummyInput()
+            .setAlign(Blockly.ALIGN_LEFT)
-      .setAlign(Blockly.ALIGN_LEFT)
+            .appendField(Blockly.Msg.senseBox_LoRa_appskey_id)
-      .appendField(Blockly.Msg.senseBox_LoRa_appskey_id)
+            .appendField(new Blockly.FieldTextInput("APPSKEY"), "APPSKEY");
-      .appendField("{")
+        this.appendDummyInput()
-      .appendField(new Blockly.FieldTextInput("APPSKEY"), "APPSKEY")
+            .setAlign(Blockly.ALIGN_LEFT)
-      .appendField("}");
+            .appendField(Blockly.Msg.senseBox_LoRa_devaddr_id)
-    this.appendDummyInput()
+            .appendField(new Blockly.FieldTextInput("DEVADDR"), "DEVADDR");
-      .setAlign(Blockly.ALIGN_LEFT)
+        this.appendDummyInput()
-      .appendField(Blockly.Msg.senseBox_LoRa_devaddr_id)
+            .setAlign(Blockly.ALIGN_LEFT)
-      .appendField(new Blockly.FieldTextInput("DEVADDR"), "DEVADDR");
+            .appendField(Blockly.Msg.senseBox_LoRa_interval)
-    this.appendDummyInput()
+            .appendField(new Blockly.FieldTextInput("5"), "INTERVAL");
-      .setAlign(Blockly.ALIGN_LEFT)
+        // this.appendStatementInput('DO')
-      .appendField(Blockly.Msg.senseBox_LoRa_interval)
+        //     .appendField(Blockly.Msg.senseBox_measurements)
-      .appendField(new Blockly.FieldTextInput("5"), "INTERVAL");
+        //     .setCheck(null);
-    // this.appendStatementInput('DO')
+        this.setPreviousStatement(true, null);
-    //     .appendField(Blockly.Msg.senseBox_measurements)
+        this.setNextStatement(true, null);
-    //     .setCheck(null);
+    },
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
  },
 };
-Blockly.Blocks["sensebox_lora_message_send"] = {
+Blockly.Blocks['sensebox_lora_message_send'] = {
-  init: function () {
+    init: function () {
-    this.setTooltip(Blockly.Msg.senseBox_LoRa_message_tooltip);
+        this.setTooltip(Blockly.Msg.senseBox_LoRa_message_tooltip);
-    this.setHelpUrl("");
+        this.setHelpUrl('');
-    this.setColour(getColour().sensebox);
+        this.setColour(getColour().sensebox);
-    this.appendStatementInput("DO")
+        this.appendStatementInput('DO')
-      .appendField(Blockly.Msg.senseBox_LoRa_send_message)
+            .appendField(Blockly.Msg.senseBox_LoRa_send_message)
-      .setCheck(null);
+            .setCheck(null);
-    this.setPreviousStatement(true, null);
+        this.setPreviousStatement(true, null);
-    this.setNextStatement(true, null);
+        this.setNextStatement(true, null);
  },
 };
 Blockly.Blocks["sensebox_send_lora_sensor_value"] = {
  init: function () {
    this.setTooltip(Blockly.Msg.senseBox_LoRa_sensor_tip);
    this.setHelpUrl("");
    this.setColour(getColour().sensebox);
    this.appendValueInput("Value").appendField(
      Blockly.Msg.senseBox_measurement
    );
    this.appendDummyInput()
      .setAlign(Blockly.ALIGN_LEFT)
      .appendField("Bytes")
      .appendField(new Blockly.FieldTextInput("2"), "MESSAGE_BYTES");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
  },
  /**
   * Called whenever anything on the workspace changes.
   * Add warning if block is not nested inside a the correct loop.
   * @param {!Blockly.Events.Abstract} e Change event.
   * @this Blockly.Block
   */
  onchange: function (e) {
    var legal = false;
    // Is the block nested in a loop?
    var block = this;
    do {
      if (this.LOOP_TYPES.indexOf(block.type) !== -1) {
        legal = true;
        break;
      }
      block = block.getSurroundParent();
    } while (block);
    if (legal) {
      this.setWarningText(null);
    } else {
      this.setWarningText(Blockly.Msg.CONTROLS_FLOW_STATEMENTS_WARNING);
    }
  },
  LOOP_TYPES: ["sensebox_lora_message_send"],
 };
-Blockly.Blocks["sensebox_lora_ttn_mapper"] = {
+Blockly.Blocks['sensebox_send_lora_sensor_value'] = {
-  init: function (block) {
+    init: function () {
-    this.setColour(getColour().sensebox);
+        this.setTooltip(Blockly.Msg.senseBox_LoRa_sensor_tip);
-    this.appendDummyInput().appendField("TTN Mapper");
+        this.setHelpUrl('');
-    this.appendDummyInput()
+        this.setColour(getColour().sensebox);
-      .setAlign(Blockly.ALIGN_RIGHT)
+        this.appendValueInput('Value')
-      .appendField("Fix Type Limit")
+            .appendField(Blockly.Msg.senseBox_measurement)
-      .appendField(
+        this.appendDummyInput()
-        new Blockly.FieldDropdown(
+            .setAlign(Blockly.ALIGN_LEFT)
-          [
+            .appendField("Bytes")
-            ["0", "0"],
+            .appendField(new Blockly.FieldTextInput("2"), "MESSAGE_BYTES");
-            ["1", "1"],
+        this.setPreviousStatement(true, null);
-            ["2", "2"],
+        this.setNextStatement(true, null);
-            ["3", "3"],
+    },
-          ].reverse()
+    /**
-        ),
+     * Called whenever anything on the workspace changes.
-        "dropdown"
+     * Add warning if block is not nested inside a the correct loop.
-      );
+     * @param {!Blockly.Events.Abstract} e Change event.
-    // reverse() because i want 3 be be at first and i'm to lazy to write the array again
+     * @this Blockly.Block
-    this.appendValueInput("Latitude")
+     */
-      .appendField(Blockly.Msg.senseBox_gps_lat)
+    onchange: function (e) {
-      .setCheck(null);
+        var legal = false;
-    this.appendValueInput("Longitude")
+        // Is the block nested in a loop?
-      .appendField(Blockly.Msg.senseBox_gps_lng)
+        var block = this;
-      .setCheck(null);
+        do {
-    this.appendValueInput("Altitude")
+            if (this.LOOP_TYPES.indexOf(block.type) !== -1) {
-      .appendField(Blockly.Msg.senseBox_gps_alt)
+                legal = true;
-      .setCheck(null);
+                break;
-    this.appendValueInput("pDOP").appendField("pDOP").setCheck(null);
+            }
-    this.appendValueInput("Fix Type").appendField("Fix Type").setCheck(null);
+            block = block.getSurroundParent();
-    this.setPreviousStatement(true, null);
+        } while (block);
-    this.setNextStatement(true, null);
+        if (legal) {
-    this.setTooltip(Blockly.Msg.senseBox_display_printDisplay_tip);
+            this.setWarningText(null);
-  },
+        } else {
            this.setWarningText(Blockly.Msg.CONTROLS_FLOW_STATEMENTS_WARNING);
        }
    },
    LOOP_TYPES: ['sensebox_lora_message_send'],
 };
-Blockly.Blocks["sensebox_lora_cayenne_send"] = {
+Blockly.Blocks['sensebox_lora_ttn_mapper'] = {
-  init: function () {
+    init: function (block) {
-    this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_tip);
+        this.setColour(getColour().sensebox);
-    this.setHelpUrl("");
+        this.appendDummyInput()
-    this.setColour(getColour().sensebox);
+            .appendField("TTN Mapper");
-    this.appendStatementInput("DO")
+        this.appendDummyInput()
-      .appendField(Blockly.Msg.senseBox_LoRa_send_cayenne)
+            .setAlign(Blockly.ALIGN_RIGHT)
-      .setCheck(null);
+            .appendField("Fix Type Limit")
-    this.setPreviousStatement(true, null);
+            .appendField(new Blockly.FieldDropdown([["0", "0"], ["1", "1"], ["2", "2"], ["3", "3"]].reverse()), "dropdown");
-    this.setNextStatement(true, null);
+        // reverse() because i want 3 be be at first and i'm to lazy to write the array again
-  },
+        this.appendValueInput('Latitude')
            .appendField(Blockly.Msg.senseBox_gps_lat)
            .setCheck(null);
        this.appendValueInput('Longitude')
            .appendField(Blockly.Msg.senseBox_gps_lng)
            .setCheck(null);
        this.appendValueInput('Altitude')
            .appendField(Blockly.Msg.senseBox_gps_alt)
            .setCheck(null);
        this.appendValueInput('pDOP')
            .appendField('pDOP')
            .setCheck(null);
        this.appendValueInput('Fix Type')
            .appendField('Fix Type')
            .setCheck(null);
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
        this.setTooltip(Blockly.Msg.senseBox_display_printDisplay_tip);
    }
 };
-Blockly.Blocks["sensebox_lora_cayenne_temperature"] = {
+
-  init: function () {
+Blockly.Blocks['sensebox_lora_cayenne_send'] = {
-    this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_temperature_tip);
+    init: function () {
-    this.setHelpUrl("");
+        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_tip);
-    this.setColour(getColour().sensebox);
+        this.setHelpUrl('');
-    this.appendValueInput("Value").appendField(
+        this.setColour(getColour().sensebox);
-      Blockly.Msg.senseBox_LoRa_cayenne_temperature
+        this.appendStatementInput('DO')
-    );
+            .appendField(Blockly.Msg.senseBox_LoRa_send_cayenne)
-    this.appendDummyInput()
+            .setCheck(null);
-      .setAlign(Blockly.ALIGN_LEFT)
+        this.setPreviousStatement(true, null);
-      .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
+        this.setNextStatement(true, null);
-      .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
+    }
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
  },
  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
 };
-Blockly.Blocks["sensebox_lora_cayenne_humidity"] = {
+Blockly.Blocks['sensebox_lora_cayenne_temperature'] = {
-  init: function () {
+    init: function () {
-    this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_humidity_tip);
+        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_temperature_tip);
-    this.setHelpUrl("");
+        this.setHelpUrl('');
-    this.setColour(getColour().sensebox);
+        this.setColour(getColour().sensebox);
-    this.appendValueInput("Value").appendField(
+        this.appendValueInput('Value')
-      Blockly.Msg.senseBox_LoRa_cayenne_humidity
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_temperature)
-    );
+        this.appendDummyInput()
-    this.appendDummyInput()
+            .setAlign(Blockly.ALIGN_LEFT)
-      .setAlign(Blockly.ALIGN_LEFT)
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
-      .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
+            .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
-      .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
+        this.setPreviousStatement(true, null);
-    this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
-    this.setNextStatement(true, null);
+    },
-  },
+    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
 };
-Blockly.Blocks["sensebox_lora_cayenne_pressure"] = {
+Blockly.Blocks['sensebox_lora_cayenne_humidity'] = {
-  init: function () {
+    init: function () {
-    this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_pressure_tip);
+        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_humidity_tip);
-    this.setHelpUrl("");
+        this.setHelpUrl('');
-    this.setColour(getColour().sensebox);
+        this.setColour(getColour().sensebox);
-    this.appendValueInput("Value").appendField(
+        this.appendValueInput('Value')
-      Blockly.Msg.senseBox_LoRa_cayenne_pressure
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_humidity)
-    );
+        this.appendDummyInput()
-    this.appendDummyInput()
+            .setAlign(Blockly.ALIGN_LEFT)
-      .setAlign(Blockly.ALIGN_LEFT)
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
-      .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
+            .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
-      .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
+        this.setPreviousStatement(true, null);
-    this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
-    this.setNextStatement(true, null);
+    },
-  },
+    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
 };
-Blockly.Blocks["sensebox_lora_cayenne_luminosity"] = {
+Blockly.Blocks['sensebox_lora_cayenne_pressure'] = {
-  init: function () {
+    init: function () {
-    this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_luminosity_tip);
+        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_pressure_tip);
-    this.setHelpUrl("");
+        this.setHelpUrl('');
-    this.setColour(getColour().sensebox);
+        this.setColour(getColour().sensebox);
-    this.appendValueInput("Value").appendField(
+        this.appendValueInput('Value')
-      Blockly.Msg.senseBox_LoRa_cayenne_luminosity
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_pressure)
-    );
+        this.appendDummyInput()
-    this.appendDummyInput()
+            .setAlign(Blockly.ALIGN_LEFT)
-      .setAlign(Blockly.ALIGN_LEFT)
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
-      .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
+            .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
-      .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
+        this.setPreviousStatement(true, null);
-    this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
-    this.setNextStatement(true, null);
+    },
-  },
+    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
 };
-Blockly.Blocks["sensebox_lora_cayenne_sensor"] = {
+Blockly.Blocks['sensebox_lora_cayenne_luminosity'] = {
-  init: function () {
+    init: function () {
-    this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_analog_tip);
+        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_luminosity_tip);
-    this.setHelpUrl("");
+        this.setHelpUrl('');
-    this.setColour(getColour().sensebox);
+        this.setColour(getColour().sensebox);
-    this.appendValueInput("Value").appendField(
+        this.appendValueInput('Value')
-      Blockly.Msg.senseBox_LoRa_cayenne_analog
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_luminosity)
-    );
+        this.appendDummyInput()
-    this.appendDummyInput()
+            .setAlign(Blockly.ALIGN_LEFT)
-      .setAlign(Blockly.ALIGN_LEFT)
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
-      .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
+            .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
-      .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
+        this.setPreviousStatement(true, null);
-    this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
-    this.setNextStatement(true, null);
+    },
-  },
+    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
 };
-Blockly.Blocks["sensebox_lora_cayenne_accelerometer"] = {
+Blockly.Blocks['sensebox_lora_cayenne_sensor'] = {
-  init: function () {
+    init: function () {
-    this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_gyros_tip);
+        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_analog_tip);
-    this.setHelpUrl("");
+        this.setHelpUrl('');
-    this.setColour(getColour().sensebox);
+        this.setColour(getColour().sensebox);
-    this.appendValueInput("X").appendField(Blockly.Msg.senseBox_LoRa_cayenne_x);
+        this.appendValueInput('Value')
-    this.appendValueInput("Y").appendField(Blockly.Msg.senseBox_LoRa_cayenne_y);
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_analog)
-    this.appendValueInput("Z").appendField(Blockly.Msg.senseBox_LoRa_cayenne_z);
+        this.appendDummyInput()
-    this.appendDummyInput()
+            .setAlign(Blockly.ALIGN_LEFT)
-      .setAlign(Blockly.ALIGN_LEFT)
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
-      .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
+            .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
-      .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
+        this.setPreviousStatement(true, null);
-    this.setPreviousStatement(true, null);
+        this.setNextStatement(true, null);
-    this.setNextStatement(true, null);
+    },
-  },
+    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
 };
-Blockly.Blocks["sensebox_lora_cayenne_gps"] = {
+Blockly.Blocks['sensebox_lora_cayenne_accelerometer'] = {
-  init: function () {
+    init: function () {
-    this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_gps_tip);
+        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_gyros_tip);
-    this.setHelpUrl("");
+        this.setHelpUrl('');
-    this.setColour(getColour().sensebox);
+        this.setColour(getColour().sensebox);
-    this.appendValueInput("LAT").appendField(
+        this.appendValueInput('X')
-      Blockly.Msg.senseBox_LoRa_cayenne_lat
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_x)
-    );
+        this.appendValueInput('Y')
-    this.appendValueInput("LNG").appendField(
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_y)
-      Blockly.Msg.senseBox_LoRa_cayenne_lng
+        this.appendValueInput('Z')
-    );
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_z)
-    this.appendValueInput("ALT").appendField(
+        this.appendDummyInput()
-      Blockly.Msg.senseBox_LoRa_cayenne_alt
+            .setAlign(Blockly.ALIGN_LEFT)
-    );
+            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
-    this.appendDummyInput()
+            .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
-      .setAlign(Blockly.ALIGN_LEFT)
+        this.setPreviousStatement(true, null);
-      .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
+        this.setNextStatement(true, null);
-      .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
+    },
-    this.setPreviousStatement(true, null);
+    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
-    this.setNextStatement(true, null);
+};
-  },
+Blockly.Blocks['sensebox_lora_cayenne_gps'] = {
-  LOOP_TYPES: ["sensebox_lora_cayenne_send"],
+    init: function () {
        this.setTooltip(Blockly.Msg.senseBox_LoRa_cayenne_gps_tip);
        this.setHelpUrl('');
        this.setColour(getColour().sensebox);
        this.appendValueInput('LAT')
            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_lat)
        this.appendValueInput('LNG')
            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_lng)
        this.appendValueInput('ALT')
            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_alt)
        this.appendDummyInput()
            .setAlign(Blockly.ALIGN_LEFT)
            .appendField(Blockly.Msg.senseBox_LoRa_cayenne_channel)
            .appendField(new Blockly.FieldTextInput("1"), "CHANNEL");
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
    },
    LOOP_TYPES: ['sensebox_lora_cayenne_send'],
 };
@@ -73,6 +73,7 @@ Blockly.Blocks['sensebox_osem_connection'] = {
        * Blockly.Blocks['controls_flow_statements'].LOOP_TYPES.push('custom_loop');
        */
        selectedBox = this.getFieldValue('BoxID');
        console.log(selectedBox)
        if (selectedBox !== '' && boxes) {
            var accessToken = boxes.find(element => element._id === selectedBox).access_token
            if (accessToken !== undefined) {
@@ -159,6 +160,7 @@ Blockly.Blocks['sensebox_send_to_osem'] = {
                for (var i = 0; i < box.sensors.length; i++) {
                    dropdown.push([box.sensors[i].title, box.sensors[i]._id])
                }
                console.log(dropdown)
            }
            if (dropdown.length > 1) {
                var options = dropdown.slice(1)
@@ -1,78 +0,0 @@
 import * as Blockly from "blockly";
 import { getColour } from "../helpers/colour";
 import * as Types from "../helpers/types";
 Blockly.Blocks["sensebox_rtc_init"] = {
  init: function () {
    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
    this.setColour(getColour().time);
    this.appendDummyInput().appendField(Blockly.Msg.sensebox_rtc_init);
    this.setPreviousStatement(true);
    this.setNextStatement(true);
    this.setTooltip(Blockly.Msg.sensebox_rtc_init_tooltip);
  },
 };
 Blockly.Blocks["sensebox_rtc_set"] = {
  init: function () {
    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
    this.setColour(getColour().time);
    this.appendDummyInput().appendField(Blockly.Msg.sensebox_rtc_set);
    this.appendValueInput("second").appendField(
      Blockly.Msg.sensebox_rtc_second
    );
    this.appendValueInput("minutes").appendField(
      Blockly.Msg.sensebox_rtc_minutes
    );
    this.appendValueInput("hour").appendField(Blockly.Msg.sensebox_rtc_hour);
    this.appendValueInput("day").appendField(Blockly.Msg.sensebox_rtc_day);
    this.appendValueInput("month").appendField(Blockly.Msg.sensebox_rtc_month);
    this.appendValueInput("year").appendField(Blockly.Msg.sensebox_rtc_year);
    this.setPreviousStatement(true);
    this.setNextStatement(true);
    this.setTooltip(Blockly.Msg.sensebox_rtc_set_tooltip);
  },
 };
 Blockly.Blocks["sensebox_rtc_set_ntp"] = {
  init: function () {
    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
    this.setColour(getColour().time);
    this.appendValueInput("time").appendField(Blockly.Msg.sensebox_rtc_set_ntp);
    this.setPreviousStatement(true);
    this.setNextStatement(true);
    this.setTooltip(Blockly.Msg.sensebox_rtc_set_ntp_tooltip);
  },
 };
 Blockly.Blocks["sensebox_rtc_get"] = {
  init: function () {
    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
    this.setColour(getColour().time);
    this.appendDummyInput()
      .appendField(Blockly.Msg.sensebox_rtc_get)
      .appendField(
        new Blockly.FieldDropdown([
          [Blockly.Msg.sensebox_rtc_hour, "hour"],
          [Blockly.Msg.sensebox_rtc_minutes, "minutes"],
          [Blockly.Msg.sensebox_rtc_second, "seconds"],
          [Blockly.Msg.sensebox_rtc_day, "day"],
          [Blockly.Msg.sensebox_rtc_month, "month"],
          [Blockly.Msg.sensebox_rtc_year, "year"],
        ]),
        "dropdown"
      );
    this.setOutput(true, Types.LARGE_NUMBER.typeId);
    this.setTooltip(Blockly.Msg.sensebox_rtc_get_tooltip);
  },
 };
 Blockly.Blocks["sensebox_rtc_get_timestamp"] = {
  init: function () {
    this.setHelpUrl(Blockly.Msg.sensebox_rtc_helpurl);
    this.setColour(getColour().time);
    this.appendDummyInput().appendField(Blockly.Msg.sensebox_rtc_get_timestamp);
    this.setOutput(true);
    this.setTooltip(Blockly.Msg.sensebox_rtc_get_timestamp_tooltip);
  },
 };
@@ -1,80 +1,103 @@
-import * as Blockly from 'blockly/core';
+import * as Blockly from "blockly/core";
-import { getColour } from '../helpers/colour';
+import { getColour } from "../helpers/colour";
 var checkFileName = function (filename) {
  var length = filename.length;
  if (length > 8) {
    alert("dateiname sollte kleiner als 8 Zeichen sein");
    return filename.slice(0, 8);
  }
  return filename;
 };
-Blockly.Blocks['sensebox_sd_open_file'] = {
+Blockly.Blocks["sensebox_sd_open_file"] = {
-    init: function () {
+  init: function () {
-        this.appendDummyInput()
+    this.appendDummyInput()
-            .appendField(Blockly.Msg.senseBox_sd_open_file)
+      .appendField(Blockly.Msg.senseBox_sd_open_file)
-            .setAlign(Blockly.ALIGN_LEFT)
+      .setAlign(Blockly.ALIGN_LEFT)
-            .appendField(
+      .appendField(
-                new Blockly.FieldTextInput('Data.txt'),
+        new Blockly.FieldTextInput("Data", checkFileName),
-                'Filename');
+        "Filename"
-        this.appendStatementInput('SD')
+      )
-            .setCheck(null);
+      .appendField(".")
-        this.setPreviousStatement(true, null);
+      .appendField(
-        this.setNextStatement(true, null);
+        new Blockly.FieldDropdown([
-        this.setColour(getColour().sensebox);
+          ["txt", "txt"],
-        this.setTooltip(Blockly.Msg.senseBox_sd_open_file_tooltip);
+          ["csv", "csv"],
-        this.setHelpUrl('https://docs.sensebox.de/hardware/bee-sd/');
+        ]),
        "extension"
      );
    this.appendStatementInput("SD").setCheck(null);
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(getColour().sensebox);
    this.setTooltip(Blockly.Msg.senseBox_sd_open_file_tooltip);
    this.setHelpUrl("https://docs.sensebox.de/hardware/bee-sd/");
  },
 };
 Blockly.Blocks["sensebox_sd_create_file"] = {
  init: function () {
    this.appendDummyInput()
      .appendField(Blockly.Msg.senseBox_sd_create_file)
      .setAlign(Blockly.ALIGN_LEFT)
      .appendField(
        new Blockly.FieldTextInput("Data", checkFileName),
        "Filename"
      )
      .appendField(".")
      .appendField(
        new Blockly.FieldDropdown([
          ["txt", "txt"],
          ["csv", "csv"],
        ]),
        "extension"
      );
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(getColour().sensebox);
    this.setTooltip(Blockly.Msg.senseBox_sd_create_file_tooltip);
    this.setHelpUrl("https://docs.sensebox.de/hardware/bee-sd/");
  },
 };
 Blockly.Blocks["sensebox_sd_write_file"] = {
  init: function () {
    this.appendDummyInput()
      .appendField(Blockly.Msg.senseBox_sd_write_file)
      .setAlign(Blockly.ALIGN_LEFT);
    this.appendValueInput("DATA").setCheck(null);
    this.appendDummyInput("CheckboxText")
      .appendField(Blockly.Msg.senseBox_output_linebreak)
      .appendField(new Blockly.FieldCheckbox("TRUE"), "linebreak");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(getColour().sensebox);
    this.setTooltip(Blockly.Msg.senseBox_sd_write_file_tooltip);
    this.setHelpUrl("https://docs.sensebox.de/hardware/bee-sd/");
  },
  /**
   * Called whenever anything on the workspace changes.
   * Add warning if block is not nested inside a the correct loop.
   * @param {!Blockly.Events.Abstract} e Change event.
   * @this Blockly.Block
   */
  onchange: function (e) {
    var legal = false;
    // Is the block nested in a loop?
    var block = this;
    do {
      if (this.LOOP_TYPES.indexOf(block.type) !== -1) {
        legal = true;
        break;
      }
      block = block.getSurroundParent();
    } while (block);
    if (legal) {
      this.setWarningText(null);
    } else {
      this.setWarningText(Blockly.Msg.CONTROLS_FLOW_STATEMENTS_WARNING);
    }
-};
+  },
-
+  LOOP_TYPES: ["sensebox_sd_open_file"],
 Blockly.Blocks['sensebox_sd_create_file'] = {
    init: function () {
        this.appendDummyInput()
            .appendField(Blockly.Msg.senseBox_sd_create_file)
            .setAlign(Blockly.ALIGN_LEFT)
            .appendField(Blockly.Msg.senseBox_output_filename)
            .appendField(
                new Blockly.FieldTextInput('Data.txt'),
                'Filename');
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
        this.setColour(getColour().sensebox);
        this.setTooltip(Blockly.Msg.senseBox_sd_create_file_tooltip);
        this.setHelpUrl('https://docs.sensebox.de/hardware/bee-sd/');
    }
 };
 Blockly.Blocks['sensebox_sd_write_file'] = {
    init: function () {
        this.appendDummyInput()
            .appendField(Blockly.Msg.senseBox_sd_write_file)
            .setAlign(Blockly.ALIGN_LEFT);
        this.appendValueInput('DATA')
            .setCheck(null);
        this.appendDummyInput('CheckboxText')
            .appendField(Blockly.Msg.senseBox_output_linebreak)
            .appendField(new Blockly.FieldCheckbox('TRUE'), 'linebreak');
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
        this.setColour(getColour().sensebox);
        this.setTooltip(Blockly.Msg.senseBox_sd_write_file_tooltip);
        this.setHelpUrl('https://docs.sensebox.de/hardware/bee-sd/');
    },
    /**
     * Called whenever anything on the workspace changes.
     * Add warning if block is not nested inside a the correct loop.
     * @param {!Blockly.Events.Abstract} e Change event.
     * @this Blockly.Block
     */
    onchange: function (e) {
        var legal = false;
        // Is the block nested in a loop?
        var block = this;
        do {
            if (this.LOOP_TYPES.indexOf(block.type) !== -1) {
                legal = true;
                break;
            }
            block = block.getSurroundParent();
        } while (block);
        if (legal) {
            this.setWarningText(null);
        } else {
            this.setWarningText(Blockly.Msg.CONTROLS_FLOW_STATEMENTS_WARNING);
        }
    },
    LOOP_TYPES: ['sensebox_sd_open_file'],
 };
@@ -1,36 +1,4 @@
 import * as Blockly from "blockly/core";
 import { getColour } from "../helpers/colour";
 import * as Types from "../helpers/types";
 Blockly.Blocks["sensebox_multiplexer_init"] = {
  init: function () {
    this.appendDummyInput().appendField(Blockly.Msg.senseBox_multiplexer_init);
    this.appendValueInput("nrChannels").setCheck(
      Types.getCompatibleTypes("int")
    );
    this.appendDummyInput().appendField(
      Blockly.Msg.senseBox_multplexer_nchannels
    );
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setInputsInline("true");
    this.setColour(getColour().sensebox);
    this.setTooltip(Blockly.Msg.senseBox_multiplexer_init_tooltip);
    this.setHelpUrl(Blockly.Msg.senseBox_multiplexer_init_helpurl);
  },
 };
-Blockly.Blocks["sensebox_multiplexer_changeChannel"] = {
+
-  init: function () {
+
    this.appendDummyInput().appendField(
      Blockly.Msg.senseBox_multiplexer_changeChannel
    );
    this.appendValueInput("Channel").setCheck(Types.getCompatibleTypes("int"));
    this.setInputsInline("true");
    this.setPreviousStatement(true, null);
    this.setNextStatement(true, null);
    this.setColour(getColour().sensebox);
    this.setTooltip(Blockly.Msg.sensebox_multiplexer_changeChannel_tooltip);
    this.setHelpUrl(Blockly.Msg.sensebox_multiplexer_changeChannel_helpurl);
  },
 };
@@ -8,123 +8,118 @@
 *     The arduino built in functions syntax can be found in
 *     http://arduino.cc/en/Reference/HomePage
 */
-import Blockly from 'blockly';
+import Blockly from "blockly";
-import { getColour } from '../helpers/colour'
+import { getColour } from "../helpers/colour";
-import * as Types from '../helpers/types'
+import * as Types from "../helpers/types";
-
+Blockly.Blocks["time_delay"] = {
-Blockly.Blocks['time_delay'] = {
+  /**
-    /**
+   * Delay block definition
-     * Delay block definition
+   * @this Blockly.Block
-     * @this Blockly.Block
+   */
-     */
+  init: function () {
-    init: function () {
+    this.setHelpUrl("http://arduino.cc/en/Reference/Delay");
-        this.setHelpUrl('http://arduino.cc/en/Reference/Delay');
+    this.setColour(getColour().time);
-        this.setColour(getColour().time);
+    this.appendValueInput("DELAY_TIME_MILI")
-        this.appendValueInput('DELAY_TIME_MILI')
+      .setCheck(Types.NUMBER.checkList)
-            .setCheck(Types.NUMBER.checkList)
+      .appendField(Blockly.Msg.ARD_TIME_DELAY);
-            .appendField(Blockly.Msg.ARD_TIME_DELAY);
+    this.appendDummyInput().appendField(Blockly.Msg.ARD_TIME_MS);
-        this.appendDummyInput()
+    this.setInputsInline(true);
-            .appendField(Blockly.Msg.ARD_TIME_MS);
+    this.setPreviousStatement(true, null);
-        this.setInputsInline(true);
+    this.setNextStatement(true, null);
-        this.setPreviousStatement(true, null);
+    this.setTooltip(Blockly.Msg.ARD_TIME_DELAY_TIP);
-        this.setNextStatement(true, null);
+  },
        this.setTooltip(Blockly.Msg.ARD_TIME_DELAY_TIP);
    }
 };
-Blockly.Blocks['time_delaymicros'] = {
+Blockly.Blocks["time_delaymicros"] = {
-    /**
+  /**
-     * delayMicroseconds block definition
+   * delayMicroseconds block definition
-     * @this Blockly.Block
+   * @this Blockly.Block
-     */
+   */
-    init: function () {
+  init: function () {
-        this.setHelpUrl('http://arduino.cc/en/Reference/DelayMicroseconds');
+    this.setHelpUrl("http://arduino.cc/en/Reference/DelayMicroseconds");
-        this.setColour(getColour().time);
+    this.setColour(getColour().time);
-        this.appendValueInput('DELAY_TIME_MICRO')
+    this.appendValueInput("DELAY_TIME_MICRO")
-            .setCheck(Types.NUMBER.checkList)
+      .setCheck(Types.NUMBER.checkList)
-            .appendField(Blockly.Msg.ARD_TIME_DELAY);
+      .appendField(Blockly.Msg.ARD_TIME_DELAY);
-        this.appendDummyInput()
+    this.appendDummyInput().appendField(Blockly.Msg.ARD_TIME_DELAY_MICROS);
-            .appendField(Blockly.Msg.ARD_TIME_DELAY_MICROS);
+    this.setInputsInline(true);
-        this.setInputsInline(true);
+    this.setPreviousStatement(true, null);
-        this.setPreviousStatement(true, null);
+    this.setNextStatement(true, null);
-        this.setNextStatement(true, null);
+    this.setTooltip(Blockly.Msg.ARD_TIME_DELAY_MICRO_TIP);
-        this.setTooltip(Blockly.Msg.ARD_TIME_DELAY_MICRO_TIP);
+  },
    }
 };
-Blockly.Blocks['time_millis'] = {
+Blockly.Blocks["time_millis"] = {
-    /**
+  /**
-     * Elapsed time in milliseconds block definition
+   * Elapsed time in milliseconds block definition
-     * @this Blockly.Block
+   * @this Blockly.Block
-     */
+   */
-    init: function () {
+  init: function () {
-        this.setHelpUrl('http://arduino.cc/en/Reference/Millis');
+    this.setHelpUrl("http://arduino.cc/en/Reference/Millis");
-        this.setColour(getColour().time);
+    this.setColour(getColour().time);
-        this.appendDummyInput()
+    this.appendDummyInput().appendField(Blockly.Msg.ARD_TIME_MILLIS);
-            .appendField(Blockly.Msg.ARD_TIME_MILLIS);
+    this.setOutput(true, Types.LARGE_NUMBER.typeId);
-        this.setOutput(true, Types.LARGE_NUMBER.typeId);
+    this.setTooltip(Blockly.Msg.ARD_TIME_MILLIS_TIP);
-        this.setTooltip(Blockly.Msg.ARD_TIME_MILLIS_TIP);
+  },
-    },
+  /** @return {string} The type of return value for the block, an integer. */
-    /** @return {string} The type of return value for the block, an integer. */
+  getBlockType: function () {
-    getBlockType: function () {
+    return Blockly.Types.LARGE_NUMBER;
-        return Blockly.Types.LARGE_NUMBER;
+  },
    }
 };
-Blockly.Blocks['time_micros'] = {
+Blockly.Blocks["time_micros"] = {
-    /**
+  /**
-     * Elapsed time in microseconds block definition
+   * Elapsed time in microseconds block definition
-     * @this Blockly.Block
+   * @this Blockly.Block
-     */
+   */
-    init: function () {
+  init: function () {
-        this.setHelpUrl('http://arduino.cc/en/Reference/Micros');
+    this.setHelpUrl("http://arduino.cc/en/Reference/Micros");
-        this.setColour(getColour().time);
+    this.setColour(getColour().time);
-        this.appendDummyInput()
+    this.appendDummyInput().appendField(Blockly.Msg.ARD_TIME_MICROS);
-            .appendField(Blockly.Msg.ARD_TIME_MICROS);
+    this.setOutput(true, Types.LARGE_NUMBER.typeId);
-        this.setOutput(true, Types.LARGE_NUMBER.typeId);
+    this.setTooltip(Blockly.Msg.ARD_TIME_MICROS_TIP);
-        this.setTooltip(Blockly.Msg.ARD_TIME_MICROS_TIP);
+  },
-    },
+  /**
-    /**
+   * Should be a long (32bit), but  for for now an int.
-     * Should be a long (32bit), but  for for now an int.
+   * @return {string} The type of return value for the block, an integer.
-     * @return {string} The type of return value for the block, an integer.
+   */
-     */
+  getBlockType: function () {
-    getBlockType: function () {
+    return Types.LARGE_NUMBER;
-        return Types.LARGE_NUMBER;
+  },
    }
 };
-Blockly.Blocks['infinite_loop'] = {
+Blockly.Blocks["infinite_loop"] = {
-    /**
+  /**
-     * Waits forever, end of program.
+   * Waits forever, end of program.
-     * @this Blockly.Block
+   * @this Blockly.Block
-     */
+   */
-    init: function () {
+  init: function () {
-        this.setHelpUrl('');
+    this.setHelpUrl("");
-        this.setColour(getColour().time);
+    this.setColour(getColour().time);
-        this.appendDummyInput()
+    this.appendDummyInput().appendField(Blockly.Msg.ARD_TIME_INF);
-            .appendField(Blockly.Msg.ARD_TIME_INF);
+    this.setInputsInline(true);
-        this.setInputsInline(true);
+    this.setPreviousStatement(true);
-        this.setPreviousStatement(true);
+    this.setTooltip(Blockly.Msg.ARD_TIME_INF_TIP);
-        this.setTooltip(Blockly.Msg.ARD_TIME_INF_TIP);
+  },
    }
 };
-Blockly.Blocks['sensebox_interval_timer'] = {
+Blockly.Blocks["sensebox_interval_timer"] = {
-    init: function () {
+  init: function () {
-        this.setTooltip(Blockly.Msg.senseBox_interval_timer_tip);
+    this.setTooltip(Blockly.Msg.senseBox_interval_timer_tip);
-        this.setInputsInline(true);
+    this.setInputsInline(true);
-        this.setHelpUrl('');
+    this.setHelpUrl("");
-        this.setColour(getColour().time);
+    this.setColour(getColour().time);
-        this.appendDummyInput()
+    this.appendDummyInput()
-            .appendField(Blockly.Msg.senseBox_interval_timer);
+      .appendField(Blockly.Msg.senseBox_interval_timer)
-        this.appendDummyInput()
+      .appendField(new Blockly.FieldTextInput("name"), "name");
-            .setAlign(Blockly.ALIGN_LEFT)
+    this.appendDummyInput()
-            .appendField(new Blockly.FieldTextInput("10000"), "interval")
+      .appendField(Blockly.Msg.senseBox_interval_time)
-            .appendField(Blockly.Msg.senseBox_interval);
+      .setAlign(Blockly.ALIGN_LEFT)
-        this.appendStatementInput('DO')
+      .appendField(new Blockly.FieldTextInput("10000"), "interval")
-            .setCheck(null);
+      .appendField(Blockly.Msg.senseBox_interval);
-        this.setPreviousStatement(true, null);
+    this.appendStatementInput("DO").setCheck(null);
-        this.setNextStatement(true, null);
+    this.setPreviousStatement(true, null);
-    }
+    this.setNextStatement(true, null);
  },
 };
@@ -19,10 +19,8 @@ Blockly.Blocks["variables_set_dynamic"] = {
    let variable = Blockly.getMainWorkspace()
      .getVariableMap()
      .getVariableById(variableID);
-    if (variable !== null) {
+    this.getField("type").setValue(variable.type);
-      this.getField("type").setValue(variable.type);
+    this.getInput("VALUE").setCheck(getCompatibleTypes(variable.type));
      this.getInput("VALUE").setCheck(getCompatibleTypes(variable.type));
    }
  },
 };
@@ -39,8 +37,7 @@ Blockly.Blocks["variables_get_dynamic"] = {
    let variable = Blockly.getMainWorkspace()
      .getVariableMap()
      .getVariableById(variableID);
-    if (variable !== null) {
+    this.getField("type").setValue(variable.type);
-      this.getField("type").setValue(variable.type);
+    this.setOutput(true, variable.type);
    }
  },
 };
@@ -1,6 +1,6 @@
 /**
 * @license
- *
+ * 
 * Copyright 2019 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
@@ -24,13 +24,13 @@
 // More on generating code:
 // https://developers.google.com/blockly/guides/create-custom-blocks/generating-code
-import * as Blockly from "blockly/core";
+import * as Blockly from 'blockly/core';
 /**
 * Arduino code generator.
 * @type !Blockly.Generator
 */
-Blockly["Arduino"] = new Blockly.Generator("Arduino");
+Blockly['Arduino'] = new Blockly.Generator('Arduino');
 /**
 * List of illegal variable names.
@@ -39,153 +39,156 @@ Blockly["Arduino"] = new Blockly.Generator("Arduino");
 * accidentally clobbering a built-in object or function.
 * @private
 */
-Blockly["Arduino"].addReservedWords(
+Blockly['Arduino'].addReservedWords(
-  // http://arduino.cc/en/Reference/HomePage
+    // http://arduino.cc/en/Reference/HomePage
-  "setup,loop,if,else,for,switch,case,while," +
+    'setup,loop,if,else,for,switch,case,while,' +
-    "do,break,continue,return,goto,define,include," +
+    'do,break,continue,return,goto,define,include,' +
-    "HIGH,LOW,INPUT,OUTPUT,INPUT_PULLUP,true,false," +
+    'HIGH,LOW,INPUT,OUTPUT,INPUT_PULLUP,true,false,' +
-    "interger, constants,floating,point,void,boolean,char," +
+    'interger, constants,floating,point,void,boolean,char,' +
-    "unsigned,byte,int,word,long,float,double,string,String,array," +
+    'unsigned,byte,int,word,long,float,double,string,String,array,' +
-    "static, volatile,const,sizeof,pinMode,digitalWrite,digitalRead," +
+    'static, volatile,const,sizeof,pinMode,digitalWrite,digitalRead,' +
-    "analogReference,analogRead,analogWrite,tone,noTone,shiftOut,shitIn," +
+    'analogReference,analogRead,analogWrite,tone,noTone,shiftOut,shitIn,' +
-    "pulseIn,millis,micros,delay,delayMicroseconds,min,max,abs,constrain," +
+    'pulseIn,millis,micros,delay,delayMicroseconds,min,max,abs,constrain,' +
-    "map,pow,sqrt,sin,cos,tan,randomSeed,random,lowByte,highByte,bitRead," +
+    'map,pow,sqrt,sin,cos,tan,randomSeed,random,lowByte,highByte,bitRead,' +
-    "bitWrite,bitSet,bitClear,ultraSonicDistance,parseDouble,setNeoPixelColor," +
+    'bitWrite,bitSet,bitClear,ultraSonicDistance,parseDouble,setNeoPixelColor,' +
-    "bit,attachInterrupt,detachInterrupt,interrupts,noInterrupts",
+    'bit,attachInterrupt,detachInterrupt,interrupts,noInterrupts',
-  "short",
+    'short',
-  "isBtnPressed"
+    'isBtnPressed'
 );
 /**
 * Order of operation ENUMs.
 *
 */
-Blockly["Arduino"].ORDER_ATOMIC = 0; // 0 "" ...
+Blockly['Arduino'].ORDER_ATOMIC = 0; // 0 "" ...
-Blockly["Arduino"].ORDER_UNARY_POSTFIX = 1; // expr++ expr-- () [] .
+Blockly['Arduino'].ORDER_UNARY_POSTFIX = 1; // expr++ expr-- () [] .
-Blockly["Arduino"].ORDER_UNARY_PREFIX = 2; // -expr !expr ~expr ++expr --expr
+Blockly['Arduino'].ORDER_UNARY_PREFIX = 2; // -expr !expr ~expr ++expr --expr
-Blockly["Arduino"].ORDER_MULTIPLICATIVE = 3; // * / % ~/
+Blockly['Arduino'].ORDER_MULTIPLICATIVE = 3; // * / % ~/
-Blockly["Arduino"].ORDER_ADDITIVE = 4; // + -
+Blockly['Arduino'].ORDER_ADDITIVE = 4; // + -
-Blockly["Arduino"].ORDER_LOGICAL_NOT = 4.4; // !
+Blockly['Arduino'].ORDER_LOGICAL_NOT = 4.4; // !
-Blockly["Arduino"].ORDER_SHIFT = 5; // << >>
+Blockly['Arduino'].ORDER_SHIFT = 5; // << >>
-Blockly["Arduino"].ORDER_MODULUS = 5.3; // %
+Blockly['Arduino'].ORDER_MODULUS = 5.3; // %
-Blockly["Arduino"].ORDER_RELATIONAL = 6; // is is! >= > <= <
+Blockly['Arduino'].ORDER_RELATIONAL = 6; // is is! >= > <= <
-Blockly["Arduino"].ORDER_EQUALITY = 7; // === !== === !==
+Blockly['Arduino'].ORDER_EQUALITY = 7; // === !== === !==
-Blockly["Arduino"].ORDER_BITWISE_AND = 8; // &
+Blockly['Arduino'].ORDER_BITWISE_AND = 8; // &
-Blockly["Arduino"].ORDER_BITWISE_XOR = 9; // ^
+Blockly['Arduino'].ORDER_BITWISE_XOR = 9; // ^
-Blockly["Arduino"].ORDER_BITWISE_OR = 10; // |
+Blockly['Arduino'].ORDER_BITWISE_OR = 10; // |
-Blockly["Arduino"].ORDER_LOGICAL_AND = 11; // &&
+Blockly['Arduino'].ORDER_LOGICAL_AND = 11; // &&
-Blockly["Arduino"].ORDER_LOGICAL_OR = 12; // ||
+Blockly['Arduino'].ORDER_LOGICAL_OR = 12; // ||
-Blockly["Arduino"].ORDER_CONDITIONAL = 13; // expr ? expr : expr
+Blockly['Arduino'].ORDER_CONDITIONAL = 13; // expr ? expr : expr
-Blockly["Arduino"].ORDER_ASSIGNMENT = 14; // = *= /= ~/= %= += -= <<= >>= &= ^= |=
+Blockly['Arduino'].ORDER_ASSIGNMENT = 14; // = *= /= ~/= %= += -= <<= >>= &= ^= |=
-Blockly["Arduino"].ORDER_COMMA = 18; // ,
+Blockly['Arduino'].ORDER_COMMA = 18; // ,
-Blockly["Arduino"].ORDER_NONE = 99; // (...)
+Blockly['Arduino'].ORDER_NONE = 99; // (...)
 /**
- *
+ * 
- * @param {} workspace
+ * @param {} workspace 
- *
+ * 
 * Blockly Types
 */
 /**
 * Initialise the database of variable names.
 * @param {!Blockly.Workspace} workspace Workspace to generate code from.
 */
-Blockly["Arduino"].init = function (workspace) {
+Blockly['Arduino'].init = function (workspace) {
-  // Create a dictionary of definitions to be printed before the code.
+    // Create a dictionary of definitions to be printed before the code.
-  Blockly["Arduino"].libraries_ = Object.create(null);
+    Blockly['Arduino'].libraries_ = Object.create(null);
-  Blockly["Arduino"].definitions_ = Object.create(null);
+    Blockly['Arduino'].definitions_ = Object.create(null);
-  // creates a list of code to be setup before the setup block
+    // creates a list of code to be setup before the setup block
-  Blockly["Arduino"].setupCode_ = Object.create(null);
+    Blockly['Arduino'].setupCode_ = Object.create(null);
-  // creates a list of code to be setup before the setup block
+    // creates a list of code to be setup before the setup block
-  Blockly["Arduino"].phyphoxSetupCode_ = Object.create(null);
+    Blockly['Arduino'].loraSetupCode_ = Object.create(null);
-  // creates a list of code to be setup before the setup block
+    // creates a list of code for the loop to be runned once
-  Blockly["Arduino"].loraSetupCode_ = Object.create(null);
+    Blockly['Arduino'].loopCodeOnce_ = Object.create(null)
-  // creates a list of code for the loop to be runned once
+    // creates a list of code for the loop to be runned once
-  Blockly["Arduino"].loopCodeOnce_ = Object.create(null);
+    Blockly['Arduino'].codeFunctions_ = Object.create(null)
-  // creates a list of code for the loop to be runned once
+    // creates a list of code variables  
-  Blockly["Arduino"].codeFunctions_ = Object.create(null);
+    Blockly['Arduino'].variables_ = Object.create(null)
-  // creates a list of code variables
+    // Create a dictionary mapping desired function names in definitions_
-  Blockly["Arduino"].variables_ = Object.create(null);
+    // to actual function names (to avoid collisions with user functions).
    Blockly['Arduino'].functionNames_ = Object.create(null);
-  // Create a dictionary mapping desired function names in definitions_
+    Blockly['Arduino'].variablesInitCode_ = '';
  // to actual function names (to avoid collisions with user functions).
  Blockly["Arduino"].functionNames_ = Object.create(null);
-  Blockly["Arduino"].variablesInitCode_ = "";
+    if (!Blockly['Arduino'].variableDB_) {
        Blockly['Arduino'].variableDB_ = new Blockly.Names(
            Blockly['Arduino'].RESERVED_WORDS_
        );
    } else {
        Blockly['Arduino'].variableDB_.reset();
    }
-  if (!Blockly["Arduino"].variableDB_) {
+    Blockly['Arduino'].variableDB_.setVariableMap(workspace.getVariableMap());
    Blockly["Arduino"].variableDB_ = new Blockly.Names(
      Blockly["Arduino"].RESERVED_WORDS_
    );
  } else {
    Blockly["Arduino"].variableDB_.reset();
  }
-  Blockly["Arduino"].variableDB_.setVariableMap(workspace.getVariableMap());
+    // We don't have developer variables for now
    // // Add developer variables (not created or named by the user).
    // var devVarList = Blockly.Variables.allDeveloperVariables(workspace);
    // for (var i = 0; i < devVarList.length; i++) {
    //     defvars.push(Blockly['Arduino'].variableDB_.getName(devVarList[i],
    //         Blockly.Names.DEVELOPER_VARIABLE_TYPE));
    // }
-  // We don't have developer variables for now
+    const doubleVariables = workspace.getVariablesOfType('Number');
-  // // Add developer variables (not created or named by the user).
+    let i = 0;
-  // var devVarList = Blockly.Variables.allDeveloperVariables(workspace);
+    let variableCode = '';
-  // for (var i = 0; i < devVarList.length; i++) {
+    for (i = 0; i < doubleVariables.length; i += 1) {
-  //     defvars.push(Blockly['Arduino'].variableDB_.getName(devVarList[i],
+        variableCode +=
-  //         Blockly.Names.DEVELOPER_VARIABLE_TYPE));
+            'double ' +
-  // }
+            Blockly['Arduino'].variableDB_.getName(
                doubleVariables[i].getId(),
                Blockly.Variables.NAME_TYPE
            ) +
            ' = 0; \n\n';
    }
-  const doubleVariables = workspace.getVariablesOfType("Number");
+    const stringVariables = workspace.getVariablesOfType('String');
-  let i = 0;
+    for (i = 0; i < stringVariables.length; i += 1) {
-  let variableCode = "";
+        variableCode +=
-  for (i = 0; i < doubleVariables.length; i += 1) {
+            'String ' +
-    variableCode +=
+            Blockly['Arduino'].variableDB_.getName(
-      "double " +
+                stringVariables[i].getId(),
-      Blockly["Arduino"].variableDB_.getName(
+                Blockly.Variables.NAME_TYPE
-        doubleVariables[i].getId(),
+            ) +
-        Blockly.Variables.NAME_TYPE
+            ' = ""; \n\n';
-      ) +
+    }
      " = 0; \n\n";
  }
-  const stringVariables = workspace.getVariablesOfType("String");
+    const booleanVariables = workspace.getVariablesOfType('Boolean');
-  for (i = 0; i < stringVariables.length; i += 1) {
+    for (i = 0; i < booleanVariables.length; i += 1) {
-    variableCode +=
+        variableCode +=
-      "String " +
+            'boolean ' +
-      Blockly["Arduino"].variableDB_.getName(
+            Blockly['Arduino'].variableDB_.getDistinctName(
-        stringVariables[i].getId(),
+                booleanVariables[i].getId(),
-        Blockly.Variables.NAME_TYPE
+                Blockly.Variables.NAME_TYPE
-      ) +
+            ) +
-      ' = ""; \n\n';
+            ' = false; \n\n';
-  }
+    }
-  const booleanVariables = workspace.getVariablesOfType("Boolean");
+    const colourVariables = workspace.getVariablesOfType('Colour');
-  for (i = 0; i < booleanVariables.length; i += 1) {
+    for (i = 0; i < colourVariables.length; i += 1) {
-    variableCode +=
+        variableCode +=
-      "boolean " +
+            'RGB ' +
-      Blockly["Arduino"].variableDB_.getDistinctName(
+            Blockly['Arduino'].variableDB_.getName(
-        booleanVariables[i].getId(),
+                colourVariables[i].getId(),
-        Blockly.Variables.NAME_TYPE
+                Blockly.Variables.NAME_TYPE
-      ) +
+            ) +
-      " = false; \n\n";
+            ' = {0, 0, 0}; \n\n';
-  }
+    }
-  const colourVariables = workspace.getVariablesOfType("Colour");
+    Blockly['Arduino'].variablesInitCode_ = variableCode;
  for (i = 0; i < colourVariables.length; i += 1) {
    variableCode +=
      "RGB " +
      Blockly["Arduino"].variableDB_.getName(
        colourVariables[i].getId(),
        Blockly.Variables.NAME_TYPE
      ) +
      " = {0, 0, 0}; \n\n";
  }
  Blockly["Arduino"].variablesInitCode_ = variableCode;
 };
 /**
@@ -193,97 +196,88 @@ Blockly["Arduino"].init = function (workspace) {
 * @param {string} code Generated code.
 * @return {string} Completed code.
 */
-Blockly["Arduino"].finish = function (code) {
+Blockly['Arduino'].finish = function (code) {
-  let libraryCode = "";
+    let libraryCode = '';
-  let variablesCode = "";
+    let variablesCode = '';
-  let codeFunctions = "";
+    let codeFunctions = '';
-  let functionsCode = "";
+    let functionsCode = '';
-  let definitionsCode = "";
+    let definitionsCode = '';
-  let phyphoxSetupCode = "";
+    let loopCodeOnce = '';
-  let loopCodeOnce = "";
+    let setupCode = '';
-  let setupCode = "";
+    let preSetupCode = '';
-  let preSetupCode = "";
+    let loraSetupCode = '';
-  let loraSetupCode = "";
+    let devVariables = '\n';
  let devVariables = "\n";
-  for (const key in Blockly["Arduino"].libraries_) {
+    for (const key in Blockly['Arduino'].libraries_) {
-    libraryCode += Blockly["Arduino"].libraries_[key] + "\n";
+        libraryCode += Blockly['Arduino'].libraries_[key] + '\n';
-  }
+    }
-  for (const key in Blockly["Arduino"].variables_) {
+    for (const key in Blockly['Arduino'].variables_) {
-    variablesCode += Blockly["Arduino"].variables_[key] + "\n";
+        variablesCode += Blockly['Arduino'].variables_[key] + '\n';
-  }
+    }
-  for (const key in Blockly["Arduino"].definitions_) {
+    for (const key in Blockly['Arduino'].definitions_) {
-    definitionsCode += Blockly["Arduino"].definitions_[key] + "\n";
+        definitionsCode += Blockly['Arduino'].definitions_[key] + '\n';
-  }
+    }
-  for (const key in Blockly["Arduino"].loopCodeOnce_) {
+    for (const key in Blockly['Arduino'].loopCodeOnce_) {
-    loopCodeOnce += Blockly["Arduino"].loopCodeOnce_[key] + "\n";
+        loopCodeOnce += Blockly['Arduino'].loopCodeOnce_[key] + '\n';
-  }
+    }
-  for (const key in Blockly["Arduino"].codeFunctions_) {
+    for (const key in Blockly['Arduino'].codeFunctions_) {
-    codeFunctions += Blockly["Arduino"].codeFunctions_[key] + "\n";
+        codeFunctions += Blockly['Arduino'].codeFunctions_[key] + '\n';
-  }
+    }
-  for (const key in Blockly["Arduino"].functionNames_) {
+    for (const key in Blockly['Arduino'].functionNames_) {
-    functionsCode += Blockly["Arduino"].functionNames_[key] + "\n";
+        functionsCode += Blockly['Arduino'].functionNames_[key] + '\n';
-  }
+    }
  for (const key in Blockly["Arduino"].setupCode_) {
    preSetupCode += Blockly["Arduino"].setupCode_[key] + "\n" || "";
  }
  for (const key in Blockly["Arduino"].loraSetupCode_) {
    loraSetupCode += Blockly["Arduino"].loraSetupCode_[key] + "\n" || "";
  }
-  setupCode =
+    for (const key in Blockly['Arduino'].setupCode_) {
-    "\nvoid setup() { \n" + preSetupCode + "\n" + loraSetupCode + "\n}\n";
+        preSetupCode += Blockly['Arduino'].setupCode_[key] || '';
-  for (const key in Blockly["Arduino"].phyphoxSetupCode_) {
+    }
    phyphoxSetupCode += Blockly["Arduino"].phyphoxSetupCode_[key] + "\n" || "";
  }
-  setupCode =
+    for (const key in Blockly['Arduino'].loraSetupCode_) {
-    "\nvoid setup() { \n" +
+        loraSetupCode += Blockly['Arduino'].loraSetupCode_[key] || '';
-    preSetupCode +
+    }
    "\n" +
    phyphoxSetupCode +
    "\n" +
    loraSetupCode +
    "\n}\n";
  let loopCode = "\nvoid loop() { \n" + loopCodeOnce + code + "\n}\n";
-  // Convert the definitions dictionary into a list.
+    setupCode = '\nvoid setup() { \n' + preSetupCode + '\n' + loraSetupCode + '\n}\n';
  code =
    devVariables +
    "\n" +
    libraryCode +
    "\n" +
    variablesCode +
    "\n" +
    definitionsCode +
    "\n" +
    codeFunctions +
    "\n" +
    Blockly["Arduino"].variablesInitCode_ +
    "\n" +
    functionsCode +
    "\n" +
    setupCode +
    "\n" +
    loopCode;
-  // Clean up temporary data.
+    let loopCode = '\nvoid loop() { \n' + loopCodeOnce + code + '\n}\n';
  delete Blockly["Arduino"].definitions_;
  delete Blockly["Arduino"].functionNames_;
  delete Blockly["Arduino"].loopCodeOnce_;
  delete Blockly["Arduino"].variablesInitCode_;
  delete Blockly["Arduino"].libraries_;
  Blockly["Arduino"].variableDB_.reset();
-  return code;
+
    // Convert the definitions dictionary into a list.
    code =
        devVariables +
        '\n' +
        libraryCode +
        '\n' +
        variablesCode +
        '\n' +
        definitionsCode +
        '\n' +
        codeFunctions +
        '\n' +
        Blockly['Arduino'].variablesInitCode_ +
        '\n' +
        functionsCode +
        '\n' +
        setupCode +
        '\n' +
        loopCode
        ;
    // Clean up temporary data.
    delete Blockly['Arduino'].definitions_;
    delete Blockly['Arduino'].functionNames_;
    delete Blockly['Arduino'].loopCodeOnce_;
    delete Blockly['Arduino'].variablesInitCode_;
    delete Blockly['Arduino'].libraries_;
    Blockly['Arduino'].variableDB_.reset();
    return code;
 };
 /**
@@ -292,8 +286,8 @@ Blockly["Arduino"].finish = function (code) {
 * @param {string} line Line of generated code.
 * @return {string} Legal line of code.
 */
-Blockly["Arduino"].scrubNakedValue = function (line) {
+Blockly['Arduino'].scrubNakedValue = function (line) {
-  return line + ";\n";
+    return line + ';\n';
 };
 /**
@@ -303,14 +297,14 @@ Blockly["Arduino"].scrubNakedValue = function (line) {
 * @return {string} Arduino string.
 * @private
 */
-Blockly["Arduino"].quote_ = function (string) {
+Blockly['Arduino'].quote_ = function (string) {
-  // Can't use goog.string.quote since Google's style guide recommends
+    // Can't use goog.string.quote since Google's style guide recommends
-  // JS string literals use single quotes.
+    // JS string literals use single quotes.
-  string = string
+    string = string
-    .replace(/\\/g, "\\\\")
+        .replace(/\\/g, '\\\\')
-    .replace(/\n/g, "\\\n")
+        .replace(/\n/g, '\\\n')
-    .replace(/'/g, "\\'");
+        .replace(/'/g, "\\'");
-  return '"' + string + '"';
+    return '"' + string + '"';
 };
 /**
@@ -323,42 +317,43 @@ Blockly["Arduino"].quote_ = function (string) {
 * @return {string} Arduino code with comments and subsequent blocks added.
 * @private
 */
-Blockly["Arduino"].scrub_ = function (block, code) {
+Blockly['Arduino'].scrub_ = function (block, code) {
-  let commentCode = "";
+    let commentCode = '';
-  // Only collect comments for blocks that aren't inline.
+    // Only collect comments for blocks that aren't inline.
-  if (!block.outputConnection || !block.outputConnection.targetConnection) {
+    if (!block.outputConnection || !block.outputConnection.targetConnection) {
-    // Collect comment for this block.
+        // Collect comment for this block.
-    let comment = block.getCommentText();
+        let comment = block.getCommentText();
-    //@ts-ignore
+        //@ts-ignore
-    comment = comment
+        comment = comment ? Blockly.utils.string.wrap(
-      ? Blockly.utils.string.wrap(comment, Blockly["Arduino"].COMMENT_WRAP - 3)
+            comment,
-      : null;
+            Blockly['Arduino'].COMMENT_WRAP - 3
-    if (comment) {
+        ) : null;
-      if (block.getProcedureDef) {
+        if (comment) {
-        // Use a comment block for function comments.
+            if (block.getProcedureDef) {
-        commentCode +=
+                // Use a comment block for function comments.
-          "/**\n" +
+                commentCode +=
-          Blockly["Arduino"].prefixLines(comment + "\n", " * ") +
+                    '/**\n' +
-          " */\n";
+                    Blockly['Arduino'].prefixLines(comment + '\n', ' * ') +
-      } else {
+                    ' */\n';
-        commentCode += Blockly["Arduino"].prefixLines(comment + "\n", "// ");
+            } else {
-      }
+                commentCode += Blockly['Arduino'].prefixLines(comment + '\n', '// ');
-    }
+            }
-    // Collect comments for all value arguments.
+        }
-    // Don't collect comments for nested statements.
+        // Collect comments for all value arguments.
-    for (let i = 0; i < block.inputList.length; i++) {
+        // Don't collect comments for nested statements.
-      if (block.inputList[i].type === Blockly.INPUT_VALUE) {
+        for (let i = 0; i < block.inputList.length; i++) {
-        const childBlock = block.inputList[i].connection.targetBlock();
+            if (block.inputList[i].type === Blockly.INPUT_VALUE) {
-        if (childBlock) {
+                const childBlock = block.inputList[i].connection.targetBlock();
-          const comment = Blockly["Arduino"].allNestedComments(childBlock);
+                if (childBlock) {
-          if (comment) {
+                    const comment = Blockly['Arduino'].allNestedComments(childBlock);
-            commentCode += Blockly["Arduino"].prefixLines(comment, "// ");
+                    if (comment) {
-          }
+                        commentCode += Blockly['Arduino'].prefixLines(comment, '// ');
                    }
                }
            }
        }
      }
    }
-  }
+    const nextBlock = block.nextConnection && block.nextConnection.targetBlock();
-  const nextBlock = block.nextConnection && block.nextConnection.targetBlock();
+    const nextCode = Blockly['Arduino'].blockToCode(nextBlock);
-  const nextCode = Blockly["Arduino"].blockToCode(nextBlock);
+    return commentCode + code + nextCode;
-  return commentCode + code + nextCode;
+};
 };
@@ -1,25 +1,24 @@
-import "./generator";
+import './generator';
-import "./loops";
+import './loops';
-import "./sensebox-sensors";
+import './sensebox-sensors';
-import "./sensebox-telegram";
+import './sensebox-telegram';
-import "./sensebox-osem";
+import './sensebox-osem';
-import "./sensebox-web";
+import './sensebox-web';
-import "./sensebox-display";
+import './sensebox-display';
-import "./sensebox-lora";
+import './sensebox-lora';
-import "./sensebox-led";
+import './sensebox-led';
-import "./sensebox";
+import './sensebox-sd';
-import "./sensebox-rtc";
+import './mqtt';
-import "./sensebox-ble";
+import './logic';
-import "./sensebox-sd";
+import './text';
-import "./mqtt";
+import './math';
-import "./logic";
+import './map';
-import "./text";
+import './io';
-import "./math";
+import './audio';
-import "./map";
+import './procedures';
-import "./io";
+import './time';
-import "./audio";
+import './variables';
-import "./procedures";
+import './lists';
-import "./time";
+import './webserver';
-import "./variables";
+
-import "./lists";
+
 import "./webserver";
@@ -1,4 +1,5 @@
-import * as Blockly from "blockly/core";
+
 import * as Blockly from 'blockly/core';
 /**
 * @license Licensed under the Apache License, Version 2.0 (the "License"):
@@ -18,15 +19,15 @@ import * as Blockly from "blockly/core";
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino["math_number"] = function (block) {
+Blockly.Arduino['math_number'] = function (block) {
-  // Numeric value.
+    // Numeric value.
-  var code = parseFloat(block.getFieldValue("NUM"));
+    var code = parseFloat(block.getFieldValue('NUM'));
-  if (code === Infinity) {
+    if (code === Infinity) {
-    code = "INFINITY";
+        code = 'INFINITY';
-  } else if (code === -Infinity) {
+    } else if (code === -Infinity) {
-    code = "-INFINITY";
+        code = '-INFINITY';
-  }
+    }
-  return [code, Blockly.Arduino.ORDER_ATOMIC];
+    return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
 /**
@@ -36,27 +37,27 @@ Blockly.Arduino["math_number"] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino["math_arithmetic"] = function (block) {
+Blockly.Arduino['math_arithmetic'] = function (block) {
-  var OPERATORS = {
+    var OPERATORS = {
-    ADD: [" + ", Blockly.Arduino.ORDER_ADDITIVE],
+        ADD: [' + ', Blockly.Arduino.ORDER_ADDITIVE],
-    MINUS: [" - ", Blockly.Arduino.ORDER_ADDITIVE],
+        MINUS: [' - ', Blockly.Arduino.ORDER_ADDITIVE],
-    MULTIPLY: [" * ", Blockly.Arduino.ORDER_MULTIPLICATIVE],
+        MULTIPLY: [' * ', Blockly.Arduino.ORDER_MULTIPLICATIVE],
-    DIVIDE: [" / ", Blockly.Arduino.ORDER_MULTIPLICATIVE],
+        DIVIDE: [' / ', Blockly.Arduino.ORDER_MULTIPLICATIVE],
-    POWER: [null, Blockly.Arduino.ORDER_NONE], // Handle power separately.
+        POWER: [null, Blockly.Arduino.ORDER_NONE]  // Handle power separately.
-  };
+    };
-  var tuple = OPERATORS[block.getFieldValue("OP")];
+    var tuple = OPERATORS[block.getFieldValue('OP')];
-  var operator = tuple[0];
+    var operator = tuple[0];
-  var order = tuple[1];
+    var order = tuple[1];
-  var argument0 = Blockly.Arduino.valueToCode(block, "A", order) || "0";
+    var argument0 = Blockly.Arduino.valueToCode(block, 'A', order) || '0';
-  var argument1 = Blockly.Arduino.valueToCode(block, "B", order) || "0";
+    var argument1 = Blockly.Arduino.valueToCode(block, 'B', order) || '0';
-  var code;
+    var code;
-  // Power in C++ requires a special case since it has no operator.
+    // Power in C++ requires a special case since it has no operator.
-  if (!operator) {
+    if (!operator) {
-    code = "Math.pow(" + argument0 + ", " + argument1 + ")";
+        code = 'Math.pow(' + argument0 + ', ' + argument1 + ')';
-    return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
+        return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
-  }
+    }
-  code = argument0 + operator + argument1;
+    code = argument0 + operator + argument1;
-  return [code, order];
+    return [code, order];
 };
 /**
@@ -65,103 +66,90 @@ Blockly.Arduino["math_arithmetic"] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino["math_single"] = function (block) {
+Blockly.Arduino['math_single'] = function (block) {
-  var operator = block.getFieldValue("OP");
+    var operator = block.getFieldValue('OP');
-  var code;
+    var code;
-  var arg;
+    var arg;
-  if (operator === "NEG") {
+    if (operator === 'NEG') {
-    // Negation is a special case given its different operator precedents.
+        // Negation is a special case given its different operator precedents.
-    arg =
+        arg = Blockly.Arduino.valueToCode(block, 'NUM',
-      Blockly.Arduino.valueToCode(
+            Blockly.Arduino.ORDER_UNARY_PREFIX) || '0';
-        block,
+        if (arg[0] === '-') {
-        "NUM",
+            // --3 is not legal in C++ in this context.
-        Blockly.Arduino.ORDER_UNARY_PREFIX
+            arg = ' ' + arg;
-      ) || "0";
+        }
-    if (arg[0] === "-") {
+        code = '-' + arg;
-      // --3 is not legal in C++ in this context.
+        return [code, Blockly.Arduino.ORDER_UNARY_PREFIX];
      arg = " " + arg;
    }
-    code = "-" + arg;
+    if (operator === 'ABS' || operator.substring(0, 5) === 'ROUND') {
-    return [code, Blockly.Arduino.ORDER_UNARY_PREFIX];
+        arg = Blockly.Arduino.valueToCode(block, 'NUM',
-  }
+            Blockly.Arduino.ORDER_UNARY_POSTFIX) || '0';
-  if (operator === "ABS" || operator.substring(0, 5) === "ROUND") {
+    } else if (operator === 'SIN' || operator === 'COS' || operator === 'TAN') {
-    arg =
+        arg = Blockly.Arduino.valueToCode(block, 'NUM',
-      Blockly.Arduino.valueToCode(
+            Blockly.Arduino.ORDER_MULTIPLICATIVE) || '0';
-        block,
+    } else {
-        "NUM",
+        arg = Blockly.Arduino.valueToCode(block, 'NUM',
-        Blockly.Arduino.ORDER_UNARY_POSTFIX
+            Blockly.Arduino.ORDER_NONE) || '0';
-      ) || "0";
+    }
-  } else if (operator === "SIN" || operator === "COS" || operator === "TAN") {
+    // First, handle cases which generate values that don't need parentheses.
-    arg =
+    switch (operator) {
-      Blockly.Arduino.valueToCode(
+        case 'ABS':
-        block,
+            code = 'abs(' + arg + ')';
-        "NUM",
+            break;
-        Blockly.Arduino.ORDER_MULTIPLICATIVE
+        case 'ROOT':
-      ) || "0";
+            code = 'sqrt(' + arg + ')';
-  } else {
+            break;
-    arg =
+        case 'LN':
-      Blockly.Arduino.valueToCode(block, "NUM", Blockly.Arduino.ORDER_NONE) ||
+            code = 'log(' + arg + ')';
-      "0";
+            break;
-  }
+        case 'EXP':
-  // First, handle cases which generate values that don't need parentheses.
+            code = 'exp(' + arg + ')';
-  switch (operator) {
+            break;
-    case "ABS":
+        case 'POW10':
-      code = "abs(" + arg + ")";
+            code = 'pow(10,' + arg + ')';
-      break;
+            break;
-    case "ROOT":
+        case 'ROUND':
-      code = "sqrt(" + arg + ")";
+            code = 'round(' + arg + ')';
-      break;
+            break;
-    case "LN":
+        case 'ROUNDUP':
-      code = "log(" + arg + ")";
+            code = 'ceil(' + arg + ')';
-      break;
+            break;
-    case "EXP":
+        case 'ROUNDDOWN':
-      code = "exp(" + arg + ")";
+            code = 'floor(' + arg + ')';
-      break;
+            break;
-    case "POW10":
+        case 'SIN':
-      code = "pow(10," + arg + ")";
+            code = 'sin(' + arg + ' / 180 * Math.PI)';
-      break;
+            break;
-    case "ROUND":
+        case 'COS':
-      code = "round(" + arg + ")";
+            code = 'cos(' + arg + ' / 180 * Math.PI)';
-      break;
+            break;
-    case "ROUNDUP":
+        case 'TAN':
-      code = "ceil(" + arg + ")";
+            code = 'tan(' + arg + ' / 180 * Math.PI)';
-      break;
+            break;
-    case "ROUNDDOWN":
+        default:
-      code = "floor(" + arg + ")";
+            break;
-      break;
+    }
-    case "SIN":
+    if (code) {
-      code = "sin(" + arg + " / 180 * Math.PI)";
+        return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
-      break;
+    }
-    case "COS":
+    // Second, handle cases which generate values that may need parentheses.
-      code = "cos(" + arg + " / 180 * Math.PI)";
+    switch (operator) {
-      break;
+        case 'LOG10':
-    case "TAN":
+            code = 'log(' + arg + ') / log(10)';
-      code = "tan(" + arg + " / 180 * Math.PI)";
+            break;
-      break;
+        case 'ASIN':
-    default:
+            code = 'asin(' + arg + ') / M_PI * 180';
-      break;
+            break;
-  }
+        case 'ACOS':
-  if (code) {
+            code = 'acos(' + arg + ') / M_PI * 180';
-    return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
+            break;
-  }
+        case 'ATAN':
-  // Second, handle cases which generate values that may need parentheses.
+            code = 'atan(' + arg + ') / M_PI * 180';
-  switch (operator) {
+            break;
-    case "LOG10":
+        default:
-      code = "log(" + arg + ") / log(10)";
+            throw new Error('Unknown math operator: ' + operator);
-      break;
+    }
-    case "ASIN":
+    return [code, Blockly.Arduino.ORDER_MULTIPLICATIVE];
      code = "asin(" + arg + ") / M_PI * 180";
      break;
    case "ACOS":
      code = "acos(" + arg + ") / M_PI * 180";
      break;
    case "ATAN":
      code = "atan(" + arg + ") / M_PI * 180";
      break;
    default:
      throw new Error("Unknown math operator: " + operator);
  }
  return [code, Blockly.Arduino.ORDER_MULTIPLICATIVE];
 };
 /**
@@ -173,16 +161,16 @@ Blockly.Arduino["math_single"] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {string} Completed code.
 */
-Blockly.Arduino["math_constant"] = function (block) {
+Blockly.Arduino['math_constant'] = function (block) {
-  var CONSTANTS = {
+    var CONSTANTS = {
-    PI: ["M_PI", Blockly.Arduino.ORDER_UNARY_POSTFIX],
+        'PI': ['M_PI', Blockly.Arduino.ORDER_UNARY_POSTFIX],
-    E: ["M_E", Blockly.Arduino.ORDER_UNARY_POSTFIX],
+        'E': ['M_E', Blockly.Arduino.ORDER_UNARY_POSTFIX],
-    GOLDEN_RATIO: ["(1 + sqrt(5)) / 2", Blockly.Arduino.ORDER_MULTIPLICATIVE],
+        'GOLDEN_RATIO': ['(1 + sqrt(5)) / 2', Blockly.Arduino.ORDER_MULTIPLICATIVE],
-    SQRT2: ["M_SQRT2", Blockly.Arduino.ORDER_UNARY_POSTFIX],
+        'SQRT2': ['M_SQRT2', Blockly.Arduino.ORDER_UNARY_POSTFIX],
-    SQRT1_2: ["M_SQRT1_2", Blockly.Arduino.ORDER_UNARY_POSTFIX],
+        'SQRT1_2': ['M_SQRT1_2', Blockly.Arduino.ORDER_UNARY_POSTFIX],
-    INFINITY: ["INFINITY", Blockly.Arduino.ORDER_ATOMIC],
+        'INFINITY': ['INFINITY', Blockly.Arduino.ORDER_ATOMIC]
-  };
+    };
-  return CONSTANTS[block.getFieldValue("CONSTANT")];
+    return CONSTANTS[block.getFieldValue('CONSTANT')];
 };
 /**
@@ -192,72 +180,63 @@ Blockly.Arduino["math_constant"] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino["math_number_property"] = function (block) {
+Blockly.Arduino['math_number_property'] = function (block) {
-  var number_to_check =
+    var number_to_check = Blockly.Arduino.valueToCode(block, 'NUMBER_TO_CHECK',
-    Blockly.Arduino.valueToCode(
+        Blockly.Arduino.ORDER_MULTIPLICATIVE) || '0';
-      block,
+    var dropdown_property = block.getFieldValue('PROPERTY');
-      "NUMBER_TO_CHECK",
+    var code;
-      Blockly.Arduino.ORDER_MULTIPLICATIVE
+    if (dropdown_property === 'PRIME') {
-    ) || "0";
+        var func = [
-  var dropdown_property = block.getFieldValue("PROPERTY");
+            'boolean ' + Blockly.Arduino.DEF_FUNC_NAME + '(int n) {',
-  var code;
+            '  // https://en.wikipedia.org/wiki/Primality_test#Naive_methods',
-  if (dropdown_property === "PRIME") {
+            '  if (n == 2 || n == 3) {',
-    var func = [
+            '    return true;',
-      "boolean " + Blockly.Arduino.DEF_FUNC_NAME + "(int n) {",
+            '  }',
-      "  // https://en.wikipedia.org/wiki/Primality_test#Naive_methods",
+            '  // False if n is NaN, negative, is 1.',
-      "  if (n == 2 || n == 3) {",
+            '  // And false if n is divisible by 2 or 3.',
-      "    return true;",
+            '  if (isnan(n) || (n <= 1) || (n == 1) || (n % 2 == 0) || ' +
-      "  }",
+            '(n % 3 == 0)) {',
-      "  // False if n is NaN, negative, is 1.",
+            '    return false;',
-      "  // And false if n is divisible by 2 or 3.",
+            '  }',
-      "  if (isnan(n) || (n <= 1) || (n == 1) || (n % 2 == 0) || " +
+            '  // Check all the numbers of form 6k +/- 1, up to sqrt(n).',
-        "(n % 3 == 0)) {",
+            '  for (int x = 6; x <= sqrt(n) + 1; x += 6) {',
-      "    return false;",
+            '    if (n % (x - 1) == 0 || n % (x + 1) == 0) {',
-      "  }",
+            '      return false;',
-      "  // Check all the numbers of form 6k +/- 1, up to sqrt(n).",
+            '    }',
-      "  for (int x = 6; x <= sqrt(n) + 1; x += 6) {",
+            '  }',
-      "    if (n % (x - 1) == 0 || n % (x + 1) == 0) {",
+            '  return true;',
-      "      return false;",
+            '}'];
-      "    }",
+        var funcName = Blockly.Arduino.addFunction('mathIsPrime', func.join('\n'));
-      "  }",
+        Blockly.Arduino.addInclude('math', '#include <math.h>');
-      "  return true;",
+        code = funcName + '(' + number_to_check + ')';
-      "}",
+        return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
-    ];
+    }
-    var funcName = Blockly.Arduino.addFunction("mathIsPrime", func.join("\n"));
+    switch (dropdown_property) {
-    Blockly.Arduino.addInclude("math", "#include <math.h>");
+        case 'EVEN':
-    code = funcName + "(" + number_to_check + ")";
+            code = number_to_check + ' % 2 == 0';
-    return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
+            break;
-  }
+        case 'ODD':
-  switch (dropdown_property) {
+            code = number_to_check + ' % 2 == 1';
-    case "EVEN":
+            break;
-      code = number_to_check + " % 2 == 0";
+        case 'WHOLE':
-      break;
+            Blockly.Arduino.addInclude('math', '#include <math.h>');
-    case "ODD":
+            code = '(floor(' + number_to_check + ') == ' + number_to_check + ')';
-      code = number_to_check + " % 2 == 1";
+            break;
-      break;
+        case 'POSITIVE':
-    case "WHOLE":
+            code = number_to_check + ' > 0';
-      Blockly.Arduino.addInclude("math", "#include <math.h>");
+            break;
-      code = "(floor(" + number_to_check + ") == " + number_to_check + ")";
+        case 'NEGATIVE':
-      break;
+            code = number_to_check + ' < 0';
-    case "POSITIVE":
+            break;
-      code = number_to_check + " > 0";
+        case 'DIVISIBLE_BY':
-      break;
+            var divisor = Blockly.Arduino.valueToCode(block, 'DIVISOR',
-    case "NEGATIVE":
+                Blockly.Arduino.ORDER_MULTIPLICATIVE) || '0';
-      code = number_to_check + " < 0";
+            code = number_to_check + ' % ' + divisor + ' == 0';
-      break;
+            break;
-    case "DIVISIBLE_BY":
+        default:
-      var divisor =
+            break;
-        Blockly.Arduino.valueToCode(
+    }
-          block,
+    return [code, Blockly.Arduino.ORDER_EQUALITY];
          "DIVISOR",
          Blockly.Arduino.ORDER_MULTIPLICATIVE
        ) || "0";
      code = number_to_check + " % " + divisor + " == 0";
      break;
    default:
      break;
  }
  return [code, Blockly.Arduino.ORDER_EQUALITY];
 };
 /**
@@ -268,25 +247,19 @@ Blockly.Arduino["math_number_property"] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino["math_change"] = function (block) {
+Blockly.Arduino['math_change'] = function (block) {
-  var argument0 =
+    var argument0 = Blockly.Arduino.valueToCode(block, 'DELTA',
-    Blockly.Arduino.valueToCode(
+        Blockly.Arduino.ORDER_ADDITIVE) || '0';
-      block,
+    var varName = Blockly.Arduino.variableDB_.getName(
-      "DELTA",
+        block.getFieldValue('VAR'), Blockly.Variables.NAME_TYPE);
-      Blockly.Arduino.ORDER_ADDITIVE
+    return varName + ' += ' + argument0 + ';\n';
    ) || "0";
  var varName = Blockly.Arduino.variableDB_.getName(
    block.getFieldValue("VAR"),
    Blockly.Variables.NAME_TYPE
  );
  return varName + " += " + argument0 + ";\n";
 };
 /** Rounding functions have a single operand. */
-Blockly.Arduino["math_round"] = Blockly.Arduino["math_single"];
+Blockly.Arduino['math_round'] = Blockly.Arduino['math_single'];
 /** Trigonometry functions have a single operand. */
-Blockly.Arduino["math_trig"] = Blockly.Arduino["math_single"];
+Blockly.Arduino['math_trig'] = Blockly.Arduino['math_single'];
 /**
 * Generator for the math function to a list.
@@ -295,7 +268,7 @@ Blockly.Arduino["math_trig"] = Blockly.Arduino["math_single"];
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino["math_on_list"] = Blockly.Arduino.noGeneratorCodeInline;
+Blockly.Arduino['math_on_list'] = Blockly.Arduino.noGeneratorCodeInline;
 /**
 * Generator for the math modulo function (calculates remainder of X/Y).
@@ -303,21 +276,13 @@ Blockly.Arduino["math_on_list"] = Blockly.Arduino.noGeneratorCodeInline;
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino["math_modulo"] = function (block) {
+Blockly.Arduino['math_modulo'] = function (block) {
-  var argument0 =
+    var argument0 = Blockly.Arduino.valueToCode(block, 'DIVIDEND',
-    Blockly.Arduino.valueToCode(
+        Blockly.Arduino.ORDER_MULTIPLICATIVE) || '0';
-      block,
+    var argument1 = Blockly.Arduino.valueToCode(block, 'DIVISOR',
-      "DIVIDEND",
+        Blockly.Arduino.ORDER_MULTIPLICATIVE) || '0';
-      Blockly.Arduino.ORDER_MULTIPLICATIVE
+    var code = argument0 + ' % ' + argument1;
-    ) || "0";
+    return [code, Blockly.Arduino.ORDER_MULTIPLICATIVE];
  var argument1 =
    Blockly.Arduino.valueToCode(
      block,
      "DIVISOR",
      Blockly.Arduino.ORDER_MULTIPLICATIVE
    ) || "0";
  var code = argument0 + " % " + argument1;
  return [code, Blockly.Arduino.ORDER_MULTIPLICATIVE];
 };
 /**
@@ -326,34 +291,18 @@ Blockly.Arduino["math_modulo"] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino["math_constrain"] = function (block) {
+Blockly.Arduino['math_constrain'] = function (block) {
-  // Constrain a number between two limits.
+    // Constrain a number between two limits.
-  var argument0 =
+    var argument0 = Blockly.Arduino.valueToCode(block, 'VALUE',
-    Blockly.Arduino.valueToCode(block, "VALUE", Blockly.Arduino.ORDER_NONE) ||
+        Blockly.Arduino.ORDER_NONE) || '0';
-    "0";
+    var argument1 = Blockly.Arduino.valueToCode(block, 'LOW',
-  var argument1 =
+        Blockly.Arduino.ORDER_NONE) || '0';
-    Blockly.Arduino.valueToCode(block, "LOW", Blockly.Arduino.ORDER_NONE) ||
+    var argument2 = Blockly.Arduino.valueToCode(block, 'HIGH',
-    "0";
+        Blockly.Arduino.ORDER_NONE) || '0';
-  var argument2 =
+    var code = '(' + argument0 + ' < ' + argument1 + ' ? ' + argument1 +
-    Blockly.Arduino.valueToCode(block, "HIGH", Blockly.Arduino.ORDER_NONE) ||
+        ' : ( ' + argument0 + ' > ' + argument2 + ' ? ' + argument2 + ' : ' +
-    "0";
+        argument0 + '))';
-  var code =
+    return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
    "(" +
    argument0 +
    " < " +
    argument1 +
    " ? " +
    argument1 +
    " : ( " +
    argument0 +
    " > " +
    argument2 +
    " ? " +
    argument2 +
    " : " +
    argument0 +
    "))";
  return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
 };
 /**
@@ -363,26 +312,28 @@ Blockly.Arduino["math_constrain"] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino["math_random_int"] = function (block) {
+Blockly.Arduino['math_random_int'] = function (block) {
-  var argument0 =
+    var argument0 = Blockly.Arduino.valueToCode(block, 'FROM',
-    Blockly.Arduino.valueToCode(block, "FROM", Blockly.Arduino.ORDER_NONE) ||
+        Blockly.Arduino.ORDER_NONE) || '0';
-    "0";
+    var argument1 = Blockly.Arduino.valueToCode(block, 'TO',
-  var argument1 =
+        Blockly.Arduino.ORDER_NONE) || '0';
-    Blockly.Arduino.valueToCode(block, "TO", Blockly.Arduino.ORDER_NONE) || "0";
+    var functionName = Blockly.Arduino.variableDB_.getDistinctName(
-  Blockly.Arduino.setupCode_["init_rand"] = "randomSeed(analogRead(0));";
+        'math_random_int', Blockly.Generator.NAME_TYPE);
-  Blockly.Arduino.functionNames_[
+    Blockly.Arduino.setups_['init_rand'] = 'randomSeed(analogRead(0));';
-    "math_random_int"
+    Blockly.Arduino.math_random_int.random_function = functionName;
-  ] = `int mathRandomInt (int min, int max) {\n
+    var func = [
-      if (min > max) {
+        'int ' + Blockly.Arduino.DEF_FUNC_NAME + '(int min, int max) {',
-        int temp = min;
+        '  if (min > max) {',
-        min = max;
+        '    // Swap min and max to ensure min is smaller.',
-        max = temp;
+        '    int temp = min;',
-      }
+        '    min = max;',
-      return min + (rand() % (max - min + 1));
+        '    max = temp;',
-    }
+        '  }',
-    `;
+        '  return min + (rand() % (max - min + 1));',
-  var code = `mathRandomInt(${argument0},${argument1});`;
+        '}'];
-  return [code, Blockly.Arduino.ORDER_ATOMIC];
+    var funcName = Blockly.Arduino.addFunction('mathRandomInt', func.join('\n'));
    var code = funcName + '(' + argument0 + ', ' + argument1 + ')';
    return [code, Blockly.Arduino.ORDER_UNARY_POSTFIX];
 };
 /**
@@ -391,6 +342,6 @@ Blockly.Arduino["math_random_int"] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {string} Completed code.
 */
-Blockly.Arduino["math_random_float"] = function (block) {
+Blockly.Arduino['math_random_float'] = function (block) {
-  return ["(rand() / RAND_MAX)", Blockly.Arduino.ORDER_UNARY_POSTFIX];
+    return ['(rand() / RAND_MAX)', Blockly.Arduino.ORDER_UNARY_POSTFIX];
 };
@@ -68,6 +68,7 @@ Blockly.Arduino['procedures_defreturn'] = function (block) {
 };
 function translateType(type) {
    console.log(type);
    switch (type) {
        case 'int':
@@ -1,127 +0,0 @@
 import * as Blockly from "blockly/core";
 Blockly.Arduino.sensebox_phyphox_init = function () {
  var name = this.getFieldValue("devicename");
  Blockly.Arduino.libraries_["phyphox_library"] = `#include <phyphoxBle.h>`;
  Blockly.Arduino.libraries_["library_senseBoxMCU"] =
    '#include "SenseBoxMCU.h"';
  Blockly.Arduino.phyphoxSetupCode_[
    "phyphox_start"
  ] = `PhyphoxBLE::start("${name}");`;
  var code = ``;
  return code;
 };
 Blockly.Arduino.sensebox_phyphox_experiment = function () {
  var experimentname = "experiment";
  var title = this.getFieldValue("title").replace(/[^a-zA-Z0-9]/g, "");
  var description = this.getFieldValue("description");
  var branch = Blockly.Arduino.statementToCode(this, "view");
  Blockly.Arduino.phyphoxSetupCode_[
    `PhyphoxBleExperiment_${experimentname}`
  ] = `PhyphoxBleExperiment ${experimentname};`;
  Blockly.Arduino.phyphoxSetupCode_[
    `setTitle_${title}`
  ] = `${experimentname}.setTitle("${title}");`;
  Blockly.Arduino.phyphoxSetupCode_[
    `setCategory_senseBoxExperiments}`
  ] = `${experimentname}.setCategory("senseBox Experimente");`;
  Blockly.Arduino.phyphoxSetupCode_[
    `setDescription_${description}`
  ] = `${experimentname}.setDescription("${description}");`;
  Blockly.Arduino.phyphoxSetupCode_[
    `addView_${experimentname}`
  ] = `PhyphoxBleExperiment::View firstView;\nfirstView.setLabel("Messwerte"); //Create a "view"`;
  Blockly.Arduino.phyphoxSetupCode_[`addGraph`] = `${branch}`;
  Blockly.Arduino.phyphoxSetupCode_[
    `addView_firstview`
  ] = `${experimentname}.addView(firstView);`; //Attach view to experiment
  Blockly.Arduino.phyphoxSetupCode_[
    `addExperiment_${experimentname}`
  ] = `PhyphoxBLE::addExperiment(${experimentname});`; //Attach experiment to server
  var code = ``;
  return code;
 };
 Blockly.Arduino["sensebox_phyphox_timestamp"] = function () {
  var code = 0;
  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
 Blockly.Arduino["sensebox_phyphox_channel"] = function () {
  var channel = parseFloat(this.getFieldValue("channel"));
  var code = channel;
  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
 Blockly.Arduino.sensebox_phyphox_sendchannel = function (block) {
  var channel = this.getFieldValue("channel");
  var value =
    Blockly.Arduino.valueToCode(this, "value", Blockly.Arduino.ORDER_ATOMIC) ||
    "1";
  var code = `float channel${channel} = ${value};\n`;
  return code;
 };
 Blockly.Arduino.sensebox_phyphox_graph = function () {
  var label = this.getFieldValue("label").replace(/[^a-zA-Z0-9]/g, "");
  var unitx = this.getFieldValue("unitx");
  var unity = this.getFieldValue("unity");
  var labelx = this.getFieldValue("labelx");
  var labely = this.getFieldValue("labely");
  var style = this.getFieldValue("style");
  var channelX =
    Blockly.Arduino.valueToCode(
      this,
      "channel0",
      Blockly.Arduino.ORDER_ATOMIC
    ) || 0;
  var channelY =
    Blockly.Arduino.valueToCode(
      this,
      "channel1",
      Blockly.Arduino.ORDER_ATOMIC
    ) || 1;
  var code = `PhyphoxBleExperiment::Graph ${label};\n`; //Create graph which will plot random numbers over time
  code += `${label}.setLabel("${label}");\n`;
  code += `${label}.setUnitX("${unitx}");\n`;
  code += `${label}.setUnitY("${unity}");\n`;
  code += `${label}.setLabelX("${labelx}");\n`;
  code += `${label}.setLabelY("${labely}");\n`;
  code += `${label}.setStyle("${style}");\n`;
  code += `${label}.setChannel(${channelX}, ${channelY});\n`;
  code += `firstView.addElement(${label});\n`;
  return code;
 };
 Blockly.Arduino.sensebox_phyphox_experiment_send = function () {
  var branch = Blockly.Arduino.statementToCode(this, "sendValues");
  var blocks = this.getDescendants();
  console.log(blocks);
  var count = 0;
  if (blocks !== undefined) {
    for (var i = 0; i < blocks.length; i++) {
      if (blocks[i].type === "sensebox_phyphox_sendchannel") {
        count++;
      }
    }
  }
  if (count === 5) {
  }
  var string = "";
  for (var j = 1; j <= count; j++) {
    console.log("append");
    if (string === "") {
      string += `channel${j}`;
    } else if (string !== "") {
      string += `, channel${j}`;
    }
  }
  Blockly.Arduino.loopCodeOnce_["phyphox_poll"] = `PhyphoxBLE::poll();`;
  var code = `${branch}\nPhyphoxBLE::write(${string});`;
  return code;
 };
@@ -33,6 +33,7 @@ Blockly.Arduino.sensebox_ws2818_led = function () {
    var dropdown_pin = this.getFieldValue('Port');
    var position = Blockly.Arduino.valueToCode(this, 'POSITION', Blockly.Arduino.ORDER_ATOMIC) || '0';
    var color = Blockly.Arduino.valueToCode(this, 'COLOR', Blockly.Arduino.ORDER_ATOMIC) || '0'
    console.log(color)
    var code = `rgb_led_${dropdown_pin}.setPixelColor(${position},rgb_led_${dropdown_pin}.Color(${color}));\nrgb_led_${dropdown_pin}.show();\n`;
    return code;
 };
@@ -1,27 +1,27 @@
-import * as Blockly from "blockly/core";
+import * as Blockly from 'blockly/core';
 Blockly.Arduino.sensebox_lora_initialize_otaa = function (block) {
-  var deivceID = this.getFieldValue("DEVICEID");
+    var deivceID = this.getFieldValue('DEVICEID');
-  var appID = this.getFieldValue("APPID");
+    var appID = this.getFieldValue('APPID');
-  var appKey = this.getFieldValue("APPKEY");
+    var appKey = this.getFieldValue('APPKEY');
-  var interval = this.getFieldValue("INTERVAL");
+    var interval = this.getFieldValue('INTERVAL');
-  Blockly.Arduino.libraries_["library_senseBoxMCU"] =
+    Blockly.Arduino.libraries_['library_senseBoxMCU'] = '#include "SenseBoxMCU.h"';
-    '#include "SenseBoxMCU.h"';
+    Blockly.Arduino.libraries_['library_spi'] = '#include <SPI.h>';
-  Blockly.Arduino.libraries_["library_spi"] = "#include <SPI.h>";
+    Blockly.Arduino.libraries_['library_lmic'] = '#include <lmic.h>';
-  Blockly.Arduino.libraries_["library_lmic"] = "#include <lmic.h>";
+    Blockly.Arduino.libraries_['library_hal'] = '#include <hal/hal.h>';
-  Blockly.Arduino.libraries_["library_hal"] = "#include <hal/hal.h>";
+    Blockly.Arduino.definitions_['define_LoRaVariablesOTAA'] = `
-  Blockly.Arduino.definitions_["define_LoRaVariablesOTAA"] = `
+    static const u1_t PROGMEM APPEUI[8]= `+ appID + ` ;
    static const u1_t PROGMEM APPEUI[8]= {${appID}};
    void os_getArtEui (u1_t* buf) { memcpy_P(buf, APPEUI , 8);}
-    static const u1_t PROGMEM DEVEUI[8]= {${deivceID}};
+    static const u1_t PROGMEM DEVEUI[8]= `+ deivceID + `;
    void os_getDevEui (u1_t* buf) { memcpy_P(buf, DEVEUI , 8);}
    // This key should be in big endian format (or, since it is not really a
    // number but a block of memory, endianness does not really apply). In
    // practice, a key taken from ttnctl can be copied as-is.
    // The key shown here is the semtech default key.
-    static const u1_t PROGMEM APPKEY[16] = {${appKey}};
+    static const u1_t PROGMEM APPKEY[16] = `+ appKey + `;
    void os_getDevKey (u1_t* buf) {  memcpy_P(buf, APPKEY , 16);}
    static osjob_t sendjob;
@@ -38,7 +38,7 @@ Blockly.Arduino.sensebox_lora_initialize_otaa = function (block) {
        .dio = {PIN_XB1_INT, PIN_XB1_INT, LMIC_UNUSED_PIN},
    };`;
-  Blockly.Arduino.codeFunctions_["functions_initLora"] = `
+    Blockly.Arduino.codeFunctions_['functions_initLora'] = `
    void initLora() {
      delay(2000);
      // LMIC init
@@ -48,9 +48,9 @@ Blockly.Arduino.sensebox_lora_initialize_otaa = function (block) {
      // Start job (sending automatically starts OTAA too)
      do_send(&sendjob);
-    }`;
+    }`
-  Blockly.Arduino.codeFunctions_["functions_onEvent"] = `
+    Blockly.Arduino.codeFunctions_['functions_onEvent'] = `
    void onEvent (ev_t ev) {
      Serial.print(os_getTime());
      Serial.print(": ");
@@ -120,18 +120,16 @@ Blockly.Arduino.sensebox_lora_initialize_otaa = function (block) {
              break;
      }
  }`;
-  Blockly.Arduino.loraSetupCode_["initLora"] = "initLora();\n";
+    Blockly.Arduino.loraSetupCode_['initLora'] = 'initLora();\n';
-  Blockly.Arduino.setupCode_["serial.begin"] =
+    Blockly.Arduino.setupCode_['serial.begin'] = 'Serial.begin(9600);\ndelay(1000);\n';
-    "Serial.begin(9600);\ndelay(1000);\n";
+    var code = '';
-  var code = "";
+    return code;
  return code;
 };
 Blockly.Arduino.sensebox_lora_message_send = function (block) {
-  Blockly.Arduino.libraries_["library_lora_message"] =
+    Blockly.Arduino.libraries_['library_lora_message'] = '#include <LoraMessage.h>';
-    "#include <LoraMessage.h>";
+    var lora_sensor_values = Blockly.Arduino.statementToCode(block, 'DO');
-  var lora_sensor_values = Blockly.Arduino.statementToCode(block, "DO");
+    Blockly.Arduino.functionNames_['functions_do_send'] = `
  Blockly.Arduino.functionNames_["functions_do_send"] = `
  void do_send(osjob_t* j){
      // Check if there is not a current TX/RX job running
      if (LMIC.opmode & OP_TXRXPEND) {
@@ -146,41 +144,39 @@ Blockly.Arduino.sensebox_lora_message_send = function (block) {
      }
      // Next TX is scheduled after TX_COMPLETE event.
  }`;
-  Blockly.Arduino.loopCodeOnce_["os_runloop"] = "os_runloop_once();";
+    Blockly.Arduino.loopCodeOnce_['os_runloop'] = 'os_runloop_once();'
-  return "";
+    return ''
-};
+}
 /**
 * Block send Data to TTN
 */
 Blockly.Arduino.sensebox_send_lora_sensor_value = function (block) {
-  const reading =
+    const reading = Blockly.Arduino.valueToCode(this, 'Value', Blockly.Arduino.ORDER_ATOMIC) || '"Keine Eingabe"';
-    Blockly.Arduino.valueToCode(this, "Value", Blockly.Arduino.ORDER_ATOMIC) ||
+    var messageBytes = this.getFieldValue('MESSAGE_BYTES');
-    '"Keine Eingabe"';
+    var code = ''
-  var messageBytes = this.getFieldValue("MESSAGE_BYTES");
+    switch (Number(messageBytes)) {
-  var code = "";
+        case 1:
-  switch (Number(messageBytes)) {
+            code = `message.addUint8(${reading});\n`
-    case 1:
+            break;
-      code = `message.addUint8(${reading});\n`;
+        case 2:
-      break;
+            code = `message.addUint16(${reading});\n`
-    case 2:
+            break;
-      code = `message.addUint16(${reading});\n`;
+        case 3:
-      break;
+            code = `message.addUint8(${reading});
-    case 3:
+        message.addUint16(${reading} >> 8);\n`
-      code = `message.addUint8(${reading});
+            break;
-        message.addUint16(${reading} >> 8);\n`;
+        default:
-      break;
+            code = `message.addUint16(${reading});\n`
-    default:
+    }
-      code = `message.addUint16(${reading});\n`;
+    return code;
  }
  return code;
 };
 Blockly.Arduino.sensebox_lora_cayenne_send = function (block) {
-  Blockly.Arduino.libraries_["library_cayene"] = "#include <CayenneLPP.h>";
+    Blockly.Arduino.libraries_['library_cayene'] = '#include <CayenneLPP.h>';
-  Blockly.Arduino.variables_["variable_cayenne"] = "CayenneLPP lpp(51);";
+    Blockly.Arduino.variables_['variable_cayenne'] = 'CayenneLPP lpp(51);'
-  var lora_sensor_values = Blockly.Arduino.statementToCode(block, "DO");
+    var lora_sensor_values = Blockly.Arduino.statementToCode(block, 'DO');
-  Blockly.Arduino.functionNames_["functions_do_send"] = `
+    Blockly.Arduino.functionNames_['functions_do_send'] = `
  void do_send(osjob_t* j){
      // Check if there is not a current TX/RX job running
      if (LMIC.opmode & OP_TXRXPEND) {
@@ -195,38 +191,18 @@ Blockly.Arduino.sensebox_lora_cayenne_send = function (block) {
      }
      // Next TX is scheduled after TX_COMPLETE event.
  }`;
-  Blockly.Arduino.loopCodeOnce_["os_runloop"] = "os_runloop_once();";
+    Blockly.Arduino.loopCodeOnce_['os_runloop'] = 'os_runloop_once();'
-  return "";
+    return '';
-};
+}
 Blockly.Arduino.sensebox_lora_ttn_mapper = function (block) {
-  var latitude = Blockly.Arduino.valueToCode(
+    var latitude = Blockly.Arduino.valueToCode(this, 'Latitude', Blockly.Arduino.ORDER_ATOMIC)
-    this,
+    var longitude = Blockly.Arduino.valueToCode(this, 'Longitude', Blockly.Arduino.ORDER_ATOMIC)
-    "Latitude",
+    var altitude = Blockly.Arduino.valueToCode(this, 'Altitude', Blockly.Arduino.ORDER_ATOMIC)
-    Blockly.Arduino.ORDER_ATOMIC
+    var pDOP = Blockly.Arduino.valueToCode(this, 'pDOP', Blockly.Arduino.ORDER_ATOMIC)
-  );
+    var fixType = Blockly.Arduino.valueToCode(this, 'Fix Type', Blockly.Arduino.ORDER_ATOMIC)
-  var longitude = Blockly.Arduino.valueToCode(
+    var fixTypeLimit = this.getFieldValue('dropdown');
-    this,
+    Blockly.Arduino.functionNames_['functions_do_send'] = `
    "Longitude",
    Blockly.Arduino.ORDER_ATOMIC
  );
  var altitude = Blockly.Arduino.valueToCode(
    this,
    "Altitude",
    Blockly.Arduino.ORDER_ATOMIC
  );
  var pDOP = Blockly.Arduino.valueToCode(
    this,
    "pDOP",
    Blockly.Arduino.ORDER_ATOMIC
  );
  var fixType = Blockly.Arduino.valueToCode(
    this,
    "Fix Type",
    Blockly.Arduino.ORDER_ATOMIC
  );
  var fixTypeLimit = this.getFieldValue("dropdown");
  Blockly.Arduino.functionNames_["functions_do_send"] = `
  void do_send(osjob_t* j){
      // Check if there is not a current TX/RX job running
      if (LMIC.opmode & OP_TXRXPEND) {
@@ -269,30 +245,29 @@ Blockly.Arduino.sensebox_lora_ttn_mapper = function (block) {
      }
      // Next TX is scheduled after TX_COMPLETE event.
  }`;
-  Blockly.Arduino.loopCodeOnce_["os_runloop"] = "os_runloop_once();";
+    Blockly.Arduino.loopCodeOnce_['os_runloop'] = 'os_runloop_once();'
-  return "";
+    return '';
-};
+}
 Blockly.Arduino.sensebox_lora_initialize_abp = function (block) {
-  var nwskey = this.getFieldValue("NWSKEY");
+    var nwskey = this.getFieldValue('NWSKEY');
-  var appskey = this.getFieldValue("APPSKEY");
+    var appskey = this.getFieldValue('APPSKEY');
-  var devaddr = this.getFieldValue("DEVADDR");
+    var devaddr = this.getFieldValue('DEVADDR');
-  var interval = this.getFieldValue("INTERVAL");
+    var interval = this.getFieldValue('INTERVAL');
-  Blockly.Arduino.libraries_["library_senseBoxMCU"] =
+    Blockly.Arduino.libraries_['library_senseBoxMCU'] = '#include "SenseBoxMCU.h"';
-    '#include "SenseBoxMCU.h"';
+    Blockly.Arduino.libraries_['library_spi'] = '#include <SPI.h>';
-  Blockly.Arduino.libraries_["library_spi"] = "#include <SPI.h>";
+    Blockly.Arduino.libraries_['library_lmic'] = '#include <lmic.h>';
-  Blockly.Arduino.libraries_["library_lmic"] = "#include <lmic.h>";
+    Blockly.Arduino.libraries_['library_hal'] = '#include <hal/hal.h>';
-  Blockly.Arduino.libraries_["library_hal"] = "#include <hal/hal.h>";
+    Blockly.Arduino.definitions_['define_LoRaVariablesABP'] = `
  Blockly.Arduino.definitions_["define_LoRaVariablesABP"] = `
    // LoRaWAN NwkSKey, network session key
    // This is the default Semtech key, which is used by the early prototype TTN
    // network.
-    static const PROGMEM u1_t NWKSKEY[16] = { ${nwskey} };
+    static const PROGMEM u1_t NWKSKEY[16] = ${nwskey};
    // LoRaWAN AppSKey, application session key
    // This is the default Semtech key, which is used by the early prototype TTN
    // network.
-    static const u1_t PROGMEM APPSKEY[16] = { ${appskey} };
+    static const u1_t PROGMEM APPSKEY[16] = ${appskey};
    // LoRaWAN end-device address (DevAddr)
    static const u4_t DEVADDR = 0x${devaddr};
@@ -318,7 +293,7 @@ Blockly.Arduino.sensebox_lora_initialize_abp = function (block) {
        .dio = {PIN_XB1_INT, PIN_XB1_INT, LMIC_UNUSED_PIN},
    };`;
-  Blockly.Arduino.codeFunctions_["functions_initLora"] = `
+    Blockly.Arduino.codeFunctions_['functions_initLora'] = `
    void initLora() {
      delay(2000);
      // LMIC init
@@ -384,9 +359,9 @@ Blockly.Arduino.sensebox_lora_initialize_abp = function (block) {
      // Start job
      do_send(&sendjob);
-    }`;
+    }`
-  Blockly.Arduino.codeFunctions_["functions_onEvent"] = `
+    Blockly.Arduino.codeFunctions_['functions_onEvent'] = `
    void onEvent (ev_t ev) {
      Serial.print(os_getTime());
      Serial.print(": ");
@@ -451,77 +426,60 @@ Blockly.Arduino.sensebox_lora_initialize_abp = function (block) {
              break;
      }
  }`;
-  Blockly.Arduino.loraSetupCode_["initLora"] = "initLora();\n";
+    Blockly.Arduino.loraSetupCode_['initLora'] = 'initLora();\n';
-  Blockly.Arduino.setupCode_["serial.begin"] =
+    Blockly.Arduino.setupCode_['serial.begin'] = 'Serial.begin(9600);\ndelay(1000);\n';
-    "Serial.begin(9600);\ndelay(1000);\n";
+    return '';
-  return "";
+}
 };
 Blockly.Arduino.sensebox_lora_cayenne_temperature = function (block) {
-  var temperature =
+    var temperature = Blockly.Arduino.valueToCode(this, 'Value', Blockly.Arduino.ORDER_ATOMIC) || 0
-    Blockly.Arduino.valueToCode(this, "Value", Blockly.Arduino.ORDER_ATOMIC) ||
+    var channel = this.getFieldValue('CHANNEL');
-    0;
+    var code = `lpp.addTemperature(${channel}, ${temperature});\n`;
-  var channel = this.getFieldValue("CHANNEL");
+    return code;
-  var code = `lpp.addTemperature(${channel}, ${temperature});\n`;
+}
  return code;
 };
 Blockly.Arduino.sensebox_lora_cayenne_humidity = function (block) {
-  var humidity =
+    var humidity = Blockly.Arduino.valueToCode(this, 'Value', Blockly.Arduino.ORDER_ATOMIC) || 0
-    Blockly.Arduino.valueToCode(this, "Value", Blockly.Arduino.ORDER_ATOMIC) ||
+    var channel = this.getFieldValue('CHANNEL');
-    0;
+    var code = `lpp.addRelativeHumidity(${channel}, ${humidity});\n`;
-  var channel = this.getFieldValue("CHANNEL");
+    return code;
-  var code = `lpp.addRelativeHumidity(${channel}, ${humidity});\n`;
+}
  return code;
 };
 Blockly.Arduino.sensebox_lora_cayenne_pressure = function (block) {
-  var pressure =
+    var pressure = Blockly.Arduino.valueToCode(this, 'Value', Blockly.Arduino.ORDER_ATOMIC) || 0
-    Blockly.Arduino.valueToCode(this, "Value", Blockly.Arduino.ORDER_ATOMIC) ||
+    var channel = this.getFieldValue('CHANNEL');
-    0;
+    var code = `lpp.addBarometricPressure(${channel}, ${pressure});\n`;
-  var channel = this.getFieldValue("CHANNEL");
+    return code;
-  var code = `lpp.addBarometricPressure(${channel}, ${pressure});\n`;
+}
  return code;
 };
 Blockly.Arduino.sensebox_lora_cayenne_luminosity = function (block) {
-  var luminosity =
+    var luminosity = Blockly.Arduino.valueToCode(this, 'Value', Blockly.Arduino.ORDER_ATOMIC) || 0
-    Blockly.Arduino.valueToCode(this, "Value", Blockly.Arduino.ORDER_ATOMIC) ||
+    var channel = this.getFieldValue('CHANNEL');
-    0;
+    var code = `lpp.addLuminosity(${channel}, ${luminosity});\n`;
-  var channel = this.getFieldValue("CHANNEL");
+    return code;
-  var code = `lpp.addLuminosity(${channel}, ${luminosity});\n`;
+}
  return code;
 };
 Blockly.Arduino.sensebox_lora_cayenne_sensor = function (block) {
-  var sensorValue =
+    var sensorValue = Blockly.Arduino.valueToCode(this, 'Value', Blockly.Arduino.ORDER_ATOMIC) || 0
-    Blockly.Arduino.valueToCode(this, "Value", Blockly.Arduino.ORDER_ATOMIC) ||
+    var channel = this.getFieldValue('CHANNEL');
-    0;
+    var code = `lpp.addAnalogInput(${channel}, ${sensorValue});\n`;
-  var channel = this.getFieldValue("CHANNEL");
+    return code;
-  var code = `lpp.addAnalogInput(${channel}, ${sensorValue});\n`;
+}
  return code;
 };
 Blockly.Arduino.sensebox_lora_cayenne_accelerometer = function (block) {
-  var x =
+    var x = Blockly.Arduino.valueToCode(this, 'X', Blockly.Arduino.ORDER_ATOMIC) || 0
-    Blockly.Arduino.valueToCode(this, "X", Blockly.Arduino.ORDER_ATOMIC) || 0;
+    var y = Blockly.Arduino.valueToCode(this, 'Y', Blockly.Arduino.ORDER_ATOMIC) || 0
-  var y =
+    var z = Blockly.Arduino.valueToCode(this, 'Z', Blockly.Arduino.ORDER_ATOMIC) || 0
-    Blockly.Arduino.valueToCode(this, "Y", Blockly.Arduino.ORDER_ATOMIC) || 0;
+    var channel = this.getFieldValue('CHANNEL');
-  var z =
+    var code = `lpp.addAccelerometer(${channel}, ${x}, ${y}, ${z});\n`;
-    Blockly.Arduino.valueToCode(this, "Z", Blockly.Arduino.ORDER_ATOMIC) || 0;
+    return code;
-  var channel = this.getFieldValue("CHANNEL");
+}
  var code = `lpp.addAccelerometer(${channel}, ${x}, ${y}, ${z});\n`;
  return code;
 };
 Blockly.Arduino.sensebox_lora_cayenne_gps = function (block) {
-  var lat =
+    var lat = Blockly.Arduino.valueToCode(this, 'LAT', Blockly.Arduino.ORDER_ATOMIC) || 0
-    Blockly.Arduino.valueToCode(this, "LAT", Blockly.Arduino.ORDER_ATOMIC) || 0;
+    var lng = Blockly.Arduino.valueToCode(this, 'LNG', Blockly.Arduino.ORDER_ATOMIC) || 0
-  var lng =
+    var alt = Blockly.Arduino.valueToCode(this, 'ALT', Blockly.Arduino.ORDER_ATOMIC) || 0
-    Blockly.Arduino.valueToCode(this, "LNG", Blockly.Arduino.ORDER_ATOMIC) || 0;
+    var channel = this.getFieldValue('CHANNEL');
-  var alt =
+    var code = `lpp.addGPS(${channel}, ${lat}, ${lng}, ${alt});\n`
-    Blockly.Arduino.valueToCode(this, "ALT", Blockly.Arduino.ORDER_ATOMIC) || 0;
+    return code;
-  var channel = this.getFieldValue("CHANNEL");
+}
  var code = `lpp.addGPS(${channel}, ${lat}, ${lng}, ${alt});\n`;
  return code;
 };
@@ -1,96 +0,0 @@
 import Blockly from "blockly";
 Blockly.Arduino.sensebox_rtc_init = function () {
  Blockly.Arduino.libraries_["RV8523"] = `#include <RV8523.h>`;
  Blockly.Arduino.definitions_["RTC"] = `RV8523 rtc;`;
  Blockly.Arduino.libraries_["library_senseBoxMCU"] =
    '#include "SenseBoxMCU.h"';
  Blockly.Arduino.setupCode_["rtc.begin"] = `rtc.begin();`;
  var code = ``;
  return code;
 };
 Blockly.Arduino.sensebox_rtc_set = function () {
  var second =
    Blockly.Arduino.valueToCode(this, "second", Blockly.Arduino.ORDER_ATOMIC) ||
    "0";
  var minutes =
    Blockly.Arduino.valueToCode(this, "second", Blockly.Arduino.ORDER_ATOMIC) ||
    "0";
  var hour =
    Blockly.Arduino.valueToCode(this, "second", Blockly.Arduino.ORDER_ATOMIC) ||
    "0";
  var day =
    Blockly.Arduino.valueToCode(this, "second", Blockly.Arduino.ORDER_ATOMIC) ||
    "0";
  var month =
    Blockly.Arduino.valueToCode(this, "second", Blockly.Arduino.ORDER_ATOMIC) ||
    "0";
  var year =
    Blockly.Arduino.valueToCode(this, "second", Blockly.Arduino.ORDER_ATOMIC) ||
    "0";
  Blockly.Arduino.libraries_["RV8523"] = `#include <RV8523.h>`;
  Blockly.Arduino.setupCode_["rtc.start"] = `rtc.start();`;
  Blockly.Arduino.setupCode_[
    "rtc.batterySwitchOver"
  ] = `rtc.batterySwitchOver(1);`;
  Blockly.Arduino.setupCode_[
    "rtc.set"
  ] = `rtc.set(${second}, ${minutes}, ${hour}, ${day}, ${month}, ${year});`;
  var code = ``;
  return code;
 };
 Blockly.Arduino.sensebox_rtc_ntp = function () {
  Blockly.Arduino.libraries_["RV8523"] = `#include <RV8523.h>`;
  Blockly.Arduino.setupCode_["rtc.start"] = `rtc.start();`;
  Blockly.Arduino.setupCode_[
    "rtc.batterySwitchOver"
  ] = `rtc.batterySwitchOver(1);`;
  Blockly.Arduino.setupCode_[
    "rtc.set"
  ] = `rtc.set(SECOND, MINUTE, HOUR, DAY, MONTH, YEAR);`;
  var code = ``;
  return code;
 };
 Blockly.Arduino.sensebox_rtc_get = function () {
  var dropdown = this.getFieldValue("dropdown");
  Blockly.Arduino.libraries_["RV8523"] = `#include <RV8523.h>`;
  Blockly.Arduino.setupCode_["rtc.start"] = `rtc.start();`;
  Blockly.Arduino.setupCode_[
    "rtc.batterySwitchOver"
  ] = `rtc.batterySwitchOver(1);`;
  Blockly.Arduino.loopCodeOnce_[
    "rtc_variables"
  ] = `uint8_t sec, min, hour, day, month;\nuint16_t year;`;
  Blockly.Arduino.loopCodeOnce_[
    "rtc_get"
  ] = `rtc.get(&sec, &min, &hour, &day, &month, &year);`;
  var code = `${dropdown}`;
  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
 Blockly.Arduino.sensebox_rtc_get_timestamp = function () {
  Blockly.Arduino.libraries_["RV8523"] = `#include <RV8523.h>`;
  Blockly.Arduino.setupCode_["rtc.start"] = `rtc.start();`;
  Blockly.Arduino.setupCode_[
    "rtc.batterySwitchOver"
  ] = `rtc.batterySwitchOver(1);`;
  Blockly.Arduino.loopCodeOnce_[
    "rtc_variables"
  ] = `uint8_t sec, min, hour, day, month;\nuint16_t year;`;
  Blockly.Arduino.variables_["rtc_timestamp"] = `char timestamp[20];`;
  Blockly.Arduino.loopCodeOnce_[
    "rtc_get"
  ] = `rtc.get(&sec, &min, &hour, &day, &month, &year);`;
  Blockly.Arduino.loopCodeOnce_[
    ""
  ] = `sprintf(timestamp, "%02d-%02d-%02dT%02d:%02d:%02dZ", year, month, day, hour, min, sec);`;
  var code = `timestamp`;
  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
@@ -1,5 +1,4 @@
-import Blockly from 'blockly';
+import Blockly from "blockly";
 /* SD-Card Blocks using the Standard SD Library*/
 /**
@@ -10,45 +9,49 @@ import Blockly from 'blockly';
 */
 Blockly.Arduino.sensebox_sd_create_file = function (block) {
-    var filename = this.getFieldValue('Filename');
+  var filename = this.getFieldValue("Filename");
-    var res = filename.slice(0, 4);
+  var extension = this.getFieldValue("extension");
-    Blockly.Arduino.libraries_['library_spi'] = '#include <SPI.h>';
+  var newFileName = filename.concat(".", extension);
-    Blockly.Arduino.libraries_['library_sd'] = '#include <SD.h>';
+  Blockly.Arduino.libraries_["library_spi"] = "#include <SPI.h>";
-    Blockly.Arduino.definitions_['define_' + res] = 'File dataFile' + res + ';';
+  Blockly.Arduino.libraries_["library_sd"] = "#include <SD.h>";
-    Blockly.Arduino.setupCode_['sensebox_sd'] = 'SD.begin(28);';
+  Blockly.Arduino.definitions_["define_" + filename] = `File ${filename};`;
-    Blockly.Arduino.setupCode_['sensebox_sd' + filename] = 'dataFile' + res + ' = SD.open("' + filename + '", FILE_WRITE);\ndataFile' + res + '.close();\n';
+  Blockly.Arduino.setupCode_["sensebox_sd"] = "SD.begin(28);\n";
-    var code = '';
+  Blockly.Arduino.setupCode_[
-    return code;
+    "sensebox_sd" + filename
  ] = `${filename} = SD.open("${newFileName}", FILE_WRITE);\n${filename}.close();\n`;
  var code = "";
  return code;
 };
 Blockly.Arduino.sensebox_sd_open_file = function (block) {
-    var filename = this.getFieldValue('Filename');
+  var filename = this.getFieldValue("Filename");
-    var res = filename.slice(0, 4);
+  var extension = this.getFieldValue("extension");
-    var branch = Blockly.Arduino.statementToCode(block, 'SD');
+  var newFileName = filename.concat(".", extension);
-    var code = 'dataFile' + res + ' = SD.open("' + filename + '", FILE_WRITE);\n'
+  var branch = Blockly.Arduino.statementToCode(block, "SD");
-    code += branch;
+  var code = `${filename} = SD.open("${newFileName}", FILE_WRITE);\n`;
-    code += 'dataFile' + res + '.close();\n'
+  code += branch;
-    return code;
+  code += `${filename}.close();\n`;
  return code;
 };
 Blockly.Arduino.sensebox_sd_write_file = function (block) {
-    if (this.parentBlock_ != null) {
+  if (this.parentBlock_ != null) {
-        var filename = this.getSurroundParent().getFieldValue('Filename');
+    var filename = this.getSurroundParent().getFieldValue("Filename");
-    }
+  }
-    var res = filename.slice(0, 4);
+  var branch =
-    var text = Blockly.Arduino.valueToCode(this, 'DATA', Blockly.Arduino.ORDER_ATOMIC) || '"Keine Eingabe"';
+    Blockly.Arduino.valueToCode(this, "DATA", Blockly.Arduino.ORDER_ATOMIC) ||
-    var linebreak = this.getFieldValue('linebreak');
+    '"Keine Eingabe"';
-    if (linebreak === "TRUE") {
+  var linebreak = this.getFieldValue("linebreak");
-        linebreak = "ln";
+  if (linebreak === "TRUE") {
-    } else {
+    linebreak = "ln";
-        linebreak = "";
+  } else {
-    }
+    linebreak = "";
-    var code = '';
+  }
-    if (text === "gps.getLongitude()" || text === "gps.getLatitude()") {
+  var code = "";
-        code = 'dataFile' + res + '.print' + linebreak + '(' + text + ',5);\n'
+  if (branch === "gps.getLongitude()" || branch === "gps.getLatitude()") {
-    }
+    code = `${filename}.print${linebreak}(${branch},5);\n`;
-    else {
+  } else {
-        code = 'dataFile' + res + '.print' + linebreak + '(' + text + ');\n'
+    code = `${filename}.print${linebreak}(${branch});\n`;
-    }
+  }
-    return code;
+  return code;
 };
@@ -1,38 +1,3 @@
-import * as Blockly from "blockly/core";
+import * as Blockly from 'blockly/core';
 import { Block } from 'blockly';
 /*
 * Multiplexer
 */
 Blockly.Arduino.sensebox_multiplexer_init = function () {
  // Blockly.Arduino.libraries_['library_spi'] = '#include <SPI.h>';
  var nrChannels =
    Blockly.Arduino.valueToCode(
      this,
      "nrChannels",
      Blockly.Arduino.ORDER_ATOMIC
    ) | 0;
  var array = [];
  for (var i = 0; i < nrChannels; i++) {
    array.push(i);
  }
  Blockly.Arduino.libraries_["library_wire"] = "#include <Wire.h>";
  Blockly.Arduino.definitions_[
    "define_multiplexer"
  ] = `byte multiplexAddress = 0x77;
    byte channels[] = {${array}};`;
  // Blockly.Arduino.setupCode_['sensebox_display_begin'] = 'senseBoxIO.powerI2C(true);\ndelay(2000);\ndisplay.begin(SSD1306_SWITCHCAPVCC, 0x3D);\ndisplay.display();\ndelay(100);\ndisplay.clearDisplay();';
  var code = "";
  return code;
 };
 Blockly.Arduino.sensebox_multiplexer_changeChannel = function () {
  var channel = Blockly.Arduino.valueToCode(
    this,
    "Channel",
    Blockly.Arduino.ORDER_ATOMIC
  );
  var code = `Wire.beginTransmission(0x77);
  Wire.write(1 << channels[${channel - 1}]);
  Wire.endTransmission();`;
  return code;
 };
@@ -1,4 +1,4 @@
-import Blockly from 'blockly';
+import Blockly from "blockly";
 /**
 * @license Licensed under the Apache License, Version 2.0 (the "License"):
@@ -16,11 +16,15 @@ import Blockly from 'blockly';
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {string} Completed code.
 */
-Blockly.Arduino['time_delay'] = function (block) {
+Blockly.Arduino["time_delay"] = function (block) {
-    var delayTime = Blockly.Arduino.valueToCode(
+  var delayTime =
-        block, 'DELAY_TIME_MILI', Blockly.Arduino.ORDER_ATOMIC) || '0';
+    Blockly.Arduino.valueToCode(
-    var code = 'delay(' + delayTime + ');\n';
+      block,
-    return code;
+      "DELAY_TIME_MILI",
      Blockly.Arduino.ORDER_ATOMIC
    ) || "0";
  var code = "delay(" + delayTime + ");\n";
  return code;
 };
 /**
@@ -29,11 +33,15 @@ Blockly.Arduino['time_delay'] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {string} Completed code.
 */
-Blockly.Arduino['time_delaymicros'] = function (block) {
+Blockly.Arduino["time_delaymicros"] = function (block) {
-    var delayTimeMs = Blockly.Arduino.valueToCode(
+  var delayTimeMs =
-        block, 'DELAY_TIME_MICRO', Blockly.Arduino.ORDER_ATOMIC) || '0';
+    Blockly.Arduino.valueToCode(
-    var code = 'delayMicroseconds(' + delayTimeMs + ');\n';
+      block,
-    return code;
+      "DELAY_TIME_MICRO",
      Blockly.Arduino.ORDER_ATOMIC
    ) || "0";
  var code = "delayMicroseconds(" + delayTimeMs + ");\n";
  return code;
 };
 /**
@@ -42,9 +50,9 @@ Blockly.Arduino['time_delaymicros'] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino['time_millis'] = function (block) {
+Blockly.Arduino["time_millis"] = function (block) {
-    var code = 'millis()';
+  var code = "millis()";
-    return [code, Blockly.Arduino.ORDER_ATOMIC];
+  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
 /**
@@ -53,9 +61,9 @@ Blockly.Arduino['time_millis'] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {array} Completed code with order of operation.
 */
-Blockly.Arduino['time_micros'] = function (block) {
+Blockly.Arduino["time_micros"] = function (block) {
-    var code = 'micros()';
+  var code = "micros()";
-    return [code, Blockly.Arduino.ORDER_ATOMIC];
+  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
 /**
@@ -64,17 +72,22 @@ Blockly.Arduino['time_micros'] = function (block) {
 * @param {!Blockly.Block} block Block to generate the code from.
 * @return {string} Completed code.
 */
-Blockly.Arduino['infinite_loop'] = function (block) {
+Blockly.Arduino["infinite_loop"] = function (block) {
-    return 'while(true);\n';
+  return "while(true);\n";
 };
 Blockly.Arduino.sensebox_interval_timer = function (block) {
-    var interval = this.getFieldValue('interval');
+  var intervalTime = this.getFieldValue("interval");
-    Blockly.Arduino.variables_['define_interval_variables'] = 'const long interval = ' + interval + ';\nlong time_start = 0;\nlong time_actual = 0;';
+  var intervalName = this.getFieldValue("name");
-    var branch = Blockly.Arduino.statementToCode(block, 'DO');
+  Blockly.Arduino.variables_[`define_interval_variables${intervalName}`] = `
-    var code = 'time_start = millis();\n';
+const long interval${intervalName} = ${intervalTime};
-    code += 'if (time_start > time_actual + interval) {\n  time_actual = millis();\n'
+long time_start${intervalName} = 0;
-    code += branch;
+long time_actual${intervalName} = 0;`;
-    code += '}\n'
+  var branch = Blockly.Arduino.statementToCode(block, "DO");
-    return code;
+  var code = `time_start${intervalName} = millis();\n`;
-};
+  code += `
 if (time_start${intervalName} > time_actual${intervalName} + interval${intervalName}) {\n  time_actual${intervalName} = millis();\n`;
  code += branch;
  code += "}\n";
  return code;
 };
@@ -1,60 +1,52 @@
-import Blockly from "blockly";
+import Blockly from 'blockly';
 const setVariableFunction = function (defaultValue) {
-  return function (block) {
+    return function (block) {
-    const variableName = Blockly["Arduino"].variableDB_.getName(
+        const variableName = Blockly['Arduino'].variableDB_.getName(
-      block.getFieldValue("VAR"),
+            block.getFieldValue('VAR'),
-      Blockly.Variables.NAME_TYPE
+            Blockly.Variables.NAME_TYPE
-    );
+        );
-    const variableValue = Blockly["Arduino"].valueToCode(
+        const variableValue = Blockly['Arduino'].valueToCode(
-      block,
+            block,
-      "VALUE",
+            'VALUE',
-      Blockly["Arduino"].ORDER_ATOMIC
+            Blockly['Arduino'].ORDER_ATOMIC
-    );
+        );
-    const allVars = Blockly.getMainWorkspace()
+        const allVars = Blockly.getMainWorkspace().getVariableMap().getAllVariables();
-      .getVariableMap()
+        const myVar = allVars.filter(v => v.name === variableName)[0]
-      .getAllVariables();
+        var code = ''
    const myVar = allVars.filter((v) => v.name === variableName)[0];
    var code = "";
-    switch (myVar.type) {
+        switch (myVar.type) {
-      default:
+            default:
-        Blockly.Arduino.variables_[variableName + myVar.type] =
+                Blockly.Arduino.variables_[myVar + myVar.type] = myVar.type + " " + myVar.name + ';\n';
-          myVar.type + " " + myVar.name + ";\n";
+                code = variableName + ' = ' + (variableValue || defaultValue) + ';\n';
-        code = variableName + " = " + (variableValue || defaultValue) + ";\n";
+                break;
-        break;
+            case 'Array':
-      case "Array":
+                var arrayType;
-        var arrayType;
+                var number;
        var number;
-        if (this.getChildren().length > 0) {
+                if (this.getChildren().length > 0) {
-          if (this.getChildren()[0].type === "lists_create_empty") {
+                    if (this.getChildren()[0].type === 'lists_create_empty') {
-            arrayType = this.getChildren()[0].getFieldValue("type");
+
-            number = Blockly.Arduino.valueToCode(
+                        arrayType = this.getChildren()[0].getFieldValue('type');
-              this.getChildren()[0],
+                        number = Blockly.Arduino.valueToCode(this.getChildren()[0], 'NUMBER', Blockly['Arduino'].ORDER_ATOMIC);
-              "NUMBER",
+                        Blockly.Arduino.variables_[myVar + myVar.type] = `${arrayType} ${myVar.name} [${number}];\n`;
-              Blockly["Arduino"].ORDER_ATOMIC
+                    }
-            );
+                }
-            Blockly.Arduino.variables_[
+                break;
              myVar + myVar.type
            ] = `${arrayType} ${myVar.name} [${number}];\n`;
          }
        }
-        break;
+        return code;
-    }
+    };
    return code;
  };
 };
 const getVariableFunction = function (block) {
-  const variableName = Blockly["Arduino"].variableDB_.getName(
+    const variableName = Blockly['Arduino'].variableDB_.getName(
-    block.getFieldValue("VAR"),
+        block.getFieldValue('VAR'),
-    Blockly.Variables.NAME_TYPE
+        Blockly.Variables.NAME_TYPE
-  );
+    );
-  var code = variableName;
+    var code = variableName;
-  return [code, Blockly["Arduino"].ORDER_ATOMIC];
+    return [code, Blockly['Arduino'].ORDER_ATOMIC];
 };
-Blockly["Arduino"]["variables_set_dynamic"] = setVariableFunction();
+Blockly['Arduino']['variables_set_dynamic'] = setVariableFunction()
-Blockly["Arduino"]["variables_get_dynamic"] = getVariableFunction;
+Blockly['Arduino']['variables_get_dynamic'] = getVariableFunction;
@@ -1,114 +1,127 @@
-import Blockly from 'blockly';
+import Blockly from "blockly";
 /**
 * Webserver Blocks by Lucas Steinmann
- * 
+ *
 */
 Blockly.Arduino.sensebox_initialize_http_server = function (block) {
-    var box_id = this.getFieldValue('Port');
+  var box_id = this.getFieldValue("Port");
-    Blockly.Arduino.libraries_['library_senseBoxMCU'] = '#include "SenseBoxMCU.h"';
+  Blockly.Arduino.libraries_["library_senseBoxMCU"] =
-    Blockly.Arduino.codeFunctions_['define_wifi_server'] = 'WiFiServer server(' + box_id + ');';
+    '#include "SenseBoxMCU.h"';
-    Blockly.Arduino.setupCode_['sensebox_wifi_server_beging'] = 'server.begin();';
+  Blockly.Arduino.codeFunctions_["define_wifi_server"] =
-    return '';
+    "WiFiServer server(" + box_id + ");";
  Blockly.Arduino.setupCode_["sensebox_wifi_server_beging"] = "server.begin();";
  return "";
 };
 Blockly.Arduino.sensebox_http_on_client_connect = function (block) {
-    var onConnect = Blockly.Arduino.statementToCode(block, 'ON_CONNECT');
+  var onConnect = Blockly.Arduino.statementToCode(block, "ON_CONNECT");
-    var code = '';
+  var code = "";
-    code += 'WiFiClient client = server.available();\n';
+  code += "WiFiClient client = server.available();\n";
-    code += 'if (client && client.available()) {\n';
+  code += "if (client && client.available()) {\n";
-    code += '  String request_string = listenClient(client);\n';
+  code += "  String request_string = listenClient(client);\n";
-    code += '  Request request;\n';
+  code += "  Request request;\n";
-    code += '  if (parseRequestSafe(request_string, request)) {\n';
+  code += "  if (parseRequestSafe(request_string, request)) {\n";
-    code += onConnect;
+  code += onConnect;
-    code += '  }\n';
+  code += "  }\n";
-    code += '  delay(1);\n';
+  code += "  delay(1);\n";
-    code += '  client.stop();\n';
+  code += "  client.stop();\n";
-    code += '  delay(1);\n';
+  code += "  delay(1);\n";
-    code += '}\n';
+  code += "}\n";
-    return code;
+  return code;
 };
 Blockly.Arduino.sensebox_http_method = function (block) {
-    var code = "request.method";
+  var code = "request.method";
-    return [code, Blockly.Arduino.ORDER_ATOMIC];
+  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
 Blockly.Arduino.sensebox_http_uri = function (block) {
-    var code = "request.uri";
+  var code = "request.uri";
-    return [code, Blockly.Arduino.ORDER_ATOMIC];
+  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
 Blockly.Arduino.sensebox_http_protocol_version = function (block) {
-    var code = "request.protocol_version";
+  var code = "request.protocol_version";
-    return [code, Blockly.Arduino.ORDER_ATOMIC];
+  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
 Blockly.Arduino.sensebox_http_user_agent = function (block) {
-    var code = "request.user_agent";
+  var code = "request.user_agent";
-    return [code, Blockly.Arduino.ORDER_ATOMIC];
+  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
 Blockly.Arduino.sensebox_generate_html_doc = function (block) {
-    var header = Blockly.Arduino.valueToCode(block, 'HEADER', Blockly.Arduino.ORDER_NONE) || '""';
+  var header =
-    var body = Blockly.Arduino.valueToCode(block, 'BODY', Blockly.Arduino.ORDER_NONE) || '""';
+    Blockly.Arduino.valueToCode(block, "HEADER", Blockly.Arduino.ORDER_NONE) ||
-    var code = 'buildHTML(' + header + ', ' + body + ')';
+    '""';
-    return [code, Blockly.Arduino.ORDER_ATOMIC];
+  var body =
    Blockly.Arduino.valueToCode(block, "BODY", Blockly.Arduino.ORDER_NONE) ||
    '""';
  var code = "buildHTML(" + header + ", " + body + ")";
  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
 Blockly.Arduino.sensebox_generate_http_succesful_response = function (block) {
-    var content = Blockly.Arduino.valueToCode(block, 'CONTENT', Blockly.Arduino.ORDER_NONE) || '""';
+  var content =
-    var code = 'client.println(buildSuccessfulResponse(request, ' + content + '));\n';
+    Blockly.Arduino.valueToCode(block, "CONTENT", Blockly.Arduino.ORDER_NONE) ||
-    return code;
+    '""';
  var code =
    "client.println(buildSuccessfulResponse(request, " + content + "));\n";
  return code;
 };
 Blockly.Arduino.sensebox_generate_http_not_found_response = function (block) {
-    var code = 'client.println(buildNotFoundResponse(request));\n';
+  var code = "client.println(buildNotFoundResponse(request));\n";
-    return code;
+  return code;
 };
 Blockly.Arduino.sensebox_ip_address = function (block) {
-    var code = "b->getIpAddress()";
+  var code = "b->getIpAddress()";
-    return [code, Blockly.Arduino.ORDER_ATOMIC];
+  return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
 Blockly.Arduino.sensebox_general_html_tag = function (block) {
-    var tag = this.getFieldValue('TAG');
+  var tag = this.getFieldValue("TAG");
-    var code = 'buildTag("' + tag + '",';
+  var code = 'buildTag("' + tag + '",';
-    var n = 0;
+  var n = 0;
-    var branch = Blockly.Arduino.valueToCode(block, 'DO' + n, Blockly.Arduino.ORDER_NONE);
+  var branch = Blockly.Arduino.valueToCode(
-    if (branch.length > 0) {
+    block,
-        code += '\n ' + branch;
+    "DO" + n,
-    } else {
+    Blockly.Arduino.ORDER_NONE
-        code += '""';
+  );
-    }
+  if (branch.length > 0) {
-    for (n = 1; n <= block.additionalChildCount_; n++) {
+    code += "\n " + branch;
-        branch = Blockly.Arduino.valueToCode(block, 'DO' + n, Blockly.Arduino.ORDER_NONE);
+  } else {
-        code += ' +' + branch;
+    code += '""';
-    }
+  }
-    return [code + ')', Blockly.Arduino.ORDER_ATOMIC];
+  for (n = 1; n <= block.additionalChildCount_; n++) {
    branch = Blockly.Arduino.valueToCode(
      block,
      "DO" + n,
      Blockly.Arduino.ORDER_NONE
    );
    code += " +" + branch;
  }
  return [code + ")", Blockly.Arduino.ORDER_ATOMIC];
 };
 Blockly.Arduino.sensebox_web_readHTML = function (block) {
-    var filename = this.getFieldValue('FILENAME');
+  var filename = this.getFieldValue("FILENAME");
-    Blockly.Arduino.libraries_['library_spi'] = '#include <SPI.h>';
+  Blockly.Arduino.libraries_["library_spi"] = "#include <SPI.h>";
-    Blockly.Arduino.libraries_['library_sd'] = '#include <SD.h>';
+  Blockly.Arduino.libraries_["library_sd"] = "#include <SD.h>";
-    Blockly.Arduino.codeFunctions_['define_sd' + filename] = 'File webFile;';
+  Blockly.Arduino.codeFunctions_["define_sd" + filename] = "File webFile;";
-    Blockly.Arduino.setupCode_['sensebox_sd'] = 'SD.begin(28);';
+  Blockly.Arduino.setupCode_["sensebox_sd"] = "SD.begin(28);";
-    var func = [
+  Blockly.Arduino.codeFunctions_["generateHTML"] = `
-        'String generateHTML(){',
+String generateHTML(){
-        ' webFile = SD.open("' + filename + '", FILE_READ);',
+     webFile = SD.open("${filename}", FILE_READ);
-        ' String finalString ="";',
+   String finalString ="";
-        ' while (webFile.available())',
+   while (webFile.available())
-        '   {',
+     {
-        '   finalString+=(char)webFile.read();',
+     finalString+=(char)webFile.read();
-        '   }',
+     }
-        ' return finalString;',
+   return finalString;
-        '}'];
+  }`;
-    var functionName = Blockly.Arduino.addFunction(
+  var code = `generateHTML()`;
-        'generateHTML', func.join('\n'));
+  return [code, Blockly.Arduino.ORDER_ATOMIC];
-    var code = functionName + '()';
+};
    return [code, Blockly.Arduino.ORDER_ATOMIC];
 };
@@ -1,20 +1,22 @@
 const colours = {
-  sensebox: 120,
+    sensebox: 120,
-  logic: 210,
+    logic: 210,
-  loops: 10,
+    loops: 10,
-  math: 230,
+    math: 230,
-  io: 60,
+    io: 60,
-  procedures: 290,
+    procedures: 290,
-  time: 140,
+    time: 140,
-  text: 160,
+    text: 160,
-  variables: 330,
+    variables: 330,
-  audio: 250,
+    audio: 250,
-  arrays: 33,
+    arrays: 33,
-  mqtt: 90,
+    mqtt: 90,
-  webserver: 40,
+    webserver: 40
-  phyphox: 25,
+}
-};
+
 export const getColour = () => {
-  return colours;
+    return colours;
 };
@@ -8,100 +8,235 @@
 *     types.
 */
 /** Single character. */
 export const CHARACTER = {
-    typeId: 'Character',
+  typeId: "Character",
-    typeName: 'char',
+  typeName: "char",
-    typeMsgName: 'ARD_TYPE_CHAR',
+  typeMsgName: "ARD_TYPE_CHAR",
-}
+};
 export const BOOLEAN = {
-    typeId: 'Boolean',
+  typeId: "Boolean",
-    typeName: 'boolean',
+  typeName: "boolean",
-    typeMsgName: 'ARD_TYPE_BOOL',
+  typeMsgName: "ARD_TYPE_BOOL",
-}
+};
 /** Text string. */
 export const TEXT = {
-    typeId: 'Text',
+  typeId: "Text",
-    typeName: 'String',
+  typeName: "String",
-    typeMsgName: 'ARD_TYPE_TEXT',
+  typeMsgName: "ARD_TYPE_TEXT",
-}
+};
 /** Short integer number. */
 export const SHORT_NUMBER = {
-    typeId: 'Short_Number',
+  typeId: "Short_Number",
-    typeName: 'int',
+  typeName: "int",
-    typeMsgName: 'ARD_TYPE_SHORT',
+  typeMsgName: "ARD_TYPE_SHORT",
-}
+};
 /** Integer number. */
 export const NUMBER = {
-    typeId: 'Number',
+  typeId: "Number",
-    typeName: 'int',
+  typeName: "int",
-    typeMsgName: 'ARD_TYPE_NUMBER',
+  typeMsgName: "ARD_TYPE_NUMBER",
-}
+};
 /** Large integer number. */
 export const LARGE_NUMBER = {
-    typeId: 'Large Number',
+  typeId: "Large Number",
-    typeName: 'long',
+  typeName: "long",
-    typeMsgName: 'ARD_TYPE_LONG',
+  typeMsgName: "ARD_TYPE_LONG",
-}
+};
 /** Decimal/floating point number. */
 export const DECIMAL = {
-    typeId: 'Decimal',
+  typeId: "Decimal",
-    typeName: 'float',
+  typeName: "float",
-    typeMsgName: 'ARD_TYPE_DECIMAL',
+  typeMsgName: "ARD_TYPE_DECIMAL",
-}
+};
 /** Array/List of items. */
 export const ARRAY = {
-    typeId: 'Array',
+  typeId: "Array",
-    typeName: 'Array',
+  typeName: "Array",
-    typeMsgName: 'ARD_TYPE_ARRAY',
+  typeMsgName: "ARD_TYPE_ARRAY",
-    compatibleTypes: []
+  compatibleTypes: [],
-}
+};
 /** Null indicate there is no type. */
 export const NULL = {
-    typeId: 'Null',
+  typeId: "Null",
-    typeName: 'void',
+  typeName: "void",
-    typeMsgName: 'ARD_TYPE_NULL',
+  typeMsgName: "ARD_TYPE_NULL",
-}
+};
 /** Type not defined, or not yet defined. */
 export const UNDEF = {
-    typeId: 'Undefined',
+  typeId: "Undefined",
-    typeName: 'undef',
+  typeName: "undef",
-    typeMsgName: 'ARD_TYPE_UNDEF',
+  typeMsgName: "ARD_TYPE_UNDEF",
-}
+};
 /** Set when no child block (meant to define the variable type) is connected. */
 export const CHILD_BLOCK_MISSING = {
-    typeId: 'ChildBlockMissing',
+  typeId: "ChildBlockMissing",
-    typeMsgName: 'ARD_TYPE_CHILDBLOCKMISSING',
+  typeMsgName: "ARD_TYPE_CHILDBLOCKMISSING",
-    compatibleTypes: []
+  compatibleTypes: [],
 }
 const compatibleTypes = {
    Array: ['Array'],
    boolean: ['boolean'],
    int: ['int', 'long', 'double', 'float'],
    char: ['char'],
    String: ['String'],
    void: ['void'],
    long: ['int', 'long'],
    double: ['int', 'long', 'double'],
    float: ['int', 'long', 'double', 'float'],
    null: ['null']
 }
 export const getCompatibleTypes = (type) => {
    return compatibleTypes[type];
 };
-export const VARIABLE_TYPES = [['SHORT_NUMBER', 'char'], ['NUMBER', 'int'], ['DECIMAL', 'long'], ['TEXT', 'String'], ['CHARACTER', 'char'], ['BOOLEAN', 'boolean'], ['NULL', 'void'], ['UNDEF', 'undefined']];
+const compatibleTypes = {
  Array: ["Array"],
  boolean: ["boolean"],
  int: ["int", "long", "double", "float"],
  char: ["char"],
  String: ["String"],
  void: ["void"],
  long: ["int", "long"],
  double: ["int", "long", "double"],
  float: ["int", "long", "double", "float"],
  null: ["null"],
 };
 export const getCompatibleTypes = (type) => {
  return compatibleTypes[type];
 };
 export const VARIABLE_TYPES = [
  ["SHORT_NUMBER", "char"],
  ["NUMBER", "int"],
  ["DECIMAL", "long"],
  ["TEXT", "String"],
  ["CHARACTER", "char"],
  ["BOOLEAN", "boolean"],
  ["NULL", "void"],
  ["UNDEF", "undefined"],
 ];
 // /**
 //  * Some Types have circular dependencies on their compatibilities, so add them
 //  * after declaration.
 //  */
 // Blockly.Types.NUMBER.addCompatibleTypes([
 //     Blockly.Types.BOOLEAN,
 //     Blockly.Types.SHORT_NUMBER,
 //     Blockly.Types.LARGE_NUMBER,
 //     Blockly.Types.DECIMAL]);
 // Blockly.Types.SHORT_NUMBER.addCompatibleTypes([
 //     Blockly.Types.BOOLEAN,
 //     Blockly.Types.NUMBER,
 //     Blockly.Types.LARGE_NUMBER,
 //     Blockly.Types.DECIMAL]);
 // Blockly.Types.LARGE_NUMBER.addCompatibleTypes([
 //     Blockly.Types.BOOLEAN,
 //     Blockly.Types.SHORT_NUMBER,
 //     Blockly.Types.NUMBER,
 //     Blockly.Types.DECIMAL]);
 // /**
 //  * Adds another type to the Blockly.Types collection.
 //  * @param {string} typeId_ Identifiable name of the type.
 //  * @param {string} typeMsgName_ Name of the member variable from Blockly.Msg
 //  *     object to identify the translateble string.for the Type name.
 //  * @param {Array<Blockly.Type>} compatibleTypes_ List of types this Type is
 //  *     compatible with.
 //  */
 // Blockly.Types.addType = function (typeId_, typeMsgName_, compatibleTypes_) {
 //     // The Id is used as the key from the value pair in the BlocklyTypes object
 //     var key = typeId_.toUpperCase().replace(/ /g, '_');
 //     if (Blockly.Types[key] !== undefined) {
 //         throw 'The Blockly type ' + key + ' already exists.';
 //     }
 //     Blockly.Types[key] = new Blockly.Type({
 //         typeId: typeId_,
 //         typeName: typeMsgName_,
 //         compatibleTypes: compatibleTypes_
 //     });
 // };
 // /**
 //  * Converts the static types dictionary in to a an array with 2-item arrays.
 //  * This array only contains the valid types, excluding any error or temp types.
 //  * @return {!Array<Array<string>>} Blockly types in the format described above.
 //  */
 // Blockly.Types.getValidTypeArray = function () {
 //     var typesArray = [];
 //     for (var typeKey in Blockly.Types) {
 //         if ((typeKey !== 'UNDEF') && (typeKey !== 'CHILD_BLOCK_MISSING') &&
 //             (typeKey !== 'NULL') && (typeKey !== 'ARRAY') &&
 //             (typeof Blockly.Types[typeKey] !== 'function') &&
 //             !(Blockly.Types[typeKey] instanceof RegExp)) {
 //             typesArray.push([Blockly.Types[typeKey].typeName, typeKey]);
 //         }
 //     }
 //     return typesArray;
 // };
 // /**
 //  * Navigates through child blocks of the argument block to get this block type.
 //  * @param {!Blockly.Block} block Block to navigate through children.
 //  * @return {Blockly.Type} Type of the input block.
 //  */
 // Blockly.Types.getChildBlockType = function (block) {
 //     var blockType = null;
 //     var nextBlock = block;
 //     // Only checks first input block, so it decides the type. Incoherences amongst
 //     // multiple inputs dealt at a per-block level with their own block warnings
 //     while (nextBlock && (nextBlock.getBlockType === undefined) &&
 //         (nextBlock.inputList.length > 0) &&
 //         (nextBlock.inputList[0].connection)) {
 //         nextBlock = nextBlock.inputList[0].connection.targetBlock();
 //     }
 //     if (nextBlock === block) {
 //         // Set variable block is empty, so no type yet
 //         blockType = Blockly.Types.CHILD_BLOCK_MISSING;
 //     } else if (nextBlock === null) {
 //         // Null return from targetBlock indicates no block connected
 //         blockType = Blockly.Types.CHILD_BLOCK_MISSING;
 //     } else {
 //         var func = nextBlock.getBlockType;
 //         if (func) {
 //             blockType = nextBlock.getBlockType();
 //         } else {
 //             // Most inner block, supposed to define a type, is missing getBlockType()
 //             blockType = Blockly.Types.NULL;
 //         }
 //     }
 //     return blockType;
 // };
 // /**
 //  * Regular expressions to identify an integer.
 //  * @private
 //  */
 // Blockly.Types.regExpInt_ = new RegExp(/^-?\d+$/);
 // /**
 //  * Regular expressions to identify a decimal.
 //  * @private
 //  */
 // Blockly.Types.regExpFloat_ = new RegExp(/^-?[0-9]*[.][0-9]+$/);
 // /**
 //  * Uses regular expressions to identify if the input number is an integer or a
 //  * floating point.
 //  * @param {string} numberString String of the number to identify.
 //  * @return {!Blockly.Type} Blockly type.
 //  */
 // Blockly.Types.identifyNumber = function (numberString) {
 //     if (Blockly.Types.regExpInt_.test(numberString)) {
 //         var intValue = parseInt(numberString);
 //         if (isNaN(intValue)) {
 //             return Blockly.Types.NULL;
 //         }
 //         if (intValue > 32767 || intValue < -32768) {
 //             return Blockly.Types.LARGE_NUMBER;
 //         }
 //         return Blockly.Types.NUMBER;
 //     } else if (Blockly.Types.regExpFloat_.test(numberString)) {
 //         return Blockly.Types.DECIMAL;
 //     }
 //     return Blockly.Types.NULL;
 // };
@@ -1,53 +1,48 @@
-import { AUDIO } from "./de/audio";
+
-import { BLE } from "./de/sensebox-ble";
+import { AUDIO } from './de/audio';
-import { FAQ } from "./de/faq";
+import { FAQ } from './de/faq';
-import { IO } from "./de/io";
+import { IO } from './de/io';
-import { LOGIC } from "./de/logic";
+import { LOGIC } from './de/logic';
-import { LOOPS } from "./de/loops";
+import { LOOPS } from './de/loops';
-import { MATH } from "./de/math";
+import { MATH } from './de/math';
-import { MQTT } from "./de/mqtt";
+import { MQTT } from './de/mqtt';
-import { DISPLAY } from "./de/sensebox-display";
+import { DISPLAY } from './de/sensebox-display';
-import { LED } from "./de/sensebox-led";
+import { LED } from './de/sensebox-led';
-import { LORA } from "./de/sensebox-lora";
+import { LORA } from './de/sensebox-lora';
-import { OSEM } from "./de/sensebox-osem";
+import { OSEM } from './de/sensebox-osem';
-import { RTC } from "./de/sensebox-rtc";
+import { SD } from './de/sensebox-sd';
-import { SD } from "./de/sensebox-sd";
+import { SENSORS } from './de/sensebox-sensors';
-import { SENSORS } from "./de/sensebox-sensors";
+import { TELEGRAM } from './de/sensebox-telegram';
-import { SENSEBOX } from "./de/sensebox";
+import { WEB } from './de/sensebox-web';
-import { TELEGRAM } from "./de/sensebox-telegram";
+import { TEXT } from './de/text';
-import { WEB } from "./de/sensebox-web";
+import { TIME } from './de/time';
-import { TEXT } from "./de/text";
+import { TOURS } from './de/tours';
-import { TIME } from "./de/time";
+import { TRANSLATIONS } from './de/translations';
-import { TOURS } from "./de/tours";
+import { UI } from './de/ui';
-import { TRANSLATIONS } from "./de/translations";
+import { VARIABLES } from './de/variables';
-import { UI } from "./de/ui";
+import { WEBSERVER } from './de/webserver';
 import { VARIABLES } from "./de/variables";
 import { WEBSERVER } from "./de/webserver";
 export const De = {
-  ...AUDIO,
+    ...AUDIO,
-  ...BLE,
+    ...FAQ,
-  ...FAQ,
+    ...IO,
-  ...IO,
+    ...LOGIC,
-  ...LOGIC,
+    ...LOOPS,
-  ...LOOPS,
+    ...MATH,
-  ...MATH,
+    ...MQTT,
-  ...MQTT,
+    ...DISPLAY,
-  ...DISPLAY,
+    ...LED,
-  ...LED,
+    ...LORA,
-  ...LORA,
+    ...OSEM,
-  ...OSEM,
+    ...SD,
-  ...RTC,
+    ...SENSORS,
-  ...SD,
+    ...TELEGRAM,
-  ...SENSORS,
+    ...WEB,
-  ...SENSEBOX,
+    ...TEXT,
-  ...TELEGRAM,
+    ...TIME,
-  ...WEB,
+    ...TOURS,
-  ...TEXT,
+    ...TRANSLATIONS,
-  ...TIME,
+    ...UI,
-  ...TOURS,
+    ...VARIABLES,
-  ...TRANSLATIONS,
+    ...WEBSERVER
-  ...UI,
+}
  ...VARIABLES,
  ...WEBSERVER,
 };
@@ -1,41 +0,0 @@
 export const BLE = {
  /**
   * Phyphox Blöcke
   */
  sensebox_phyphox_init: "Initialisiere Phyphox Gerät mit Namen:",
  sensebox_phyphox_createExperiment: "Erstelle Experiment",
  sensebox_phyphox_experimentName: "Name des Experiments",
  sensebox_phyphox_experimentTitle: "Titel",
  sensebox_phyphox_experimentCategory: "Kategorie",
  sensebox_phyphox_experimentDescription: "Beschreibung",
  sensebox_phyphox_experiment_description: "Kurze Beschreibung des Experiments",
  sensebox_phyphox_writeValues: "Sende Werte",
  sensebox_phyphox_createView: "Mit Graphen:",
  sensebox_phyphox_createGraph: "Erstelle Graph",
  sensebox_phyphox_graphLabel: "",
  sensebox_phyphox_unitx: "Einheit x-Achse",
  sensebox_phyphox_unity: "Einheit y-Achse",
  sensebox_phyphox_labelx: "Beschriftung x-Achse",
  sensebox_phyphox_labely: "Beschriftung y-Achse",
  sensebox_phyphox_channel0: "Wert x-Achse",
  sensebox_phyphox_channel1: "Wert y-Achse",
  sensebox_phyphox_style_dots: "Punkte",
  sensebox_phyphox_style_line: "Linie",
  sensebox_phyphox_timestamp: "Zeitstempel",
  sensebox_phyphox_channel: "Kanal",
  sensebox_phyphox_sendchannel: "sende an Kanal:",
  sensebox_phyphox_graphStyle: "Stil",
  sensebox_phyphox_init_tooltip:
    "Initialisere das Bluetooth Bee. Stecke diese auf dem Steckplatz **XBEE1**. Gib dem Phphox Messgerät einen eindeutigen Namen, damit du dieses in der App wiederfindest",
  sensebox_phyphox_experiment_tooltip:
    "Erstelle ein Experiment und vergib einen eindeutigen Namen und eine kurze Beschreibung. Füge bis zu 5 verschiedene Graphen in der Ansicht hinzu. ",
  sensebox_phyphox_graph_tooltip:
    "Erstellt einen neuen Graph für das Experiment. Gibt die Einheit und Beschriftung für die Achsen an und wähle den Stil der Visualisuerng der Messwerte. Füge an die Schnittstellen für die Werte der X- und Y-Achse den Kanal an auf dem die Messwerte später gesendet werden. Möchtest du einen Zeitstempel über die Phyphox App erstellen lassen verbinde den Block *Zeitstempel*",
  sensebox_phyphox_timestamp_tooltip:
    "Verwende diesen Block, um einen Zeitstempel über die Phyphox App erstellen zu lassen",
  sensebox_phyphox_sendchannel_tooltip:
    "Sendet einen Messwert an den ausgewählten Kanal",
  sensebox_phyphox_experiment_send_tooltip:
    "Sendet die Messwerte an die Phyphox App",
 };
@@ -1,40 +1,36 @@
 export const LED = {
-  /**
+    /**
-   * WS2818 RGB LED
+     * WS2818 RGB LED
-   */
+     */
-  senseBox_ws2818_rgb_led: "Setze RGB-LED an",
+    senseBox_ws2818_rgb_led: "Setze RGB-LED an",
-  senseBox_ws2818_rgb_led_init: "RGB LED (WS2818) initialisieren",
+    senseBox_ws2818_rgb_led_init: "RGB LED (WS2818) initialisieren",
-  senseBox_ws2818_rgb_led_position: "Position",
+    senseBox_ws2818_rgb_led_position: "Position",
-  senseBox_ws2818_rgb_led_brightness: "Helligkeit",
+    senseBox_ws2818_rgb_led_brightness: "Helligkeit",
-  senseBox_ws2818_rgb_led_tooltip:
+    senseBox_ws2818_rgb_led_tooltip: "Verändere mit diesem Block die Farbe deiner RGB-LED. Verbinde einen Block für die Farbe. Wenn mehrere RGB-LEDs miteinander verkettet werden kannst du über die Position bestimmen welche LED angesteuert wird. ",
-    "Verändere mit diesem Block die Farbe deiner RGB-LED. Verbinde einen Block für die Farbe. Wenn mehrere RGB-LEDs miteinander verkettet werden kannst du über die Position bestimmen welche LED angesteuert wird. ",
+    senseBox_ws2818_rgb_led_init_tooltip: "Schließe die RGB-LED an einen der drei **digital/analog Ports** an. Wenn mehrere RGB-LEDs miteinander verkettet werden kannst du über die Position bestimmen welche LED angesteuert wird. ",
-  senseBox_ws2818_rgb_led_init_tooltip:
+    senseBox_ws2818_rgb_led_color: "Farbe",
-    "Schließe die RGB-LED an einen der drei **digital/analog Ports** an. Wenn mehrere RGB-LEDs miteinander verkettet werden kannst du über die Position bestimmen welche LED angesteuert wird. ",
+    senseBox_ws2818_rgb_led_number: "Anzahl",
  senseBox_ws2818_rgb_led_color: "Farbe",
  senseBox_ws2818_rgb_led_number: "Anzahl",
-  /**
+    /**
-   * Color
+     * Color
-   */
+     */
-  COLOUR_BLEND_COLOUR1: "Farbe 1",
+    COLOUR_BLEND_COLOUR1: "Farbe 1",
-  COLOUR_BLEND_COLOUR2: "mit Farbe 2",
+    COLOUR_BLEND_COLOUR2: "mit Farbe 2",
-  COLOUR_BLEND_HELPURL: "http://meyerweb.com/eric/tools/color-blend/",
+    COLOUR_BLEND_HELPURL: "http://meyerweb.com/eric/tools/color-blend/",
-  COLOUR_BLEND_RATIO: "im Verhältnis",
+    COLOUR_BLEND_RATIO: "im Verhältnis",
-  COLOUR_BLEND_TITLE: "mische",
+    COLOUR_BLEND_TITLE: "mische",
-  COLOUR_BLEND_TOOLTIP:
+    COLOUR_BLEND_TOOLTIP: "Vermische 2 Farben mit konfigurierbaren Farbverhältnis (0.0 - 1.0).",
-    "Vermische 2 Farben mit konfigurierbaren Farbverhältnis (0.0 - 1.0).",
+    COLOUR_PICKER_HELPURL: "https://de.wikipedia.org/wiki/Farbe",
-  COLOUR_PICKER_HELPURL: "https://de.wikipedia.org/wiki/Farbe",
+    COLOUR_PICKER_TOOLTIP: "Wähle eine Farbe aus der Palette. Die Farbe wird automatisch in RGB-Werte konvertiert.",
-  COLOUR_PICKER_TOOLTIP:
+    COLOUR_RANDOM_HELPURL: "http://randomcolour.com",  // untranslated
-    "Wähle eine Farbe aus der Palette. Die Farbe wird automatisch in RGB-Werte konvertiert.",
+    COLOUR_RANDOM_TITLE: "zufällige Farbe",
-  COLOUR_RANDOM_HELPURL: "http://randomcolour.com", // untranslated
+    COLOUR_RANDOM_TOOLTIP: "Erstelle eine Farbe nach dem Zufallsprinzip.",
-  COLOUR_RANDOM_TITLE: "zufällige Farbe",
+    COLOUR_RGB_BLUE: "blau",
-  COLOUR_RANDOM_TOOLTIP: "Erstelle eine Farbe nach dem Zufallsprinzip.",
+    COLOUR_RGB_GREEN: "grün",
-  COLOUR_RGB_BLUE: "blau",
+    COLOUR_RGB_HELPURL: "https://de.wikipedia.org/wiki/RGB-Farbraum",
-  COLOUR_RGB_GREEN: "grün",
+    COLOUR_RGB_RED: "rot",
-  COLOUR_RGB_HELPURL: "https://de.wikipedia.org/wiki/RGB-Farbraum",
+    COLOUR_RGB_TITLE: "Farbe mit",
-  COLOUR_RGB_RED: "rot",
+    COLOUR_RGB_TOOLTIP: "Erstelle eine Farbe mit selbst definierten Rot-, Grün- und Blauwerten. Alle Werte müssen zwischen 0 und 255 liegen. 0 ist hierbei die geringte Intensität der Farbe 255 die höchste.",
-  COLOUR_RGB_TITLE: "Farbe mit",
+
-  COLOUR_RGB_TOOLTIP:
+}
    "Erstelle eine Farbe mit selbst definierten Rot-, Grün- und Blauwerten. Alle Werte müssen zwischen 0 und 255 liegen. 0 ist hierbei die geringte Intensität der Farbe 255 die höchste.",
 };
@@ -1,19 +0,0 @@
 export const RTC = {
  sensebox_rtc_init: "Initialisiere RTC",
  sensebox_rtc_init_tooltip:
    "Initialisiere die RTC. Schließe diese an einen der 5 I2C/Wire Anschlüsse an und lege die Batterie ein. Bevor du die Uhrzeit auslesen kannst muss diese zunächst einmal gesetzt werden. Dieser Schritt muss normalerweise nur einmalig durchgeführt werden.",
  sensebox_rtc_set: "Setze Uhrzeit/Datum der RTC",
  sensebox_rtc_set_tooltip:
    "Stellt die Uhrzeit der RTC ein. Beachte, dass du diesen Block im Setup ausführst.",
  sensebox_rtc_get_timestamp: "Zeitstempel",
  sensebox_rtc_get_timestamp_tooltip:
    "Gibt dir einen in ISO 8601 formatierten Zeitstempel zurück. Bsp: 2021-12-24T18:21Z",
  sensebox_rtc_get: "Wert: ",
  sensebox_rtc_get_tooltip: "Gibt dir den ausgewählten Wert zurück.",
  sensebox_rtc_second: "Sekunden",
  sensebox_rtc_minutes: "Minuten",
  sensebox_rtc_hour: "Stunden",
  sensebox_rtc_day: "Tag",
  sensebox_rtc_month: "Monat",
  sensebox_rtc_year: "Jahr",
 };
@@ -1,13 +1,16 @@
 export const SD = {
-    /**
+  /**
-     * SD-Block
+   * SD-Block
-     */
+   */
-    senseBox_sd_create_file: "Erstelle Datei auf SD-Karte",
+  senseBox_sd_create_file: "Erstelle Datei auf SD-Karte",
-    senseBox_sd_write_file: "Schreibe Daten auf SD-Karte",
+  senseBox_sd_write_file: "Schreibe Daten auf SD-Karte",
-    senseBox_sd_open_file: "Öffne eine Datei auf der SD-Karte",
+  senseBox_sd_open_file: "Öffne Datei auf der SD-Karte",
-    senseBox_sd_create_file_tooltip: "Erstellt eine Datei auf der Karte. Stecke das SD-Bee auf den Steckplatz **XBEE2**. Die **maximale** Länge des Dateinamen sind **8 Zeichen**. Die Datei sollte zuerst im *Setup()* erstellt werden",
+  senseBox_sd_create_file_tooltip:
-    senseBox_sd_write_file_tooptip: "Schreibe Daten auf die SD-Karte. Beachte, dass die Datei zuerst geöffnet werden muss.",
+    "Erstellt eine Datei auf der Karte. Stecke das SD-Bee auf den Steckplatz **XBEE2**. Die **maximale** Länge des Dateinamen sind **8 Zeichen**. Die Datei sollte zuerst im *Setup()* erstellt werden",
-    senseBox_sd_open_file_tooltip: "Öffne die Datei auf der SD-Karte, um Dateien zu speichern. Am Ende der Schleife wird die Datei automatisch wieder geschlossen.",
+  senseBox_sd_write_file_tooptip:
-    sensebox_sd_filename: "Daten",
+    "Schreibe Daten auf die SD-Karte. Beachte, dass die Datei zuerst geöffnet werden muss.",
-    senseBox_sd_decimals: "Dezimalen",
+  senseBox_sd_open_file_tooltip:
-}
+    "Öffne die Datei auf der SD-Karte, um Dateien zu speichern. Am Ende der Schleife wird die Datei automatisch wieder geschlossen.",
  sensebox_sd_filename: "Daten",
  senseBox_sd_decimals: "Dezimalen",
 };
@@ -1,16 +0,0 @@
 export const SENSEBOX = {
  /**
   * Multiplexer
   */
  senseBox_multiplexer_init: "Initialisiere Multiplexer mit ",
  senseBox_multiplexer_init_tooltip:
    "Schließe den Multiplexer mit einem JST-JST Kabel an einen der 5 I2C-Ports an. Nun kannst du bis zu 8 gleiche Sensoren verwenden über die entsprechenden Kanäle ansprechen. Gib im Block die Anzahl der verwendeten Kanäle an",
  senseBox_multiplexer_init_helpurl:
    "https://docs.sensebox.de/hardware/zubehoer-multiplexer/",
  senseBox_multplexer_nchannels: "Kanälen",
  senseBox_multiplexer_changeChannel: "Wechsel Kanal auf:",
  sensebox_multiplexer_changeChannel_tooltip:
    "Wähle den entsprechenden Kanal aus",
  sensebox_multiplexer_changeChannel_helpurl:
    "https://docs.sensebox.de/hardware/zubehoer-multiplexer/",
 };
@@ -1,20 +1,22 @@
 export const TIME = {
-
+  /**
-    /**
+   * Interval Block
-     * Interval Block
+   */
-     */
+  senseBox_interval_timer: "Intervall:",
-    senseBox_interval_timer: "Messintervall",
+  senseBox_interval: "ms",
-    senseBox_interval: "ms",
+  senseBox_interval_timer_tip: "Intervall",
-    senseBox_interval_timer_tip: "Intervall",
+  senseBox_interval_time: "Zeit: ",
-    ARD_TIME_DELAY: "Warte",
+  ARD_TIME_DELAY: "Warte",
-    ARD_TIME_DELAY_MICROS: "Mikrosekunden",
+  ARD_TIME_DELAY_MICROS: "Mikrosekunden",
-    ARD_TIME_DELAY_MICRO_TIP: "Warte eine spezifischen Zeit in Microsekunden",
+  ARD_TIME_DELAY_MICRO_TIP: "Warte eine spezifischen Zeit in Microsekunden",
-    ARD_TIME_DELAY_TIP: "Warte spezifische Zeit in Millisekunden",
+  ARD_TIME_DELAY_TIP: "Warte spezifische Zeit in Millisekunden",
-    ARD_TIME_INF: "Warte für immer (Beende Programm)",
+  ARD_TIME_INF: "Warte für immer (Beende Programm)",
-    ARD_TIME_INF_TIP: "Stoppt das Programm.",
+  ARD_TIME_INF_TIP: "Stoppt das Programm.",
-    ARD_TIME_MICROS: "Bereits vergangen Zeit (Mikrosekunden)",
+  ARD_TIME_MICROS: "Bereits vergangen Zeit (Mikrosekunden)",
-    ARD_TIME_MICROS_TIP: "Gibt eine Zahl in Microsekunden zurück, die der Zeitdauer des Aktuellen Programms entspricht. Muss als positiven Integer gespeichert werden",  // untranslated
+  ARD_TIME_MICROS_TIP:
-    ARD_TIME_MILLIS: "Bereits vergangen Zeit (Millisekunden)",
+    "Gibt eine Zahl in Microsekunden zurück, die der Zeitdauer des Aktuellen Programms entspricht. Muss als positiven Integer gespeichert werden", // untranslated
-    ARD_TIME_MILLIS_TIP: "Gibt eine Zahl in Millisekunden zurück, die der Zeitdauer des Aktuellen Programms entspricht. Muss als positiven Integer gespeichert werden",  // untranslated
+  ARD_TIME_MILLIS: "Bereits vergangen Zeit (Millisekunden)",
-    ARD_TIME_MS: "Millisekunden",
+  ARD_TIME_MILLIS_TIP:
-}
+    "Gibt eine Zahl in Millisekunden zurück, die der Zeitdauer des Aktuellen Programms entspricht. Muss als positiven Integer gespeichert werden", // untranslated
  ARD_TIME_MS: "Millisekunden",
 };
@@ -1,256 +1,224 @@
 export const UI = {
-  /**
+    /**
-   * Toolbox
+     * Toolbox
-   */
+     */
-  toolbox_sensors: "Sensoren",
+    toolbox_sensors: "Sensoren",
-  toolbox_logic: "Logik",
+    toolbox_logic: "Logik",
-  toolbox_loops: "Schleifen",
+    toolbox_loops: "Schleifen",
-  toolbox_math: "Mathematik",
+    toolbox_math: "Mathematik",
-  toolbox_io: "Eingang/Ausgang",
+    toolbox_io: "Eingang/Ausgang",
-  toolbox_time: "Zeit",
+    toolbox_time: "Zeit",
-  toolbox_functions: "Funktionen",
+    toolbox_functions: "Funktionen",
-  toolbox_variables: "Variablen",
+    toolbox_variables: "Variablen",
  variable_NUMBER: "Zahl (int)",
  variable_SHORT_NUMBER: "char",
  variable_LONG: "große Zahl (long)",
  variable_DECIMAL: "Kommazahl (float)",
  variables_TEXT: "Text (string)",
  variables_ARRAY: "Array (array)",
  variables_CHARACTER: "char (char)",
  variables_BOOLEAN: "Boolean (boolean)",
  variables_NULL: "void (void)",
  variables_UNDEF: "undefined",
-  /**
+    /**
-   * Tooltips
+     * Tooltips
-   *
+     *
-   */
+     */
-  tooltip_compile_code: "Code kompilieren",
+    tooltip_compile_code: "Code kompilieren",
-  tooltip_save_blocks: "Blöcke speichern",
+    tooltip_save_blocks: "Blöcke speichern",
-  tooltip_open_blocks: "Blöcke öffnen",
+    tooltip_open_blocks: "Blöcke öffnen",
-  tooltip_screenshot: "Screenshot erstellen",
+    tooltip_screenshot: "Screenshot erstellen",
-  tooltip_clear_workspace: "Workspace zurücksetzen",
+    tooltip_clear_workspace: "Workspace zurücksetzen",
-  tooltip_share_blocks: "Blöcke teilen",
+    tooltip_share_blocks: "Blöcke teilen",
-  tooltip_show_code: "Code anzeigen",
+    tooltip_show_code: "Code anzeigen",
-  tooltip_hide_code: "Code ausblenden",
+    tooltip_hide_code: "Code ausblenden",
-  tooltip_delete_project: "Projekt löschen",
+    tooltip_delete_project: "Projekt löschen",
-  tooltip_project_name: "Name des Projektes",
+    tooltip_project_name: "Name des Projektes",
-  tooltip_download_project: "Projekt herunterladen",
+    tooltip_download_project: "Projekt herunterladen",
-  tooltip_open_project: "Projekt öffnen",
+    tooltip_open_project: "Projekt öffnen",
-  tooltip_update_project: "Projekt aktualisieren",
+    tooltip_update_project: "Projekt aktualisieren",
-  tooltip_save_project: "Projekt speichern",
+    tooltip_save_project: "Projekt speichern",
-  tooltip_create_project: "Projekt erstellen",
+    tooltip_create_project: "Projekt erstellen",
-  tooltip_share_project: "Projekt teilen",
+    tooltip_share_project: "Projekt teilen",
-  tooltip_reset_workspace: "Workspace zurücksetzen",
+    tooltip_reset_workspace: "Workspace zurücksetzen",
-  tooltip_copy_link: "Link kopieren",
+    tooltip_copy_link: "Link kopieren",
-  tooltip_trashcan_hide: "gelöschte Blöcke ausblenden",
+    tooltip_trashcan_hide: 'gelöschte Blöcke ausblenden',
-  tooltip_trashcan_delete: "Blöcke endgültig löschen",
+    tooltip_trashcan_delete: 'Blöcke endgültig löschen',
-  tooltip_project_title: "Titel des Projektes",
+    tooltip_project_title: "Titel des Projektes",
-  tooltip_check_solution: "Lösung kontrollieren",
+    tooltip_check_solution: "Lösung kontrollieren",
-  tooltip_copy_code: "Code in die Zwischenablage kopieren",
+    tooltip_copy_code: "Code in die Zwischenablage kopieren",
-  /**
+    /**
-   * Messages
+     * Messages
-   *
+     *
-   */
+     */
-  messages_delete_project_failed:
+    messages_delete_project_failed: "Fehler beim Löschen des Projektes. Versuche es noch einmal.",
-    "Fehler beim Löschen des Projektes. Versuche es noch einmal.",
+    messages_reset_workspace_success: "Das Projekt wurde erfolgreich zurückgesetzt",
-  messages_reset_workspace_success:
+    messages_PROJECT_UPDATE_SUCCESS: "Das Projekt wurde erfolgreich aktualisiert.",
-    "Das Projekt wurde erfolgreich zurückgesetzt",
+    messages_GALLERY_UPDATE_SUCCESS: "Das Galerie-Projekt wurde erfolgreich aktualisiert.",
-  messages_PROJECT_UPDATE_SUCCESS:
+    messages_PROJECT_UPDATE_FAIL: "Fehler beim Aktualisieren des Projektes. Versuche es noch einmal.",
-    "Das Projekt wurde erfolgreich aktualisiert.",
+    messages_GALLERY_UPDATE_FAIL: "Fehler beim Aktualisieren des Galerie-Projektes. Versuche es noch einmal.",
-  messages_GALLERY_UPDATE_SUCCESS:
+    messages_gallery_save_fail_1: "Fehler beim Speichern des ",
-    "Das Galerie-Projekt wurde erfolgreich aktualisiert.",
+    messages_gallery_save_fail_2: "Projektes. Versuche es noch einmal.",
-  messages_PROJECT_UPDATE_FAIL:
+    messages_SHARE_SUCCESS: 'Programm teilen',
-    "Fehler beim Aktualisieren des Projektes. Versuche es noch einmal.",
+    messages_SHARE_FAIL: "Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal.",
-  messages_GALLERY_UPDATE_FAIL:
+    messages_copylink_success: 'Link erfolgreich in Zwischenablage gespeichert.',
-    "Fehler beim Aktualisieren des Galerie-Projektes. Versuche es noch einmal.",
+    messages_rename_success_01: 'Das Projekt wurde erfolgreich in ',
-  messages_gallery_save_fail_1: "Fehler beim Speichern des ",
+    messages_rename_success_02: 'umbenannt.',
-  messages_gallery_save_fail_2: "Projektes. Versuche es noch einmal.",
+    messages_newblockly_head: "Willkommen zur neuen Version Blockly für die senseBox",
-  messages_SHARE_SUCCESS: "Programm teilen",
+    messages_newblockly_text: "Die neue Blockly-Version befindet sich derzeit in der Testphase. Wenn Sie einen Fehler finden, melden Sie diesen bitte in unserem [Forum](https://forum.sensebox.de/t/neue-blockly-version-beta-test-und-feedback/1176). Eine Übersicht über alle neuen Funktionen finden Sie [hier](/news)",
-  messages_SHARE_FAIL:
+    messages_GET_TUTORIAL_FAIL: 'Zurück zur Tutorials-Übersicht',
-    "Fehler beim Erstellen eines Links zum Teilen deines Programmes. Versuche es noch einmal.",
+    messages_LOGIN_FAIL: 'Der Benutzername oder das Passwort ist nicht korrekt.',
-  messages_copylink_success: "Link erfolgreich in Zwischenablage gespeichert.",
+    messages_copy_code: "Code wurde in die Zwischenablage kopiert",
-  messages_rename_success_01: "Das Projekt wurde erfolgreich in ",
+    /**
-  messages_rename_success_02: "umbenannt.",
+     * Share Dialog
-  messages_newblockly_head:
+     */
    "Willkommen zur neuen Version Blockly für die senseBox",
  messages_newblockly_text:
    "Die neue Blockly-Version befindet sich derzeit in der Testphase. Wenn Sie einen Fehler finden, melden Sie diesen bitte in unserem [Forum](https://forum.sensebox.de/t/neue-blockly-version-beta-test-und-feedback/1176). Eine Übersicht über alle neuen Funktionen finden Sie [hier](/news)",
  messages_GET_TUTORIAL_FAIL: "Zurück zur Tutorials-Übersicht",
  messages_LOGIN_FAIL: "Der Benutzername oder das Passwort ist nicht korrekt.",
  messages_copy_code: "Code wurde in die Zwischenablage kopiert",
-  /**
+    sharedialog_headline: "Dein Link wurde erstellt.",
-   * Reset Dialog
+    sharedialog_text: "Über den folgenden Link kannst du dein Programm teilen.",
   */
-  resetDialog_headline: "Workspace zurücksetzen?",
+    /**
-  resetDialog_text:
+     * Project rename Dialog
-    "Möchtest du wirklich die Workspace zurücksetzen? Hierbei werden alle Blöcke gelöscht!",
+     */
-  /**
+    renamedialog_headline: "Projekt benennen",
-   * Share Dialog
+    renamedialog_text: "Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf 'Bestätigen'.",
   */
-  sharedialog_headline: "Dein Link wurde erstellt.",
+    /**
-  sharedialog_text: "Über den folgenden Link kannst du dein Programm teilen.",
+     * Compile Dialog
     *
     */
-  /**
+    compiledialog_headline: "Fehler",
-   * Project rename Dialog
+    compiledialog_text: "Beim kompilieren ist ein Fehler aufgetreten. Überprüfe deine Blöcke und versuche es erneut",
   */
-  renamedialog_headline: "Projekt benennen",
+    /**
-  renamedialog_text:
+     * Buttons
-    "Bitte gib einen Namen für das Projekt ein und bestätige diesen mit einem Klick auf 'Bestätigen'.",
+     *
     */
-  /**
+    button_cancel: "Abbrechen",
-   * Compile Dialog
+    button_close: "Schließen",
-   *
+    button_accept: "Bestätigen",
-   */
+    button_compile: "Kompilieren",
    button_create_variableCreate: "Erstelle Variable",
    button_back: "Zurück",
    button_next: "nächster Schritt",
    button_tutorial_overview: "Tutorial Übersicht",
    button_login: "Anmelden",
-  compiledialog_headline: "Fehler",
+    /**
-  compiledialog_text:
+     *
-    "Beim kompilieren ist ein Fehler aufgetreten. Überprüfe deine Blöcke und versuche es erneut",
+     */
-  /**
+    filename: "Dateiname",
-   * Buttons
+    projectname: "Projektname",
   *
   */
-  button_cancel: "Abbrechen",
+    /**
-  button_close: "Schließen",
+     * Settings
-  button_accept: "Bestätigen",
+     */
-  button_compile: "Kompilieren",
+    settings_head: "Einstellungen",
-  button_create_variableCreate: "Erstelle Variable",
+    settings_language: "Sprache",
-  button_back: "Zurück",
+    settings_language_text: "Auswahl der Sprache gilt für die gesamte Anwendung. Es kann zwischen Deutsch und Englisch unterschieden werden.",
-  button_next: "nächster Schritt",
+    settings_language_de: "Deutsch",
-  button_tutorial_overview: "Tutorial Übersicht",
+    settings_language_en: "Englisch",
-  button_login: "Anmelden",
+    settings_renderer: "Renderer",
    settings_renderer_text: "Der eingestellte Renderer bestimmt das Aussehen der Blöcke. Es kann zwischen 'Geras' und 'Zelos' unterschieden werden, wobei 'Zelos' insbesondere für eine Touch-Anwendung geeignet ist.",
    settings_statistics: "Statistiken",
    settings_statistics_text: "Die Anzeige von Statistiken zur Nutzung der Blöcke oberhalb der Arbeitsfläche kann ein- oder ausgeblendet werden.",
    settings_statistics_on: "An",
    settings_statistics_off: "Aus",
-  /**
+    /**
-   *
+     * 404
-   */
+     */
-  filename: "Dateiname",
+    notfound_head: "Die von Ihnen angeforderte Seite kann nicht gefunden werden.",
-  projectname: "Projektname",
+    notfound_text: "Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar.",
  /**
   * Settings
   */
  settings_head: "Einstellungen",
  settings_language: "Sprache",
  settings_language_text:
    "Auswahl der Sprache gilt für die gesamte Anwendung. Es kann zwischen Deutsch und Englisch unterschieden werden.",
  settings_language_de: "Deutsch",
  settings_language_en: "Englisch",
  settings_renderer: "Renderer",
  settings_renderer_text:
    "Der eingestellte Renderer bestimmt das Aussehen der Blöcke. Es kann zwischen 'Geras' und 'Zelos' unterschieden werden, wobei 'Zelos' insbesondere für eine Touch-Anwendung geeignet ist.",
  settings_statistics: "Statistiken",
  settings_statistics_text:
    "Die Anzeige von Statistiken zur Nutzung der Blöcke oberhalb der Arbeitsfläche kann ein- oder ausgeblendet werden.",
  settings_statistics_on: "An",
  settings_statistics_off: "Aus",
-  /**
+    /**
-   * 404
+     * Labels
-   */
+     */
-  notfound_head: "Die von Ihnen angeforderte Seite kann nicht gefunden werden.",
+    labels_donotshowagain: 'Dialog nicht mehr anzeigen',
-  notfound_text:
+    labels_here: "hier",
-    "Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar.",
+    labels_username: 'E-Mail oder Nutzername',
    labels_password: "Passwort",
-  /**
+    /**
-   * Labels
+     * Badges
-   */
+     */
-  labels_donotshowagain: "Dialog nicht mehr anzeigen",
+    badges_explaination: "Eine Übersicht über alle erhaltenen Badges im Kontext Blockly for senseBox findest du ",
-  labels_here: "hier",
+    badges_ASSIGNE_BADGE_SUCCESS_01: "Herzlichen Glückwunsch! Du hast den Badge ",
-  labels_username: "E-Mail oder Nutzername",
+    badges_ASSIGNE_BADGE_SUCCESS_02: " erhalten.",
-  labels_password: "Passwort",
+    /**
     * Tutorials
     */
-  /**
+    tutorials_assessment_task: "Aufgabe",
-   * Tutorials
+    tutorials_hardware_head: "Für die Umsetzung benötigst du folgende Hardware:",
-   */
+    tutorials_hardware_moreInformation: "Weitere Informationen zur Hardware-Komponente findest du",
    tutorials_hardware_here: "hier",
    tutorials_requirements: "Bevor du mit diesem Tutorial fortfährst solltest du folgende Tutorials erfolgreich abgeschlossen haben:",
  tutorials_assessment_task: "Aufgabe",
  tutorials_hardware_head: "Für die Umsetzung benötigst du folgende Hardware:",
  tutorials_hardware_moreInformation:
    "Weitere Informationen zur Hardware-Komponente findest du",
  tutorials_hardware_here: "hier",
  tutorials_requirements:
    "Bevor du mit diesem Tutorial fortfährst solltest du folgende Tutorials erfolgreich abgeschlossen haben:",
-  /**
+    /**
-   * Tutorial Builder
+     * Tutorial Builder
-   */
+     */
-  builder_solution: "Lösung",
+    builder_solution: "Lösung",
-  builder_solution_submit: "Lösung einreichen",
+    builder_solution_submit: "Lösung einreichen",
-  builder_example_submit: "Beispiel einreichen",
+    builder_example_submit: "Beispiel einreichen",
-  builder_comment:
+    builder_comment: "Anmerkung: Man kann den initialen Setup()- bzw. Endlosschleifen()-Block löschen. Zusätzlich ist es möglich u.a. nur einen beliebigen Block auszuwählen, ohne dass dieser als deaktiviert dargestellt wird.",
-    "Anmerkung: Man kann den initialen Setup()- bzw. Endlosschleifen()-Block löschen. Zusätzlich ist es möglich u.a. nur einen beliebigen Block auszuwählen, ohne dass dieser als deaktiviert dargestellt wird.",
+    builder_hardware_order: "Beachte, dass die Reihenfolge des Auswählens maßgebend ist.",
-  builder_hardware_order:
+    builder_hardware_helper: "Wähle mindestens eine Hardware-Komponente aus.",
-    "Beachte, dass die Reihenfolge des Auswählens maßgebend ist.",
+    builder_requirements_head: "Voraussetzungen",
-  builder_hardware_helper: "Wähle mindestens eine Hardware-Komponente aus.",
+    builder_requirements_order: "Beachte, dass die Reihenfolge des Anhakens maßgebend ist.",
  builder_requirements_head: "Voraussetzungen",
  builder_requirements_order:
    "Beachte, dass die Reihenfolge des Anhakens maßgebend ist.",
-  /**
+    /**
-   * Login
+     * Login
-   */
+     */
  login_head: "Anmelden",
  login_osem_account_01: "Du benötigst einen ",
  login_osem_account_02: "Account um dich einzuloggen",
  login_lostpassword: "Du hast dein Passwort vergessen?",
  login_createaccount: "Falls du noch keinen Account hast erstellen einen auf ",
  /**
   * Navbar
   */
-  navbar_tutorials: "Tutorials",
+    login_head: "Anmelden",
-  navbar_tutorialbuilder: "Tutorial erstellen",
+    login_osem_account_01: "Du benötigst einen ",
-  navbar_gallery: "Gallerie",
+    login_osem_account_02: "Account um dich einzuloggen",
-  navbar_projects: "Projekte",
+    login_lostpassword: "Du hast dein Passwort vergessen?",
    login_createaccount: "Falls du noch keinen Account hast erstellen einen auf ",
    /**
     * Navbar
     */
-  navbar_menu: "Menü",
+    navbar_tutorials: "Tutorials",
-  navbar_login: "Einloggen",
+    navbar_tutorialbuilder: "Tutorial erstellen",
-  navbar_account: "Konto",
+    navbar_gallery: "Gallerie",
-  navbar_logout: "Abmelden",
+    navbar_projects: "Projekte",
  navbar_settings: "Einstellungen",
-  /**
+    navbar_menu: "Menü",
-   * Codeviewer
+    navbar_login: "Einloggen",
-   */
+    navbar_mybadges: "myBadges",
    navbar_account: "Konto",
    navbar_logout: "Abmelden",
    navbar_settings: "Einstellungen",
-  codeviewer_arduino: "Arduino Quellcode",
+    /**
-  codeviewer_xml: "XML Blöcke",
+     * Codeviewer
     */
-  /**
+    codeviewer_arduino: "Arduino Quellcode",
-   * Overlay
+    codeviewer_xml: "XML Blöcke",
   */
  compile_overlay_head: "Dein Programm wird nun kompiliert und heruntergeladen",
  compile_overlay_text: "Kopiere es anschließend auf deine senseBox MCU",
  compile_overlay_help: "Benötigst du mehr Hilfe? Dann schaue hier: ",
  /**
   * Tooltip Viewer
   */
-  tooltip_viewer: "Hilfe",
+    /**
-  tooltip_moreInformation: "Mehr Informationen findest du ",
+     * Overlay
-  tooltip_hint: "Wähle einen Block aus um dir die Hilfe anzeigen zu lassen",
+     */
-  /**
+    compile_overlay_head: "Dein Programm wird nun kompiliert und heruntergeladen",
-   * IDEDrawer
+    compile_overlay_text: "Kopiere es anschließend auf deine senseBox MCU",
-   */
+    compile_overlay_help: "Benötigst du mehr Hilfe? Dann schaue hier: ",
-  drawer_ideerror_head: "Hoppla da ist was schief gegangen.",
+
-  drawer_ideerror_text:
+    /**
-    "Beim kompilieren ist ein Fehler aufgetreten, überprüfe deine Blöcke.",
+     * Tooltip Viewer
-};
+     */
    tooltip_viewer: "Hilfe",
    tooltip_moreInformation: "Mehr Informationen findest du ",
    tooltip_hint: "Wähle einen Block aus um dir die Hilfe anzeigen zu lassen",
 }
@@ -1,53 +1,47 @@
-import { AUDIO } from "./en/audio";
+import { AUDIO } from './en/audio';
-import { BLE } from "./en/sensebox-ble";
+import { FAQ } from './en/faq';
-import { FAQ } from "./en/faq";
+import { IO } from './en/io';
-import { IO } from "./en/io";
+import { LOGIC } from './en/logic';
-import { LOGIC } from "./en/logic";
+import { LOOPS } from './en/loops';
-import { LOOPS } from "./en/loops";
+import { MATH } from './en/math';
-import { MATH } from "./en/math";
+import { MQTT } from './en/mqtt';
-import { MQTT } from "./en/mqtt";
+import { DISPLAY } from './en/sensebox-display';
-import { SENSEBOX } from "./en/sensebox";
+import { LED } from './en/sensebox-led';
-import { DISPLAY } from "./en/sensebox-display";
+import { LORA } from './en/sensebox-lora';
-import { LED } from "./en/sensebox-led";
+import { OSEM } from './en/sensebox-osem';
-import { LORA } from "./en/sensebox-lora";
+import { SD } from './en/sensebox-sd';
-import { OSEM } from "./en/sensebox-osem";
+import { SENSORS } from './en/sensebox-sensors';
-import { RTC } from "./en/sensebox-rtc";
+import { TELEGRAM } from './en/sensebox-telegram';
-import { SD } from "./en/sensebox-sd";
+import { WEB } from './en/sensebox-web';
-import { SENSORS } from "./en/sensebox-sensors";
+import { TEXT } from './en/text';
-import { TELEGRAM } from "./en/sensebox-telegram";
+import { TIME } from './en/time';
-import { WEB } from "./en/sensebox-web";
+import { TOURS } from './en/tours';
-import { TEXT } from "./en/text";
+import { TRANSLATIONS } from './en/translations';
-import { TIME } from "./en/time";
+import { UI } from './en/ui';
-import { TOURS } from "./en/tours";
+import { VARIABLES } from './en/variables';
-import { TRANSLATIONS } from "./en/translations";
+import { WEBSERVER } from './en/webserver';
 import { UI } from "./en/ui";
 import { VARIABLES } from "./en/variables";
 import { WEBSERVER } from "./en/webserver";
 export const En = {
-  ...AUDIO,
+    ...AUDIO,
-  ...BLE,
+    ...FAQ,
-  ...FAQ,
+    ...IO,
-  ...IO,
+    ...LOGIC,
-  ...LOGIC,
+    ...LOOPS,
-  ...LOOPS,
+    ...MATH,
-  ...MATH,
+    ...MQTT,
-  ...MQTT,
+    ...DISPLAY,
-  ...DISPLAY,
+    ...LED,
-  ...LED,
+    ...LORA,
-  ...LORA,
+    ...OSEM,
-  ...OSEM,
+    ...SD,
-  ...RTC,
+    ...SENSORS,
-  ...SD,
+    ...TELEGRAM,
-  ...SENSORS,
+    ...WEB,
-  ...SENSEBOX,
+    ...TEXT,
-  ...TELEGRAM,
+    ...TIME,
-  ...WEB,
+    ...TOURS,
-  ...TEXT,
+    ...TRANSLATIONS,
-  ...TIME,
+    ...UI,
-  ...TOURS,
+    ...VARIABLES,
-  ...TRANSLATIONS,
+    ...WEBSERVER
-  ...UI,
+}
  ...VARIABLES,
  ...WEBSERVER,
 };
@@ -1,42 +0,0 @@
 export const BLE = {
  /**
   * Phyphox Init
   */
  sensebox_phyphox_init: "Initialise Phyphox device with name:",
  sensebox_phyphox_createExperiment: "Create experiment",
  sensebox_phyphox_experimentName: "Name of experiment",
  sensebox_phyphox_experimentTitle: "Title",
  sensebox_phyphox_experimentCategory: "Category",
  sensebox_phyphox_experimentDescription: "Description",
  sensebox_phyphox_experiment_description:
    "Short description of the experiment",
  sensebox_phyphox_writeValues: "Send values",
  sensebox_phyphox_createView: "With graphs:",
  sensebox_phyphox_createGraph: "Create Graph",
  sensebox_phyphox_graphLabel: "",
  sensebox_phyphox_unitx: "Unit x-axis",
  sensebox_phyphox_unity: "Unit y-axis",
  sensebox_phyphox_labelx: "Label x-axis",
  sensebox_phyphox_labely: "Label y-axis",
  sensebox_phyphox_channel0: "x-axis value",
  sensebox_phyphox_channel1: "y-axis value",
  sensebox_phyphox_style_dots: "Dots",
  sensebox_phyphox_style_line: "Line",
  sensebox_phyphox_timestamp: "Timestamp",
  sensebox_phyphox_channel: "Channel",
  sensebox_phyphox_sendchannel: "send to channel:",
  sensebox_phyphox_graphStyle: "style",
  sensebox_phyphox_init_tooltip:
    "Initialise the Bluetooth Bee. Plug it into the **XBEE1** slot. Give the Phphox meter a unique name so you can find it in the app",
  sensebox_phyphox_experiment_tooltip:
    "Create an experiment and give it a unique name and a short description. Add up to 5 different graphs in the view. ",
  sensebox_phyphox_graph_tooltip:
    "Creates a new graph for the experiment. Specify the unit and label for the axes and choose the style of visualisation of the measured values. Add to the interfaces for the values of the X- and Y-axis the channel on which the measured values will be sent later. If you want to create a timestamp via the Phyphox app, connect the block *Timestamp*",
  sensebox_phyphox_timestamp_tooltip:
    "Use this block to have a timestamp created via the Phyphox app",
  sensebox_phyphox_sendchannel_tooltip:
    "Sends a reading to the selected channel",
  sensebox_phyphox_experiment_send_tooltip:
    "Sends the measured values to the Phyphox App",
 };
@@ -1,20 +0,0 @@
 export const RTC = {
  sensebox_rtc_init: "Initialise RTC",
  sensebox_rtc_init_tooltip:
    "Initialise the RTC. Connect it to one of the 5 I2C/Wire connections and insert the battery. Before you can read out the time, it must first be set. This step usually only needs to be done once.",
  sensebox_rtc_set: "Set RTC time/date:",
  sensebox_rtc_set_tooltip:
    "Sets the time of the RTC. Note that you execute this block in the setup.",
  sensebox_rtc_get_timestamp: "Get timestamp",
  sensebox_rtc_get_timestamp_tooltip:
    "Returns a timestamp formatted in ISO 8601. Ex: 2021-12-24T18:21Z",
  sensebox_rtc_get_tooltip: "Returns the selected value",
  sensebox_rtc_set_ntp: "Set time via NTP-Server",
  sensebox_rtc_get: "Get: ",
  sensebox_rtc_second: "seconds",
  sensebox_rtc_minutes: "minutes",
  sensebox_rtc_hour: "hour",
  sensebox_rtc_day: "day",
  sensebox_rtc_month: "month",
  sensebox_rtc_year: "year",
 };
@@ -1,16 +0,0 @@
 export const SENSEBOX = {
  /**
   * Multiplexer
   */
  senseBox_multiplexer_init: "Initialise Multiplexer with ",
  senseBox_multiplexer_init_tooltip:
    "Connect the multiplexer with a JST-JST cable to one of the 5 I2C ports. Now you can use up to 8 sensors of the same type and address them via the corresponding channels. Enter the number of used channels in the block",
  senseBox_multiplexer_init_helpurl:
    "https://en.docs.sensebox.de/hardware/zubehoer-multiplexer/",
  senseBox_multplexer_nchannels: "Channels",
  senseBox_multiplexer_changeChannel: "Change active channel to:",
  sensebox_multiplexer_changeChannel_tooltip:
    "Changes the active channel to the selected number",
  sensebox_multiplexer_changeChannel_helpurl:
    "https://en.docs.sensebox.de/hardware/zubehoer-multiplexer/",
 };
@@ -1,17 +1,19 @@
 export const TIME = {
-
+  senseBox_interval: "ms",
-    senseBox_interval: "ms",
+  senseBox_interval_timer: "Interval",
-    senseBox_interval_timer: "Measuring interval",
+  senseBox_interval_timer_tip: "Setup an Interval",
-    senseBox_interval_timer_tip: "Setup an Intervall",
+  senseBox_interval_time: "time",
-    ARD_TIME_DELAY: "wait",
+  ARD_TIME_DELAY: "wait",
-    ARD_TIME_DELAY_MICROS: "microseconds",
+  ARD_TIME_DELAY_MICROS: "microseconds",
-    ARD_TIME_DELAY_MICRO_TIP: "Wait specific time in microseconds",
+  ARD_TIME_DELAY_MICRO_TIP: "Wait specific time in microseconds",
-    ARD_TIME_DELAY_TIP: "Wait specific time in milliseconds",
+  ARD_TIME_DELAY_TIP: "Wait specific time in milliseconds",
-    ARD_TIME_INF: "wait forever (end program)",
+  ARD_TIME_INF: "wait forever (end program)",
-    ARD_TIME_INF_TIP: "Wait indefinitely, stopping the program.",
+  ARD_TIME_INF_TIP: "Wait indefinitely, stopping the program.",
-    ARD_TIME_MICROS: "current elapsed Time (microseconds)",
+  ARD_TIME_MICROS: "current elapsed Time (microseconds)",
-    ARD_TIME_MICROS_TIP: "Returns the number of microseconds since the Arduino board began running the current program. Has to be stored in a positive long integer",
+  ARD_TIME_MICROS_TIP:
-    ARD_TIME_MILLIS: "current elapsed Time (milliseconds)",
+    "Returns the number of microseconds since the Arduino board began running the current program. Has to be stored in a positive long integer",
-    ARD_TIME_MILLIS_TIP: "Returns the number of milliseconds since the Arduino board began running the current program. Has to be stored in a positive long integer",
+  ARD_TIME_MILLIS: "current elapsed Time (milliseconds)",
-    ARD_TIME_MS: "milliseconds",
+  ARD_TIME_MILLIS_TIP:
-}
+    "Returns the number of milliseconds since the Arduino board began running the current program. Has to be stored in a positive long integer",
  ARD_TIME_MS: "milliseconds",
 };
@@ -1,251 +1,235 @@
 export const UI = {
  /**
   * Toolbox
   */
  toolbox_sensors: "Sensors",
  toolbox_logic: "Logic",
  toolbox_loops: "Loops",
  toolbox_math: "Math",
  toolbox_io: "Input/Output",
  toolbox_time: "Time",
  toolbox_functions: "Functions",
  toolbox_variables: "Variables",
  variable_NUMBER: "Number (int)",
  variable_SHORT_NUMBER: "char",
  variable_LONG: " Zahl (long)",
  variable_DECIMAL: "Decimal (float)",
  variables_TEXT: "Text (string)",
  variables_ARRAY: "Array (array)",
  variables_CHARACTER: "char (char)",
  variables_BOOLEAN: "Boolean (boolean)",
  variables_NULL: "void (void)",
  variables_UNDEF: "undefined",
  /**
   * Tooltips
   *
   */
  tooltip_compile_code: "Compile code",
  tooltip_save_blocks: "Save blocks",
  tooltip_open_blocks: "Open blocks",
  tooltip_screenshot: "Download screenshot",
  tooltip_clear_workspace: "Reset workspace",
  tooltip_share_blocks: "Share blocks",
  tooltip_show_code: "Show code",
  tooltip_hide_code: "Hide code",
  tooltip_delete_project: "Delete project",
  tooltip_project_name: "Project name",
  tooltip_download_project: "Download project",
  tooltip_open_project: "Open project",
  tooltip_update_project: "Update project",
  tooltip_save_project: "Save project",
  tooltip_create_project: "Create project",
  tooltip_share_project: "Share project",
  tooltip_reset_workspace: "Reset workspace",
  tooltip_copy_link: "Cooy link",
  tooltip_trashcan_hide: "hide deleted blocks",
  tooltip_trashcan_delete: "empty trashcan",
  tooltip_project_title: "Project title",
  tooltip_check_solution: "Check solution",
  tooltip_copy_code: "Copy Code to clipboard",
-  /**
+    /**
-   * Messages
+     * Toolbox
-   *
+     */
-   */
+    toolbox_sensors: "Sensors",
    toolbox_logic: "Logic",
    toolbox_loops: "Loops",
    toolbox_math: "Math",
    toolbox_io: "Input/Output",
    toolbox_time: "Time",
    toolbox_functions: "Functions",
    toolbox_variables: "Variables",
-  messages_delete_project_failed: "Error deleting the project. Try again.",
+    /**
-  messages_reset_workspace_success: "The project has been successfully reset.",
+     * Tooltips
-  messages_PROJECT_UPDATE_SUCCESS: "The project was successfully updated.",
+     *
-  messages_GALLERY_UPDATE_SUCCESS:
+     */
    "The gallery project was successfully updated.",
  messages_PROJECT_UPDATE_FAIL: "Error updating the project. Try again.",
  messages_GALLERY_UPDATE_FAIL:
    "Error updating the gallery project. Try again.",
  messages_gallery_save_fail_1: "Error saving the ",
  messages_gallery_save_fail_2: "Project. Try again.",
  messages_SHARE_SUCCESS: "Share program",
  messages_SHARE_FAIL:
    "Error creating a link to share your program. Try again.",
  messages_copylink_success: "Link successfully saved to clipboard.",
  messages_rename_success_01: "The project was successfully saved to ",
  messages_rename_success_02: "renamed.",
  messages_newblockly_head:
    "Welcome to the new version Blockly for the senseBox",
  messages_newblockly_text:
    "The new Blockly version is currently in testing. If you find any errors please report them in our [forum](https://forum.sensebox.de/t/neue-blockly-version-beta-test-und-feedback/1176). You can find an overview of all new features [here](/news)",
  messages_GET_TUTORIAL_FAIL: "Back to tutorials overview",
  messages_LOGIN_FAIL: "The username or password is incorrect.",
  messages_login_error: "Enter both a username and a password.",
  messages_copy_code: "Copy code to clipboard succesfull",
-  /**
+    tooltip_compile_code: "Compile code",
-   * Reset Dialog
+    tooltip_save_blocks: "Save blocks",
-   */
+    tooltip_open_blocks: "Open blocks",
    tooltip_screenshot: "Download screenshot",
    tooltip_clear_workspace: "Reset workspace",
    tooltip_share_blocks: "Share blocks",
    tooltip_show_code: "Show code",
    tooltip_hide_code: "Hide code",
    tooltip_delete_project: "Delete project",
    tooltip_project_name: "Project name",
    tooltip_download_project: "Download project",
    tooltip_open_project: "Open project",
    tooltip_update_project: "Update project",
    tooltip_save_project: "Save project",
    tooltip_create_project: "Create project",
    tooltip_share_project: "Share project",
    tooltip_reset_workspace: "Reset workspace",
    tooltip_copy_link: "Cooy link",
    tooltip_trashcan_hide: "hide deleted blocks",
    tooltip_trashcan_delete: "empty trashcan",
    tooltip_project_title: "Project title",
    tooltip_check_solution: "Check solution",
    tooltip_copy_code: "Copy Code to clipboard",
-  resetDialog_headline: "Reset workspace?",
+    /**
-  resetDialog_text:
+     * Messages
-    "Do you really want to reset the workspace? All blocks will be deleted!",
+     *
     */
-  /**
+    messages_delete_project_failed: "Error deleting the project. Try again.",
-   * Share Dialog
+    messages_reset_workspace_success: "The project has been successfully reset.",
-   */
+    messages_PROJECT_UPDATE_SUCCESS: "The project was successfully updated.",
    messages_GALLERY_UPDATE_SUCCESS: "The gallery project was successfully updated.",
    messages_PROJECT_UPDATE_FAIL: "Error updating the project. Try again.",
    messages_GALLERY_UPDATE_FAIL: "Error updating the gallery project. Try again.",
    messages_gallery_save_fail_1: "Error saving the ",
    messages_gallery_save_fail_2: "Project. Try again.",
    messages_SHARE_SUCCESS: 'Share program',
    messages_SHARE_FAIL: "Error creating a link to share your program. Try again.",
    messages_copylink_success: 'Link successfully saved to clipboard.',
    messages_rename_success_01: 'The project was successfully saved to ',
    messages_rename_success_02: 'renamed.',
    messages_newblockly_head: 'Welcome to the new version Blockly for the senseBox',
    messages_newblockly_text: "The new Blockly version is currently in testing. If you find any errors please report them in our [forum](https://forum.sensebox.de/t/neue-blockly-version-beta-test-und-feedback/1176). You can find an overview of all new features [here](/news)",
    messages_GET_TUTORIAL_FAIL: 'Back to tutorials overview',
    messages_LOGIN_FAIL: 'The username or password is incorrect.',
    messages_login_error: "Enter both a username and a password.",
    messages_copy_code: "Copy code to clipboard succesfull",
    /**
     * Share Dialog
     */
-  sharedialog_headline: "Your link has been created.",
+    sharedialog_headline: "Your link has been created.",
-  sharedialog_text: "You can share your program using the following link.",
+    sharedialog_text: "You can share your program using the following link.",
-  /**
+    /**
-   * Project rename Dialog
+     * Project rename Dialog
-   */
+     */
-  renamedialog_headline: "Rename project",
+    renamedialog_headline: "Rename project",
-  renamedialog_text:
+    renamedialog_text: "Please enter a name for the project and confirm it by clicking 'Confirm'.",
-    "Please enter a name for the project and confirm it by clicking 'Confirm'.",
+    /**
-  /**
+     * Compile Dialog
-   * Compile Dialog
+     *
-   *
+     */
   */
-  compiledialog_headline: "Error",
+    compiledialog_headline: "Error",
-  compiledialog_text:
+    compiledialog_text: "While compiling an error occured. Please check your blocks and try again",
    "While compiling an error occured. Please check your blocks and try again",
  /**
   * Buttons
   *
   */
  button_cancel: "Cancel",
  button_close: "Close",
  button_accept: "Ok",
  button_compile: "Compile",
  button_create_variableCreate: "Create Variable",
  button_back: "Back",
  button_next: "Next step",
  button_tutorial_overview: "Tutorial overview",
  button_login: "Login",
-  /**
+    /**
-   *
+     * Buttons
-   */
+     *
     */
-  filename: "Filename",
+    button_cancel: "Cancel",
-  projectname: "Projectname",
+    button_close: "Close",
-  /**
+    button_accept: "Ok",
-   * Settings
+    button_compile: "Compile",
-   */
+    button_create_variableCreate: "Create Variable",
-  settings_head: "Settings",
+    button_back: "Back",
-  settings_language: "Language",
+    button_next: "Next step",
-  settings_language_text:
+    button_tutorial_overview: "Tutorial overview",
-    "Selection of the language applies to the entire application. A distinction can be made between German and English.",
+    button_login: "Login",
  settings_language_de: "German",
  settings_language_en: "English",
  settings_renderer: "Renderer",
  settings_renderer_text:
    "The selected renderer determines the appearance of the blocks. A distinction can be made between 'Geras' and 'Zelos', whereby 'Zelos' is particularly suitable for a touch application.",
  settings_statistics: "Statistics",
  settings_statistics_text:
    "The display of statistics on the usage of the blocks above the workspace can be shown or hidden.",
  settings_statistics_on: "On",
  settings_statistics_off: "Off",
  /**
   * 404
   */
  notfound_head: "The page you requested cannot be found.",
  notfound_text:
    "The page you are looking for may have been removed, its name changed, or it may be temporarily unavailable.",
-  /**
+    /**
-   * Labels
+     *
-   */
+     */
  labels_donotshowagain: "Do not show dialog again",
  labels_here: "here",
  labels_username: "Email or username",
  labels_password: "Password",
-  /**
+    filename: "Filename",
-   * Tutorials
+    projectname: "Projectname",
-   */
+    /**
     * Settings
     */
    settings_head: "Settings",
    settings_language: "Language",
    settings_language_text: "Selection of the language applies to the entire application. A distinction can be made between German and English.",
    settings_language_de: "German",
    settings_language_en: "English",
    settings_renderer: "Renderer",
    settings_renderer_text: "The selected renderer determines the appearance of the blocks. A distinction can be made between 'Geras' and 'Zelos', whereby 'Zelos' is particularly suitable for a touch application.",
    settings_statistics: "Statistics",
    settings_statistics_text: "The display of statistics on the usage of the blocks above the workspace can be shown or hidden.",
    settings_statistics_on: "On",
    settings_statistics_off: "Off",
  tutorials_assessment_task: "Task",
  tutorials_hardware_head:
    "For the implementation you need the following hardware:",
  tutorials_hardware_moreInformation:
    "You can find more information about the hardware component.",
  tutorials_hardware_here: "here",
  tutorials_requirements:
    "Before continuing with this tutorial, you should have successfully completed the following tutorials:",
-  /**
+    /**
-   * Tutorial Builder
+     * 404
-   */
+     */
-  builder_solution: "Solution",
+    notfound_head: "The page you requested cannot be found.",
-  builder_solution_submit: "Submit Solution",
+    notfound_text: "The page you are looking for may have been removed, its name changed, or it may be temporarily unavailable.",
  builder_example_submit: "Submit example",
  builder_comment:
    "Note: You can delete the initial setup() or infinite loop() block. Additionally, it is possible to select only any block, among others, without displaying it as disabled.",
  builder_hardware_order: "Note that the order of selection is authoritative.",
  builder_hardware_helper: "Select at least one hardware component.",
  builder_requirements_head: "Requirements.",
  builder_requirements_order:
    "Note that the order of ticking is authoritative.",
-  /**
+    /**
-   * Login
+     * Labels
-   */
+     */
    labels_donotshowagain: 'Do not show dialog again',
    labels_here: 'here',
    labels_username: 'Email or username',
    labels_password: "Password",
    /**
     * Badges
     */
-  login_head: "Login",
+    badges_explaination: "An overview of all badges received in the Blockly for senseBox context can be found ",
-  login_osem_account_01: "You need to have an ",
+    badges_ASSIGNE_BADGE_SUCCESS_01: "Congratulations! You have received the badge ",
-  login_osem_account_02: "Account to login",
+    badges_ASSIGNE_BADGE_SUCCESS_02: ".",
  login_lostpassword: "Lost your password?",
  login_createaccount:
    "If you don't have an openSenseMap account please register on ",
  /**
   * Navbar
   */
-  navbar_tutorials: "Tutorials",
+    /**
-  navbar_tutorialbuilder: "Create tutorial",
+     * Tutorials
-  navbar_gallery: "Gallery",
+     */
  navbar_projects: "Projects",
-  navbar_menu: "Menu",
+    tutorials_assessment_task: "Task",
-  navbar_login: "Login",
+    tutorials_hardware_head: "For the implementation you need the following hardware:",
-  navbar_account: "Account",
+    tutorials_hardware_moreInformation: "You can find more information about the hardware component.",
-  navbar_logout: "Logout",
+    tutorials_hardware_here: "here",
-  navbar_settings: "Settings",
+    tutorials_requirements: "Before continuing with this tutorial, you should have successfully completed the following tutorials:",
  /**
   * Codeviewer
   */
-  codeviewer_arduino: "Arduino Source Code",
+    /**
-  codeviewer_xml: "XML Blocks",
+     * Tutorial Builder
     */
-  /**
+    builder_solution: "Solution",
-   * Overlay
+    builder_solution_submit: "Submit Solution",
-   */
+    builder_example_submit: "Submit example",
    builder_comment: "Note: You can delete the initial setup() or infinite loop() block. Additionally, it is possible to select only any block, among others, without displaying it as disabled.",
    builder_hardware_order: "Note that the order of selection is authoritative.",
    builder_hardware_helper: "Select at least one hardware component.",
    builder_requirements_head: "Requirements.",
    builder_requirements_order: "Note that the order of ticking is authoritative.",
  compile_overlay_head: "Your program is now compiled and downloaded",
  compile_overlay_text: "Then copy it to your senseBox MCU",
  compile_overlay_help: "You need help? Have a look here: ",
-  /**
+    /**
-   * Tooltip Viewer
+     * Login
-   */
+     */
  tooltip_viewer: "Help",
  tooltip_moreInformation: "More informations can be found ",
  tooltip_hint: "Select a Block to show the hint",
-  /**
+    login_head: "Login",
-   * IDEDrawer
+    login_osem_account_01: "You need to have an ",
-   */
+    login_osem_account_02: "Account to login",
-  drawer_ideerror_head: "Oops something went wrong",
+    login_lostpassword: "Lost your password?",
-  drawer_ideerror_text: "An error occurred while compiling, check your blocks",
+    login_createaccount: "If you don't have an openSenseMap account please register on ",
-};
+
    /**
     * Navbar
     */
    navbar_tutorials: "Tutorials",
    navbar_tutorialbuilder: "Create tutorial",
    navbar_gallery: "Gallery",
    navbar_projects: "Projects",
    navbar_menu: "Menu",
    navbar_login: "Login",
    navbar_mybadges: "myBadges",
    navbar_account: "Account",
    navbar_logout: "Logout",
    navbar_settings: "Settings",
    /**
     * Codeviewer
     */
    codeviewer_arduino: "Arduino Source Code",
    codeviewer_xml: "XML Blocks",
    /**
     * Overlay
     */
    compile_overlay_head: "Your program is now compiled and downloaded",
    compile_overlay_text: "Then copy it to your senseBox MCU",
    compile_overlay_help: "You need help? Have a look here: ",
    /**
     * Tooltip Viewer
     */
    tooltip_viewer: "Help",
    tooltip_moreInformation: "More informations can be found ",
    tooltip_hint: "Select a Block to show the hint",
 }
@@ -15,6 +15,7 @@ class Content extends Component {
  componentDidMount() {
    if (this.props.language === 'de_DE') {
      console.log("change Language")
      Blockly.setLocale(De);
    } else if (this.props.language === 'en_US') {
      Blockly.setLocale(En);
@@ -22,10 +23,13 @@ class Content extends Component {
  }
  componentDidUpdate(props) {
    console.log(this.props.language)
    if (props.language !== this.props.language) {
      if (this.props.language === 'de_DE') {
        console.log("change Language")
        Blockly.setLocale(De);
      } else if (this.props.language === 'en_US') {
        console.log("change Language")
        Blockly.setLocale(En);
      }
    }
@@ -1,124 +1,98 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';
-import Breadcrumbs from "./Breadcrumbs";
+import Breadcrumbs from './Breadcrumbs';
-import { withRouter } from "react-router-dom";
+import { withRouter } from 'react-router-dom';
-import Button from "@material-ui/core/Button";
+import Button from '@material-ui/core/Button';
-import Typography from "@material-ui/core/Typography";
+import Typography from '@material-ui/core/Typography';
-import * as Blockly from "blockly";
+import * as Blockly from 'blockly'
-import ReactMarkdown from "react-markdown";
+import ReactMarkdown from 'react-markdown';
-import Container from "@material-ui/core/Container";
+import Container from '@material-ui/core/Container';
-import ExpansionPanel from "@material-ui/core/ExpansionPanel";
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
-import { FaqQuestions } from "../data/faq";
+import { FaqQuestions } from '../data/faq'
-import Editor from "rich-markdown-editor";
+
 class Faq extends Component {
  state = {
    panel: "",
    expanded: false,
    text: "",
  };
-  handleChange = (panel) => {
+    state = {
-    this.setState({ panel: this.state.panel === panel ? "" : panel });
+        panel: '',
-  };
+        expanded: false
    }
  componentDidMount() {
    // Ensure that Blockly.setLocale is adopted in the component.
    // Otherwise, the text will not be displayed until the next update of the component.
-    window.scrollTo(0, 0);
+    handleChange = (panel) => {
-    this.forceUpdate();
+        this.setState({ panel: this.state.panel === panel ? '' : panel });
-  }
+    };
-  render() {
+    componentDidMount() {
-    const { panel } = this.state;
+        // Ensure that Blockly.setLocale is adopted in the component.
-    return (
+        // Otherwise, the text will not be displayed until the next update of the component.
-      <div>
+
-        <Breadcrumbs
+        window.scrollTo(0, 0)
-          content={[{ link: this.props.location.pathname, title: "FAQ" }]}
+        this.forceUpdate();
-        />
+    }
-        <Container fixed>
+
-          <div style={{ margin: "0px 24px 0px 24px" }}>
+    render() {
-            <h1>FAQ</h1>
+        const { panel } = this.state;
-            {FaqQuestions().map((object, i) => {
+        return (
-              return (
+            <div>
-                <ExpansionPanel
+                <Breadcrumbs content={[{ link: this.props.location.pathname, title: 'FAQ' }]} />
-                  expanded={panel === `panel${i}`}
+                <Container fixed>
-                  onChange={() => this.handleChange(`panel${i}`)}
+                    <div style={{ margin: '0px 24px 0px 24px' }}>
-                >
+                        <h1>FAQ</h1>
-                  <ExpansionPanelSummary
+                        {FaqQuestions().map((object, i) => {
-                    expandIcon={<FontAwesomeIcon icon={faChevronDown} />}
+                            return (
-                  >
+                                <ExpansionPanel expanded={panel === `panel${i}`} onChange={() => this.handleChange(`panel${i}`)}>
-                    <Typography variant="h6">{object.question}</Typography>
+                                    <ExpansionPanelSummary
-                  </ExpansionPanelSummary>
+                                        expandIcon={
-                  <ExpansionPanelDetails>
+                                            <FontAwesomeIcon icon={faChevronDown} />
-                    <Typography>
+                                        }
-                      <ReactMarkdown
+                                    >
-                        className="news"
+                                        <Typography variant="h6">{object.question}</Typography>
-                        allowDangerousHtml="true"
+                                    </ExpansionPanelSummary>
-                        children={object.answer}
+                                    <ExpansionPanelDetails>
-                      ></ReactMarkdown>
+                                        <Typography>
-                    </Typography>
+                                            <ReactMarkdown className="news" allowDangerousHtml="true" children={object.answer}>
-                  </ExpansionPanelDetails>
+                                            </ReactMarkdown>
-                </ExpansionPanel>
+                                        </Typography>
-              );
+                                    </ExpansionPanelDetails>
-            })}
+                                </ExpansionPanel>
-            {this.props.button ? (
+                            )
-              <Button
+                        })}
-                style={{ marginTop: "20px" }}
+                        {
-                variant="contained"
+                            this.props.button ?
-                color="primary"
+                                <Button
-                onClick={() => {
+                                    style={{ marginTop: '20px' }}
-                  this.props.history.push(this.props.button.link);
+                                    variant="contained"
-                }}
+                                    color="primary"
-              >
+                                    onClick={() => { this.props.history.push(this.props.button.link) }}
-                {this.props.button.title}
+                                >
-              </Button>
+                                    {this.props.button.title}
-            ) : (
+                                </Button>
-              <Button
+                                :
-                style={{ marginTop: "20px" }}
+                                <Button
-                variant="contained"
+                                    style={{ marginTop: '20px' }}
-                color="primary"
+                                    variant="contained"
-                onClick={() => {
+                                    color="primary"
-                  this.props.history.push("/");
+                                    onClick={() => { this.props.history.push('/') }}
-                }}
+                                >
-              >
+                                    {Blockly.Msg.button_back}
-                {Blockly.Msg.button_back}
+                                </Button>
-              </Button>
+                        }
-            )}
+                    </div>
-            <Editor
+                </Container>
-              defaultValue="Hello world!"
+            </div >
-              // value={this.state.text}
+        );
-              onChange={(e) => {
+    };
                this.setState({ text: e() });
              }}
              uploadImage={async (file) => {}}
            />
            <Button
              style={{ marginTop: "20px" }}
              variant="contained"
              color="primary"
              onClick={() => {
                console.log(this.state.text);
              }}
            >
              {Blockly.Msg.button_back}
            </Button>
          </div>
        </Container>
      </div>
    );
  }
 }
 export default withRouter(Faq);
-/*
+                /*
 <ExpansionPanel expanded={panel === 'panel1'} onChange={() => this.handleChange('panel1')}>
 <ExpansionPanelSummary
 expandIcon={
@@ -181,23 +155,25 @@ vitae egestas augue. Duis vel est augue.
 </ExpansionPanel>
 */
-// {{
+                    // {{
-//     this.props.button ?
+                    //     this.props.button ?
-//         <Button
+                    //         <Button
-//             style={{ marginTop: '20px' }}
+                    //             style={{ marginTop: '20px' }}
-//             variant="contained"
+                    //             variant="contained"
-//             color="primary"
+                    //             color="primary"
-//             onClick={() => { this.props.history.push(this.props.button.link) }}
+                    //             onClick={() => { this.props.history.push(this.props.button.link) }}
-//         >
+                    //         >
-//             {this.props.button.title}
+                    //             {this.props.button.title}
-//         </Button>
+                    //         </Button>
-//         :
+                    //         :
-//         <Button
+                    //         <Button
-//             style={{ marginTop: '20px' }}
+                    //             style={{ marginTop: '20px' }}
-//             variant="contained"
+                    //             variant="contained"
-//             color="primary"
+                    //             color="primary"
-//             onClick={() => { this.props.history.push('/') }}
+                    //             onClick={() => { this.props.history.push('/') }}
-//         >
+                    //         >
-//             {Blockly.Msg.button_back}
+                    //             {Blockly.Msg.button_back}
-//         </Button>
+                    //         </Button>
-// }}
+                    // }}
@@ -1,92 +1,49 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';
-import { withRouter } from "react-router-dom";
+import { withRouter } from 'react-router-dom';
-import Container from "@material-ui/core/Container";
+import Container from '@material-ui/core/Container';
 class Impressum extends Component {
-  render() {
+    render() {
-    return (
+        return (
-      <Container fixed>
+            <Container fixed>
-        <div style={{ margin: "0px 24px 0px 24px" }}>
+                <div style={{ margin: '0px 24px 0px 24px' }}>
-          <h1>Impressum</h1>
+                    <h1>Impressum</h1>
-          <h2>Angaben gemäß § 5 TMG:</h2>
+
-          Institut für Geoinformatik
+                    <h2>Angaben gemäß § 5 TMG:</h2>
-          <br />
+          Institut für Geoinformatik<br />
          Heisenbergstraße 2<br />
          Geo 1<br />
          48149 Münster
-          <h2>Kontakt:</h2>
+
-          E-Mail: <a href="mailto:info@msensebox.de">info@msensebox.de</a>
+                <h2>Kontakt:</h2>
-          <h2>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:</h2>
+          E-Mail: <a href="mailto:info@mybadges.org!">info@mybadges.org</a>
-          Geschäftsführende Direktorin Prof. Dr. Angela Schwering
+
-          <br />
+                    <h2>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:</h2>
          Geschäftsführende Direktorin Prof. Dr. Angela Schwering<br />
          Heisenbergstraße 2<br />
          Geo 1<br />
          48149 Münster
-          <h2>Streitschlichtung</h2>
+
-          Die Europäische Kommission stellt eine Plattform zur
+                <h2>Streitschlichtung</h2>
-          Online-Streitbeilegung (OS) bereit:{" "}
+          Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: <a href="https://ec.europa.eu/consumers/odr" target="_blank" rel="noopener noreferrer">https://ec.europa.eu/consumers/odr</a>.<br />
-          <a
+          Unsere E-Mail-Adresse finden Sie oben im Impressum.<br />
-            href="https://ec.europa.eu/consumers/odr"
+                    <p>Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.</p>
-            target="_blank"
+
-            rel="noopener noreferrer"
+                    <h3>Haftung für Inhalte</h3>
-          >
+            Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.
-            https://ec.europa.eu/consumers/odr
+                <p>Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.</p>
-          </a>
+
-          .<br />
+                    <h3>Haftung für Links</h3>
-          Unsere E-Mail-Adresse finden Sie oben im Impressum.
+            Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar.
-          <br />
+                <p>Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.</p>
-          <p>
+
-            Wir sind nicht bereit oder verpflichtet, an
+                    <h3>Urheberrecht</h3>
-            Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle
+            Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet.
-            teilzunehmen.
+                <p>Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.</p>
-          </p>
+
-          <h3>Haftung für Inhalte</h3>
+                </div>
-          Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte
+            </Container>
-          auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach
+        );
-          §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht
+    };
          verpflichtet, übermittelte oder gespeicherte fremde Informationen zu
          überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige
          Tätigkeit hinweisen.
          <p>
            Verpflichtungen zur Entfernung oder Sperrung der Nutzung von
            Informationen nach den allgemeinen Gesetzen bleiben hiervon
            unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem
            Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei
            Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese
            Inhalte umgehend entfernen.
          </p>
          <h3>Haftung für Links</h3>
          Unser Angebot enthält Links zu externen Websites Dritter, auf deren
          Inhalte wir keinen Einfluss haben. Deshalb können wir für diese
          fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der
          verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der
          Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der
          Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige
          Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar.
          <p>
            Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist
            jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht
            zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir
            derartige Links umgehend entfernen.
          </p>
          <h3>Urheberrecht</h3>
          Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen
          Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung,
          Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der
          Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des
          jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite
          sind nur für den privaten, nicht kommerziellen Gebrauch gestattet.
          <p>
            Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt
            wurden, werden die Urheberrechte Dritter beachtet. Insbesondere
            werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie
            trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten
            wir um einen entsprechenden Hinweis. Bei Bekanntwerden von
            Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.
          </p>
        </div>
      </Container>
    );
  }
 }
-export default withRouter(Impressum);
+export default withRouter(Impressum);
@@ -1,177 +1,136 @@
-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 {
+import { faBars, faChevronLeft, faLayerGroup, faSignInAlt, faSignOutAlt, faCertificate, faUserCircle, faQuestionCircle, faCog, faChalkboardTeacher, faTools, faLightbulb } from "@fortawesome/free-solid-svg-icons";
  faBars,
  faChevronLeft,
  faLayerGroup,
  faSignInAlt,
  faSignOutAlt,
  faUserCircle,
  faQuestionCircle,
  faCog,
  faChalkboardTeacher,
  faTools,
  faLightbulb,
 } from "@fortawesome/free-solid-svg-icons";
 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) => ({
  drawerWidth: {
    // 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: {
-    backgroundColor: theme.palette.primary.main,
+    backgroundColor: theme.palette.primary.main
  },
  tourButton: {
-    marginleft: "auto",
+    marginleft: 'auto',
-    marginright: "30px",
+    marginright: '30px',
-  },
+  }
 });
 class Navbar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
-      isTourOpen: false,
+      isTourOpen: false
    };
  }
  toggleDrawer = () => {
    this.setState({ open: !this.state.open });
-  };
+  }
  openTour = () => {
    this.setState({ isTourOpen: true });
-  };
+
  }
  closeTour = () => {
    this.setState({ isTourOpen: false });
-  };
+  }
  render() {
    var isHome = /^\/(\/.*$|$)/g.test(this.props.location.pathname);
    var isTutorial = /^\/tutorial(\/.*$|$)/g.test(this.props.location.pathname);
-    var isAssessment =
+    var isAssessment = /^\/tutorial\/.{1,}$/g.test(this.props.location.pathname) &&
-      /^\/tutorial\/.{1,}$/g.test(this.props.location.pathname) &&
+      !this.props.tutorialIsLoading && this.props.tutorial &&
-      !this.props.tutorialIsLoading &&
+      this.props.tutorial.steps[this.props.activeStep].type === 'task';
      this.props.tutorial &&
      this.props.tutorial.steps[this.props.activeStep].type === "task";
    return (
      <div>
        <AppBar
          position="relative"
-          style={{
+          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)' }}
            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 }}
        >
-          <Toolbar
+          <Toolbar style={{ height: '50px', minHeight: '50px', padding: 0, color: 'white' }}>
            style={{
              height: "50px",
              minHeight: "50px",
              padding: 0,
              color: "white",
            }}
          >
            <IconButton
              color="inherit"
              onClick={this.toggleDrawer}
-              style={{ margin: "0 10px" }}
+              style={{ margin: '0 10px' }}
              className="MenuButton"
            >
              <FontAwesomeIcon icon={faBars} />
            </IconButton>
-            <Link to={"/"} style={{ textDecoration: "none", color: "inherit" }}>
+            <Link to={"/"} style={{ textDecoration: 'none', color: 'inherit' }}>
              <Typography variant="h6" noWrap>
                senseBox Blockly
              </Typography>
            </Link>
-            <Link to={"/"} style={{ marginLeft: "10px" }}>
+            <Link to={"/"} style={{ marginLeft: '10px' }}>
              <img src={senseboxLogo} alt="senseBox-Logo" width="30" />
            </Link>
-            {isTutorial ? (
+            {isTutorial ?
-              <Link
+              <Link to={"/tutorial"} style={{ textDecoration: 'none', color: 'inherit', marginLeft: '10px' }}>
                to={"/tutorial"}
                style={{
                  textDecoration: "none",
                  color: "inherit",
                  marginLeft: "10px",
                }}
              >
                <Typography variant="h6" noWrap>
                  Tutorial
                </Typography>
-              </Link>
+              </Link> : null}
-            ) : null}
+            {isHome ?
-            {isHome ? (
+              <Tooltip title='Hilfe starten' arrow>
              <Tooltip title="Hilfe starten" arrow>
                <IconButton
                  color="inherit"
                  className={`openTour ${this.props.classes.button}`}
-                  onClick={() => {
+                  onClick={() => { this.openTour(); }}
-                    this.openTour();
+                  style={{ margin: '0 30px 0 auto' }}
                  }}
                  style={{ margin: "0 30px 0 auto" }}
                >
                  <FontAwesomeIcon icon={faQuestionCircle} />
                </IconButton>
              </Tooltip>
-            ) : null}
+              : null}
-            {isAssessment ? (
+            {isAssessment ?
-              <Tooltip title="Hilfe starten" arrow>
+              <Tooltip title='Hilfe starten' arrow>
                <IconButton
                  color="inherit"
                  className={`openTour ${this.props.classes.button}`}
-                  onClick={() => {
+                  onClick={() => { this.openTour(); }}
-                    this.openTour();
+                  style={{ margin: '0 30px 0 auto' }}
                  }}
                  style={{ margin: "0 30px 0 auto" }}
                >
                  <FontAwesomeIcon icon={faQuestionCircle} />
                </IconButton>
              </Tooltip>
-            ) : null}
+              : null}
            <Tour
              steps={isHome ? home() : assessment()}
              isOpen={this.state.isTourOpen}
-              onRequestClose={() => {
+              onRequestClose={() => { this.closeTour(); }}
                this.closeTour();
              }}
            />
          </Toolbar>
        </AppBar>
@@ -183,161 +142,71 @@ class Navbar extends Component {
          classes={{ paper: this.props.classes.drawerWidth }}
          ModalProps={{ keepMounted: true }} // Better open performance on mobile.
        >
-          <div
+          <div style={{ height: '50px', cursor: 'pointer', color: 'white', padding: '0 22px' }} className={this.props.classes.appBarColor} onClick={this.toggleDrawer}>
-            style={{
+            <div style={{ display: ' table-cell', verticalAlign: 'middle', height: 'inherit', width: '0.1%' }}>
-              height: "50px",
+              <Typography variant="h6" style={{ display: 'inline' }}>
              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}
              </Typography>
-              <div style={{ float: "right" }}>
+              <div style={{ float: 'right' }}>
                <FontAwesomeIcon icon={faChevronLeft} />
              </div>
            </div>
          </div>
          <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_tutorials,
+            { text: Blockly.Msg.navbar_gallery, icon: faLightbulb, link: "/gallery" },
-                icon: faChalkboardTeacher,
+            { text: Blockly.Msg.navbar_projects, icon: faLayerGroup, link: "/project", restriction: this.props.isAuthenticated }].map((item, index) => {
-                link: "/tutorial",
+              if (item.restriction || Object.keys(item).filter(attribute => attribute === 'restriction').length === 0) {
              },
              {
                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 (
-                  <Link
+                  <Link to={item.link} key={index} style={{ textDecoration: 'none', color: 'inherit' }}>
                    to={item.link}
                    key={index}
                    style={{ textDecoration: "none", color: "inherit" }}
                  >
                    <ListItem button onClick={this.toggleDrawer}>
-                      <ListItemIcon>
+                      <ListItemIcon><FontAwesomeIcon icon={item.icon} /></ListItemIcon>
                        <FontAwesomeIcon icon={item.icon} />
                      </ListItemIcon>
                      <ListItemText primary={item.text} />
                    </ListItem>
                  </Link>
                );
              } else {
                return null;
              }
-            })}
+              else {
                return(
                  null
                  )
              }
            }
            )}
          </List>
-          <Divider
+          <Divider classes={{ root: this.props.classes.appBarColor }} style={{ marginTop: 'auto' }} />
            classes={{ root: this.props.classes.appBarColor }}
            style={{ marginTop: "auto" }}
          />
          <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_login,
+            { text: Blockly.Msg.navbar_mybadges, icon: faCertificate, link: '/user/badge', restriction: this.props.isAuthenticated },
-                icon: faSignInAlt,
+            { text: Blockly.Msg.navbar_logout, icon: faSignOutAlt, function: this.props.logout, restriction: this.props.isAuthenticated },
-                link: "/user/login",
+            { text: 'FAQ', icon: faQuestionCircle, link: "/faq" },
-                restriction: !this.props.isAuthenticated,
+            { text: Blockly.Msg.navbar_settings, icon: faCog, link: "/settings" }].map((item, index) => {
-              },
+              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 (
-                  <Link
+                  <Link to={item.link} key={index} style={{ textDecoration: 'none', color: 'inherit' }}>
-                    to={item.link}
+                    <ListItem button onClick={item.function ? () => { item.function(); this.toggleDrawer(); } : this.toggleDrawer}>
-                    key={index}
+                      <ListItemIcon><FontAwesomeIcon icon={item.icon} /></ListItemIcon>
                    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} />
                    </ListItem>
                  </Link>
                );
              } else {
                return null;
              }
-            })}
+              else {
                return(
                  null
                  )
              }
            }
            )}
          </List>
        </Drawer>
-        {this.props.tutorialIsLoading || this.props.projectIsLoading ? (
+        {this.props.tutorialIsLoading || this.props.projectIsLoading ?
-          <LinearProgress
+          <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)' }} />
-            style={{
+          : null}
              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>
    );
  }
@@ -349,10 +218,10 @@ Navbar.propTypes = {
  isAuthenticated: PropTypes.bool.isRequired,
  user: PropTypes.object,
  tutorial: PropTypes.object.isRequired,
-  activeStep: PropTypes.number.isRequired,
+  activeStep: PropTypes.number.isRequired
 };
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
  tutorialIsLoading: state.tutorial.progress,
  projectIsLoading: state.project.progress,
  isAuthenticated: state.auth.isAuthenticated,
@@ -361,6 +230,4 @@ const mapStateToProps = (state) => ({
  activeStep: state.tutorial.activeStep,
 });
-export default connect(mapStateToProps, { logout })(
+export default connect(mapStateToProps, { logout })(withStyles(styles, { withTheme: true })(withRouter(Navbar)));
  withStyles(styles, { withTheme: true })(withRouter(Navbar))
 );
@@ -56,6 +56,8 @@ class Project extends Component {
  getProject = () => {
    var id = this.props.location.pathname.replace(/\/[a-z]{1,}\//, '');
    var param = this.props.location.pathname.replace(`/${id}`, '').replace('/', '');
    console.log('param', param);
    console.log(id);
    this.props.getProject(param, id);
  }
@@ -1,70 +1,57 @@
-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 { getProjects, resetProject } from "../../actions/projectActions";
+import { getProjects, resetProject } from '../../actions/projectActions';
-import { clearMessages } from "../../actions/messageActions";
+import { clearMessages } from '../../actions/messageActions';
-import { Link, withRouter } from "react-router-dom";
+import { Link, withRouter } from 'react-router-dom';
-import Breadcrumbs from "../Breadcrumbs";
+import Breadcrumbs from '../Breadcrumbs';
-import BlocklyWindow from "../Blockly/BlocklyWindow";
+import BlocklyWindow from '../Blockly/BlocklyWindow';
-import Snackbar from "../Snackbar";
+import Snackbar from '../Snackbar';
-import WorkspaceFunc from "../Workspace/WorkspaceFunc";
+import WorkspaceFunc from '../Workspace/WorkspaceFunc';
-import { withStyles } from "@material-ui/core/styles";
+import { withStyles } from '@material-ui/core/styles';
-import Grid from "@material-ui/core/Grid";
+import Grid from '@material-ui/core/Grid';
-import Paper from "@material-ui/core/Paper";
+import Paper from '@material-ui/core/Paper';
-import Divider from "@material-ui/core/Divider";
+import Divider from '@material-ui/core/Divider';
-import Typography from "@material-ui/core/Typography";
+import Typography from '@material-ui/core/Typography';
-import Backdrop from "@material-ui/core/Backdrop";
+import Backdrop from '@material-ui/core/Backdrop';
-import CircularProgress from "@material-ui/core/CircularProgress";
+import CircularProgress from '@material-ui/core/CircularProgress';
 const styles = (theme) => ({
  link: {
    color: theme.palette.primary.main,
-    textDecoration: "none",
+    textDecoration: 'none',
-    "&:hover": {
+    '&:hover': {
      color: theme.palette.primary.main,
-      textDecoration: "underline",
+      textDecoration: 'underline'
-    },
+    }
-  },
+  }
 });
 class ProjectHome extends Component {
  state = {
    snackbar: false,
-    type: "",
+    type: '',
-    key: "",
+    key: '',
-    message: "",
+    message: ''
-  };
+  }
  componentDidMount() {
-    var type = this.props.location.pathname.replace("/", "");
+    var type = this.props.location.pathname.replace('/', '');
    this.props.getProjects(type);
    if (this.props.message) {
-      if (this.props.message.id === "PROJECT_DELETE_SUCCESS") {
+      if (this.props.message.id === 'PROJECT_DELETE_SUCCESS') {
-        this.setState({
+        this.setState({ snackbar: true, key: Date.now(), message: `Dein Projekt wurde erfolgreich gelöscht.`, type: 'success' });
-          snackbar: true,
+      }
-          key: Date.now(),
+      else if (this.props.message.id === 'GALLERY_DELETE_SUCCESS') {
-          message: `Dein Projekt wurde erfolgreich gelöscht.`,
+        this.setState({ snackbar: true, key: Date.now(), message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`, type: 'success' });
-          type: "success",
+      }
-        });
+      else if (this.props.message.id === 'GET_PROJECT_FAIL') {
-      } else if (this.props.message.id === "GALLERY_DELETE_SUCCESS") {
+        this.setState({ snackbar: true, key: Date.now(), message: `Dein angefragtes ${type === 'gallery' ? 'Galerie-' : ''}Projekt konnte nicht gefunden werden.`, type: 'error' });
        this.setState({
          snackbar: true,
          key: Date.now(),
          message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`,
          type: "success",
        });
      } else if (this.props.message.id === "GET_PROJECT_FAIL") {
        this.setState({
          snackbar: true,
          key: Date.now(),
          message: `Dein angefragtes ${
            type === "gallery" ? "Galerie-" : ""
          }Projekt konnte nicht gefunden werden.`,
          type: "error",
        });
      }
    }
  }
@@ -72,23 +59,14 @@ class ProjectHome extends Component {
  componentDidUpdate(props) {
    if (props.location.pathname !== this.props.location.pathname) {
      this.setState({ snackbar: false });
-      this.props.getProjects(this.props.location.pathname.replace("/", ""));
+      this.props.getProjects(this.props.location.pathname.replace('/', ''));
    }
    if (props.message !== this.props.message) {
-      if (this.props.message.id === "PROJECT_DELETE_SUCCESS") {
+      if (this.props.message.id === 'PROJECT_DELETE_SUCCESS') {
-        this.setState({
+        this.setState({ snackbar: true, key: Date.now(), message: `Dein Projekt wurde erfolgreich gelöscht.`, type: 'success' });
-          snackbar: true,
+      }
-          key: Date.now(),
+      else if (this.props.message.id === 'GALLERY_DELETE_SUCCESS') {
-          message: `Dein Projekt wurde erfolgreich gelöscht.`,
+        this.setState({ snackbar: true, key: Date.now(), message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`, type: 'success' });
          type: "success",
        });
      } else if (this.props.message.id === "GALLERY_DELETE_SUCCESS") {
        this.setState({
          snackbar: true,
          key: Date.now(),
          message: `Dein Galerie-Projekt wurde erfolgreich gelöscht.`,
          type: "success",
        });
      }
    }
  }
@@ -99,107 +77,60 @@ class ProjectHome extends Component {
  }
  render() {
-    var data =
+    var data = this.props.location.pathname === '/project' ? 'Projekte' : 'Galerie';
      this.props.location.pathname === "/project" ? "Projekte" : "Galerie";
    return (
      <div>
-        <Breadcrumbs
+        <Breadcrumbs content={[{ link: this.props.location.pathname, title: data }]} />
          content={[{ link: this.props.location.pathname, title: data }]}
        />
        <h1>{data}</h1>
-        {this.props.progress ? (
+        {this.props.progress ?
          <Backdrop open invisible>
            <CircularProgress color="primary" />
          </Backdrop>
-        ) : (
+          :
          <div>
-            {this.props.projects.length > 0 ? (
+            {this.props.projects.length > 0 ?
              <Grid container spacing={2}>
                {this.props.projects.map((project, i) => {
                  return (
                    <Grid item xs={12} sm={6} md={4} xl={3} key={i}>
-                      <Paper
+                      <Paper style={{ padding: '1rem', position: 'relative', overflow: 'hidden' }}>
-                        style={{
+                        <Link to={`/${data === 'Projekte' ? 'project' : 'gallery'}/${project._id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
                          padding: "1rem",
                          position: "relative",
                          overflow: "hidden",
                        }}
                      >
                        <Link
                          to={`/${
                            data === "Projekte" ? "project" : "gallery"
                          }/${project._id}`}
                          style={{ textDecoration: "none", color: "inherit" }}
                        >
                          <h3 style={{ marginTop: 0 }}>{project.title}</h3>
-                          <Divider
+                          <Divider style={{ marginTop: '1rem', marginBottom: '10px' }} />
                            style={{ marginTop: "1rem", marginBottom: "10px" }}
                          />
                          <BlocklyWindow
                            svg
                            blockDisabled
                            initialXml={project.xml}
                          />
-                          <Typography
+                          <Typography variant='body2' style={{ fontStyle: 'italic', margin: 0, marginTop: '-10px' }}>{project.description}</Typography>
                            variant="body2"
                            style={{
                              fontStyle: "italic",
                              margin: 0,
                              marginTop: "-10px",
                            }}
                          >
                            {project.description}
                          </Typography>
                        </Link>
-                        {this.props.user &&
+                        {this.props.user && this.props.user.email === project.creator ?
                        this.props.user.email === project.creator ? (
                          <div>
-                            <Divider
+                            <Divider style={{ marginTop: '10px', marginBottom: '10px' }} />
-                              style={{
+                            <div style={{ float: 'right' }}>
                                marginTop: "10px",
                                marginBottom: "10px",
                              }}
                            />
                            <div style={{ float: "right" }}>
                              <WorkspaceFunc
                                multiple
                                project={project}
-                                projectType={this.props.location.pathname.replace(
+                                projectType={this.props.location.pathname.replace('/', '')}
                                  "/",
                                  ""
                                )}
                              />
                            </div>
                          </div>
-                        ) : null}
+                          : null}
                      </Paper>
                    </Grid>
-                  );
+                  )
                })}
              </Grid>
-            ) : (
+              : <div>
-              <div>
+                <Typography style={{ marginBottom: '10px' }}>Es sind aktuell keine Projekte vorhanden.</Typography>
-                <Typography style={{ marginBottom: "10px" }}>
+                {this.props.location.pathname.replace('/', '') === 'project' ?
-                  Es sind aktuell keine Projekte vorhanden.
+                  <Typography>Erstelle jetzt dein <Link to={'/'} className={this.props.classes.link}>eigenes Projekt</Link> oder lasse dich von Projektbeispielen in der <Link to={'/gallery'} className={this.props.classes.link}>Galerie</Link> inspirieren.</Typography>
-                </Typography>
+                  : null}
                {this.props.location.pathname.replace("/", "") === "project" ? (
                  <Typography>
                    Erstelle jetzt dein{" "}
                    <Link to={"/"} className={this.props.classes.link}>
                      eigenes Projekt
                    </Link>{" "}
                    oder lasse dich von Projektbeispielen in der{" "}
                    <Link to={"/gallery"} className={this.props.classes.link}>
                      Galerie
                    </Link>{" "}
                    inspirieren.
                  </Typography>
                ) : null}
              </div>
-            )}
+            }
          </div>
-        )}
+        }
        <Snackbar
          open={this.state.snackbar}
          message={this.state.message}
@@ -208,7 +139,7 @@ class ProjectHome extends Component {
        />
      </div>
    );
-  }
+  };
 }
 ProjectHome.propTypes = {
@@ -218,18 +149,15 @@ ProjectHome.propTypes = {
  projects: PropTypes.array.isRequired,
  progress: PropTypes.bool.isRequired,
  user: PropTypes.object,
-  message: PropTypes.object.isRequired,
+  message: PropTypes.object.isRequired
 };
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
  projects: state.project.projects,
  progress: state.project.progress,
  user: state.auth.user,
-  message: state.message,
+  message: state.message
 });
-export default connect(mapStateToProps, {
+
-  getProjects,
+export default connect(mapStateToProps, { getProjects, resetProject, clearMessages })(withStyles(styles, { withTheme: true })(withRouter(ProjectHome)));
  resetProject,
  clearMessages,
 })(withStyles(styles, { withTheme: true })(withRouter(ProjectHome)));
@@ -1,38 +1,40 @@
-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 News from "../News";
+import MyBadges from '../User/MyBadges';
-import Faq from "../Faq";
+import News from '../News'
 import Faq from '../Faq'
 class Routes extends Component {
  componentDidUpdate() {
    this.props.visitPage();
  }
  render() {
    return (
-      <div style={{ margin: "0 22px" }}>
+      <div style={{ margin: '0 22px' }}>
        <Switch>
          <PublicRoute path="/" exact>
            <Home />
@@ -72,6 +74,9 @@ class Routes extends Component {
          <PrivateRoute path="/user" exact>
            <Account />
          </PrivateRoute>
          <PrivateRoute path="/user/badge" exact>
            <MyBadges />
          </PrivateRoute>
          {/* settings */}
          <PublicRoute path="/settings" exact>
            <Settings />
@@ -93,6 +98,7 @@ class Routes extends Component {
          <PublicRoute>
            <NotFound />
          </PublicRoute>
        </Switch>
      </div>
    );
@@ -100,7 +106,7 @@ class Routes extends Component {
 }
 Home.propTypes = {
-  visitPage: PropTypes.func.isRequired,
+  visitPage: PropTypes.func.isRequired
 };
 export default connect(null, { visitPage })(withRouter(Routes));
@@ -1,20 +1,20 @@
-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 BlocklyWindow from "../Blockly/BlocklyWindow";
+import BlocklyWindow from '../Blockly/BlocklyWindow';
-import CodeViewer from "../CodeViewer";
+import CodeViewer from '../CodeViewer';
-import WorkspaceFunc from "../Workspace/WorkspaceFunc";
+import WorkspaceFunc from '../Workspace/WorkspaceFunc';
-import withWidth, { isWidthDown } from "@material-ui/core/withWidth";
+import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
-import Grid from "@material-ui/core/Grid";
+import Grid from '@material-ui/core/Grid';
-import Card from "@material-ui/core/Card";
+import Card from '@material-ui/core/Card';
-import Typography from "@material-ui/core/Typography";
+import Typography from '@material-ui/core/Typography';
-import * as Blockly from "blockly";
+import * as Blockly from 'blockly'
 import { initialXml } from "../Blockly/initialXml";
 class Assessment extends Component {
  componentDidMount() {
    this.props.workspaceName(this.props.name);
  }
@@ -28,90 +28,48 @@ class Assessment extends Component {
  render() {
    var tutorialId = this.props.tutorial._id;
    var currentTask = this.props.step;
-    var status = this.props.status.filter(
+    var status = this.props.status.filter(status => status._id === tutorialId)[0];
-      (status) => status._id === tutorialId
+    var taskIndex = status.tasks.findIndex(task => task._id === currentTask._id);
    )[0];
    var taskIndex = status.tasks.findIndex(
      (task) => task._id === currentTask._id
    );
    var statusTask = status.tasks[taskIndex];
    return (
-      <div className="assessmentDiv" style={{ width: "100%" }}>
+      <div className="assessmentDiv" style={{ width: '100%' }}>
-        <Typography
+        <Typography variant='h4' style={{ float: 'left', marginBottom: '5px', height: '40px', display: 'table' }}>{currentTask.headline}</Typography>
-          variant="h4"
+        <div style={{ float: 'right', height: '40px' }}><WorkspaceFunc assessment /></div>
-          style={{
+        <Grid container spacing={2} style={{ marginBottom: '5px' }}>
            float: "left",
            marginBottom: "5px",
            height: "40px",
            display: "table",
          }}
        >
          {currentTask.headline}
        </Typography>
        <div style={{ float: "right", height: "40px" }}>
          <WorkspaceFunc assessment />
        </div>
        <Grid container spacing={2} style={{ marginBottom: "5px" }}>
          <Grid item xs={12} md={6} lg={8}>
            <BlocklyWindow
-              initialXml={initialXml}
+              initialXml={statusTask ? statusTask.xml ? statusTask.xml : null : null}
              blockDisabled
-              blocklyCSS={{ height: "65vH" }}
+              blocklyCSS={{ height: '65vH' }}
            />
          </Grid>
-          <Grid
+          <Grid item xs={12} md={6} lg={4} style={isWidthDown('sm', this.props.width) ? { height: 'max-content' } : {}}>
-            item
+            <Card style={{ height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px' }}>
-            xs={12}
+              <Typography variant='h5'>{Blockly.Msg.tutorials_assessment_task}</Typography>
            md={6}
            lg={4}
            style={
              isWidthDown("sm", this.props.width)
                ? { height: "max-content" }
                : {}
            }
          >
            <Card
              style={{
                height: "calc(50% - 30px)",
                padding: "10px",
                marginBottom: "10px",
              }}
            >
              <Typography variant="h5">
                {Blockly.Msg.tutorials_assessment_task}
              </Typography>
              <Typography>{currentTask.text}</Typography>
            </Card>
-            <div
+            <div style={isWidthDown('sm', this.props.width) ? { height: '500px' } : { height: '50%' }}>
              style={
                isWidthDown("sm", this.props.width)
                  ? { height: "500px" }
                  : { height: "50%" }
              }
            >
              <CodeViewer />
            </div>
          </Grid>
        </Grid>
      </div>
    );
-  }
+  };
 }
 Assessment.propTypes = {
  status: PropTypes.array.isRequired,
  change: PropTypes.number.isRequired,
  workspaceName: PropTypes.func.isRequired,
-  tutorial: PropTypes.object.isRequired,
+  tutorial: PropTypes.object.isRequired
 };
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
  change: state.tutorial.change,
  status: state.tutorial.status,
-  tutorial: state.tutorial.tutorials[0],
+  tutorial: state.tutorial.tutorials[0]
 });
-export default connect(mapStateToProps, { workspaceName })(
+export default connect(mapStateToProps, { workspaceName })(withWidth()(Assessment));
  withWidth()(Assessment)
 );
@@ -0,0 +1,119 @@
 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));
@@ -0,0 +1,190 @@
 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 => {
        console.log(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));
@@ -1,75 +1,67 @@
-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 {
+import { checkError, readJSON, jsonString, progress, tutorialId, resetTutorial as resetTutorialBuilder} from '../../../actions/tutorialBuilderActions';
-  checkError,
+import { getTutorials, resetTutorial, deleteTutorial, tutorialProgress } from '../../../actions/tutorialActions';
-  readJSON,
+import { clearMessages } from '../../../actions/messageActions';
  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 { withStyles } from "@material-ui/core/styles";
+import Breadcrumbs from '../../Breadcrumbs';
-import Button from "@material-ui/core/Button";
+import Badge from './Badge';
-import Backdrop from "@material-ui/core/Backdrop";
+import Textfield from './Textfield';
-import CircularProgress from "@material-ui/core/CircularProgress";
+import Step from './Step';
-import Divider from "@material-ui/core/Divider";
+import Dialog from '../../Dialog';
-import FormHelperText from "@material-ui/core/FormHelperText";
+import Snackbar from '../../Snackbar';
-import Radio from "@material-ui/core/Radio";
+
-import RadioGroup from "@material-ui/core/RadioGroup";
+import { withStyles } from '@material-ui/core/styles';
-import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Button from '@material-ui/core/Button';
-import InputLabel from "@material-ui/core/InputLabel";
+import Backdrop from '@material-ui/core/Backdrop';
-import MenuItem from "@material-ui/core/MenuItem";
+import CircularProgress from '@material-ui/core/CircularProgress';
-import FormControl from "@material-ui/core/FormControl";
+import Divider from '@material-ui/core/Divider';
-import Select from "@material-ui/core/Select";
+import FormHelperText from '@material-ui/core/FormHelperText';
 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) => ({
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
-    color: "#fff",
+    color: '#fff',
  },
  errorColor: {
-    color: theme.palette.error.dark,
+    color: theme.palette.error.dark
  },
  errorButton: {
-    marginTop: "5px",
+    marginTop: '5px',
-    height: "40px",
+    height: '40px',
    backgroundColor: theme.palette.error.dark,
-    "&:hover": {
+    '&:hover': {
-      backgroundColor: theme.palette.error.dark,
+      backgroundColor: theme.palette.error.dark
-    },
+    }
-  },
+  }
 });
 class Builder extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      tutorial: "new",
+      tutorial: 'new',
      open: false,
-      title: "",
+      title: '',
-      content: "",
+      content: '',
      string: false,
      snackbar: false,
-      key: "",
+      key: '',
-      message: "",
+      message: ''
    };
    this.inputRef = React.createRef();
  }
@@ -78,38 +70,27 @@ class Builder extends Component {
    this.props.tutorialProgress();
    // retrieve tutorials only if a potential user is loaded - authentication
    // is finished (success or failed)
-    if (!this.props.authProgress) {
+    if(!this.props.authProgress){
      this.props.getTutorials();
    }
  }
  componentDidUpdate(props, state) {
-    if (
+    if(props.authProgress !== this.props.authProgress && !this.props.authProgress){
      props.authProgress !== this.props.authProgress &&
      !this.props.authProgress
    ) {
      // authentication is completed
      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);
        this.props.clearMessages();
-      } else if (this.props.message.id === "TUTORIAL_DELETE_SUCCESS") {
+      }
-        this.onChange("new");
+      else if (this.props.message.id === 'TUTORIAL_DELETE_SUCCESS') {
-        this.setState({
+        this.onChange('new');
-          snackbar: true,
+        this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial wurde erfolgreich gelöscht.`, type: 'success' });
-          key: Date.now(),
+      }
-          message: `Das Tutorial wurde erfolgreich gelöscht.`,
+      else if (this.props.message.id === 'TUTORIAL_DELETE_FAIL') {
-          type: "success",
+        this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Löschen des Tutorials. Versuche es noch einmal.`, type: 'error' });
        });
      } 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",
        });
      }
    }
  }
@@ -124,32 +105,22 @@ class Builder extends Component {
  uploadJsonFile = (jsonFile) => {
    this.props.progress(true);
-    if (jsonFile.type !== "application/json") {
+    if (jsonFile.type !== 'application/json') {
      this.props.progress(false);
-      this.setState({
+      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.' });
-        open: true,
+    }
-        string: false,
+    else {
        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();
      reader.readAsText(jsonFile);
      reader.onloadend = () => {
        this.readJson(reader.result, true);
      };
    }
-  };
+  }
  uploadJsonString = () => {
-    this.setState({
+    this.setState({ open: true, string: true, title: 'JSON-String einfügen', content: '' });
-      open: true,
+  }
      string: true,
      title: "JSON-String einfügen",
      content: "",
    });
  };
  readJson = (jsonString, isFile) => {
    try {
@@ -158,255 +129,173 @@ class Builder extends Component {
        result.steps = [{}];
      }
      this.props.readJSON(result);
-      this.setState({
+      this.setState({ snackbar: true, key: Date.now(), message: `${isFile ? 'Die übergebene JSON-Datei' : 'Der übergebene JSON-String'} wurde erfolgreich übernommen.`, type: 'success' });
        snackbar: true,
        key: Date.now(),
        message: `${
          isFile ? "Die übergebene JSON-Datei" : "Der übergebene JSON-String"
        } wurde erfolgreich übernommen.`,
        type: "success",
      });
    } catch (err) {
      this.props.progress(false);
-      this.props.jsonString("");
+      this.props.jsonString('');
-      this.setState({
+      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.` });
        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) => {
    if (!(steps && steps.length > 0)) {
      return false;
    }
    return true;
-  };
+  }
  toggle = () => {
    this.setState({ open: !this.state });
-  };
+  }
  onChange = (value) => {
    this.props.resetTutorialBuilder();
-    this.props.tutorialId("");
+    this.props.tutorialId('');
    this.setState({ tutorial: value });
-  };
+  }
  onChangeId = (value) => {
    this.props.tutorialId(value);
-    if (this.state.tutorial === "change") {
+    if (this.state.tutorial === 'change') {
      this.props.progress(true);
-      var tutorial = this.props.tutorials.filter(
+      var tutorial = this.props.tutorials.filter(tutorial => tutorial._id === value)[0];
        (tutorial) => tutorial._id === value
      )[0];
      this.props.readJSON(tutorial);
-      this.setState({
+      this.setState({ snackbar: true, key: Date.now(), message: `Das ausgewählte Tutorial "${tutorial.title}" wurde erfolgreich übernommen.`, type: 'success' });
        snackbar: true,
        key: Date.now(),
        message: `Das ausgewählte Tutorial "${tutorial.title}" wurde erfolgreich übernommen.`,
        type: "success",
      });
    }
-  };
+  }
  resetFull = () => {
    this.props.resetTutorialBuilder();
-    this.setState({
+    this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial wurde erfolgreich zurückgesetzt.`, type: 'success' });
      snackbar: true,
      key: Date.now(),
      message: `Das Tutorial wurde erfolgreich zurückgesetzt.`,
      type: "success",
    });
    window.scrollTo(0, 0);
-  };
+  }
  resetTutorial = () => {
-    var tutorial = this.props.tutorials.filter(
+    var tutorial = this.props.tutorials.filter(tutorial => tutorial._id === this.props.id)[0];
      (tutorial) => tutorial._id === this.props.id
    )[0];
    this.props.readJSON(tutorial);
-    this.setState({
+    this.setState({ snackbar: true, key: Date.now(), message: `Das Tutorial ${tutorial.title} wurde erfolgreich auf den ursprünglichen Stand zurückgesetzt.`, type: 'success' });
      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);
-  };
+  }
  submit = () => {
    var isError = this.props.checkError();
    if (isError) {
-      this.setState({
+      this.setState({ snackbar: true, key: Date.now(), message: `Die Angaben für das Tutorial sind nicht vollständig.`, type: 'error' });
        snackbar: true,
        key: Date.now(),
        message: `Die Angaben für das Tutorial sind nicht vollständig.`,
        type: "error",
      });
      window.scrollTo(0, 0);
      return false;
-    } else {
+    }
    else {
      // export steps without attribute 'url'
      var steps = this.props.steps;
      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) => {
-        if (step._id) {
+        if(step._id){
          newTutorial.append(`steps[${i}][_id]`, step._id);
        }
        newTutorial.append(`steps[${i}][type]`, step.type);
        newTutorial.append(`steps[${i}][headline]`, step.headline);
        newTutorial.append(`steps[${i}][text]`, step.text);
-        if (i === 0 && step.type === "instruction") {
+        if (i === 0 && step.type === 'instruction') {
-          if (step.requirements) {
+          if (step.requirements) { // optional
            // optional
            step.requirements.forEach((requirement, j) => {
-              newTutorial.append(
+              newTutorial.append(`steps[${i}][requirements][${j}]`, requirement);
                `steps[${i}][requirements][${j}]`,
                requirement
              );
            });
          }
          step.hardware.forEach((hardware, j) => {
            newTutorial.append(`steps[${i}][hardware][${j}]`, hardware);
          });
        }
-        if (step.xml) {
+        if (step.xml) { // optional
          // optional
          newTutorial.append(`steps[${i}][xml]`, step.xml);
        }
-        if (step.media) {
+        if (step.media) { // optional
          // optional
          if (step.media.youtube) {
-            newTutorial.append(
+            newTutorial.append(`steps[${i}][media][youtube]`, step.media.youtube);
              `steps[${i}][media][youtube]`,
              step.media.youtube
            );
          }
          if (step.media.picture) {
-            newTutorial.append(
+            newTutorial.append(`steps[${i}][media][picture]`, step.media.picture);
              `steps[${i}][media][picture]`,
              step.media.picture
            );
          }
        }
      });
      return newTutorial;
    }
-  };
+  }
  submitNew = () => {
    var newTutorial = this.submit();
-    if (newTutorial) {
+    if(newTutorial){
      const config = {
-        success: (res) => {
+        success: res => {
          var tutorial = res.data.tutorial;
          this.props.history.push(`/tutorial/${tutorial._id}`);
        },
-        error: (err) => {
+        error: err => {
-          this.setState({
+          this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Erstellen des Tutorials. Versuche es noch einmal.`, type: 'error' });
            snackbar: true,
            key: Date.now(),
            message: `Fehler beim Erstellen des Tutorials. Versuche es noch einmal.`,
            type: "error",
          });
          window.scrollTo(0, 0);
-        },
+        }
      };
-      axios
+      axios.post(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/`, newTutorial, config)
-        .post(
+        .then(res => {
          `${process.env.REACT_APP_BLOCKLY_API}/tutorial/`,
          newTutorial,
          config
        )
        .then((res) => {
          res.config.success(res);
        })
-        .catch((err) => {
+        .catch(err => {
          err.config.error(err);
        });
    }
-  };
+  }
  submitUpdate = () => {
    var updatedTutorial = this.submit();
-    if (updatedTutorial) {
+    if(updatedTutorial){
      const config = {
-        success: (res) => {
+        success: res => {
          var tutorial = res.data.tutorial;
          this.props.history.push(`/tutorial/${tutorial._id}`);
        },
-        error: (err) => {
+        error: err => {
-          this.setState({
+          this.setState({ snackbar: true, key: Date.now(), message: `Fehler beim Ändern des Tutorials. Versuche es noch einmal.`, type: 'error' });
            snackbar: true,
            key: Date.now(),
            message: `Fehler beim Ändern des Tutorials. Versuche es noch einmal.`,
            type: "error",
          });
          window.scrollTo(0, 0);
-        },
+        }
      };
-      axios
+      axios.put(`${process.env.REACT_APP_BLOCKLY_API}/tutorial/${this.props.id}`, updatedTutorial, config)
-        .put(
+        .then(res => {
          `${process.env.REACT_APP_BLOCKLY_API}/tutorial/${this.props.id}`,
          updatedTutorial,
          config
        )
        .then((res) => {
          res.config.success(res);
        })
-        .catch((err) => {
+        .catch(err => {
          err.config.error(err);
        });
    }
-  };
+  }
  render() {
-    var filteredTutorials = this.props.tutorials.filter(
+    var filteredTutorials = this.props.tutorials.filter(tutorial => tutorial.creator === this.props.user.email);
      (tutorial) => tutorial.creator === this.props.user.email
    );
    return (
      <div>
-        <Breadcrumbs
+        <Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }, { link: '/tutorial/builder', title: 'Builder' }]} />
          content={[
            { link: "/tutorial", title: "Tutorial" },
            { link: "/tutorial/builder", title: "Builder" },
          ]}
        />
        <h1>Tutorial-Builder</h1>
-        <RadioGroup
+        <RadioGroup row value={this.state.tutorial} onChange={(e) => this.onChange(e.target.value)}>
-          row
+          <FormControlLabel style={{ color: 'black' }}
          value={this.state.tutorial}
          onChange={(e) => this.onChange(e.target.value)}
        >
          <FormControlLabel
            style={{ color: "black" }}
            value="new"
            control={<Radio color="primary" />}
            label="neues Tutorial erstellen"
            labelPlacement="end"
          />
-          {filteredTutorials.length > 0 ? (
+          {filteredTutorials.length > 0 ?
            <div>
-              <FormControlLabel
+              <FormControlLabel style={{ color: 'black' }}
                style={{ color: "black" }}
                disabled={this.props.index === 0}
                value="change"
                control={<Radio color="primary" />}
                label="bestehendes Tutorial ändern"
                labelPlacement="end"
              />
-              <FormControlLabel
+              <FormControlLabel style={{ color: 'black' }}
                style={{ color: "black" }}
                disabled={this.props.index === 0}
                value="delete"
                control={<Radio color="primary" />}
@@ -414,196 +303,110 @@ class Builder extends Component {
                labelPlacement="end"
              />
            </div>
-          ) : null}
+            : null}
        </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*/
          <div ref={this.inputRef}>
            <input
-              style={{ display: "none" }}
+              style={{ display: 'none' }}
              accept="application/json"
-              onChange={(e) => {
+              onChange={(e) => { this.uploadJsonFile(e.target.files[0]) }}
                this.uploadJsonFile(e.target.files[0]);
              }}
              id="open-json"
              type="file"
            />
            <label htmlFor="open-json">
-              <Button
+              <Button component="span" style={{ marginRight: '10px', marginBottom: '10px' }} variant='contained' color='primary'>Datei laden</Button>
                component="span"
                style={{ marginRight: "10px", marginBottom: "10px" }}
                variant="contained"
                color="primary"
              >
                Datei laden
              </Button>
            </label>
-            <Button
+            <Button style={{ marginRight: '10px', marginBottom: '10px' }} variant='contained' color='primary' onClick={() => this.uploadJsonString()}>String laden</Button>
              style={{ marginRight: "10px", marginBottom: "10px" }}
              variant="contained"
              color="primary"
              onClick={() => this.uploadJsonString()}
            >
              String laden
            </Button>
          </div>
-        ) : (
+          : <FormControl variant="outlined" style={{ width: '100%' }}>
          <FormControl variant="outlined" style={{ width: "100%" }}>
            <InputLabel id="select-outlined-label">Tutorial</InputLabel>
            <Select
-              color="primary"
+              color='primary'
              labelId="select-outlined-label"
              value={this.props.id}
              onChange={(e) => this.onChangeId(e.target.value)}
              label="Tutorial"
            >
-              {filteredTutorials.map((tutorial) => (
+              {filteredTutorials.map(tutorial =>
                <MenuItem value={tutorial._id}>{tutorial.title}</MenuItem>
-              ))}
+              )}
            </Select>
          </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 === 'new' || (this.state.tutorial === 'change' && this.props.id !== '') ?
-        (this.state.tutorial === "change" && this.props.id !== "") ? (
+        /*Tutorial-Builder-Form*/
-          /*Tutorial-Builder-Form*/
+        <div>
-          <div>
+          {this.props.error.type ?
-            {this.props.error.type ? (
+            <FormHelperText style={{ lineHeight: 'initial' }} className={this.props.classes.errorColor}>{`Ein Tutorial muss mindestens jeweils eine Instruktion und eine Aufgabe enthalten.`}</FormHelperText>
-              <FormHelperText
+            : null}
-                style={{ lineHeight: "initial" }}
+          {/* <Id error={this.props.error.id} value={this.props.id} /> */}
-                className={this.props.classes.errorColor}
+          <Textfield value={this.props.title} property={'title'} label={'Titel'} error={this.props.error.title} />
-              >{`Ein Tutorial muss mindestens jeweils eine Instruktion und eine Aufgabe enthalten.`}</FormHelperText>
+          <Badge error={this.props.error.badge}/>
            ) : 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
+              <Divider variant='fullWidth' style={{ margin: '30px 0 10px 0' }} />
-                  variant="fullWidth"
+              {this.state.tutorial === 'new' ?
-                  style={{ margin: "30px 0 10px 0" }}
+                <div>
-                />
+                  <Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitNew()}>Tutorial erstellen</Button>
-                {this.state.tutorial === "new" ? (
+                  <Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetFull()}>Zurücksetzen</Button>
-                  <div>
+                </div>
-                    <Button
+              : <div>
-                      style={{ marginRight: "10px", marginTop: "10px" }}
+                  <Button style={{ marginRight: '10px', marginTop: '10px' }} variant='contained' color='primary' onClick={() => this.submitUpdate()}>Tutorial ändern</Button>
-                      variant="contained"
+                  <Button style={{ marginTop: '10px' }} variant='contained' onClick={() => this.resetTutorial()}>Zurücksetzen</Button>
-                      color="primary"
+                </div>
-                      onClick={() => this.submitNew()}
+              }
-                    >
+            </div>
-                      Tutorial erstellen
+          : null}
                    </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
+            <Backdrop className={this.props.classes.backdrop} open={this.props.isProgress}>
              className={this.props.classes.backdrop}
              open={this.props.isProgress}
            >
              <CircularProgress color="inherit" />
            </Backdrop>
          </div>
-        ) : null}
+          : null}
-        {this.state.tutorial === "delete" && this.props.id !== "" ? (
+        {this.state.tutorial === 'delete' && this.props.id !== '' ?
          <Button
            className={this.props.classes.errorButton}
-            variant="contained"
+            variant='contained'
-            color="primary"
+            color='primary'
-            onClick={() => this.props.deleteTutorial()}
+            onClick={() => this.props.deleteTutorial()}>Tutorial löschen</Button>
-          >
+          : null}
            Tutorial löschen
          </Button>
        ) : null}
        <Dialog
          open={this.state.open}
-          maxWidth={this.state.string ? "md" : "sm"}
+          maxWidth={this.state.string ? 'md' : 'sm'}
          fullWidth={this.state.string}
          title={this.state.title}
          content={this.state.content}
          onClose={this.toggle}
          onClick={this.toggle}
-          button={"Schließen"}
+          button={'Schließen'}
          actions={
-            this.state.string ? (
+            this.state.string ?
              <div>
-                <Button
+                <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>
-                  disabled={this.props.error.json || this.props.json === ""}
+                <Button onClick={() => { this.toggle(); this.props.jsonString(''); }} color="primary">Abbrechen</Button>
                  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>
-            ) : null
+              : null
          }
        >
-          {this.state.string ? (
+          {this.state.string ?
-            <Textfield
+            <Textfield value={this.props.json} property={'json'} label={'JSON'} multiline error={this.props.error.json} />
-              value={this.props.json}
+            : null}
              property={"json"}
              label={"JSON"}
              multiline
              error={this.props.error.json}
            />
          ) : null}
        </Dialog>
        <Snackbar
@@ -612,9 +415,10 @@ class Builder extends Component {
          type={this.state.type}
          key={this.state.key}
        />
      </div>
    );
-  }
+  };
 }
 Builder.propTypes = {
@@ -630,6 +434,7 @@ Builder.propTypes = {
  resetTutorialBuilder: PropTypes.func.isRequired,
  tutorialProgress: PropTypes.func.isRequired,
  title: PropTypes.string.isRequired,
  badge: PropTypes.string.isRequired,
  id: PropTypes.string.isRequired,
  steps: PropTypes.array.isRequired,
  change: PropTypes.number.isRequired,
@@ -639,11 +444,12 @@ Builder.propTypes = {
  tutorials: PropTypes.array.isRequired,
  message: 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,
  badge: state.builder.badge,
  id: state.builder.id,
  steps: state.builder.steps,
  change: state.builder.change,
@@ -653,19 +459,7 @@ const mapStateToProps = (state) => ({
  tutorials: state.tutorial.tutorials,
  message: state.message,
  user: state.auth.user,
-  authProgress: state.auth.progress,
+  authProgress: state.auth.progress
 });
-export default connect(mapStateToProps, {
+export default connect(mapStateToProps, { checkError, readJSON, jsonString, progress, tutorialId, resetTutorialBuilder, getTutorials, resetTutorial, tutorialProgress, clearMessages, deleteTutorial })(withStyles(styles, { withTheme: true })(withRouter(Builder)));
  checkError,
  readJSON,
  jsonString,
  progress,
  tutorialId,
  resetTutorialBuilder,
  getTutorials,
  resetTutorial,
  tutorialProgress,
  clearMessages,
  deleteTutorial,
 })(withStyles(styles, { withTheme: true })(withRouter(Builder)));
@@ -1,39 +1,34 @@
-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 {
+import { tutorialTitle, tutorialBadge, jsonString, changeContent, setError, deleteError } from '../../../actions/tutorialBuilderActions';
  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: {
-    padding: "18.5px 14px 18.5px 24px",
+    padding: '18.5px 14px 18.5px 24px'
  },
  errorColor: {
-    color: `${theme.palette.error.dark} !important`,
+    color: `${theme.palette.error.dark} !important`
  },
  errorColorShrink: {
-    color: `rgba(0, 0, 0, 0.54) !important`,
+    color: `rgba(0, 0, 0, 0.54) !important`
  },
  errorBorder: {
-    borderColor: `${theme.palette.error.dark} !important`,
+    borderColor: `${theme.palette.error.dark} !important`
-  },
+  }
 });
 class Textfield extends Component {
-  componentDidMount() {
+
-    if (this.props.error) {
+  componentDidMount(){
-      if (this.props.property !== "media") {
+    if(this.props.error){
      if(this.props.property !== 'media'){
        this.props.deleteError(this.props.index, this.props.property);
      }
    }
@@ -41,50 +36,38 @@ class Textfield extends Component {
  handleChange = (e) => {
    var value = e.target.value;
-    if (this.props.property === "title") {
+    if(this.props.property === 'title'){
      this.props.tutorialTitle(value);
    } else if (this.props.property === "json") {
      this.props.jsonString(value);
    } else {
      this.props.changeContent(
        value,
        this.props.index,
        this.props.property,
        this.props.property2
      );
    }
-    if (value.replace(/\s/g, "") === "") {
+    else if(this.props.property === 'json'){
      this.props.jsonString(value);
    }
    else if(this.props.property === 'badge'){
      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);
-    } else {
+    }
    else{
      this.props.deleteError(this.props.index, this.props.property);
    }
  };
  render() {
    return (
-      <FormControl
+      <FormControl variant="outlined" fullWidth style={{marginBottom: '10px'}}>
        variant="outlined"
        fullWidth
        style={{ marginBottom: "10px" }}
      >
        <InputLabel
          htmlFor={this.props.property}
-          classes={{
+          classes={{shrink: this.props.error ? this.props.classes.errorColorShrink : null}}
            shrink: this.props.error
              ? this.props.classes.errorColorShrink
              : null,
          }}
        >
          {this.props.label}
        </InputLabel>
        <OutlinedInput
-          style={{ borderRadius: "25px" }}
+          style={{borderRadius: '25px'}}
-          classes={{
+          classes={{multiline: this.props.classes.multiline, notchedOutline: this.props.error ? this.props.classes.errorBorder : null}}
            multiline: this.props.classes.multiline,
            notchedOutline: this.props.error
              ? this.props.classes.errorBorder
              : null,
          }}
          error={this.props.error}
          value={this.props.value}
          label={this.props.label}
@@ -94,37 +77,21 @@ class Textfield extends Component {
          rowsMax={10}
          onChange={(e) => this.handleChange(e)}
        />
-        {this.props.error ? (
+        {this.props.error ?
-          this.props.property === "title" ? (
+          this.props.property === 'title' ? <FormHelperText className={this.props.classes.errorColor}>Gib einen Titel für das Tutorial ein.</FormHelperText>
-            <FormHelperText className={this.props.classes.errorColor}>
+        : 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>
-              Gib einen Titel für das Tutorial ein.
+        : <FormHelperText className={this.props.classes.errorColor}>{this.props.errorText}</FormHelperText>
-            </FormHelperText>
+        : null}
          ) : 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>
    );
-  }
+  };
 }
 Textfield.propTypes = {
  tutorialTitle: PropTypes.func.isRequired,
  tutorialBadge: PropTypes.func.isRequired,
  jsonString: PropTypes.func.isRequired,
  changeContent: PropTypes.func.isRequired,
 };
-export default connect(null, {
+export default connect(null, { tutorialTitle, tutorialBadge, jsonString, changeContent, setError, deleteError })(withStyles(styles, { withTheme: true })(Textfield));
  tutorialTitle,
  jsonString,
  changeContent,
  setError,
  deleteError,
 })(withStyles(styles, { withTheme: true })(Textfield));
@@ -1,95 +1,57 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';
-import Hardware from "./Hardware";
+import Hardware from './Hardware';
-import Requirement from "./Requirement";
+import Requirement from './Requirement';
-import BlocklyWindow from "../Blockly/BlocklyWindow";
+import BlocklyWindow from '../Blockly/BlocklyWindow';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import ReactMarkdown from 'react-markdown'
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
 import ReactMarkdown from "react-markdown";
 class Instruction extends Component {
  render() {
    var step = this.props.step;
    var isHardware = step.hardware && step.hardware.length > 0;
    var areRequirements = step.requirements && step.requirements.length > 0;
    return (
      <div>
-        <Typography variant="h4" style={{ marginBottom: "5px" }}>
+        <Typography variant='h4' style={{ marginBottom: '5px' }}>{step.headline}</Typography>
-          {step.headline}
+        <Typography style={isHardware ? {} : { marginBottom: '5px' }}><ReactMarkdown className={'tutorial'} linkTarget={'_blank'} skipHtml={false}>{step.text}</ReactMarkdown></Typography>
-        </Typography>
+        {isHardware ?
-        <Typography style={isHardware ? {} : { marginBottom: "5px" }}>
+          <Hardware picture={step.hardware} /> : null}
-          <ReactMarkdown
+        {areRequirements > 0 ?
-            className={"tutorial"}
+          <Requirement requirements={step.requirements} /> : null}
-            linkTarget={"_blank"}
+        {step.media ?
-            skipHtml={false}
+          step.media.picture ?
-          >
+            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '5px' }}>
-            {step.text}
+              <img src={`${process.env.REACT_APP_BLOCKLY_API}/media/${step.media.picture.path}`} alt='' style={{ maxHeight: '40vH', maxWidth: '100%' }} />
          </ReactMarkdown>
        </Typography>
        {isHardware ? <Hardware picture={step.hardware} /> : null}
        {areRequirements > 0 ? (
          <Requirement requirements={step.requirements} />
        ) : null}
        {step.media ? (
          step.media.picture ? (
            <div
              style={{
                display: "flex",
                justifyContent: "center",
                marginBottom: "5px",
              }}
            >
              <img
                src={`${process.env.REACT_APP_BLOCKLY_API}/media/${step.media.picture.path}`}
                alt=""
                style={{ maxHeight: "40vH", maxWidth: "100%" }}
              />
            </div>
-          ) : step.media.youtube ? (
+            : step.media.youtube ?
-            /*16:9; width: 800px; height: width/16*9=450px*/
+              /*16:9; width: 800px; height: width/16*9=450px*/
-            <div style={{ maxWidth: "800px", margin: "auto" }}>
+              <div style={{ maxWidth: '800px', margin: 'auto' }}>
-              <div
+                <div style={{ position: 'relative', height: 0, paddingBottom: 'calc(100% / 16 * 9)' }}>
-                style={{
+                  <iframe title={step.media.youtube} style={{ position: 'absolute', top: '0', left: '0', width: '100%', maxWidth: '800px', height: '100%', maxHeight: '450px' }} src={`https://www.youtube.com/embed/${step.media.youtube}`} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
-                  position: "relative",
+                </div>
                  height: 0,
                  paddingBottom: "calc(100% / 16 * 9)",
                }}
              >
                <iframe
                  title={step.media.youtube}
                  style={{
                    position: "absolute",
                    top: "0",
                    left: "0",
                    width: "100%",
                    maxWidth: "800px",
                    height: "100%",
                    maxHeight: "450px",
                  }}
                  src={`https://www.youtube.com/embed/${step.media.youtube}`}
                  frameBorder="0"
                  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                />
              </div>
-            </div>
+              : null
-          ) : null
+          : null}
-        ) : null}
+        {step.xml ?
-        {step.xml ? (
+          <Grid container spacing={2} style={{ marginBottom: '5px' }}>
-          <Grid container spacing={2} style={{ marginBottom: "5px" }}>
+            <Grid item xs={12} style={{display: 'flex', justifyContent: 'center'}}>
-            <Grid
+              <BlocklyWindow
-              item
+                svg
-              xs={12}
+                blockDisabled
-              style={{ display: "flex", justifyContent: "center" }}
+                initialXml={step.xml}
-            >
+              />
              <BlocklyWindow svg blockDisabled initialXml={step.xml} />
            </Grid>
          </Grid>
-        ) : null}
+          : null}
      </div>
    );
-  }
+  };
 }
 export default Instruction;
@@ -85,7 +85,7 @@ class StepperVertical extends Component {
            return (
              <Step key={i}>
                <Tooltip title={step.headline} placement='right' arrow >
-                  <div style={i === activeStep ? {padding: '5px 0'} : {padding: '5px 0', cursor: 'pointer'}} onClick={i === activeStep ? null : () => { this.props.tutorialStep(i)}}>
+                  <div style={i === activeStep ? {padding: '5px 0'} : {padding: '5px 0', cursor: 'pointer'}} onClick={i === activeStep ? null : () => {console.log(i); this.props.tutorialStep(i)}}>
                    <StepLabel
                      StepIconComponent={'div'}
                      classes={{
@@ -1,51 +1,47 @@
-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 {
+import { getTutorial, resetTutorial, tutorialStep,tutorialProgress } from '../../actions/tutorialActions';
  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 NotFound from "../NotFound";
+import Badge from './Badge';
-import * as Blockly from "blockly";
+import NotFound from '../NotFound';
-import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
+import * as Blockly from 'blockly'
 import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespace';
-import Card from "@material-ui/core/Card";
+
-import Button from "@material-ui/core/Button";
+import Card from '@material-ui/core/Card';
 import Button from '@material-ui/core/Button';
 class Tutorial extends Component {
  componentDidMount() {
    this.props.tutorialProgress();
    // retrieve tutorial only if a potential user is loaded - authentication
    // is finished (success or failed)
-    if (!this.props.progress) {
+    if(!this.props.progress){
      console.log(this.props);
      this.props.getTutorial(this.props.match.params.tutorialId);
    }
  }
  componentDidUpdate(props, state) {
-    if (props.progress !== this.props.progress && !this.props.progress) {
+    if(props.progress !== this.props.progress && !this.props.progress){
      // authentication is completed
      this.props.getTutorial(this.props.match.params.tutorialId);
-    } else if (
+    }
-      this.props.tutorial &&
+    else if(this.props.tutorial && !this.props.isLoading && this.props.tutorial._id !== this.props.match.params.tutorialId) {
      !this.props.isLoading &&
      this.props.tutorial._id !== 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);
    }
  }
@@ -61,97 +57,44 @@ class Tutorial extends Component {
  render() {
    return (
      <div>
-        {this.props.isLoading ? null : !this.props.tutorial ? (
+        {this.props.isLoading ? null :
-          this.props.message.id === "GET_TUTORIAL_FAIL" ? (
+          !this.props.tutorial ?
-            <NotFound
+            this.props.message.id === 'GET_TUTORIAL_FAIL' ? <NotFound button={{ title: Blockly.Msg.messages_GET_TUTORIAL_FAIL, link: '/tutorial' }} /> : null
-              button={{
+            : (() => {
-                title: Blockly.Msg.messages_GET_TUTORIAL_FAIL,
+              var tutorial = this.props.tutorial;
-                link: "/tutorial",
+              var steps = this.props.tutorial.steps;
-              }}
+              var step = steps[this.props.activeStep];
-            />
+              var name = `${detectWhitespacesAndReturnReadableResult(tutorial.title)}_${detectWhitespacesAndReturnReadableResult(step.headline)}`;
-          ) : null
+              return (
-        ) : (
+                <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
+                    <Card style={{ padding: '10px 10px 60px 10px', display: 'block', position: 'relative', height: 'max-content', width: '100%' }}>
-                    style={{
+                      {step ?
-                      padding: "10px 10px 60px 10px",
+                        step.type === 'instruction' ?
-                      display: "block",
+                          <Instruction step={step} />
-                      position: "relative",
+                          : <Assessment step={step} name={name} /> // if step.type === 'assessment'
-                      height: "max-content",
+                        : null}
                      width: "100%",
                    }}
                  >
                    {step ? (
                      step.type === "instruction" ? (
                        <Instruction step={step} />
                      ) : (
                        <Assessment step={step} name={name} />
                      ) // if step.type === 'assessment'
                    ) : null}
-                    <div
+                      <div style={{ marginTop: '20px', position: 'absolute', bottom: '10px' }}>
-                      style={{
+                        <Button style={{ marginRight: '10px', height: '35px' }} variant='contained' disabled={this.props.activeStep === 0} onClick={() => this.props.tutorialStep(this.props.activeStep - 1)}>Zurück</Button>
-                        marginTop: "20px",
+                        <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>
-                        position: "absolute",
+                      </div>
-                        bottom: "10px",
+                    </Card>
-                      }}
+                  </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>
    );
-  }
+  };
 }
 Tutorial.propTypes = {
@@ -167,24 +110,17 @@ Tutorial.propTypes = {
  tutorial: PropTypes.object.isRequired,
  isLoading: PropTypes.bool.isRequired,
  message: PropTypes.object.isRequired,
-  progress: PropTypes.bool.isRequired,
+  progress: PropTypes.bool.isRequired
 };
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
  change: state.tutorial.change,
  status: state.tutorial.status,
  activeStep: state.tutorial.activeStep,
  tutorial: state.tutorial.tutorials[0],
  isLoading: state.tutorial.progress,
  message: state.message,
-  progress: state.auth.progress,
+  progress: state.auth.progress
 });
-export default connect(mapStateToProps, {
+export default connect(mapStateToProps, { getTutorial, resetTutorial, tutorialStep, tutorialProgress, clearMessages, workspaceName })(withRouter(Tutorial));
  getTutorial,
  resetTutorial,
  tutorialStep,
  tutorialProgress,
  clearMessages,
  workspaceName,
 })(withRouter(Tutorial));
@@ -1,89 +1,77 @@
-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 { login } from "../../actions/authActions";
+import { login } from '../../actions/authActions'
-import { clearMessages } from "../../actions/messageActions";
+import { clearMessages } from '../../actions/messageActions'
-import { withRouter } from "react-router-dom";
+import { withRouter } from 'react-router-dom';
-import Snackbar from "../Snackbar";
+import Snackbar from '../Snackbar';
-import Alert from "../Alert";
+import Alert from '../Alert';
-import Breadcrumbs from "../Breadcrumbs";
+import Breadcrumbs from '../Breadcrumbs';
-import Button from "@material-ui/core/Button";
+import Button from '@material-ui/core/Button';
-import IconButton from "@material-ui/core/IconButton";
+import IconButton from '@material-ui/core/IconButton';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
-import TextField from "@material-ui/core/TextField";
+import TextField from '@material-ui/core/TextField';
-import Divider from "@material-ui/core/Divider";
+import Divider from '@material-ui/core/Divider';
-import InputAdornment from "@material-ui/core/InputAdornment";
+import InputAdornment from '@material-ui/core/InputAdornment';
-import CircularProgress from "@material-ui/core/CircularProgress";
+import CircularProgress from '@material-ui/core/CircularProgress';
-import Link from "@material-ui/core/Link";
+import Link from '@material-ui/core/Link';
-import * as Blockly from "blockly";
+import * as Blockly from 'blockly'
 export class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      redirect: props.location.state
+      redirect: props.location.state ? props.location.state.from.pathname : null,
-        ? props.location.state.from.pathname
+      email: '',
-        : null,
+      password: '',
      email: "",
      password: "",
      snackbar: false,
-      type: "",
+      type: '',
-      key: "",
+      key: '',
-      message: "",
+      message: '',
-      showPassword: false,
+      showPassword: false
    };
  }
  componentDidUpdate(props) {
    console.log(this.state.redirect);
    const { message } = this.props;
    if (message !== props.message) {
-      if (message.id === "LOGIN_SUCCESS") {
+      if (message.id === 'LOGIN_SUCCESS') {
        if (this.state.redirect) {
          this.props.history.push(this.state.redirect);
-        } else {
+        }
        else {
          this.props.history.goBack();
        }
      }
      // Check for login error
-      else if (message.id === "LOGIN_FAIL") {
+      else if (message.id === 'LOGIN_FAIL') {
-        console.log("login fail");
+        this.setState({ email: '', password: '', snackbar: true, key: Date.now(), message: Blockly.Msg.messages_LOGIN_FAIL, type: 'error' });
        this.setState({
          email: "",
          password: "",
          snackbar: true,
          key: Date.now(),
          message: Blockly.Msg.messages_LOGIN_FAIL,
          type: "error",
        });
      }
    }
  }
-  onChange = (e) => {
+  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };
-  onSubmit = (e) => {
+  onSubmit = e => {
    e.preventDefault();
    const { email, password } = this.state;
-    if (email !== "" && password !== "") {
+    if (email !== '' && password !== '') {
      // create user object
      const user = {
        email,
-        password,
+        password
      };
      this.props.login(user);
    } else {
-      this.setState({
+      this.setState({ snackbar: true, key: Date.now(), message: Blockly.Msg.messages_login_error, type: 'error' });
        snackbar: true,
        key: Date.now(),
        message: Blockly.Msg.messages_login_error,
        type: "error",
      });
    }
  };
@@ -98,25 +86,12 @@ export class Login extends Component {
  render() {
    return (
      <div>
-        <Breadcrumbs
+        <Breadcrumbs content={[{ link: '/user/login', title: Blockly.Msg.button_login }]} />
          content={[{ link: "/user/login", title: Blockly.Msg.button_login }]}
        />
-        <div
+        <div style={{ maxWidth: '500px', marginLeft: 'auto', marginRight: 'auto' }}>
          style={{ maxWidth: "500px", marginLeft: "auto", marginRight: "auto" }}
        >
          <h1>{Blockly.Msg.login_head}</h1>
          <Alert>
-            {Blockly.Msg.login_osem_account_01}{" "}
+            {Blockly.Msg.login_osem_account_01} <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> {Blockly.Msg.login_osem_account_02}.
            <Link
              color="primary"
              rel="noreferrer"
              target="_blank"
              href={"https://opensensemap.org/"}
            >
              openSenseMap
            </Link>{" "}
            {Blockly.Msg.login_osem_account_02}.
          </Alert>
          <Snackbar
            open={this.state.snackbar}
@@ -125,83 +100,51 @@ export class Login extends Component {
            key={this.state.key}
          />
          <TextField
-            style={{ marginBottom: "10px" }}
+            style={{ marginBottom: '10px' }}
            // variant='outlined'
-            type="text"
+            type='text'
            label={Blockly.Msg.labels_username}
-            name="email"
+            name='email'
            value={this.state.email}
            onChange={this.onChange}
            fullWidth={true}
          />
          <TextField
            // variant='outlined'
-            type={this.state.showPassword ? "text" : "password"}
+            type={this.state.showPassword ? 'text' : 'password'}
            label={Blockly.Msg.labels_password}
-            name="password"
+            name='password'
            value={this.state.password}
            InputProps={{
-              endAdornment: (
+              endAdornment:
-                <InputAdornment position="end">
+                <InputAdornment
                  position="end"
                >
                  <IconButton
                    onClick={this.handleClickShowPassword}
                    onMouseDown={this.handleMouseDownPassword}
                    edge="end"
                  >
-                    <FontAwesomeIcon
+                    <FontAwesomeIcon size='xs' icon={this.state.showPassword ? faEyeSlash : faEye} />
                      size="xs"
                      icon={this.state.showPassword ? faEyeSlash : faEye}
                    />
                  </IconButton>
                </InputAdornment>
              ),
            }}
            onChange={this.onChange}
            fullWidth={true}
          />
          <p>
-            <Button
+            <Button color="primary" variant='contained' onClick={this.onSubmit} style={{ width: '100%' }}>
-              color="primary"
+              {this.props.progress ?
-              variant="contained"
+                <div style={{ height: '24.5px' }}><CircularProgress color="inherit" size={20} /></div>
-              onClick={this.onSubmit}
+                : Blockly.Msg.button_login}
              style={{ width: "100%" }}
            >
              {this.props.progress ? (
                <div style={{ height: "24.5px" }}>
                  <CircularProgress color="inherit" size={20} />
                </div>
              ) : (
                Blockly.Msg.button_login
              )}
            </Button>
          </p>
-          <p style={{ textAlign: "center", fontSize: "0.8rem" }}>
+          <p style={{ textAlign: 'center', fontSize: '0.8rem' }}>
-            <Link
+            <Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'} color="primary">{Blockly.Msg.login_lostpassword}</Link>
              rel="noreferrer"
              target="_blank"
              href={"https://opensensemap.org/"}
              color="primary"
            >
              {Blockly.Msg.login_lostpassword}
            </Link>
          </p>
-          <Divider variant="fullWidth" />
+          <Divider variant='fullWidth' />
-          <p
+          <p style={{ textAlign: 'center', paddingRight: "34px", paddingLeft: "34px" }}>
-            style={{
+            {Blockly.Msg.login_createaccount}<Link rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link>.
              textAlign: "center",
              paddingRight: "34px",
              paddingLeft: "34px",
            }}
          >
            {Blockly.Msg.login_createaccount}
            <Link
              rel="noreferrer"
              target="_blank"
              href={"https://opensensemap.org/"}
            >
              openSenseMap
            </Link>
            .
          </p>
        </div>
      </div>
@@ -213,14 +156,12 @@ Login.propTypes = {
  message: PropTypes.object.isRequired,
  login: PropTypes.func.isRequired,
  clearMessages: PropTypes.func.isRequired,
-  progress: PropTypes.bool.isRequired,
+  progress: PropTypes.bool.isRequired
 };
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
  message: state.message,
-  progress: state.auth.progress,
+  progress: state.auth.progress
 });
-export default connect(mapStateToProps, { login, clearMessages })(
+export default connect(mapStateToProps, { login, clearMessages })(withRouter(Login));
  withRouter(Login)
 );
@@ -0,0 +1,267 @@
 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)));
@@ -1,172 +1,127 @@
-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 { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
+import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespace';
 import Dialog from '../Dialog';
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Backdrop from '@material-ui/core/Backdrop';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
 import TextField from '@material-ui/core/TextField';
 import { withStyles } from "@material-ui/core/styles";
 import Button from "@material-ui/core/Button";
 import Backdrop from "@material-ui/core/Backdrop";
 import CircularProgress from "@material-ui/core/CircularProgress";
 import IconButton from "@material-ui/core/IconButton";
 import Tooltip from "@material-ui/core/Tooltip";
 import Divider from "@material-ui/core/Divider";
 import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import * as Blockly from "blockly/core";
+import * as Blockly from 'blockly/core';
-import Copy from "../copy.svg";
+import Copy from '../copy.svg';
 import Prism from "prismjs";
 import "prismjs/themes/prism.css";
 import "prismjs/plugins/line-numbers/prism-line-numbers";
 import "prismjs/plugins/line-numbers/prism-line-numbers.css";
 import MuiDrawer from "@material-ui/core/Drawer";
 const styles = (theme) => ({
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
-    color: "#fff",
+    color: '#fff',
  },
  iconButton: {
    backgroundColor: theme.palette.button.compile,
    color: theme.palette.primary.contrastText,
-    width: "40px",
+    width: '40px',
-    height: "40px",
+    height: '40px',
-    "&:hover": {
+    '&:hover': {
      backgroundColor: theme.palette.button.compile,
      color: theme.palette.primary.contrastText,
-    },
+    }
  },
  button: {
    backgroundColor: theme.palette.button.compile,
    color: theme.palette.primary.contrastText,
-    "&:hover": {
+    '&:hover': {
      backgroundColor: theme.palette.button.compile,
      color: theme.palette.primary.contrastText,
-    },
+    }
-  },
+  }
 });
 const Drawer = withStyles((theme) => ({
  paperAnchorBottom: {
    backgroundColor: "black",
    height: "20vH",
  },
 }))(MuiDrawer);
 class Compile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: false,
      open: false,
      file: false,
-      title: "",
+      title: '',
-      content: "",
+      content: '',
-      name: props.name,
+      name: props.name
      error: "",
    };
  }
  componentDidMount() {
    Prism.highlightAll();
  }
  componentDidUpdate(props) {
    if (props.name !== this.props.name) {
      this.setState({ name: this.props.name });
    }
    Prism.highlightAll();
  }
  compile = () => {
    this.setState({ progress: true });
    const data = {
-      board: process.env.REACT_APP_BOARD,
+      "board": process.env.REACT_APP_BOARD,
-      sketch: this.props.arduino,
+      "sketch": this.props.arduino
    };
    fetch(`${process.env.REACT_APP_COMPILER_URL}/compile`, {
      method: "POST",
-      headers: { "Content-Type": "application/json" },
+      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data),
+      body: JSON.stringify(data)
    })
-      .then((response) => response.json())
+      .then(response => response.json())
-      .then((data) => {
+      .then(data => {
        console.log(data);
        if (data.code === "Internal Server Error") {
          this.setState({
            progress: false,
            file: false,
            open: true,
            title: Blockly.Msg.compiledialog_headline,
            content: Blockly.Msg.compiledialog_text,
            error: data.message,
          });
        }
        this.setState({ id: data.data.id }, () => {
          this.createFileName();
        });
      })
-      .catch((err) => {
+      .catch(err => {
        console.log(err);
-        //this.setState({ progress: false, file: false, open: true, title: Blockly.Msg.compiledialog_headline, content: Blockly.Msg.compiledialog_text });
+        this.setState({ progress: false, file: false, open: true, title: Blockly.Msg.compiledialog_headline, content: Blockly.Msg.compiledialog_text });
      });
-  };
+  }
  download = () => {
    const id = this.state.id;
    const filename = detectWhitespacesAndReturnReadableResult(this.state.name);
    this.toggleDialog();
    this.props.workspaceName(this.state.name);
-    window.open(
+    window.open(`${process.env.REACT_APP_COMPILER_URL}/download?id=${id}&board=${process.env.REACT_APP_BOARD}&filename=${filename}`, '_self');
      `${process.env.REACT_APP_COMPILER_URL}/download?id=${id}&board=${process.env.REACT_APP_BOARD}&filename=${filename}`,
      "_self"
    );
    this.setState({ progress: false });
-  };
+  }
  toggleDialog = () => {
    this.setState({ open: !this.state, progress: false });
-  };
+  }
  createFileName = () => {
    if (this.state.name) {
      this.download();
    } else {
      this.setState({
        file: true,
        open: true,
        title: "Projekt kompilieren",
        content:
          "Bitte gib einen Namen für die Bennenung des zu kompilierenden Programms ein und bestätige diesen mit einem Klick auf 'Eingabe'.",
      });
    }
-  };
+    else {
      this.setState({ file: true, open: true, title: 'Projekt kompilieren', content: 'Bitte gib einen Namen für die Bennenung des zu kompilierenden Programms ein und bestätige diesen mit einem Klick auf \'Eingabe\'.' });
    }
  }
  setFileName = (e) => {
    this.setState({ name: e.target.value });
-  };
+  }
  toggleDrawer = (anchor, open) => (event) => {
    if (
      event.type === "keydown" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      return;
    }
    this.setState({ open: false });
  };
  render() {
    return (
      <div style={{}}>
-        {this.props.iconButton ? (
+        {this.props.iconButton ?
-          <Tooltip
+          <Tooltip title={Blockly.Msg.tooltip_compile_code} arrow style={{ marginRight: '5px' }}>
            title={Blockly.Msg.tooltip_compile_code}
            arrow
            style={{ marginRight: "5px" }}
          >
            <IconButton
              className={`compileBlocks ${this.props.classes.iconButton}`}
              onClick={() => this.compile()}
@@ -174,73 +129,21 @@ class Compile extends Component {
              <FontAwesomeIcon icon={faClipboardCheck} size="l" />
            </IconButton>
          </Tooltip>
-        ) : (
+          :
-          <Button
+          <Button style={{ float: 'right', color: 'white' }} variant="contained" className={this.props.classes.button} onClick={() => this.compile()}>
-            style={{ float: "right", color: "white" }}
+            <FontAwesomeIcon icon={faClipboardCheck} style={{ marginRight: '5px' }} /> Kompilieren
            variant="contained"
            className={this.props.classes.button}
            onClick={() => this.compile()}
          >
            <FontAwesomeIcon
              icon={faClipboardCheck}
              style={{ marginRight: "5px" }}
            />{" "}
            Kompilieren
          </Button>
-        )}
+        }
-        <Backdrop
+        <Backdrop className={this.props.classes.backdrop} open={this.state.progress}>
-          className={this.props.classes.backdrop}
+          <div className='overlay'>
          open={this.state.progress}
        >
          <div className="overlay">
            <img src={Copy} width="400" alt="copyimage"></img>
            <h2>{Blockly.Msg.compile_overlay_head}</h2>
            <p>{Blockly.Msg.compile_overlay_text}</p>
-            <p>
+            <p>{Blockly.Msg.compile_overlay_help}<a href="/faq" target="_blank">FAQ</a></p>
              {Blockly.Msg.compile_overlay_help}
              <a href="/faq" target="_blank">
                FAQ
              </a>
            </p>
            <CircularProgress color="inherit" />
          </div>
        </Backdrop>
-        <Drawer
+        <Dialog
          anchor={"bottom"}
          open={this.state.open}
          onClose={this.toggleDrawer("bottom", false)}
        >
          <h2
            style={{
              color: "#4EAF47",
              paddingLeft: "1rem",
              paddingRight: "1rem",
            }}
          >
            {Blockly.Msg.drawer_ideerror_head}
          </h2>
          <p
            style={{
              color: "#4EAF47",
              paddingLeft: "1rem",
              paddingRight: "1rem",
            }}
          >
            {Blockly.Msg.drawer_ideerror_text}
          </p>
          <Divider style={{ backgroundColor: "white" }} />
          <p
            style={{
              backgroundColor: "black",
              color: "#E47128",
              padding: "1rem",
            }}
          >
            {" "}
            {`${this.state.error}`}{" "}
          </p>
        </Drawer>
        {/* <Dialog
          open={this.state.open}
          title={this.state.title}
          content={this.state.content}
@@ -253,32 +156,23 @@ class Compile extends Component {
              <TextField autoFocus placeholder='Dateiname' value={this.state.name} onChange={this.setFileName} style={{ marginRight: '10px' }} />
              <Button disabled={!this.state.name} variant='contained' color='primary' onClick={() => this.download()}>Eingabe</Button>
            </div>
-            : 
+            : null}
-           
+        </Dialog>
        <pre className="line-numbers" style={{ paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: '100%', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white' }}><code className="language-json">
                {`${this.state.error}`}
              </code></pre>
        </AccordionDetails>
      </Accordion>
            }
        </Dialog> */}
      </div>
    );
-  }
+  };
 }
 Compile.propTypes = {
  arduino: PropTypes.string.isRequired,
  name: PropTypes.string,
-  workspaceName: PropTypes.func.isRequired,
+  workspaceName: PropTypes.func.isRequired
 };
-const mapStateToProps = (state) => ({
+const mapStateToProps = state => ({
  arduino: state.workspace.code.arduino,
-  name: state.workspace.name,
+  name: state.workspace.name
 });
-export default connect(mapStateToProps, { workspaceName })(
+
-  withStyles(styles, { withTheme: true })(Compile)
+export default connect(mapStateToProps, { workspaceName })(withStyles(styles, { withTheme: true })(Compile));
 );
@@ -16,8 +16,6 @@ import Tooltip from '@material-ui/core/Tooltip';
 import { faShare } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Dialog from '../Dialog';
 import Button from '@material-ui/core/Button';
 const styles = (theme) => ({
  button: {
@@ -41,21 +39,12 @@ class ResetWorkspace extends Component {
    this.inputRef = React.createRef();
    this.state = {
      snackbar: false,
      open: false,
      type: '',
      key: '',
      message: '',
    };
  }
  toggleDialog = () => {
    this.setState({ open: !this.state});
  }
  openDialog = () => {
    this.setState({open: true});
  }
  resetWorkspace = () => {
    const workspace = Blockly.getMainWorkspace();
    Blockly.Events.disable(); // https://groups.google.com/forum/#!topic/blockly/m7e3g0TC75Y
@@ -80,7 +69,7 @@ class ResetWorkspace extends Component {
        <Tooltip title={Blockly.Msg.tooltip_reset_workspace} arrow>
          <IconButton
            className={this.props.classes.button}
-            onClick={() => this.openDialog()}
+            onClick={() => this.resetWorkspace()}
          >
            <FontAwesomeIcon icon={faShare} size="xs" flip='horizontal' />
          </IconButton>
@@ -92,17 +81,6 @@ class ResetWorkspace extends Component {
          type={this.state.type}
          key={this.state.key}
        />
         <Dialog
          open={this.state.open}
          title={Blockly.Msg.resetDialog_headline}
          content={Blockly.Msg.resetDialog_text}
          onClose={() => { this.toggleDialog(); }}
          onClick={() => { this.toggleDialog(); }}
          button={Blockly.Msg.button_cancel}
        > <div style={{ marginTop: '10px' }}>
        <Button variant='contained' color='primary' onClick={() => { this.resetWorkspace(); this.toggleDialog(); }}>Zurücksetzen</Button>
      </div></Dialog>
      </div>
    );
  };
@@ -127,6 +127,7 @@ class SaveProject extends Component {
  }
  render() {
    console.log(1, this.props);
    return (
      <div style={this.props.style}>
        <Tooltip title={this.state.projectType === 'project' ? Blockly.Msg.tooltip_update_project : Blockly.Msg.tooltip_save_project} arrow>
@@ -1,61 +1,59 @@
-import {
+import { MYBADGES_CONNECT, MYBADGES_DISCONNECT, USER_LOADED, USER_LOADING, AUTH_ERROR, LOGIN_SUCCESS, LOGIN_FAIL, LOGOUT_SUCCESS, LOGOUT_FAIL, REFRESH_TOKEN_SUCCESS } from '../actions/types';
-  USER_LOADED,
+
  USER_LOADING,
  AUTH_ERROR,
  LOGIN_SUCCESS,
  LOGIN_FAIL,
  LOGOUT_SUCCESS,
  LOGOUT_FAIL,
  REFRESH_TOKEN_SUCCESS,
 } from "../actions/types";
 const initialState = {
-  token: localStorage.getItem("token"),
+  token: localStorage.getItem('token'),
-  refreshToken: localStorage.getItem("refreshToken"),
+  refreshToken: localStorage.getItem('refreshToken'),
  isAuthenticated: null,
  progress: true,
-  user: null,
+  user: null
 };
-export default function foo(state = initialState, action) {
+export default function foo(state = initialState, action){
-  switch (action.type) {
+  switch(action.type){
    case USER_LOADING:
      return {
        ...state,
-        progress: true,
+        progress: true
      };
    case USER_LOADED:
      return {
        ...state,
        isAuthenticated: true,
        progress: false,
-        user: action.payload,
+        user: action.payload
      };
    case LOGIN_SUCCESS:
    case REFRESH_TOKEN_SUCCESS:
-      localStorage.setItem("token", action.payload.token);
+      localStorage.setItem('token', action.payload.token);
-      localStorage.setItem("refreshToken", action.payload.refreshToken);
+      localStorage.setItem('refreshToken', action.payload.refreshToken);
      return {
        ...state,
        user: action.payload.user,
        token: action.payload.token,
        refreshToken: action.payload.refreshToken,
        isAuthenticated: true,
-        progress: false,
+        progress: false
      };
    case MYBADGES_CONNECT:
    case MYBADGES_DISCONNECT:
      return {
        ...state,
        user: action.payload
      };
    case AUTH_ERROR:
    case LOGIN_FAIL:
    case LOGOUT_SUCCESS:
    case LOGOUT_FAIL:
-      localStorage.removeItem("token");
+      localStorage.removeItem('token');
-      localStorage.removeItem("refreshToken");
+      localStorage.removeItem('refreshToken');
      return {
        ...state,
        token: null,
        refreshToken: null,
        user: null,
        isAuthenticated: false,
-        progress: false,
+        progress: false
      };
    default:
      return state;
@@ -1,54 +1,47 @@
-import {
+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';
  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 = {
  change: 0,
  progress: false,
-  json: "",
+  json: '',
-  title: "",
+  title: '',
-  id: "",
+  id: '',
  steps: [
    {
      id: 1,
-      type: "instruction",
+      type: 'instruction',
-      headline: "",
+      headline: '',
-      text: "",
+      text: '',
      hardware: [],
-      requirements: [],
+      requirements: []
-    },
+    }
  ],
  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:
      return {
        ...state,
-        change: (state.change += 1),
+        change: state.change += 1
      };
    case BUILDER_TITLE:
      return {
        ...state,
-        title: action.payload,
+        title: action.payload
      };
    case BUILDER_BADGE:
      return {
        ...state,
        badge: action.payload
      };
    case BUILDER_ID:
      return {
        ...state,
-        id: action.payload,
+        id: action.payload
      };
    case BUILDER_ADD_STEP:
    case BUILDER_DELETE_STEP:
@@ -57,23 +50,23 @@ export default function foo(state = initialState, action) {
    case BUILDER_DELETE_PROPERTY:
      return {
        ...state,
-        steps: action.payload,
+        steps: action.payload
      };
    case BUILDER_ERROR:
      return {
        ...state,
-        error: action.payload,
+        error: action.payload
-      };
+      }
    case PROGRESS:
      return {
        ...state,
-        progress: action.payload,
+        progress: action.payload
-      };
+      }
    case JSON_STRING:
      return {
        ...state,
-        json: action.payload,
+        json: action.payload
-      };
+      }
    default:
      return state;
  }
@@ -1082,7 +1082,7 @@
    "core-js-pure" "^3.0.0"
    "regenerator-runtime" "^0.13.4"
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@7.12.1":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@7.12.1":
  "integrity" "sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA=="
  "resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.1.tgz"
  "version" "7.12.1"
@@ -1098,7 +1098,7 @@
    "@babel/parser" "^7.12.13"
    "@babel/types" "^7.12.13"
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.12.1", "@babel/traverse@^7.13.0", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.0":
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.12.1", "@babel/traverse@^7.13.0", "@babel/traverse@^7.7.0":
  "integrity" "sha512-xys5xi5JEhzC3RzEmSGrs/b3pJW/o87SypZ+G/PhaE7uqVQNv/jlmVIBXuoh5atqQ434LfXV+sf23Oxj0bchJQ=="
  "resolved" "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.0.tgz"
  "version" "7.13.0"
@@ -1142,23 +1142,13 @@
  "resolved" "https://registry.npmjs.org/@blockly/plugin-modal/-/plugin-modal-1.20200427.4.tgz"
  "version" "1.20200427.4"
-"@blockly/plugin-scroll-options@^1.0.2":
+"@blockly/plugin-typed-variable-modal@^3.1.15":
-  "integrity" "sha512-j0ehQlHv/0EWPw8UQEplGs4jCxfo45yp6ZzxYxReMirM0/j4EXXFvgXTZoruPgRYgMl+pCwya32Z6Dkv19sURA=="
+  "integrity" "sha512-X+s2Vd8tjt1GPV2gGfZUB+srabRUDWcZ7cOzjajV8gmc0zFu0IOLsR991cBptF1bsp207TEtUyIsoWONHBNp4A=="
-  "resolved" "https://registry.npmjs.org/@blockly/plugin-scroll-options/-/plugin-scroll-options-1.0.2.tgz"
+  "resolved" "https://registry.npmjs.org/@blockly/plugin-typed-variable-modal/-/plugin-typed-variable-modal-3.1.15.tgz"
-  "version" "1.0.2"
+  "version" "3.1.15"
 "@blockly/plugin-typed-variable-modal@^3.1.26":
  "integrity" "sha512-3aKdr/NkcyH93zt0etnmR+urZ3csHbhqyUBn9Q8r/w6GNm54S8s916B921YnGFUBtnWnUEzieMHRAt5KveSKug=="
  "resolved" "https://registry.npmjs.org/@blockly/plugin-typed-variable-modal/-/plugin-typed-variable-modal-3.1.26.tgz"
  "version" "3.1.26"
  dependencies:
    "@blockly/plugin-modal" "^1.20200427.4"
 "@blockly/zoom-to-fit@^2.0.7":
  "integrity" "sha512-ZMY6k1V97B3IwBWcbxFlpKwKtfWg2vmJuLfmdIymrJQZtswRyY303F1JOl1G1+zsCKeyW/FVo/ysrSDZTIaRCQ=="
  "resolved" "https://registry.npmjs.org/@blockly/zoom-to-fit/-/zoom-to-fit-2.0.7.tgz"
  "version" "2.0.7"
 "@cnakazawa/watch@^1.0.3":
  "integrity" "sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ=="
  "resolved" "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz"
@@ -1182,7 +1172,7 @@
  "resolved" "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz"
  "version" "0.8.0"
-"@emotion/is-prop-valid@^0.8.3":
+"@emotion/is-prop-valid@^0.8.1":
  "integrity" "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA=="
  "resolved" "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz"
  "version" "0.8.8"
@@ -1194,12 +1184,7 @@
  "resolved" "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz"
  "version" "0.7.4"
-"@emotion/stylis@^0.8.4":
+"@emotion/unitless@^0.7.0":
  "integrity" "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
  "resolved" "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz"
  "version" "0.8.5"
 "@emotion/unitless@^0.7.4":
  "integrity" "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
  "resolved" "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz"
  "version" "0.7.5"
@@ -1944,21 +1929,6 @@
  dependencies:
    "@types/node" "*"
 "@types/hast@^2.0.0":
  "integrity" "sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g=="
  "resolved" "https://registry.npmjs.org/@types/hast/-/hast-2.3.4.tgz"
  "version" "2.3.4"
  dependencies:
    "@types/unist" "*"
 "@types/hoist-non-react-statics@^3.3.0":
  "integrity" "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA=="
  "resolved" "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz"
  "version" "3.3.1"
  dependencies:
    "@types/react" "*"
    "hoist-non-react-statics" "^3.3.0"
 "@types/html-minifier-terser@^5.0.0":
  "integrity" "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA=="
  "resolved" "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz"
@@ -2050,16 +2020,6 @@
  dependencies:
    "@types/react" "*"
 "@types/react-redux@^7.1.16":
  "integrity" "sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw=="
  "resolved" "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.16.tgz"
  "version" "7.1.16"
  dependencies:
    "@types/hoist-non-react-statics" "^3.3.0"
    "@types/react" "*"
    "hoist-non-react-statics" "^3.3.0"
    "redux" "^4.0.0"
 "@types/react-transition-group@^4.2.0":
  "integrity" "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w=="
  "resolved" "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz"
@@ -2649,11 +2609,6 @@
  dependencies:
    "sprintf-js" "~1.0.2"
 "argparse@^2.0.1":
  "integrity" "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
  "resolved" "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
  "version" "2.0.1"
 "aria-query@^4.0.2", "aria-query@^4.2.2":
  "integrity" "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA=="
  "resolved" "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz"
@@ -3151,10 +3106,10 @@
  dependencies:
    "file-uri-to-path" "1.0.0"
-"blockly@^6.20210701.0", "blockly@3.20200625.0 - 6":
+"blockly@^5.20210325.1", "blockly@>3.20200625.0":
-  "integrity" "sha512-cNrwFOAxXE5Pbs1FJAyLTlSRzpNW/C+0gPT2rGQDOJVVKcyF3vhFC1StgnxvQNsv//ueuksKWIXxDuSWh1VI4w=="
+  "integrity" "sha512-qrilYPovJeDfxKDWm1YBUCPVNElh/iyC1szaHTIPZHj9C9YPpSzZOeFyyrPBbYRudzbo8kjBOWMtHnN1bLjkoQ=="
-  "resolved" "https://registry.npmjs.org/blockly/-/blockly-6.20210701.0.tgz"
+  "resolved" "https://registry.npmjs.org/blockly/-/blockly-5.20210325.1.tgz"
-  "version" "6.20210701.0"
+  "version" "5.20210325.1"
  dependencies:
    "jsdom" "15.2.1"
@@ -3703,6 +3658,15 @@
  "resolved" "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz"
  "version" "2.2.0"
 "clipboard@^2.0.0":
  "integrity" "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg=="
  "resolved" "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz"
  "version" "2.0.6"
  dependencies:
    "good-listener" "^1.2.2"
    "select" "^1.1.2"
    "tiny-emitter" "^2.0.0"
 "cliui@^5.0.0":
  "integrity" "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA=="
  "resolved" "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz"
@@ -3805,11 +3769,6 @@
  dependencies:
    "delayed-stream" "~1.0.0"
 "comma-separated-tokens@^1.0.0":
  "integrity" "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw=="
  "resolved" "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz"
  "version" "1.0.8"
 "commander@^2.20.0":
  "integrity" "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
  "resolved" "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
@@ -3862,11 +3821,6 @@
    "safe-buffer" "5.1.2"
    "vary" "~1.1.2"
 "compute-scroll-into-view@^1.0.17":
  "integrity" "sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg=="
  "resolved" "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz"
  "version" "1.0.17"
 "concat-map@0.0.1":
  "integrity" "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
  "resolved" "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@@ -3958,13 +3912,6 @@
  "resolved" "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz"
  "version" "0.1.1"
 "copy-to-clipboard@^3.0.8":
  "integrity" "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw=="
  "resolved" "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz"
  "version" "3.3.1"
  dependencies:
    "toggle-selection" "^1.0.6"
 "core-js-compat@^3.6.2", "core-js-compat@^3.8.1", "core-js-compat@^3.9.0":
  "integrity" "sha512-jXAirMQxrkbiiLsCx9bQPJFA6llDadKMpYrBJQJ3/c4/vsPP/fAf29h24tviRlvwUL6AmY5CHLu2GvjuYviQqA=="
  "resolved" "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.9.1.tgz"
@@ -4171,14 +4118,14 @@
    "domutils" "^1.7.0"
    "nth-check" "^1.0.2"
-"css-to-react-native@^3.0.0":
+"css-to-react-native@^2.2.2":
-  "integrity" "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ=="
+  "integrity" "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw=="
-  "resolved" "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz"
+  "resolved" "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz"
-  "version" "3.0.0"
+  "version" "2.3.2"
  dependencies:
    "camelize" "^1.0.0"
    "css-color-keywords" "^1.0.0"
-    "postcss-value-parser" "^4.0.2"
+    "postcss-value-parser" "^3.3.0"
 "css-tree@^1.1.2":
  "integrity" "sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ=="
@@ -4532,6 +4479,11 @@
  "resolved" "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
  "version" "1.0.0"
 "delegate@^3.1.2":
  "integrity" "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
  "resolved" "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz"
  "version" "3.2.0"
 "depd@~1.1.2":
  "integrity" "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
  "resolved" "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz"
@@ -4877,12 +4829,7 @@
  "resolved" "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz"
  "version" "1.1.2"
-"entities@^2.0.0", "entities@~2.1.0":
+"entities@^2.0.0":
  "integrity" "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w=="
  "resolved" "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz"
  "version" "2.1.0"
 "entities@~2.0.0":
  "integrity" "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ=="
  "resolved" "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz"
  "version" "2.0.3"
@@ -5936,6 +5883,13 @@
    "merge2" "^1.3.0"
    "slash" "^3.0.0"
 "good-listener@^1.2.2":
  "integrity" "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA="
  "resolved" "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz"
  "version" "1.2.2"
  dependencies:
    "delegate" "^3.1.2"
 "graceful-fs@^4.1.11", "graceful-fs@^4.1.15", "graceful-fs@^4.1.2", "graceful-fs@^4.1.6", "graceful-fs@^4.2.0", "graceful-fs@^4.2.4":
  "integrity" "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
  "resolved" "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz"
@@ -6052,22 +6006,6 @@
    "inherits" "^2.0.3"
    "minimalistic-assert" "^1.0.1"
 "hast-util-parse-selector@^2.0.0":
  "integrity" "sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ=="
  "resolved" "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz"
  "version" "2.2.5"
 "hastscript@^6.0.0":
  "integrity" "sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w=="
  "resolved" "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz"
  "version" "6.0.0"
  dependencies:
    "@types/hast" "^2.0.0"
    "comma-separated-tokens" "^1.0.0"
    "hast-util-parse-selector" "^2.0.0"
    "property-information" "^5.0.0"
    "space-separated-tokens" "^1.0.0"
 "he@^1.2.0":
  "integrity" "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
  "resolved" "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
@@ -6099,7 +6037,7 @@
    "minimalistic-assert" "^1.0.0"
    "minimalistic-crypto-utils" "^1.0.1"
-"hoist-non-react-statics@^3.0.0", "hoist-non-react-statics@^3.1.0", "hoist-non-react-statics@^3.3.0", "hoist-non-react-statics@^3.3.2":
+"hoist-non-react-statics@^3.1.0", "hoist-non-react-statics@^3.3.0", "hoist-non-react-statics@^3.3.2":
  "integrity" "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw=="
  "resolved" "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
  "version" "3.3.2"
@@ -6856,6 +6794,11 @@
  "resolved" "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz"
  "version" "1.0.0"
 "is-what@^3.3.1":
  "integrity" "sha512-2ilQz5/f/o9V7WRWJQmpFYNmQFZ9iM+OXRonZKcYgTkCzjb949Vi4h282PD1UfmgHk666rcWonbRJ++KI41VGw=="
  "resolved" "https://registry.npmjs.org/is-what/-/is-what-3.12.0.tgz"
  "version" "3.12.0"
 "is-windows@^1.0.2":
  "integrity" "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="
  "resolved" "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz"
@@ -7763,20 +7706,6 @@
  "resolved" "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz"
  "version" "1.1.6"
 "linkify-it@^2.0.0":
  "integrity" "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw=="
  "resolved" "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz"
  "version" "2.2.0"
  dependencies:
    "uc.micro" "^1.0.1"
 "linkify-it@^3.0.1":
  "integrity" "sha512-gDBO4aHNZS6coiZCKVhSNh43F9ioIL4JwRjLZPkoLIY4yZFwg264Y5lu2x6rb1Js42Gh6Yqm2f6L2AJcnkzinQ=="
  "resolved" "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.2.tgz"
  "version" "3.0.2"
  dependencies:
    "uc.micro" "^1.0.1"
 "load-json-file@^2.0.0":
  "integrity" "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg="
  "resolved" "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz"
@@ -7987,33 +7916,6 @@
  dependencies:
    "object-visit" "^1.0.0"
 "markdown-it-container@^3.0.0":
  "integrity" "sha512-y6oKTq4BB9OQuY/KLfk/O3ysFhB3IMYoIWhGJEidXt1NQFocFK2sA2t0NYZAMyMShAGL6x5OPIbrmXPIqaN9rw=="
  "resolved" "https://registry.npmjs.org/markdown-it-container/-/markdown-it-container-3.0.0.tgz"
  "version" "3.0.0"
 "markdown-it@^10.0.0":
  "integrity" "sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg=="
  "resolved" "https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz"
  "version" "10.0.0"
  dependencies:
    "argparse" "^1.0.7"
    "entities" "~2.0.0"
    "linkify-it" "^2.0.0"
    "mdurl" "^1.0.1"
    "uc.micro" "^1.0.5"
 "markdown-it@^12.2.0":
  "integrity" "sha512-Wjws+uCrVQRqOoJvze4HCqkKl1AsSh95iFAeQDwnyfxM09divCBSXlDR1uTvyUP3Grzpn4Ru8GeCxYPM8vkCQg=="
  "resolved" "https://registry.npmjs.org/markdown-it/-/markdown-it-12.2.0.tgz"
  "version" "12.2.0"
  dependencies:
    "argparse" "^2.0.1"
    "entities" "~2.1.0"
    "linkify-it" "^3.0.1"
    "mdurl" "^1.0.1"
    "uc.micro" "^1.0.5"
 "md5.js@^1.3.4":
  "integrity" "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg=="
  "resolved" "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz"
@@ -8055,16 +7957,16 @@
  "resolved" "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz"
  "version" "2.0.4"
 "mdurl@^1.0.1":
  "integrity" "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
  "resolved" "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz"
  "version" "1.0.1"
 "media-typer@0.3.0":
  "integrity" "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
  "resolved" "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz"
  "version" "0.3.0"
 "memoize-one@^5.0.0":
  "integrity" "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
  "resolved" "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz"
  "version" "5.1.1"
 "memory-fs@^0.4.1":
  "integrity" "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI="
  "resolved" "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz"
@@ -8081,6 +7983,13 @@
    "errno" "^0.1.3"
    "readable-stream" "^2.0.1"
 "merge-anything@^2.2.4":
  "integrity" "sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ=="
  "resolved" "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.4.tgz"
  "version" "2.4.4"
  dependencies:
    "is-what" "^3.3.1"
 "merge-descriptors@1.0.1":
  "integrity" "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
  "resolved" "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz"
@@ -8726,11 +8635,6 @@
    "type-check" "^0.4.0"
    "word-wrap" "^1.2.3"
 "orderedmap@^1.1.0":
  "integrity" "sha512-3Ux8um0zXbVacKUkcytc0u3HgC0b0bBLT+I60r2J/En72cI0nZffqrA7Xtf2Hqs27j1g82llR5Mhbd0Z1XW4AQ=="
  "resolved" "https://registry.npmjs.org/orderedmap/-/orderedmap-1.1.1.tgz"
  "version" "1.1.1"
 "original@^1.0.0":
  "integrity" "sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg=="
  "resolved" "https://registry.npmjs.org/original/-/original-1.0.2.tgz"
@@ -8743,11 +8647,6 @@
  "resolved" "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz"
  "version" "0.3.0"
 "outline-icons@^1.26.1":
  "integrity" "sha512-pe2vSI1mR4bJaWpmTitniyNpu4oq8dVObOweh/H6EON+12w2QDRtJZ6A6Bkc2vjlb2ZRYcZasisJI9VBUuTnHQ=="
  "resolved" "https://registry.npmjs.org/outline-icons/-/outline-icons-1.31.0.tgz"
  "version" "1.31.0"
 "p-each-series@^2.1.0":
  "integrity" "sha512-ycIL2+1V32th+8scbpTvyHNaHe02z0sjgh91XXjAk+ZeXoPN4Z46DVUnzdso0aX4KckKw0FNNFHdjZ2UsZvxiA=="
  "resolved" "https://registry.npmjs.org/p-each-series/-/p-each-series-2.2.0.tgz"
@@ -9757,6 +9656,11 @@
  "resolved" "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz"
  "version" "3.3.1"
 "postcss-value-parser@^3.3.0":
  "integrity" "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
  "resolved" "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz"
  "version" "3.3.1"
 "postcss-value-parser@^4.0.2", "postcss-value-parser@^4.1.0":
  "integrity" "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
  "resolved" "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz"
@@ -9856,10 +9760,12 @@
    "ansi-styles" "^4.0.0"
    "react-is" "^17.0.1"
-"prismjs@^1.24.0", "prismjs@~1.24.0":
+"prismjs@^1.23.0":
-  "integrity" "sha512-SqV5GRsNqnzCL8k5dfAjCNhUrF3pR0A9lTDSCUZeh/LIshheXJEaP0hwLz2t4XHivd2J/v2HR+gRnigzeKe3cQ=="
+  "integrity" "sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA=="
-  "resolved" "https://registry.npmjs.org/prismjs/-/prismjs-1.24.0.tgz"
+  "resolved" "https://registry.npmjs.org/prismjs/-/prismjs-1.23.0.tgz"
-  "version" "1.24.0"
+  "version" "1.23.0"
  optionalDependencies:
    "clipboard" "^2.0.0"
 "process-nextick-args@~2.0.0":
  "integrity" "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
@@ -9896,7 +9802,7 @@
    "kleur" "^3.0.3"
    "sisteransi" "^1.0.5"
-"prop-types@^15.5.8", "prop-types@^15.6.2", "prop-types@^15.7.2", "prop-types@15.7.2":
+"prop-types@^15.5.4", "prop-types@^15.6.2", "prop-types@^15.7.2", "prop-types@15.7.2":
  "integrity" "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ=="
  "resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"
  "version" "15.7.2"
@@ -9905,129 +9811,6 @@
    "object-assign" "^4.1.1"
    "react-is" "^16.8.1"
 "property-information@^5.0.0":
  "integrity" "sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA=="
  "resolved" "https://registry.npmjs.org/property-information/-/property-information-5.6.0.tgz"
  "version" "5.6.0"
  dependencies:
    "xtend" "^4.0.0"
 "prosemirror-commands@^1.1.6":
  "integrity" "sha512-IWyBBXNAd44RM6NnBPljwq+/CM2oYCQJkF+YhKEAZNwzW0uFdGf4qComhjbKZzqFdu6Iub2ZhNsXgwPibA0lCQ=="
  "resolved" "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.1.10.tgz"
  "version" "1.1.10"
  dependencies:
    "prosemirror-model" "^1.0.0"
    "prosemirror-state" "^1.0.0"
    "prosemirror-transform" "^1.0.0"
 "prosemirror-dropcursor@^1.3.3":
  "integrity" "sha512-tNUwcF2lPAkwKBZPZRtbxpwljnODRNZ3eiYloN1DSUqDjMT1nBZm0nejaEMS1TvNQ+3amibUSAiV4hX+jpASFA=="
  "resolved" "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.3.5.tgz"
  "version" "1.3.5"
  dependencies:
    "prosemirror-state" "^1.0.0"
    "prosemirror-transform" "^1.1.0"
    "prosemirror-view" "^1.1.0"
 "prosemirror-gapcursor@^1.1.5":
  "integrity" "sha512-SjbUZq5pgsBDuV3hu8GqgIpZR5eZvGLM+gPQTqjVVYSMUCfKW3EGXTEYaLHEl1bGduwqNC95O3bZflgtAb4L6w=="
  "resolved" "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.1.5.tgz"
  "version" "1.1.5"
  dependencies:
    "prosemirror-keymap" "^1.0.0"
    "prosemirror-model" "^1.0.0"
    "prosemirror-state" "^1.0.0"
    "prosemirror-view" "^1.0.0"
 "prosemirror-history@^1.1.3":
  "integrity" "sha512-B9v9xtf4fYbKxQwIr+3wtTDNLDZcmMMmGiI3TAPShnUzvo+Rmv1GiUrsQChY1meetHl7rhML2cppF3FTs7f7UQ=="
  "resolved" "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.2.0.tgz"
  "version" "1.2.0"
  dependencies:
    "prosemirror-state" "^1.2.2"
    "prosemirror-transform" "^1.0.0"
    "rope-sequence" "^1.3.0"
 "prosemirror-inputrules@^1.1.3":
  "integrity" "sha512-ZaHCLyBtvbyIHv0f5p6boQTIJjlD6o2NPZiEaZWT2DA+j591zS29QQEMT4lBqwcLW3qRSf7ZvoKNbf05YrsStw=="
  "resolved" "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.1.3.tgz"
  "version" "1.1.3"
  dependencies:
    "prosemirror-state" "^1.0.0"
    "prosemirror-transform" "^1.0.0"
 "prosemirror-keymap@^1.0.0", "prosemirror-keymap@^1.1.2", "prosemirror-keymap@^1.1.4":
  "integrity" "sha512-Al8cVUOnDFL4gcI5IDlG6xbZ0aOD/i3B17VT+1JbHWDguCgt/lBHVTHUBcKvvbSg6+q/W4Nj1Fu6bwZSca3xjg=="
  "resolved" "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.1.4.tgz"
  "version" "1.1.4"
  dependencies:
    "prosemirror-state" "^1.0.0"
    "w3c-keyname" "^2.2.0"
 "prosemirror-markdown@^1.5.2":
  "integrity" "sha512-e9rVnRULVACEjCvIBOj5P2dGTE/nz8kKspA/GWZXVgtQgqeJEvQ+tUNeZkeRZJ2/I3XPzuWjeoWnwJmkMnIKrg=="
  "resolved" "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.5.2.tgz"
  "version" "1.5.2"
  dependencies:
    "markdown-it" "^10.0.0"
    "prosemirror-model" "^1.0.0"
 "prosemirror-model@^1.0.0", "prosemirror-model@^1.1.0", "prosemirror-model@^1.13.3", "prosemirror-model@^1.8.1":
  "integrity" "sha512-yzZlBaSxfUPIIP6U5Edh5zKxJPZ5f7bwZRhiCuH3UYkWhj+P3d8swHsbuAMOu/iDatDc5J/Qs5Mb3++mZf+CvQ=="
  "resolved" "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.14.3.tgz"
  "version" "1.14.3"
  dependencies:
    "orderedmap" "^1.1.0"
 "prosemirror-schema-list@^1.1.2":
  "integrity" "sha512-9gadhga/wySVfb/iZ2vOpndbG0XroeLw0HkkZN5demNbOea6U5oQtJmvyYWC7ZVf3WkhmVdVsOXrllM9JcC20A=="
  "resolved" "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.1.5.tgz"
  "version" "1.1.5"
  dependencies:
    "prosemirror-model" "^1.0.0"
    "prosemirror-transform" "^1.0.0"
 "prosemirror-state@^1.0.0", "prosemirror-state@^1.0.1", "prosemirror-state@^1.2.2", "prosemirror-state@^1.3.1", "prosemirror-state@^1.3.4":
  "integrity" "sha512-Xkkrpd1y/TQ6HKzN3agsQIGRcLckUMA9u3j207L04mt8ToRgpGeyhbVv0HI7omDORIBHjR29b7AwlATFFf2GLA=="
  "resolved" "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.3.4.tgz"
  "version" "1.3.4"
  dependencies:
    "prosemirror-model" "^1.0.0"
    "prosemirror-transform" "^1.0.0"
 "prosemirror-tables@^0.9.1", "prosemirror-tables@^1.1.1":
  "integrity" "sha512-LmCz4jrlqQZRsYRDzCRYf/pQ5CUcSOyqZlAj5kv67ZWBH1SVLP2U9WJEvQfimWgeRlIz0y0PQVqO1arRm1+woA=="
  "resolved" "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.1.1.tgz"
  "version" "1.1.1"
  dependencies:
    "prosemirror-keymap" "^1.1.2"
    "prosemirror-model" "^1.8.1"
    "prosemirror-state" "^1.3.1"
    "prosemirror-transform" "^1.2.1"
    "prosemirror-view" "^1.13.3"
 "prosemirror-transform@^1.0.0", "prosemirror-transform@^1.1.0", "prosemirror-transform@^1.2.1", "prosemirror-transform@1.2.5":
  "integrity" "sha512-eqeIaxWtUfOnpA1ERrXCuSIMzqIJtL9Qrs5uJMCjY5RMSaH5o4pc390SAjn/IDPeIlw6auh0hCCXs3wRvGnQug=="
  "resolved" "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.2.5.tgz"
  "version" "1.2.5"
  dependencies:
    "prosemirror-model" "^1.0.0"
 "prosemirror-utils@^0.9.6":
  "integrity" "sha512-UC+j9hQQ1POYfMc5p7UFxBTptRiGPR7Kkmbl3jVvU8VgQbkI89tR/GK+3QYC8n+VvBZrtAoCrJItNhWSxX3slA=="
  "resolved" "https://registry.npmjs.org/prosemirror-utils/-/prosemirror-utils-0.9.6.tgz"
  "version" "0.9.6"
 "prosemirror-view@^1.0.0", "prosemirror-view@^1.1.0", "prosemirror-view@^1.13.3", "prosemirror-view@1.18.1":
  "integrity" "sha512-TZd8byDRfdopLiokBY7T27msCSfWqqRxWs/LnBbdI030F+iI2kS+tO59/XFnpZxMLFKlJgOgGGhM9SzD1Nwdxw=="
  "resolved" "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.18.1.tgz"
  "version" "1.18.1"
  dependencies:
    "prosemirror-model" "^1.1.0"
    "prosemirror-state" "^1.0.0"
    "prosemirror-transform" "^1.1.0"
 "proxy-addr@~2.0.5":
  "integrity" "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw=="
  "resolved" "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz"
@@ -10244,14 +10027,15 @@
    "strip-ansi" "6.0.0"
    "text-table" "0.2.0"
-"react-dom@^16.0.0 || ^17.0.0", "react-dom@^16.8.0 || ^17.0.0", "react-dom@^17.0.0", "react-dom@^17.0.1", "react-dom@^17.0.2", "react-dom@>= 16.8.0":
+"react-dom@^16.13.1":
-  "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
+  "integrity" "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag=="
-  "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
+  "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz"
-  "version" "17.0.2"
+  "version" "16.13.1"
  dependencies:
    "loose-envify" "^1.1.0"
    "object-assign" "^4.1.1"
-    "scheduler" "^0.20.2"
+    "prop-types" "^15.6.2"
    "scheduler" "^0.19.1"
 "react-error-overlay@^6.0.9":
  "integrity" "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
@@ -10270,7 +10054,7 @@
    "use-callback-ref" "^1.2.1"
    "use-sidecar" "^1.0.1"
-"react-is@^16.12.0", "react-is@^16.13.1", "react-is@^16.6.0", "react-is@^16.7.0", "react-is@^16.8.0", "react-is@^16.8.1", "react-is@^16.8.4", "react-is@^16.8.6", "react-is@>= 16.8.0":
+"react-is@^16.12.0", "react-is@^16.6.0", "react-is@^16.7.0", "react-is@^16.8.0", "react-is@^16.8.1", "react-is@^16.8.4", "react-is@^16.8.6", "react-is@^16.9.0":
  "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
  "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
  "version" "16.13.1"
@@ -10296,34 +10080,16 @@
    "unist-util-visit" "^2.0.0"
    "xtend" "^4.0.1"
-"react-mde@^11.5.0":
+"react-redux@^7.2.0":
-  "integrity" "sha512-CH/VK6d+tpVjJ8rTXfh1dDt6GWedTgCU0668p8toqhAc3vy0Lu872O2RKYDSpkUrlbHI08fjUPTl++nExp6gag=="
+  "integrity" "sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA=="
-  "resolved" "https://registry.npmjs.org/react-mde/-/react-mde-11.5.0.tgz"
+  "resolved" "https://registry.npmjs.org/react-redux/-/react-redux-7.2.0.tgz"
-  "version" "11.5.0"
+  "version" "7.2.0"
 "react-medium-image-zoom@^3.1.3":
  "integrity" "sha512-5CoU8whSCz5Xz2xNeGD34dDfZ6jaf/pybdfZh8HNUmA9mbXbLfj0n6bQWfEUwkq9lsNg1sEkyeIJq2tcvZY8bw=="
  "resolved" "https://registry.npmjs.org/react-medium-image-zoom/-/react-medium-image-zoom-3.1.3.tgz"
  "version" "3.1.3"
 "react-portal@^4.2.1":
  "integrity" "sha512-fE9kOBagwmTXZ3YGRYb4gcMy+kSA+yLO0xnPankjRlfBv4uCpFXqKPfkpsGQQR15wkZ9EssnvTOl1yMzbkxhPQ=="
  "resolved" "https://registry.npmjs.org/react-portal/-/react-portal-4.2.1.tgz"
  "version" "4.2.1"
  dependencies:
-    "prop-types" "^15.5.8"
+    "@babel/runtime" "^7.5.5"
-
+    "hoist-non-react-statics" "^3.3.0"
 "react-redux@^7.2.4":
  "integrity" "sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA=="
  "resolved" "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz"
  "version" "7.2.4"
  dependencies:
    "@babel/runtime" "^7.12.1"
    "@types/react-redux" "^7.1.16"
    "hoist-non-react-statics" "^3.3.2"
    "loose-envify" "^1.4.0"
    "prop-types" "^15.7.2"
-    "react-is" "^16.13.1"
+    "react-is" "^16.9.0"
 "react-refresh@^0.8.3", "react-refresh@>=0.8.3 <0.10.0":
  "integrity" "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
@@ -10435,13 +10201,14 @@
    "loose-envify" "^1.4.0"
    "prop-types" "^15.6.2"
-"react@^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0", "react@^16.0.0 || ^17.0.0", "react@^16.8.0 || ^17.0.0", "react@^16.8.3 || ^17", "react@^17.0.0", "react@^17.0.1", "react@^17.0.2", "react@>= 16", "react@>= 16.8.0", "react@17.0.2":
+"react@^16.13.1", "react@>= 16":
-  "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
+  "integrity" "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w=="
-  "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
+  "resolved" "https://registry.npmjs.org/react/-/react-16.13.1.tgz"
-  "version" "17.0.2"
+  "version" "16.13.1"
  dependencies:
    "loose-envify" "^1.1.0"
    "object-assign" "^4.1.1"
    "prop-types" "^15.6.2"
 "reactour@^1.18.0":
  "integrity" "sha512-de0Pa5NkDU6I8IyGl+7+rWdDcx3AskmJYK/yIKU11D9EPIN79qzn852gjJgvH/jXZqeEfa+rmMWg72vA0UkmgA=="
@@ -10656,7 +10423,7 @@
  "resolved" "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz"
  "version" "2.3.0"
-"redux@^4.0.0", "redux@^4.0.5":
+"redux@^4.0.5":
  "integrity" "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w=="
  "resolved" "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz"
  "version" "4.0.5"
@@ -10664,15 +10431,6 @@
    "loose-envify" "^1.4.0"
    "symbol-observable" "^1.2.0"
 "refractor@^3.3.1":
  "integrity" "sha512-dBeD02lC5eytm9Gld2Mx0cMcnR+zhSnsTfPpWqFaMgUMJfC9A6bcN3Br/NaXrnBJcuxnLFR90k1jrkaSyV8umg=="
  "resolved" "https://registry.npmjs.org/refractor/-/refractor-3.4.0.tgz"
  "version" "3.4.0"
  dependencies:
    "hastscript" "^6.0.0"
    "parse-entities" "^2.0.0"
    "prismjs" "~1.24.0"
 "regenerate-unicode-properties@^8.2.0":
  "integrity" "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA=="
  "resolved" "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz"
@@ -10857,11 +10615,6 @@
  "resolved" "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
  "version" "1.0.0"
 "resize-observer-polyfill@^1.5.1":
  "integrity" "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
  "resolved" "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz"
  "version" "1.5.1"
 "resolve-cwd@^2.0.0":
  "integrity" "sha1-AKn3OHVW4nA46uIyyqNypqWbZlo="
  "resolved" "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz"
@@ -10963,37 +10716,6 @@
  "resolved" "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz"
  "version" "1.0.0"
 "rich-markdown-editor@^11.17.7":
  "integrity" "sha512-SFIMDz8xOrasOMeMiPyFShlldd3ta1TsIe9F4M3Gkej9UxGDsjBUbKux8NGEssZrxgYNxIh9GMYgM3+IJv+/1g=="
  "resolved" "https://registry.npmjs.org/rich-markdown-editor/-/rich-markdown-editor-11.17.7.tgz"
  "version" "11.17.7"
  dependencies:
    "copy-to-clipboard" "^3.0.8"
    "lodash" "^4.17.11"
    "markdown-it" "^12.2.0"
    "markdown-it-container" "^3.0.0"
    "outline-icons" "^1.26.1"
    "prosemirror-commands" "^1.1.6"
    "prosemirror-dropcursor" "^1.3.3"
    "prosemirror-gapcursor" "^1.1.5"
    "prosemirror-history" "^1.1.3"
    "prosemirror-inputrules" "^1.1.3"
    "prosemirror-keymap" "^1.1.4"
    "prosemirror-markdown" "^1.5.2"
    "prosemirror-model" "^1.13.3"
    "prosemirror-schema-list" "^1.1.2"
    "prosemirror-state" "^1.3.4"
    "prosemirror-tables" "^1.1.1"
    "prosemirror-transform" "1.2.5"
    "prosemirror-utils" "^0.9.6"
    "prosemirror-view" "1.18.1"
    "react-medium-image-zoom" "^3.1.3"
    "react-portal" "^4.2.1"
    "refractor" "^3.3.1"
    "resize-observer-polyfill" "^1.5.1"
    "slugify" "^1.4.0"
    "smooth-scroll-into-view-if-needed" "^1.1.29"
 "rimraf@^2.5.4":
  "integrity" "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w=="
  "resolved" "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz"
@@ -11058,11 +10780,6 @@
    "@types/node" "*"
    "acorn" "^7.1.0"
 "rope-sequence@^1.3.0":
  "integrity" "sha512-ku6MFrwEVSVmXLvy3dYph3LAMNS0890K7fabn+0YIRQ2T96T9F4gkFf0vf0WW0JUraNWwGRtInEpH7yO4tbQZg=="
  "resolved" "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.2.tgz"
  "version" "1.3.2"
 "rsvp@^4.8.4":
  "integrity" "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA=="
  "resolved" "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz"
@@ -11159,10 +10876,10 @@
  dependencies:
    "xmlchars" "^2.2.0"
-"scheduler@^0.20.2":
+"scheduler@^0.19.1":
-  "integrity" "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ=="
+  "integrity" "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA=="
-  "resolved" "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz"
+  "resolved" "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz"
-  "version" "0.20.2"
+  "version" "0.19.1"
  dependencies:
    "loose-envify" "^1.1.0"
    "object-assign" "^4.1.1"
@@ -11203,13 +10920,6 @@
    "ajv" "^6.12.5"
    "ajv-keywords" "^3.5.2"
 "scroll-into-view-if-needed@^2.2.28":
  "integrity" "sha512-8LuxJSuFVc92+0AdNv4QOxRL4Abeo1DgLnGNkn1XlaujPH/3cCFz3QI60r2VNu4obJJROzgnIUw5TKQkZvZI1w=="
  "resolved" "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.28.tgz"
  "version" "2.2.28"
  dependencies:
    "compute-scroll-into-view" "^1.0.17"
 "scroll-smooth@1.1.0":
  "integrity" "sha512-68OUOXKN/ykM/Dbp4Lhza3O9QQUuW/c01WTsZzDOUyVgb1I5QjT/awOHCCbuYTSV1QnExUQ9w+KcxmVxlXIiAg=="
  "resolved" "https://registry.npmjs.org/scroll-smooth/-/scroll-smooth-1.1.0.tgz"
@@ -11225,6 +10935,11 @@
  "resolved" "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz"
  "version" "2.0.0"
 "select@^1.1.2":
  "integrity" "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
  "resolved" "https://registry.npmjs.org/select/-/select-1.1.2.tgz"
  "version" "1.1.2"
 "selfsigned@^1.10.8":
  "integrity" "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w=="
  "resolved" "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz"
@@ -11381,11 +11096,6 @@
    "inherits" "^2.0.1"
    "safe-buffer" "^5.0.1"
 "shallowequal@^1.1.0":
  "integrity" "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
  "resolved" "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz"
  "version" "1.1.0"
 "shebang-command@^1.2.0":
  "integrity" "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo="
  "resolved" "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz"
@@ -11460,18 +11170,6 @@
    "astral-regex" "^2.0.0"
    "is-fullwidth-code-point" "^3.0.0"
 "slugify@^1.4.0":
  "integrity" "sha512-FkMq+MQc5hzYgM86nLuHI98Acwi3p4wX+a5BO9Hhw4JdK4L7WueIiZ4tXEobImPqBz2sVcV0+Mu3GRB30IGang=="
  "resolved" "https://registry.npmjs.org/slugify/-/slugify-1.6.0.tgz"
  "version" "1.6.0"
 "smooth-scroll-into-view-if-needed@^1.1.29":
  "integrity" "sha512-1/Ui1kD/9U4E6B6gYvJ6qhEiZPHMT9ZHi/OKJVEiCFhmcMqPm7y4G15pIl/NhuPTkDF/u57eEOK4Frh4721V/w=="
  "resolved" "https://registry.npmjs.org/smooth-scroll-into-view-if-needed/-/smooth-scroll-into-view-if-needed-1.1.32.tgz"
  "version" "1.1.32"
  dependencies:
    "scroll-into-view-if-needed" "^2.2.28"
 "snapdragon-node@^2.0.1":
  "integrity" "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw=="
  "resolved" "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz"
@@ -11599,11 +11297,6 @@
  "resolved" "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz"
  "version" "1.4.8"
 "space-separated-tokens@^1.0.0":
  "integrity" "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA=="
  "resolved" "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz"
  "version" "1.1.5"
 "spdx-correct@^3.0.0":
  "integrity" "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w=="
  "resolved" "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz"
@@ -11939,20 +11632,23 @@
    "loader-utils" "^2.0.0"
    "schema-utils" "^2.7.0"
-"styled-components@^5.0.0":
+"styled-components@^4.4.1":
-  "integrity" "sha512-F7VhIXIbUXJ8KO3pU9wap2Hxdtqa6PZ1uHrx+YXTgRjyxGlwvBHb8LULXPabmDA+uEliTXRJM5WcZntJnKNn3g=="
+  "integrity" "sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g=="
-  "resolved" "https://registry.npmjs.org/styled-components/-/styled-components-5.0.0.tgz"
+  "resolved" "https://registry.npmjs.org/styled-components/-/styled-components-4.4.1.tgz"
-  "version" "5.0.0"
+  "version" "4.4.1"
  dependencies:
    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.4.5"
+    "@babel/traverse" "^7.0.0"
-    "@emotion/is-prop-valid" "^0.8.3"
+    "@emotion/is-prop-valid" "^0.8.1"
-    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.0"
    "@emotion/unitless" "^0.7.4"
    "babel-plugin-styled-components" ">= 1"
-    "css-to-react-native" "^3.0.0"
+    "css-to-react-native" "^2.2.2"
-    "hoist-non-react-statics" "^3.0.0"
+    "memoize-one" "^5.0.0"
-    "shallowequal" "^1.1.0"
+    "merge-anything" "^2.2.4"
    "prop-types" "^15.5.4"
    "react-is" "^16.6.0"
    "stylis" "^3.5.0"
    "stylis-rule-sheet" "^0.0.10"
    "supports-color" "^5.5.0"
 "stylehacks@^4.0.0":
@@ -11964,6 +11660,16 @@
    "postcss" "^7.0.0"
    "postcss-selector-parser" "^3.0.0"
 "stylis-rule-sheet@^0.0.10":
  "integrity" "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
  "resolved" "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz"
  "version" "0.0.10"
 "stylis@^3.5.0":
  "integrity" "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
  "resolved" "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz"
  "version" "3.5.4"
 "supports-color@^5.3.0", "supports-color@^5.5.0":
  "integrity" "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow=="
  "resolved" "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
@@ -12175,6 +11881,11 @@
  "resolved" "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz"
  "version" "0.3.0"
 "tiny-emitter@^2.0.0":
  "integrity" "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
  "resolved" "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz"
  "version" "2.1.0"
 "tiny-invariant@^1.0.2":
  "integrity" "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
  "resolved" "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz"
@@ -12232,11 +11943,6 @@
    "regex-not" "^1.0.2"
    "safe-regex" "^1.1.0"
 "toggle-selection@^1.0.6":
  "integrity" "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
  "resolved" "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz"
  "version" "1.0.6"
 "toidentifier@1.0.0":
  "integrity" "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
  "resolved" "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz"
@@ -12420,11 +12126,6 @@
  "resolved" "https://registry.npmjs.org/typescript/-/typescript-4.2.3.tgz"
  "version" "4.2.3"
 "uc.micro@^1.0.1", "uc.micro@^1.0.5":
  "integrity" "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
  "resolved" "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz"
  "version" "1.0.6"
 "unbox-primitive@^1.0.0":
  "integrity" "sha512-P/51NX+JXyxK/aigg1/ZgyccdAxm5K1+n8+tvqSntjOivPt19gvm1VC49RWYetsiub8WViUchdxl/KWHHB0kzA=="
  "resolved" "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.0.tgz"
@@ -12762,11 +12463,6 @@
  dependencies:
    "browser-process-hrtime" "^1.0.0"
 "w3c-keyname@^2.2.0":
  "integrity" "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw=="
  "resolved" "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz"
  "version" "2.2.4"
 "w3c-xmlserializer@^1.1.2":
  "integrity" "sha512-p10l/ayESzrBMYWRID6xbuCKh2Fp77+sA0doRuGn4tTIMrrZVeqfpKjXHY+oDh3K4nLdPgNwMTVP6Vp4pvqbNg=="
  "resolved" "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz"
Author	SHA1	Message	Date
Mario Pesch	5901caa278	add multi interval feature	2021-04-22 15:28:30 +02:00
Mario Pesch	b74aef8167	update blockly to latest release	2021-04-22 15:28:12 +02:00